TypeScript: Migrate @storybook/docs-tools to strict TS

code/lib/docs-tools/src/argTypes/convert/convert.test.ts

@@ -805,8 +805,8 @@ const transformToModule = (inputCode: string) => {
       ],
     ],
   };
-  const { code } = transformSync(inputCode, options);
-  return normalizeNewlines(code);
+  const codeTransform = transformSync(inputCode, options);
+  return codeTransform && normalizeNewlines(codeTransform.code ?? '');
 };
 
 const annotateWithDocgen = (inputCode: string, filename: string) => {
@@ -816,13 +816,13 @@ const annotateWithDocgen = (inputCode: string, filename: string) => {
     babelrc: false,
     filename,
   };
-  const { code } = transformSync(inputCode, options);
-  return normalizeNewlines(code);
+  const codeTransform = transformSync(inputCode, options);
+  return codeTransform && normalizeNewlines(codeTransform.code ?? '');
 };
 
 const convertCommon = (code: string, fileExt: string) => {
   const docgenPretty = annotateWithDocgen(code, `temp.${fileExt}`);
-  const { Component } = requireFromString(transformToModule(docgenPretty));
+  const { Component } = requireFromString(transformToModule(docgenPretty ?? ''));
   // eslint-disable-next-line no-underscore-dangle
   const { props = {} } = Component.__docgenInfo || {};
   const types = mapValues(props, (prop) => convert(prop));

code/lib/docs-tools/src/argTypes/convert/flow/convert.ts

@@ -2,7 +2,7 @@
 import type { SBType } from '@storybook/types';
 import type { FlowType, FlowSigType, FlowLiteralType } from './types';
 
-const isLiteral = (type: FlowType) => type.name === 'literal';
+const isLiteral = (type: FlowType): type is FlowLiteralType => type.name === 'literal';
 const toEnumOption = (element: FlowLiteralType) => element.value.replace(/['|"]/g, '');
 
 const convertSig = (type: FlowSigType) => {

code/lib/docs-tools/src/argTypes/docgen/PropDef.ts

@@ -1,21 +1,21 @@
 // FIXME: this is legacy code that needs to be updated & simplified with ArgType refactor
 
 export interface JsDocParam {
-  name: string;
-  description?: string;
+  name: string | undefined | null;
+  description?: string | null;
 }
 
 export interface JsDocReturns {
-  description?: string;
+  description?: string | null;
 }
 
 export interface JsDocTags {
-  params?: JsDocParam[];
-  returns?: JsDocReturns;
+  params?: JsDocParam[] | null;
+  returns?: JsDocReturns | null;
 }
 
 export interface PropSummaryValue {
-  summary: string;
+  summary?: string;
   detail?: string;
 }
 
@@ -24,10 +24,10 @@ export type PropDefaultValue = PropSummaryValue;
 
 export interface PropDef {
   name: string;
-  type: PropType;
+  type: PropType | null;
   sbType?: any;
   required: boolean;
   description?: string;
-  defaultValue?: PropDefaultValue;
+  defaultValue?: PropDefaultValue | null;
   jsDocTags?: JsDocTags;
 }

code/lib/docs-tools/src/argTypes/docgen/createPropDef.ts

@@ -1,4 +1,4 @@
-import type { PropDefaultValue } from './PropDef';
+import type { JsDocTags, PropDefaultValue } from './PropDef';
 import type { PropDef, DocgenInfo, DocgenType, DocgenPropDefaultValue } from './types';
 import { TypeSystem } from './types';
 import type { JsDocParsingResult } from '../jsdocParser';
@@ -51,7 +51,7 @@ function isStringValued(type?: DocgenType) {
 function createDefaultValue(
   defaultValue: DocgenPropDefaultValue,
   type: DocgenType
-): PropDefaultValue {
+): PropDefaultValue | null {
   if (defaultValue != null) {
     const { value } = defaultValue;
 
@@ -81,17 +81,17 @@ function createBasicPropDef(name: string, type: DocgenType, docgenInfo: DocgenIn
   };
 }
 
-function applyJsDocResult(propDef: PropDef, jsDocParsingResult: JsDocParsingResult): PropDef {
-  if (jsDocParsingResult.includesJsDoc) {
+function applyJsDocResult(propDef: PropDef, jsDocParsingResult?: JsDocParsingResult): PropDef {
+  if (jsDocParsingResult?.includesJsDoc) {
     const { description, extractedTags } = jsDocParsingResult;
 
     if (description != null) {
       // eslint-disable-next-line no-param-reassign
       propDef.description = jsDocParsingResult.description;
     }
 
-    const value = {
-      ...extractedTags,
+    const value: JsDocTags = {
+      returns: extractedTags?.returns,
       params: extractedTags?.params?.map((x) => ({
         name: x.getPrettyName(),
         description: x.description,

code/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts

@@ -8,7 +8,7 @@ const PROP_NAME = 'propName';
 
 interface TypeSystemDef {
   name: string;
-  typeProperty?: string;
+  typeProperty: string;
 }
 
 const TypeSystems: TypeSystemDef[] = [
@@ -67,10 +67,10 @@ TypeSystems.forEach((x) => {
       const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
 
       expect(propDef.name).toBe(PROP_NAME);
-      expect(propDef.type.summary).toBe('string');
+      expect(propDef.type?.summary).toBe('string');
       expect(propDef.description).toBe('Hey! Hey!');
       expect(propDef.required).toBe(false);
-      expect(propDef.defaultValue.summary).toBe("'Default'");
+      expect(propDef.defaultValue?.summary).toBe("'Default'");
     });
 
     if (x === TypeSystems[0]) {
@@ -87,10 +87,10 @@ TypeSystems.forEach((x) => {
         const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
 
         expect(propDef.name).toBe(PROP_NAME);
-        expect(propDef.type.summary).toBe('string');
+        expect(propDef.type?.summary).toBe('string');
         expect(propDef.description).toBe('Hey! Hey!');
         expect(propDef.required).toBe(false);
-        expect(propDef.defaultValue.summary).toBe('"Default"');
+        expect(propDef.defaultValue?.summary).toBe('"Default"');
       });
 
       it('should map defaults docgen info properly, RDT broken enums', () => {
@@ -107,10 +107,10 @@ TypeSystems.forEach((x) => {
         const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
 
         expect(propDef.name).toBe(PROP_NAME);
-        expect(propDef.type.summary).toBe('enum');
+        expect(propDef.type?.summary).toBe('enum');
         expect(propDef.description).toBe('Hey! Hey!');
         expect(propDef.required).toBe(false);
-        expect(propDef.defaultValue.summary).toBe('"Default"');
+        expect(propDef.defaultValue?.summary).toBe('"Default"');
       });
 
       it('should map defaults docgen info properly, vue', () => {
@@ -126,10 +126,10 @@ TypeSystems.forEach((x) => {
         const { propDef } = extractComponentProps(component, DOCGEN_SECTION)[0];
 
         expect(propDef.name).toBe(PROP_NAME);
-        expect(propDef.type.summary).toBe('string');
+        expect(propDef.type?.summary).toBe('string');
         expect(propDef.description).toBe('Hey! Hey!');
         expect(propDef.required).toBe(false);
-        expect(propDef.defaultValue.summary).toBe("'Default'");
+        expect(propDef.defaultValue?.summary).toBe("'Default'");
       });
     }
 
@@ -208,11 +208,11 @@ TypeSystems.forEach((x) => {
 
       expect(propDef.description).toBe('onClick description');
       expect(propDef.jsDocTags).toBeDefined();
-      expect(propDef.jsDocTags.params).toBeDefined();
-      expect(propDef.jsDocTags.params[0].name).toBe('event');
-      expect(propDef.jsDocTags.params[0].description).toBe('Original event.');
-      expect(propDef.jsDocTags.params[1].name).toBe('value');
-      expect(propDef.jsDocTags.params[1].description).toBeNull();
+      expect(propDef.jsDocTags?.params).toBeDefined();
+      expect(propDef.jsDocTags?.params?.[0].name).toBe('event');
+      expect(propDef.jsDocTags?.params?.[0].description).toBe('Original event.');
+      expect(propDef.jsDocTags?.params?.[1].name).toBe('value');
+      expect(propDef.jsDocTags?.params?.[1].description).toBeNull();
     });
 
     it("should not return 'null' default value", () => {

code/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.ts

@@ -11,7 +11,7 @@ import { getPropDefFactory } from './createPropDef';
 export interface ExtractedProp {
   propDef: PropDef;
   docgenInfo: DocgenInfo;
-  jsDocTags: ExtractedJsDoc;
+  jsDocTags?: ExtractedJsDoc;
   typeSystem: TypeSystem;
 }
 
@@ -86,7 +86,7 @@ function extractProp(
   docgenInfo: DocgenInfo,
   typeSystem: TypeSystem,
   createPropDef: PropDefFactory
-): ExtractedProp {
+): ExtractedProp | null {
   const jsDocParsingResult = parseJsDoc(docgenInfo.description);
   const isIgnored = jsDocParsingResult.includesJsDoc && jsDocParsingResult.ignore;
 
@@ -105,5 +105,5 @@ function extractProp(
 }
 
 export function extractComponentDescription(component?: Component): string {
-  return component != null && getDocgenDescription(component);
+  return component != null ? getDocgenDescription(component) : '';
 }

code/lib/docs-tools/src/argTypes/docgen/flow/createDefaultValue.ts

@@ -5,16 +5,16 @@ import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../utils
 import { isDefaultValueBlacklisted } from '../utils/defaultValue';
 
 export function createDefaultValue(
-  defaultValue: DocgenPropDefaultValue,
-  type: DocgenPropType
-): PropDefaultValue {
+  defaultValue: DocgenPropDefaultValue | null,
+  type: DocgenPropType | null
+): PropDefaultValue | null {
   if (defaultValue != null) {
     const { value } = defaultValue;
 
     if (!isDefaultValueBlacklisted(value)) {
       return !isTooLongForDefaultValueSummary(value)
         ? createSummaryValue(value)
-        : createSummaryValue(type.name, value);
+        : createSummaryValue(type?.name, value);
     }
   }
 

code/lib/docs-tools/src/argTypes/docgen/flow/createPropDef.test.ts

@@ -8,7 +8,7 @@ function createDocgenInfo({ flowType, ...others }: Partial<DocgenInfo>): DocgenI
     flowType,
     required: false,
     ...others,
-  };
+  } as DocgenInfo;
 }
 
 describe('type', () => {
@@ -21,8 +21,8 @@ describe('type', () => {
 
         const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-        expect(type.summary).toBe(x);
-        expect(type.detail).toBeUndefined();
+        expect(type?.summary).toBe(x);
+        expect(type?.detail).toBeUndefined();
       });
     }
   );
@@ -35,8 +35,8 @@ describe('type', () => {
 
       const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-      expect(type.summary).toBe(x);
-      expect(type.detail).toBeUndefined();
+      expect(type?.summary).toBe(x);
+      expect(type?.detail).toBeUndefined();
     });
 
     it(`should support typed ${x}`, () => {
@@ -54,8 +54,8 @@ describe('type', () => {
 
       const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-      expect(type.summary).toBe(`${x}<any>`);
-      expect(type.detail).toBeUndefined();
+      expect(type?.summary).toBe(`${x}<any>`);
+      expect(type?.detail).toBeUndefined();
     });
   });
 
@@ -88,8 +88,8 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('{ foo: string, bar?: mixed }');
-    expect(type.detail).toBeUndefined();
+    expect(type?.summary).toBe('{ foo: string, bar?: mixed }');
+    expect(type?.detail).toBeUndefined();
   });
 
   it('should support long object signature', () => {
@@ -188,8 +188,8 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('object');
-    expect(type.detail).toBe(
+    expect(type?.summary).toBe('object');
+    expect(type?.detail).toBe(
       '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }'
     );
   });
@@ -218,8 +218,8 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('(x: string) => void');
-    expect(type.detail).toBeUndefined();
+    expect(type?.summary).toBe('(x: string) => void');
+    expect(type?.detail).toBeUndefined();
   });
 
   it('should support tuple', () => {
@@ -244,7 +244,7 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('[foo, "value", number]');
+    expect(type?.summary).toBe('[foo, "value", number]');
   });
 
   it('should support union', () => {
@@ -265,7 +265,7 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('number | string');
+    expect(type?.summary).toBe('number | string');
   });
 
   it('should support nested union elements', () => {
@@ -300,7 +300,7 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('"minimum" | "maximum" | number | string');
+    expect(type?.summary).toBe('"minimum" | "maximum" | number | string');
   });
 
   it('uses raw union value if elements are missing', () => {
@@ -313,7 +313,7 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+    expect(type?.summary).toBe('"minimum" | "maximum" | UserSize');
   });
 
   it('removes a leading | if raw union value is used', () => {
@@ -326,7 +326,7 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+    expect(type?.summary).toBe('"minimum" | "maximum" | UserSize');
   });
 
   it('even removes extra spaces after a leading | if raw union value is used', () => {
@@ -339,7 +339,7 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+    expect(type?.summary).toBe('"minimum" | "maximum" | UserSize');
   });
 
   it('should support intersection', () => {
@@ -360,6 +360,6 @@ describe('type', () => {
 
     const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
 
-    expect(type.summary).toBe('number & string');
+    expect(type?.summary).toBe('number & string');
   });
 });

code/lib/docs-tools/src/argTypes/docgen/flow/createPropDef.ts

@@ -12,6 +12,6 @@ export const createFlowPropDef: PropDefFactory = (propName, docgenInfo) => {
     type: createType(flowType),
     required,
     description,
-    defaultValue: createDefaultValue(defaultValue, flowType),
+    defaultValue: createDefaultValue(defaultValue ?? null, flowType ?? null),
   };
 };

code/lib/docs-tools/src/argTypes/docgen/flow/createType.ts

@@ -78,7 +78,7 @@ function generateDefault({ name, raw }: DocgenFlowType): PropType {
   return createSummaryValue(name);
 }
 
-export function createType(type: DocgenFlowType): PropType {
+export function createType(type?: DocgenFlowType): PropType | null {
   // A type could be null if a defaultProp has been provided without a type definition.
   if (type == null) {
     return null;