@storybook/react 7.0.0-alpha.8 → 7.0.0-beta.0

package/template/stories/docgen-components/8740-ts-multi-props/docgen.snapshot

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8740-ts-multi-props 1`] = `
+"import React from 'react';
+export const Header = ({
+  size = 'a',
+  children
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
+  className: size
+}, children);
+export const Paragraph = ({
+  size,
+  children
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
+  className: size
+}, children);
+Paragraph.defaultProps = {
+  size: 'md'
+};
+export const component = Header;
+Header.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Header\\",
+  \\"props\\": {
+    \\"size\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'a'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};
+Paragraph.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Paragraph\\",
+  \\"props\\": {
+    \\"size\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'md'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/8740-ts-multi-props/input.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export interface ElemAProps {
+  size?: 'a' | 'b' | 'c' | 'd';
+  children: React.ReactNode;
+}
+
+export const Header: React.FC<ElemAProps> = ({ size = 'a', children }) => (
+  <div className={size}>{children}</div>
+);
+
+export interface ElemBProps {
+  size?: 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}
+
+export const Paragraph: React.FC<ElemBProps> = ({ size, children }) => (
+  <div className={size}>{children}</div>
+);
+
+Paragraph.defaultProps = { size: 'md' };
+
+export const component = Header;

package/template/stories/docgen-components/8740-ts-multi-props/properties.snapshot

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8740-ts-multi-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'a'",
+      },
+      "description": undefined,
+      "name": "size",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/8894-9511-ts-forward-ref/argTypes.snapshot

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+Object {
+  "disabled": Object {
+    "control": Object {
+      "type": "object",
+    },
+    "description": undefined,
+    "name": "disabled",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    "type": Object {
+      "required": false,
+    },
+  },
+  "variant": Object {
+    "control": Object {
+      "type": "object",
+    },
+    "description": undefined,
+    "name": "variant",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'small'",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    "type": Object {
+      "required": false,
+    },
+  },
+}
+`;

package/template/stories/docgen-components/8894-9511-ts-forward-ref/docgen.snapshot

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+"import React, { forwardRef } from 'react';
+const Button = /*#__PURE__*/forwardRef(function Button({
+  disabled = false,
+  variant = 'small',
+  children
+}, ref) {
+  return /*#__PURE__*/React.createElement(\\"button\\", {
+    type: \\"button\\",
+    disabled: disabled,
+    ref: ref
+  }, children, \\" \\", variant);
+});
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"disabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"variant\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'small'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};
+export default Button;
+export const component = Button;"
+`;

package/template/stories/docgen-components/8894-9511-ts-forward-ref/input.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+
+interface ButtonProps {
+  /**
+   * Sets the button size.
+   */
+  variant?: 'small' | 'large';
+  /**
+   * Disables the button.
+   */
+  disabled?: boolean;
+  /**
+   * Content of the button.
+   */
+  children: React.ReactNode;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { disabled = false, variant = 'small', children },
+  ref
+) {
+  return (
+    <button type="button" disabled={disabled} ref={ref}>
+      {children} {variant}
+    </button>
+  );
+});
+
+export default Button;
+
+export const component = Button;

