Skip to content

Commit

Permalink
fix prettier issues in README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
xeho91 committed Jun 26, 2024
1 parent 67c1bef commit f315b2f
Showing 1 changed file with 14 additions and 8 deletions.
22 changes: 14 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Restart your Storybook server for the changes to take effect.
## πŸ“ Usage

> [!NOTE]
> The documentation here does not cover all of Storybook's features, only the aspects that are specific to the addon and Svelte CSF. We recommend that you familiarize yourself with Storybook's core concepts at https://storybook.js.org/docs.
> The documentation here does not cover all of Storybook's features, only the aspects that are specific to the addon and Svelte CSF. We recommend that you familiarize yourself with Storybook's core concepts at <https://storybook.js.org/docs>.
The [`examples`](./examples/) directory contains examples describing each feature of the addon. The [`Button.stories.svelte` example](./examples/Button.stories.svelte) is a good one to get started with. [The Storybook with all the examples is published on Chromatic here](https://next--667492d3e52064f1d418ec95.chromatic.com).

Expand All @@ -60,16 +60,20 @@ All stories files must have a "meta" (aka. "default export") defined, and its st
```svelte
<script context="module">
// πŸ‘† notice the module context, defineMeta does not work in a regular <script> tag
import { defineMeta } from "@storybook/addon-svelte-csf";
import { defineMeta } from '@storybook/addon-svelte-csf';
import MyComponent from "./MyComponent.svelte";
import MyComponent from './MyComponent.svelte';
// πŸ‘‡ Get the Story component from the return value
const { Story } = defineMeta({
title: 'Path/To/MyComponent',
component: MyComponent,
decorators: [ ... ],
parameters: { ... },
decorators: [
/* ... */
],
parameters: {
/* ... */
},
});
</script>
```
Expand Down Expand Up @@ -158,11 +162,13 @@ If you only need a single template that you want to share, it can be tedious to

```svelte
<script context="module">
import { defineMeta, setTemplate } from "@storybook/addon-svelte-csf";
import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
// πŸ‘† import the function
import MyComponent from "./MyComponent.svelte";
import MyComponent from './MyComponent.svelte';
const { Story } = defineMeta({ ... });
const { Story } = defineMeta({
/* ... */
});
</script>
<script>
Expand Down

0 comments on commit f315b2f

Please sign in to comment.