This project contains all components for the new corporate design.

This project uses SWC for production builds and SWC for test compilation.

To create a production build use npm run build:source and npm run build:types.

This uses SWC to compile Typescript to JavaScript and TSC to generate the type definitions.

Why?

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

SWC: https://swc.rs/

To tun all tests run npm run test.

To start the storybook use npm run storybook.

For isolated component development inside the library, you can run storybook and edit the component's files.

npm run storybook

Common situation: Edit library component which is used in another frontend

At first you need to npm run build the UI library to transpile the TSX into valid JavaScript.

Link the UI library into your FE by changing the UI lib package version in your package.json to file:<relative-path> and the relative path from your FE's root dir to the UI lib root dir. e.g.

  "dependencies": {
    "@greenbone/cloud-resolve-os": "0.0.6",
    "@greenbone/ui": "file:../ui",
    "@mantine/core": "^6.0.21",

Now run npm install to install the local UI lib.

You can validate a successful linking by either checking the node_modules manually or check if you see the changes in the FE

If you run into typescript errors. Try to remove the node_modules/@types module from the UI libs node_modules.

This might happen because the modules imported from node_modules/@greenbone/ui use the types from node_modules/@greenbone/ui/node_modules/@types. This can cause duplication errors when using different type versions