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

package/template/stories/docgen-components/ts-function-component-inline-defaults/docgen.snapshot

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-function-component-inline-defaults 1`] = `
+"import React from 'react';
+import { imported } from '../imported';
+const local = 'local-value';
+var GlobalNames;
+
+(function (GlobalNames) {
+  GlobalNames[\\"top\\"] = \\"top\\";
+  GlobalNames[\\"left\\"] = \\"left\\";
+})(GlobalNames || (GlobalNames = {}));
+
+/**
+ * A component that renders its props
+ */
+export const PropsWriter = ({
+  numberOptional = 1,
+  stringOptional = 'stringOptional',
+  booleanOptional = false,
+  arrayOptional = ['array', 'optional'],
+  objectOptional = {
+    object: 'optional'
+  },
+  functionOptional = () => 'foo',
+  dateOptional = new Date('20 Jan 1983'),
+  localReference = local,
+  importedReference = imported,
+  globalReference = Date,
+  stringGlobalName = 'top',
+  unionGlobalName = 'top',
+  // If we use this default value, controls will try and render it in a JSON object editor
+  // which leads to a circular value error.
+  // unionGlobalNameMixed = 'top',
+  enumGlobalName = 'top'
+}) => /*#__PURE__*/React.createElement(\\"pre\\", null, JSON.stringify({
+  numberOptional,
+  stringOptional,
+  booleanOptional,
+  arrayOptional,
+  objectOptional,
+  functionOptional,
+  dateOptional,
+  localReference,
+  importedReference,
+  globalReference,
+  stringGlobalName,
+  unionGlobalName,
+  // unionGlobalNameMixed,
+  enumGlobalName
+}));
+export const component = PropsWriter;
+PropsWriter.__docgenInfo = {
+  \\"description\\": \\"A component that renders its props\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"PropsWriter\\",
+  \\"props\\": {
+    \\"numberOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"1\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"stringOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'stringOptional'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"booleanOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"arrayOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"['array', 'optional']\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"objectOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ object: 'optional' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"functionOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"() => 'foo'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"dateOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"new Date('20 Jan 1983')\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"localReference\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'local-value'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"importedReference\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"imported\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"globalReference\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"Date\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"stringGlobalName\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'top'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"unionGlobalName\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'top'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"enumGlobalName\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'top'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;

package/template/stories/docgen-components/ts-function-component-inline-defaults/input.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { imported } from '../imported';
+
+const local = 'local-value';
+
+enum GlobalNames {
+  top = 'top',
+  left = 'left',
+}
+
+interface PropsWriterProps {
+  /**
+   * Description
+   */
+  numberRequired: number;
+  numberOptional?: number;
+  stringRequired: string;
+  stringOptional?: string;
+  booleanRequired: boolean;
+  booleanOptional?: boolean;
+  arrayRequired: string[];
+  arrayOptional?: string[];
+  objectRequired: Record<string, string>;
+  objectOptional?: Record<string, string>;
+  functionRequired: () => string;
+  functionOptional?: () => string;
+  dateRequired: Date;
+  dateOptional?: Date;
+  localReference?: string;
+  importedReference?: string;
+  globalReference?: any;
+  stringGlobalName?: string;
+  unionGlobalName?: 'top' | 'left';
+  unionGlobalNameMixed?: 'top' | number;
+  enumGlobalName?: GlobalNames;
+}
+
+/**
+ * A component that renders its props
+ */
+export const PropsWriter: React.FC<PropsWriterProps> = ({
+  numberOptional = 1,
+  stringOptional = 'stringOptional',
+  booleanOptional = false,
+  arrayOptional = ['array', 'optional'],
+  objectOptional = { object: 'optional' },
+  functionOptional = () => 'foo',
+  dateOptional = new Date('20 Jan 1983'),
+  localReference = local,
+  importedReference = imported,
+  globalReference = Date,
+  stringGlobalName = 'top',
+  unionGlobalName = 'top',
+  // If we use this default value, controls will try and render it in a JSON object editor
+  // which leads to a circular value error.
+  // unionGlobalNameMixed = 'top',
+  enumGlobalName = 'top',
+}) => (
+  <pre>
+    {JSON.stringify({
+      numberOptional,
+      stringOptional,
+      booleanOptional,
+      arrayOptional,
+      objectOptional,
+      functionOptional,
+      dateOptional,
+      localReference,
+      importedReference,
+      globalReference,
+      stringGlobalName,
+      unionGlobalName,
+      // unionGlobalNameMixed,
+      enumGlobalName,
+    })}
+  </pre>
+);
+
+export const component = PropsWriter;

package/template/stories/docgen-components/ts-function-component-inline-defaults/properties.snapshot

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-function-component-inline-defaults 1`] = `
+Object {
+  "rows": Array [
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "1",
+      },
+      "description": undefined,
+      "name": "numberOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'stringOptional'",
+      },
+      "description": undefined,
+      "name": "stringOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "false",
+      },
+      "description": undefined,
+      "name": "booleanOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "['array', 'optional']",
+      },
+      "description": undefined,
+      "name": "arrayOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "{ object: 'optional' }",
+      },
+      "description": undefined,
+      "name": "objectOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "() => 'foo'",
+      },
+      "description": undefined,
+      "name": "functionOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "new Date('20 Jan 1983')",
+      },
+      "description": undefined,
+      "name": "dateOptional",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'local-value'",
+      },
+      "description": undefined,
+      "name": "localReference",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "imported",
+      },
+      "description": undefined,
+      "name": "importedReference",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "Date",
+      },
+      "description": undefined,
+      "name": "globalReference",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'top'",
+      },
+      "description": undefined,
+      "name": "stringGlobalName",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'top'",
+      },
+      "description": undefined,
+      "name": "unionGlobalName",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+    Object {
+      "defaultValue": Object {
+        "detail": undefined,
+        "summary": "'top'",
+      },
+      "description": undefined,
+      "name": "enumGlobalName",
+      "required": false,
+      "type": Object {
+        "detail": undefined,
+        "summary": "unknown",
+      },
+    },
+  ],
+}
+`;

package/template/stories/docgen-components/ts-html/argTypes.snapshot

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-html 1`] = `Object {}`;

