chores & resolve type helper Args type issues

storybookjs · Jun 16, 2024 · 511eda0 · 511eda0
1 parent 9517eb1
commit 511eda0
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 28 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,14 +3,14 @@ import type { StorybookConfig } from '@storybook/svelte-vite';
 const config: StorybookConfig = {
   stories: [
     {
-      directory: '../stories',
+      directory: '../examples',
       files: '**/*.stories.@(ts|svelte)',
-      titlePrefix: 'Demo',
+      titlePrefix: 'Examples',
     },
     {
-      directory: '../examples',
+      directory: '../tests/stories',
       files: '**/*.stories.@(ts|svelte)',
-      titlePrefix: 'Examples',
+      titlePrefix: 'Tests',
     },
   ],
   framework: '@storybook/svelte-vite',

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -1,9 +1,9 @@
-import type { Component, ComponentProps } from 'svelte';
-import type { EmptyObject } from 'type-fest';
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { EmptyObject, Primitive } from 'type-fest';
 import { describe, expectTypeOf, it } from 'vitest';
 
 import { defineMeta, type Args, type StoryContext } from '#index';
-import type { Meta, StoryCmp, StoryContext as BaseStoryContext } from '#types';
+import type { Meta, StoryAnnotations, StoryCmp, StoryContext as BaseStoryContext } from '#types';
 
 import Button from '../examples/components/Button.svelte';
 
@@ -41,7 +41,10 @@ describe("type helper for snippets 'Args'", () => {
       },
     });
 
-    expectTypeOf<Args<typeof Story>>().toMatchTypeOf<(typeof meta)['args']>();
+    expectTypeOf<Args<typeof Story>>().not.toBeNullable();
+    expectTypeOf<Args<typeof Story>>().toMatchTypeOf<StoryAnnotations<typeof meta>['args']>();
+    expectTypeOf<Args<typeof Story>['children']>().toMatchTypeOf<Snippet | Primitive>();
+    expectTypeOf<Args<typeof Story>['children']>().toBeNullable();
   });
 });
 

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import type { Args as BaseArgs } from '@storybook/types';
-import type { Component, ComponentProps, SvelteComponent } from 'svelte';
+import type { ComponentProps } from 'svelte';
 import type { EmptyObject } from 'type-fest';
 
 import type {
@@ -8,6 +8,7 @@ import type {
   StoryContext as BaseStoryContext,
   PossibleCmpType,
   MapSnippetsToAcceptPrimitives,
+  StoryAnnotations,
 } from '#types';
 
 import Story from './runtime/Story.svelte';
@@ -36,12 +37,12 @@ export function defineMeta<
   };
 }
 
-export type Args<TStoryCmp extends StoryCmp<any, any>> =
+export type Args<TStoryCmp> =
   TStoryCmp extends StoryCmp<infer _TOverrideArgs extends BaseArgs, infer TMeta extends Meta>
-    ? TMeta['args']
+    ? NonNullable<StoryAnnotations<TMeta>['args']>
     : never;
 
-export type StoryContext<TStoryCmp extends StoryCmp<any, any>> =
+export type StoryContext<TStoryCmp> =
   TStoryCmp extends StoryCmp<infer _TOverrideArgs extends BaseArgs, infer TMeta extends Meta>
     ? BaseStoryContext<TMeta['args']>
     : never;
diff --git a/src/runtime/Story.svelte b/src/runtime/Story.svelte
@@ -10,9 +10,9 @@
   import { useStoriesTemplate } from '#runtime/contexts/template.svelte';
 
   import { storyNameToExportName } from '#utils/identifier-utils';
-  import type { Meta, StoryAnnotations, StoryCmpProps, SvelteRenderer } from '#types';
+  import type { Meta, StoryAnnotations, StoryCmpProps } from '#types';
 
-  type Props = StoryAnnotations<TMeta> & {
+  type Props = Partial<StoryAnnotations<TMeta>> & {
     /**
      * The content to render in the story, either as:
      * 1. A snippet taking args and storyContext as parameters

diff --git a/tests/stories/Comparison.stories.ts b/tests/stories/Comparison.stories.ts
@@ -23,7 +23,6 @@ const meta = {
   component: Comparison,
   argTypes: {
     csf: { table: { disable: true } },
-    system: { table: { disable: true } },
   },
   tags: ['autodocs', '!dev'],
 } satisfies Meta<Comparison>;

diff --git a/tests/stories/Templating.stories.svelte b/tests/stories/Templating.stories.svelte
@@ -8,7 +8,6 @@
   const { Story } = defineMeta({
     title: 'Templating',
     tags: ['autodocs'],
-    args: { text: '' },
     argsTypes: {
       text: { control: 'text' },
     },

diff --git a/tests/stories/test/RequiredSnippet.stories.svelte b/tests/stories/test/RequiredSnippet.stories.svelte
@@ -10,8 +10,8 @@
   });
 </script>
 
-<!-- Not working, as expected, because the `children` snippet is required. -->
-<!-- <Story name="Case 1" /> -->
+<!-- FIXME: Should it throw at runtime, because we don't provide any snippet - attribute (prop) 'children'? -->
+<Story name="Case 1" />
 
 {#snippet children()}
   <p>This works</p>
@@ -20,22 +20,12 @@
 <!-- Works, as expected -->
 <Story name="Case 2" args={{ children }} />
 
-<!--
-FIXME:
-Works, but TypeScript is not happy.
-Current workaround: add `args: { children: "" }` to `defineMeta`, but this is invalid, Svelte snippets cannot be literal, they're functions
-Reference: https://github.com/storybookjs/addon-svelte-csf/pull/181#issuecomment-2130744977
--->
 <Story name="Case 3">
   {#snippet children()}
     <p>This works</p>
   {/snippet}
 </Story>
 
-<!--
-FIXME: Same issue as above.
-This is equivalent to the case above, a shorter syntax.
--->
 <Story name="Case 4">
   <p>This works</p>
 </Story>