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

in the design system repo you will also have to run to use the react version from the repo where the design system is being used

npm link ../myproject/node_modules/react
npm link ../myproject/node_modules/react-dom

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

  npm link @kroo-web/design-system

This will overwrite the package with the local version of the package and will update when rebuilt.

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

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.

Deployments of storybook

This app uses Terraform to manage the Amplify instance in AWS

To make a change, amend the /infra/service/amplify.tf file and then run the below:

  npm run terraform:plan
  npm run terraform:apply

Gotchas

You need to set the github token in the main.tf file

Deployments

Documentation on how the deployments work can be found here.