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

client-app/ui-kit/components/molecules/file/vc-file.stories.ts

@@ -1,106 +1,119 @@
 import { VcFile } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-export default {
+const meta: Meta<typeof VcFile> = {
   title: "Components/Molecules/VcFile",
   component: VcFile,
-} as Meta<typeof VcFile>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcFile v-bind="args" />',
+  }),
+};
 
-const Template: StoryFn = (args) => ({
-  components: { VcFile },
-  setup: () => ({ args }),
-  template: '<VcFile v-bind="args" />',
-});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const Basic = Template.bind({});
-Basic.args = {
-  file: {
-    name: "Image.png",
-    size: 111122233,
-    contentType: "image/png",
-    status: "new",
-    file: new File([], "Image.png"),
+export const Basic: StoryType = {
+  args: {
+    file: {
+      name: "Image.png",
+      size: 111122233,
+      contentType: "image/png",
+      status: "new",
+      file: new File([], "Image.png"),
+      progress: 0,
+    },
   },
 };
 
-export const Uploading = Template.bind({});
-Uploading.args = {
-  file: {
-    name: "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
-    size: 11122233,
-    contentType: "application/pdf",
-    progress: 45,
-    status: "uploading",
-    file: new File(
-      [],
-      "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
-    ),
+export const Uploading: StoryType = {
+  args: {
+    file: {
+      name: "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
+      size: 11122233,
+      contentType: "application/pdf",
+      progress: 45,
+      status: "uploading",
+      file: new File(
+        [],
+        "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
+      ),
+    },
   },
 };
 
-export const Uploaded = Template.bind({});
-Uploaded.args = {
-  file: {
-    name: "Image.png",
-    size: 111122233,
-    contentType: "image/png",
-    status: "uploaded",
-    progress: 100,
-    url: "https://via.placeholder.com/150",
+export const Uploaded: StoryType = {
+  args: {
+    file: {
+      name: "Image.png",
+      size: 111122233,
+      contentType: "image/png",
+      status: "uploaded",
+      progress: 100,
+      url: "https://via.placeholder.com/150",
+      id: "uploaded-file-id",
+      file: new File([], "Image.png"),
+    },
   },
 };
 
-export const Failed = Template.bind({});
-Failed.args = {
-  file: {
-    name: "Archive.zip",
-    size: 16155533,
-    contentType: "application/zip",
-    status: "error",
-    errorMessage:
-      "Error message long long long long long error message stringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstring",
-    file: new File([], "Archive.zip"),
+export const Failed: StoryType = {
+  args: {
+    file: {
+      name: "Archive.zip",
+      size: 16155533,
+      contentType: "application/zip",
+      status: "error",
+      errorMessage:
+        "Error message long long long long long error message stringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstringstring",
+      file: new File([], "Archive.zip"),
+    },
   },
 };
 
-export const Attached = Template.bind({});
-Attached.args = {
-  file: {
-    name: "Image.png",
-    size: 111122233,
-    contentType: "image/png",
-    status: "attached",
-    url: "https://via.placeholder.com/150",
+export const Attached: StoryType = {
+  args: {
+    file: {
+      name: "Image.png",
+      size: 111122233,
+      contentType: "image/png",
+      status: "attached",
+      url: "https://via.placeholder.com/150",
+    },
   },
 };
 
-export const Removable = Template.bind({});
-Removable.args = {
-  file: {
-    name: "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
-    size: 111122233,
-    contentType: "image/png",
-    status: "new",
-    file: new File(
-      [],
-      "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
-    ),
+export const Removable: StoryType = {
+  args: {
+    file: {
+      name: "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
+      size: 111122233,
+      contentType: "image/png",
+      status: "new",
+      file: new File(
+        [],
+        "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
+      ),
+      progress: 0,
+    },
+    removable: true,
   },
-  removable: true,
 };
 
-export const RemovableReloadable = Template.bind({});
-RemovableReloadable.args = {
-  file: {
-    name: "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
-    size: 111122233,
-    contentType: "image/png",
-    status: "new",
-    file: new File(
-      [],
-      "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
-    ),
+export const RemovableReloadable: StoryType = {
+  args: {
+    file: {
+      name: "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
+      size: 111122233,
+      contentType: "image/png",
+      status: "new",
+      file: new File(
+        [],
+        "FileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImageFileWithVeryLongNameImage.png",
+      ),
+      progress: 0,
+    },
+    removable: true,
+    reloadable: true,
   },
-  removable: true,
-  reloadable: true,
 };

client-app/ui-kit/components/molecules/input/vc-input.stories.ts

@@ -1,12 +1,13 @@
 import { VcInput, VcButton } 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"];
 
-export default {
+const meta: Meta = {
   title: "Components/Molecules/VcInput",
-  component: VcInput,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: VcInput as any,
   argTypes: {
     /**
      * Docs:
@@ -47,72 +48,81 @@ export default {
     type: "text",
     size: "md",
   },
-} as Meta<typeof VcInput>;
-
-const Template: StoryFn = (args) => ({
-  components: { VcInput },
-  setup: () => ({ args }),
-  template: '<VcInput v-bind="args" v-model="args.modelValue" />',
-});
-
-const withButtonTemplate: StoryFn = (args) => ({
-  components: { VcInput, VcButton },
-  setup: () => ({ args }),
-  template: `<VcInput v-bind="args" v-model="args.modelValue">
-    <template #append>
-      <VcButton truncate>Add to cart</VcButton>
-    </template>
-  </VcInput>`,
-});
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcInput v-bind="args" v-model="args.modelValue" />',
+  }),
+};
 
-export const Basic = Template.bind({});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const Common = Template.bind({});
-Common.args = {
+const commonArgs = {
   label: "Label",
   placeholder: "Placeholder",
   message: "Hint message",
 };
 
-export const Required = Template.bind({});
-Required.args = {
-  ...Common.args,
-  required: true,
+export const Basic: StoryType = {};
+
+export const Common: StoryType = {
+  args: commonArgs,
 };
 
-export const ErrorState = Template.bind({});
-ErrorState.args = {
-  ...Required.args,
-  error: true,
-  message: "Error message",
+export const Required: StoryType = {
+  args: {
+    ...commonArgs,
+    required: true,
+  },
+};
+
+export const ErrorState: StoryType = {
+  args: {
+    ...commonArgs,
+    required: true,
+    error: true,
+    message: "Error message",
+  },
 };
 
-export const TypePassword = Template.bind({});
-TypePassword.args = {
-  ...Common.args,
-  autocomplete: "password",
-  type: "password",
+export const TypePassword: StoryType = {
+  args: {
+    ...commonArgs,
+    autocomplete: "password",
+    type: "password",
+  },
 };
 
-export const Clearable = Template.bind({});
-Clearable.args = {
-  ...Common.args,
-  clearable: true,
+export const Clearable: StoryType = {
+  args: {
+    ...commonArgs,
+    clearable: true,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Common.args,
-  disabled: true,
+export const Disabled: StoryType = {
+  args: {
+    ...commonArgs,
+    disabled: true,
+  },
 };
 
-export const Center = Template.bind({});
-Center.args = {
-  ...Common.args,
-  center: true,
+export const Center: StoryType = {
+  args: {
+    ...commonArgs,
+    center: true,
+  },
 };
 
-export const WithButton = withButtonTemplate.bind({});
-WithButton.args = {
-  ...Common.args,
+export const WithButton: StoryType = {
+  args: commonArgs,
+  render: (args) => ({
+    components: { VcInput, VcButton },
+    setup: () => ({ args }),
+    template: `<VcInput v-bind="args" v-model="args.modelValue">
+      <template #append>
+        <VcButton truncate>Add to cart</VcButton>
+      </template>
+    </VcInput>`,
+  }),
 };

client-app/ui-kit/components/molecules/line-item-price/vc-line-item-price.stories.ts

@@ -1,20 +1,22 @@
 import { getMoney } from "@/ui-kit/mocks";
 import { VcLineItemPrice } from "..";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-export default {
+const meta: Meta<typeof VcLineItemPrice> = {
   title: "Components/Molecules/VcLineItemPrice",
   component: VcLineItemPrice,
-} as Meta<typeof VcLineItemPrice>;
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: '<VcLineItemPrice v-bind="args" />',
+  }),
+};
 
-const Template: StoryFn = (args) => ({
-  components: { VcLineItemPrice },
-  setup: () => ({ args }),
-  template: '<VcLineItemPrice v-bind="args" />',
-});
+export default meta;
+type StoryType = StoryObj<typeof meta>;
 
-export const Basic = Template.bind({});
-Basic.args = {
-  listPrice: getMoney(2000),
-  actualPrice: getMoney(1000),
+export const Basic: StoryType = {
+  args: {
+    listPrice: getMoney(2000),
+    actualPrice: getMoney(1000),
+  },
 };