Aan de slag met Storybook zonder JavaScript-framework

De installatie van Storybook

Voeg Storybook toe door de volgende opdracht in de terminal uit te voeren.

NPX SB INIT

Met deze opdracht worden alle afhankelijkheden voor Storybook toegevoegd en worden de eerste bestanden gemaakt, zodat je meteen aan de slag kunt.

Na installatie krijg je de vraag “Do you want to manually choose a Storybook project type to install?”. Op deze vraag antwoord je met “yes”.

De tweede vraag die je krijgt is “Please choose a project type from the list”, hierop antwoord je met “HTML”.

Nu zal de CLI alles klaarzetten om Storybook met gewone HTML te gebruiken.

Run npm run storybook wanneer de installatie is voltooid.

Algemene instellingen

Wanneer je je directory bekijkt, zie je een map .storybook. In deze map bevinden zich twee bestanden, main.js en preview.js .

In het bestand main.js kan je instellen in welke map wordt gecontroleerd op *.stories.js-bestanden (andere bestandsextensies zijn mogelijk). Storybook heeft ook een plug-insysteem genaamd addons die je hier ook kunt toevoegen.

In het preview.js-bestand kan je alles toevoegen dat moet worden geladen wanneer je een voorbeeld van je UI-componenten bekijkt. Voeg bijvoorbeeld je globale CSS-bestand of pictogramlettertype toe om het beschikbaar te hebben in alle component.

Voorbeeld storyfile voor gewone HTML

In de map stories vind je het bestand Button.stories.js. Het ziet er zo uit:

import { createButton } from './Button';

export default {
  title: 'Example/Button',
  argTypes: {
    label: { control: 'text' },
    primary: { control: 'boolean' },
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] },
    },
    onClick: { action: 'onClick' },
  },
};

const Template = ({ label, ...args }) => {
  // You can either use a function to create DOM elements or use a plain html string!
  // return `<div>${label}</div>`;
  return createButton({ label, ...args });
};

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Dit is een uitstekend voorbeeld van hoe een story file eruitziet. De code in Button.js maakt een < button>-element aan.

import './button.css';

export const createButton = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  onClick,
}) => {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.innerText = label;
  btn.addEventListener('click', onClick);

  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');

  btn.style.backgroundColor = backgroundColor;

  return btn;
};

Ook al ziet het er goed en duidelijk uit, de manier waarop de createButton een < button>-tag maakt, laat ons geen duidelijk codevoorbeeld genereren om te kopiëren en te plakken. Dus we gaan het een beetje anders doen.

Eenvoudige HTML-story met codevoorbeeld

Om dit te laten werken, hebben we een Storybook-add-on nodig. Voer de onderstaande code uit om het te installeren.

npm i @ storybook/addon-storysource

Voeg het na installatie toe aan het .storybook/main.js-bestand zoals hieronder.

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-storysource"
  ]
}

Maak vervolgens een map helpers in de verhalenmap. Maak in die map een bestand “code-example.js”. In dit bestand zullen we een helperfunctie maken die gegevens genereert voor ons codevoorbeeld.

function addCodeExample(component, templateConfig) {
  if(!component || !templateConfig) return

  component.parameters = {
    docs: {
      source: {
        code: templateConfig({
          label: component?.args?.label,
          className: component?.args?.className
        })
      }
    }
  }

  return component
}

export { addCodeExample }

In deze functie nemen we de component en de templateConfig als parameters. Deze parameters geven ons informatie van de componenten zelf.

Voor dit voorbeeld zal ik de lengte van de Button.stories.js minimaliseren door slechts één voorbeeld van een knop toe te voegen. Dus kopieer en plak de onderstaande code.

export default {
  title: 'Example/Button',
  argTypes: {
    label: { control: 'text' },
    className: { control: 'text' }
  },
};

const Template = ({ label, className }) => {
  return `<button class="${className}">${label}</button>`;
};

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
  className: 'button-primary',
};

Wanneer je de button-component bekijkt in Storybook, is jouw codevoorbeeld nog niet klaar om te knippen en te plakken.

Door de functie te gebruiken om dat voorbeeld te genereren, zie je het verschil.

import { addCodeExample } from './helpers/code-example'

export default {
  title: 'Example/Button',
  argTypes: {
    label: { control: 'text' },
    className: { control: 'text' }
  },
};

const Template = ({ label, className }) => {
  return `<button class="${className}">${label}</button>`;
};

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
  className: 'button-primary',
};
addCodeExample(Primary, Template)

Hier kan je zien dat ik Primary als de eerste parameter en Template aan de volgende heb toegevoegd. Dit genereert de eenvoudige HTML-code die je kunt kopiëren en plakken.

Conclusie

Nu je weet hoe je Storybook met gewone HTML en CSS moet gebruiken, kan je jouw UI-component veel beter maken!

Storybook is een geweldig hulpmiddel om in elke webtoepassing te gebruiken! Ik ben er super blij mee! Als je hun project op Github wilt bekijken en wat waardering wilt tonen, bekijk ze dan hier: https://github.com/storybookjs/storybook

Ben je ook van plan om Storybook te gebruiken met HTML? Laat het me weten!