mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-31 05:03:21 +08:00
Update stories to work
This commit is contained in:
Tom Coleman
parent
9d33725de8
commit
9e4438a31b
@ -1,25 +1,61 @@
|
||||
import React, { useState } from 'react';
|
||||
import mapValues from 'lodash/mapValues';
|
||||
import { PureArgsTable as ArgsTable } from '@storybook/blocks';
|
||||
import type { Args } from '@storybook/csf';
|
||||
import type { Args, Parameters } from '@storybook/csf';
|
||||
import { inferControls } from '@storybook/store';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
|
||||
import { storiesOf } from '../public-api';
|
||||
import type { StoryContext } from '../types';
|
||||
import { extractArgTypes } from './extractArgTypes';
|
||||
import { component as JsClassComponentComponent } from './__testfixtures__/js-class-component/input';
|
||||
import { component as JsFunctionComponentComponent } from './__testfixtures__/js-function-component/input';
|
||||
import { component as JsFunctionComponentInlineDefaultsComponent } from './__testfixtures__/js-function-component-inline-defaults/input';
|
||||
import { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from './__testfixtures__/js-function-component-inline-defaults-no-propTypes/input';
|
||||
import { component as TsFunctionComponentComponent } from './__testfixtures__/ts-function-component/input';
|
||||
import { component as TsFunctionComponentInlineDefaultsComponent } from './__testfixtures__/ts-function-component-inline-defaults/input';
|
||||
import { component as JsProptypesShapeComponent } from './__testfixtures__/9399-js-proptypes-shape/input';
|
||||
// import { component as JsStyledComponentsComponent } from './__testfixtures__/8663-js-styled-components/input';
|
||||
import { component as JsDefaultValuesComponent } from './__testfixtures__/9626-js-default-values/input';
|
||||
import { component as JsProptypesNoJsdocComponent } from './__testfixtures__/9668-js-proptypes-no-jsdoc/input';
|
||||
import { component as TsReactFcGenericsComponent } from './__testfixtures__/8143-ts-react-fc-generics/input';
|
||||
import { component as TsImportedTypesComponent } from './__testfixtures__/8143-ts-imported-types/input';
|
||||
// import { component as JsStyledDocgenComponent } from './__testfixtures__/8279-js-styled-docgen/input';
|
||||
import { component as JsPropTypesOneofComponent } from './__testfixtures__/8140-js-prop-types-oneof/input';
|
||||
import { component as JsHocComponent } from './__testfixtures__/9023-js-hoc/input';
|
||||
import { component as TsMultiPropsComponent } from './__testfixtures__/8740-ts-multi-props/input';
|
||||
import { component as TsReactDefaultExportsComponent } from './__testfixtures__/9556-ts-react-default-exports/input';
|
||||
// import { component as TsStyledPropsComponent } from './__testfixtures__/9592-ts-styled-props/input';
|
||||
import { component as TsImportTypesComponent } from './__testfixtures__/9591-ts-import-types/input';
|
||||
import { component as TsDeprecatedJsdocComponent } from './__testfixtures__/9721-ts-deprecated-jsdoc/input';
|
||||
import { component as TsDefaultValuesComponent } from './__testfixtures__/9827-ts-default-values/input';
|
||||
import { component as JsReactMemoComponent } from './__testfixtures__/9586-js-react-memo/input';
|
||||
import { component as TsCamelCaseComponent } from './__testfixtures__/9575-ts-camel-case/input';
|
||||
// import { component as TsDisplayNameComponent } from './__testfixtures__/9493-ts-display-name/input';
|
||||
import { component as TsForwardRefComponent } from './__testfixtures__/8894-9511-ts-forward-ref/input';
|
||||
import { component as TsTypePropsComponent } from './__testfixtures__/9465-ts-type-props/input';
|
||||
import { component as JsStaticPropTypesComponent } from './__testfixtures__/8428-js-static-prop-types/input';
|
||||
import { component as TsExtendPropsComponent } from './__testfixtures__/9764-ts-extend-props/input';
|
||||
import { component as TsComponentPropsComponent } from './__testfixtures__/9922-ts-component-props/input';
|
||||
|
||||
export default {
|
||||
component: {},
|
||||
render: (_: any, { parameters }: { parameters: Parameters }) => (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<ArgsStory parameters={parameters} />
|
||||
</ThemeProvider>
|
||||
),
|
||||
};
|
||||
|
||||
// FIXME
|
||||
type Component = any;
|
||||
|
||||
const argsTableProps = (component: Component) => {
|
||||
const argsTableProps = (component: Component, { extractArgTypes }: Parameters) => {
|
||||
const argTypes = extractArgTypes(component);
|
||||
const parameters = { __isArgsStory: true };
|
||||
const rows = inferControls({ argTypes, parameters } as unknown as StoryContext<any>);
|
||||
const rows = inferControls({ argTypes, parameters } as any);
|
||||
return { rows };
|
||||
};
|
||||
|
||||
const ArgsStory = ({ component }: any) => {
|
||||
const { rows } = argsTableProps(component);
|
||||
const ArgsStory = ({ parameters: { component, docs } }: any) => {
|
||||
const { rows } = argsTableProps(component, docs);
|
||||
const initialArgs = mapValues(rows, (argType) => argType.defaultValue) as Args;
|
||||
|
||||
const [args, setArgs] = useState(initialArgs);
|
||||
@ -54,44 +90,66 @@ const ArgsStory = ({ component }: any) => {
|
||||
);
|
||||
};
|
||||
|
||||
const issuesFixtures = [
|
||||
'js-class-component',
|
||||
'js-function-component',
|
||||
'js-function-component-inline-defaults',
|
||||
'js-function-component-inline-defaults-no-propTypes',
|
||||
'ts-function-component',
|
||||
'ts-function-component-inline-defaults',
|
||||
'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',
|
||||
];
|
||||
export const JsClassComponent = { parameters: { component: JsClassComponentComponent } };
|
||||
|
||||
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`);
|
||||
export const JsFunctionComponent = { parameters: { component: JsFunctionComponentComponent } };
|
||||
|
||||
issuesStories.add(fixture, () => <ArgsStory component={component} />, {
|
||||
chromatic: { disable: true },
|
||||
});
|
||||
});
|
||||
export const JsFunctionComponentInlineDefaults = {
|
||||
parameters: { component: JsFunctionComponentInlineDefaultsComponent },
|
||||
};
|
||||
|
||||
export const JsFunctionComponentInlineDefaultsNoPropTypes = {
|
||||
parameters: { component: JsFunctionComponentInlineDefaultsNoPropTypesComponent },
|
||||
};
|
||||
|
||||
export const TsFunctionComponent = { parameters: { component: TsFunctionComponentComponent } };
|
||||
|
||||
export const TsFunctionComponentInlineDefaults = {
|
||||
parameters: { component: TsFunctionComponentInlineDefaultsComponent },
|
||||
};
|
||||
|
||||
export const JsProptypesShape = { parameters: { component: JsProptypesShapeComponent } };
|
||||
|
||||
// export const JsStyledComponents = { parameters: { component: JsStyledComponentsComponent } };
|
||||
|
||||
export const JsDefaultValues = { parameters: { component: JsDefaultValuesComponent } };
|
||||
|
||||
export const JsProptypesNoJsdoc = { parameters: { component: JsProptypesNoJsdocComponent } };
|
||||
|
||||
export const TsReactFcGenerics = { parameters: { component: TsReactFcGenericsComponent } };
|
||||
|
||||
export const TsImportedTypes = { parameters: { component: TsImportedTypesComponent } };
|
||||
|
||||
// export const JsStyledDocgen = { parameters: { component: JsStyledDocgenComponent } };
|
||||
|
||||
export const JsPropTypesOneof = { parameters: { component: JsPropTypesOneofComponent } };
|
||||
|
||||
export const JsHoc = { parameters: { component: JsHocComponent } };
|
||||
|
||||
export const TsMultiProps = { parameters: { component: TsMultiPropsComponent } };
|
||||
|
||||
export const TsReactDefaultExports = { parameters: { component: TsReactDefaultExportsComponent } };
|
||||
|
||||
// export const TsStyledProps = { parameters: { component: TsStyledPropsComponent } };
|
||||
|
||||
export const TsImportTypes = { parameters: { component: TsImportTypesComponent } };
|
||||
|
||||
export const TsDeprecatedJsdoc = { parameters: { component: TsDeprecatedJsdocComponent } };
|
||||
|
||||
export const TsDefaultValues = { parameters: { component: TsDefaultValuesComponent } };
|
||||
|
||||
export const JsReactMemo = { parameters: { component: JsReactMemoComponent } };
|
||||
|
||||
export const TsCamelCase = { parameters: { component: TsCamelCaseComponent } };
|
||||
|
||||
// export const TsDisplayName = { parameters: { component: TsDisplayNameComponent } };
|
||||
|
||||
export const TsForwardRef = { parameters: { component: TsForwardRefComponent } };
|
||||
|
||||
export const TsTypeProps = { parameters: { component: TsTypePropsComponent } };
|
||||
|
||||
export const JsStaticPropTypes = { parameters: { component: JsStaticPropTypesComponent } };
|
||||
|
||||
export const TsExtendProps = { parameters: { component: TsExtendPropsComponent } };
|
||||
|
||||
export const TsComponentProps = { parameters: { component: TsComponentPropsComponent } };
|
||||
|
||||
@ -8,9 +8,9 @@ import { inferControls } from '@storybook/store';
|
||||
import type { AnyFramework } from '@storybook/csf';
|
||||
import { normalizeNewlines } from '@storybook/docs-tools';
|
||||
|
||||
import type { StoryContext } from '../../../src/types';
|
||||
import { extractProps } from '../../../src/docs/extractProps';
|
||||
import { extractArgTypes } from '../../../src/docs/extractArgTypes';
|
||||
import type { StoryContext } from '../../src/types';
|
||||
import { extractProps } from '../../src/docs/extractProps';
|
||||
import { extractArgTypes } from '../../src/docs/extractArgTypes';
|
||||
|
||||
// jest.mock('../imported', () => () => ({ imported: 'imported-value' }), { virtual: true });
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user