Docs-tools: Fix react-docgen enum handling

storybookjs · Aug 13, 2023 · c6ab522 · c6ab522
1 parent e874745
commit c6ab522
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
@@ -2,7 +2,7 @@
 import mapValues from 'lodash/mapValues.js';
 import type { SBType } from '@storybook/types';
 import type { PTType } from './types';
-import { includesQuotes, trimQuotes } from '../utils';
+import { parseLiteral } from '../utils';
 
 const SIGNATURE_REGEXP = /^\(.*\) => /;
 
@@ -13,15 +13,7 @@ export const convert = (type: PTType): SBType | any => {
 
   switch (name) {
     case 'enum': {
-      const values = computed
-        ? value
-        : value.map((v: PTType) => {
-            const trimmedValue = trimQuotes(v.value);
-
-            return includesQuotes(v.value) || Number.isNaN(Number(trimmedValue))
-              ? trimmedValue
-              : Number(trimmedValue);
-          });
+      const values = computed ? value : value.map((v: PTType) => parseLiteral(v.value));
       return { ...base, name, value: values };
     }
     case 'string':

diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-case-declarations */
 import type { SBType } from '@storybook/types';
 import type { TSType, TSSigType } from './types';
+import { parseLiteral } from '../utils';
 
 const convertSig = (type: TSSigType) => {
   switch (type.type) {
@@ -37,6 +38,18 @@ export const convert = (type: TSType): SBType | void => {
     case 'signature':
       return { ...base, ...convertSig(type) };
     case 'union':
+      let result;
+      if (type.elements.every((element) => element.name === 'literal')) {
+        result = {
+          ...base,
+          name: 'enum',
+          // @ts-expect-error fix types
+          value: type.elements.map((v) => parseLiteral(v.value)),
+        };
+      } else {
+        result = { ...base, name, value: type.elements.map(convert) };
+      }
+      return result;
     case 'intersection':
       return { ...base, name, value: type.elements.map(convert) };
     default:

diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
@@ -33,7 +33,7 @@ type TSObjectSigType = TSBaseType & {
 };
 
 type TSScalarType = TSBaseType & {
-  name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol';
+  name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol' | 'literal';
 };
 
 type TSArrayType = TSBaseType & {

diff --git a/code/lib/docs-tools/src/argTypes/convert/utils.ts b/code/lib/docs-tools/src/argTypes/convert/utils.ts
@@ -1,3 +1,10 @@
 const QUOTE_REGEX = /^['"]|['"]$/g;
 export const trimQuotes = (str: string) => str.replace(QUOTE_REGEX, '');
 export const includesQuotes = (str: string) => QUOTE_REGEX.test(str);
+export const parseLiteral = (str: string) => {
+  const trimmedValue = trimQuotes(str);
+
+  return includesQuotes(str) || Number.isNaN(Number(trimmedValue))
+    ? trimmedValue
+    : Number(trimmedValue);
+};