README

🔗 Welcome to @chaine/keychaine

Keychaine Components

React components for the Keychaine Design System

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:

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

Then follow documentation here from Octicons:

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:

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

Playroom

To view components in the playroom:

npm run playroom:start
# or
yarn playroom:start

To build:

npm run prepare

To run the development server:

npm run dev
# or
yarn dev

To run unit tests:

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).

...
"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

npx jest --clearCache

To-DO

[] Introducing Code Splitting (optional). See here

Usage no npm install needed!