Write your First Storybook Story
A storybook stories file includes a Meta object and one or more Story objects.
the Meta object defines the component that is used in the story.
the Story 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 Story.
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:.
Attention
make sure you have registered your Fluid Component as global Fluid namespace in your ext_ file. See FirstFluidComponent for
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.
See also
if you have more complex arguments than the basic string, bool etc. you need to use Transformers