From e47a72c72bc06a29791a7f6cfb7b295809a8debe Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 20 Oct 2023 18:55:06 +0800 Subject: [PATCH 1/4] React: Upgrade `react-docgen` to v7 --- code/frameworks/react-vite/package.json | 2 +- code/yarn.lock | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 1f337cce25dc..9bad3a720f5a 100644 --- a/code/frameworks/react-vite/package.json +++ b/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", diff --git a/code/yarn.lock b/code/yarn.lock index bdd11c54000c..60461e640b26 100644 --- a/code/yarn.lock +++ b/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 From 1cc83764e9da24e9e961461fa31bfb0ee72f2b96 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 20 Oct 2023 20:24:42 +0800 Subject: [PATCH 2/4] React: Add test for react-docgen FC --- .../ts-react-fc/argTypes.snapshot | 3 + .../ts-react-fc/docgen.snapshot | 33 +++++++ .../docgen-components/ts-react-fc/input.tsx | 97 +++++++++++++++++++ .../ts-react-fc/properties.snapshot | 7 ++ .../template/stories/ts-argtypes.stories.tsx | 3 + 5 files changed, 143 insertions(+) create mode 100644 code/renderers/react/template/stories/docgen-components/ts-react-fc/argTypes.snapshot create mode 100644 code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot create mode 100644 code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx create mode 100644 code/renderers/react/template/stories/docgen-components/ts-react-fc/properties.snapshot diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/ts-react-fc/argTypes.snapshot new file mode 100644 index 000000000000..84dad481b0c6 --- /dev/null +++ b/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 {}`; diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot new file mode 100644 index 000000000000..0b966e7ff850 --- /dev/null +++ b/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`react component properties ts-react-fc 1`] = ` +"import React from 'react'; +function concat(a, b) { + return a + b; +} +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 = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\"); +export const component = TypeScriptProps; +TypeScriptProps.__docgenInfo = { + \\"description\\": \\"\\", + \\"methods\\": [], + \\"displayName\\": \\"TypeScriptProps\\" +};" +`; diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx new file mode 100644 index 000000000000..1e6ea213a632 --- /dev/null +++ b/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx @@ -0,0 +1,97 @@ +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 { + 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 { + 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: (o: T, propertyNames: K[]) => T[K][]; + symbol: symbol; + interface: ItemInterface; + genericInterface: GenericInterface; + arrayOfPrimitive: string[]; + arrayOfComplexObject: ItemInterface[]; + tupleOfPrimitive: [string, number]; + tupleWithComplexType: [string, ItemInterface]; + defaultEnum: DefaultEnum; + numericEnum: NumericEnum; + stringEnum: StringEnum; + enumUnion: EnumUnion; + recordOfPrimitive: Record; + recordOfComplexObject: Record; + 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; + namedStringLiteralUnion: StringLiteralUnion; + inlinedStringLiteralUnion: 'bottom-left' | 'bottom-right' | 'bottom-center'; + namedNumericLiteralUnion: NumericLiteralUnion; + inlinedNumericLiteralUnion: 0 | 1 | 2; +} + +export const TypeScriptProps: FC = () =>
TypeScript!
; + +export const component = TypeScriptProps; diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/properties.snapshot b/code/renderers/react/template/stories/docgen-components/ts-react-fc/properties.snapshot new file mode 100644 index 000000000000..45e8b039f006 --- /dev/null +++ b/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 [], +} +`; diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx index f2b29752c276..00e6642af2c1 100644 --- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx +++ b/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') { From 76f9b06e7656d2bfe5f0278556e033c29bc9758f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 20 Oct 2023 21:52:18 +0800 Subject: [PATCH 3/4] Fix types --- .../template/stories/docgen-components/ts-react-fc/input.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx index 1e6ea213a632..56ad85711dc4 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx @@ -1,10 +1,6 @@ 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; From a5befff2e4a01183b603bf1f0eab65407b2d4e27 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 20 Oct 2023 23:17:36 +0800 Subject: [PATCH 4/4] Update snapshots --- .../stories/docgen-components/ts-react-fc/docgen.snapshot | 5 +---- .../template/stories/docgen-components/ts-react-fc/input.tsx | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot index 0b966e7ff850..613c97ce6659 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot @@ -2,9 +2,6 @@ exports[`react component properties ts-react-fc 1`] = ` "import React from 'react'; -function concat(a, b) { - return a + b; -} var DefaultEnum = /*#__PURE__*/function (DefaultEnum) { DefaultEnum[DefaultEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\"; DefaultEnum[DefaultEnum[\\"TopRight\\"] = 1] = \\"TopRight\\"; @@ -23,7 +20,7 @@ var StringEnum = /*#__PURE__*/function (StringEnum) { StringEnum[\\"TopCenter\\"] = \\"top-center\\"; return StringEnum; }(StringEnum || {}); -export const TypeScriptProps = () => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\"); +export const TypeScriptProps = props => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\"); export const component = TypeScriptProps; TypeScriptProps.__docgenInfo = { \\"description\\": \\"\\", diff --git a/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx index 56ad85711dc4..2e6e3d6821b1 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx @@ -88,6 +88,6 @@ interface TypeScriptPropsProps { inlinedNumericLiteralUnion: 0 | 1 | 2; } -export const TypeScriptProps: FC = () =>
TypeScript!
; +export const TypeScriptProps: FC = (props) =>
TypeScript!
; export const component = TypeScriptProps;