GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into shilman/vue-cli-repro-templates

Browse Source
This commit is contained in:
Michael Shilman 2022-09-11 23:55:29 +08:00
commit 33a1d7deb4
23 changed files with 154 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
code/addons/docs/template/stories/docspage/basic.stories.ts vendored Normal file
View File

@ -0,0 +1,20 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
parameters: { chromatic: { disable: true } },
};
export const Basic = {
args: { children: 'Basic' },
};
export const Disabled = {
args: { children: 'Disabled in DocsPage' },
parameters: { docs: { disable: true } },
};
export const Another = {
args: { children: 'Another' },
};

30
code/addons/docs/template/stories/docspage/description.stories.ts vendored Normal file
View File

@ -0,0 +1,30 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Button,
// FIXME: remove array subcomponents in 7.0?
subcomponents: {
Pre: globalThis.Components.Pre,
},
args: { children: 'Click Me!' },
parameters: {
docs: {
description: {
component: '**Component** description',
},
},
chromatic: { disable: true },
},
};
export const Basic = {};
export const CustomDescription = {
parameters: {
docs: {
description: {
story: '**Story** description',
},
},
},
};

17
code/addons/docs/template/stories/docspage/extract-description.stories.ts vendored Normal file
View File

@ -0,0 +1,17 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
parameters: {
docs: {
// FIXME: this is typically provided by the renderer preset to extract
// the description automatically based on docgen info. including here
// for documentation purposes only.
extractComponentDescription: () => 'component description',
},
chromatic: { disable: true },
},
};
export const Basic = {};

12
code/addons/docs/template/stories/docspage/overflow.stories.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Pre,
args: {
text: 'Demonstrates overflow',
style: { width: 2000, height: 500, background: 'hotpink' },
},
parameters: { chromatic: { disable: true } },
};
export const Basic = {};

25
code/addons/docs/template/stories/docspage/override.stories.ts vendored Normal file
View File

@ -0,0 +1,25 @@
import globalThis from 'global';
// FIXME: do this using basic React functions for multi-framework
// once sandbox linking is working
//
// import { createElement } from 'react';
// import { Title, Primary } from '@storybook/addon-docs';
//
// const Override = () =>
// createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [
// createElement(Title),
// createElement(Primary),
// ]);
const Override = () => 'overridden';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
parameters: {
chromatic: { disable: true },
docs: { page: Override },
},
};
export const Basic = {};

43
code/addons/docs/template/stories/docspage/source.stories.ts vendored Normal file
View File

@ -0,0 +1,43 @@
import globalThis from 'global';
export default {
component: globalThis.Components.Button,
args: { children: 'Click Me!' },
parameters: { chromatic: { disable: true } },
};
export const Auto = {};
export const Disabled = {
parameters: {
docs: {
source: { code: null },
},
},
};
export const Code = {
parameters: {
docs: {
source: { type: 'code' },
},
},
};
export const Custom = {
parameters: {
docs: {
source: { code: 'custom source' },
},
},
};
export const Transform = {
parameters: {
docs: {
transformSource(src: string) {
return `// We transformed this!\nconst example = (\n${src}\n);`;
},
},
},
};

144
code/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
View File

