Issuix UI kit

UI kit for Issuix App

Available Scripts

In the project directory, you can run:

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Your library is ready to be deployed!

yarn storybook

It will run Storybook on localhost:6006

We are using Storybook to check and test changes we made. Be sure that you add stories for every component you develop.

yarn commit

To have beautiful commit messages, we are using Commitizen. If you do yarn commit, check your CLI and follow the steps.

Deploy new version

For the CI/CD purposes, we are using CircleCI. You can check CircleCi config file.

On every commit on the main branch which is following semantic release commit message rules, new version will be released.

Check the rules for commit messages -> Semantic release commit message rules

Deploy maintenance release

Say we have a 3.0.0 release that's current, but we don't want to work with the breaking changes it introduces and we just want to deploy a fix to our old 2.x.x version: this is the guide you should follow.

Read about maintenance releases here

You need to do the following steps

1. Create a new branch from the tag of the version you want to update
2. Update the .circleci config
3. Update the command line in package.json for semantic-release
4. Merge and push your changes into the branch you created

For example, let's say that the current release is 3.0.3, and we want to patch the old 2.3.1 release. These would be the steps:

1. git checkout -b 2.3.x v2.3.1
2. In the .circleci file, add an entry under both the release and build worksflows with the name of your branch (i.e. - 2.3.x)
3. In the package.json file, modify the branches parameter so that it includes the new branch (i.e. --branches main 2.3.x)
4. Either merge your branch into this branch (without deleting it, because you also need to merge it to main later), or cherry pick the commits if they are already on main

Use components

If you want to import component in your project

import {Button, Input} from "issuix-ui-kit-poc";

Use styles

If you want to import styles in your project, just import it in the index.css

@import url('issuix-ui-kit-poc/dist/cjs/bundle.css');

Link issuix-ui-kit with your frontend without deploying

In ui-kit run commands

yarn build
yarn link

Then run this command in frontend repo

yarn link "issuix-ui-kit"