Kroo Design System

Usage

First, install the package with whatever flavour of package manager that you would like.

Install

  npm install @kroo-web/design-system -S

or

  yarn add @kroo-web/design-system -S

or

  pnpm add @kroo-web/design-system -S

Tokens

Next, add the following the highest up in your application, usually in the App.js or index.js file.

This adds the tokens used in the design system to the root of the application. (the css modules come prebundled in the build this step is only for the tokens and odd global styles included in the design system).

import '@kroo-web/design-system/dist/styles/global.css';
// For using the icons package
import 'react-material-symbols/rounded';

That's all folks! You can now use the components in the design system in your application.

import { TextField } from '@kroo-web/design-system';

react-toastify

Our toasts have been styled via the design system however how the toast is displayed is handled by the react-toastify library. This means that you can use the toast function from react-toastify to display the toast in the project of your choosing and pass the Design System toast component to display it.

for setup you will need to add the ToastContainer component from react-toastify to the root of your project.

Testing without deploying the package

If you would like to test the design system without deploying the package you can run the following command in the root of the project.

  npm link

then in a project where the design system is being used run the following command.

This will overwrite the package with the local version of the package.

Note: Does not show up in the package.json it just replaces the node_modules package. this is so an unreleased version of the package cannot be deployed to prod (so after development make sure you npm install again to overwrite the local version of the package).

  npm link @kroo-web/design-system

Next Steps

This sways more on the side of component library rather than a design system due to the lack of tokens and living documentation. However, next steps would be to create a seperate package called @kroo-web/tokens allowing us to version the tokens and use them in the design system.

We could also use Token Studio with Figma to enable the designers to have control over the tokens allowing them to change the design system and see the changes in the design system in real time.