@ -1,144 +0,0 @@
import React from 'react';
import { Title, Subtitle, Description, Primary, ArgsTable, Stories } from '@storybook/addon-docs';
import { DocgenButton } from '../../components/DocgenButton';
import BaseButton from '../../components/BaseButton';
import { ButtonGroup, SubGroup } from '../../components/ButtonGroup';
export default {
title: 'Addons/Docs/stories docs blocks',
component: DocgenButton,
parameters: {
docs: {
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<ArgsTable />
<Stories />
</>
),
},
},
};
export const DefDocsPage = () => <div>Default docs page</div>;
export const SmallDocsPage = () => <div>Just primary story, </div>;
SmallDocsPage.parameters = {
docs: {
page: () => (
<>
<Title />
<Primary />
</>
),
},
};
export const CheckBoxProps = () => <div>Primary props displayed with a check box </div>;
CheckBoxProps.parameters = {
docs: {
page: () => {
const [showProps, setShowProps] = React.useState(false);
return (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<label>
<input type="checkbox" checked={showProps} onChange={() => setShowProps(!showProps)} />
<span>display props</span>
</label>
{showProps && <ArgsTable />}
</>
);
},
},
};
export const CustomLabels = () => <div>Display custom title, Subtitle, Description</div>;
CustomLabels.parameters = {
docs: {
page: () => (
<>
<Title>Custom title</Title>
<Subtitle>Custom sub title</Subtitle>
<Description>Custom description</Description>
<Primary />
<ArgsTable />
<Stories title="Custom stories title" />
</>
),
},
};
export const CustomStoriesFilter = () => <div>Displays ALL stories (not excluding first one)</div>;
CustomStoriesFilter.parameters = {
docs: {
page: () => <Stories includePrimary />,
},
};
export const MultipleComponents = () => (
<ButtonGroup>
<DocgenButton label="one" />
<DocgenButton label="two" />
<DocgenButton label="three" />
</ButtonGroup>
);
MultipleComponents.storyName = 'Many Components';
MultipleComponents.parameters = {
component: ButtonGroup,
subcomponents: {
SubGroup,
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
},
docs: {
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary name="Many Components" />
<ArgsTable />
</>
),
},
};
export const ComponentsProps = () => <div>Display multiple prop tables in tabs</div>;
ComponentsProps.subcomponents = {
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
};
ComponentsProps.parameters = {
docs: {
page: () => (
<>
<Title>Multiple prop tables</Title>
<Description>
Here's what happens when your component has some related components
</Description>
<ArgsTable
components={{
'ButtonGroup Custom': ButtonGroup,
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
}}
/>
</>
),
},
};

52
code/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
View File

@ -1,52 +0,0 @@
import React from 'react';
import notes from '../notes/notes.md';
import mdxNotes from '../notes/notes.mdx';
import { DocgenButton } from '../../components/DocgenButton';
// const docsTitle = (title) => `Docs/${title}`;
export default {
// FIXME dynamic title
// title: `Addons/${docsTitle('stories')}`,
title: 'Addons/Docs/stories',
component: DocgenButton,
};
export const Basic = () => <div>Click docs tab to see basic docs</div>;
export const NoDocs = () => <div>Click docs tab to see no docs error</div>;
NoDocs.storyName = 'no docs';
NoDocs.parameters = { docs: { page: null } };
export const WithNotes = () => <div>Click docs tab to see DocsPage docs</div>;
WithNotes.storyName = 'with notes';
WithNotes.parameters = { notes };
export const WithInfo = () => <div>Click docs tab to see DocsPage docs</div>;
WithInfo.storyName = 'with info';
WithInfo.parameters = {
info: 'some user info string',
};
export const MdxOverride = () => <div>Click docs tab to see MDX-overridden docs</div>;
MdxOverride.storyName = 'mdx override';
MdxOverride.parameters = {
docs: { page: mdxNotes },
};
export const JsxOverride = () => <div>Click docs tab to see JSX-overridden docs</div>;
JsxOverride.storyName = 'jsx override';
JsxOverride.parameters = {
docs: { page: () => <div>Hello docs</div> },
};
export const DocsDisable = () => <div>This story shouldn't show up in DocsPage</div>;
DocsDisable.parameters = {
docs: { disable: true },
};
export const LargerThanPreview = () => <div style={{ width: 1000, background: 'pink' }}>HUGE</div>;

10
code/examples/official-storybook/stories/addon-docs/array-subcomponents.stories.js
View File

@ -1,10 +0,0 @@
import React from 'react';
import Button from '../../components/TsButton';
export default {
title: 'Addons/Docs/Subcomponents array',
component: Button,
subcomponents: [Button],
};
export const Basic = () => <Button>Bad subcomponents</Button>;

