Svelte Csf Demo

Demonstrating Svelte CSF (@storybook/addon-svelte-csf) vs regular CSF3

Storybook Svelte CSF Demo

This is a project demonstrating the usage of Svelte CSF as implemented in @storybook/addon-svelte-csf.

The purpose of this project is not to document the addon, nor to show off how great it is, but rather to compare the usage of Storybook's features between Svelte CSF and regular CSF3.

With this we're hoping to gain insights into how the features map to this alternative language, where it falls short and where it excels.

Overview

These are the following Storybook features we attempt to uncover in this project and their current conclusion:

Status	Feature	Links
⏳	`title`
⏳	`name`
⏳	`component`
⏳	`subcomponents`
⏳	`argTypes`
⏳	`args`
⏳	`parameters`
⏳	`beforeEach`
⏳	`loaders`
⏳	`decorators`
⏳	`render`
⏳	`play`
🟡	How to type the meta object and stories	PR, stories
🟡	JSDoc comments as descriptions (from component, meta and stories)	PR, stories
🟡	Docs, including autodocs, MDX docs and `useOf`	PR, stories
⏳	Non-story exports

⏳: No demo yet
✅: Demoed, no problems
🟡: Demoed, minor problems
🔴: Demoed, major problems

References

See the originally RFC for context about this demo project.
Published Storybook

Contributing

Everyone is welcome to contribute demonstrations of any of the above mentioned features, or other features that we might have missed, by opening pull requests.

A few guide lines:

One feature per pull request. Don't attempt to build demos for multiple features in the same pull request, it makes it harder to discuss the implementations and review them.
Don't ask to be assigned a feature. There's no need to be assigned a feature or to reserve it. If you want to contribute, just ask questions, open issues or pull requests. History shows that contributors being assigned to tasks often don't finish them, but still blocks other contributors from picking them up.
Be explicit in the demo's intend. Eg. if you're building a demo for argTypes, don't create a Button.svelte component and Button.stories.svelte stories and come up with examples for how to write argTypes for buttons. Instead, build an ArgTypes.svelte component and stories that clearly and only demonstrates argTypes.

See PR #1 for an example of all of this.

Prerequiristes

Node.js version >=18.20.2
pnpm version 9.1.0

Getting started

Install dependencies with pnpm install
Start Storybook with pnpm storybook

Top categories