Velkommen til Smudi - UDI sitt designsystem! 🥤

Dette prosjektet inneholder UDI sitt interne designsystem, "Smudi". Les dokumentasjon om Bruken av Smudi og komponentene i Storybook.

Designsystemet bygger på Digdir sitt designsystem og gir en felles base av React-komponenter og stilark som kan brukes på tvers av applikasjoner. Digdir sitt designsystem får du innebygget i Smudi-pakken, du trenger altså ikke laste ned dette selv. Vi skal bruke Aksel sitt ikon-bibliotek sammen med komponentene våre. Aksel er ikke en del av Smudi-pakken, denne må du laste ned selv.

Hvorfor designsystem?

Ved å bruke et designsystem kan vi sikre konsistente brukeropplevelser, gjenbrukbare komponenter og en effektiv utviklerhverdag. All utvikling og dokumentasjon skjer gjennom Storybook og Figma, som gir en visuell oversikt over komponentene og deres bruk.

Last ned Smudi

Vi er i tidlig fase av release av Smudi og vil gjerne ha dine tilbakemeldinger!

1. Pakken er tilgjengelig på npm: @smudi/designsystem
   • OBS - Legg merke til at pakken inkluderer Digdir sitt designsystem. Du trenger ikke laste ned dette selv.
2. Installer pakken med din pakkehåndterer, f.eks. pnpm add @smudi/designsystem.
3. Legg inn CSS globalt, enten i din globale css-fil eller:
   • I Next - Øverst i app/layout.tsx
   • I React - Øverst i src/main.tsx

 import '@smudi/designsystem/styles.css';

5. Bruk komponentene i koden slik:

   import { Alert, Heading, Paragraph, Link } from "@smudi/designsystem";
   
    export function ComponentExample() {
      return (
        <>
        <Alert data-color="warning">
          <Heading
            level={2}
            data-size="xs"
            style={{
              marginBottom: 'var(--ds-size-2)',
            }}>
            Søknadsfristen går ut om 3 dager
          </Heading>
          <Paragraph>
            Fristen for å søke opphold er 21. februar.
            <Link href="#">Søk nå</Link>
          </Paragraph>
        </Alert>
        </>
      );
    }

6. Bruk design-tokens i egen CSS slik:

    .customCard {
      background: var(--ds-color-surface-default);
      color: var(--ds-color-text-default);
      border: 1px solid var(--ds-color-border-subtle);
      border-radius: var(--ds-border-radius-md);
      padding: var(--ds-spacing-4);
    }

Henvendelser

• Spørsmål om bruk av designsystemet, komponenter og ønsker om nye komponenter skal sendes i Designsystemets Teams-kanal.

Stack

• React 19.2.1 - for UI-komponenter
• Storybook 10.2.10 - for dokumentasjon og visuell testing
• Typescript 5 - for type-sikker utvikling
• pnpm 10 - for pakkehåndtering
• @digdir/designsystemet-types og @digdir/designsystemet-react - grunnlaget for visuelle komponenter og typer
• Vitest + Playwright - for testing

Unit testing

Repoet bruker Vitest med to separate prosjekter, definert i vitest.config.js:

• unit – enhets-/integrasjonstester i filer som følger mønsteret *.test.ts/*.test.tsx (f.eks. utils/append-class-name.test.ts).

CI ("CI - Build & Deploy Storybook") kjører pnpm test (unit-testene) og deretter en Storybook-build (pnpm run build-storybook) automatisk på hver pull request mot dev/main, samt ved push til dev/main. Feiler pnpm test, stopper workflowen før Storybook bygges. Storybook-testene (pnpm test:storybook) kjøres foreløpig ikke automatisk i CI, så husk å kjøre disse lokalt ved behov før du åpner PR.

Teste pakken før publisering

Vi har en egen Next test-app i prosjektet, hvor du i page.tsx kan teste komponentene. Kjør med pnpm run dev. Test gjerne pakken i en ekstern test-app og/eller be et annet team teste pakken slik:

1. Vær i main-branch etter du er ferdig med å merge all ny funksjonalitet
2. pnpm build - bygg build-output mappen
3. pnpm pack - pakker buildmappen til en .zip-fil.
4. Enten i din lokale test-app eller hos en konsument, legg filen inn i prosjektet
5. I package.json, oppdater filpath: "@smudi/designsystem": "PATH-TIL-ZIP"
6. Importer komponenter o.l. som normalt fra "@smudi/designsystem"

Publisering (prodsetting)

Smudi publiseres som en offentlig pakke til npm under @smudi/designsystem. Publisering skjer ikke automatisk ved push/merge- den trigges manuelt av Smudi-teamet:

1. Sett ny versjon i package.json manuelt, i tråd med semver (fix → PATCH, feat → MINOR, BREAKING CHANGE → MAJOR).
2. Merge endringene inn i main.
3. Trigg workflowen "Publish to npm" (.github/workflows/publish-npm.yml) manuelt fra Actions-fanen på GitHub (workflow_dispatch).
4. Workflowen installerer avhengigheter, kjører pnpm run build (som først kjører tsc --noEmit, deretter vite build) og publiserer resultatet med npm publish --access public mot det offentlige npm-registeret.

Storybook-dokumentasjonen (denne finner du på smudi.udi.no) er en egen, uavhengig prosess: den bygges og deployes automatisk til Azure Web App via workflowen "CI - Build & Deploy Storybook" ved push til dev (dev-miljø) og main (prod-miljø) – dette skjer altså uavhengig av npm-publisering.

Se DEVELOPMENT.md for mer om lokalt utviklingsoppsett og branching/commit-konvensjoner.

Ønsker du å bidra til Designsystemet?

• Ta kontakt med Smudi-teamet på teams :-)
• Se CONTRIBUTING.md for retningslinjer om hvordan du bidrar.
• Se DEVELOPMENT.md for oppsett av utviklingsmiljø.
• Bruk pull_request_template.md når du oppretter en pull request.