Merge pull request #26824 from storybookjs/kasper/update-csf

CSF: Fix typings for control and other properties of argTypes

code/addons/controls/src/ControlsPanel.tsx

@@ -35,8 +35,10 @@ export const ControlsPanel: FC = () => {
   const hasControls = Object.values(rows).some((arg) => arg?.control);
 
   const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
-    if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;
-    else acc[key] = { ...arg, control: { ...arg.control, presetColors } };
+    const control = arg?.control;
+    if (typeof control !== 'object' || control?.type !== 'color' || control?.presetColors)
+      acc[key] = arg;
+    else acc[key] = { ...arg, control: { ...control, presetColors } };
     return acc;
   }, {} as ArgTypes);
 

code/addons/links/package.json

@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/frameworks/angular/src/client/docs/compodoc.ts

@@ -200,7 +200,7 @@ const extractDefaultValueFromComments = (property: Property, value: any) => {
 
 const extractDefaultValue = (property: Property) => {
   try {
-    let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1');
+    let value: string = property.defaultValue?.replace(/^'(.*)'$/, '$1');
     value = castDefaultValue(property, value);
 
     if (value == null && property.jsdoctags?.length > 0) {

code/lib/codemod/package.json

@@ -57,7 +57,7 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",

code/lib/core-server/package.json

@@ -62,7 +62,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-mdx": "3.0.0",
     "@storybook/global": "^5.0.0",

code/lib/csf-tools/package.json

@@ -46,7 +46,7 @@
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.23.2",
     "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
     "recast": "^0.23.5",

code/lib/manager-api/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/router": "workspace:*",

code/lib/preview-api/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/global": "^5.0.0",
     "@storybook/types": "workspace:*",
     "@types/qs": "^6.9.5",

code/lib/preview-api/src/modules/store/args.test.ts

@@ -243,6 +243,7 @@ describe('validateOptions', () => {
   });
 
   it('ignores options and logs an error if options is not an array', () => {
+    // @ts-expect-error This should give TS error indeed (finally!)
     expect(validateOptions({ a: 1 }, { a: { options: { 2: 'two' } } })).toStrictEqual({ a: 1 });
     expect(once.error).toHaveBeenCalledWith(
       expect.stringContaining("Invalid argType: 'a.options' should be an array")

code/lib/preview-api/src/modules/store/csf/prepareStory.ts

@@ -250,10 +250,10 @@ export function prepareContext<
       return acc;
     }
 
-    const mappingFn = (originalValue: any) =>
-      originalValue in targetedContext.argTypes[key].mapping
-        ? targetedContext.argTypes[key].mapping[originalValue]
-        : originalValue;
+    const mappingFn = (originalValue: any) => {
+      const mapping = targetedContext.argTypes[key].mapping;
+      return mapping && originalValue in mapping ? mapping[originalValue] : originalValue;
+    };
 
     acc[key] = Array.isArray(val) ? val.map(mappingFn) : mappingFn(val);
 

code/lib/preview-api/src/modules/store/inferControls.test.ts

@@ -58,7 +58,8 @@ describe('inferControls', () => {
         })
       );
 
-      expect(inferredControls.background.control.type).toEqual('color');
+      const control = inferredControls.background.control;
+      expect(typeof control === 'object' && control.type).toEqual('color');
     });
 
     it('should return inferred type when using color matcher but arg passed is not a string', () => {
@@ -97,7 +98,8 @@ describe('inferControls', () => {
         );
 
         expect(warnSpy).toHaveBeenCalled();
-        expect(inferredControls.background.control.type).toEqual(type.name);
+        const control = inferredControls.background.control;
+        expect(typeof control === 'object' && control.type).toEqual(type.name);
       });
     });
   });

code/lib/source-loader/package.json

@@ -45,7 +45,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/types": "workspace:*",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",

code/lib/types/package.json

@@ -49,7 +49,7 @@
     "file-system-cache": "2.3.0"
   },
   "devDependencies": {
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.0.0",
     "typescript": "^5.3.2"

code/package.json

@@ -127,7 +127,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",

code/renderers/react/src/docs/extractArgTypes.ts

@@ -22,9 +22,9 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
           description,
           type: { required, ...sbType },
           table: {
-            type,
+            type: type ?? undefined,
             jsDocTags,
-            defaultValue: defaultSummary,
+            defaultValue: defaultSummary ?? undefined,
           },
         };
         return acc;

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

@@ -6,7 +6,7 @@
     "description": "specify icon="search" or icon={IconComponent}",
     "name": "icon",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

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

@@ -6,7 +6,7 @@
     "description": "",
     "name": "aProperty",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "No background or border if static alert",
     "name": "blank",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -25,7 +25,7 @@
     "description": "Allows icon override, accepts material icon name",
     "name": "icon",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -44,7 +44,7 @@
     "description": "",
     "name": "message",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/8143-ts-imported-types/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "bar",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "Please work...",
     "name": "test",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9023-js-hoc/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "classes",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -47,7 +47,7 @@
     "description": "",
     "name": "icon",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "areas",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": "[object]",

code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "A message alerting about Empire activities.",
     "name": "message",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9586-js-react-memo/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "label",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -22,7 +22,7 @@
     "description": "",
     "name": "onClick",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9591-ts-import-types/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "other",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "heads",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -23,7 +23,7 @@
     "description": "",
     "name": "onAddClick",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "The size (replaces width)",
     "name": "size",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "checked",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -25,7 +25,7 @@
     "description": "",
     "name": "defaultChecked",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -44,7 +44,7 @@
     "description": "The input content value",
     "name": "value",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "bar",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,
@@ -31,7 +31,7 @@
     "description": "",
     "name": "foo",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,

code/renderers/react/template/stories/docgen-components/9922-ts-component-props/argTypes.snapshot

@@ -6,7 +6,7 @@
     "description": "",
     "name": "spacing",
     "table": {
-      "defaultValue": null,
+      "defaultValue": undefined,
       "jsDocTags": undefined,
       "type": {
         "detail": undefined,