mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
Merge pull request #14836 from storybookjs/minor-fixes
Chore: (Docs snippets) Minor fixes and tweaks to the snippets
This commit is contained in:
jonniebigodes
GitHub
commit
f3744e29a2
@ -43,5 +43,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
@ -35,8 +35,8 @@ We can drop it in a `Canvas` to get a code snippet:
|
||||
</Canvas>
|
||||
|
||||
We can even preview multiple Stories in a block. This
|
||||
gets rendered as a group, but defines individual stories
|
||||
with unique URLs which is great for review and testing.
|
||||
gets rendered as a group but defines individual stories
|
||||
with unique URLs, which is great for review and testing.
|
||||
|
||||
<Canvas>
|
||||
<Story name="warning" args={{
|
||||
|
||||
@ -5,7 +5,7 @@ export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
// assigns the argTypes to the Colors category
|
||||
// Assigns the argTypes to the Colors category
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
table: {
|
||||
@ -17,19 +17,19 @@ export default {
|
||||
category: 'Colors'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Text category
|
||||
// Assigns the argType to the Text category
|
||||
label: {
|
||||
table: {
|
||||
category: 'Text'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Events category
|
||||
// Assigns the argType to the Events category
|
||||
onClick: {
|
||||
table: {
|
||||
category: 'Events'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Sizes category
|
||||
// Assigns the argType to the Sizes category
|
||||
size: {
|
||||
table: {
|
||||
category: 'Sizes'
|
||||
|
||||
@ -5,12 +5,12 @@ export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
// assigns the argTypes to the Colors category
|
||||
// Assigns the argTypes to the Colors category
|
||||
backgroundColor: {
|
||||
control: 'color',
|
||||
table: {
|
||||
category: 'Colors',
|
||||
// assigns the argTypes to a specific subcategory
|
||||
// Assigns the argTypes to a specific subcategory
|
||||
subcategory: 'Button colors'
|
||||
}
|
||||
},
|
||||
@ -26,14 +26,14 @@ export default {
|
||||
subcategory: 'Button contents'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Events category
|
||||
// Assigns the argType to the Events category
|
||||
onClick: {
|
||||
table: {
|
||||
category: 'Events',
|
||||
subcategory: 'Button Events'
|
||||
}
|
||||
},
|
||||
// assigns the argType to the Sizes category
|
||||
// Assigns the argType to the Sizes category
|
||||
size: {
|
||||
table: {
|
||||
category: 'Sizes'
|
||||
|
||||
@ -16,6 +16,5 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
// remainder story implementation
|
||||
|
||||
// Remainder story implementation
|
||||
```
|
||||
@ -4,7 +4,7 @@
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
export default {
|
||||
title: "MDX/Checkbox",
|
||||
title: 'MDX/Checkbox',
|
||||
component: Checkbox
|
||||
};
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ import { Checkbox } from './Checkbox';
|
||||
|
||||
# Checkbox
|
||||
|
||||
With `MDX` we can define a story for `Checkbox` right in the middle of our Markdown documentation.
|
||||
With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
|
||||
|
||||
<Canvas>
|
||||
<Story name="all checkboxes">
|
||||
|
||||
@ -8,7 +8,7 @@ import { Checkbox } from './Checkbox';
|
||||
|
||||
# Checkbox
|
||||
|
||||
With `MDX` we can define a story for `Checkbox` right in the middle of our
|
||||
With `MDX`, we can define a story for `Checkbox` right in the middle of our
|
||||
Markdown documentation.
|
||||
|
||||
<!--- This is your Story template function, shown here in React -->
|
||||
@ -35,5 +35,4 @@ export const Template = (args) => <Checkbox {...args} />
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
```
|
||||
@ -6,11 +6,11 @@ export default {
|
||||
component: Button,
|
||||
argTypes: {
|
||||
label: {
|
||||
description: 'overwritten description',
|
||||
description: 'Overwritten description',
|
||||
table: {
|
||||
type: {
|
||||
summary: 'something short',
|
||||
detail: 'something really really long'
|
||||
summary: 'Something short',
|
||||
detail: 'Something really really long'
|
||||
},
|
||||
},
|
||||
control: {
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'some component _markdown_',
|
||||
component: 'Some component _markdown_',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -16,7 +16,7 @@ export const WithStoryDescription = Template.bind({});
|
||||
WithStoryDescription.parameters = {
|
||||
docs: {
|
||||
description: {
|
||||
story: 'some story **markdown**',
|
||||
story: 'Some story **markdown**',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -11,10 +11,10 @@ export default {
|
||||
title: 'Button',
|
||||
argTypes: {
|
||||
arrow: {
|
||||
options: Object.keys(arrows), // an array of serializable values
|
||||
mapping: arrows, // maps serializable option values to complex arg values
|
||||
options: Object.keys(arrows), // An array of serializable values
|
||||
mapping: arrows, // Maps serializable option values to complex arg values
|
||||
control: {
|
||||
type: 'select', // type 'select' is automatically inferred when 'options' is defined
|
||||
type: 'select', // Type 'select' is automatically inferred when 'options' is defined
|
||||
labels: {
|
||||
// 'labels' maps option values to string labels
|
||||
ArrowUp: 'Up',
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
```md
|
||||
<!--- YourComponent.stories.mdx -->
|
||||
|
||||
<Story name="Array Include" parameters={{ controls: { include: ['foo', 'bar'] } }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// MyComponent.stories.js | MyComponent.stories.ts
|
||||
|
||||
import base from 'paths.macro';
|
||||
|
||||
export default {
|
||||
title: `${base}/Component`
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<!--- MyComponent.stories.mdx -->
|
||||
|
||||
import { ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
# My Component!
|
||||
|
||||
@ -20,5 +20,4 @@
|
||||
}}>
|
||||
<!--- story contents --->
|
||||
</Story>
|
||||
|
||||
```
|
||||
@ -10,5 +10,4 @@
|
||||
<Story name="story" decorators={[ ... ]} parameters={{ ... }} >
|
||||
...
|
||||
</Story>
|
||||
|
||||
```
|
||||
@ -2,6 +2,7 @@
|
||||
<!--- MyComponent.stories.mdx -->
|
||||
|
||||
import { Source } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
<Source
|
||||
@ -12,5 +13,4 @@ import dedent from 'ts-dedent';
|
||||
}
|
||||
`}
|
||||
/>
|
||||
|
||||
```
|
||||
@ -2,7 +2,9 @@
|
||||
<!--- Button.stories.mdx -->
|
||||
|
||||
import { Description } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
<Description of={Button} />
|
||||
|
||||
@ -8,5 +8,4 @@ import { Story } from "@storybook/addon-docs/blocks";
|
||||
And Markdown here
|
||||
|
||||
<Story id="some--id" />
|
||||
|
||||
```
|
||||
@ -2,6 +2,7 @@
|
||||
<!-- Button.stories.mdx --->
|
||||
|
||||
import { Story } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
<!--- This is your Story template function, shown here in React -->
|
||||
@ -11,5 +12,4 @@ export const Template = (args) => <Button {...args} />;
|
||||
<Story name="Basic" args={{ label: ‘hello’ }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
|
||||
```
|
||||
@ -2,6 +2,7 @@
|
||||
<!--- YourComponent.stories.mdx -->
|
||||
|
||||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { YourComponent } from './your-component'
|
||||
|
||||
<Meta
|
||||
|
||||
@ -14,7 +14,7 @@ export default async function fetch() {
|
||||
nextJson = null;
|
||||
}
|
||||
|
||||
// the decorator to be used in ./storybook/preview to apply the mock to all stories
|
||||
// The decorator to be used in ./storybook/preview to apply the mock to all stories
|
||||
|
||||
export function decorator(story, { parameters }) {
|
||||
if (parameters && parameters.fetch) {
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
// /my-addon/src/register.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
|
||||
const ADDON_ID = 'myaddon';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// /my-addon/src/preset.js
|
||||
|
||||
function managerEntries(entry = []) {
|
||||
return [...entry, require.resolve("./register")]; //👈 addon implementation
|
||||
return [...entry, require.resolve("./register")]; //👈 Addon implementation
|
||||
}
|
||||
|
||||
module.exports = { managerEntries }
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<!--- MyComponent.stories.mdx --->
|
||||
|
||||
<!--- This is your Story template function, shown here in React -->
|
||||
|
||||
<Meta
|
||||
title='MyComponent'
|
||||
decorators={[ ... ]}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<!-- MyComponent.stories.mdx --->
|
||||
|
||||
import { Canvas } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
<Canvas>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
export default {
|
||||
title: 'OtherFoo/Bar',
|
||||
id: 'Foo/Bar', // or 'foo-bar' if you prefer
|
||||
id: 'Foo/Bar', // Or 'foo-bar' if you prefer
|
||||
};
|
||||
|
||||
export const Baz = () => BarStory.bind({});
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
// addon-panel/register.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { useGlobals } from '@storybook/api';
|
||||
|
||||
addons.register('my/panel', () => {
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
// .storybook/my-addon/register.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { addons, types } from '@storybook/addons';
|
||||
|
||||
import { AddonPanel } from '@storybook/components';
|
||||
|
||||
const ADDON_ID = 'myaddon';
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// addon-tab/register.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import addons, { types } from '@storybook/addons';
|
||||
|
||||
addons.register('my/tab', () => {
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
// addon-toolbar/register.js
|
||||
|
||||
import React from "react";
|
||||
|
||||
import addons, { types } from "@storybook/addons";
|
||||
|
||||
import { Icons, IconButton } from '@storybook/components';
|
||||
|
||||
addons.register("my/toolbar", () => {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// /my-addon/register.js
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
|
||||
export const Panel = () => {
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
// your-framework/src/client/preview/index.ts
|
||||
|
||||
import { start } from '@storybook/core/client';
|
||||
|
||||
import './globals';
|
||||
|
||||
import render from './render';
|
||||
|
||||
const api = start(render);
|
||||
|
||||
// the boilerplate code
|
||||
|
||||
@ -5,7 +5,7 @@ module.exports = {
|
||||
stories: [],
|
||||
addons: [
|
||||
// Other Storybook addons
|
||||
'@storybook/addon-a11y', //👈 the addon registered here
|
||||
'@storybook/addon-a11y', //👈 The addon registered here
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -4,5 +4,4 @@
|
||||
module.exports = {
|
||||
stories: ['../my-project/src/components/*.@(js|md)'],
|
||||
};
|
||||
|
||||
```
|
||||
@ -3,8 +3,8 @@
|
||||
|
||||
module.exports = {
|
||||
addons: [
|
||||
'@storybook/addon-storysource/register', // a managerEntry
|
||||
'@storybook/addon-docs/preset', // a preset
|
||||
'@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon.
|
||||
'@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -2,7 +2,7 @@
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
// your Storybook configuration
|
||||
// Your Storybook configuration
|
||||
|
||||
webpackFinal: (config) => {
|
||||
config.resolve.alias['isomorphic-fetch'] = require.resolve('../__mocks__/isomorphic-fetch.js');
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// ./storybook/manager.js
|
||||
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
showRoots: false,
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
|
||||
module.exports = {
|
||||
managerWebpack: async (config, options) => {
|
||||
// update config here
|
||||
// Update config here
|
||||
return config;
|
||||
},
|
||||
managerBabel: async (config, options) => {
|
||||
// update config here
|
||||
// Update config here
|
||||
return config;
|
||||
},
|
||||
webpackFinal: async (config, options) => {
|
||||
|
||||
@ -8,9 +8,9 @@ export const globalTypes = {
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'circlehollow',
|
||||
// array of plain string values or MenuItem shape (see below)
|
||||
// Array of plain string values or MenuItem shape (see below)
|
||||
items: ['light', 'dark'],
|
||||
// property that specifies if the name of the item will be displayed
|
||||
// Property that specifies if the name of the item will be displayed
|
||||
showName: True,
|
||||
},
|
||||
},
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
<!-- .storybook/preview-head.html -->
|
||||
|
||||
<!-- Pull in static files served from your Static directory or the internet -->
|
||||
|
||||
<link rel=”preload” href=”your/font” />
|
||||
|
||||
<!-- Or you can load custom head-tag JavaScript: -->
|
||||
|
||||
<script src="https://use.typekit.net/xxxyyy.js"></script>
|
||||
<script>try{ Typekit.load(); } catch(e){ }</script>
|
||||
|
||||
```
|
||||
@ -4,5 +4,4 @@
|
||||
export const parameters = {
|
||||
viewport: { viewports: customViewports },
|
||||
};
|
||||
|
||||
```
|
||||
@ -2,6 +2,7 @@
|
||||
// your-framework/src/server/index.ts
|
||||
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
@ -5,10 +5,10 @@ import path from 'path';
|
||||
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
// the required import from the @storybook/addon-storyshots-puppeteer addon
|
||||
// The required import from the @storybook/addon-storyshots-puppeteer addon
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
|
||||
|
||||
// function to customize the snapshot location
|
||||
// Function to customize the snapshot location
|
||||
const getMatchOptions = ({ context: { fileName } }) => {
|
||||
// Generates a custom path based on the file name and the custom directory.
|
||||
const snapshotPath = path.join(path.dirname(fileName), 'your-custom-directory');
|
||||
|
||||
@ -17,7 +17,7 @@ export default {
|
||||
argTypes: {
|
||||
propertyA: {
|
||||
options: ['Item One', 'Item Two', 'Item Three'],
|
||||
control: { type: 'select' } // automatically inferred when 'options' is defined
|
||||
control: { type: 'select' } // Automatically inferred when 'options' is defined
|
||||
},
|
||||
propertyB: {
|
||||
options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
|
||||
|
||||
@ -9,7 +9,7 @@ import { YourComponent } from './your-component';
|
||||
|
||||
<!---👇 A function to apply some computations -->
|
||||
export const someFunction = (valuePropertyA, valuePropertyB) => {
|
||||
<!--- makes some computations and returns something -->
|
||||
<!--- Makes some computations and returns something -->
|
||||
};
|
||||
|
||||
export const Template = ({propertyA,propertyB,...rest})=>{
|
||||
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
argTypes: {
|
||||
propertyA: {
|
||||
options: ['Item One', 'Item Two', 'Item Three'],
|
||||
control: { type: 'select' } // automatically inferred when 'options' is defined
|
||||
control: { type: 'select' } // Automatically inferred when 'options' is defined
|
||||
},
|
||||
propertyB: {
|
||||
options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
|
||||
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
//👇 Your own default viewport
|
||||
defaultViewport: 'iphone6'
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export const MyStory = () => <div />;
|
||||
|
||||
@ -19,8 +19,8 @@ const Template = (args) => <DocumentScreen {...args} />;
|
||||
|
||||
export const Simple = Template.bind({});
|
||||
Simple.args = {
|
||||
user: PageLayout.Simple.user,
|
||||
document: DocumentHeader.Simple.document,
|
||||
subdocuments: DocumentList.Simple.documents,
|
||||
user: PageLayout.Simple.args.user,
|
||||
document: DocumentHeader.Simple.args.document,
|
||||
subdocuments: DocumentList.Simple.args.documents,
|
||||
};
|
||||
```
|
||||
@ -19,8 +19,8 @@ const Template: Story<DocumentScreenProps> = (args) => <DocumentScreen {...args}
|
||||
|
||||
export const Simple = Template.bind({});
|
||||
Simple.args = {
|
||||
user: PageLayout.Simple.user,
|
||||
document: DocumentHeader.Simple.document,
|
||||
subdocuments: DocumentList.Simple.documents,
|
||||
user: PageLayout.Simple.args.user,
|
||||
document: DocumentHeader.Simple.args.document,
|
||||
subdocuments: DocumentList.Simple.args.documents,
|
||||
};
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user