React: Upgrade react-docgen to v7

code/frameworks/react-vite/package.json

@@ -53,7 +53,7 @@
     "@storybook/react": "workspace:*",
     "@vitejs/plugin-react": "^3.0.1",
     "magic-string": "^0.30.0",
-    "react-docgen": "^6.0.2"
+    "react-docgen": "^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

code/renderers/react/template/stories/docgen-components/ts-react-fc/argTypes.snapshot

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

code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-react-fc 1`] = `
+"import React from 'react';
+var DefaultEnum = /*#__PURE__*/function (DefaultEnum) {
+  DefaultEnum[DefaultEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\";
+  DefaultEnum[DefaultEnum[\\"TopRight\\"] = 1] = \\"TopRight\\";
+  DefaultEnum[DefaultEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\";
+  return DefaultEnum;
+}(DefaultEnum || {});
+var NumericEnum = /*#__PURE__*/function (NumericEnum) {
+  NumericEnum[NumericEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\";
+  NumericEnum[NumericEnum[\\"TopRight\\"] = 1] = \\"TopRight\\";
+  NumericEnum[NumericEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\";
+  return NumericEnum;
+}(NumericEnum || {});
+var StringEnum = /*#__PURE__*/function (StringEnum) {
+  StringEnum[\\"TopLeft\\"] = \\"top-left\\";
+  StringEnum[\\"TopRight\\"] = \\"top-right\\";
+  StringEnum[\\"TopCenter\\"] = \\"top-center\\";
+  return StringEnum;
+}(StringEnum || {});
+export const TypeScriptProps = props => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\");
+export const component = TypeScriptProps;
+TypeScriptProps.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"TypeScriptProps\\"
+};"
+`;

code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx

@@ -0,0 +1,93 @@
+import type { FC } from 'react';
+import React from 'react';
+
+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> = (props) => <div>TypeScript!</div>;
+
+export const component = TypeScriptProps;

code/renderers/react/template/stories/docgen-components/ts-react-fc/properties.snapshot

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

code/renderers/react/template/stories/ts-argtypes.stories.tsx

@@ -25,6 +25,7 @@ import { component as TsComponentPropsComponent } from './docgen-components/9922
 import { component as TsJsdocComponent } from './docgen-components/ts-jsdoc/input';
 import { component as TsTypesComponent } from './docgen-components/ts-types/input';
 import { component as TsHtmlComponent } from './docgen-components/ts-html/input';
+import { component as TsFCComponent } from './docgen-components/ts-react-fc/input';
 
 export default {
   component: {},
@@ -78,6 +79,8 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo
 
 export const TsJsdoc = { parameters: { component: TsJsdocComponent } };
 
+export const TsFC = { parameters: { component: TsFCComponent } };
+
 const addChromaticIgnore = async (element: HTMLElement) => {
   const row = element.parentElement?.parentElement;
   if (row?.nodeName === 'TR') {

code/yarn.lock

@@ -7707,7 +7707,7 @@ __metadata:
     "@types/node": ^18.0.0
     "@vitejs/plugin-react": ^3.0.1
     magic-string: ^0.30.0
-    react-docgen: ^6.0.2
+    react-docgen: ^7.0.0
     typescript: ~4.9.3
     vite: ^4.0.0
   peerDependencies:
@@ -9062,10 +9062,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/doctrine@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "@types/doctrine@npm:0.0.6"
-  checksum: eae59a178be3b7989f3dd269cbe30fee9041a95ccb7ac963bbff3fcc82e7985c5002228afe23b7fad985f3eedf5257d36c7011bd8caafb087fcdcc6df1e52cb3
+"@types/doctrine@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "@types/doctrine@npm:0.0.8"
+  checksum: ca4cab4a94526ec3579c3f10a027298028d34b4c092e4b6791afb37a5f6899208ee1e91bc9542541f31d6d3ba3d1a70408deaa1f105c22c86d23e3a87c59a43c
   languageName: node
   linkType: hard
 
@@ -26939,21 +26939,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen@npm:^6.0.2":
-  version: 6.0.4
-  resolution: "react-docgen@npm:6.0.4"
+"react-docgen@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "react-docgen@npm:7.0.0"
   dependencies:
     "@babel/core": ^7.18.9
     "@babel/traverse": ^7.18.9
     "@babel/types": ^7.18.9
     "@types/babel__core": ^7.18.0
     "@types/babel__traverse": ^7.18.0
-    "@types/doctrine": ^0.0.6
+    "@types/doctrine": ^0.0.8
     "@types/resolve": ^1.20.2
     doctrine: ^3.0.0
     resolve: ^1.22.1
     strip-indent: ^4.0.0
-  checksum: 6e372de705b0ce576c8a46c8aedaea3f584441b18d68c02128f14e20657597fe088c80bb67374d5057001f71505924e07d6e366ec8d768e2456d47395bd32066
+  checksum: 79678d01644e6519450f847c77fa554a7a80ae3a5ff81b1482d1458caa064cf3be88597051375ba7a90921980feb8586378e1560146d64c41d0e569465315575
   languageName: node
   linkType: hard