# 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](https://storybook.js.org/docs/react/get-started/introduction)

### Deploying Storybook

The production Storybook instance is built from the main branch and can be found here: [Storybook](https://main--611d0dde93672d003a70204f.chromatic.com)

We use Chromatic to auto deploy new versions of Storybook:
[Chromatic App](https://www.chromatic.com/builds?appId=611d0dde93672d003a70204f)

**To deploy a temporary instance of Storybook:**

1. run `yarn chromatic` from the root directory.
2. go to the [builds page](https://www.chromatic.com/builds?appId=611d0dde93672d003a70204f)
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-main.min.css`.
- External: `@apploi/ui/public/tailwind-main.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](https://tailwindcss.com/docs/utility-first) can be used.

Additional utilities may be defined in tailwind.config.js. See [Storybook](https://611d0dde93672d003a70204f-eicompdxjy.chromatic.com/?path=/docs/utilities--page) for more documentation on them.