From 255a7ebef365866689a3f53fd7892736971cff57 Mon Sep 17 00:00:00 2001
From: Aubin Mottier <aubin.mottier@gmail.com>
Date: Fri, 7 Jul 2023 15:55:12 +0200
Subject: [PATCH] chore: migrate stories

---
 docs/.storybook/main.js                       |   3 +
 docs/stories/styles/Grid.stories.ts           |  69 +-
 docs/stories/styles/Typography.stories.ts     |  25 +-
 .../components/menu/stories/menu.stories.ts   |   6 +-
 .../components/modal/stories/modal.stories.ts |   6 +-
 .../stories/sidebar-group-item.stories.ts     |  26 +-
 .../sidebar/stories/sidebar-item.stories.ts   |  56 +-
 .../sidebar/stories/sidebar-title.stories.ts  |  25 +-
 .../sidebar/stories/sidebar.stories.ts        |  58 +-
 .../stories/skeleton-loader.stories.ts        |  58 +-
 .../snackbar/stories/snackbar.stories.ts      | 143 +--
 .../components/table/stories/table.stories.ts | 964 +++++++++---------
 .../textarea/stories/textarea.stories.ts      | 366 +++----
 13 files changed, 937 insertions(+), 868 deletions(-)

diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js
index 8925f2be..e81bdf9a 100644
--- 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
index 54ca0c43..e40b5606 100644
--- 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
index cab44c09..a4be7b21 100644
--- 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
index f4eae827..0d278c34 100644
--- 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
index 9d07ab83..daae8f34 100644
--- 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
index c2f77b87..65e9c308 100644
--- 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
index 47a2f6ae..4010960c 100644
--- 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
index 7e8c7c77..b0cd3c3b 100644
--- 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',
+      },
     },
   },
 }
diff --git a/packages/components/sidebar/stories/sidebar.stories.ts b/packages/components/sidebar/stories/sidebar.stories.ts
index e27e7474..ae2f43dd 100644
--- a/packages/components/sidebar/stories/sidebar.stories.ts
+++ b/packages/components/sidebar/stories/sidebar.stories.ts
@@ -1,7 +1,7 @@
 import { PuikSidebarGroupItem, PuikSidebarItem, PuikSidebarTitle } from '..'
 import { PuikButton } 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',
