This repository was built as a POC to handle a package-based monorepo with pnpm workspaces and storybook for components preview.
Stack used:
- React
- Typescript
- Storybook
- Tailwindcss
- cva
- clsx
- nx
The idea of using nx was to leverage it for the build system and of its generators, even though it was not implemented.
- Install dependencies
pnpm install
- Running the storybook
pnpm sb:run
- Add the
.npmrc
content. Example:
@voyager-ui:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken={{ your_token }}
- Publish to registry
// publish tailwind package
$ pnpm tailwind:publish
// publish core package
$ pnpm core:publish
Make sure to create an organization as voyager-ui, or to change the references to this organization name to publish under whatever name you like.
- Install the packages
$ pnpm add @voyager-ui/tailwind @voyager-ui/core
- Add the following to your
tailwind.config.js
import voyagerTailwind from "@voyager-ui/tailwind";
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{ts,tsx,html,js}",
voyagerTailwind.content(),
],
theme: {
...voyagerTailwind.theme(),
extend: {},
},
plugins: [],
};
- Add semantic release for automating packages release;
- Add husky and/or commitlint for commit linting and enhanement;
- Add chromatic for visual and interaction testing of the UI components