@storybook/react 7.0.0-alpha.46 → 7.0.0-alpha.48

package/template/stories/docgen-components/ts-types/properties.snapshot

@@ -0,0 +1,410 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-types 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Any value'",
+      },
+      "description": undefined,
+      "name": "any",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'A string value'",
+      },
+      "description": undefined,
+      "name": "string",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "true",
+      },
+      "description": undefined,
+      "name": "bool",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "5",
+      },
+      "description": undefined,
+      "name": "number",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "() => {}",
+      },
+      "description": undefined,
+      "name": "voidFunc",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "function concat(a: string, b: string): string {
+  return a + b;
+}",
+      },
+      "description": undefined,
+      "name": "funcWithArgsAndReturns",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "Symbol('Default symbol')",
+      },
+      "description": undefined,
+      "name": "symbol",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ text: 'foo', value: 'bar' }",
+      },
+      "description": undefined,
+      "name": "interface",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ value: 'A string value' }",
+      },
+      "description": undefined,
+      "name": "genericInterface",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "['foo', 'bar']",
+      },
+      "description": undefined,
+      "name": "arrayOfPrimitive",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "[{ text: 'foo', value: 'bar' }]",
+      },
+      "description": undefined,
+      "name": "arrayOfComplexObject",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "['string value', 5]",
+      },
+      "description": undefined,
+      "name": "tupleOfPrimitive",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "['string value', { text: 'foo', value: 'bar' }]",
+      },
+      "description": undefined,
+      "name": "tupleWithComplexType",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "DefaultEnum.TopRight",
+      },
+      "description": undefined,
+      "name": "defaultEnum",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "NumericEnum.TopRight",
+      },
+      "description": undefined,
+      "name": "numericEnum",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "StringEnum.TopRight",
+      },
+      "description": undefined,
+      "name": "stringEnum",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "DefaultEnum.TopLeft",
+      },
+      "description": undefined,
+      "name": "enumUnion",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ foo: 1, bar: 2 }",
+      },
+      "description": undefined,
+      "name": "recordOfPrimitive",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ foo: { text: 'bar', value: 'bar2' } }",
+      },
+      "description": undefined,
+      "name": "recordOfComplexObject",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ text: 'foo', value: 'bar', name: 'foo-bar' }",
+      },
+      "description": undefined,
+      "name": "intersectionType",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ text: 'foo', value: 'bar', inlineValue: 'this is inlined' }",
+      },
+      "description": undefined,
+      "name": "intersectionWithInlineType",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'A string value'",
+      },
+      "description": undefined,
+      "name": "unionOfPrimitive",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ text: 'foo', value: 'bar' }",
+      },
+      "description": undefined,
+      "name": "unionOfComplexType",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": undefined,
+      "name": "nullableComplexTypeUndefinedDefaultValue",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'foo'",
+      },
+      "description": undefined,
+      "name": "typeAlias",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'foo'",
+      },
+      "description": undefined,
+      "name": "aliasesUnion",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ value: 'foo' }",
+      },
+      "description": undefined,
+      "name": "genericAlias",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'top-right'",
+      },
+      "description": undefined,
+      "name": "namedStringLiteralUnion",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'bottom-right'",
+      },
+      "description": undefined,
+      "name": "inlinedStringLiteralUnion",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "0",
+      },
+      "description": undefined,
+      "name": "namedNumericLiteralUnion",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "1",
+      },
+      "description": undefined,
+      "name": "inlinedNumericLiteralUnion",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;

package/template/stories/errors.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const badOutput = { renderable: 'no, react can not render objects' };
+const BadComponent = () => badOutput;
+
+export default {
+  component: BadComponent,
+  parameters: {
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
+  decorators: [
+    // Skip errors if we are running in the test runner
+    (storyFn: any) => window?.navigator?.userAgent?.match(/StorybookTestRunner/) || storyFn(),
+  ],
+};
+
+export const RenderThrows = {
+  render() {
+    throw new Error('storyFn threw an error! WHOOPS');
+  },
+};
+
+export const ComponentIsUnrenderable = {};
+
+export const StoryIsUnrenderable = {
+  render: () => badOutput,
+};
+
+export const StoryContainsUnrenderable = {
+  render: () => (
+    <div>
+      {/* @ts-expect-error we're doing it wrong here on purpose */}
+      <BadComponent />
+    </div>
+  ),
+};

package/template/stories/hooks.stories.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+import React, { useState } from 'react';
+
+const ButtonWithState: FC = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <button type="button" onClick={() => setCount(count + 1)}>
+      {`count: ${count}`}
+    </button>
+  );
+};
+
+export default {
+  component: ButtonWithState,
+};
+
+export const Basic = {};

