https://github.com/smakosh/ontwik-ui

ontwik-ui - A headless UI library
https://github.com/smakosh/ontwik-ui

components playground rollup styled-components theme tsdx typescript ui

Last synced: 3 months ago
JSON representation

ontwik-ui - A headless UI library

• Host: GitHub
• URL: https://github.com/smakosh/ontwik-ui
• Owner: smakosh
• License: mit
• Created: 2020-10-06T22:32:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-23T10:51:11.000Z (over 2 years ago)
• Last Synced: 2024-10-17T16:07:43.027Z (4 months ago)
• Topics: components, playground, rollup, styled-components, theme, tsdx, typescript, ui
• Language: TypeScript
• Homepage: https://ontwik-ui.smakosh.com
• Size: 704 KB
• Stars: 56
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ontwik-ui

A headless UI library and CLI theme generator

Powered by:

- 🏎 [Turborepo](https://turborepo.org) — High-performance build system for Monorepos

- 🚀 [React](https://reactjs.org/) — JavaScript library for user interfaces

- 🛠 [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild

- 📖 [Storybook](https://storybook.js.org/) — UI component environment powered by Vite

As well as a few others tools preconfigured:

- [TypeScript](https://www.typescriptlang.org/) for static type checking

- [Changesets](https://github.com/changesets/changesets) for managing versioning and changelogs

- [GitHub Actions](https://github.com/changesets/action) for fully automated package publishing

## Getting Started

[Docs](https://ontwik-ui.smakosh.com/)

### Useful Commands

- `yarn dev` - Run all packages locally and preview with Storybook

- `yarn build` - Build all packages including the Storybook site

- `yarn lint` - Lint all packages

- `yarn changeset` - Generate a changeset

- `yarn clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)

## Apps & Packages

This monorepo includes the following packages and applications:

- `apps/docs`: Component documentation site with Storybook

- `apps/public-docs`: Public Docs powered by [Nextra](https://nextra.vercel.app/)

- `packages/ontwik-ui`: Core React components

Each package and app is 90% [TypeScript](https://www.typescriptlang.org/). Yarn Workspaces enables us to "hoist" dependencies that are shared between packages to the root `package.json`. This means smaller `node_modules` folders and a better local dev experience. To install a dependency for the entire monorepo, use the `-W` workspaces flag with `yarn add`.

## Versioning & Publishing Packages

This repository uses [Changesets](https://github.com/changesets/changesets) to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediatley.

### Generating the Changelog

To generate your changelog, run `yarn changeset` locally:

1. **Which packages would you like to include?** – This shows which packages and changed and which have remained the same. By default, no packages are included. Press `space` to select the packages you want to include in the `changeset`.

1. **Which packages should have a major bump?** – Press `space` to select the packages you want to bump versions for.

1. If doing the first major version, confirm you want to release.

1. Write a summary for the changes.

1. Confirm the changeset looks as expected.

1. A new Markdown file will be created in the `changeset` folder with the summary and a list of the packages included.

### Releasing

When you push your code to GitHub, the [GitHub Action](https://github.com/changesets/action) will run the `release` script defined in the root `package.json`:

```bash

turbo run build --filter=docs^... --filter=public-docs^... && changeset publish

```

Turborepo runs the `build` script for all publishable packages (excluding docs & public-docs) and publishes the packages to npm.