npm package: @madecki_clearcode/design-system
Description: <div align="center"> <p>   <a href="https://github.com/ClearcodeHQ/ui-kit" rel="noopener" target="_blank"><img width="280" src="logo.png" alt="UI Kit logo"></a> </p>
Latest version: 1.0.0

<div align="center">
<p>
  <a href="https://github.com/ClearcodeHQ/ui-kit" rel="noopener" target="_blank"><img width="280" src="logo.png" alt="UI Kit logo"></a>
</p>

**UI Kit** is a React UI component libraries using Styled Components.
</div>

***

## Installation

### UI Kit

UI Kit is not yet available as a npm package therefore to use this library in another project you need to build it. We also suggest you to use `yarn` instead of `npm `

### Install Dependencies
After pulling project from repository you must install dependency.

```sh
yarn
```

### Build library
The next step is to build project.

```sh
yarn build
```

### Add to external project

**by dependency**

Add UI-Kit project to dependency. You don't know how to find path to UI-Kit? It's quite simple, you can use relative path or absolute path. If you would like to use relative path it will start with `../` and have directory name `ui-kit` for example. It means you go to the parent directory and ui-kit, full path looks like `../ui-kit`, however UI-Kit and your project must be in the same directory. You can also move up two or more directory `../../` etc.
```
-- Project
  -- ui-kit
  -- your_project
```

Absolute path depends on your system. On Windows can looks like `C:/` or `%USERPROFILE%/` etc. On Unix it can be `/Users/...` or `~projects/...` etc.


```json
{
  "dependencies": {
    "@clearcode/design-system": "file:../ui-kit"
  }
}
```

or add dependencies by CLI. Remember the library path depend on your local directory structure.

```sh
yarn add file:../ui-kit
```

**by link**

In library

```sh
yarn link
```

In project

```sh
yarn link @clearcode/design-system
```

Remember `link` is just temporary linking `ui kit` to your project and when you update some dependency or add new (in external project), you will need to use `yarn link @clearcode/design-system` again.

***

## Usage

**ThemeProvider**

First what you want to do is add `ThemeProvider` and `GlobalCSS` to your project. `ThemeProvider` propagate theme to all components   and `GlobalCSS` reset margins, paddings etc. from all elements.

```jsx
import ReactDOM from 'react-dom/client';
import { ThemeProvider, GlobalCSS } from "@clearcode/design-system"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider>
    <GlobalCSS />
    <App />
  </ThemeProvider>
);
```

**Use component**

Here is an example of a basic app using UI Kit H1 component:

```jsx
import { H1 } from "@clearcode/design-system"

const Header = ({...props}) => {
  return (
    <>
      ...
      <H1>Hello World</H1>
      ...
    </>
  )
}
```

**Override Theme**

Theme can be override by passing `theme` property in `ThemeProvider`. You can to pass whole theme object or use `createTheme` function to override only what you want. For example:

```jsx
import ReactDOM from 'react-dom/client';
import {ThemeProvider, GlobalCSS, createTheme } from "@clearcode/design-system"

const root = ReactDOM.createRoot(document.getElementById('root'));

const theme = createTheme({
    colors: {
      primary: {
        600: "#0000FF"
      }
    }
  }
)

root.render(
  <ThemeProvider theme={theme}>
    <GlobalCSS />
  </ThemeProvider>
);
```

***

## Other commands

### Launch Storybook

```sh
yarn storybook
```

Runs storybook app in the development mode.\
Open [http://localhost:6006/](http://localhost:6006) to view it in your browser.\
Storybook allows you to see and test all of available components and prepared templates

### Launch linters

```sh 
yarn lint
```
Runs eslint and type checking in the app.

```sh
yarn lint:css
```

Runs stylelint in the app.

***
## Git Flow

### Commit changes

To keep semantic commits, each commit message it's validated by commitlint:
Example commit message: `feat(UKD-01): commit subject/description` - where `feat` is a type, and `UKD-01` is a scope.

*Available types*:
  > * build: changes affecting build systems or external dependencies
  > * chore: updating grunt tasks etc.; no production code change
  > * docs: documentation-only changes (including storybook)
  > * feat: a new feature
  > * fix: a bug fix
  > * hotfix: required fixes for urgent fixes
  > * refactor: a code change that neither fixes a bug nor adds a feature
  > * release: updating version, tags etc
  > * test: adding missing tests or correcting existing tests
  
  *Scope*:
  > * must be a Jira ticket identifier (start with UKD-, ends with number)