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

package/template/components/Form.jsx

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

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

@@ -0,0 +1,20 @@
+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/components/index.js

@@ -0,0 +1,9 @@
+import globalThis from 'global';
+
+import { Button } from './Button.jsx';
+import { Pre } from './Pre.jsx';
+import { Form } from './Form.jsx';
+import { Html } from './Html.jsx';
+
+globalThis.Components = { Button, Pre, Form, Html };
+globalThis.storybookRenderer = 'react';

package/template/stories/decorators.stories.tsx

@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const Component: FC = () => <p>Story</p>;
+
+export default {
+  component: Component,
+  decorators: [
+    (Story) => (
+      <>
+        <p>Component Decorator</p>
+        <Story />
+      </>
+    ),
+  ],
+} as Meta<typeof Component>;
+
+export const All: StoryObj<typeof Component> = {
+  decorators: [
+    (Story) => (
+      <>
+        <p>Local Decorator</p>
+        <Story />
+      </>
+    ),
+  ],
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,127 @@
+// 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",
+      ],
+    },
+  },
+}
+`;

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

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8140-js-prop-types-oneof 1`] = `
+"/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+const Alert = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props));
+Alert.defaultProps = {
+  mode: 'static',
+  type: 'warning'
+};
+Alert.propTypes = {
+  mode: PropTypes.oneOf(['static', 'timed']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
+  message: PropTypes.string.isRequired,
+  /**
+   * No background or border if static alert
+   */
+  blank: PropTypes.bool,
+  /**
+   * Allows icon override, accepts material icon name
+   */
+  icon: PropTypes.string
+};
+export const component = Alert;
+Alert.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Alert\\",
+  \\"props\\": {
+    \\"mode\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'static'\\",
+        \\"computed\\": false
+      },
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"enum\\",
+        \\"value\\": [{
+          \\"value\\": \\"'static'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'timed'\\",
+          \\"computed\\": false
+        }]
+      },
+      \\"required\\": false
+    },
+    \\"type\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'warning'\\",
+        \\"computed\\": false
+      },
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"enum\\",
+        \\"value\\": [{
+          \\"value\\": \\"'success'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'warning'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'error'\\",
+          \\"computed\\": false
+        }, {
+          \\"value\\": \\"'primary'\\",
+          \\"computed\\": false
+        }]
+      },
+      \\"required\\": false
+    },
+    \\"message\\": {
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true
+    },
+    \\"blank\\": {
+      \\"description\\": \\"No background or border if static alert\\",
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false
+    },
+    \\"icon\\": {
+      \\"description\\": \\"Allows icon override, accepts material icon name\\",
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/8140-js-prop-types-oneof/input.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Alert = (props) => <>{JSON.stringify(props)}</>;
+
+Alert.defaultProps = {
+  mode: 'static',
+  type: 'warning',
+};
+
+Alert.propTypes = {
+  mode: PropTypes.oneOf(['static', 'timed']),
+  type: PropTypes.oneOf(['success', 'warning', 'error', 'primary']),
+  message: PropTypes.string.isRequired,
+  /**
+   * No background or border if static alert
+   */
+  blank: PropTypes.bool,
+  /**
+   * Allows icon override, accepts material icon name
+   */
+  icon: PropTypes.string,
+};
+
+export const component = Alert;