@storybook/react 7.0.0-alpha.5 → 7.0.0-alpha.50

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[]",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9465-ts-type-props/argTypes.snapshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+Object {
+  "disabled": Object {
+    "control": Object {
+      "type": "boolean",
+    },
+    "description": "",
+    "name": "disabled",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+      "required": false,
+    },
+  },
+}
+`;

package/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+"import React from 'react';
+const Component = ({
+  disabled = false,
+  children
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line react/button-has-type
+React.createElement(\\"button\\", {
+  disabled: disabled
+}, children);
+export const component = Component;
+Component.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Component\\",
+  \\"props\\": {
+    \\"disabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/9465-ts-type-props/input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+};
+
+const Component = ({ disabled = false, children }: Props) => (
+  // eslint-disable-next-line react/button-has-type
+  <button disabled={disabled}>{children}</button>
+);
+
+export const component = Component;

package/template/stories/docgen-components/9465-ts-type-props/properties.snapshot

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9465-ts-type-props 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "disabled",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+Object {
+  "message": Object {
+    "control": Object {
+      "type": "text",
+    },
+    "description": "A message alerting about Empire activities.",
+    "name": "message",
+    "table": Object {
+      "defaultValue": null,
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+      "required": true,
+    },
+  },
+  "title": Object {
+    "control": Object {
+      "type": "object",
+    },
+    "description": "A title that brings attention to the alert.",
+    "name": "title",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Code Yellow'",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "union",
+      },
+    },
+    "type": Object {
+      "name": "union",
+      "raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
+      "required": false,
+      "value": Array [
+        Object {
+          "name": "other",
+          "value": "literal",
+        },
+        Object {
+          "name": "other",
+          "value": "literal",
+        },
+        Object {
+          "name": "other",
+          "value": "literal",
+        },
+      ],
+    },
+  },
+}
+`;

package/template/stories/docgen-components/9493-ts-display-name/docgen.snapshot

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+"import React from 'react';
+/**
+ * This message should show up in the Docs panel if everything works fine.
+ */
+export const EmpireAlert = ({
+  title = 'Code Yellow',
+  message
+}) => /*#__PURE__*/React.createElement(\\"div\\", null, /*#__PURE__*/React.createElement(\\"h1\\", null, title), /*#__PURE__*/React.createElement(\\"p\\", null, message));
+EmpireAlert.displayName = 'SomeOtherDisplayName';
+export const component = EmpireAlert;
+EmpireAlert.__docgenInfo = {
+  \\"description\\": \\"This message should show up in the Docs panel if everything works fine.\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"SomeOtherDisplayName\\",
+  \\"props\\": {
+    \\"title\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'Code Yellow'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"union\\",
+        \\"raw\\": \\"'Code Red' | 'Code Yellow' | 'Code Green'\\",
+        \\"elements\\": [{
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Red'\\"
+        }, {
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Yellow'\\"
+        }, {
+          \\"name\\": \\"literal\\",
+          \\"value\\": \\"'Code Green'\\"
+        }]
+      },
+      \\"description\\": \\"A title that brings attention to the alert.\\"
+    },
+    \\"message\\": {
+      \\"required\\": true,
+      \\"tsType\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"description\\": \\"A message alerting about Empire activities.\\"
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/9493-ts-display-name/input.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+type AlertCode = 'Code Red' | 'Code Yellow' | 'Code Green';
+
+export interface EmpireAlertProps {
+  /**
+   * A title that brings attention to the alert.
+   */
+  title: AlertCode;
+  /**
+   * A message alerting about Empire activities.
+   */
+  message: string;
+}
+
+/**
+ * This message should show up in the Docs panel if everything works fine.
+ */
+export const EmpireAlert: React.FC<EmpireAlertProps> = ({
+  title = 'Code Yellow',
+  message,
+}: EmpireAlertProps) => (
+  <div>
+    <h1>{title}</h1>
+    <p>{message}</p>
+  </div>
+);
+EmpireAlert.displayName = 'SomeOtherDisplayName';
+
+export const component = EmpireAlert;

package/template/stories/docgen-components/9493-ts-display-name/properties.snapshot

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9493-ts-display-name 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'Code Yellow'",
+      },
+      "description": "A title that brings attention to the alert.",
+      "name": "title",
+      "required": false,
+      "sbType": Object {
+        "name": "union",
+        "raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
+        "value": Array [
+          Object {
+            "name": "other",
+            "value": "literal",
+          },
+          Object {
+            "name": "other",
+            "value": "literal",
+          },
+          Object {
+            "name": "other",
+            "value": "literal",
+          },
+        ],
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "union",
+      },
+    },
+    Object {
+      "defaultValue": null,
+      "description": "A message alerting about Empire activities.",
+      "name": "message",
+      "required": true,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9556-ts-react-default-exports/argTypes.snapshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+Object {
+  "isDisabled": Object {
+    "control": Object {
+      "type": "boolean",
+    },
+    "description": "",
+    "name": "isDisabled",
+    "table": Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+      "required": false,
+    },
+  },
+}
+`;

package/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+"function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* eslint-disable react/button-has-type */
+import React from 'react';
+export const Button = ({
+  isDisabled = false,
+  ...props
+}) => /*#__PURE__*/React.createElement(\\"button\\", _extends({
+  disabled: isDisabled
+}, props));
+export const component = Button;
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"isDisabled\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false,
+      \\"tsType\\": {
+        \\"name\\": \\"boolean\\"
+      },
+      \\"description\\": \\"\\"
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable react/button-has-type */
+import React from 'react';
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isDisabled?: boolean;
+}
+
+export const Button: React.FC<Props> = ({ isDisabled = false, ...props }: Props) => (
+  <button disabled={isDisabled} {...props} />
+);
+
+export const component = Button;

package/template/stories/docgen-components/9556-ts-react-default-exports/properties.snapshot

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9556-ts-react-default-exports 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": "",
+      "name": "isDisabled",
+      "required": false,
+      "sbType": Object {
+        "name": "boolean",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "boolean",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9575-ts-camel-case/argTypes.snapshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+Object {
+  "color": Object {
+    "control": Object {
+      "type": "text",
+    },
+    "description": "",
+    "name": "color",
+    "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/9575-ts-camel-case/docgen.snapshot

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+"import PropTypes from 'prop-types';
+import React from 'react';
+const iconButton = function IconButton(props) {
+  return /*#__PURE__*/React.createElement(\\"div\\", {
+    className: \\"icon-button\\"
+  }, \\"icon-button\\");
+};
+iconButton.propTypes = {
+  // deepscan-disable-next-line
+  color: PropTypes.string
+};
+iconButton.defaultProps = {
+  color: 'primary'
+};
+iconButton.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"iconButton\\",
+  \\"props\\": {
+    \\"color\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'primary'\\",
+        \\"computed\\": false
+      },
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false
+    }
+  }
+};
+export default iconButton;
+export const component = iconButton;"
+`;

