@storybook/react 7.3.2 → 7.4.0-alpha.1

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

@@ -1,410 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,91 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import mapValues from 'lodash/mapValues.js';
-import { PureArgsTable as ArgsTable } from '@storybook/blocks';
-import { inferControls } from '@storybook/preview-api';
-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

@@ -1,26 +0,0 @@
-import { global as globalThis } from '@storybook/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/teardown.stories.tsx

@@ -1,23 +0,0 @@
-import { useEffect } from 'react';
-
-const LoggingComponent = () => {
-  useEffect(() => {
-    console.log('mounted');
-    return () => {
-      console.log('unmounted');
-    };
-  }, []);
-
-  return 'Component';
-};
-
-export default {
-  component: LoggingComponent,
-  tags: ['autodocs'],
-  parameters: {
-    storyshots: { disable: true },
-    chromatic: { disable: true },
-  },
-};
-
-export const Default = {};