Skip to content

Commit

Permalink
Update stories to work
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmeasday
tmeasday committed Sep 27, 2022
1 parent 9d33725 commit 9e4438a
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 52 deletions.
156 changes: 107 additions & 49 deletions code/renderers/react/template/stories/react-argtypes.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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',
];

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`);

issuesStories.add(fixture, () => <ArgsStory component={component} />, {
chromatic: { disable: true },
});
});
export const JsClassComponent = { parameters: { component: JsClassComponentComponent } };

export const JsFunctionComponent = { parameters: { component: JsFunctionComponentComponent } };

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 } };
6 changes: 3 additions & 3 deletions code/renderers/react/template/stories/react-properties.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });

Expand Down

0 comments on commit 9e4438a

Please sign in to comment.