Skip to content

Commit

Permalink
Convert code snippets paths into a single path
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdedreuille
cdedreuille committed Jun 13, 2024
1 parent cbccc95 commit fdf0856
Show file tree
Hide file tree
Showing 154 changed files with 5,264 additions and 10,173 deletions.
36 changes: 8 additions & 28 deletions docs/addons/addon-knowledge-base.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,15 @@ To make that possible, you need to pass the `paramKey` element when you register

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-addon-disable-addon.js.mdx',
]}
/>
<CodeSnippets path="storybook-addon-disable-addon.md" />

{/* prettier-ignore-end */}

Then when adding a story, you can pass a disabled parameter.

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'angular/button-story-disable-addon.ts.mdx',
'web-components/button-story-disable-addon.js.mdx',
'web-components/button-story-disable-addon.ts.mdx',
'common/button-story-disable-addon.js.mdx',
'common/button-story-disable-addon.ts.mdx',
]}
/>
<CodeSnippets path="button-story-disable-addon.md" />

{/* prettier-ignore-end */}

Expand All @@ -47,9 +35,9 @@ If you don’t want to use Emotion, you can use inline styles or another css-in-

Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in `@storybook/components` to build addons faster. When you use Storybook components, you get:

- Battle-tested off-the-shelf components
- Storybook native look and feel
- Built-in support for Storybook theming
* Battle-tested off-the-shelf components
* Storybook native look and feel
* Built-in support for Storybook theming

Use the components listed below with your next addon.

Expand Down Expand Up @@ -79,9 +67,7 @@ Complementing the components, also included is a set of UI primitives. Use the c
| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-typography--all) |

<Callout variant="info">

The color palette implemented by `@storybook/components` is a high-level abstraction of the [`@storybook/theming`](https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src) package.

The color palette implemented by `@storybook/components` is a high-level abstraction of the [`@storybook/theming`](https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src) package.
</Callout>

