Skip to content

README.md

Latest commit

 

History

History
136 lines (88 loc) · 4.62 KB

README.md

File metadata and controls

136 lines (88 loc) · 4.62 KB

Image KNIME® Design System Monorepo

This monorepo contains the KNIME Design System, including design tokens, icons, Vue components derived from the design tokens, and its documentation.

This repository is maintained by UI Core.

Demo

All available components, icons etc. can be seen here: https://master--68e8c00876b55a4f55c29090.chromatic.com/

Prerequisites

To get started, you need to have Proto installed, which acts as a version manager for Node.js and pnpm. Only once, after installed you need to run

proto install

Setup

Before running any scripts, you need to install the dependencies. Run the following command in the root of the monorepo:

pnpm install

Packages

The monorepo comprises the following packages:

  • @knime/kds-styles: Contains the design tokens and icons used across the KNIME Design System.
  • @knime/kds-components: Contains Vue components derived from the design tokens.
  • @knime/kds-documentation: Contains a Storybook instance that functions as the documentation for the design system and the components.

Important Scripts

Here are some of the most important scripts defined in the top-level package.json:

  • Dev: Starts the Storybook documentation in dev mode.

    pnpm dev

  • Format Code: Formats the code using Prettier.

    pnpm format

  • Lint Code: Lints the code using ESLint and Stylelint.

    pnpm lint

  • Security Check: Checks used dependencies for known vulnerabilities.

    pnpm run audit

  • Build Design Tokens: Builds the design tokens.

    pnpm build:tokens

Coding guidelines

See copilot-instructions.md.

Pull Request Commands

You can trigger certain CI tasks on-demand by commenting on a pull request:

  • /chromatic: Runs visual regression testing with Chromatic. Useful when you want to verify visual changes before merging.

AI assistance

Setup

Implement/verify a KDS component (Kds prefix)

  • select a component or a design in Figma, copy the URL including the node id
  • prompt into chat in Agent mode, e.g.:
    • Implement component: {{FigmaUrl}}
    • Verify if used design tokens match Figma: {{FigmaUrl}}
    • Create Storybook stories for component XYZ to match Figma: {{FigmaUrl}}

Migrate existing project/components to KDS

  • add both, knime-designsystem and the project you want to migrate, to the same workspace in VS Code
  • in the chat, select the wac-to-kds-migrator agent
  • it works best when migrating in little steps, e.g.
    • Migrate files in the folder XY or select individual files
    • Migrate all usages of @knime/components "Button" to migrate a specific component
    • Migrate all icons of @knime/styles

IntelliJ Setup

In case you are using IntelliJ IDEA as your IDE, please make sure to set the following options to avoid issues with the monorepo structure:

  • Mark packages/styles/dist/tokens/css as "Sources Root" (right-click on the folder in the Project Explorer) This allows IntelliJ to properly resolve the design token imports in the components package.
  • Install Copilot plugin Add the following commands to Github Copilot/Chat/Terminal Auto-approve settings:
    • pnpm -v
    • pnpm build
    • pnpm type-check
    • pnpm format
    • pnpm lint
    • ...

Maintaining changelogs & publishing to npm

Every PR with changes that should be published must include changeset file(s) out of which the CHANGELOG file of each package will get generated. Use the following command to create such files:

pnpm run changeset

Merge those files with the PR to master.

Publishing to npm

The release GitHub Action will automatically create & update a "Version Packages" PR if it detects changeset file(s) on master. Once a release should be published to npm, simply do merge this PR.

Join the Community!