diff --git a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts index 6caa89a5d268..82b85c0333e1 100644 --- 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 index 4683b933f845..ffec5b18db20 100644 --- 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 index dee016d76734..aed18f3f4160 100644 --- 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 index 6523490388a8..8af215e69aec 100644 --- 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); +};