### Build system
Expand All @@ -97,9 +83,7 @@ When you're developing your addon as a package, you can’t use `npm link` to ad
```

<Callout variant="info">

Run either `yarn` or `npm install` to install the addon.

Run either `yarn` or `npm install` to install the addon.
</Callout>

### Hot module replacement
Expand Down Expand Up @@ -128,11 +112,7 @@ If you're working on a preset that loads third-party addons, which you don't hav

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-addon-load-external-addons-preset.js.mdx',
]}
/>
<CodeSnippets path="storybook-addon-load-external-addons-preset.md" />

{/* prettier-ignore-end */}

Expand Down
26 changes: 7 additions & 19 deletions docs/addons/addon-migration-guide.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ title: Addon migration guide for Storybook 8.0
We sincerely appreciate the dedication and effort addon creators put into keeping the Storybook ecosystem vibrant and up-to-date. As Storybook evolves to version 8.0, bringing new features and improvements, this guide is here to assist you in migrating your addons from 7.x to 8.0. If you need to migrate your addon from an earlier version of Storybook, please first refer to the [Addon migration guide for Storybook 7.0](https://storybook.js.org/docs/7.6/addons/addon-migration-guide).

<Callout variant="info">

As we gather feedback from the community, we’ll update this page. We also have a general [Storybook migration guide](../migration-guide.md) if you’re looking for that.

As we gather feedback from the community, we’ll update this page. We also have a general [Storybook migration guide](../migration-guide.md) if you’re looking for that.
</Callout>

## Updating dependencies
Expand Down Expand Up @@ -44,9 +42,7 @@ To remove your addon's peer dependency on React and reduce its install size, do
For an example, see [the updates we've made to the Addon Kit](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c). These changes are optional but recommended.

<Callout variant="info">

This assumes your addon uses [tsup](https://tsup.egoist.dev/) for bundling. If your addon was built with an older version of the Addon Kit that uses Babel for bundling, you must first switch to tsup. For guidance, explore these older changes implemented in the Addon Kit [repository](https://github.com/storybookjs/addon-kit/pull/45/files).

This assumes your addon uses [tsup](https://tsup.egoist.dev/) for bundling. If your addon was built with an older version of the Addon Kit that uses Babel for bundling, you must first switch to tsup. For guidance, explore these older changes implemented in the Addon Kit [repository](https://github.com/storybookjs/addon-kit/pull/45/files).
</Callout>

### @storybook/components deprecations
Expand All @@ -71,28 +67,20 @@ As a workaround, update your documentation to tell users to opt-in to Babel supp

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-addon-compiler-babel-auto-install.npm.js.mdx',
'common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx',
'common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx',
]}
/>
<CodeSnippets path="storybook-addon-compiler-babel-auto-install.md" />

{/* prettier-ignore-end */}

## Migration Example

The Addon Kit [repository](https://github.com/storybookjs/addon-kit) has already been updated to support Storybook 8.0, and you can use it as a reference for your migration. You'll see the changes mentioned in this guide, including ESM support via the `type: module` configuration. As an addon maintainer, we encourage you to update your addon to include them. It simplifies the setup and makes it easier for users to use your addon with the latest version of Storybook. If you choose to follow along with the ESM migration, we've prepared an abbreviated list of changes below.

- [`package.json`](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519) for dependency management, ESM support and updates to the addon's entry points.
- [`tsup.config.ts`](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a2) for bundling changes, factoring in Storybook's globals.
- [`.storybook/local-preset.js`](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c#diff-390b53ea479b1ceffcbf31944f644ee23aa9f337b75a8a0ffd815bed50d376cb) to support the ESM migration.
* [`package.json`](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519) for dependency management, ESM support and updates to the addon's entry points.
* [`tsup.config.ts`](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a2) for bundling changes, factoring in Storybook's globals.
* [`.storybook/local-preset.js`](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c#diff-390b53ea479b1ceffcbf31944f644ee23aa9f337b75a8a0ffd815bed50d376cb) to support the ESM migration.

<Callout variant="info" icon="💡">

For a complete overview of the changes applied to the Addon Kit to fully support Storybook 8.0, see the following [diff view](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c).

For a complete overview of the changes applied to the Addon Kit to fully support Storybook 8.0, see the following [diff view](https://github.com/storybookjs/addon-kit/compare/79282986..fa7ee7c).
</Callout>

## Releasing
Expand Down
46 changes: 13 additions & 33 deletions docs/addons/addon-types.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@ Use this boilerplate code to add a new `Panel` to Storybook's UI:

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-addon-panel-example.js.mdx',
]}
/>
<CodeSnippets path="storybook-addon-panel-example.md" />

{/* prettier-ignore-end */}

Expand All @@ -36,22 +32,16 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-addon-toolbar-example.js.mdx',
]}
/>
<CodeSnippets path="storybook-addon-toolbar-example.md" />

{/* prettier-ignore-end */}

<Callout variant="info">
The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.md#conditionally-render-the-addon).

The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.md#conditionally-render-the-addon).

<hr style="margin: -0.75em 0 0.75em" />

The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
<hr style="margin: -0.75em 0 0.75em" />

The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
</Callout>

### Tabs
Expand All @@ -64,18 +54,12 @@ Use this boilerplate code to add a new `Tab` to Storybook's UI:

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-addon-tab-example.js.mdx',
]}
/>
<CodeSnippets path="storybook-addon-tab-example.md" />

{/* prettier-ignore-end */}

<Callout variant="info">

Learn how to write your own addon that includes these UI elements [here](./writing-addons.md).

Learn how to write your own addon that includes these UI elements [here](./writing-addons.md).
</Callout>

## Preset addons
Expand All @@ -86,18 +70,14 @@ Use this boilerplate code while writing your own preset addon.

{/* prettier-ignore-start */}

<CodeSnippets
paths={[
'common/storybook-preset-full-config-object.js.mdx',
]}
/>
<CodeSnippets path="storybook-preset-full-config-object.md" />

{/* prettier-ignore-end */}

**Learn more about the Storybook addon ecosystem**

- Types of addons for other types of addons
- [Writing addons](./writing-addons.md) for the basics of addon development
- [Presets](./writing-presets.md) for preset development
- [Integration catalog](./integration-catalog.md) for requirements and available recipes
- [API reference](./addons-api.md) to learn about the available APIs
* Types of addons for other types of addons
* [Writing addons](./writing-addons.md) for the basics of addon development
* [Presets](./writing-presets.md) for preset development
* [Integration catalog](./integration-catalog.md) for requirements and available recipes
* [API reference](./addons-api.md) to learn about the available APIs
Loading

0 comments on commit fdf0856

Please sign in to comment.