Gyldendals designsystem

Kobber

⚡ How to add components to your project

Install

npm install @gyldendal/kobber-components

Use

<script>
  import "@gyldendal/kobber-components/web-components";
</script>

<div class="kobber-theme-default">
  <kobber-button>Hello Kobber</kobber-button>
</div>

Tip

Check components readme on registering components, and adding fonts.

🖼️ How to add icons to your project

Install

npm install @gyldendal/kobber-icons

Use

<script>
  import "@gyldendal/kobber-icons/web-components";
</script>

<kobber-arrow_right />

Tip

Check icons readme on registering icons, and more options.

Always keep package version numbers the same

If you use more than one kobber package in your project: Remember to always keep all version numbers the same! Components has Icons as a dependency, so using different version numbers for Components and Icons is to ask for trouble.

Development

This monorepo contains all code related to Kobber. They share dependencies and common commands can be run from root using Turbo CLI syntax.

Prerequisites

• Node.js - Node latest LTS
• Corepack enabled (comes with Node.js): corepack enable

Quick Start - Component Development

# First time setup
yarn install  # Will prompt to download Yarn via Corepack - answer Y

# Start Storybook (main development environment)
# Runs dev server at http://localhost:6006 for /apps/storybook-web-components
yarn storybook

Components are in packages/kobber-components/src/. Edit files and see changes live in Storybook at http://localhost:6006.

Note

Storybook automatically builds dependencies (like CSS variables from design tokens in kobber-base) and has hot reload for component changes.

Run docs page locally

yarn install

# Build only this package and all its dependencies
yarn build -F @gyldendal/kobber-components

# Start docs dev server. Runs /apps/docs project locally (kobber.gyldendal.no)
yarn dev -F docs

Also requires an .env file in the docs folder with the following secrets in Keeper.

Run Storybook locally

yarn install

# Produce css variables from design tokens, required by components
yarn build -F @gyldendal/kobber-base

# runs the dev server for /apps/storybook-web-components (kobber-storybook.gyldendaldigital.no)
yarn storybook

Check Kobber integrations in consumer repos

yarn integration-checker

Uses the internal integration-checker tool to find Kobber imports across consumer repositories. Generates:

• .references.mts in kobber-base, kobber-components and kobber-icons for quick symbol lookups in editors
• CSV summaries in this folder

Test Kobber locally using import aliases

Methods such as npm link exist for testing NPM packages locally before deploying to the NPM registry.

Import aliases can also be used for developing Kobber locally in parallel with other projects.

In the project using Kobber, add import aliases that point to the local Kobber repo:

// vite.config.js

import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@gyldendal/kobber-base": resolve(import.meta.dirname, "../kobber/packages/kobber-base"),
      "@gyldendal/kobber-components": resolve(import.meta.dirname, "../kobber/packages/kobber-components/dist"),
    },
  },
});

Webpack also has a resolve.alias option.

After updating the config it might be necessary to run Vite with the force option: vite --force.