KDesignSystem

Install

npm i @kyburz/kdesign-system

Run storybook

Install the dependencies from package.json:

yarn install

Then run storybook with yarn:

yarn storybook

Release storybook

1. Merge your branch to master
2. Increment version in package.json (line 3)
3. Run yarn release - it includes yarn deploy-storybook and yarn build-storybook
4. Commit file package.json to save new version
5. 🎉
6. On fleet_frontend: 7. Update kdesign version on package.json -> @kyburz/kdesign-system 7. Run yarn again, to build everything 8. Run yarn dev to run the app

Link to package on NPM

How to test changes in the Design System without publishing new version

1. Increment version in package.json (line 3)
2. Run yarn build:lib to make a build
3. Copy dist folder in the root of kdesign-system, go to the project fleet_frontend_v2 (or else) and replace old dist folder with new one (path /node_modules/kyburz/kdesign-system/dist)
4. Increment version of @kyburz/kdesign-system package in package.json file in project fleet_frontend_v2
5. Start fleet_frontend_v2 - changes should apply. If it's not working try to clean yarn cache

Theme Setup

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { ThemeProvider } from '@mui/styles';
import { theme } from '@kyburz/kdesign-system';
import 'typeface-roboto';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Try it out on Storybook

http://kyburzstorybook.s3-website-eu-west-1.amazonaws.com/?path=/docs/