chore: migrate stories

PrestaShopCorp · Jul 7, 2023 · 255a7eb · 255a7eb
1 parent f9d3586
commit 255a7eb
Show file tree

Hide file tree

Showing 13 changed files with 937 additions and 868 deletions.
diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js
@@ -4,6 +4,9 @@ module.exports = {
     '../stories/*/**.@(js|jsx|ts|tsx|mdx)',
     '../../packages/components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
   ],
+  core: {
+    disableTelemetry: true,
+  },
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

diff --git a/docs/stories/styles/Grid.stories.ts b/docs/stories/styles/Grid.stories.ts
@@ -1,51 +1,54 @@
 import { PuikCard } from '@puik/components'
-import type { Story, Meta } from '@storybook/vue3'
+import type { StoryFn, StoryObj, Meta } from '@storybook/vue3'
 
 export default {
   title: 'Styles/Grid',
 } as Meta
 
-function generateStory(defaultViewport?: string) {
-  const htmlTemplate = `<div class="puik-grid">
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card>1 col</puik-card>
-    <puik-card class="col-span-2">2 col</puik-card>
-    <puik-card class="col-span-2">2 col</puik-card>
-    <puik-card class="col-span-2">2 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-3">3 col</puik-card>
-    <puik-card class="col-span-4">4 col</puik-card>
-    <puik-card class="col-span-4">4 col</puik-card>
-    <puik-card class="col-span-4">4 col</puik-card>
-  </div>`
+const htmlTemplate = `<div class="puik-grid">
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card>1 col</puik-card>
+  <puik-card class="col-span-2">2 col</puik-card>
+  <puik-card class="col-span-2">2 col</puik-card>
+  <puik-card class="col-span-2">2 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-3">3 col</puik-card>
+  <puik-card class="col-span-4">4 col</puik-card>
+  <puik-card class="col-span-4">4 col</puik-card>
+  <puik-card class="col-span-4">4 col</puik-card>
+</div>`
 
-  const Template: Story = () => ({
-    components: { PuikCard },
-    template: htmlTemplate,
-  })
+const Template: StoryFn = () => ({
+  components: { PuikCard },
+  template: htmlTemplate,
+})
 
-  const Story: Story = Template.bind({})
-  Story.parameters = {
-    controls: { hideNoControlsWarning: true },
-    docs: {
-      source: {
-        code: htmlTemplate,
-        language: 'html',
+function generateStory(defaultViewport?: string): StoryObj {
+  const Story: StoryObj = {
+    render: Template,
+    parameters: {
+      controls: { hideNoControlsWarning: true },
+      docs: {
+        source: {
+          code: htmlTemplate,
+          language: 'html',
+        },
       },
     },
   }
 
-  if (defaultViewport) Story.parameters.viewport = { defaultViewport }
+  if (defaultViewport && Story.parameters)
+    Story.parameters.viewport = { defaultViewport }
 
   return Story
 }
 
-export const Lg = generateStory()
+export const Lg = generateStory('lg')
 export const Md = generateStory('md')
 export const Sm = generateStory('sm')
diff --git a/docs/stories/styles/Typography.stories.ts b/docs/stories/styles/Typography.stories.ts
@@ -1,27 +1,26 @@
-import type { Meta, Story } from '@storybook/vue3'
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue3'
 
 export default {
   title: 'Styles/Typography',
 } as Meta
 
-function generateStory(htmlTemplate: string) {
-  const Template: Story = () => ({
+function generateStory(htmlTemplate: string): StoryObj {
+  const Template: StoryFn = () => ({
     template: htmlTemplate,
   })
 
-  const Story = Template.bind({})
-
-  Story.parameters = {
-    controls: { hideNoControlsWarning: true },
-    docs: {
-      source: {
-        code: htmlTemplate,
-        language: 'html',
+  return {
+    render: Template,
+    parameters: {
+      controls: { hideNoControlsWarning: true },
+      docs: {
+        source: {
+          code: htmlTemplate,
+          language: 'html',
+        },
       },
     },
   }
-
-  return Story
 }
 
 export const Title = generateStory(`

diff --git a/packages/components/menu/stories/menu.stories.ts b/packages/components/menu/stories/menu.stories.ts
@@ -72,8 +72,10 @@ export default {
   },
   parameters: {
     docs: {
-      inlineStories: false,
-      iframeHeight: 500,
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
     },
   },
 } as Meta

diff --git a/packages/components/modal/stories/modal.stories.ts b/packages/components/modal/stories/modal.stories.ts
@@ -204,8 +204,10 @@ export enum PuikModalSize {
   parameters: {
     chromatic: { delay: 3000 },
     docs: {
-      inlineStories: false,
-      iframeHeight: 500,
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
     },
   },
 } as Meta

diff --git a/packages/components/sidebar/stories/sidebar-group-item.stories.ts b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
@@ -1,6 +1,6 @@
 import { PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '..'
 import PuikSidebar from './../src/sidebar.vue'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'
 
 export default {
   title: 'Components/Sidebar/SidebarGroupItem',
@@ -61,13 +61,15 @@ export default {
   },
   parameters: {
     docs: {
-      inlineStories: false,
-      iframeHeight: 500,
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
     },
   },
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     PuikSidebar,
     PuikSidebarGroupItem,
@@ -91,12 +93,13 @@ const Template: Story = (args: Args) => ({
   `,
 })
 
-export const Default = Template.bind({})
-Default.args = {}
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
+export const Default: StoryObj = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <puik-sidebar>
   <puik-sidebar-item title="Dashboard" icon="trending_up" />
@@ -112,7 +115,8 @@ Default.parameters = {
   </puik-sidebar-group-item>
 </puik-sidebar>
 `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
diff --git a/packages/components/sidebar/stories/sidebar-item.stories.ts b/packages/components/sidebar/stories/sidebar-item.stories.ts
@@ -1,6 +1,6 @@
 import { PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '..'
 import PuikSidebar from './../src/sidebar.vue'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'
 
 export default {
   title: 'Components/Sidebar/SidebarItem',
@@ -77,13 +77,15 @@ export default {
   },
   parameters: {
     docs: {
-      inlineStories: false,
-      iframeHeight: 500,
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
     },
   },
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     PuikSidebar,
     PuikSidebarGroupItem,
@@ -111,29 +113,31 @@ const Template: Story = (args: Args) => ({
   `,
 })
 
-export const Default = Template.bind({})
-Default.args = {}
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-<puik-sidebar>
-  <puik-sidebar-item :title="title" :icon="icon" :active="active" />
-  <puik-sidebar-item title="Dashboard" icon="trending_up" />
-  <puik-sidebar-title>Section title</puik-sidebar-title>
-  <puik-sidebar-group-item
-    title="Orders"
-    icon="shopping_basket"
-    name="group-1"
-    :active="active"
-  >
+export const Default: StoryObj = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-sidebar>
     <puik-sidebar-item :title="title" :icon="icon" :active="active" />
-    <puik-sidebar-item title="Title 2" />
-  </puik-sidebar-group-item>
-</puik-sidebar>
-`,
-      language: 'html',
+    <puik-sidebar-item title="Dashboard" icon="trending_up" />
+    <puik-sidebar-title>Section title</puik-sidebar-title>
+    <puik-sidebar-group-item
+      title="Orders"
+      icon="shopping_basket"
+      name="group-1"
+      :active="active"
+    >
+      <puik-sidebar-item :title="title" :icon="icon" :active="active" />
+      <puik-sidebar-item title="Title 2" />
+    </puik-sidebar-group-item>
+  </puik-sidebar>
+  `,
+        language: 'html',
+      },
     },
   },
 }
diff --git a/packages/components/sidebar/stories/sidebar-title.stories.ts b/packages/components/sidebar/stories/sidebar-title.stories.ts
@@ -1,6 +1,6 @@
 import { PuikSidebarItem, PuikSidebarTitle } from '..'
 import PuikSidebar from './../src/sidebar.vue'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { Meta, StoryObj, StoryFn, Args } from '@storybook/vue3'
 
 export default {
   title: 'Components/Sidebar/SidebarTitle',
@@ -37,13 +37,15 @@ export default {
   },
   parameters: {
     docs: {
-      inlineStories: false,
-      iframeHeight: 500,
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
     },
   },
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     PuikSidebar,
     PuikSidebarItem,
@@ -61,15 +63,18 @@ const Template: Story = (args: Args) => ({
   `,
 })
 
-export const Default = Template.bind({})
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
+export const Default: StoryObj = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <puik-sidebar-title :tag="tag">Title</puik-sidebar-title>
 `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }