feat(VCST-4014): migrate storybook stories from storyfn to storyobj format

client-app/ui-kit/components/organisms/add-to-cart/vc-add-to-cart.stories.ts

@@ -1,23 +1,12 @@
 import { VcAddToCart } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-const SIZES = ["xs", "sm", "md"];
-const TYPES = ["text", "password", "number"];
+const SIZES = ["sm", "md"];
 
-export default {
+const meta: Meta<typeof VcAddToCart> = {
   title: "Components/Organisms/VcAddToCart",
   component: VcAddToCart,
   argTypes: {
-    /**
-     * Docs:
-     *  https://storybook.js.org/docs/vue/essentials/controls#annotation
-     *  https://storybook.js.org/docs/vue/api/argtypes#manual-specification
-     */
-    type: {
-      control: "radio",
-      options: TYPES,
-      table: { type: { summary: TYPES.join(" | ") } },
-    },
     size: {
       control: "radio",
       options: SIZES,
@@ -28,31 +17,60 @@ export default {
         },
       },
     },
-    min: { table: { type: { summary: "string|number" } } },
-    max: { table: { type: { summary: "string|number" } } },
-    step: { table: { type: { summary: "string|number" } } },
-    minlength: { table: { type: { summary: "string|number" } } },
-    maxlength: { table: { type: { summary: "string|number" } } },
-    modelValue: { table: { type: { summary: "string|number" } } },
+    modelValue: { table: { type: { summary: "number" } } },
+    loading: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readonly: { control: "boolean" },
+    hideButton: { control: "boolean" },
   },
   args: {
     readonly: false,
     disabled: false,
-    required: false,
-    noBorder: false,
-    center: false,
-    hidePasswordSwitcher: false,
-    error: false,
-    showEmptyDetails: false,
-    type: "text",
+    loading: false,
+    isActive: true,
+    hideButton: false,
     size: "md",
+    modelValue: 1,
   },
-} as Meta<typeof VcAddToCart>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcAddToCart v-bind="args" v-model="args.modelValue" />',
+  }),
+};
+
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-const Template: StoryFn = (args) => ({
-  components: { VcAddToCart },
-  setup: () => ({ args }),
-  template: '<VcAddToCart v-bind="args" v-model="args.modelValue" />',
-});
+export const Basic: StoryType = {};
+
+export const Loading: StoryType = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Disabled: StoryType = {
+  args: {
+    disabled: true,
+  },
+};
 
-export const Basic = Template.bind({});
+export const OutOfStock: StoryType = {
+  args: {
+    isInStock: false,
+    isAvailable: false,
+  },
+};
+
+export const WithError: StoryType = {
+  args: {
+    error: true,
+    message: "Error message",
+  },
+};
+
+export const HideButton: StoryType = {
+  args: {
+    hideButton: true,
+  },
+};

client-app/ui-kit/components/organisms/pagination/vc-pagination.stories.ts

@@ -1,80 +1,92 @@
 import { VcPagination } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-export default {
+const meta: Meta<typeof VcPagination> = {
   title: "Components/Organisms/VcPagination",
   component: VcPagination,
-} as Meta<typeof VcPagination>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcPagination v-bind="args" />',
+  }),
+};
 
-const Template: StoryFn = (args) => ({
-  components: { VcPagination },
-  setup: () => ({ args }),
-  template: '<VcPagination v-bind="args" />',
-});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const Page1 = Template.bind({});
-Page1.args = {
-  page: 1,
-  pages: 147,
+export const Page1: StoryType = {
+  args: {
+    page: 1,
+    pages: 147,
+  },
 };
 
-export const Page5 = Template.bind({});
-Page5.args = {
-  page: 5,
-  pages: 147,
+export const Page5: StoryType = {
+  args: {
+    page: 5,
+    pages: 147,
+  },
 };
 
-export const Page6 = Template.bind({});
-Page6.args = {
-  page: 6,
-  pages: 147,
+export const Page6: StoryType = {
+  args: {
+    page: 6,
+    pages: 147,
+  },
 };
 
-export const Page55 = Template.bind({});
-Page55.args = {
-  page: 55,
-  pages: 147,
+export const Page55: StoryType = {
+  args: {
+    page: 55,
+    pages: 147,
+  },
 };
 
-export const Page142 = Template.bind({});
-Page142.args = {
-  page: 142,
-  pages: 147,
+export const Page142: StoryType = {
+  args: {
+    page: 142,
+    pages: 147,
+  },
 };
 
-export const Page143 = Template.bind({});
-Page143.args = {
-  page: 143,
-  pages: 147,
+export const Page143: StoryType = {
+  args: {
+    page: 143,
+    pages: 147,
+  },
 };
 
-export const Page147 = Template.bind({});
-Page147.args = {
-  page: 147,
-  pages: 147,
+export const Page147: StoryType = {
+  args: {
+    page: 147,
+    pages: 147,
+  },
 };
 
-export const FewPages = Template.bind({});
-FewPages.args = {
-  page: 1,
-  pages: 9,
+export const FewPages: StoryType = {
+  args: {
+    page: 1,
+    pages: 9,
+  },
 };
 
-export const OnePage = Template.bind({});
-OnePage.args = {
-  page: 1,
-  pages: 1,
+export const OnePage: StoryType = {
+  args: {
+    page: 1,
+    pages: 1,
+  },
 };
 
-export const ThreePages = Template.bind({});
-ThreePages.args = {
-  page: 2,
-  pages: 3,
+export const ThreePages: StoryType = {
+  args: {
+    page: 2,
+    pages: 3,
+  },
 };
 
-export const Compact = Template.bind({});
-Compact.args = {
-  page: 1,
-  pages: 9,
-  compact: true,
+export const Compact: StoryType = {
+  args: {
+    page: 1,
+    pages: 9,
+    compact: true,
+  },
 };