package/template/stories/docgen-components/ts-html/docgen.snapshot

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-html 1`] = `
+"import React from 'react';
+export const TypeScriptHtmlComponent = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"My HTML component\\");
+export const component = TypeScriptHtmlComponent;
+TypeScriptHtmlComponent.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"TypeScriptHtmlComponent\\"
+};"
+`;

package/template/stories/docgen-components/ts-html/input.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import React from 'react';
+
+interface TypeScriptHtmlComponentProps {
+  text: string;
+}
+
+export const TypeScriptHtmlComponent: FC<
+  React.HTMLAttributes<HTMLDivElement> & TypeScriptHtmlComponentProps
+> = () => <div>My HTML component</div>;
+
+export const component = TypeScriptHtmlComponent;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-html 1`] = `
+Object {
+  "rows": Array [],
+}
+`;

package/template/stories/docgen-components/ts-jsdoc/argTypes.snapshot

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-jsdoc 1`] = `Object {}`;

package/template/stories/docgen-components/ts-jsdoc/docgen.snapshot

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-jsdoc 1`] = `
+"import React from 'react';
+/**
+ * Button functional component (React.FC)
+ */
+const TypeScriptProps = ({
+  case1,
+  case2
+}) => /*#__PURE__*/React.createElement(\\"button\\", {
+  type: \\"button\\",
+  onClick: case1
+}, \\"JSDoc with TypeScript! \\", case2);
+export const component = TypeScriptProps;
+TypeScriptProps.__docgenInfo = {
+  \\"description\\": \\"Button functional component (React.FC)\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"TypeScriptProps\\"
+};"
+`;

package/template/stories/docgen-components/ts-jsdoc/input.tsx

@@ -0,0 +1,27 @@
+import type { FC, SyntheticEvent } from 'react';
+import React from 'react';
+
+interface TSProps {
+  /**
+   * this is case 1.
+   * @param { SyntheticEvent } event - React's original event.
+   * @returns {void}
+   */
+  case1: (event: SyntheticEvent) => void;
+  /**
+   * should not be visible since it's ignored.
+   * @ignore
+   */
+  case2: string;
+}
+
+/**
+ * Button functional component (React.FC)
+ */
+const TypeScriptProps: FC<TSProps> = ({ case1, case2 }) => (
+  <button type="button" onClick={case1}>
+    JSDoc with TypeScript! {case2}
+  </button>
+);
+
+export const component = TypeScriptProps;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-jsdoc 1`] = `
+Object {
+  "rows": Array [],
+}
+`;