9
code/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js
View File

@ -1,9 +0,0 @@
// const getTitle = () => `Addons/Docs/${['dynamic title'][0]}`;
export default {
// FIXME dynamic title
// title: getTitle(),
title: 'Addons/Docs/dynamic title',
};
export const Basic = () => 'Story with title that is evaluated in runtime';

14
code/examples/official-storybook/stories/addon-docs/memo.stories.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import { MemoButton } from '../../components/MemoButton';
export default {
title: 'Addons/Docs/Memo',
component: MemoButton,
parameters: {
chromatic: { disable: true },
docs: { source: { type: 'dynamic' } },
},
};
export const DisplaysCorrectly = () => <MemoButton label="Hello memo World" />;
DisplaysCorrectly.storyName = 'Displays components with memo correctly';

13
code/examples/official-storybook/stories/addon-docs/mixed-leaves-component.stories.js
View File

@ -1,13 +0,0 @@
// This example exists solely to demonstrate nav hierarchy
// in --docs mode when a folder contains both a component and
// individual stories
//
// See also ./mixed-leaves-folder.stories.js
export default {
title: 'Addons/Docs/Mixed Leaves/Component',
parameters: { chromatic: { disable: true } },
};
export const B = () => 'b';
export const C = () => 'c';

12
code/examples/official-storybook/stories/addon-docs/mixed-leaves-folder.stories.js
View File

@ -1,12 +0,0 @@
// This example exists solely to demonstrate nav hierarchy
// in --docs mode when a folder contains both a component and
// individual stories
//
// See also ./mixed-leaves-component.stories.js
export default {
title: 'Addons/Docs/Mixed Leaves',
parameters: { chromatic: { disable: true } },
};
export const A = () => 'a';

36
code/examples/official-storybook/stories/addon-docs/source.stories.tsx
View File

@ -1,36 +0,0 @@
import React from 'react';
import Button from '../../components/TsButton';
export default {
title: 'Addons/Docs/Source',
component: Button,
argTypes: {
children: { control: 'text' },
type: { control: 'text' },
},
parameters: {
chromatic: { disable: true },
},
};
const Template = (args) => <Button {...args} />;
export const Basic = Template.bind({});
Basic.args = {
children: 'basic',
somethingElse: { a: 2 },
};
export const NoArgs = () => <Button>no args</Button>;
export const ForceCodeSource = Template.bind({});
ForceCodeSource.args = { ...Basic.args };
ForceCodeSource.parameters = { docs: { source: { type: 'code' } } };
export const CustomSource = Template.bind({});
CustomSource.args = { ...Basic.args };
CustomSource.parameters = { docs: { source: { code: 'custom source' } } };
export const NoSource = Template.bind({});
NoSource.args = { ...Basic.args };
NoSource.parameters = { docs: { source: { code: null } } };

17
code/examples/official-storybook/stories/addon-docs/subcomponents.stories.js
View File

@ -1,17 +0,0 @@
import React from 'react';
import { DocgenButton } from '../../components/DocgenButton';
import { ButtonGroup } from '../../components/ButtonGroup';
export default {
title: 'Addons/Docs/ButtonGroup',
component: ButtonGroup,
parameters: { viewMode: 'docs' },
subcomponents: { DocgenButton },
};
export const Basic = () => (
<ButtonGroup background="#eee">
<DocgenButton label="foo" />
<DocgenButton label="bar" />
</ButtonGroup>
);

25
code/examples/official-storybook/stories/addon-docs/transform-source.stories.js
View File

@ -1,25 +0,0 @@
export default {
title: 'Addons/Docs/transformSource',
parameters: {
docs: {
transformSource(src, ctx) {
return `// We transformed this!\n const example = ${src};`;
},
},
},
};
export const Code = () => 'StoryType "CODE" story which has source transformed';
Code.parameters = {
docs: { source: { type: 'code' } },
};
export const Dynamic = () => 'StoryType "DYNAMIC" story which has source transformed';
Dynamic.parameters = {
docs: { source: { type: 'dynamic' } },
};
export const Auto = () => 'StoryType "AUTO" story which has source transformed';
Dynamic.parameters = {
docs: { source: { type: 'auto' } },
};

