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