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/styles/global.css' <-- this is the tokens

import '@kroo-web/design-system/dist/styles/styles/style.css' <-- this is the css modules

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 use npm pack to create a local tarball of the package:

# In the design system repo
npm run build  # Make sure to build the package first
npm pack       # This creates a .tgz file

Then in your project where you want to use the design system, you can install the local package:

# In your project directory
npm install /path/to/design-system/kroo-web-design-system-1.0.0.tgz

The exact filename will depend on your package version. This method will properly update your package.json and is more reliable than using npm link.

To update the package after making changes:

1. Make your changes in the design system
2. Run npm run build
3. Run npm pack again
4. Reinstall the new .tgz file in your project

Next Steps

Here are the key areas for improving and evolving the design system:

1. Token Management

• Create a separate @kroo-web/tokens package to manage design tokens independently
• Implement Token Studio integration with Figma for real-time token management
• Set up a CI/CD pipeline for automatic token updates from Figma to code
• Add support for theme switching (light/dark mode) using token sets
• Document token usage and naming conventions

2. Documentation Improvements

• Set up a documentation site using tools like Docusaurus or Storybook Docs
• Create comprehensive usage guidelines for each component
• Add accessibility documentation and WCAG compliance status
• Include interactive examples and code playgrounds
• Document component composition patterns and best practices
• Add visual regression testing documentation

3. Component Architecture

• Implement a more robust component composition system
• Add support for component variants using a consistent API
• Create higher-order components for common patterns
• Improve type definitions and prop documentation
• Add performance benchmarks for components

4. Testing and Quality

• Implement end-to-end testing using Cypress or Playwright
• Add visual regression testing with tools like Percy or Chromatic
• Improve unit test coverage
• Add accessibility testing using tools like axe-core
• Set up automated performance monitoring

5. Developer Experience

• Add better error messages and development-time warnings
• Create codemods for breaking changes

6. Design-Development Workflow

• Set up automated design token sync from Figma
• Implement a component request and review process
• Create a changelog automation system
• Add design system analytics to track component usage
• Establish a regular design system review process

7. Performance Optimization

• Add bundle size monitoring
• Optimize asset loading and delivery

Automated Changelog

We use Conventional Commits and Release-Please to automate our changelog generation.

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.