24
code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx
View File

@ -1,24 +0,0 @@
import * as React from 'react';
import Button, { Type } from '../../components/TsButton';
export default {
title: 'Addons/Docs/TsButton',
component: Button,
parameters: {
viewMode: 'story',
},
};
type Story = () => any;
export const SimpleButton: Story = () => {
const x = 0;
return <Button>OK {x}</Button>;
};
const typeOptions = {
Default: 'default',
Action: 'action',
};
export const WithType = () => <Button type={typeOptions.Default as Type}>Label</Button>;

2
code/lib/api/src/modules/versions.ts
View File

@ -1,5 +1,5 @@
import global from 'global';
// @ts-expect-error no typedefs
// @ts-ignore (FIXME should be expect-error no typedefs but fails build --prep)
import semver from '@storybook/semver';
import memoize from 'memoizerific';

4
code/lib/builder-webpack5/src/index.ts
View File

@ -72,7 +72,7 @@ export const bail: WebpackBuilder['bail'] = async () => {
}
// we wait for the compiler to finish it's work, so it's command-line output doesn't interfere
return new Promise((res, rej) => {
// @ts-expect-error (Converted from ts-ignore)
// @ts-ignore (FIXME: should be expect-error but fails build --prep)
if (process && compilation) {
try {
compilation.close(() => res());
@ -219,7 +219,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
logger.trace({ message: '=> Preview built', time: process.hrtime(startTime) });
if (stats && stats.hasWarnings()) {
// @ts-expect-error (Converted from ts-ignore)
// @ts-ignore (FIXME should be @ts-expect-error but fails build --prep)
stats
.toJson({ warnings: true } as StatsOptions)
.warnings.forEach((e) => logger.warn(e.message));

2
code/lib/core-common/src/utils/envs.ts
View File

@ -1,4 +1,4 @@
// @ts-expect-error does not have defs, but universal-dotenv is in TS now
// @ts-ignore (FIXME should be "@ts-expect-error does not have defs, but universal-dotenv is in TS now" but fails build --prep)
import { getEnvironment } from 'lazy-universal-dotenv';
import { nodePathsToArray } from './paths';

2
code/lib/core-common/src/utils/normalize-stories.ts
View File

@ -15,7 +15,7 @@ const DEFAULT_FILES = '**/*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx
// TODO: remove - LEGACY support for bad glob patterns we had in SB 5 - remove in SB7
const fixBadGlob = deprecate(
(match: RegExpMatchArray) => {
// @ts-expect-error this will get removed later anyway
// @ts-ignore (FIXME should be "@ts-expect-error this will get removed later anyway" but fails build --prep)
return match.input.replace(match[1], `@${match[1]}`);
},
dedent`

2
code/lib/preview-web/src/render/StoryRender.ts
View File

@ -40,7 +40,7 @@ function createController(): AbortController {
return {
signal: { aborted: false },
abort() {
// @ts-expect-error (Converted from ts-ignore)
// @ts-ignore (should be @ts-expect-error but fails build --prep)
this.signal.aborted = true;
},
} as AbortController;

2
scripts/sandbox.ts
View File

@ -272,7 +272,7 @@ async function addStories(paths: string[], { mainConfig }: { mainConfig: ConfigF
.map(([p]) => ({
directory: path.join('..', '..', '..', 'code', p),
titlePrefix: p.split('/').slice(-4, -2).join('/'),
files: '*.stories.@(js|jsx|ts|tsx)',
files: '**/*.stories.@(js|jsx|ts|tsx)',
}));
mainConfig.setFieldValue(['stories'], [...stories, ...extraStories]);