# UI-Chakra

This is the foundational UI component library, built on top of [Chakra
UI](https://chakra-ui.com/).

It re-exports all of @chakra-ui/react, and also composite components that
address common requirements in BurnsRED projects. Components which have
third-party dependencies are defined in their own package.

To develop, fire up @burnsred/styleguide, and consume the UI library from there.

## Installing in a client project

```sh
npm i @burnsred/engage-ui
```

### Installing fonts

```sh
npm install @fontsource/open-sans @fontsource/montserrat
```

Include fonts:

```tsx
// src/App.tsx

// whichever weights required
import '@fontsource/montserrat/700.css';
import '@fontsource/open-sans/400.css';
```

Configure the theme:

```ts
// src/theme/index.ts
export const theme: Partial<ChakraTheme> = extendTheme({
  // ...

  fonts: {
    heading: `'Montserrat', sans-serif`,
    body: `'Open Sans', sans-serif`,
  },

  // ...
});
```

### Optional dependencies

```sh
# recommended - tree-shakable, includes Material icons and many more
# https://react-icons.github.io/react-icons/
npm i react-icons
```

## Developing

```sh
npm -w @burnsred/ui-chakra i
npm -w @burnsred/ui-chakra run dev
```

### Publishing to NPM

```sh
# merge feature to main, then
git checkout main

# build and test
npm -w @burnsred/ui-chakra i && \
  npm -w @burnsred/ui-chakra build && \
  npm -w @burnsred/ui-chakra test

# execute `npm version` from the package to avoid
# > npm ERR! notarget No matching version found for @burnsred/ui-chakra@^0.0.0
cd packages/ui-chakra

# https://docs.npmjs.com/cli/v8/commands/npm-version
npm version $version
npm run build

# Note that `npm version` does not git-tag in a monorepo - see comments below
git tag "@burnsred/ui-chakra/$version"
git push && git push --tags

npm login
npm publish
```

Success is indicated by the last line of output displaying the package and version number:

```sh
npm notice Publishing to https://registry.npmjs.org/ with tag latest and public access
+ @burnsred/ui-chakra@1.0.0-alpha
```

Additional reading: [How to publish packages to npm (the way the industry does things) | Zell Liew](https://zellwk.com/blog/publish-to-npm/)

#### Behaviour of `npm version` in a monorepo

> ...`npm version -w x` does not generate a git commit. The decision was made at
> the time of implementing npm version for workspaces to do this because the
> existing git tag config wasn't very conducive to workspaces.
>
> `tag-version-prefix` defaults to `v`, and is not something that can be templated
> or otherwise changed per workspace in a single command. Rather than block npm
> version for workspaces altogether it was implemented bypassing git tagging
> altogether.
>
> [[BUG] Wrong behaviour of `npm version` inside workspaces · Issue #4017 · npm/cli](https://github.com/npm/cli/issues/4017)

[[RRFC] `workspace-tag-version-prefix` config · Issue #570 · npm/rfcs](https://github.com/npm/rfcs/issues/570)

#### Tag naming conventions

> tags are organized in directories and files (all git references are, run
> `tree .git/refs/tags` to see that), so I would suggest naming the tags:
>
> ```
> myapp1/1.0.0
> myapp1/1.0.1
>  ...
> myapp2/2.1.0
> myapp2/2.2.0
> ```

> This will group versions for each app together, and some commands will treat
> the numbers "naturally"
>
> [git - Monorepo Version Tags Conventions - Stack Overflow](https://stackoverflow.com/questions/47316073/monorepo-version-tags-conventions)