package/template/stories/js-argtypes.stories.jsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import mapValues from 'lodash/mapValues';
+import { PureArgsTable as ArgsTable } from '@storybook/blocks';
+import { inferControls } from '@storybook/store';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+
+import { component as JsClassComponentComponent } from './docgen-components/js-class-component/input.jsx';
+import { component as JsFunctionComponentComponent } from './docgen-components/js-function-component/input.jsx';
+import { component as JsFunctionComponentInlineDefaultsComponent } from './docgen-components/js-function-component-inline-defaults/input.jsx';
+import { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from './docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx';
+import { component as JsProptypesShapeComponent } from './docgen-components/9399-js-proptypes-shape/input.jsx';
+// import { component as JsStyledComponentsComponent } from './__testfixtures__/8663-js-styled-components/input';
+import { component as JsDefaultValuesComponent } from './docgen-components/9626-js-default-values/input.jsx';
+import { component as JsProptypesNoJsdocComponent } from './docgen-components/9668-js-proptypes-no-jsdoc/input.jsx';
+// import { component as JsStyledDocgenComponent } from './__testfixtures__/8279-js-styled-docgen/input';
+import { component as JsPropTypesOneofComponent } from './docgen-components/8140-js-prop-types-oneof/input.jsx';
+import { component as JsHocComponent } from './docgen-components/9023-js-hoc/input.jsx';
+import { component as JsReactMemoComponent } from './docgen-components/9586-js-react-memo/input.jsx';
+import { component as JsStaticPropTypesComponent } from './docgen-components/8428-js-static-prop-types/input.jsx';
+import { component as JsdocComponent } from './docgen-components/jsdoc/input.jsx';
+import { component as JsProptypesComponent } from './docgen-components/js-proptypes/input.jsx';
+
+// Detect if we are running in vite in a hacky way for now
+const isVite = typeof require === 'undefined';
+
+export default {
+  component: {},
+  render: (_, context) => <ArgsStory parameters={context.parameters} />,
+  parameters: {
+    chromatic: {
+      disableSnapshot: isVite,
+    },
+  },
+};
+
+const ArgsStory = ({ parameters }) => {
+  const argTypes = parameters.docs.extractArgTypes(parameters.component);
+  const rows = inferControls({ argTypes, parameters: { __isArgsStory: true } });
+  const initialArgs = mapValues(rows, (argType) => argType.defaultValue);
+  const [args, setArgs] = useState(initialArgs);
+
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
+    </ThemeProvider>
+  );
+};
+
+ArgsStory.propTypes = {
+  parameters: PropTypes.shape({
+    component: PropTypes.elementType.isRequired,
+    docs: PropTypes.shape({
+      extractArgTypes: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+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 JsProptypesShape = { parameters: { component: JsProptypesShapeComponent } };
+
+// export const JsStyledComponents = { parameters: { component: JsStyledComponentsComponent } };
+
+export const JsDefaultValues = { parameters: { component: JsDefaultValuesComponent } };
+
+export const JsProptypesNoJsdoc = { parameters: { component: JsProptypesNoJsdocComponent } };
+
+// export const JsStyledDocgen = { parameters: { component: JsStyledDocgenComponent } };
+
+export const JsPropTypesOneof = { parameters: { component: JsPropTypesOneofComponent } };
+
+export const JsHoc = { parameters: { component: JsHocComponent } };
+
+export const JsReactMemo = { parameters: { component: JsReactMemoComponent } };
+
+export const JsStaticPropTypes = { parameters: { component: JsStaticPropTypesComponent } };
+
+export const Jsdoc = { parameters: { component: JsdocComponent } };
+
+export const JsProptypes = { parameters: { component: JsProptypesComponent } };

package/template/stories/react-mdx.stories.mdx

@@ -0,0 +1,26 @@
+import globalThis from 'global';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+<Meta title="stories/renderers/react/react-mdx" />
+
+# React-specific MDX Stories
+
+export const Button = globalThis.Components.Button;
+
+export const Template = (args) => <Button label="From template" />;
+
+<Canvas>
+  <Story name="Primary">
+    <Button label="Primary" />
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story name="Secondary">
+    <Button label="Secondary" />
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story name="From Template">{Template.bind({})}</Story>
+</Canvas>

package/template/stories/ts-argtypes.stories.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import mapValues from 'lodash/mapValues';
+import { PureArgsTable as ArgsTable } from '@storybook/blocks';
+import type { Args, Parameters, StoryContext } from '@storybook/types';
+import { inferControls } from '@storybook/store';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+
+import { component as TsFunctionComponentComponent } from './docgen-components/ts-function-component/input';
+import { component as TsFunctionComponentInlineDefaultsComponent } from './docgen-components/ts-function-component-inline-defaults/input';
+import { component as TsReactFcGenericsComponent } from './docgen-components/8143-ts-react-fc-generics/input';
+import { component as TsImportedTypesComponent } from './docgen-components/8143-ts-imported-types/input';
+import { component as TsMultiPropsComponent } from './docgen-components/8740-ts-multi-props/input';
+import { component as TsReactDefaultExportsComponent } from './docgen-components/9556-ts-react-default-exports/input';
+import { component as TsImportTypesComponent } from './docgen-components/9591-ts-import-types/input';
+import { component as TsDeprecatedJsdocComponent } from './docgen-components/9721-ts-deprecated-jsdoc/input';
+import { component as TsDefaultValuesComponent } from './docgen-components/9827-ts-default-values/input';
+import { component as TsCamelCaseComponent } from './docgen-components/9575-ts-camel-case/input';
+import { component as TsDisplayNameComponent } from './docgen-components/9493-ts-display-name/input';
+import { component as TsForwardRefComponent } from './docgen-components/8894-9511-ts-forward-ref/input';
+import { component as TsTypePropsComponent } from './docgen-components/9465-ts-type-props/input';
+import { component as TsExtendPropsComponent } from './docgen-components/9764-ts-extend-props/input';
+import { component as TsComponentPropsComponent } from './docgen-components/9922-ts-component-props/input';
+import { component as TsJsdocComponent } from './docgen-components/ts-jsdoc/input';
+import { component as TsTypesComponent } from './docgen-components/ts-types/input';
+import { component as TsHtmlComponent } from './docgen-components/ts-html/input';
+
+export default {
+  component: {},
+  render: (_: Args, context: StoryContext) => <ArgsStory parameters={context.parameters} />,
+};
+
+const ArgsStory = ({ parameters }: { parameters: Parameters }) => {
+  const argTypes = parameters.docs.extractArgTypes(parameters.component);
+  const rows = inferControls({ argTypes, parameters: { __isArgsStory: true } } as any);
+  const initialArgs = mapValues(rows, (argType) => argType.defaultValue);
+  const [args, setArgs] = useState(initialArgs);
+
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <ArgsTable rows={rows} args={args} updateArgs={(val) => setArgs({ ...args, ...val })} />
+    </ThemeProvider>
+  );
+};
+
+export const TsFunctionComponent = { parameters: { component: TsFunctionComponentComponent } };
+
+export const TsFunctionComponentInlineDefaults = {
+  parameters: { component: TsFunctionComponentInlineDefaultsComponent },
+};
+
+export const TsReactFcGenerics = { parameters: { component: TsReactFcGenericsComponent } };
+
+export const TsImportedTypes = { parameters: { component: TsImportedTypesComponent } };
+
+export const TsMultiProps = { parameters: { component: TsMultiPropsComponent } };
+
+export const TsReactDefaultExports = { parameters: { component: TsReactDefaultExportsComponent } };
+
+export const TsImportTypes = { parameters: { component: TsImportTypesComponent } };
+
+export const TsDeprecatedJsdoc = { parameters: { component: TsDeprecatedJsdocComponent } };
+
+export const TsDefaultValues = { parameters: { component: TsDefaultValuesComponent } };
+
+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 TsExtendProps = { parameters: { component: TsExtendPropsComponent } };
+
+export const TsComponentProps = { parameters: { component: TsComponentPropsComponent } };
+
+export const TsJsdoc = { parameters: { component: TsJsdocComponent } };
+
+export const TsTypes = { parameters: { component: TsTypesComponent } };
+
+export const TsHtml = { parameters: { component: TsHtmlComponent } };