Fix bug with meta not working well as generic parameter for StoryObj

storybookjs · Dec 12, 2022 · 0fbefa5 · 0fbefa5
1 parent f5aa7bd
commit 0fbefa5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx
@@ -200,3 +200,31 @@ describe('Story args can be inferred', () => {
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 });
+
+test('StoryObj<typeof meta> is allowed when meta is upcasted to Meta<Props>', () => {
+  expectTypeOf<StoryObj<Meta<ButtonProps>>>().toEqualTypeOf<
+    ReactStory<
+      ButtonProps & { children?: ReactNode },
+      Partial<ButtonProps & { children?: ReactNode }>
+    >
+  >();
+});
+
+test('StoryObj<typeof meta> is allowed when meta is upcasted to Meta<typeof Cmp>', () => {
+  expectTypeOf<StoryObj<Meta<typeof Button>>>().toEqualTypeOf<
+    ReactStory<
+      ButtonProps & { children?: ReactNode },
+      Partial<ButtonProps & { children?: ReactNode }>
+    >
+  >();
+});
+
+test('StoryObj<typeof meta> is allowed when all arguments are optional', () => {
+  expectTypeOf<StoryObj<Meta<{ label?: string }>>>().toEqualTypeOf<
+    ReactStory<{ label?: string; children?: ReactNode }, { label?: string; children?: ReactNode }>
+  >();
+});
+
+test('Meta can be used without generic', () => {
+  expectTypeOf({ component: Button }).toMatchTypeOf<Meta>();
+});
diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Canvas } from './Canvas';
+import { Canvas, SourceState } from './Canvas';
 import { Story as StoryComponent } from './Story';
 import * as BooleanStories from '../controls/Boolean.stories';
 
@@ -25,20 +25,20 @@ export const BasicStory: Story = {};
 
 export const WithSourceOpen: Story = {
   args: {
-    withSource: 'open',
+    withSource: SourceState.OPEN,
   },
 };
 export const WithSourceClosed: Story = {
   args: {
-    withSource: 'closed',
+    withSource: SourceState.CLOSED,
   },
 };
 
 // TODO: what is the purpose of mdxSource exactly?
 export const WithMdxSource: Story = {
   name: 'With MDX Source',
   args: {
-    withSource: 'open',
+    withSource: SourceState.CLOSED,
     mdxSource: `const thisIsCustomSource = true;
 if (isSyntaxHighlighted) {
   console.log('syntax highlighting is working');
@@ -48,7 +48,7 @@ if (isSyntaxHighlighted) {
 
 export const WithoutSource: Story = {
   args: {
-    withSource: 'none',
+    withSource: SourceState.CLOSED,
   },
 };
 

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -6335,13 +6335,13 @@ __metadata:
   linkType: hard
 
 "@storybook/csf@npm:next":
-  version: 0.0.2-next.7
-  resolution: "@storybook/csf@npm:0.0.2-next.7"
+  version: 0.0.2-next.8
+  resolution: "@storybook/csf@npm:0.0.2-next.8"
   dependencies:
     expect-type: ^0.14.2
     lodash: ^4.17.15
     type-fest: ^2.19.0
-  checksum: 3920626fdd6dc4875ba95ae46fa0776051f544a479029ee7d561b87602511010161750a42b0d5e1371ec336b47262e1098524c834805ca686d9bc2de5cae0e4e
+  checksum: 86f5599c030b87cbab6fa5e4b4a9ef1aeed5e838b993b2bae5f0fc50d79ae80d5cfbf2590a05bae0a95068ef77eec88d8c102072d63c77745afe74f91cfa03a3
   languageName: node
   linkType: hard