Temporarily resolve existing type issues possibly related to `@storyb…

…ook/svelte` on legacy
storybookjs · Oct 27, 2024 · 6b646f1 · 6b646f1
1 parent 92ca4db
commit 6b646f1
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 8 deletions.
diff --git a/tests/stories/Comparison.stories.ts b/tests/stories/Comparison.stories.ts
@@ -24,6 +24,7 @@ const meta = {
   // @ts-expect-error
   component: Comparison,
   argTypes: {
+    // @ts-expect-error
     csf: { table: { disable: true } },
   },
   tags: ['autodocs', '!dev'],

diff --git a/tests/stories/LegacyStory.stories.svelte b/tests/stories/LegacyStory.stories.svelte
@@ -2,7 +2,7 @@
   import { Story, Template } from '@storybook/addon-svelte-csf';
   import type { Meta } from '@storybook/svelte';
 
-  import LegacyStory from './LegacyTemplate.svelte';
+  import LegacyStory from './LegacyStory.svelte';
 
   /**
    * Description set explicitly in the comment above export const meta.
@@ -15,7 +15,9 @@
    */
   export const meta = {
     title: 'LegacyStory',
+    // @ts-expect-error FIXME: Needs invesigation on `@storybook/svelte` types
     component: LegacyStory,
+    args: {},
     tags: ['autodocs'],
   } satisfies Meta<typeof LegacyStory>;
 

diff --git a/tests/stories/LegacyStory.svelte b/tests/stories/LegacyStory.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  interface Props extends HTMLAttributes<HTMLButtonElement> {
+  interface $$Props extends HTMLButtonAttributes {
     rounded?: boolean;
   }
 
-  let { rounded = false, ...restProps }: Props = $props();
+  export let rounded = false;
 </script>
 
-<button class="button" class:rounded {...restProps}>
+<button class="button" class:rounded {...$$restProps}>
   <strong>{rounded ? 'Round' : 'Square'} corners</strong>
   <hr />
 </button>

diff --git a/tests/stories/LegacyTemplate.stories.svelte b/tests/stories/LegacyTemplate.stories.svelte
@@ -15,6 +15,7 @@
    */
   export const meta = {
     title: 'LegacyTemplate',
+    // @ts-expect-error FIXME: Needs invesigation on `@storybook/svelte` types
     component: LegacyTemplate,
     tags: ['autodocs'],
   } satisfies Meta<typeof LegacyTemplate>;

diff --git a/tests/stories/LegacyTemplate.svelte b/tests/stories/LegacyTemplate.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  interface $$Props extends HTMLButtonAttributes {
+  interface $$Props extends Partial<HTMLButtonAttributes> {
     rounded?: boolean;
   }
 

diff --git a/tests/stories/LegacyWithInstance.stories.svelte b/tests/stories/LegacyWithInstance.stories.svelte
@@ -15,6 +15,7 @@
    */
   export const meta = {
     title: 'LegacyTemplateWithInstance',
+    // @ts-expect-error FIXME: Needs invesigation on `@storybook/svelte` types
     component: LegacyTemplate,
     tags: ['autodocs'],
   } satisfies Meta<typeof LegacyTemplate>;
@@ -28,14 +29,14 @@
 
 <Template let:args let:context>
   <p>Using default template</p>
-  <LegacyTemplate {...args} onclick={handleClick} />
+  <LegacyTemplate {...args} on:click={handleClick} />
 </Template>
 
 <Story name="Default" />
 
 <Template id="rounded" let:args>
   <p>Using rounded template</p>
-  <LegacyTemplate {...args} onclick={handleClick} rounded />
+  <LegacyTemplate {...args} on:click={handleClick} rounded />
 </Template>
 
 <Story name="Rounded" template="rounded" />