# Aklamio UI components library

`@aklamio/ui` is a collection of components

## Installation

### Prerequisites

1. Make sure you have installed `React@^17` and `ReactDOM@^17`. This is the requirement of `@mui@^5` library which is used as a root solution of `@aklamio/ui`.
2. Make sure you're using `pnpm@^6` as a package manager in your project. 

### Usage

1. In your project root run `pnpm i @aklamio/ui`

2. 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 and other general styles:

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

const theme = createTheme();

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

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

3. Import needed component from the library:

```typescript
import { Button } from '@aklamio/ui';

const User = () => {
  return (
    <div>
      // some JSX...
      <Button variant="primary" onClick={handleClick}>Submit</Button>
    </div>
  );
};
```

## 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 publish. 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.
