mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +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
@ -38,4 +38,4 @@ const ExampleToolbar = () => {
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -22,4 +22,4 @@ const ThemePanel = props => {
|
||||
</AddonPanel>
|
||||
);
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -13,4 +13,4 @@ resetArgs((argNames: ['key']));
|
||||
|
||||
// To reset all args
|
||||
resetArgs();
|
||||
```
|
||||
```
|
||||
@ -43,5 +43,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
@ -54,4 +54,4 @@ Let's define a story for our `Badge` component
|
||||
<ArgsTable of={Badge} />
|
||||
|
||||
<!-- remainder story implementation -->
|
||||
```
|
||||
```
|
||||
@ -46,4 +46,4 @@ with unique URLs and isolated snapshot tests.
|
||||
</Badge>
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
```
|
||||
@ -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={{
|
||||
@ -64,4 +64,4 @@ with unique URLs which is great for review and testing.
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
```
|
||||
@ -8,4 +8,4 @@ export default {
|
||||
component: ButtonGroup,
|
||||
subcomponents: { Button },
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -10,4 +10,4 @@ export default {
|
||||
component: ButtonGroup,
|
||||
subcomponents: { Button },
|
||||
} as Meta;
|
||||
```
|
||||
```
|
||||
@ -9,4 +9,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -6,4 +6,4 @@
|
||||
handles: ['mouseover', 'click .btn'],
|
||||
},
|
||||
}} />
|
||||
```
|
||||
```
|
||||
@ -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'
|
||||
@ -37,4 +37,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -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'
|
||||
@ -41,4 +41,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -4,4 +4,4 @@
|
||||
<Story name="Primary" args={{ variant: 'primary' }}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
```
|
||||
@ -13,4 +13,4 @@
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
```
|
||||
@ -15,4 +15,4 @@ export default {
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -16,6 +16,5 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
// remainder story implementation
|
||||
|
||||
// Remainder story implementation
|
||||
```
|
||||
@ -6,4 +6,4 @@ export const Large = Template.bind({});
|
||||
Large.parameters = {
|
||||
controls: { hideNoControlsWarning: true },
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -10,4 +10,4 @@ export default {
|
||||
|
||||
// This is the only named export in the file, and it matches the component name
|
||||
export const Button = (args) => <ButtonComponent {...args} />;
|
||||
```
|
||||
```
|
||||
@ -2,4 +2,4 @@
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
<Meta title='Button' component={Button} parameters={{ actions: { argTypesRegex: '^on.\*' } }} />
|
||||
```
|
||||
```
|
||||
@ -2,4 +2,4 @@
|
||||
<!-- Button.stories.mdx -->
|
||||
|
||||
<Meta title='Button' argTypes={{ onClick: { action: 'clicked' } }} />
|
||||
```
|
||||
```
|
||||
@ -33,4 +33,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -35,4 +35,4 @@ export default {
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
```
|
||||
```
|
||||
@ -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,8 +16,8 @@ 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',
|
||||
@ -26,4 +26,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -10,4 +10,4 @@ CustomSource.parameters = {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -12,4 +12,4 @@ ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };
|
||||
|
||||
RegexExclude = Template.bind({})
|
||||
RegexExclude.parameters = { controls: { exclude: /^hello*/ } };
|
||||
```
|
||||
```
|
||||
@ -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
|
||||
|
||||
@ -10,4 +10,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -10,4 +10,4 @@
|
||||
},
|
||||
}}
|
||||
/>
|
||||
```
|
||||
```
|
||||
@ -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) {
|
||||
|
||||
@ -18,4 +18,4 @@ export const Template = (args) => <Badge {...args } />;
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
```
|
||||
@ -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 }
|
||||
|
||||
@ -10,4 +10,4 @@ module.exports = {
|
||||
"../src/preset.js" //👈 Our addon registered here
|
||||
]
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -2,6 +2,7 @@
|
||||
<!--- MyComponent.stories.mdx --->
|
||||
|
||||
<!--- This is your Story template function, shown here in React -->
|
||||
|
||||
<Meta
|
||||
title='MyComponent'
|
||||
decorators={[ ... ]}
|
||||
|
||||
@ -16,4 +16,4 @@ export const StoryWithLocale = (args, { globals: { locale } }) => {
|
||||
const caption = getCaptionForLocale(locale);
|
||||
return <>{caption}</>;
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -18,4 +18,4 @@ export const getCaptionForLocale = (locale) => {
|
||||
return <>{caption}</>;
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
```
|
||||
@ -2,10 +2,11 @@
|
||||
<!-- MyComponent.stories.mdx --->
|
||||
|
||||
import { Canvas } from '@storybook/addon-docs/blocks';
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
<Canvas>
|
||||
<h2>Some here</h2>
|
||||
<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({});
|
||||
|
||||
@ -16,4 +16,4 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -9,4 +9,4 @@ Large.parameters = {
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -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', () => {
|
||||
@ -18,4 +21,4 @@ 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', () => {
|
||||
@ -19,4 +20,4 @@ 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", () => {
|
||||
@ -22,4 +24,4 @@ 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
|
||||
|
||||
@ -18,4 +18,4 @@ addons.setConfig({
|
||||
collapsedRoots: ['other'],
|
||||
},
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -14,4 +14,4 @@ const argTypes = {
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -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
|
||||
],
|
||||
};
|
||||
```
|
||||
@ -5,4 +5,4 @@ module.exports = {
|
||||
stories: ['../src/**/*.stories.@(js|mdx)'],
|
||||
addons: ['@storybook/addon-essentials']
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -4,5 +4,4 @@
|
||||
module.exports = {
|
||||
stories: ['../my-project/src/components/*.@(js|md)'],
|
||||
};
|
||||
|
||||
```
|
||||
@ -11,4 +11,4 @@ module.exports = {
|
||||
</style>
|
||||
`);
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -29,4 +29,4 @@ module.exports = {
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -10,4 +10,4 @@ module.exports={
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -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,9 +2,9 @@
|
||||
// .storybook/main.js
|
||||
|
||||
export async function webpack(baseConfig, options) {
|
||||
//Modify or replace config.
|
||||
//Mutating the original reference object can cause unexpected bugs,
|
||||
//so in this example we replace.
|
||||
// Modify or replace config.
|
||||
// Mutating the original reference object can cause unexpected bugs,
|
||||
// so in this example we replace.
|
||||
const { module = {} } = baseConfig;
|
||||
|
||||
return {
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -7,4 +7,4 @@ import yourTheme from './YourTheme';
|
||||
addons.setConfig({
|
||||
theme: yourTheme,
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -2,9 +2,10 @@
|
||||
// ./storybook/manager.js
|
||||
|
||||
import { addons } from '@storybook/addons';
|
||||
|
||||
addons.setConfig({
|
||||
sidebar: {
|
||||
showRoots: false,
|
||||
},
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -17,4 +17,4 @@ const argTypes = {
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -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) => {
|
||||
|
||||
@ -7,4 +7,4 @@ export const parameters = {
|
||||
defaultViewport: 'someDefault',
|
||||
},
|
||||
}
|
||||
```
|
||||
```
|
||||
@ -16,4 +16,4 @@ export const parameters = {
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -8,11 +8,11 @@ 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,4 +2,4 @@
|
||||
// .storybook/preview.js
|
||||
|
||||
export const parameters = { docs: { page: null } };
|
||||
```
|
||||
```
|
||||
@ -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>
|
||||
|
||||
```
|
||||
```
|
||||
@ -19,4 +19,4 @@ const withThemeProvider=(Story,context)=>{
|
||||
)
|
||||
}
|
||||
export const decorators = [withThemeProvider];
|
||||
```
|
||||
```
|
||||
@ -4,5 +4,4 @@
|
||||
export const parameters = {
|
||||
viewport: { viewports: customViewports },
|
||||
};
|
||||
|
||||
```
|
||||
@ -8,4 +8,4 @@ export const parameters = {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -8,4 +8,4 @@ export const parameters = {
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -2,6 +2,7 @@
|
||||
// your-framework/src/server/index.ts
|
||||
|
||||
import { buildDev } from '@storybook/core/server';
|
||||
|
||||
import options from './options';
|
||||
|
||||
buildDev(options);
|
||||
|
||||
@ -3,4 +3,4 @@
|
||||
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
initStoryshots();
|
||||
```
|
||||
```
|
||||
@ -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');
|
||||
|
||||
@ -9,4 +9,4 @@ export default create({
|
||||
brandUrl: 'https://example.com',
|
||||
brandImage: 'https://place-hold.it/350x150',
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -38,4 +38,4 @@ export default create({
|
||||
brandUrl: 'https://example.com',
|
||||
brandImage: 'https://place-hold.it/350x150',
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -29,4 +29,4 @@ Success.parameters = {
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -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'],
|
||||
@ -31,4 +31,4 @@ const Template = ({ propertyA, propertyB, ...rest }) => {
|
||||
|
||||
return <YourComponent someProperty={someFunctionResult} {...rest} />;
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -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})=>{
|
||||
@ -44,4 +44,4 @@ export const Template = ({propertyA,propertyB,...rest})=>{
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
```
|
||||
@ -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'],
|
||||
@ -33,4 +33,4 @@ const Template: Story<YourComponentProps> = ({ propertyA, propertyB, ...rest })
|
||||
|
||||
return <YourComponent someProperty={someFunctionResult} {...rest} />;
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -10,4 +10,4 @@ export default {
|
||||
export const withAnImage = () => (
|
||||
<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />
|
||||
);
|
||||
```
|
||||
```
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
//👇 Your own default viewport
|
||||
defaultViewport: 'iphone6'
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export const MyStory = () => <div />;
|
||||
|
||||
@ -18,4 +18,4 @@ export const Template = (args) => <MyOtherComponent {...args} />
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
```
|
||||
@ -19,4 +19,4 @@ export const CustomFooter = Template.bind({});
|
||||
CustomFooter.args = {
|
||||
footer: 'Built with Storybook',
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -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