@storybook/react 7.4.0-alpha.0 → 7.4.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.4.0-alpha.0",
+  "version": "7.4.0-alpha.2",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -42,23 +42,24 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "template/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.4.0-alpha.0",
-    "@storybook/core-client": "7.4.0-alpha.0",
-    "@storybook/docs-tools": "7.4.0-alpha.0",
+    "@storybook/client-logger": "7.4.0-alpha.2",
+    "@storybook/core-client": "7.4.0-alpha.2",
+    "@storybook/docs-tools": "7.4.0-alpha.2",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.4.0-alpha.0",
-    "@storybook/react-dom-shim": "7.4.0-alpha.0",
-    "@storybook/types": "7.4.0-alpha.0",
+    "@storybook/preview-api": "7.4.0-alpha.2",
+    "@storybook/react-dom-shim": "7.4.0-alpha.2",
+    "@storybook/types": "7.4.0-alpha.2",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
     "@types/node": "^16.0.0",

package/src/__test__/README.md

@@ -1,3 +0,0 @@
-## Integration tests for @storybook/react.
-
-As these tests are implemented as stories, we may consider moving them inside the `template/stories` folder.

package/src/typings.d.ts

@@ -1,48 +0,0 @@
-// TODO: Replace, as soon as @types/react-dom 17.0.14 is used
-// Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts
-declare module 'react-dom/client' {
-  import React = require('react');
-
-  export interface HydrationOptions {
-    onHydrated?(suspenseInstance: Comment): void;
-    onDeleted?(suspenseInstance: Comment): void;
-    /**
-     * Prefix for `useId`.
-     */
-    identifierPrefix?: string;
-    onRecoverableError?: (error: unknown) => void;
-  }
-
-  export interface RootOptions {
-    /**
-     * Prefix for `useId`.
-     */
-    identifierPrefix?: string;
-    onRecoverableError?: (error: unknown) => void;
-  }
-
-  export interface Root {
-    render(children: React.ReactChild | Iterable<React.ReactNode>): void;
-    unmount(): void;
-  }
-
-  /**
-   * Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode.
-   *
-   * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot
-   */
-  export function createRoot(
-    container: Element | Document | DocumentFragment | Comment,
-    options?: RootOptions
-  ): Root;
-
-  export function hydrateRoot(
-    container: Element | Document | DocumentFragment | Comment,
-    initialChildren: React.ReactChild | Iterable<React.ReactNode>,
-    options?: HydrationOptions
-  ): Root;
-}
-
-declare var STORYBOOK_ENV: 'react';
-declare var FRAMEWORK_OPTIONS: any;
-declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

package/template/components/Button.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const Button = ({ onClick, label }) => (
-  <button type="button" onClick={onClick}>
-    {label}
-  </button>
-);
-
-Button.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  label: PropTypes.string.isRequired,
-};

package/template/components/Form.jsx

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-export const Form = ({ onSuccess }) => {
-  const [value, setValue] = useState('');
-  const [complete, setComplete] = useState(false);
-
-  function onSubmit(event) {
-    event.preventDefault();
-    onSuccess(value);
-
-    setTimeout(() => setComplete(true), 500);
-    setTimeout(() => setComplete(false), 1500);
-  }
-
-  return (
-    <form id="interaction-test-form" onSubmit={onSubmit}>
-      <label>
-        Enter Value
-        <input
-          type="text"
-          data-testid="value"
-          value={value}
-          required
-          onChange={(event) => setValue(event.target.value)}
-        />
-      </label>
-      <button type="submit">Submit</button>
-      {complete && <p>Completed!!</p>}
-    </form>
-  );
-};
-
-Form.propTypes = {
-  onSuccess: PropTypes.func.isRequired,
-};

package/template/components/Html.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// eslint-disable-next-line react/no-danger
-export const Html = ({ content }) => <div dangerouslySetInnerHTML={{ __html: content }} />;
-
-Html.propTypes = {
-  content: PropTypes.string.isRequired,
-};

package/template/components/Pre.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const Pre = ({ style, object, text }) => (
-  <pre style={style} data-testid="pre">
-    {object ? JSON.stringify(object, null, 2) : text}
-  </pre>
-);
-
-Pre.propTypes = {
-  style: PropTypes.shape({}),
-  object: PropTypes.shape({}),
-  text: PropTypes.string,
-};
-
-Pre.defaultProps = {
-  style: {},
-  object: null,
-  text: '',
-};

package/template/stories/decorators.stories.tsx

