Freewrite UI

React UI library for Astrohaus Freewrite.

🧰 Tech Stack

Core

• React
• TypeScript
• Vanilla-extract
• Radix

Development

• Storybook
• ESLint
• Prettier

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.

$ 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:

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

// ...

💻 Development

Getting started

$ 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 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