Write your First Storybook Story

A storybook stories file includes a Meta object and one or more StoryObj objects.

the Meta object defines the component that is used in the story.

the StoryObj object defines the story itself, including the arguments that are passed to the component.

to create your first story you only need to create a file with the Meta and one empty StoryObj.

this is a minimal example of a storybook story file:

import { type Meta, type StoryObj, fetchComponent } from '@andersundsehr/storybook-typo3';

/**
 * This is a simple card component that can be used to display title, text and add a link to that card.
 */
export default {
  component: await fetchComponent('de:card'),
} satisfies Meta;

export const Story1: StoryObj = {
  args: {},
};

you only need to change the component name to your Fluid component name, in this case de:card.

Now you can go into your Storybook UI, you will see an error if you have required arguments.

You than can go to the Story 1 view and set all required arguments.

After that you can save the updated arguments with the button: ✔️ Update story at the bottom of the page.