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

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

@@ -0,0 +1,317 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-types 1`] = `
+"import React from 'react';
+function concat(a, b) {
+  return a + b;
+}
+var DefaultEnum;
+(function (DefaultEnum) {
+  DefaultEnum[DefaultEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\";
+  DefaultEnum[DefaultEnum[\\"TopRight\\"] = 1] = \\"TopRight\\";
+  DefaultEnum[DefaultEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\";
+})(DefaultEnum || (DefaultEnum = {}));
+var NumericEnum;
+(function (NumericEnum) {
+  NumericEnum[NumericEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\";
+  NumericEnum[NumericEnum[\\"TopRight\\"] = 1] = \\"TopRight\\";
+  NumericEnum[NumericEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\";
+})(NumericEnum || (NumericEnum = {}));
+var StringEnum;
+(function (StringEnum) {
+  StringEnum[\\"TopLeft\\"] = \\"top-left\\";
+  StringEnum[\\"TopRight\\"] = \\"top-right\\";
+  StringEnum[\\"TopCenter\\"] = \\"top-center\\";
+})(StringEnum || (StringEnum = {}));
+export const TypeScriptProps = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\");
+TypeScriptProps.defaultProps = {
+  any: 'Any value',
+  string: 'A string value',
+  bool: true,
+  number: 5,
+  voidFunc: () => {},
+  funcWithArgsAndReturns: concat,
+  symbol: Symbol('Default symbol'),
+  interface: {
+    text: 'foo',
+    value: 'bar'
+  },
+  genericInterface: {
+    value: 'A string value'
+  },
+  arrayOfPrimitive: ['foo', 'bar'],
+  arrayOfComplexObject: [{
+    text: 'foo',
+    value: 'bar'
+  }],
+  tupleOfPrimitive: ['string value', 5],
+  tupleWithComplexType: ['string value', {
+    text: 'foo',
+    value: 'bar'
+  }],
+  defaultEnum: DefaultEnum.TopRight,
+  numericEnum: NumericEnum.TopRight,
+  stringEnum: StringEnum.TopRight,
+  enumUnion: DefaultEnum.TopLeft,
+  recordOfPrimitive: {
+    foo: 1,
+    bar: 2
+  },
+  recordOfComplexObject: {
+    foo: {
+      text: 'bar',
+      value: 'bar2'
+    }
+  },
+  intersectionType: {
+    text: 'foo',
+    value: 'bar',
+    name: 'foo-bar'
+  },
+  intersectionWithInlineType: {
+    text: 'foo',
+    value: 'bar',
+    inlineValue: 'this is inlined'
+  },
+  unionOfPrimitive: 'A string value',
+  unionOfComplexType: {
+    text: 'foo',
+    value: 'bar'
+  },
+  nullableComplexTypeUndefinedDefaultValue: undefined,
+  typeAlias: 'foo',
+  aliasesUnion: 'foo',
+  genericAlias: {
+    value: 'foo'
+  },
+  namedStringLiteralUnion: 'top-right',
+  inlinedStringLiteralUnion: 'bottom-right',
+  namedNumericLiteralUnion: 0,
+  inlinedNumericLiteralUnion: 1
+};
+export const component = TypeScriptProps;
+TypeScriptProps.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"TypeScriptProps\\",
+  \\"props\\": {
+    \\"any\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'Any value'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"string\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'A string value'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"bool\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"true\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"number\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"5\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"voidFunc\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"() => {}\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"funcWithArgsAndReturns\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"function concat(a: string, b: string): string {\\\\n  return a + b;\\\\n}\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"symbol\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"Symbol('Default symbol')\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"interface\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ text: 'foo', value: 'bar' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"genericInterface\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ value: 'A string value' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"arrayOfPrimitive\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"['foo', 'bar']\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"arrayOfComplexObject\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"[{ text: 'foo', value: 'bar' }]\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"tupleOfPrimitive\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"['string value', 5]\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"tupleWithComplexType\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"['string value', { text: 'foo', value: 'bar' }]\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"defaultEnum\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"DefaultEnum.TopRight\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"numericEnum\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"NumericEnum.TopRight\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"stringEnum\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"StringEnum.TopRight\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"enumUnion\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"DefaultEnum.TopLeft\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"recordOfPrimitive\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ foo: 1, bar: 2 }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"recordOfComplexObject\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ foo: { text: 'bar', value: 'bar2' } }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"intersectionType\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ text: 'foo', value: 'bar', name: 'foo-bar' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"intersectionWithInlineType\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ text: 'foo', value: 'bar', inlineValue: 'this is inlined' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"unionOfPrimitive\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'A string value'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"unionOfComplexType\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ text: 'foo', value: 'bar' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"nullableComplexTypeUndefinedDefaultValue\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"undefined\\",
+        \\"computed\\": true
+      },
+      \\"required\\": false
+    },
+    \\"typeAlias\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'foo'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"aliasesUnion\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'foo'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"genericAlias\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ value: 'foo' }\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"namedStringLiteralUnion\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'top-right'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"inlinedStringLiteralUnion\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'bottom-right'\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"namedNumericLiteralUnion\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"0\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    },
+    \\"inlinedNumericLiteralUnion\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"1\\",
+        \\"computed\\": false
+      },
+      \\"required\\": false
+    }
+  }
+};"
+`;

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

@@ -0,0 +1,130 @@
+import type { FC } from 'react';
+import React from 'react';
+
+function concat(a: string, b: string): string {
+  return a + b;
+}
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+
+interface PersonInterface {
+  name: string;
+}
+
+type InterfaceIntersection = ItemInterface & PersonInterface;
+
+interface GenericInterface<T> {
+  value: T;
+}
+
+enum DefaultEnum {
+  TopLeft,
+  TopRight,
+  TopCenter,
+}
+
+enum NumericEnum {
+  TopLeft = 0,
+  TopRight,
+  TopCenter,
+}
+
+enum StringEnum {
+  TopLeft = 'top-left',
+  TopRight = 'top-right',
+  TopCenter = 'top-center',
+}
+
+type EnumUnion = DefaultEnum | NumericEnum;
+
+type StringLiteralUnion = 'top-left' | 'top-right' | 'top-center';
+type NumericLiteralUnion = 0 | 1 | 2;
+
+type StringAlias = string;
+type NumberAlias = number;
+type AliasesIntersection = StringAlias & NumberAlias;
+type AliasesUnion = StringAlias | NumberAlias;
+interface GenericAlias<T> {
+  value: T;
+}
+
+interface TypeScriptPropsProps {
+  any: any;
+  string: string;
+  bool: boolean;
+  number: number;
+  voidFunc: () => void;
+  funcWithArgsAndReturns: (a: string, b: string) => string;
+  funcWithunionArg: (a: string | number) => string;
+  funcWithMultipleUnionReturns: () => string | ItemInterface;
+  funcWithIndexTypes: <T, K extends keyof T>(o: T, propertyNames: K[]) => T[K][];
+  symbol: symbol;
+  interface: ItemInterface;
+  genericInterface: GenericInterface<string>;
+  arrayOfPrimitive: string[];
+  arrayOfComplexObject: ItemInterface[];
+  tupleOfPrimitive: [string, number];
+  tupleWithComplexType: [string, ItemInterface];
+  defaultEnum: DefaultEnum;
+  numericEnum: NumericEnum;
+  stringEnum: StringEnum;
+  enumUnion: EnumUnion;
+  recordOfPrimitive: Record<string, number>;
+  recordOfComplexObject: Record<string, ItemInterface>;
+  intersectionType: InterfaceIntersection;
+  intersectionWithInlineType: ItemInterface & { inlineValue: string };
+  unionOfPrimitive: string | number;
+  unionOfComplexType: ItemInterface | InterfaceIntersection;
+  nullablePrimitive?: string;
+  nullableComplexType?: ItemInterface;
+  nullableComplexTypeUndefinedDefaultValue?: ItemInterface;
+  readonly readonlyPrimitive: string;
+  typeAlias: StringAlias;
+  aliasesIntersection: AliasesIntersection;
+  aliasesUnion: AliasesUnion;
+  genericAlias: GenericAlias<string>;
+  namedStringLiteralUnion: StringLiteralUnion;
+  inlinedStringLiteralUnion: 'bottom-left' | 'bottom-right' | 'bottom-center';
+  namedNumericLiteralUnion: NumericLiteralUnion;
+  inlinedNumericLiteralUnion: 0 | 1 | 2;
+}
+
+export const TypeScriptProps: FC<TypeScriptPropsProps> = () => <div>TypeScript!</div>;
+TypeScriptProps.defaultProps = {
+  any: 'Any value',
+  string: 'A string value',
+  bool: true,
+  number: 5,
+  voidFunc: () => {},
+  funcWithArgsAndReturns: concat,
+  symbol: Symbol('Default symbol'),
+  interface: { text: 'foo', value: 'bar' },
+  genericInterface: { value: 'A string value' },
+  arrayOfPrimitive: ['foo', 'bar'],
+  arrayOfComplexObject: [{ text: 'foo', value: 'bar' }],
+  tupleOfPrimitive: ['string value', 5],
+  tupleWithComplexType: ['string value', { text: 'foo', value: 'bar' }],
+  defaultEnum: DefaultEnum.TopRight,
+  numericEnum: NumericEnum.TopRight,
+  stringEnum: StringEnum.TopRight,
+  enumUnion: DefaultEnum.TopLeft,
+  recordOfPrimitive: { foo: 1, bar: 2 },
+  recordOfComplexObject: { foo: { text: 'bar', value: 'bar2' } },
+  intersectionType: { text: 'foo', value: 'bar', name: 'foo-bar' },
+  intersectionWithInlineType: { text: 'foo', value: 'bar', inlineValue: 'this is inlined' },
+  unionOfPrimitive: 'A string value',
+  unionOfComplexType: { text: 'foo', value: 'bar' },
+  nullableComplexTypeUndefinedDefaultValue: undefined,
+  typeAlias: 'foo',
+  aliasesUnion: 'foo',
+  genericAlias: { value: 'foo' },
+  namedStringLiteralUnion: 'top-right',
+  inlinedStringLiteralUnion: 'bottom-right',
+  namedNumericLiteralUnion: 0,
+  inlinedNumericLiteralUnion: 1,
+};
+
+export const component = TypeScriptProps;