@@ -1,48 +0,0 @@
-import type { FC } from 'react';
-import React, { useContext, createContext } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-const Component: FC = () => <p>Story</p>;
-
-export default {
-  component: Component,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <>
-        <p>Component Decorator</p>
-        <Story />
-      </>
-    ),
-  ],
-} as Meta<typeof Component>;
-
-export const All: StoryObj<typeof Component> = {
-  decorators: [
-    (Story) => (
-      <>
-        <p>Local Decorator</p>
-        <Story />
-      </>
-    ),
-  ],
-};
-
-// This story will error if `parameters.docs.source.excludeDecorators` is true:
-// See https://github.com/storybookjs/storybook/issues/21900
-const TestContext = createContext<boolean>(false);
-export const Context: StoryObj<typeof Component> = {
-  // parameters: { docs: { source: { excludeDecorators: true } } },
-  decorators: [
-    (Story) => (
-      <TestContext.Provider value>
-        <Story />
-      </TestContext.Provider>
-    ),
-  ],
-  render: function Render(args, context) {
-    const value = useContext(TestContext);
-    if (!value) throw new Error('TestContext not set, decorator did not run!');
-    return <p>Story</p>;
-  },
-};

package/template/stories/docgen-components/10017-ts-union/argTypes.snapshot

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 10017-ts-union 1`] = `
-Object {
-  "icon": Object {
-    "control": Object {
-      "type": "object",
-    },
-    "description": "specify icon=\\"search\\" or icon={IconComponent}",
-    "name": "icon",
-    "table": Object {
-      "defaultValue": null,
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "union",
-      },
-    },
-    "type": Object {
-      "name": "union",
-      "raw": "React.ReactNode | string",
-      "required": true,
-      "value": Array [
-        Object {
-          "name": "other",
-          "raw": "React.ReactNode",
-          "value": "ReactReactNode",
-        },
-        Object {
-          "name": "string",
-        },
-      ],
-    },
-  },
-}
-`;

package/template/stories/docgen-components/10017-ts-union/docgen.snapshot

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 10017-ts-union 1`] = `
-"import React from 'react';
-const Avatar = ({
-  icon
-}) => {
-  return /*#__PURE__*/React.createElement(\\"div\\", {
-    className: \\"hello\\"
-  }, \\"Hello Component \\", icon);
-};
-export const component = Avatar;
-Avatar.__docgenInfo = {
-  \\"description\\": \\"\\",
-  \\"methods\\": [],
-  \\"displayName\\": \\"Avatar\\",
-  \\"props\\": {
-    \\"icon\\": {
-      \\"required\\": true,
-      \\"tsType\\": {
-        \\"name\\": \\"union\\",
-        \\"raw\\": \\"React.ReactNode | string\\",
-        \\"elements\\": [{
-          \\"name\\": \\"ReactReactNode\\",
-          \\"raw\\": \\"React.ReactNode\\"
-        }, {
-          \\"name\\": \\"string\\"
-        }]
-      },
-      \\"description\\": \\"specify icon=\\\\\\"search\\\\\\" or icon={IconComponent}\\"
-    }
-  }
-};"
-`;

package/template/stories/docgen-components/10017-ts-union/input.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-interface AvatarProps {
-  /** specify icon="search" or icon={IconComponent} */
-  icon: React.ReactNode | string;
-}
-
-const Avatar = ({ icon }: AvatarProps) => {
-  return <div className="hello">Hello Component {icon}</div>;
-};
-
-export const component = Avatar;

package/template/stories/docgen-components/10017-ts-union/properties.snapshot

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 10017-ts-union 1`] = `
-Object {
-  "rows": Array [
-    Object {
-      "defaultValue": null,
-      "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",
-      },
-    },
-  ],
-}
-`;

package/template/stories/docgen-components/10278-ts-multiple-components/argTypes.snapshot

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 10278-ts-multiple-components 1`] = `
-Object {
-  "aProperty": Object {
-    "control": Object {
-      "type": "object",
-    },
-    "description": "",
-    "name": "aProperty",
-    "table": Object {
-      "defaultValue": null,
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "any",
-      },
-    },
-    "type": Object {
-      "name": "other",
-      "required": true,
-      "value": "any",
-    },
-  },
-}
-`;

