Web design system for Kroo including the components for the marketing site and the product side.
npm install @kroo-web/design-systemFirst, install the package with whatever flavour of package manager that you would like.
``bash`
npm install @kroo-web/design-system -S
or
`bash`
yarn add @kroo-web/design-system -S
or
`bash`
pnpm add @kroo-web/design-system -S
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).
`jsx
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.
`jsx`
import { TextField } from "@kroo-web/design-system";
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.
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:
`bash`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:
`bash`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 buildnpm pack
3. Run again
4. Reinstall the new .tgz file in your project
Here are the key areas for improving and evolving the design system:
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$3
- 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
- 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$3
- 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$3
- Add better error messages and development-time warnings
- Create codemods for breaking changes$3
- 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$3
- Add bundle size monitoring
- Optimize asset loading and deliveryAutomated 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:`bash
npm run terraform:plan
npm run terraform:apply
`Gotchas
You need to set the github token in the
main.tf` fileDocumentation on how the deployments work can be found here.