@apploi/ui

ui

npm pkg: @apploi/ui

This library exports our React components and our TailwindCSS style sheets.

Any app inside this monorepo can safely consume it.

If consumed by apps outside this monorepo there may be risk of CSS conflicts.

Storybook

We use Storybook to document our UI components and patterns.

To develop in Storybook, use nx run ui:storybook.

Storybook Documentation

Deploying Storybook

The production Storybook instance is built from the main branch and can be found here: Storybook

We use Chromatic to auto deploy new versions of Storybook: Chromatic App

To deploy a temporary instance of Storybook:

1. run yarn chromatic from the root directory.
2. go to the builds page
3. Approve the changes (if needed) and get the URL for your temporary Storybook instance

TailwindCSS

Tailwind is a CSS framework that's ideal for rapid prototyping and for shared use among our development teams.

How it Works

We generate a single stylesheet which is shared from this lib.

• Internal: libs/ui/src/lib/shared/tailwind.min.css.
• External: @apploi/ui/public/tailwind.min.css

The build process looks like this:

1. build script runs postcss
2. postcss calls plugins from postcss.config.js
3. tailwindcss plugin is called and reads from tailwind.config.js and index.css
4. classes and style rules are generated based on the customizations in the config and any rules or variables defined in index.css
5. the content field specifies the paths to all of our UI components and front end code from apploi-main and gandalf. Tailwind crawls these files for tailwind class names and defines only the class names used.

Developing with Tailwind

Tailwind v3.0 uses a just-in-time(JIT) compiler. This keeps our CSS file sizes low by only generating the classes & style rules that we actually use in code.

However, it's important to remember to generate an updated stylesheet whenever you use tailwind class names.

use the nx run ui:dev command to run both tailwind and storybook in watch mode. In watch mode, your code will be scanned for tailwind class names and the style sheet will be automatically updated.

• The css file can be built manually by running nx run ui:build-tailwind-css.

• Tailwind watch mode can be enabled with nx run ui:watch-tailwind-css.

Any of the utility classes from the Tailwind docs can be used.

Additional utilities may be defined in tailwind.config.js. See Storybook for more documentation on them.