Skip to content

Commit

Permalink
Merge pull request #20053 from storybookjs/add-csf-2-to-3-banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@kylegach
kylegach authored Dec 5, 2022
2 parents e14ac8f + 7511fd0 commit 098664d
Show file tree
Hide file tree
Showing 73 changed files with 666 additions and 68 deletions.
42 changes: 21 additions & 21 deletions docs/addons/addon-knowledge-base.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,30 +49,30 @@ Addon authors can develop their UIs using any React library. But we recommend us

Use the components listed below with your next addon.

| Component | Source | Story |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Action Bar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/ActionBar/ActionBar.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-actionbar--single-item) |
| Addon Panel | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/addon-panel/addon-panel.tsx) | N/A |
| Badge | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Badge/Badge.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-badge--all-badges) |
| Button | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Button/Button.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-button--all-buttons) |
| Form | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/form/index.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-form-button--sizes) |
| Loader | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Loader/Loader.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-loader--progress-bar) |
| PlaceHolder | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/placeholder/placeholder.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-placeholder--single-child) |
| Scroll Area | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/ScrollArea/ScrollArea.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-scrollarea--vertical) |
| Space | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/spaced/Spaced.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-spaced--row) |
| Syntax Highlighter | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-syntaxhighlighter--bash) |
| Tabs | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/tabs/tabs.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tabs--stateful-static) |
| ToolBar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/bar/bar.tsx) | N/A |
| ToolTip | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/tooltip/Tooltip.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tooltip-tooltip--basic-default) |
| Zoom | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Zoom/Zoom.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-zoom--element-actual-size) |
| Component | Source | Story |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Action Bar | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/ActionBar/ActionBar.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-actionbar--single-item) |
| Addon Panel | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/addon-panel/addon-panel.tsx) | N/A |
| Badge | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Badge/Badge.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-badge--all-badges) |
| Button | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Button/Button.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-button--all-buttons) |
| Form | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/form/index.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-form-button--sizes) |
| Loader | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Loader/Loader.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-loader--progress-bar) |
| PlaceHolder | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/placeholder/placeholder.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-placeholder--single-child) |
| Scroll Area | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/ScrollArea/ScrollArea.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-scrollarea--vertical) |
| Space | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/spaced/Spaced.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-spaced--row) |
| Syntax Highlighter | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-syntaxhighlighter--bash) |
| Tabs | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/tabs/tabs.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-tabs--stateful-static) |
| ToolBar | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/bar/bar.tsx) | N/A |
| ToolTip | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/tooltip/Tooltip.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-tooltip-tooltip--basic-default) |
| Zoom | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Zoom/Zoom.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-zoom--element-actual-size) |

Complementing the components, also included is a set of UI primitives. Use the content listed below as a reference for styling your addon.

| Component | Source | Story |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) |
| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) |
| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) |
| Component | Source | Story |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/Colors) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-colorpalette--page) |
| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/icon/icons.tsx) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-icon--labels) |
| 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) |

<div class="aside">
The color palette implemented by <code>@storybook/components</code> is a high-level abstraction of the <a href="https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src"><code>@storybook/theming</code></a> package.
Expand Down
2 changes: 2 additions & 0 deletions docs/addons/addons-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,8 @@ Let's say you've got a story like this:
'angular/button-story-with-addon-example.ts.mdx',
'svelte/button-story-with-addon-example.js.mdx',
]}
usesCsf3
csf2Path="addons/addons-api#snippet-button-story-with-addon-example"
/>

<!-- prettier-ignore-end -->
Expand Down
6 changes: 4 additions & 2 deletions docs/addons/configure-addons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ For example, the [Pseudo States addon](https://storybook.js.org/addons/storybook
Use the [`useParameter`](./addons-api.md#useparameter) hook to access the parameter values within your addon.

```js
export const Hover = () => <Button>Label</Button>;
Hover.parameters = { pseudo: { hover: true } };
export const Hover = {
render: () => <Button>Label</Button>,
parameters: { pseudo: { hover: true } },
};
```

## Channels
Expand Down
2 changes: 2 additions & 0 deletions docs/addons/writing-addons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,8 @@ When Storybook was initialized, it provided a small set of example stories. Chan
'angular/button-story-with-addon-example.ts.mdx',
'svelte/button-story-with-addon-example.js.mdx',
]}
usesCsf3
csf2Path="addons/writing-addons#snippet-button-story-with-addon-example"
/>

<!-- prettier-ignore-end -->
Expand Down
Loading

0 comments on commit 098664d

Please sign in to comment.