@astrohaus/freewrite-ui

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