Denne artikel beskriver brugen af Storybook især med hensyn til Angular.

NX

NX har mange fordele (monerepo etc.). Brug af nx workspace gør det også lidt simplere at få Storybook til at spille.

Da jeg fornylig tilføjer nx til en standalone angular applikation med

ng add @nrwl/angular

brokker Storybook sig når den skal genereres over at apps/app1/tsconfig.json mangler. Ved at kopiere indholdet fra apps/app1/tsconfig.app.json til tsconfig.json spillede det.

Endvidere skal man være opmærksom på at for at kunne bygge storybook (nx run MyApp:build-storybook) i nx worskspace har den brug for en linje i package.json:

  "scripts": {
    ...
    "build-storybook": "nx run-many --target=build-storybook --all"
  },

Global styling og fonts

Visse steder anbefales det at inkludere fonts i index.html. Dette betyder at de ikke slår igennem i Storybook. Husk derfor at definere dem i styles.scss:

@import '@fontsource/roboto';
@import 'material-icons/iconfont/material-icons.scss';

html {
    font-family: "Roboto";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
}

Endvidere anbefaler jeg at importere fonts og ikoner som NPM-pakker.

Endvidere for at få ovenstående til at spille skal project.json indeholde:

 "storybook": {
      ...
      "options": {
       ...
        "styles": [
          "./apps/MyApp/src/styles.scss"
        ]
      },
      ...
    },
    "build-storybook": {
      ...
      "options": {
        ...
        "styles": [
          "./apps/Kompetento3/src/styles.scss"
        ]
      },
      ...
    },