## 🔗 Welcome to @chaine/keychaine

<p align="center">
  <img width="100%" src="/static/Thumbnail.svg">
</p>

<h1 align="center">Keychaine Components</h1>

<p align="center">React components for the Keychaine Design System</p>

## Documentation

Please stay tuned for detailed documentation. We just released this and are working hard to get out documentation hosted. Please reach out to us if you would like to contribute!

## Installation

Install @chaine/keychaine in your project with your package manager of choice:

```
npm install @chaine/keychaine

// or

yarn add @chaine/keychaine
```

## Publishing to NPM

### 1. `prepare-publish` command will get everything you need to publish to NPM.

```
yarn prepare-package
```

### 2. Change the version number in the package.json to a new verion.

### 3. Add to CHANGELOG.MD what was done

Do a quick dry-run:

```
npm publish --dry-run
```

Once that is done, just do:

```
npm publish -access public
```

## Folder structure

Make sure to follow this basic folder structure:

```
.gitignore
package.json
rollup.config.js
tsconfig.json
jest.config.js
jest.setup.ts
src/
  TestComponent/
    TestComponent.tsx
    TestComponent.types.tsx
    TestComponent.scss
    TestComponent.stories.tsx
    TestComponent.test.ts
  index.ts
```

### Icons (Octicons)

To use icons, import the following:

```ts
import { octicons } from '@chaine/keychaine/icons'
```

Then follow documentation [here from Octicons](https://primer.style/octicons/packages/react):

```ts
import React from 'react'
import {BeakerIcon, ZapIcon} from '@chaine/icons/octicons

export default function Icon({boom}) {
  return boom ? <ZapIcon /> : <BeakerIcon />
}
```

You can also use this with [Chakra's Icons](https://chakra-ui.com/docs/media-and-icons/icon#using-a-third-party-icon-library):

```ts
import { Icon } from '@chaine/keychaine/icons'
```

## Playroom

To view components in the playroom:

```bash
npm run playroom:start
# or
yarn playroom:start
```

To build:

```bash
npm run prepare
```

To run the development server:

```bash
npm run dev
# or
yarn dev
```

To run unit tests:

```bash
npm run test
# or
yarn dev
```

Author: AD

## Jest

`test` should be used on your CI/CD pipeline and `test:watch` should be used when you're running your tests locally (they will re-run whenever a file is changed).

```json
...
"scripts":
    {
        ....
        "test": "jest",
        "test:watch": "jest --watch",
        ....
    }
...
```

### Troubleshooting Jest

If you get an issue where it Jest is looking for a `.ts` file instead of the `.tsx` file (or vice-versa), just clear the jest cache:

```
jest --clearCache
```

or

```
npx jest --clearCache
```

## To-DO

- [] Introducing Code Splitting (optional). [See here](https://blog.harveydelaney.com/creating-your-own-react-component-library/)