Merge pull request #24110 from storybookjs/kasper/fix-types

Types: Don't distribute generic type of Meta and Story
storybookjs · Sep 12, 2023 · 22bc762 · 22bc762
2 parents 9a2bc75 + 9e9d837
commit 22bc762
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx
@@ -274,3 +274,29 @@ test('Components without Props can be used, issue #21768', () => {
   type Expected = ReactStory<{}, {}>;
   expectTypeOf(Basic).toEqualTypeOf<Expected>();
 });
+
+test('Meta is broken when using discriminating types, issue #23629', () => {
+  type TestButtonProps = {
+    text: string;
+  } & (
+    | {
+        id?: string;
+        onClick?: (e: unknown, id: string | undefined) => void;
+      }
+    | {
+        id: string;
+        onClick: (e: unknown, id: string) => void;
+      }
+  );
+  const TestButton: React.FC<TestButtonProps> = ({ text }) => {
+    return <p>{text}</p>;
+  };
+
+  expectTypeOf({
+    title: 'Components/Button',
+    component: TestButton,
+    args: {
+      text: 'Button',
+    },
+  }).toMatchTypeOf<Meta<TestButtonProps>>();
+});
diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts
@@ -25,7 +25,7 @@ type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
+export type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
   ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>
   : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
 
@@ -34,7 +34,7 @@ export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
+export type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
   ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>
   : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
 
@@ -43,11 +43,13 @@ export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<ReactRenderer, any>;
-  component?: infer Component;
-  args?: infer DefaultArgs;
-}
+export type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
+  {
+    render?: ArgsStoryFn<ReactRenderer, any>;
+    component?: infer Component;
+    args?: infer DefaultArgs;
+  }
+]
   ? Simplify<
       (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
         ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>