# Freewrite UI

React UI library for Astrohaus Freewrite.

## 🧰 Tech Stack

### Core

- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vanilla-extract](https://vanilla-extract.style/)
- [Radix](https://www.radix-ui.com/)

### Development

- [Storybook](https://storybook.js.org/)
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)

## Getting started

> The UI Kit comes as an uncompiled TypeScript project. You need to configure your bundler
> to include `@astrohaus/freewrite-ui` from `node_modules` and process it during building.

```bash
$ npm i @astrohaus/freewrite-ui
$ npm i -D @vanilla-extract/css @vanilla-extract/css-utils @vanilla-extract/dynamic @vanilla-extract/recipes typescript
```

You can find an example of setting up a bundler in `examples/create-react-app`.
Basically, you need to setup a bundler to handle Vanilla-extract files and
TypeScript files.

Next, you need to add CSS reset and base CSS variables in your root component:

```js
import '@astrohaus/freewrite-ui/src/css/reset.css';
import '@astrohaus/freewrite-ui/src/css/root-theme.css';

// ...
```

## 💻 Development

### Getting started

```bash
$ npm i
$ npm run storybook
```

### Examples

There is an example of using `@astrohaus/freewrite-ui` in a project
bootstrapped with Create React App. Refer to its [README](./examples/create-react-app/README.md) to make it up and
running.

### Scripts

#### Development

| Script                    | Description                          |
| ------------------------- | ------------------------------------ |
| `npm run storybook`       | Starts Storybook development server. |
| `npm run storybook:build` | Builds Storybook for production.     |

#### Testing & Linting

| Script                    | Description                                           |
| ------------------------- | ----------------------------------------------------- |
| `npm run typecheck`       | Runs TypeScript and checks typing of source code.     |
| `npm run lint`            | Runs ESLint and lints all code.                       |
| `npm run prettier:format` | Runs Prettier and formats all code.                   |
| `npm run prettier:check`  | Runs Prettier and checks all code for bad formatting. |

#### Build

| Script                      | Description                                                                                |
| --------------------------- | ------------------------------------------------------------------------------------------ |
| `npm run build`             | Builds source code of `@astrohaus/freewrite-ui`, its types and outputs it to `lib` folder. |
| `npm run build:src`         | Builds source code of `@astrohaus/freewrite-ui` and outputs it to `lib` folder.            |
| `npm run build:watch-src`   | Watches source code for changes and builds it on changes.                                  |
| `npm run build:types`       | Builds types of source code and outputs them to `lib` folder.                              |
| `npm run build:watch-types` | Watches source code for changes and builds types on changes.                               |
| `npm run build:watch`       | Runs `build:watch-src` and `build:watch-types` concurrently.                               |
| `npm run build:clean`       | Removes the build output folder (`lib`).                                                   |

## 🚀 Production

### Publish

To publish the package, you first need to be signed in and have permissions:

```
$ npm login --scope=@astrohaus
```

Then you can publish the package to a registry:

```
$ npm publish --access public
```

You can also check what is going to be publish by running dry:

```
$ npm publish --dry-run
```