package/template/stories/docgen-components/9575-ts-camel-case/input.tsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import type { FC } from 'react';
+import React from 'react';
+
+export interface IProps {
+  /**
+   * button color
+   */
+  color?: string;
+}
+
+const iconButton: FC<IProps> = function IconButton(props) {
+  return <div className="icon-button">icon-button</div>;
+};
+
+iconButton.propTypes = {
+  // deepscan-disable-next-line
+  color: PropTypes.string,
+};
+
+iconButton.defaultProps = {
+  color: 'primary',
+};
+
+export default iconButton;
+export const component = iconButton;

package/template/stories/docgen-components/9575-ts-camel-case/properties.snapshot

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9575-ts-camel-case 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'primary'",
+      },
+      "description": "",
+      "name": "color",
+      "required": false,
+      "sbType": Object {
+        "name": "string",
+      },
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/9586-js-react-memo/argTypes.snapshot

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9586-js-react-memo 1`] = `
+Object {
+  "label": Object {
+    "control": Object {
+      "type": "text",
+    },
+    "description": "",
+    "name": "label",
+    "table": Object {
+      "defaultValue": null,
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+      "required": true,
+    },
+  },
+  "onClick": Object {
+    "description": "",
+    "name": "onClick",
+    "table": Object {
+      "defaultValue": null,
+      "jsDocTags": undefined,
+      "type": Object {
+        "detail": undefined,
+        "summary": "func",
+      },
+    },
+    "type": Object {
+      "name": "function",
+      "required": true,
+    },
+  },
+}
+`;

package/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties 9586-js-react-memo 1`] = `
+"import React from 'react';
+import PropTypes from 'prop-types';
+function Button({
+  label,
+  onClick
+}) {
+  // eslint-disable-next-line react/button-has-type
+  return /*#__PURE__*/React.createElement(\\"button\\", {
+    onClick: onClick
+  }, label);
+}
+Button.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+const MemoButton = /*#__PURE__*/React.memo(Button);
+export const component = MemoButton;
+Button.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"Button\\",
+  \\"props\\": {
+    \\"label\\": {
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true
+    },
+    \\"onClick\\": {
+      \\"description\\": \\"\\",
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": true
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/9586-js-react-memo/input.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Button({ label, onClick }) {
+  // eslint-disable-next-line react/button-has-type
+  return <button onClick={onClick}>{label}</button>;
+}
+
+Button.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+const MemoButton = React.memo(Button);
+export const component = MemoButton;