@voyager-ui

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.

Getting started

1. Install dependencies

pnpm install

2. Running the storybook

pnpm sb:run

Publishing to npm repository

1. Add the .npmrc content. Example:

@voyager-ui:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken={{ your_token }}

2. 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.

Using the packages in another app

1. Install the packages

$ pnpm add @voyager-ui/tailwind @voyager-ui/core

2. 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: [],
};

Further reading:

• Pnpm Workspace
• Adding Nx to NPM/Yarn/PNPM Workspace

Further enhancing:

• 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