Design system
This is the code implementation of the design system as according to the Figma designs.
Installation of the package in client application is done by creating a .npmrc
file in the repo with the following content:
@astron-sdc:registry=https://git.astron.nl/api/v4/packages/npm/
and running:
npm i @astron-sdc/design-system
The project is based on React, Typescript and Vite. It uses Tailwind for styling, and Storybook as documentation.
Aside from hosting the documentation at Astron, there is also an idea to publish this repository as a component library for other Astron apps to use:

Deployment
Deployment is automated via Gitlab CI/CD.
Test environment: https://sdc-dev.astron.nl/design-system/ Production environment: https://sdc.astron.nl/design-system/
Contact
This repository is maintained by Team Rainbow. Feel free to contact us on Slack!
Contributing
Install nodejs, clone the repository, then run
npm install
npm run storybook
to see the Storybook at http://localhost:6006/.
General documentation that is not related to any component in particular are written as .mdx
files in the src/docs/
directory, and can be viewed at http://localhost:6006/?path=/docs/.
Each component is paired with a story file, which is responsible for showcasing said component
on the Storybook. The story file for src/components/ComponentName
shall be found at
src/stories/ComponentName.stories.ts
.
How to
Icons
Download or copy the SVG code from Figma. Save it into src/assets/icons/your-file-name.svg
.
In the file, change the stroke color to currentColor
. This is to enable dynamic stroke colors.
Add an entry to the intex.ts
where you import the svg file, since this allows the bundler to pick-up the file correctly.
Add "your-file-name"
to iconNameOptions
array and the iconMap
dict of Icon.tsx
. Then, you can use your icon like this:
<Icon name="your-file-name" color="secondary" />
Colors
Since Tailwind does not support
dynamic class names, there are some functions in src/components/colors.ts
to help reduce boilerplate
code. They also convert the semantic color names in NextUI to the color names that we use in Figma.
Please use them (or add new ones there) as much as possible instead of supplying colors via another
manner. So we can keep the styling code consistent and organized.
Linting
The command npm run lint-staged-add
lints staged files and stages the changes. It is configured
as a pre-commit hook so in principle does not need to be manually run. There is also
npm run lint-changed
to lint changed but not added files.
Imports are sorted and absolute, but relative imports are allowed for siblings.
Please use semantic commit messages when committing, this is to enable automatic releases and changelogs.
Adding dependencies
All additional dependencies should be in the devDependencies
category. There should be nothing in
dependencies
.
Testing
Run the following command when you run tests for the first time or when playwright is updated:
npx playwright install
Also make sure you have a running instance of storybook on your localhost (see above).
npm run test-storybook
checks that all stories render without error. In each rendered story, there is also the Accessibility tab which shows whether the component complies with accessibility rules.
License
Apache License 2.0