package/template/stories/docgen-components/8894-9511-ts-forward-ref/properties.snapshot

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": undefined,
+      "name": "disabled",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'small'",
+      },
+      "description": undefined,
+      "name": "variant",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9023-js-hoc/argTypes.snapshot

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+Object {
+  "classes": Object {
+    "control": Object {
+      "type": "object",
+    },
+    "description": "",
+    "name": "classes",
+    "table": Object {
+      "defaultValue": null,
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "object",
+      },
+    },
+    "type": Object {
+      "name": "object",
+      "required": true,
+    },
+  },
+  "dismissible": Object {
+    "control": Object {
+      "type": "boolean",
+    },
+    "description": "",
+    "name": "dismissible",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "bool",
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+      "required": false,
+    },
+  },
+  "icon": Object {
+    "control": Object {
+      "type": "object",
+    },
+    "description": "",
+    "name": "icon",
+    "table": Object {
+      "defaultValue": null,
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "elementType",
+      },
+    },
+    "type": Object {
+      "name": "other",
+      "required": false,
+      "value": "elementType",
+    },
+  },
+  "variant": Object {
+    "control": Object {
+      "type": "text",
+    },
+    "description": "",
+    "name": "variant",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+      "required": false,
+    },
+  },
+}
+`;

package/template/stories/docgen-components/9023-js-hoc/docgen.snapshot

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+"/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// deepscan-disable-next-line
+const withStyles = themeFn => Comp => Comp;
+class Alert extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, \\"Alert\\");
+  }
+}
+Alert.propTypes = {
+  variant: PropTypes.string,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.elementType,
+  classes: PropTypes.object.isRequired
+};
+Alert.defaultProps = {
+  variant: 'primary',
+  dismissible: false
+};
+const StyledAlert = withStyles(theme => ({
+  alert: props => ({
+    backgroundColor: theme.palette[props.variant].main
+  }),
+  message: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
+    marginRight: theme.spacing(2)
+  }
+}))(Alert);
+export const component = StyledAlert;
+Alert.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Alert\\",
+  \\"props\\": {
+    \\"variant\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'primary'\\",
+        \\"computed\\": false
+      },
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false
+    },
+    \\"dismissible\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false
+    },
+    \\"icon\\": {
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"elementType\\"
+      },
+      \\"required\\": false
+    },
+    \\"classes\\": {
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"object\\"
+      },
+      \\"required\\": true
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/9023-js-hoc/input.jsx

@@ -0,0 +1,40 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// deepscan-disable-next-line
+const withStyles = (themeFn) => (Comp) => Comp;
+
+class Alert extends React.Component {
+  render() {
+    return <>Alert</>;
+  }
+}
+Alert.propTypes = {
+  variant: PropTypes.string,
+  dismissible: PropTypes.bool,
+  icon: PropTypes.elementType,
+  classes: PropTypes.object.isRequired,
+};
+Alert.defaultProps = {
+  variant: 'primary',
+  dismissible: false,
+};
+
+const StyledAlert = withStyles((theme) => ({
+  alert: (props) => ({
+    backgroundColor: theme.palette[props.variant].main,
+  }),
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+}))(Alert);
+
+export const component = StyledAlert;

package/template/stories/docgen-components/9023-js-hoc/properties.snapshot

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9023-js-hoc 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "description": "",
+      "name": "variant",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "dismissible",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "bool",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "icon",
+      "required": false,
+      "sbType": Object {
+        "name": "other",
+        "value": "elementType",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "elementType",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "classes",
+      "required": true,
+      "sbType": Object {
+        "name": "object",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "object",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9399-js-proptypes-shape/argTypes.snapshot

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+Object {
+  "areas": Object {
+    "control": Object {
+      "type": "object",
+    },
+    "description": "",
+    "name": "areas",
+    "table": Object {
+      "defaultValue": null,
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": "[object]",
+        "summary": "object[]",
+      },
+    },
+    "type": Object {
+      "name": "array",
+      "required": true,
+      "value": Object {
+        "name": "object",
+        "value": Object {
+          "names": Object {
+            "name": "array",
+            "value": Object {
+              "name": "string",
+            },
+          },
+          "position": Object {
+            "name": "string",
+          },
+        },
+      },
+    },
+  },
+}
+`;

package/template/stories/docgen-components/9399-js-proptypes-shape/docgen.snapshot

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+export const Credits = ({
+  areas
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(areas));
+
+// https://github.com/storybookjs/storybook/issues/9399
+Credits.propTypes = {
+  areas: PropTypes.arrayOf(PropTypes.shape({
+    position: PropTypes.string.isRequired,
+    names: PropTypes.arrayOf(PropTypes.string).isRequired
+  })).isRequired
+};
+export const component = Credits;
+Credits.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Credits\\",
+  \\"props\\": {
+    \\"areas\\": {
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"arrayOf\\",
+        \\"value\\": {
+          \\"name\\": \\"shape\\",
+          \\"value\\": {
+            \\"position\\": {
+              \\"name\\": \\"string\\",
+              \\"required\\": true
+            },
+            \\"names\\": {
+              \\"name\\": \\"arrayOf\\",
+              \\"value\\": {
+                \\"name\\": \\"string\\"
+              },
+              \\"required\\": true
+            }
+          }
+        }
+      },
+      \\"required\\": true
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/9399-js-proptypes-shape/input.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Credits = ({ areas }) => <>{JSON.stringify(areas)}</>;
+
+// https://github.com/storybookjs/storybook/issues/9399
+Credits.propTypes = {
+  areas: PropTypes.arrayOf(
+    PropTypes.shape({
+      position: PropTypes.string.isRequired,
+      names: PropTypes.arrayOf(PropTypes.string).isRequired,
+    })
+  ).isRequired,
+};
+
+export const component = Credits;

package/template/stories/docgen-components/9399-js-proptypes-shape/properties.snapshot

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9399-js-proptypes-shape 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": null,
+      "description": "",
+      "name": "areas",
+      "required": true,
+      "sbType": Object {
+        "name": "array",
+        "value": Object {
+          "name": "object",
+          "value": Object {
+            "names": Object {
+              "name": "array",
+              "value": Object {
+                "name": "string",
+              },
+            },
+            "position": Object {
+              "name": "string",
+            },
+          },
+        },
+      },
+      "type": Object {
+        "detail": "[object]",
+        "summary": "object[]",
+      },
+    },
+  ],
+}
+`;