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

Merge branch 'next' into fix/dll-static-build

Browse Source
This commit is contained in:
Norbert de Langen 2020-04-15 10:38:20 +02:00 committed by GitHub
commit ca9a53c6fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
151 changed files with 4769 additions and 429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.js
View File

@ -17,6 +17,14 @@ module.exports = {
'import/no-extraneous-dependencies': 'off',
},
},
{
files: ['**/__testfixtures__/**'],
rules: {
'react/forbid-prop-types': 'off',
'react/no-unused-prop-types': 'off',
'react/require-default-props': 'off',
},
},
{ files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
{
files: ['**/*.stories.*'],

40
MIGRATION.md
View File

@ -18,6 +18,8 @@
- [Actions Addon API changes](#actions-addon-api-changes)
- [Actions Addon uses parameters](#actions-addon-uses-parameters)
- [Removed action decorator APIs](#removed-action-decorator-apis)
- [Removed addon centered](#removed-addon-centered)
- [Removed withA11y decorator](#removed-witha11y-decorator)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Using main.js](#using-mainjs)
@ -201,41 +203,41 @@ In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-
This breaking change currently applies to: `addon-a11y`, `addon-actions`, `addon-knobs`, `addon-links`, `addon-queryparams`.
Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
Consider the following `main.js` config for the accessibility addon, `addon-knobs`:
```js
module.exports = {
stories: ['../**/*.stories.js'],
addons: ['@storybook/addon-a11y'],
addons: ['@storybook/addon-knobs'],
};
```
In earlier versions of Storybook, this would automatically call `@storybook/addon-a11y/register`, which adds the the a11y panel to the Storybook UI. As a user you would also add a decorator:
In earlier versions of Storybook, this would automatically call `@storybook/addon-knobs/register`, which adds the the knobs panel to the Storybook UI. As a user you would also add a decorator:
```js
import { withA11y } from '../index';
import { withKnobs } from '../index';
addDecorator(withA11y);
addDecorator(withKnobs);
```
Now in 6.0, `addon-a11y` comes with a preset, `@storybook/addon-a11y/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator.
Now in 6.0, `addon-knobs` comes with a preset, `@storybook/addon-knobs/preset`, that does this automatically for you. This change simplifies configuration, since now you don't need to add that decorator.
If you wish to disable this new behavior, you can modify your `main.js` to force it to use the `register` logic rather than the `preset`:
```js
module.exports = {
stories: ['../**/*.stories.js'],
addons: ['@storybook/addon-a11y/register'],
addons: ['@storybook/addon-knobs/register'],
};
```
If you wish to selectively disable `a11y` checks for a subset of stories, you can control this with story parameters:
If you wish to selectively disable `knobs` checks for a subset of stories, you can control this with story parameters:
```js
export const MyNonCheckedStory = () => <SomeComponent />;
MyNonCheckedStory.story = {
parameters: {
a11y: { disable: true },
knobs: { disable: true },
},
};
```
@ -386,10 +388,28 @@ export const MyStory = () => <div>my story</div>;
MyStory.story = {
parameters: { layout: 'centered' },
};
```
Other possible values are: `padded` (default) and `fullscreen`.
#### Removed withA11y decorator
In 6.0 we removed the `withA11y` decorator. The code that runs accessibility checks is now directly injected in the preview.
Remove the addon-a11y decorator.
To configure a11y now, you have to specify configuration using `addParameters`.
```js
addParameters({
a11y: {
element: "#root",
config: {},
options: {},
manual: true,
}
};
```
## From version 5.2.x to 5.3.x
### To main.js configuration

3
addons/a11y/README.md
View File

@ -56,11 +56,8 @@ You can override these options [at story level too](https://storybook.js.org/doc
import React from 'react';
import { storiesOf, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'button',
decorators: [withA11y],
parameters: {
a11y: {
// optional selector which element to inspect

60
addons/a11y/src/a11yRunner.ts Normal file
View File

@ -0,0 +1,60 @@
import { document, window } from 'global';
import { STORY_RENDERED } from '@storybook/core-events';
import axe, { ElementContext, RunOptions, Spec } from 'axe-core';
import addons from '@storybook/addons';
import { EVENTS } from './constants';
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
interface Setup {
element?: ElementContext;
config: Spec;
options: RunOptions;
}
const channel = addons.getChannel();
let active = false;
const getElement = () => {
const storyRoot = document.getElementById('story-root');
return storyRoot ? storyRoot.children : document.getElementById('root');
};
const run = async (storyId: string) => {
try {
const input = getParams(storyId);
if (!active) {
active = true;
const {
element = getElement(),
config,
options = {
restoreScroll: true,
},
} = input;
axe.reset();
if (config) {
axe.configure(config);
}
const result = await axe.run(element, options);
channel.emit(EVENTS.RESULT, result);
}
} catch (error) {
channel.emit(EVENTS.ERROR, error);
} finally {
active = false;
}
};
const getParams = (storyId: string): Setup => {
// eslint-disable-next-line no-underscore-dangle
const { parameters } = window.__STORYBOOK_STORY_STORE__._stories[storyId] || {};
return parameters.a11y;
};
channel.on(STORY_RENDERED, run);
channel.on(EVENTS.REQUEST, run);

4
addons/a11y/src/components/A11YPanel.test.js
View File

@ -12,6 +12,8 @@ function createApi() {
jest.spyOn(emitter, 'emit');
jest.spyOn(emitter, 'on');
jest.spyOn(emitter, 'off');
emitter.getCurrentStoryData = () => ({ id: '1' });
return emitter;
}
@ -130,7 +132,7 @@ describe('A11YPanel', () => {
// then
expect(wrapper.text()).toMatch(/Please wait while the accessibility scan is running/);
expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST, '1');
});
it('should handle "ran" status', () => {

2
addons/a11y/src/components/A11YPanel.tsx
View File

@ -169,7 +169,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
status: 'running',
},
() => {
api.emit(EVENTS.REQUEST);
api.emit(EVENTS.REQUEST, api.getCurrentStoryData().id);
// removes all elements from the redux map in store from the previous panel
store.dispatch(clearElements());
}

116
addons/a11y/src/index.ts
View File

@ -1,119 +1,3 @@
import { document } from 'global';
import debounce from 'lodash/debounce';
import memoize from 'memoizerific';
import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
import addons, { DecoratorFunction } from '@storybook/addons';
import { STORY_RENDERED } from '@storybook/core-events';
import { Listener } from '@storybook/channels';
import { EVENTS, PARAM_KEY } from './constants';
interface Setup {
element?: ElementContext;
config: Spec;
options: RunOptions;
manual: boolean;
}
const setup: Setup = { element: undefined, config: {}, options: {}, manual: false };
const getElement = () => {
const storyRoot = document.getElementById('story-root');
if (storyRoot) {
return storyRoot.children;
}
return document.getElementById('root');
};
const performRun = (() => {
let isRunning = false;
return debounce(async (s, callback) => {
if (isRunning) {
return;
}
isRunning = true;
await run(s)
.then(
(result) => callback(undefined, result),
(error) => callback(error)
)
.then(() => {
isRunning = false;
});
}, 100);
})();
const run = async (input: Setup) => {
const {
element = getElement(),
config,
options = {
restoreScroll: true,
},
} = input;
await axe.reset();
if (config) {
await axe.configure(config);
}
return axe.run(element, options);
};
if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
let storedDefaultSetup: Setup | null = null;
const performSetup = (parameter: Partial<Setup> | undefined) => {
if (parameter) {
if (storedDefaultSetup === null) {
storedDefaultSetup = { ...setup };
}
Object.assign(setup, parameter);
}
if (storedDefaultSetup !== null) {
Object.assign(setup, storedDefaultSetup);
storedDefaultSetup = null;
}
};
const usePermanentChannel = memoize(1)((eventMap: Record<string, Listener>) => {
const channel = addons.getChannel();
const emit = channel.emit.bind(channel);
Object.entries(eventMap).forEach(([type, handler]) => {
channel.on(type, handler);
});
return emit;
});
export const withA11y: DecoratorFunction = (storyFn, storyContext) => {
const respond = () => {
const parameter = storyContext.parameters[PARAM_KEY] as Partial<Setup>;
performSetup(parameter);
performRun(setup, (error: Error, result: AxeResults) => {
if (error) {
emit(EVENTS.ERROR, String(error));
} else {
emit(EVENTS.RESULT, result);
}
});
};
const emit = usePermanentChannel({
[EVENTS.REQUEST]: respond,
[STORY_RENDERED]: respond,
});
return storyFn(storyContext);
};

7
addons/a11y/src/preset.ts Normal file
View File

@ -0,0 +1,7 @@
export function managerEntries(entry: any[] = []) {
return [...entry, require.resolve('./register')];
}
export function config(entry: any[] = []) {
return [...entry, require.resolve('./a11yRunner')];
}

3
addons/a11y/src/preset/addDecorator.ts
View File

@ -1,3 +0,0 @@
import { withA11y } from '../index';
export const decorators = [withA11y];

15
addons/a11y/src/preset/index.ts
View File

@ -1,15 +0,0 @@
type A11yOptions = {
addDecorator?: boolean;
};
export function managerEntries(entry: any[] = []) {
return [...entry, require.resolve('../register')];
}
export function config(entry: any[] = [], { addDecorator = true }: A11yOptions = {}) {
const a11yConfig = [];
if (addDecorator) {
a11yConfig.push(require.resolve('./addDecorator'));
}
return [...entry, ...a11yConfig];
}

127
addons/docs/docs/props-tables.md
View File

@ -7,10 +7,16 @@
Storybook Docs automatically generates props tables for components in supported frameworks. This document is a consolidated summary of prop tables, provides instructions for reporting bugs, and list known limitations for each framework.
- [Usage](#usage)
- [Args Controls](#args-controls)
- [DocsPage](#docspage)
- [MDX](#mdx)
- [Controls customization](#controls-customization)
- [Rows customization](#rows-customization)
- [Reporting a bug](#reporting-a-bug)
- [Known limitations](#known-limitations)
- [React](#react)
- [Fully support React.FC](#fully-support-reactfc)
- [Imported types](#imported-types)
- [Vue](#vue)
- [Angular](#angular)
- [Web components](#web-components)
@ -46,6 +52,127 @@ import { MyComponent } from './MyComponent';
<Props of={MyComponent} />
```
## Args Controls
Starting in SB 6.0, the `Props` block has built-in controls (formerly known as "knobs") for editing stories dynamically.
<center>
<img src="./media/props-tables-controls.png" width="100%" />
</center>
These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](#https://github.com/storybookjs/storybook/blob/next/docs/src/pages/formats/component-story-format/index.md#args-story-inputs) as its input.
### DocsPage
In DocsPage, simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
```js
export default {
title: 'MyComponent',
component: MyComponent,
};
export const Controls = (args) => <MyComponent {...args} />;
```
These controls can be [customized](#controls-customization) if the defaults don't meet your needs.
### MDX
In [MDX](./mdx.md), the `Props` controls are more configurable than in DocsPage. In order to show controls, `Props` must be a function of a story, not a component:
```js
<Story name="Controls">
{args => <MyComponent {...args} />}
</Story>
<Props story="Controls" />
```
### Controls customization
Under the hood, props tables are rendered from an internal data structure called `ArgTypes`. When you declare a story's `component` metadata, Docs automatically extracts `ArgTypes` based on the component's properties. We can customize this by editing the `argTypes` metadata.
For example, consider a `Label` component that accepts a `background` color:
```js
import React from 'react';
import PropTypes from 'prop-types';
export const Label = ({ label, borderWidth, background }) => <div style={{ borderWidth, background }}>{label}</div>;
Label.propTypes = {
label: PropTypes.string;
borderWidth: PropTypes.number;
background: PropTypes.string;
}
```
Given this input, the Docs addon will show a text editor for the `background` and a numeric input for the `borderWidth` prop:
<center>
<img src="./media/props-tables-controls-uncustomized.png" width="100%" />
</center>
But suppose we prefer to show a color picker for `background` and a numeric input for `borderWidth`. We can customize this in the story metadata's `argTypes` field (at the component OR story level):
```js
export default {
title: 'Label',
component: Label,
argTypes: {
background: { control: { type: 'color' } },
borderWidth: { control: { type: 'range', min: 0, max: 6 } },
},
};
```
This generates the following custom UI:
<center>
<img src="./media/props-tables-controls-customized.png" width="100%" />
</center>
Support controls include `array`, `boolean`, `color`, `date`, `range`, `object`, `text`, as well as a number of different options controls: `radio`, `inline-radio`, `check`, `inline-check`, `select`, `multi-select`.
To see the full list of configuration options, see the [typescript type defintions](https://github.com/storybookjs/storybook/blob/next/lib/components/src/controls/types.ts).
### Rows customization
In addition to customizing [controls](#controls-customization), it's also possible to customize `Props` fields, such as description, or even the rows themselves.
Consider the following story for the `Label` component from in the previous section:
```js
export const Batch = ({ labels, padding }) => (
<div style={{ padding }}>
{labels.map((label) => (
<Label key={label} label={label} />
))}
</div>
);
```
In this case, the args are basically unrelated to the underlying component's props, and are instead related to the individual story. To generate a prop table for the story, you can configure the Story's metadata:
```js
Batch.story = {
argTypes: {
labels: {
description: 'A comma-separated list of labels to display',
defaultValue: 'a,b,c',
control: { type: 'array' }
}
padding: {
description: 'The padding to space out labels int he story',
defaultValue: 4,
control: { type: 'range', min: 0, max: 20, step: 2 },
}
}
}
```
In this case, the user-specified `argTypes` are not a subset of the component's props, so Storybook shows ONLY the user-specified `argTypes`, and shows the component's props (without controls) in a separate tab.
## Reporting a bug
Extracting component properties from source is a tricky problem with thousands of corner cases. We've designed this package and its tests to accurately isolate problems, since the cause could either be in this package or (likely) one of the packages it depends on.

2
addons/docs/src/blocks/DocsPage.tsx
View File

@ -12,7 +12,7 @@ export const DocsPage: FC = () => (
<Subtitle />
<Description />
<Primary />
<Props />
<Props story="." />
<Stories />
</>
);

253
addons/docs/src/blocks/Props.tsx
View File

@ -1,83 +1,98 @@
import React, { FunctionComponent, useContext } from 'react';
/* eslint-disable no-underscore-dangle */
import React, { FC, useContext, useEffect, useState, useCallback } from 'react';
import mapValues from 'lodash/mapValues';
import {
PropsTable,
PropsTableError,
PropsTableProps,
PropsTableRowsProps,
PropsTableSectionsProps,
PropDef,
TabsState,
ArgsTable,
ArgsTableProps,
ArgsTableError,
ArgTypes,
TabbedArgsTable,
} from '@storybook/components';
import { Args } from '@storybook/addons';
import { StoryStore } from '@storybook/client-api';
import Events from '@storybook/core-events';
import { DocsContext, DocsContextProps } from './DocsContext';
import { Component, CURRENT_SELECTION } from './types';
import { getComponentName } from './utils';
import { ArgTypesExtractor } from '../lib/docgen/types';
import { lookupStoryId } from './Story';
import { PropsExtractor } from '../lib/docgen/types';
import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
import { extractProps as vueExtractProps } from '../frameworks/vue/extractProps';
interface PropsProps {
interface BaseProps {
exclude?: string[];
of?: '.' | Component;
components?: {
[label: string]: Component;
};
}
// FIXME: remove in SB6.0 & require config
const inferPropsExtractor = (framework: string): PropsExtractor | null => {
switch (framework) {
case 'react':
return reactExtractProps;
case 'vue':
return vueExtractProps;
default:
return null;
}
type OfProps = BaseProps & {
of: '.' | Component;
};
const filterRows = (rows: PropDef[], exclude: string[]) =>
rows && rows.filter((row: PropDef) => !exclude.includes(row.name));
type ComponentsProps = BaseProps & {
components: {
[label: string]: Component;
};
};
export const getComponentProps = (
component: Component,
{ exclude }: PropsProps,
{ parameters }: DocsContextProps
): PropsTableProps => {
if (!component) {
return null;
type StoryProps = BaseProps & {
story: '.' | string;
showComponents?: boolean;
};
type PropsProps = BaseProps | OfProps | ComponentsProps | StoryProps;
const useArgs = (storyId: string, storyStore: StoryStore): [Args, (args: Args) => void] => {
const story = storyStore.fromId(storyId);
if (!story) {
throw new Error(`Unknown story: ${storyId}`);
}
try {
const params = parameters || {};
const { framework = null } = params;
const { extractProps = inferPropsExtractor(framework) }: { extractProps: PropsExtractor } =
params.docs || {};
if (!extractProps) {
throw new Error(PropsTableError.PROPS_UNSUPPORTED);
}
let props = extractProps(component);
if (exclude != null) {
const { rows } = props as PropsTableRowsProps;
const { sections } = props as PropsTableSectionsProps;
if (rows) {
props = { rows: filterRows(rows, exclude) };
} else if (sections) {
Object.keys(sections).forEach((section) => {
sections[section] = filterRows(sections[section], exclude);
});
const { args: initialArgs } = story;
const [args, setArgs] = useState(initialArgs);
useEffect(() => {
const cb = (changedId: string, newArgs: Args) => {
if (changedId === storyId) {
setArgs(newArgs);
}
}
};
storyStore._channel.on(Events.STORY_ARGS_UPDATED, cb);
return () => storyStore._channel.off(Events.STORY_ARGS_UPDATED, cb);
}, [storyId]);
const updateArgs = useCallback((newArgs) => storyStore.updateStoryArgs(storyId, newArgs), [
storyId,
]);
return [args, updateArgs];
};
return props;
} catch (err) {
return { error: err.message };
const filterArgTypes = (argTypes: ArgTypes, exclude?: string[]) => {
if (!exclude) {
return argTypes;
}
return (
argTypes &&
mapValues(argTypes, (argType, key) => {
const name = argType.name || key;
return exclude.includes(name) ? undefined : argType;
})
);
};
export const extractComponentArgTypes = (
component: Component,
{ parameters }: DocsContextProps,
exclude?: string[]
): ArgTypes => {
const params = parameters || {};
const { extractArgTypes }: { extractArgTypes: ArgTypesExtractor } = params.docs || {};
if (!extractArgTypes) {
throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
}
let argTypes = extractArgTypes(component);
argTypes = filterArgTypes(argTypes, exclude);
return argTypes;
};
export const getComponent = (props: PropsProps = {}, context: DocsContextProps): Component => {
const { of } = props;
const { of } = props as OfProps;
const { parameters = {} } = context;
const { component } = parameters;
@ -86,60 +101,100 @@ export const getComponent = (props: PropsProps = {}, context: DocsContextProps):
if (of === CURRENT_SELECTION) {
return null;
}
throw new Error(PropsTableError.NO_COMPONENT);
throw new Error(ArgsTableError.NO_COMPONENT);
}
return target;
};
const PropsContainer: FunctionComponent<PropsProps> = (props) => {
const addComponentTabs = (
tabs: Record<string, ArgsTableProps>,
components: Record<string, Component>,
context: DocsContextProps,
exclude?: string[]
) => ({
...tabs,
...mapValues(components, (comp) => ({
rows: extractComponentArgTypes(comp, context, exclude),
})),
});
export const StoryTable: FC<StoryProps & { components: Record<string, Component> }> = (props) => {
const context = useContext(DocsContext);
const {
id: currentId,
parameters: { argTypes },
storyStore,
} = context;
const { story, showComponents, components, exclude } = props;
let storyArgTypes;
try {
let storyId;
if (story === CURRENT_SELECTION) {
storyId = currentId;
storyArgTypes = argTypes;
} else {
storyId = lookupStoryId(story, context);
const data = storyStore.fromId(storyId);
storyArgTypes = data.parameters.argTypes;
}
storyArgTypes = filterArgTypes(storyArgTypes, exclude);
const [args, updateArgs] = useArgs(storyId, storyStore);
let tabs = { Story: { rows: storyArgTypes, args, updateArgs } } as Record<
string,
ArgsTableProps
>;
if (showComponents) {
tabs = addComponentTabs(tabs, components, context, exclude);
}
return <TabbedArgsTable tabs={tabs} />;
} catch (err) {
return <ArgsTable error={err.message} />;
}
};
export const ComponentsTable: FC<ComponentsProps> = (props) => {
const context = useContext(DocsContext);
const { components, exclude } = props;
const tabs = addComponentTabs({}, components, context, exclude);
return <TabbedArgsTable tabs={tabs} />;
};
export const Props: FC<PropsProps> = (props) => {
const context = useContext(DocsContext);
const { components } = props;
const {
parameters: { subcomponents },
} = context;
const { exclude, components } = props as ComponentsProps;
const { story } = props as StoryProps;
let allComponents = components;
if (!allComponents) {
const main = getComponent(props, context);
const main = getComponent(props, context);
if (!allComponents && main) {
const mainLabel = getComponentName(main);
const mainProps = getComponentProps(main, props, context);
if (!subcomponents || typeof subcomponents !== 'object') {
return mainProps && <PropsTable {...mainProps} />;
}
allComponents = { [mainLabel]: main, ...subcomponents };
}
const tabs: { label: string; table: PropsTableProps }[] = [];
Object.entries(allComponents).forEach(([label, component]) => {
tabs.push({
label,
table: getComponentProps(component, props, context),
});
});
if (story) {
return <StoryTable {...(props as StoryProps)} components={allComponents} />;
}
return (
<TabsState>
{tabs.map(({ label, table }) => {
if (!table) {
return null;
}
const id = `prop_table_div_${label}`;
return (
<div key={id} id={id} title={label}>
{({ active }: { active: boolean }) =>
active ? <PropsTable key={`prop_table_${label}`} {...table} /> : null
}
</div>
);
})}
</TabsState>
);
if (!components && !subcomponents) {
let mainProps;
try {
mainProps = { rows: extractComponentArgTypes(main, context, exclude) };
} catch (err) {
mainProps = { error: err.message };
}
return <ArgsTable {...mainProps} />;
}
return <ComponentsTable exclude={exclude} components={allComponents} />;
};
PropsContainer.defaultProps = {
of: '.',
Props.defaultProps = {
of: CURRENT_SELECTION,
};
export { PropsContainer as Props };

2
addons/docs/src/blocks/Source.tsx
View File

@ -40,7 +40,7 @@ export const getSourceProps = (
source = targetIds
.map((sourceId) => {
const data = storyStore.fromId(sourceId);
const enhanced = enhanceSource(data);
const enhanced = data && enhanceSource(data);
return enhanced?.docs?.source?.code || '';
})
.join('\n\n');

35
addons/docs/src/blocks/Story.tsx
View File

@ -1,7 +1,7 @@
import React, { createElement, ElementType, FunctionComponent, ReactNode } from 'react';
import { MDXProvider } from '@mdx-js/react';
import { components as docsComponents } from '@storybook/components/html';
import { Story, StoryProps as PureStoryProps } from '@storybook/components';
import { Story as PureStory, StoryProps as PureStoryProps } from '@storybook/components';
import { toId, storyNameFromExport } from '@storybook/csf';
import { CURRENT_SELECTION } from './types';
@ -39,22 +39,23 @@ const inferInlineStories = (framework: string): boolean => {
}
};
export const getStoryProps = (
props: StoryProps,
{ id: currentId, storyStore, mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps | null
): PureStoryProps => {
export const lookupStoryId = (
storyName: string,
{ mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps
) =>
toId(
mdxComponentMeta.id || mdxComponentMeta.title,
storyNameFromExport(mdxStoryNameToKey[storyName])
);
export const getStoryProps = (props: StoryProps, context: DocsContextProps): PureStoryProps => {
const { id } = props as StoryRefProps;
const { name } = props as StoryDefProps;
const inputId = id === CURRENT_SELECTION ? currentId : id;
const previewId =
inputId ||
toId(
mdxComponentMeta.id || mdxComponentMeta.title,
storyNameFromExport(mdxStoryNameToKey[name])
);
const inputId = id === CURRENT_SELECTION ? context.id : id;
const previewId = inputId || lookupStoryId(name, context);
const { height, inline } = props;
const data = storyStore.fromId(previewId);
const data = context.storyStore.fromId(previewId);
const { framework = null } = (data && data.parameters) || {};
const docsParam = (data && data.parameters && data.parameters.docs) || {};
@ -87,7 +88,7 @@ export const getStoryProps = (
};
};
const StoryContainer: FunctionComponent<StoryProps> = (props) => (
const Story: FunctionComponent<StoryProps> = (props) => (
<DocsContext.Consumer>
{(context) => {
const storyProps = getStoryProps(props, context);
@ -97,7 +98,7 @@ const StoryContainer: FunctionComponent<StoryProps> = (props) => (
return (
<div id={storyBlockIdFromId(storyProps.id)}>
<MDXProvider components={resetComponents}>
<Story {...storyProps} />
<PureStory {...storyProps} />
</MDXProvider>
</div>
);
@ -105,9 +106,9 @@ const StoryContainer: FunctionComponent<StoryProps> = (props) => (
</DocsContext.Consumer>
);
StoryContainer.defaultProps = {
Story.defaultProps = {
children: null,
name: null,
};
export { StoryContainer as Story };
export { Story };

272
addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot Normal file
View File

@ -0,0 +1,272 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`angular component properties doc-button 1`] = `
Object {
"_inputValue": Object {
"defaultValue": Object {
"summary": "'some value'",
},
"description": "",
"name": "_inputValue",
"table": Object {
"category": "properties",
"type": Object {
"required": true,
"summary": "string",
},
},
},
"_value": Object {
"defaultValue": Object {
"summary": "'Private hello'",
},
"description": "<p>Private value. </p>
",
"name": "_value",
"table": Object {
"category": "properties",
"type": Object {
"required": true,
"summary": "string",
},
},
},
"appearance": Object {
"defaultValue": Object {
"summary": "'secondary'",
},
"description": "<p>Appearance style of the button. </p>
",
"name": "appearance",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": "\\"primary\\" | \\"secondary\\"",
},
},
},
"buttonRef": Object {
"defaultValue": Object {
"summary": undefined,
},
"description": "",
"name": "buttonRef",
"table": Object {
"category": "view child",
"type": Object {
"required": true,
"summary": "ElementRef",
},
},
},
"calc": Object {
"defaultValue": Object {
"summary": "",
},
"description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
",
"name": "calc",
"table": Object {
"category": "methods",
"type": Object {
"required": false,
"summary": "(x: number, y: string | number) => number",
},
},
},
"inputValue": Object {
"defaultValue": Object {
"summary": undefined,
},
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
",
"name": "inputValue",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": "string",
},
},
},
"internalProperty": Object {
"defaultValue": Object {
"summary": "'Public hello'",
},
"description": "<p>Public value. </p>
",
"name": "internalProperty",
"table": Object {
"category": "properties",
"type": Object {
"required": true,
"summary": "string",
},
},
},
"isDisabled": Object {
"defaultValue": Object {
"summary": "false",
},
"description": "<p>Sets the button to a disabled state. </p>
",
"name": "isDisabled",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": undefined,
},
},
},
"item": Object {
"defaultValue": Object {
"summary": undefined,
},
"description": undefined,
"name": "item",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": "[]",
},
},
},
"label": Object {
"defaultValue": Object {
"summary": undefined,
},
"description": "<p>The inner text of the button.</p>
",
"name": "label",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": "string",
},
},
},
"onClick": Object {
"defaultValue": Object {
"summary": "new EventEmitter<Event>()",
},
"description": "<p>Handler to be called when the button is clicked by a user.</p>
<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
",
"name": "onClick",
"table": Object {
"category": "outputs",
"type": Object {
"required": true,
"summary": "EventEmitter",
},
},
},
"privateMethod": Object {
"defaultValue": Object {
"summary": "",
},
"description": "<p>A private method.</p>
",
"name": "privateMethod",
"table": Object {
"category": "methods",
"type": Object {
"required": false,
"summary": "(password: string) => void",
},
},
},
"processedItem": Object {
"defaultValue": Object {
"summary": undefined,
},
"description": "",
"name": "processedItem",
"table": Object {
"category": "properties",
"type": Object {
"required": true,
"summary": "T[]",
},
},
},
"protectedMethod": Object {
"defaultValue": Object {
"summary": "",
},
"description": "<p>A protected method.</p>
",
"name": "protectedMethod",
"table": Object {
"category": "methods",
"type": Object {
"required": false,
"summary": "(id?: number) => void",
},
},
},
"publicMethod": Object {
"defaultValue": Object {
"summary": "",
},
"description": "<p>A public method using an interface. </p>
",
"name": "publicMethod",
"table": Object {
"category": "methods",
"type": Object {
"required": false,
"summary": "(things: ISomeInterface) => void",
},
},
},
"showKeyAlias": Object {
"defaultValue": Object {
"summary": undefined,
},
"description": undefined,
"name": "showKeyAlias",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": "",
},
},
},
"size": Object {
"defaultValue": Object {
"summary": "'medium'",
},
"description": "<p>Size of the button. </p>
",
"name": "size",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": "ButtonSize",
},
},
},
"somethingYouShouldNotUse": Object {
"defaultValue": Object {
"summary": "false",
},
"description": "<p>Some input you shouldn&#39;t use.</p>
",
"name": "somethingYouShouldNotUse",
"table": Object {
"category": "inputs",
"type": Object {
"required": true,
"summary": undefined,
},
},
},
}
`;

6
addons/docs/src/frameworks/angular/angular-properties.test.ts
View File

@ -4,7 +4,7 @@ import fs from 'fs';
import tmp from 'tmp';
import { sync as spawnSync } from 'cross-spawn';
import { findComponentByName, extractPropsFromData } from './compodoc';
import { findComponentByName, extractArgTypesFromData } from './compodoc';
// File hierarchy: __testfixtures__ / some-test-case / input.*
const inputRegExp = /^input\..*$/;
@ -41,8 +41,8 @@ describe('angular component properties', () => {
// snapshot the output of addon-docs angular-properties
const componentData = findComponentByName('InputComponent', compodocJson);
const properties = extractPropsFromData(componentData);
expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
const argTypes = extractArgTypesFromData(componentData);
expect(argTypes).toMatchSpecificSnapshot(path.join(testDir, 'argtypes.snapshot'));
});
}
}

37
addons/docs/src/frameworks/angular/compodoc.ts
View File

@ -2,6 +2,7 @@
/* global window */
import { PropDef } from '@storybook/components';
import { ArgType, ArgTypes } from '@storybook/api';
import { Argument, CompodocJson, Component, Method, Property, Directive } from './types';
type Sections = Record<string, PropDef[]>;
@ -30,10 +31,6 @@ export const checkValidCompodocJson = (compodocJson: CompodocJson) => {
}
};
function isEmpty(obj: any) {
return Object.entries(obj).length === 0 && obj.constructor === Object;
}
const hasDecorator = (item: Property, decoratorName: string) =>
item.decorators && item.decorators.find((x: any) => x.name === decoratorName);
@ -93,31 +90,35 @@ const displaySignature = (item: Method): string => {
return `(${args.join(', ')}) => ${item.returnType}`;
};
export const extractPropsFromData = (componentData: Directive) => {
const sectionToItems: Sections = {};
export const extractArgTypesFromData = (componentData: Directive) => {
const sectionToItems: Record<string, ArgType[]> = {};
const compodocClasses = ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass'];
type COMPODOC_CLASS = 'propertiesClass' | 'methodsClass' | 'inputsClass' | 'outputsClass';
compodocClasses.forEach((key: COMPODOC_CLASS) => {
const data = componentData[key] || [];
data.forEach((item: Method | Property) => {
const sectionItem: PropDef = {
const section = mapItemToSection(key, item);
const argType = {
name: item.name,
type: { summary: isMethod(item) ? displaySignature(item) : item.type },
required: isMethod(item) ? false : !item.optional,
description: item.description,
defaultValue: { summary: isMethod(item) ? '' : item.defaultValue },
table: {
category: section,
type: {
summary: isMethod(item) ? displaySignature(item) : item.type,
required: isMethod(item) ? false : !item.optional,
},
},
};
const section = mapItemToSection(key, item);
if (!sectionToItems[section]) {
sectionToItems[section] = [];
}
sectionToItems[section].push(sectionItem);
sectionToItems[section].push(argType);
});
});
// sort the sections
const SECTIONS = [
'inputs',
'outputs',
@ -128,20 +129,22 @@ export const extractPropsFromData = (componentData: Directive) => {
'content child',
'content children',
];
const sections: Sections = {};
const argTypes: ArgTypes = {};
SECTIONS.forEach((section) => {
const items = sectionToItems[section];
if (items) {
sections[section] = items;
items.forEach((argType) => {
argTypes[argType.name] = argType;
});
}
});
return isEmpty(sections) ? null : { sections };
return argTypes;
};
export const extractProps = (component: Component | Directive) => {
export const extractArgTypes = (component: Component | Directive) => {
const componentData = getComponentData(component);
return componentData && extractPropsFromData(componentData);
return componentData && extractArgTypesFromData(componentData);
};
export const extractComponentDescription = (component: Component | Directive) => {

4
addons/docs/src/frameworks/angular/config.ts
View File

@ -1,9 +1,9 @@
import { addParameters } from '@storybook/client-api';
import { extractProps, extractComponentDescription } from './compodoc';
import { extractArgTypes, extractComponentDescription } from './compodoc';
addParameters({
docs: {
extractProps,
extractArgTypes,
extractComponentDescription,
},
});

3
addons/docs/src/frameworks/common/config.ts
View File

@ -1,5 +1,6 @@
/* eslint-disable-next-line import/no-extraneous-dependencies */
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { enhanceArgTypes } from './enhanceArgTypes';
export const parameters = {
docs: {
@ -7,3 +8,5 @@ export const parameters = {
page: DocsPage,
},
};
export const argTypesEnhancers = [enhanceArgTypes];

318
addons/docs/src/frameworks/common/enhanceArgTypes.test.ts Normal file
View File

@ -0,0 +1,318 @@
import { ArgType, ArgTypes, Args } from '@storybook/api';
import { enhanceArgTypes } from './enhanceArgTypes';
expect.addSnapshotSerializer({
print: (val: any) => JSON.stringify(val, null, 2),
test: (val) => typeof val !== 'string',
});
const enhance = ({
argType,
arg,
extractedArgTypes,
storyFn = (args: Args) => 0,
}: {
argType?: ArgType;
arg?: any;
extractedArgTypes?: ArgTypes;
storyFn?: any;
}) => {
const context = {
id: 'foo--bar',
kind: 'foo',
name: 'bar',
storyFn,
parameters: {
component: 'dummy',
docs: {
extractArgTypes: extractedArgTypes && (() => extractedArgTypes),
},
argTypes: argType && {
input: argType,
},
args: {
input: arg,
},
},
args: {},
globalArgs: {},
};
return enhanceArgTypes(context);
};
describe('enhanceArgTypes', () => {
describe('no-args story function', () => {
it('should no-op', () => {
expect(
enhance({
argType: { foo: 'unmodified', type: { name: 'number' } },
storyFn: () => 0,
}).input
).toMatchInlineSnapshot(`
{
"name": "input",
"foo": "unmodified",
"type": {
"name": "number"
}
}
`);
});
});
describe('args story function', () => {
describe('single-source input', () => {
describe('argTypes input', () => {
it('number', () => {
expect(
enhance({
argType: { type: { name: 'number' } },
}).input
).toMatchInlineSnapshot(`
{
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
}
`);
});
});
describe('args input', () => {
it('number', () => {
expect(enhance({ arg: 5 }).input).toMatchInlineSnapshot(`
{
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
}
`);
});
});
describe('extraction from component', () => {
it('number', () => {
expect(
enhance({ extractedArgTypes: { input: { name: 'input', type: { name: 'number' } } } })
.input
).toMatchInlineSnapshot(`
{
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
}
`);
});
});
describe('controls input', () => {
it('range', () => {
expect(
enhance({
argType: { control: { type: 'range', min: 0, max: 100 } },
}).input
).toMatchInlineSnapshot(`
{
"name": "input",
"control": {
"type": "range",
"min": 0,
"max": 100
}
}
`);
});
it('options', () => {
expect(
enhance({
argType: { control: { type: 'options', options: [1, 2], controlType: 'radio' } },
}).input
).toMatchInlineSnapshot(`
{
"name": "input",
"control": {
"type": "options",
"options": [
1,
2
],
"controlType": "radio"
}
}
`);
});
});
});
describe('mixed-source input', () => {
it('user-specified argTypes take precedence over extracted argTypes', () => {
expect(
enhance({
argType: { type: { name: 'number' } },
extractedArgTypes: { input: { type: { name: 'string' } } },
}).input
).toMatchInlineSnapshot(`
{
"control": {
"type": "number"
},
"type": {
"name": "number"
},
"name": "input"
}
`);
});
it('user-specified argTypes take precedence over inferred argTypes', () => {
expect(
enhance({
argType: { type: { name: 'number' } },
arg: 'hello',
}).input
).toMatchInlineSnapshot(`
{
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
}
`);
});
it('extracted argTypes take precedence over inferred argTypes', () => {
expect(
enhance({
extractedArgTypes: { input: { type: { name: 'string' } } },
arg: 6,
}).input
).toMatchInlineSnapshot(`
{
"control": {
"type": "text"
},
"name": "input",
"type": {
"name": "string"
}
}
`);
});
it('user-specified controls take precedence over inferred controls', () => {
expect(
enhance({
argType: { defaultValue: 5, control: { type: 'range', step: 50 } },
arg: 3,
extractedArgTypes: { input: { name: 'input' } },
}).input
).toMatchInlineSnapshot(`
{
"control": {
"type": "range",
"step": 50
},
"name": "input",
"type": {
"name": "number"
},
"defaultValue": 5
}
`);
});
it('includes extracted argTypes when there are no user-specified argTypes', () => {
expect(
enhance({
arg: 3,
extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } },
})
).toMatchInlineSnapshot(`
{
"input": {
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
},
"foo": {
"control": {
"type": "number"
},
"type": {
"name": "number"
}
}
}
`);
});
it('includes extracted argTypes when user-specified argTypes match', () => {
expect(
enhance({
argType: { type: { name: 'number' } },
extractedArgTypes: { input: { name: 'input' }, foo: { type: { name: 'number' } } },
})
).toMatchInlineSnapshot(`
{
"input": {
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
},
"foo": {
"control": {
"type": "number"
},
"type": {
"name": "number"
}
}
}
`);
});
it('excludes extracted argTypes when user-specified argTypes do not match', () => {
expect(
enhance({
argType: { type: { name: 'number' } },
extractedArgTypes: { foo: { type: { name: 'number' } } },
})
).toMatchInlineSnapshot(`
{
"input": {
"control": {
"type": "number"
},
"name": "input",
"type": {
"name": "number"
}
}
}
`);
});
});
});
});

61
addons/docs/src/frameworks/common/enhanceArgTypes.ts Normal file
View File

@ -0,0 +1,61 @@
import mapValues from 'lodash/mapValues';
import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api';
import { ArgTypes } from '@storybook/api';
import { inferArgTypes } from './inferArgTypes';
import { inferControls } from './inferControls';
const isSubset = (kind: string, subset: object, superset: object) => {
const keys = Object.keys(subset);
// eslint-disable-next-line no-prototype-builtins
const overlap = keys.filter((key) => superset.hasOwnProperty(key));
return overlap.length === keys.length;
};
export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
const {
component,
subcomponents,
argTypes: userArgTypes = {},
docs = {},
args = {},
} = context.parameters;
const { extractArgTypes } = docs;
const namedArgTypes = mapValues(userArgTypes, (val, key) => ({ name: key, ...val }));
const inferredArgTypes = inferArgTypes(args);
const components = { Primary: component, ...subcomponents };
let extractedArgTypes: ArgTypes = {};
if (extractArgTypes && components) {
const componentArgTypes = mapValues(components, (comp) => extractArgTypes(comp));
extractedArgTypes = Object.entries(componentArgTypes).reduce((acc, [label, compTypes]) => {
if (compTypes) {
Object.entries(compTypes).forEach(([key, argType]) => {
if (label === 'Primary') {
acc[key] = argType;
}
});
}
return acc;
}, {} as ArgTypes);
}
if (
(Object.keys(userArgTypes).length > 0 &&
!isSubset(context.kind, userArgTypes, extractedArgTypes)) ||
(Object.keys(inferredArgTypes).length > 0 &&
!isSubset(context.kind, inferredArgTypes, extractedArgTypes))
) {
extractedArgTypes = {};
}
const withArgTypes = combineParameters(inferredArgTypes, extractedArgTypes, namedArgTypes);
if (context.storyFn.length === 0) {
return withArgTypes;
}
const withControls = inferControls(withArgTypes);
const result = combineParameters(withControls, withArgTypes);
return result;
};

36
addons/docs/src/frameworks/common/inferArgTypes.ts Normal file
View File

@ -0,0 +1,36 @@
import mapValues from 'lodash/mapValues';
import { Args, ArgTypes } from '@storybook/addons';
import { SBType } from '../../lib/sbtypes';
const inferType = (value?: any): SBType => {
const type = typeof value;
switch (type) {
case 'boolean':
case 'string':
case 'number':
case 'function':
return { name: type };
default:
break;
}
if (Array.isArray(value)) {
const childType: SBType =
value.length > 0 ? inferType(value[0]) : { name: 'other', value: 'unknown' };
return { name: 'array', value: [childType] };
}
if (value) {
const fieldTypes = mapValues(value, (field) => inferType(field));
return { name: 'object', value: fieldTypes };
}
return { name: 'other', value: 'unknown' };
};
export const inferArgTypes = (args: Args): ArgTypes => {
if (!args) return {};
return mapValues(args, (arg, name) => {
if (arg !== null && typeof arg !== 'undefined') {
return { name, type: inferType(arg) };
}
return undefined;
});
};

37
addons/docs/src/frameworks/common/inferControls.ts Normal file
View File

@ -0,0 +1,37 @@
import mapValues from 'lodash/mapValues';
import { ArgTypes, ArgType } from '@storybook/addons';
import { Control } from '@storybook/components';
import { SBEnumType } from '../../lib/sbtypes';
const inferControl = (argType: ArgType): Control => {
if (!argType.type) {
// console.log('no sbtype', { argType });
return null;
}
switch (argType.type.name) {
case 'array':
return { type: 'array' };
case 'boolean':
return { type: 'boolean' };
case 'string':
return { type: 'text' };
case 'number':
return { type: 'number' };
case 'enum': {
const { value } = argType.type as SBEnumType;
return { type: 'options', controlType: 'select', options: value };
}
case 'function':
case 'symbol':
return null;
default:
return { type: 'object' };
}
};
export const inferControls = (argTypes: ArgTypes): ArgTypes => {
return mapValues(argTypes, (argType) => {
const control = argType && argType.type && inferControl(argType);
return control ? { control } : undefined;
});
};

19
addons/docs/src/frameworks/common/preset.ts
View File

@ -4,11 +4,6 @@ import path from 'path';
import remarkSlug from 'remark-slug';
import remarkExternalLinks from 'remark-external-links';
import { DllReferencePlugin } from 'webpack';
const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
const context = path.join(coreDirName, '../../node_modules');
function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
if (!configureJSX) {
return babelOptions;
@ -24,10 +19,6 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
};
}
export const webpackDlls = (dlls: string[], options: any) => {
return options.dll ? [...dlls, './sb_dll/storybook_docs_dll.js'] : [];
};
export function webpack(webpackConfig: any = {}, options: any = {}) {
const { module = {} } = webpackConfig;
// it will reuse babel options that are already in use in storybook
@ -106,16 +97,6 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
],
},
};
if (options.dll) {
result.plugins.push(
new DllReferencePlugin({
context,
manifest: path.join(coreDirName, 'dll', 'storybook_docs-manifest.json'),
})
);
}
return result;
}

4
addons/docs/src/frameworks/ember/config.js
View File

@ -1,10 +1,10 @@
import { addParameters } from '@storybook/client-api';
import { extractProps, extractComponentDescription } from './jsondoc';
import { extractArgTypes, extractComponentDescription } from './jsondoc';
addParameters({
docs: {
iframeHeight: 80,
extractProps,
extractArgTypes,
extractComponentDescription,
},
});

10
addons/docs/src/frameworks/ember/jsondoc.js
View File

@ -8,16 +8,20 @@ export const getJSONDoc = () => {
return window.__EMBER_GENERATED_DOC_JSON__;
};
export const extractProps = (componentName) => {
export const extractArgTypes = (componentName) => {
const json = getJSONDoc();
const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
const rows = componentDoc.attributes.arguments.map((prop) => {
return {
name: prop.name,
type: prop.type,
required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false,
defaultValue: prop.defaultValue,
description: prop.description,
table: {
type: {
summary: prop.type,
required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false,
},
},
};
});
return { rows };

14
addons/docs/src/frameworks/react/__testfixtures__/10017-ts-union/properties.snapshot
View File

@ -8,6 +8,20 @@ Object {
"description": "specify icon=\\"search\\" or icon={IconComponent}",
"name": "icon",
"required": true,
"sbType": Object {
"name": "union",
"raw": "React.ReactNode | string",
"value": Array [
Object {
"name": "other",
"raw": "React.ReactNode",
"value": "ReactReactNode",
},
Object {
"name": "string",
},
],
},
"type": Object {
"detail": undefined,
"summary": "union",

4
addons/docs/src/frameworks/react/__testfixtures__/10278-ts-multiple-components/properties.snapshot
View File

@ -8,6 +8,10 @@ Object {
"description": "",
"name": "aProperty",
"required": true,
"sbType": Object {
"name": "other",
"value": "any",
},
"type": Object {
"detail": undefined,
"summary": "any",

5
addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/docgen.snapshot
View File

@ -1,10 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 8140-js-prop-types-oneof 1`] = `
"/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/require-default-props */
import React from 'react';
"import React from 'react';
import PropTypes from 'prop-types';
const Alert = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));

2
addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/input.js
View File

@ -1,5 +1,3 @@
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/require-default-props */
import React from 'react';
import PropTypes from 'prop-types';

25
addons/docs/src/frameworks/react/__testfixtures__/8140-js-prop-types-oneof/properties.snapshot
View File

@ -11,6 +11,13 @@ Object {
"description": "",
"name": "mode",
"required": false,
"sbType": Object {
"name": "enum",
"value": Array [
"static",
"timed",
],
},
"type": Object {
"detail": undefined,
"summary": "'static' | 'timed'",
@ -24,6 +31,15 @@ Object {
"description": "",
"name": "type",
"required": false,
"sbType": Object {
"name": "enum",
"value": Array [
"success",
"warning",
"error",
"primary",
],
},
"type": Object {
"detail": undefined,
"summary": "'success' | 'warning' | 'error' | 'primary'",
@ -34,6 +50,9 @@ Object {
"description": "",
"name": "message",
"required": true,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",
@ -44,6 +63,9 @@ Object {
"description": "No background or border if static alert",
"name": "blank",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "bool",
@ -54,6 +76,9 @@ Object {
"description": "Allows icon override, accepts material icon name",
"name": "icon",
"required": false,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",

5
addons/docs/src/frameworks/react/__testfixtures__/8143-ts-imported-types/properties.snapshot
View File

@ -8,6 +8,11 @@ Object {
"description": "",
"name": "bar",
"required": true,
"sbType": Object {
"name": "other",
"raw": "Foo['bar']",
"value": "Foo['bar']",
},
"type": Object {
"detail": undefined,
"summary": "Foo['bar']",

3
addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/docgen.snapshot
View File

@ -3,9 +3,6 @@
exports[`react component properties 8428-js-static-prop-types 1`] = `
"function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/require-default-props */
import React from 'react';
import PropTypes from 'prop-types'; // eslint-disable-next-line react/prefer-stateless-function

2
addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/input.js
View File

@ -1,5 +1,3 @@
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/require-default-props */
import React from 'react';
import PropTypes from 'prop-types';

3
addons/docs/src/frameworks/react/__testfixtures__/8428-js-static-prop-types/properties.snapshot
View File

@ -8,6 +8,9 @@ Object {
"description": "Please work...",
"name": "test",
"required": false,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",

1
addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/docgen.snapshot
View File

@ -12,7 +12,6 @@ Box.propTypes = {
};
export const MyBox = props => /*#__PURE__*/React.createElement(Box, props);
MyBox.propTypes = {
// eslint-disable-next-line react/require-default-props
bg: PropTypes.string
};
export const component = MyBox;

1
addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/input.js
View File

@ -13,7 +13,6 @@ Box.propTypes = {
export const MyBox = (props) => <Box {...props} />;
MyBox.propTypes = {
// eslint-disable-next-line react/require-default-props
bg: PropTypes.string,
};

3
addons/docs/src/frameworks/react/__testfixtures__/8663-js-styled-components/properties.snapshot
View File

@ -8,6 +8,9 @@ Object {
"description": "",
"name": "bg",
"required": false,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",

8
addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/docgen.snapshot
View File

@ -1,13 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9023-js-hoc 1`] = `
"/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/require-default-props */
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/prefer-stateless-function */
"/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import PropTypes from 'prop-types';

3
addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/input.js
View File

@ -1,6 +1,3 @@
/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/require-default-props */
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import PropTypes from 'prop-types';

13
addons/docs/src/frameworks/react/__testfixtures__/9023-js-hoc/properties.snapshot
View File

@ -11,6 +11,9 @@ Object {
"description": "",
"name": "variant",
"required": false,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",
@ -24,6 +27,9 @@ Object {
"description": "",
"name": "dismissible",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "bool",
@ -34,6 +40,10 @@ Object {
"description": "",
"name": "icon",
"required": false,
"sbType": Object {
"name": "other",
"value": "elementType",
},
"type": Object {
"detail": undefined,
"summary": "elementType",
@ -44,6 +54,9 @@ Object {
"description": "",
"name": "classes",
"required": true,
"sbType": Object {
"name": "object",
},
"type": Object {
"detail": undefined,
"summary": "object",

17
addons/docs/src/frameworks/react/__testfixtures__/9399-js-proptypes-shape/properties.snapshot
View File

@ -8,6 +8,23 @@ Object {
"description": "",
"name": "areas",
"required": true,
"sbType": Object {
"name": "array",
"value": Object {
"name": "object",
"value": Object {
"names": Object {
"name": "array",
"value": Object {
"name": "string",
},
},
"position": Object {
"name": "string",
},
},
},
},
"type": Object {
"detail": "[object]",
"summary": "object[]",

3
addons/docs/src/frameworks/react/__testfixtures__/9465-ts-type-props/properties.snapshot
View File

@ -11,6 +11,9 @@ Object {
"description": "",
"name": "disabled",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",

21
addons/docs/src/frameworks/react/__testfixtures__/9493-ts-display-name/properties.snapshot
View File

@ -11,6 +11,24 @@ Object {
"description": "A title that brings attention to the alert.",
"name": "title",
"required": false,
"sbType": Object {
"name": "union",
"raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
"value": Array [
Object {
"name": "other",
"value": "literal",
},
Object {
"name": "other",
"value": "literal",
},
Object {
"name": "other",
"value": "literal",
},
],
},
"type": Object {
"detail": undefined,
"summary": "union",
@ -21,6 +39,9 @@ Object {
"description": "A message alerting about Empire activities.",
"name": "message",
"required": true,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",

3
addons/docs/src/frameworks/react/__testfixtures__/9556-ts-react-default-exports/properties.snapshot
View File

@ -11,6 +11,9 @@ Object {
"description": "",
"name": "isDisabled",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",

1
addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/docgen.snapshot
View File

@ -11,7 +11,6 @@ const iconButton = function IconButton(props) {
};
iconButton.propTypes = {
// eslint-disable-next-line react/no-unused-prop-types
color: PropTypes.string
};
iconButton.defaultProps = {

1
addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/input.tsx
View File

@ -13,7 +13,6 @@ const iconButton: FC<IProps> = function IconButton(props) {
};
iconButton.propTypes = {
// eslint-disable-next-line react/no-unused-prop-types
color: PropTypes.string,
};

3
addons/docs/src/frameworks/react/__testfixtures__/9575-ts-camel-case/properties.snapshot
View File

@ -11,6 +11,9 @@ Object {
"description": "",
"name": "color",
"required": false,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",

3
addons/docs/src/frameworks/react/__testfixtures__/9591-ts-import-types/properties.snapshot
View File

@ -8,6 +8,9 @@ Object {
"description": "",
"name": "other",
"required": false,
"sbType": Object {
"name": "number",
},
"type": Object {
"detail": undefined,
"summary": "number",

3
addons/docs/src/frameworks/react/__testfixtures__/9592-ts-styled-props/properties.snapshot
View File

@ -8,6 +8,9 @@ Object {
"description": "",
"name": "title",
"required": true,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",

7
addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/docgen.snapshot
View File

@ -1,12 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react component properties 9668-js-proptypes-no-jsdoc 1`] = `
"/* eslint-disable react/require-default-props */
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/forbid-prop-types */
import React from 'react';
"import React from 'react';
import PropTypes from 'prop-types';
const CCTable = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));

3
addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/input.js
View File

@ -1,6 +1,3 @@
/* eslint-disable react/require-default-props */
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';

7
addons/docs/src/frameworks/react/__testfixtures__/9668-js-proptypes-no-jsdoc/properties.snapshot
View File

@ -8,6 +8,10 @@ Object {
"description": "",
"name": "heads",
"required": true,
"sbType": Object {
"name": "array",
"value": undefined,
},
"type": Object {
"detail": undefined,
"summary": "array",
@ -18,6 +22,9 @@ Object {
"description": "",
"name": "onAddClick",
"required": false,
"sbType": Object {
"name": "function",
},
"type": Object {
"detail": undefined,
"summary": "func",

15
addons/docs/src/frameworks/react/__testfixtures__/9721-ts-deprecated-jsdoc/properties.snapshot
View File

@ -8,6 +8,9 @@ Object {
"description": "",
"name": "width",
"required": true,
"sbType": Object {
"name": "number",
},
"type": Object {
"detail": undefined,
"summary": "number",
@ -18,6 +21,18 @@ Object {
"description": "The size (replaces width)",
"name": "size",
"required": true,
"sbType": Object {
"name": "object",
"raw": "{ width: number; height: number }",
"value": Object {
"height": Object {
"name": "number",
},
"width": Object {
"name": "number",
},
},
},
"type": Object {
"detail": undefined,
"summary": "signature",

18
addons/docs/src/frameworks/react/__testfixtures__/9764-ts-extend-props/properties.snapshot
View File

@ -8,6 +8,18 @@ Object {
"description": "The input content value",
"name": "value",
"required": false,
"sbType": Object {
"name": "union",
"raw": "string | number",
"value": Array [
Object {
"name": "string",
},
Object {
"name": "number",
},
],
},
"type": Object {
"detail": undefined,
"summary": "union",
@ -18,6 +30,9 @@ Object {
"description": "",
"name": "defaultChecked",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",
@ -28,6 +43,9 @@ Object {
"description": "",
"name": "checked",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",

15
addons/docs/src/frameworks/react/__testfixtures__/9827-ts-default-values/properties.snapshot
View File

@ -11,6 +11,9 @@ Object {
"description": "",
"name": "title",
"required": false,
"sbType": Object {
"name": "string",
},
"type": Object {
"detail": undefined,
"summary": "string",
@ -21,6 +24,9 @@ Object {
"description": "",
"name": "foo",
"required": true,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",
@ -31,6 +37,15 @@ Object {
"description": "",
"name": "bar",
"required": false,
"sbType": Object {
"name": "array",
"raw": "string[]",
"value": Array [
Object {
"name": "string",
},
],
},
"type": Object {
"detail": undefined,
"summary": "Array",

3
addons/docs/src/frameworks/react/__testfixtures__/9922-ts-component-props/properties.snapshot
View File

@ -8,6 +8,9 @@ Object {
"description": "",
"name": "spacing",
"required": true,
"sbType": Object {
"name": "number",
},
"type": Object {
"detail": undefined,
"summary": "number",

4
addons/docs/src/frameworks/react/__testfixtures__/js-class-component/properties.snapshot
View File

@ -8,6 +8,10 @@ Object {
"description": "PropTypes description",
"name": "children",
"required": true,
"sbType": Object {
"name": "other",
"value": "node",
},
"type": Object {
"detail": undefined,
"summary": "node",

10
addons/docs/src/frameworks/react/__testfixtures__/ts-function-component/properties.snapshot
View File

@ -11,6 +11,9 @@ Object {
"description": "Is primary?",
"name": "primary",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",
@ -24,6 +27,9 @@ Object {
"description": "default is false",
"name": "secondary",
"required": false,
"sbType": Object {
"name": "boolean",
},
"type": Object {
"detail": undefined,
"summary": "boolean",
@ -34,6 +40,10 @@ Object {
"description": "Simple click handler",
"name": "onClick",
"required": false,
"sbType": Object {
"name": "function",
"raw": "() => void",
},
"type": Object {
"detail": undefined,
"summary": "signature",

9
addons/docs/src/frameworks/react/config.ts
View File

@ -1,14 +1,13 @@
import { addParameters } from '@storybook/client-api';
import { StoryFn } from '@storybook/addons';
import { extractProps } from './extractProps';
import { extractArgTypes } from './extractArgTypes';
import { extractComponentDescription } from '../../lib/docgen';
addParameters({
export const parameters = {
docs: {
// react is Storybook's "native" framework, so it's stories are inherently prepared to be rendered inline
// NOTE: that the result is a react element. Hooks support is provided by the outer code.
prepareForInline: (storyFn: StoryFn) => storyFn(),
extractProps,
extractArgTypes,
extractComponentDescription,
},
});
};

29
addons/docs/src/frameworks/react/extractArgTypes.ts Normal file
View File

@ -0,0 +1,29 @@
import { PropDef, PropsTableRowsProps } from '@storybook/components';
import { ArgTypes } from '@storybook/api';
import { ArgTypesExtractor } from '../../lib/docgen';
import { extractProps } from './extractProps';
export const extractArgTypes: ArgTypesExtractor = (component) => {
if (component) {
const props = extractProps(component);
const { rows } = props as PropsTableRowsProps;
if (rows) {
return rows.reduce((acc: ArgTypes, row: PropDef) => {
const { type, sbType, defaultValue, jsDocTags } = row;
acc[row.name] = {
...row,
defaultValue: defaultValue && (defaultValue.detail || defaultValue.summary),
type: sbType,
table: {
type,
jsDocTags,
defaultValue,
},
};
return acc;
}, {});
}
}
return null;
};

108
addons/docs/src/frameworks/react/react-argtypes.stories.tsx Normal file
View File

@ -0,0 +1,108 @@
import React, { useState } from 'react';
import mapValues from 'lodash/mapValues';
import { storiesOf } from '@storybook/react';
import { ArgsTable } from '@storybook/components';
import { action } from '@storybook/addon-actions';
import { Args } from '@storybook/api';
import { combineParameters } from '@storybook/client-api';
import { extractArgTypes } from './extractArgTypes';
import { inferControls } from '../common/inferControls';
import { Component } from '../../blocks';
const argsTableProps = (component: Component) => {
const argTypes = extractArgTypes(component);
const controls = inferControls(argTypes);
const rows = combineParameters(argTypes, controls);
return { rows };
};
const ArgsStory = ({ component }: any) => {
const { rows } = argsTableProps(component);
const initialArgs = mapValues(rows, () => null) as Args;
const [args, setArgs] = useState(initialArgs);
return (
<>
<table>
<tr>
<th>key</th>
<th>val</th>
</tr>
{Object.entries(args).map(([key, val]) => (
<tr key={key}>
<td>{key}</td>
<td>{JSON.stringify(val, null, 2)}</td>
</tr>
))}
</table>
<ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
</>
);
};
const typescriptFixtures = [
'aliases',
'arrays',
'enums',
'functions',
'interfaces',
'intersections',
'records',
'scalars',
'tuples',
'unions',
];
const typescriptStories = storiesOf('ArgTypes/TypeScript', module);
typescriptFixtures.forEach((fixture) => {
// eslint-disable-next-line import/no-dynamic-require, global-require, no-shadow
const { Component } = require(`../../lib/sbtypes/__testfixtures__/typescript/${fixture}`);
typescriptStories.add(fixture, () => <ArgsStory component={Component} />);
});
const proptypesFixtures = ['arrays', 'enums', 'misc', 'objects', 'react', 'scalars'];
const proptypesStories = storiesOf('ArgTypes/PropTypes', module);
proptypesFixtures.forEach((fixture) => {
// eslint-disable-next-line import/no-dynamic-require, global-require, no-shadow
const { Component } = require(`../../lib/sbtypes/__testfixtures__/proptypes/${fixture}`);
proptypesStories.add(fixture, () => <ArgsStory component={Component} />);
});
const issuesFixtures = [
'js-class-component',
'ts-function-component',
'9399-js-proptypes-shape',
'8663-js-styled-components',
'9626-js-default-values',
'9668-js-proptypes-no-jsdoc',
'8143-ts-react-fc-generics',
'8143-ts-imported-types',
'8279-js-styled-docgen',
'8140-js-prop-types-oneof',
'9023-js-hoc',
'8740-ts-multi-props',
'9556-ts-react-default-exports',
'9592-ts-styled-props',
'9591-ts-import-types',
'9721-ts-deprecated-jsdoc',
'9827-ts-default-values',
'9586-js-react-memo',
'9575-ts-camel-case',
'9493-ts-display-name',
'8894-9511-ts-forward-ref',
'9465-ts-type-props',
'8428-js-static-prop-types',
'9764-ts-extend-props',
'9922-ts-component-props',
];
const issuesStories = storiesOf('ArgTypes/Issues', module);
issuesFixtures.forEach((fixture) => {
// eslint-disable-next-line import/no-dynamic-require, global-require
const { component } = require(`./__testfixtures__/${fixture}/input`);
const props = argsTableProps(component);
issuesStories.add(fixture, () => <ArgsTable {...props} updateArgs={action('updateArgs')} />);
});

41
addons/docs/src/frameworks/react/react-properties.stories.tsx
View File

@ -1,41 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { PropsTable } from '@storybook/components';
import { extractProps } from './extractProps';
const fixtures = [
'js-class-component',
'ts-function-component',
'9399-js-proptypes-shape',
'8663-js-styled-components',
'9626-js-default-values',
'9668-js-proptypes-no-jsdoc',
'8143-ts-react-fc-generics',
'8143-ts-imported-types',
'8279-js-styled-docgen',
'8140-js-prop-types-oneof',
'9023-js-hoc',
'8740-ts-multi-props',
'9556-ts-react-default-exports',
'9592-ts-styled-props',
'9591-ts-import-types',
'9721-ts-deprecated-jsdoc',
'9827-ts-default-values',
'9586-js-react-memo',
'9575-ts-camel-case',
'9493-ts-display-name',
'8894-9511-ts-forward-ref',
'9465-ts-type-props',
'8428-js-static-prop-types',
'9764-ts-extend-props',
'9922-ts-component-props',
];
const stories = storiesOf('Properties/React', module);
fixtures.forEach((fixture) => {
// eslint-disable-next-line import/no-dynamic-require, global-require
const { component } = require(`./__testfixtures__/${fixture}/input`);
const props = extractProps(component);
stories.add(fixture, () => <PropsTable {...props} />);
});

4
addons/docs/src/lib/docgen/createPropDef.ts
View File

@ -5,6 +5,7 @@ import { createSummaryValue } from '../utils';
import { createFlowPropDef } from './flow/createPropDef';
import { isDefaultValueBlacklisted } from './utils/defaultValue';
import { createTsPropDef } from './typeScript/createPropDef';
import { convert } from '../sbtypes';
export type PropDefFactory = (
propName: string,
@ -72,18 +73,21 @@ function applyJsDocResult(propDef: PropDef, jsDocParsingResult: JsDocParsingResu
export const javaScriptFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createBasicPropDef(propName, docgenInfo.type, docgenInfo);
propDef.sbType = convert(docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};
export const tsFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createTsPropDef(propName, docgenInfo);
propDef.sbType = convert(docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};
export const flowFactory: PropDefFactory = (propName, docgenInfo, jsDocParsingResult) => {
const propDef = createFlowPropDef(propName, docgenInfo);
propDef.sbType = convert(docgenInfo);
return applyJsDocResult(propDef, jsDocParsingResult);
};

3
addons/docs/src/lib/docgen/types.ts
View File

@ -1,8 +1,11 @@
import { PropsTableProps } from '@storybook/components';
import { ArgTypes } from '@storybook/api';
import { Component } from '../../blocks/types';
export type PropsExtractor = (component: Component) => PropsTableProps | null;
export type ArgTypesExtractor = (component: Component) => ArgTypes | null;
export interface DocgenType {
name: string;
description?: string;

13
addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/arrays.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
optionalArray: PropTypes.array,
arrayOfStrings: PropTypes.arrayOf(PropTypes.string),
arrayOfShape: PropTypes.arrayOf(
PropTypes.shape({
active: PropTypes.bool,
})
),
};

8
addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/enums.js Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
oneOfNumber: PropTypes.oneOf([1, 2, 3]),
oneOfString: PropTypes.oneOf(['static', 'timed']),
};

15
addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/misc.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Object),
]),
optionalMessage: PropTypes.instanceOf(Object),
// A value of any data type
requiredAny: PropTypes.any.isRequired,
};

16
addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/objects.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
optionalObject: PropTypes.object,
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number,
}),
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number,
}),
};

13
addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/react.js vendored Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element.
optionalElement: PropTypes.element,
// A React element type (ie. MyComponent).
optionalElementType: PropTypes.elementType,
};

11
addons/docs/src/lib/sbtypes/__testfixtures__/proptypes/scalars.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
};

14
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/aliases.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { FC } from 'react';
type StringAlias = string;
type NumberAlias = number;
type AliasesIntersection = StringAlias & NumberAlias;
type AliasesUnion = StringAlias | NumberAlias;
type GenericAlias<T> = { value: T };
interface Props {
typeAlias: StringAlias;
aliasesIntersection: AliasesIntersection;
aliasesUnion: AliasesUnion;
genericAlias: GenericAlias<string>;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

17
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/arrays.tsx Normal file
View File

@ -0,0 +1,17 @@
import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Point {
x: number;
y: number;
}
interface Props {
arrayOfPoints: Point[];
arrayOfInlineObjects: { w: number; h: number }[];
arrayOfPrimitive: string[];
arrayOfComplexObject: ItemInterface[];
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

23
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/enums.tsx Normal file
View File

@ -0,0 +1,23 @@
import React, { FC } from 'react';
enum DefaultEnum {
TopLeft,
TopRight,
TopCenter,
}
enum NumericEnum {
TopLeft = 0,
TopRight,
TopCenter,
}
enum StringEnum {
TopLeft = 'top-left',
TopRight = 'top-right',
TopCenter = 'top-center',
}
interface Props {
defaultEnum: DefaultEnum;
numericEnum: NumericEnum;
stringEnum: StringEnum;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

14
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/functions.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
onClick?: () => void;
voidFunc: () => void;
funcWithArgsAndReturns: (a: string, b: string) => string;
funcWithUnionArg: (a: string | number) => string;
funcWithMultipleUnionReturns: () => string | ItemInterface;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

14
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/interfaces.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface GenericInterface<T> {
value: T;
}
interface Props {
interface: ItemInterface;
genericInterface: GenericInterface<string>;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

15
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/intersections.tsx Normal file
View File

@ -0,0 +1,15 @@
import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface PersonInterface {
name: string;
}
type InterfaceIntersection = ItemInterface & PersonInterface;
interface Props {
intersectionType: InterfaceIntersection;
intersectionWithInlineType: ItemInterface & { inlineValue: string };
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

11
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/records.tsx Normal file
View File

@ -0,0 +1,11 @@
import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
recordOfPrimitive: Record<string, number>;
recordOfComplexObject: Record<string, ItemInterface>;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

11
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/scalars.tsx Normal file
View File

@ -0,0 +1,11 @@
import React, { FC } from 'react';
interface Props {
any: any;
string: string;
bool: boolean;
number: number;
symbol: symbol;
readonly readonlyPrimitive: string;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

11
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/tuples.tsx Normal file
View File

@ -0,0 +1,11 @@
import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
tupleOfPrimitive: [string, number];
tupleWithComplexType: [string, ItemInterface];
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

20
addons/docs/src/lib/sbtypes/__testfixtures__/typescript/unions.tsx Normal file
View File

@ -0,0 +1,20 @@
import React, { FC } from 'react';
type Kind = 'default' | 'action';
enum DefaultEnum {
TopLeft,
TopRight,
TopCenter,
}
enum NumericEnum {
TopLeft = 0,
TopRight,
TopCenter,
}
type EnumUnion = DefaultEnum | NumericEnum;
interface Props {
kind?: Kind;
inlinedNumericLiteralUnion: 0 | 1;
enumUnion: EnumUnion;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;

808
addons/docs/src/lib/sbtypes/convert.test.ts Normal file
View File

@ -0,0 +1,808 @@
import 'jest-specific-snapshot';
import mapValues from 'lodash/mapValues';
import { transformSync } from '@babel/core';
import requireFromString from 'require-from-string';
import fs from 'fs';
import { convert } from './convert';
import { normalizeNewlines } from '../utils';
expect.addSnapshotSerializer({
print: (val: any) => JSON.stringify(val, null, 2),
test: (val) => typeof val !== 'string',
});
describe('storybook type system', () => {
describe('TypeScript', () => {
it('scalars', () => {
const input = readFixture('typescript/functions.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
onClick?: () => void;
voidFunc: () => void;
funcWithArgsAndReturns: (a: string, b: string) => string;
funcWithUnionArg: (a: string | number) => string;
funcWithMultipleUnionReturns: () => string | ItemInterface;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"onClick": {
"raw": "() => void",
"name": "function"
},
"voidFunc": {
"raw": "() => void",
"name": "function"
},
"funcWithArgsAndReturns": {
"raw": "(a: string, b: string) => string",
"name": "function"
},
"funcWithUnionArg": {
"raw": "(a: string | number) => string",
"name": "function"
},
"funcWithMultipleUnionReturns": {
"raw": "() => string | ItemInterface",
"name": "function"
}
}
`);
});
it('functions', () => {
const input = readFixture('typescript/functions.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
onClick?: () => void;
voidFunc: () => void;
funcWithArgsAndReturns: (a: string, b: string) => string;
funcWithUnionArg: (a: string | number) => string;
funcWithMultipleUnionReturns: () => string | ItemInterface;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"onClick": {
"raw": "() => void",
"name": "function"
},
"voidFunc": {
"raw": "() => void",
"name": "function"
},
"funcWithArgsAndReturns": {
"raw": "(a: string, b: string) => string",
"name": "function"
},
"funcWithUnionArg": {
"raw": "(a: string | number) => string",
"name": "function"
},
"funcWithMultipleUnionReturns": {
"raw": "() => string | ItemInterface",
"name": "function"
}
}
`);
});
it('enums', () => {
const input = readFixture('typescript/enums.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
enum DefaultEnum {
TopLeft,
TopRight,
TopCenter,
}
enum NumericEnum {
TopLeft = 0,
TopRight,
TopCenter,
}
enum StringEnum {
TopLeft = 'top-left',
TopRight = 'top-right',
TopCenter = 'top-center',
}
interface Props {
defaultEnum: DefaultEnum;
numericEnum: NumericEnum;
stringEnum: StringEnum;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"defaultEnum": {
"name": "other",
"value": "DefaultEnum"
},
"numericEnum": {
"name": "other",
"value": "NumericEnum"
},
"stringEnum": {
"name": "other",
"value": "StringEnum"
}
}
`);
});
it('unions', () => {
const input = readFixture('typescript/unions.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
type Kind = 'default' | 'action';
enum DefaultEnum {
TopLeft,
TopRight,
TopCenter,
}
enum NumericEnum {
TopLeft = 0,
TopRight,
TopCenter,
}
type EnumUnion = DefaultEnum | NumericEnum;
interface Props {
kind?: Kind;
inlinedNumericLiteralUnion: 0 | 1;
enumUnion: EnumUnion;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"kind": {
"raw": "'default' | 'action'",
"name": "union",
"value": [
{
"name": "other",
"value": "literal"
},
{
"name": "other",
"value": "literal"
}
]
},
"inlinedNumericLiteralUnion": {
"raw": "0 | 1",
"name": "union",
"value": [
{
"name": "other",
"value": "literal"
},
{
"name": "other",
"value": "literal"
}
]
},
"enumUnion": {
"raw": "DefaultEnum | NumericEnum",
"name": "union",
"value": [
{
"name": "other",
"value": "DefaultEnum"
},
{
"name": "other",
"value": "NumericEnum"
}
]
}
}
`);
});
it('intersections', () => {
const input = readFixture('typescript/intersections.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface PersonInterface {
name: string;
}
type InterfaceIntersection = ItemInterface & PersonInterface;
interface Props {
intersectionType: InterfaceIntersection;
intersectionWithInlineType: ItemInterface & { inlineValue: string };
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"intersectionType": {
"raw": "ItemInterface & PersonInterface",
"name": "intersection",
"value": [
{
"name": "other",
"value": "ItemInterface"
},
{
"name": "other",
"value": "PersonInterface"
}
]
},
"intersectionWithInlineType": {
"raw": "ItemInterface & { inlineValue: string }",
"name": "intersection",
"value": [
{
"name": "other",
"value": "ItemInterface"
},
{
"raw": "{ inlineValue: string }",
"name": "object",
"value": {
"inlineValue": {
"name": "string"
}
}
}
]
}
}
`);
});
it('arrays', () => {
const input = readFixture('typescript/arrays.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Point {
x: number;
y: number;
}
interface Props {
arrayOfPoints: Point[];
arrayOfInlineObjects: { w: number; h: number }[];
arrayOfPrimitive: string[];
arrayOfComplexObject: ItemInterface[];
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"arrayOfPoints": {
"raw": "Point[]",
"name": "array",
"value": [
{
"name": "other",
"value": "Point"
}
]
},
"arrayOfInlineObjects": {
"raw": "{ w: number; h: number }[]",
"name": "array",
"value": [
{
"raw": "{ w: number; h: number }",
"name": "object",
"value": {
"w": {
"name": "number"
},
"h": {
"name": "number"
}
}
}
]
},
"arrayOfPrimitive": {
"raw": "string[]",
"name": "array",
"value": [
{
"name": "string"
}
]
},
"arrayOfComplexObject": {
"raw": "ItemInterface[]",
"name": "array",
"value": [
{
"name": "other",
"value": "ItemInterface"
}
]
}
}
`);
});
it('interfaces', () => {
const input = readFixture('typescript/interfaces.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface GenericInterface<T> {
value: T;
}
interface Props {
interface: ItemInterface;
genericInterface: GenericInterface<string>;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"interface": {
"name": "other",
"value": "ItemInterface"
},
"genericInterface": {
"raw": "GenericInterface<string>",
"name": "other",
"value": "GenericInterface"
}
}
`);
});
it('records', () => {
const input = readFixture('typescript/records.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
recordOfPrimitive: Record<string, number>;
recordOfComplexObject: Record<string, ItemInterface>;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"recordOfPrimitive": {
"raw": "Record<string, number>",
"name": "other",
"value": "Record"
},
"recordOfComplexObject": {
"raw": "Record<string, ItemInterface>",
"name": "other",
"value": "Record"
}
}
`);
});
it('aliases', () => {
const input = readFixture('typescript/aliases.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
type StringAlias = string;
type NumberAlias = number;
type AliasesIntersection = StringAlias & NumberAlias;
type AliasesUnion = StringAlias | NumberAlias;
type GenericAlias<T> = { value: T };
interface Props {
typeAlias: StringAlias;
aliasesIntersection: AliasesIntersection;
aliasesUnion: AliasesUnion;
genericAlias: GenericAlias<string>;
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"typeAlias": {
"name": "string"
},
"aliasesIntersection": {
"raw": "StringAlias & NumberAlias",
"name": "intersection",
"value": [
{
"name": "string"
},
{
"name": "number"
}
]
},
"aliasesUnion": {
"raw": "StringAlias | NumberAlias",
"name": "union",
"value": [
{
"name": "string"
},
{
"name": "number"
}
]
},
"genericAlias": {
"raw": "{ value: T }",
"name": "object",
"value": {
"value": {
"name": "string"
}
}
}
}
`);
});
it('tuples', () => {
const input = readFixture('typescript/tuples.tsx');
expect(input).toMatchInlineSnapshot(`
"import React, { FC } from 'react';
interface ItemInterface {
text: string;
value: string;
}
interface Props {
tupleOfPrimitive: [string, number];
tupleWithComplexType: [string, ItemInterface];
}
export const Component: FC<Props> = (props: Props) => <>JSON.stringify(props)</>;
"
`);
expect(convertTs(input)).toMatchInlineSnapshot(`
{
"tupleOfPrimitive": {
"raw": "[string, number]",
"name": "other",
"value": "tuple"
},
"tupleWithComplexType": {
"raw": "[string, ItemInterface]",
"name": "other",
"value": "tuple"
}
}
`);
});
});
describe('PropTypes', () => {
it('scalars', () => {
const input = readFixture('proptypes/scalars.js');
expect(input).toMatchInlineSnapshot(`
"import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
};
"
`);
expect(convertJs(input)).toMatchInlineSnapshot(`
{
"optionalBool": {
"name": "boolean"
},
"optionalFunc": {
"name": "function"
},
"optionalNumber": {
"name": "number"
},
"optionalString": {
"name": "string"
},
"optionalSymbol": {
"name": "symbol"
}
}
`);
});
it('arrays', () => {
const input = readFixture('proptypes/arrays.js');
expect(input).toMatchInlineSnapshot(`
"import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
optionalArray: PropTypes.array,
arrayOfStrings: PropTypes.arrayOf(PropTypes.string),
arrayOfShape: PropTypes.arrayOf(
PropTypes.shape({
active: PropTypes.bool,
})
),
};
"
`);
expect(convertJs(input)).toMatchInlineSnapshot(`
{
"optionalArray": {
"name": "array"
},
"arrayOfStrings": {
"name": "array",
"value": {
"name": "string"
}
},
"arrayOfShape": {
"name": "array",
"value": {
"name": "object",
"value": {
"active": {
"name": "boolean"
}
}
}
}
}
`);
});
it('enums', () => {
const input = readFixture('proptypes/enums.js');
expect(input).toMatchInlineSnapshot(`
"import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
oneOfNumber: PropTypes.oneOf([1, 2, 3]),
oneOfString: PropTypes.oneOf(['static', 'timed']),
};
"
`);
expect(convertJs(input)).toMatchInlineSnapshot(`
{
"oneOfNumber": {
"name": "enum",
"value": [
"1",
"2",
"3"
]
},
"oneOfString": {
"name": "enum",
"value": [
"static",
"timed"
]
}
}
`);
});
it('misc', () => {
const input = readFixture('proptypes/misc.js');
expect(input).toMatchInlineSnapshot(`
"import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Object),
]),
optionalMessage: PropTypes.instanceOf(Object),
// A value of any data type
requiredAny: PropTypes.any.isRequired,
};
"
`);
expect(convertJs(input)).toMatchInlineSnapshot(`
{
"optionalUnion": {
"name": "union",
"value": [
{
"name": "string"
},
{
"name": "number"
},
{
"name": "other",
"value": "instanceOf(Object)"
}
]
},
"optionalMessage": {
"name": "other",
"value": "instanceOf(Object)"
},
"requiredAny": {
"name": "other",
"value": "any"
}
}
`);
});
it('objects', () => {
const input = readFixture('proptypes/objects.js');
expect(input).toMatchInlineSnapshot(`
"import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
optionalObject: PropTypes.object,
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number,
}),
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number,
}),
};
"
`);
expect(convertJs(input)).toMatchInlineSnapshot(`
{
"optionalObject": {
"name": "object"
},
"optionalObjectOf": {
"name": "objectOf",
"value": {
"name": "number"
}
},
"optionalObjectWithShape": {
"name": "object",
"value": {
"color": {
"name": "string"
},
"fontSize": {
"name": "number"
}
}
},
"optionalObjectWithStrictShape": {
"name": "object",
"value": {
"name": {
"name": "string"
},
"quantity": {
"name": "number"
}
}
}
}
`);
});
it('react', () => {
const input = readFixture('proptypes/react.js');
expect(input).toMatchInlineSnapshot(`
"import React from 'react';
import PropTypes from 'prop-types';
export const Component = (props) => <>JSON.stringify(props)</>;
Component.propTypes = {
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element.
optionalElement: PropTypes.element,
// A React element type (ie. MyComponent).
optionalElementType: PropTypes.elementType,
};
"
`);
expect(convertJs(input)).toMatchInlineSnapshot(`
{
"optionalNode": {
"name": "other",
"value": "node"
},
"optionalElement": {
"name": "other",
"value": "element"
},
"optionalElementType": {
"name": "other",
"value": "elementType"
}
}
`);
});
});
});
const readFixture = (fixture: string) =>
fs.readFileSync(`${__dirname}/__testfixtures__/${fixture}`).toString();
const transformToModule = (inputCode: string) => {
const options = {
presets: [
[
'@babel/preset-env',
{
targets: {
esmodules: true,
},
},
],
],
};
const { code } = transformSync(inputCode, options);
return normalizeNewlines(code);
};
const annotateWithDocgen = (inputCode: string, filename: string) => {
const options = {
presets: ['@babel/typescript', '@babel/react'],
plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
babelrc: false,
filename,
};
const { code } = transformSync(inputCode, options);
return normalizeNewlines(code);
};
const convertCommon = (code: string, fileExt: string) => {
const docgenPretty = annotateWithDocgen(code, `temp.${fileExt}`);
const { Component } = requireFromString(transformToModule(docgenPretty));
// eslint-disable-next-line no-underscore-dangle
const { props = {} } = Component.__docgenInfo || {};
const types = mapValues(props, (prop) => convert(prop));
return types;
};
const convertTs = (code: string) => convertCommon(code, 'tsx');
const convertJs = (code: string) => convertCommon(code, 'js');

11
addons/docs/src/lib/sbtypes/convert.ts Normal file
View File

@ -0,0 +1,11 @@
import { DocgenInfo } from '../docgen/types';
import { convert as tsConvert, TSType } from './typescript';
import { convert as propTypesConvert } from './proptypes';
export const convert = (docgenInfo: DocgenInfo) => {
const { type, tsType } = docgenInfo;
if (type != null) return propTypesConvert(type);
if (tsType != null) return tsConvert(tsType as TSType);
return null;
};

2
addons/docs/src/lib/sbtypes/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './convert';
export * from './types';

46
addons/docs/src/lib/sbtypes/proptypes/convert.ts Normal file
View File

@ -0,0 +1,46 @@
/* eslint-disable no-case-declarations */
import mapValues from 'lodash/mapValues';
import { PTType } from './types';
import { SBType } from '../types';
const QUOTE_REGEX = /^['"]|['"]$/g;
const trimQuotes = (str: string) => str.replace(QUOTE_REGEX, '');
export const convert = (type: PTType): SBType | any => {
const { name, raw, computed, value } = type;
const base: any = {};
if (typeof raw !== 'undefined') base.raw = raw;
switch (name) {
case 'enum': {
const values = computed ? value : value.map((v: PTType) => trimQuotes(v.value));
return { ...base, name, value: values };
}
case 'string':
case 'number':
case 'symbol':
return { ...base, name };
case 'func':
return { ...base, name: 'function' };
case 'bool':
return { ...base, name: 'boolean' };
case 'arrayOf':
case 'array':
return { ...base, name: 'array', value: value && convert(value as PTType) };
case 'object':
return { ...base, name };
case 'objectOf':
return { ...base, name, value: convert(value as PTType) };
case 'shape':
case 'exact':
const values = mapValues(value, (field) => convert(field));
return { ...base, name: 'object', value: values };
case 'union':
return { ...base, name: 'union', value: value.map((v: PTType) => convert(v)) };
case 'instanceOf':
case 'element':
case 'elementType':
default:
const otherVal = value ? `${name}(${value})` : name;
return { ...base, name: 'other', value: otherVal };
}
};

2
addons/docs/src/lib/sbtypes/proptypes/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './convert';
export * from './types';

11
addons/docs/src/lib/sbtypes/proptypes/types.ts Normal file
View File

@ -0,0 +1,11 @@
interface PTBaseType {
name: string;
description?: string;
required?: boolean;
}
export type PTType = PTBaseType & {
value?: any;
raw?: string;
computed?: boolean;
};

42
addons/docs/src/lib/sbtypes/types.ts Normal file
View File

@ -0,0 +1,42 @@
interface SBBaseType {
required?: boolean;
raw?: string;
}
export type SBScalarType = SBBaseType & {
name: 'boolean' | 'string' | 'number' | 'function';
};
export type SBArrayType = SBBaseType & {
name: 'array';
value: SBType[];
};
export type SBObjectType = SBBaseType & {
name: 'object';
value: Record<string, SBType>;
};
export type SBEnumType = SBBaseType & {
name: 'enum';
value: (string | number)[];
};
export type SBIntersectionType = SBBaseType & {
name: 'intersection';
value: SBType[];
};
export type SBUnionType = SBBaseType & {
name: 'union';
value: SBType[];
};
export type SBOtherType = SBBaseType & {
name: 'other';
value: string;
};
export type SBType =
| SBScalarType
| SBEnumType
| SBArrayType
| SBObjectType
| SBIntersectionType
| SBUnionType
| SBOtherType;

45
addons/docs/src/lib/sbtypes/typescript/convert.ts Normal file
View File

@ -0,0 +1,45 @@
/* eslint-disable no-case-declarations */
import { TSType, TSSigType } from './types';
import { SBType } from '../types';
const convertSig = (type: TSSigType) => {
switch (type.type) {
case 'function':
return { name: 'function' };
case 'object':
const values: any = {};
type.signature.properties.forEach((prop) => {
values[prop.key] = convert(prop.value);
});
return {
name: 'object',
value: values,
};
default:
throw new Error(`Unknown: ${type}`);
}
};
export const convert = (type: TSType): SBType | void => {
const { name, raw } = type;
const base: any = {};
if (typeof raw !== 'undefined') base.raw = raw;
switch (type.name) {
case 'string':
case 'number':
case 'symbol':
case 'boolean': {
return { ...base, name };
}
case 'Array': {
return { ...base, name: 'array', value: type.elements.map(convert) };
}
case 'signature':
return { ...base, ...convertSig(type) };
case 'union':
case 'intersection':
return { ...base, name, value: type.elements.map(convert) };
default:
return { ...base, name: 'other', value: name };
}
};

2
addons/docs/src/lib/sbtypes/typescript/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './convert';
export * from './types';

46
addons/docs/src/lib/sbtypes/typescript/types.ts Normal file
View File

@ -0,0 +1,46 @@
interface TSBaseType {
name: string;
type?: string;
raw?: string;
required?: boolean;
}
type TSArgType = TSType;
type TSCombinationType = TSBaseType & {
name: 'union' | 'intersection';
elements: TSType[];
};
type TSFuncSigType = TSBaseType & {
name: 'signature';
type: 'function';
signature: {
arguments: TSArgType[];
return: TSType;
};
};
type TSObjectSigType = TSBaseType & {
name: 'signature';
type: 'object';
signature: {
properties: {
key: string;
value: TSType;
}[];
};
};
type TSScalarType = TSBaseType & {
name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol';
};
type TSArrayType = TSBaseType & {
name: 'Array';
elements: TSType[];
};
export type TSSigType = TSObjectSigType | TSFuncSigType;
export type TSType = TSScalarType | TSCombinationType | TSSigType | TSArrayType;

2
addons/knobs/package.json
View File

@ -54,7 +54,7 @@
"@types/enzyme": "^3.10.5",
"@types/escape-html": "0.0.20",
"@types/react-lifecycles-compat": "^3.0.1",
"@types/react-select": "^2.0.19",
"@types/react-select": "^3.0.11",
"@types/webpack-env": "^1.15.1",
"enzyme": "^3.11.0"
},

7
addons/storyshots/storyshots-core/src/frameworks/configure.ts
View File

@ -54,12 +54,7 @@ function getConfigPathParts(input: string): Output {
(pattern: string | { path: string; recursive: boolean; match: string }) => {
const { path: basePath, recursive, match } = toRequireContext(pattern);
// eslint-disable-next-line no-underscore-dangle
return global.__requireContext(
configDir,
basePath,
recursive,
new RegExp(match.slice(1, -1))
);
return global.__requireContext(configDir, basePath, recursive, match);
}
);
}

4
docs/src/pages/configurations/overview/index.md
View File

@ -48,9 +48,9 @@ In `preview.js` you can add global [decorators](../../basics/writing-stories/#de
```js
// preview.js
import { addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
addDecorator(withA11y);
addDecorator(withKnobs);
```
In `manager.js` you can add [UI options](../options-parameter/#global-options).

42
docs/src/pages/formats/component-story-format/index.md
View File

@ -66,6 +66,48 @@ Simple.story = {
};
```
## Args story inputs
Starting in SB 6.0, stories accept named inputs called Args. Args are dynamic data that are provided (and possibly updated by) Storybook and its addons.
Consider Storybook’s ["hello world" example](https://storybook.js.org/docs/basics/writing-stories/#basic-story) of a text button that logs its click events:
```js
import { action } from '@storybook/addon-actions';
import { Button } from './Button';
export default { title: 'Button', component: Button };
export const Text = () => <Button label=’Hello’ onClick={action(‘clicked’)} />;
```
Now consider the same example, re-written with args:
```js
export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
Text.story = {
args: {
label: 'Hello',
onClick: action('clicked'),
},
};
```
At first blush this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write:
```js
export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
```
Or even more simply:
```js
export const Text = (args) => <Button {...args} />;
```
Not only are these versions shorter and easier to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
For more information on setting up [Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs) and [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions), see their respective documentation.
## Storybook Export vs Name Handling
Storybook handles named exports and `story.name` slightly differently. When should you use one vs. the other?

2
docs/src/pages/formats/storiesof-api/index.md
View File

@ -71,7 +71,7 @@ And finally, story-level decorators are provided via parameters:
storiesOf('Button', module).add(
'with text',
() => <Button onClick={action('clicked')}>Hello Button</Button>,
{ decorators: withA11y }
{ decorators: withKnobs }
);
```

2
examples/ember-cli/stories/addon-a11y.stories.js
View File

@ -1,9 +1,7 @@
import { hbs } from 'ember-cli-htmlbars';
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'Addon/a11y',
decorators: [withA11y],
parameters: {
options: { selectedPanel: '@storybook/a11y/panel' },

2
examples/official-storybook/main.js
View File

@ -4,7 +4,7 @@ module.exports = {
'../../lib/ui/src/**/*.stories.(js|tsx|mdx)',
'../../lib/components/src/**/*.stories.(js|tsx|mdx)',
'./stories/**/*.stories.(js|tsx|mdx)',
'./../../addons/docs/**/react-properties.stories.tsx',
'./../../addons/docs/**/*.stories.tsx',
],
addons: [
'@storybook/addon-docs',

4
examples/official-storybook/preview.js
View File

@ -68,12 +68,10 @@ addParameters({
});
export const parameters = {
passArgsFirst: true,
exportedParameter: 'exportedParameter',
args: { invalid1: 'will warn' },
};
export const args = { invalid2: 'will warn' };
export const globalArgs = {
foo: 'fooValue',
};

Some files were not shown because too many files have changed in this diff Show More