package/template/stories/docgen-components/10278-ts-multiple-components/docgen.snapshot

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 10278-ts-multiple-components 1`] = `
-"/* eslint-disable react/destructuring-assignment */
-import React from 'react';
-/**
- * A component
- */
-const A = props => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Hi \\", props.aProperty);
-};
-
-/**
- * B component
- */
-const B = props => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Hi \\", props.bProperty);
-};
-A.__docgenInfo = {
-  \\"description\\": \\"A component\\",
-  \\"methods\\": [],
-  \\"displayName\\": \\"A\\",
-  \\"props\\": {
-    \\"aProperty\\": {
-      \\"required\\": true,
-      \\"tsType\\": {
-        \\"name\\": \\"any\\"
-      },
-      \\"description\\": \\"\\"
-    }
-  }
-};
-B.__docgenInfo = {
-  \\"description\\": \\"B component\\",
-  \\"methods\\": [],
-  \\"displayName\\": \\"B\\",
-  \\"props\\": {
-    \\"bProperty\\": {
-      \\"required\\": true,
-      \\"tsType\\": {
-        \\"name\\": \\"any\\"
-      },
-      \\"description\\": \\"\\"
-    }
-  }
-};
-export { A, B };
-export const component = A;"
-`;

package/template/stories/docgen-components/10278-ts-multiple-components/input.tsx

@@ -1,27 +0,0 @@
-/* eslint-disable react/destructuring-assignment */
-import React from 'react';
-
-interface IAProps {
-  aProperty: any;
-}
-
-interface IBProps {
-  bProperty: any;
-}
-
-/**
- * A component
- */
-const A = (props: IAProps): JSX.Element => {
-  return <>Hi {props.aProperty}</>;
-};
-
-/**
- * B component
- */
-const B = (props: IBProps): JSX.Element => {
-  return <>Hi {props.bProperty}</>;
-};
-
-export { A, B };
-export const component = A;

package/template/stories/docgen-components/10278-ts-multiple-components/properties.snapshot

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 10278-ts-multiple-components 1`] = `
-Object {
-  "rows": Array [
-    Object {
-      "defaultValue": null,
-      "description": "",
-      "name": "aProperty",
-      "required": true,
-      "sbType": Object {
-        "name": "other",
-        "value": "any",
-      },
-      "type": Object {
-        "detail": undefined,
-        "summary": "any",
-      },
-    },
-  ],
-}
-`;

package/template/stories/docgen-components/8140-js-prop-types-oneof/argTypes.snapshot

@@ -1,127 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`react component properties 8140-js-prop-types-oneof 1`] = `
-Object {
-  "blank": Object {
-    "control": Object {
-      "type": "boolean",
-    },
-    "description": "No background or border if static alert",
-    "name": "blank",
-    "table": Object {
-      "defaultValue": null,
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "bool",
-      },
-    },
-    "type": Object {
-      "name": "boolean",
-      "required": false,
-    },
-  },
-  "icon": Object {
-    "control": Object {
-      "type": "text",
-    },
-    "description": "Allows icon override, accepts material icon name",
-    "name": "icon",
-    "table": Object {
-      "defaultValue": null,
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "string",
-      },
-    },
-    "type": Object {
-      "name": "string",
-      "required": false,
-    },
-  },
-  "message": Object {
-    "control": Object {
-      "type": "text",
-    },
-    "description": "",
-    "name": "message",
-    "table": Object {
-      "defaultValue": null,
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "string",
-      },
-    },
-    "type": Object {
-      "name": "string",
-      "required": true,
-    },
-  },
-  "mode": Object {
-    "control": Object {
-      "type": "radio",
-    },
-    "description": "",
-    "name": "mode",
-    "options": Array [
-      "static",
-      "timed",
-    ],
-    "table": Object {
-      "defaultValue": Object {
-        "detail": undefined,
-        "summary": "'static'",
-      },
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "'static' | 'timed'",
-      },
-    },
-    "type": Object {
-      "name": "enum",
-      "required": false,
-      "value": Array [
-        "static",
-        "timed",
-      ],
-    },
-  },
-  "type": Object {
-    "control": Object {
-      "type": "radio",
-    },
-    "description": "",
-    "name": "type",
-    "options": Array [
-      "success",
-      "warning",
-      "error",
-      "primary",
-    ],
-    "table": Object {
-      "defaultValue": Object {
-        "detail": undefined,
-        "summary": "'warning'",
-      },
-      "jsDocTags": undefined,
-      "type": Object {
-        "detail": undefined,
-        "summary": "'success' | 'warning' | 'error' | 'primary'",
-      },
-    },
-    "type": Object {
-      "name": "enum",
-      "required": false,
-      "value": Array [
-        "success",
-        "warning",
-        "error",
-        "primary",
-      ],
-    },
-  },
-}
-`;