# Aklamio UI components library

`@aklamio/ui` is a collection of components

## Installation

In your project root run `pnpm i @aklamio/ui` or `npm i @aklamio/ui` or `yarn add @aklamio/ui`

### Usage

In the root level of your React App create theme and pass it into ThemeProvider and implement CssBaseLine for injecting the self-hosted fonts used in our library:

```typescript
import { createTheme, ThemeProvider, CssBaseline } from '@aklamio/ui';

const theme = createTheme();

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
    </ThemeProvider>
  );
};
```

Note: `theme` is an optional prop. If you won't pass it, `ThemeProvider` will use `defaultTheme`.

## Development

### Installation (run from the root folder):

1. Install pnpm globally: `npm i pnpm -g`
2. Install and use proper node version: `nvm install & nvm use`
3. Install dependencies: `pnpm i -r`

### Storybook

1. For local development run `pnpm run storybook` from `packages/ui` directory
2. To build storybook run `pnpm run build-storybook`. Then you can see build assets in `packages/ui/storybook-static` directory

### Build

To build the package run `pnpm run build` from `packages/ui` directory. Build assets will appear in `packages/ui/build` directory.

### Test

To run projects test complete `pnpm run test`from `packages/ui` directory.

### Publish

npm distribution (and version updating) is done via CI. The publishing job will be triggered when the MR is merged to master. Please follow the [commit convention](https://github.com/semantic-release/semantic-release#commit-message-format) to let `semantic-release` bump the version correctly.

### Linking package for local development

Sometimes during the UI Kit development you need to check the result locally before publich. In most cases you can use storybook for page hot reload, but sometimes you need to check it exact in the package consumer (for example, `myAwesomeProject`). To do that run following commands:

1. Build the package: `pnpm run build`
2. Create a global link for your local package `pnpm link`
3. Then go to the `myAwesomeProject` folder
4. Run `pnpm link @aklamio/ui`

After that `myAwesomeProject` will use local version of `@aklamio/ui` package. To unlink run `pnpm link @aklamio/ui`

You can use [this docs reference](https://pnpm.io/cli/link#pnpm-link-dir) for better commands understanding.
