@astrohaus/freewrite-ui NPM

Freewrite UI

React UI library for Astrohaus Freewrite.

🧰 Tech Stack

Core

Development

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`).