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

1. Run npm run local-expose to expose the local npm package to other local projects

2. Navigate to root dir of desired project (where the package.json is located)

3. delete node_modules/.vite/deps directory if it exists (optionally delete package-lock.json)

4. Add optimizeDeps object to vite.config as shown below

export default defineConfig({
  optimizeDeps: {
    exclude: [
      "@greenbone/ui/dev"
    ],
    include: [
        "@greenbone/ui"
    ]
  },
  plugins: [react()]
})

We do this because our greenbone/ui library exports a commonjs module. When developing we access the ES6 module in the src folder and not the CJS modules which were build in the lib folder, therefore the ES6 modules dont need to be optimized by vite (which is basically converting it into one big chunk file and transpiling it into ES6 modules) The lib index file is still CJS and needs to be optimized by vite so we can access it in the frontend

5. Run npm link @greenbone/ui

6. Change import paths

• from @greenbone/ui
• to @greenbone/ui/dev

The library now gets mounted inside the node_modules folder of the target project node_modules/

7. For full Typescript support add the following to your tsconfig.json

{
    "paths": {
      "@greenbone/ui/dev": [
        "./node_modules/@greenbone/ui/src"
      ]
    }
}