@@ -47,13 +47,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,
@@ -97,15 +99,16 @@ const Template: Story = (args: Args) => ({
   `,
 })
 
-export const Default = Template.bind({})
-Default.args = {
-  expanded: false,
-  mobile: false,
-}
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
+export const Default: StoryObj = {
+  render: Template,
+  args: {
+    expanded: false,
+    mobile: false,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <puik-sidebar :open-accordion="name" :mobile="mobile" v-model:expanded="expanded">
   <puik-sidebar-item title="Home" icon="home" />
@@ -162,7 +165,7 @@ Default.parameters = {
         <div disabled="false" id="headlessui-menu-button-1" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="" class="puik-sidebar-group-item__menu-button">
           <button class="puik-button puik-button--text puik-button--md puik-button--fluid puik-sidebar-group-item__collapsed-button">
             <div class="puik-icon material-icons-round" style="font-size: 1.25rem;">shopping_basket</div>
-          
+
           </button>
         </div>
       </div>
@@ -316,12 +319,13 @@ Default.parameters = {
   </nav>
 </div>
 `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
 
-const MobileTemplate = (args: Args) => ({
+const MobileTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikSidebar,
     PuikSidebarGroupItem,
@@ -374,15 +378,16 @@ const MobileTemplate = (args: Args) => ({
   `,
 })
 
-export const Mobile: Story = MobileTemplate.bind({})
-Mobile.args = {
-  expanded: false,
-  mobile: true,
-}
-Mobile.parameters = {
-  docs: {
-    source: {
-      code: `
+export const Mobile: StoryObj = {
+  render: MobileTemplate,
+  args: {
+    expanded: false,
+    mobile: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <puik-sidebar mobile v-model:expanded="expanded" style="position: fixed; height: 100vh;">
   <puik-sidebar-item title="Home" icon="home" />
   <puik-sidebar-item title="Dashboard" icon="trending_up" />
@@ -543,7 +548,8 @@ Mobile.parameters = {
   Open/Close
 </button>
 `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
diff --git a/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts b/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts
index e6406141..c0ab3275 100644
--- a/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts
+++ b/packages/components/skeleton-loader/stories/skeleton-loader.stories.ts
@@ -1,7 +1,7 @@
 import { skeletonLoaderVariants } from '../src/skeleton-loader'
 import PuikSkeletonLoader from './../src/skeleton-loader.vue'
 import PuikSkeletonLoaderGroup from './../src/skeleton-loader-group.vue'
-import type { Meta, StoryFn, Args } from '@storybook/vue3'
+import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3'
 
 const skeletonLoaderVariantsSummary = skeletonLoaderVariants.join('|')
 
@@ -101,15 +101,16 @@ export const Default = {
   },
 }
 
-function generateStory(variant: string) {
-  const story = Template.bind({})
-  story.args = {
-    variant,
-  }
-  story.parameters = {
-    docs: {
-      source: {
-        code: `
+function generateStory(variant: string): StoryObj {
+  return {
+    render: Template,
+    args: {
+      variant,
+    },
+    parameters: {
+      docs: {
+        source: {
+          code: `
 <!--VueJS Snippet-->
 <puik-skeleton-loader-group>
   <puik-skeleton-loader variant="${variant}"></puik-skeleton-loader>
@@ -120,27 +121,26 @@ function generateStory(variant: string) {
   <div class="puik-skeleton material-icons-round puik-skeleton--${variant}"></div>
 </div>
         `,
-        language: 'html',
+          language: 'html',
+        },
       },
     },
   }
-
-  return story
 }
 
-export const h1 = generateStory('h1')
-export const h2 = generateStory('h2')
-export const h3 = generateStory('h3')
-export const h4 = generateStory('h4')
-export const h5 = generateStory('h5')
-export const h6 = generateStory('h6')
-export const Jumbotron = generateStory('jumbotron')
-export const MegaJumbotron = generateStory('mega-jumbotron')
-export const TextSmall = generateStory('text-small')
-export const TextMedium = generateStory('text-medium')
-export const TextLarge = generateStory('text-large')
-export const Badge = generateStory('badge')
-export const Tag = generateStory('tag')
-export const Image = generateStory('image')
-export const Graph = generateStory('graph')
-export const Video = generateStory('video')
+export const h1: StoryObj = generateStory('h1')
+export const h2: StoryObj = generateStory('h2')
+export const h3: StoryObj = generateStory('h3')
+export const h4: StoryObj = generateStory('h4')
+export const h5: StoryObj = generateStory('h5')
+export const h6: StoryObj = generateStory('h6')
+export const Jumbotron: StoryObj = generateStory('jumbotron')
+export const MegaJumbotron: StoryObj = generateStory('mega-jumbotron')
+export const TextSmall: StoryObj = generateStory('text-small')
+export const TextMedium: StoryObj = generateStory('text-medium')
+export const TextLarge: StoryObj = generateStory('text-large')
+export const Badge: StoryObj = generateStory('badge')
+export const Tag: StoryObj = generateStory('tag')
+export const Image: StoryObj = generateStory('image')
+export const Graph: StoryObj = generateStory('graph')
+export const Video: StoryObj = generateStory('video')
diff --git a/packages/components/snackbar/stories/snackbar.stories.ts b/packages/components/snackbar/stories/snackbar.stories.ts
index 2598b857..b46ccf49 100644
--- a/packages/components/snackbar/stories/snackbar.stories.ts
+++ b/packages/components/snackbar/stories/snackbar.stories.ts
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions'
 import { PuikSnackbar } from '..'
 import { snackbarVariants, type PuikSnackbarOptions } from '../src/snackbar'
 import { PuikButton } from '../../button/index'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3'
 
 const snackbarVariantSummary = snackbarVariants.join('|')
 
@@ -87,7 +87,7 @@ export default {
   args: {},
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     PuikButton,
   },
@@ -98,13 +98,14 @@ const Template: Story = (args: Args) => ({
   template: `<puik-button @click="open">Display Snackbar</puik-button>`,
 })
 
-export const Default = Template.bind({})
-
-Default.args = {
-  text: 'New category added.',
+export const Default = {
+  render: Template,
+  args: {
+    text: 'New category added.',
+  },
 }
 
-export const WithoutAction: Story = () => ({
+const WithoutActionTemplate: StoryFn = () => ({
   components: {
     PuikButton,
   },
@@ -128,10 +129,12 @@ export const WithoutAction: Story = () => ({
   `,
 })
 
-WithoutAction.parameters = {
-  docs: {
-    source: {
-      code: `
+export const WithoutAction: StoryObj = {
+  render: WithoutActionTemplate,
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <template>
   <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
@@ -177,12 +180,13 @@ const displayErrorSnackbar = () =>
   </button>
 </div>
       `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
 
-export const WithAction: Story = () => ({
+const WithActionTemplate: StoryFn = () => ({
   components: {
     PuikButton,
   },
@@ -214,66 +218,69 @@ export const WithAction: Story = () => ({
   `,
 })
 
-WithAction.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-<template>
-  <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
-  <puik-button @click="displayErrorSnackbar">Display Error Snackbar</puik-button>
-</template>
+export const WithAction: StoryObj = {
+  render: WithActionTemplate,
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <template>
+    <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
+    <puik-button @click="displayErrorSnackbar">Display Error Snackbar</puik-button>
+  </template>
 
-<script lang="ts" setup>
-const displaySnackbar = () =>
-  PuikSnackbar({
-    text: 'New attribute “Size” added.',
-    action: {
-      label: 'Cancel',
-      callback: action('Default snackbar action callback function'),
-    },
-  })
-const displayErrorSnackbar = () =>
-  PuikSnackbar({
-    text: 'Unable to update settings.',
-    variant: 'danger',
-    action: {
-      label: 'Cancel',
-      callback: action('Error snackbar action callback function'),
-    },
-  })
-</script>
+  <script lang="ts" setup>
+  const displaySnackbar = () =>
+    PuikSnackbar({
+      text: 'New attribute “Size” added.',
+      action: {
+        label: 'Cancel',
+        callback: action('Default snackbar action callback function'),
+      },
+    })
+  const displayErrorSnackbar = () =>
+    PuikSnackbar({
+      text: 'Unable to update settings.',
+      variant: 'danger',
+      action: {
+        label: 'Cancel',
+        callback: action('Error snackbar action callback function'),
+      },
+    })
+  </script>
 
-<!--HTML/CSS Snippet-->
-<!--
-    Snackbar, show/hide base on snackbar state
+  <!--HTML/CSS Snippet-->
+  <!--
+      Snackbar, show/hide base on snackbar state
 
-    Enter From: "puik-snackbar__transition--enter-from"
-    Leave To: "puik-snackbar__transition--leave-to"
+      Enter From: "puik-snackbar__transition--enter-from"
+      Leave To: "puik-snackbar__transition--leave-to"
 
-    Style bottom calculation:
-    If there is only one snack bar displayed the default value will be the offset (32px)
-    But if you want to stack the snackbar you may need to do the following computation
-    Offset (32px) + First Snackbar offsetHeight + Gap (16px)
-    Example: 32 + 52 + 16 = 100px
-  -->
-<div class="puik-snackbar puik-snackbar--default" style="bottom: 32px">
-  <span class="puik-snackbar__text">New category added.</span>
-  <button class="puik-snackbar__action">Cancel</button>
-  <button class="puik-snackbar__close-button">
-    close
-  </button>
-</div>
+      Style bottom calculation:
+      If there is only one snack bar displayed the default value will be the offset (32px)
+      But if you want to stack the snackbar you may need to do the following computation
+      Offset (32px) + First Snackbar offsetHeight + Gap (16px)
+      Example: 32 + 52 + 16 = 100px
+    -->
+  <div class="puik-snackbar puik-snackbar--default" style="bottom: 32px">
+    <span class="puik-snackbar__text">New category added.</span>
+    <button class="puik-snackbar__action">Cancel</button>
+    <button class="puik-snackbar__close-button">
+      close
+    </button>
+  </div>
 
-<div class="puik-snackbar puik-snackbar--danger" style="bottom: 100px">
-  <span class="puik-snackbar__text">Unable to update settings.</span>
-  <button class="puik-snackbar__action">Retry</button>
-  <button class="puik-snackbar__close-button">
-    close
-  </button>
-</div>
-      `,
-      language: 'html',
+  <div class="puik-snackbar puik-snackbar--danger" style="bottom: 100px">
+    <span class="puik-snackbar__text">Unable to update settings.</span>
+    <button class="puik-snackbar__action">Retry</button>
+    <button class="puik-snackbar__close-button">
+      close
+    </button>
+  </div>
+        `,
+        language: 'html',
+      },
     },
   },
 }
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index d7763171..3be1d3f0 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import PuikButton from '../../button/src/button.vue'
 import PuikTable from './../src/table.vue'
 import type { PuikTableHeader } from '../src/table'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { Meta, StoryFn, StoryObj, Args } from '@storybook/vue3'
 
 function generateData(length = 3) {
   return Array(length)
@@ -24,6 +24,7 @@ function generateData(length = 3) {
 export default {
   title: 'Components/Table',
   component: PuikTable,
+  tags: ['test', 'test2'],
   argTypes: {
     items: {
       control: 'none',
@@ -146,7 +147,7 @@ export default {
   },
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     PuikTable,
     PuikButton,
@@ -196,380 +197,385 @@ const Template: Story = (args: Args) => ({
   </puik-table>`,
 })
 
-export const Default = Template.bind({})
-Default.args = {}
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-const headers: PuikTableHeader[] = [
-  {
-    text: 'Nom',
-    value: 'lastname',
-    size: 'md',
-  },
-  {
-    text: 'Prénom',
-    value: 'firstname',
-    size: 'md',
-  },
-  {
-    text: 'Age',
-    value: 'age',
-    size: 'sm',
-    align: 'center',
-  },
-  {
-    text: 'Email',
-    value: 'email',
-    align: 'right',
-  },
-  {
-    value: 'actions',
-    size: 'sm',
-  },
-]
+export const Default: StoryObj = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'Nom',
+      value: 'lastname',
+      size: 'md',
+    },
+    {
+      text: 'Prénom',
+      value: 'firstname',
+      size: 'md',
+    },
+    {
+      text: 'Age',
+      value: 'age',
+      size: 'sm',
+      align: 'center',
+    },
+    {
+      text: 'Email',
+      value: 'email',
+      align: 'right',
+    },
+    {
+      value: 'actions',
+      size: 'sm',
+    },
+  ]
 
-<puik-table
-  v-model:selection="selection"
-  :headers="headers"
-  :items="items"
->
-  <template #item-actions="{ item }">
-    <puik-button
-      variant="text"
-      right-icon="delete"
-      aria-label="Delete item"
-    ></puik-button>
-  </template>
-</puik-table>
+  <puik-table
+    v-model:selection="selection"
+    :headers="headers"
+    :items="items"
+  >
+    <template #item-actions="{ item }">
+      <puik-button
+        variant="text"
+        right-icon="delete"
+        aria-label="Delete item"
+      ></puik-button>
+    </template>
+  </puik-table>
 
-<!--HTML/CSS Snippet-->
-<div class="puik-table__container">
-  <!--
-    Full width: "puik-table--full-width"
+  <!--HTML/CSS Snippet-->
+  <div class="puik-table__container">
+    <!--
+      Full width: "puik-table--full-width"
 
-    th :
-      size sm: "puik-table__head__row__item--sm"
-      size md: "puik-table__head__row__item--md"
-      size lg: "puik-table__head__row__item--lg"
-    td :
-      align left: "puik-table__body__row__item--left"
-      align center: "puik-table__body__row__item--center"
-      align right: "puik-table__body__row__item--right"
-  -->
-  <table class="puik-table">
-    <thead>
-      <tr>
-        <th class="puik-table__head__row__item--selection">
-          <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
-            <input id="puik-checkbox-6915" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-6915" class="puik-checkbox__label">Select all items</label>
-          </div>
-        </th>
-        <th>Nom</th>
-        <th>Prénom</th>
-        <th>Age</th>
-        <th>Email</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-7394" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-7394" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>Robel</td>
-        <td>Alberto</td>
-        <td>60</td>
-        <td>robel.alberto@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-3889" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-3889" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>Toy</td>
-        <td>Enos</td>
-        <td>55</td>
-        <td>toy.enos@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-282" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-282" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>Schumm</td>
-        <td>Hollie</td>
-        <td>21</td>
-        <td>schumm.hollie@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-7691" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-7691" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>DuBuque</td>
-        <td>Earnestine</td>
-        <td>86</td>
-        <td>dubuque.earnestine@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-2613" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-2613" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>Mann</td>
-        <td>Hadley</td>
-        <td>41</td>
-        <td>mann.hadley@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-      `,
-      language: 'html',
+      th :
+        size sm: "puik-table__head__row__item--sm"
+        size md: "puik-table__head__row__item--md"
+        size lg: "puik-table__head__row__item--lg"
+      td :
+        align left: "puik-table__body__row__item--left"
+        align center: "puik-table__body__row__item--center"
+        align right: "puik-table__body__row__item--right"
+    -->
+    <table class="puik-table">
+      <thead>
+        <tr>
+          <th class="puik-table__head__row__item--selection">
+            <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
+              <input id="puik-checkbox-6915" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-6915" class="puik-checkbox__label">Select all items</label>
+            </div>
+          </th>
+          <th>Nom</th>
+          <th>Prénom</th>
+          <th>Age</th>
+          <th>Email</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-7394" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-7394" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>Robel</td>
+          <td>Alberto</td>
+          <td>60</td>
+          <td>robel.alberto@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-3889" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-3889" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>Toy</td>
+          <td>Enos</td>
+          <td>55</td>
+          <td>toy.enos@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-282" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-282" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>Schumm</td>
+          <td>Hollie</td>
+          <td>21</td>
+          <td>schumm.hollie@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-7691" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-7691" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>DuBuque</td>
+          <td>Earnestine</td>
+          <td>86</td>
+          <td>dubuque.earnestine@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-2613" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-2613" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>Mann</td>
+          <td>Hadley</td>
+          <td>41</td>
+          <td>mann.hadley@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+        `,
+        language: 'html',
+      },
     },
   },
 }
 
-export const Selectable: Story = Template.bind({})
-Selectable.args = {
-  selectable: true,
-}
-Selectable.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-const headers: PuikTableHeader[] = [
-  {
-    text: 'Nom',
-    value: 'lastname',
-    size: 'md',
-  },
-  {
-    text: 'Prénom',
-    value: 'firstname',
-    size: 'md',
-  },
-  {
-    text: 'Age',
-    value: 'age',
-    size: 'sm',
-    align: 'center',
-  },
-  {
-    text: 'Email',
-    value: 'email',
-    align: 'right',
-  },
-  {
-    value: 'actions',
-    size: 'sm',
-  },
-]
+export const Selectable: StoryObj = {
+  render: Template,
+  args: {
+    selectable: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'Nom',
+      value: 'lastname',
+      size: 'md',
+    },
+    {
+      text: 'Prénom',
+      value: 'firstname',
+      size: 'md',
+    },
+    {
+      text: 'Age',
+      value: 'age',
+      size: 'sm',
+      align: 'center',
+    },
+    {
+      text: 'Email',
+      value: 'email',
+      align: 'right',
+    },
+    {
+      value: 'actions',
+      size: 'sm',
+    },
+  ]
 
-<puik-table
-  v-model:selection="selection"
-  :headers="headers"
-  :items="items"
->
-  <template #item-actions="{ item }">
-    <puik-button
-      variant="text"
-      right-icon="delete"
-      aria-label="Delete item"
-    ></puik-button>
-  </template>
-</puik-table>
+  <puik-table
+    v-model:selection="selection"
+    :headers="headers"
+    :items="items"
+  >
+    <template #item-actions="{ item }">
+      <puik-button
+        variant="text"
+        right-icon="delete"
+        aria-label="Delete item"
+      ></puik-button>
+    </template>
+  </puik-table>
 
-<!--HTML/CSS Snippet-->
-<div class="puik-table__container">
-  <table class="puik-table">
-    <thead>
-      <tr>
-        <th class="puik-table__head__row__item--selection puik-table__head__row__item--sm">
-          <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
-            <input id="puik-checkbox-3034" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-3034" class="puik-checkbox__label">Select all items</label>
-          </div>
-        </th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--md">Nom</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--md">Prénom</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--sm">Age</th>
-        <th class="puik-table__head__row__item">Email</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--sm"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-5700" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-5700" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>lastname0</td>
-        <td>firstname0</td>
-        <td>3</td>
-        <td>lastname0.firstname0@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-137" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-137" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>lastname1</td>
-        <td>firstname1</td>
-        <td>95</td>
-        <td>lastname1.firstname1@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--selection">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-872" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-872" class="puik-checkbox__label">Select item</label>
-          </div>
-        </td>
-        <td>lastname2</td>
-        <td>firstname2</td>
-        <td>64</td>
-        <td>lastname2.firstname2@email.com</td>
-        <td>
-          <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-            <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-      `,
-      language: 'html',
+  <!--HTML/CSS Snippet-->
+  <div class="puik-table__container">
+    <table class="puik-table">
+      <thead>
+        <tr>
+          <th class="puik-table__head__row__item--selection puik-table__head__row__item--sm">
+            <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
+              <input id="puik-checkbox-3034" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-3034" class="puik-checkbox__label">Select all items</label>
+            </div>
+          </th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--md">Nom</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--md">Prénom</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--sm">Age</th>
+          <th class="puik-table__head__row__item">Email</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--sm"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-5700" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-5700" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>lastname0</td>
+          <td>firstname0</td>
+          <td>3</td>
+          <td>lastname0.firstname0@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-137" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-137" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>lastname1</td>
+          <td>firstname1</td>
+          <td>95</td>
+          <td>lastname1.firstname1@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--selection">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-872" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-872" class="puik-checkbox__label">Select item</label>
+            </div>
+          </td>
+          <td>lastname2</td>
+          <td>firstname2</td>
+          <td>64</td>
+          <td>lastname2.firstname2@email.com</td>
+          <td>
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+        `,
+        language: 'html',
+      },
     },
   },
 }
+export const FullWidth: StoryObj = {
+  render: Template,
+  args: {
+    fullWidth: true,
+    parameters: {
+      docs: {
+        source: {
+          code: `
+    <!--VueJS Snippet-->
+    const headers: PuikTableHeader[] = [
+      {
+        text: 'Nom',
+        value: 'lastname',
+      },
+      {
+        text: 'Prénom',
+        value: 'firstname',
+      },
+      {
+        text: 'Age',
+        value: 'age',
+      },
+    ]
 
-export const FullWidth: Story = Template.bind({})
-FullWidth.args = {
-  fullWidth: true,
-}
-FullWidth.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-const headers: PuikTableHeader[] = [
-  {
-    text: 'Nom',
-    value: 'lastname',
-  },
-  {
-    text: 'Prénom',
-    value: 'firstname',
-  },
-  {
-    text: 'Age',
-    value: 'age',
-  },
-]
-
-<puik-table
-  v-model:selection="selection"
-  :headers="headers"
-  :items="items"
-  full-width
-></puik-table>
+    <puik-table
+      v-model:selection="selection"
+      :headers="headers"
+      :items="items"
+      full-width
+    ></puik-table>
 
-<!--HTML/CSS Snippet-->
-<div class="puik-table__container">
-  <table class="puik-table">
-    <thead>
-        <th class="puik-table__head__row__item puik-table__head__row__item--md">Nom</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--md">Prénom</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--sm">Age</th>
-        <th class="puik-table__head__row__item">Email</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>lastname0</td>
-        <td>firstname0</td>
-        <td>3</td>
-        <td>lastname0.firstname0@email.com</td>
-      </tr>
-      <tr>
-        <td>lastname1</td>
-        <td>firstname1</td>
-        <td>95</td>
-        <td>lastname1.firstname1@email.com</td>
-      </tr>
-      <tr>
-        <td>lastname2</td>
-        <td>firstname2</td>
-        <td>64</td>
-        <td>lastname2.firstname2@email.com</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-      `,
-      language: 'html',
+    <!--HTML/CSS Snippet-->
+    <div class="puik-table__container">
+      <table class="puik-table">
+        <thead>
+            <th class="puik-table__head__row__item puik-table__head__row__item--md">Nom</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--md">Prénom</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--sm">Age</th>
+            <th class="puik-table__head__row__item">Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>lastname0</td>
+            <td>firstname0</td>
+            <td>3</td>
+            <td>lastname0.firstname0@email.com</td>
+          </tr>
+          <tr>
+            <td>lastname1</td>
+            <td>firstname1</td>
+            <td>95</td>
+            <td>lastname1.firstname1@email.com</td>
+          </tr>
+          <tr>
+            <td>lastname2</td>
+            <td>firstname2</td>
+            <td>64</td>
+            <td>lastname2.firstname2@email.com</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+          `,
+          language: 'html',
+        },
+      },
     },
   },
 }
 
-const ColSizesTemplate: Story = (args: Args) => ({
+const ColSizesTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikTable,
   },
@@ -603,73 +609,76 @@ const ColSizesTemplate: Story = (args: Args) => ({
   template: `<puik-table v-bind="args" :headers="headers" :items="items"></puik-table>`,
 })
 
-export const ColSizes: Story = ColSizesTemplate.bind({})
-ColSizes.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-const headers: PuikTableHeader[] = [
-  {
-    text: 'sm',
-    value: 'sm',
-    size: 'sm',
-  },
-  {
-    text: 'md',
-    value: 'md',
-    size: 'md',
-  },
-  {
-    text: 'lg',
-    value: 'lg',
-    size: 'lg',
-  },
-  {
-    text: 'auto',
-    value: 'auto',
-  },
-]
+export const ColSizes: StoryObj = {
+  render: ColSizesTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'sm',
+      value: 'sm',
+      size: 'sm',
+    },
+    {
+      text: 'md',
+      value: 'md',
+      size: 'md',
+    },
+    {
+      text: 'lg',
+      value: 'lg',
+      size: 'lg',
+    },
+    {
+      text: 'auto',
+      value: 'auto',
+    },
+  ]
 
-<puik-table
-  :headers="headers"
-  :items="items"
-></puik-table>
+  <puik-table
+    :headers="headers"
+    :items="items"
+  ></puik-table>
 
-<!--HTML/CSS Snippet-->
-<div class="puik-table__container">
-  <table class="puik-table">
-    <thead>
-      <tr>
-        <th class="puik-table__head__row__item puik-table__head__row__item--sm">sm</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--md">md</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--lg">lg</th>
-        <th>auto</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>sm</td>
-        <td>md</td>
-        <td>lg</td>
-        <td>auto</td>
-      </tr>
-      <tr>
-        <td>sm</td>
-        <td>md</td>
-        <td>lg</td>
-        <td>auto</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-      `,
-      language: 'html',
+  <!--HTML/CSS Snippet-->
+  <div class="puik-table__container">
+    <table class="puik-table">
+      <thead>
+        <tr>
+          <th class="puik-table__head__row__item puik-table__head__row__item--sm">sm</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--md">md</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--lg">lg</th>
+          <th>auto</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>sm</td>
+          <td>md</td>
+          <td>lg</td>
+          <td>auto</td>
+        </tr>
+        <tr>
+          <td>sm</td>
+          <td>md</td>
+          <td>lg</td>
+          <td>auto</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+        `,
+        language: 'html',
+      },
     },
   },
 }
 
-const TextAlignTemplate: Story = (args: Args) => ({
+const TextAlignTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikTable,
   },
@@ -702,65 +711,68 @@ const TextAlignTemplate: Story = (args: Args) => ({
   template: `<puik-table v-bind="args" :headers="headers" :items="items"></puik-table>`,
 })
 
-export const TextAlign: Story = TextAlignTemplate.bind({})
-TextAlign.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-const headers: PuikTableHeader[] = [
-  {
-    text: 'left',
-    value: 'left',
-    align: 'left',
-    size: 'md',
-  },
-  {
-    text: 'center',
-    value: 'center',
-    align: 'center',
-    size: 'md',
-  },
-  {
-    text: 'right',
-    value: 'right',
-    align: 'right',
-    size: 'md',
-  },
-]
+export const TextAlign: StoryObj = {
+  render: TextAlignTemplate,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'left',
+      value: 'left',
+      align: 'left',
+      size: 'md',
+    },
+    {
+      text: 'center',
+      value: 'center',
+      align: 'center',
+      size: 'md',
+    },
+    {
+      text: 'right',
+      value: 'right',
+      align: 'right',
+      size: 'md',
+    },
+  ]
 
-<puik-table
-  :headers="headers"
-  :items="items"
-></puik-table>
+  <puik-table
+    :headers="headers"
+    :items="items"
+  ></puik-table>
 
-<!--HTML/CSS Snippet-->
-<div class="puik-table__container">
-  <table class="puik-table">
-    <thead>
-      <tr>
-        <th class="puik-table__head__row__item--left">left</th>
-        <th class="puik-table__head__row__item--center">center</th>
-        <th class="puik-table__head__row__item--right">lg</th>
-        <th>fluid</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="puik-table__body__row__item--left">left</td>
-        <td class="puik-table__body__row__item--center">center</td>
-        <td class="puik-table__body__row__item--right">right</td>
-      </tr>
-      <tr>
-        <td class="puik-table__body__row__item--left">left</td>
-        <td class="puik-table__body__row__item--center">center</td>
-        <td class="puik-table__body__row__item--right">right</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-      `,
-      language: 'html',
+  <!--HTML/CSS Snippet-->
+  <div class="puik-table__container">
+    <table class="puik-table">
+      <thead>
+        <tr>
+          <th class="puik-table__head__row__item--left">left</th>
+          <th class="puik-table__head__row__item--center">center</th>
+          <th class="puik-table__head__row__item--right">lg</th>
+          <th>fluid</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="puik-table__body__row__item--left">left</td>
+          <td class="puik-table__body__row__item--center">center</td>
+          <td class="puik-table__body__row__item--right">right</td>
+        </tr>
+        <tr>
+          <td class="puik-table__body__row__item--left">left</td>
+          <td class="puik-table__body__row__item--center">center</td>
+          <td class="puik-table__body__row__item--right">right</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+        `,
+        language: 'html',
+      },
     },
   },
 }
diff --git a/packages/components/textarea/stories/textarea.stories.ts b/packages/components/textarea/stories/textarea.stories.ts
index cf5eeb12..c235ccac 100644
--- a/packages/components/textarea/stories/textarea.stories.ts
+++ b/packages/components/textarea/stories/textarea.stories.ts
@@ -1,7 +1,6 @@
-import { ref } from 'vue'
 import PuikTextarea from './../src/textarea.vue'
 import PuikLabel from './../../label/src/label.vue'
-import type { Meta, Story, Args } from '@storybook/vue3'
+import type { StoryObj, Meta, StoryFn, Args } from '@storybook/vue3'
 
 export default {
   title: 'Components/Textarea',
@@ -11,26 +10,57 @@ export default {
       control: 'text',
       description: 'v-model for textarea value',
       table: {
+        type: {
+          summary: 'string',
+        },
         defaultValue: {
-          summary: '',
+          summary: 'undefined',
         },
       },
     },
     id: {
       description: 'Set the textarea id',
+      control: 'none',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
     },
     name: {
       control: 'text',
       description: 'Set the textarea name',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
     },
     placeholder: {
       control: 'text',
       description: 'Set the placeholder',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
     },
     autofocus: {
       control: 'boolean',
       description: 'Set the autofocus attribute',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
           summary: false,
         },
@@ -40,6 +70,9 @@ export default {
       control: 'boolean',
       description: 'Set the textarea as disabled',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
           summary: false,
         },
@@ -49,6 +82,9 @@ export default {
       control: 'boolean',
       description: 'Set the textarea as readonly',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
           summary: false,
         },
@@ -58,6 +94,9 @@ export default {
       control: 'boolean',
       description: 'Set the textarea as required',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
           summary: false,
         },
@@ -67,6 +106,9 @@ export default {
       control: 'boolean',
       description: 'Hide the hint slot',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
           summary: false,
         },
@@ -76,8 +118,11 @@ export default {
       control: 'boolean',
       description: 'Set the textarea height as the text increase to maxRows',
       table: {
+        type: {
+          summary: 'boolean',
+        },
         defaultValue: {
-          summary: false,
+          summary: true,
         },
       },
     },
@@ -85,8 +130,11 @@ export default {
       control: 'number',
       description: 'Set the max number of character',
       table: {
+        type: {
+          summary: 'number',
+        },
         defaultValue: {
-          summary: undefined,
+          summary: 'undefined',
         },
       },
     },
@@ -94,6 +142,9 @@ export default {
       control: 'number',
       description: 'Set the default height',
       table: {
+        type: {
+          summary: 'number',
+        },
         defaultValue: {
           summary: 2,
         },
@@ -103,6 +154,9 @@ export default {
       control: 'number',
       description: 'Set the maximum height',
       table: {
+        type: {
+          summary: 'number',
+        },
         defaultValue: {
           summary: 2,
         },
@@ -112,15 +166,33 @@ export default {
       control: 'text',
       description: 'Set an error message',
       table: {
+        type: {
+          summary: 'string',
+        },
         defaultValue: {
-          summary: '',
+          summary: 'undefined',
         },
       },
     },
   },
+  args: {
+    id: 'textarea-1',
+    name: '',
+    placeholder: '',
+    autofocus: false,
+    required: false,
+    hideHint: false,
+    readonly: false,
+    disabled: false,
+    autoGrow: true,
+    rows: 2,
+    maxRows: 2,
+    maxlength: undefined,
+    modelValue: '',
+  },
 } as Meta
 
-const Template: Story = (args: Args) => ({
+const Template: StoryFn = (args: Args) => ({
   components: {
     PuikTextarea,
     PuikLabel,
@@ -133,100 +205,70 @@ const Template: Story = (args: Args) => ({
   `,
 })
 
-export const Default = Template.bind({})
-Default.args = {
-  name: '',
-  placeholder: '',
-  autofocus: false,
-  required: false,
-  hideHint: false,
-  readonly: false,
-  disabled: false,
-  autoGrow: true,
-  rows: 2,
-  maxRows: 2,
-  maxlength: undefined,
-  modelValue: '',
-}
-Default.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-<puik-textarea id="textarea" v-model="args.modelValue"></puik-textarea>
-      
-<!--HTML/CSS Snippet-->
-</label>
-<div class="puik-textarea">
-  <div class="puik-textarea__character-count">
-    <p>50</p>
-  </div>
-  <div class="puik-textarea__wrapper">
-    <textarea id="textarea-1" class="puik-textarea__field" name="" placeholder="" style="height: 56px;"></textarea>
+export const Default: StoryObj = {
+  render: Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-textarea id="textarea" v-model="args.modelValue"></puik-textarea>
+
+  <!--HTML/CSS Snippet-->
+  </label>
+  <div class="puik-textarea">
+    <div class="puik-textarea__character-count">
+      <p>50</p>
+    </div>
+    <div class="puik-textarea__wrapper">
+      <textarea id="textarea-1" class="puik-textarea__field" name="" placeholder="" style="height: 56px;"></textarea>
+    </div>
   </div>
-</div>
-      `,
-      language: 'html',
+        `,
+        language: 'html',
+      },
     },
   },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  id: 'textarea-1',
-  name: '',
-  placeholder: '',
-  autofocus: false,
-  required: false,
-  hideHint: false,
-  readonly: false,
-  disabled: true,
-  autoGrow: true,
-  rows: 2,
-  maxRows: 2,
-  maxlength: undefined,
-}
-Disabled.parameters = {
-  docs: {
-    source: {
-      code: `
-<!--VueJS Snippet-->
-<puik-textarea id="textarea" disabled v-model="value"></puik-textarea>
-      
-<!--HTML/CSS Snippet-->
-<div class="puik-textarea">
-  <div class="puik-textarea__wrapper puik-textarea__wrapper--disabled">
-    <textarea id="textarea-1" class="puik-textarea__field" name="" placeholder="" disabled="" style="height: 56px;"></textarea>
+export const Disabled: StoryObj = {
+  render: Template,
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-textarea id="textarea" disabled v-model="value"></puik-textarea>
+
+  <!--HTML/CSS Snippet-->
+  <div class="puik-textarea">
+    <div class="puik-textarea__wrapper puik-textarea__wrapper--disabled">
+      <textarea id="textarea-1" class="puik-textarea__field" name="" placeholder="" disabled="" style="height: 56px;"></textarea>
+    </div>
   </div>
-</div>
-      `,
-      language: 'html',
+        `,
+        language: 'html',
+      },
     },
   },
 }
 
-export const Readonly = Template.bind({})
-Readonly.args = {
-  id: 'textarea-1',
-  name: '',
-  placeholder: '',
-  autofocus: false,
-  required: false,
-  hideHint: false,
-  readonly: true,
-  disabled: false,
-  autoGrow: true,
-  rows: 2,
-  maxRows: 2,
-  maxlength: undefined,
-}
-Readonly.parameters = {
-  docs: {
-    source: {
-      code: `
+export const Readonly: StoryObj = {
+  render: Template,
+  args: {
+    readonly: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <puik-textarea id="textarea" readonly v-model="value"></puik-textarea>
-      
+
 <!--HTML/CSS Snippet-->
 <div class="puik-textarea">
   <div class="puik-textarea__wrapper puik-textarea__wrapper--readonly">
@@ -234,34 +276,24 @@ Readonly.parameters = {
   </div>
 </div>
       `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
 
-export const Error = Template.bind({})
-Error.args = {
-  id: 'textarea-1',
-  name: '',
-  placeholder: '',
-  autofocus: false,
-  required: false,
-  hideHint: false,
-  readonly: false,
-  disabled: false,
-  autoGrow: true,
-  rows: 2,
-  maxRows: 2,
-  maxlength: undefined,
-  error: 'This is an error message',
-}
-Error.parameters = {
-  docs: {
-    source: {
-      code: `
+export const Error: StoryObj = {
+  render: Template,
+  args: {
+    error: 'This is an error message',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <puik-textarea id="textarea" error="This is an error message" v-model="value"></puik-textarea>
-      
+
 <!--HTML/CSS Snippet-->
 <div class="puik-textarea">
   <div class="puik-textarea__wrapper puik-textarea__wrapper--error">
@@ -275,35 +307,28 @@ Error.parameters = {
   </div>
 </div>
       `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
 
-export const CharacterCount = Template.bind({})
-CharacterCount.args = {
-  id: 'textarea-1',
-  name: '',
-  placeholder: '',
-  autofocus: false,
-  required: false,
-  hideHint: false,
-  readonly: false,
-  disabled: false,
-  autoGrow: true,
-  rows: 2,
-  maxRows: 2,
-  maxlength: 50,
-}
-CharacterCount.parameters = {
-  docs: {
-    inlineStories: false,
-    iframeHeight: 100,
-    source: {
-      code: `
+export const CharacterCount: StoryObj = {
+  render: Template,
+  args: {
+    maxlength: 50,
+  },
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 100,
+      },
+      source: {
+        code: `
 <!--VueJS Snippet-->
 <puik-textarea id="textarea" v-model="value" :maxlength="50"></puik-textarea>
-      
+
 <!--HTML/CSS Snippet-->
 <div class="puik-textarea">
   <div class="puik-textarea__character-count puik-textarea__character-count--error">
@@ -314,49 +339,46 @@ CharacterCount.parameters = {
   </div>
 </div>
       `,
-      language: 'html',
+        language: 'html',
+      },
     },
   },
 }
 
-export const AutoGrow = Template.bind({})
-AutoGrow.args = {
-  id: 'textarea-1',
-  name: '',
-  placeholder: '',
-  autofocus: false,
-  required: false,
-  hideHint: false,
-  readonly: false,
-  disabled: false,
-  autoGrow: true,
-  rows: 2,
-  maxRows: 5,
-}
-AutoGrow.parameters = {
-  docs: {
-    inlineStories: false,
-    iframeHeight: 200,
-    description: {
-      story:
-        'This component will autogrow when text overflow and stop when reaching `maxRows`',
-    },
-    source: {
-      code: `
-<!--VueJS Snippet-->
-<puik-textarea id="textarea" v-model="value" :maxRows="5"></puik-textarea>
-      
-<!--HTML/CSS Snippet-->
-<div class="puik-textarea">
-  <div class="puik-textarea__character-count puik-textarea__character-count--error">
-    <p>0/50</p>
-  </div>
-  <div class="puik-textarea__wrapper">
-    <textarea id="classic" class="puik-textarea__field" style="height: 76px;"></textarea>
+export const AutoGrow: StoryObj = {
+  render: Template,
+  args: {
+    autoGrow: true,
+    rows: 5,
+    maxRows: 10,
+  },
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 200,
+      },
+      description: {
+        story:
+          'This component will autogrow when text overflow and stop when reaching `maxRows`',
+      },
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-textarea id="textarea" v-model="value" :maxRows="5"></puik-textarea>
+
+  <!--HTML/CSS Snippet-->
+  <div class="puik-textarea">
+    <div class="puik-textarea__character-count puik-textarea__character-count--error">
+      <p>0/50</p>
+    </div>
+    <div class="puik-textarea__wrapper">
+      <textarea id="classic" class="puik-textarea__field" style="height: 76px;"></textarea>
+    </div>
   </div>
-</div>
-      `,
-      language: 'html',
+        `,
+        language: 'html',
+      },
     },
   },
 }