@vc-shell/framework 1.0.181 → 1.0.182

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.stories.ts

@@ -1,40 +1,43 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcBreadcrumbs } from "./";
 
-const meta: Meta<typeof VcBreadcrumbs> = {
+export default {
   title: "molecules/VcBreadcrumbs",
   component: VcBreadcrumbs,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcBreadcrumbs>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcBreadcrumbs },
-    setup() {
-      return { args };
-    },
-    template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
-  }),
   args: {
     items: [
       {
         id: "0",
         title: "Back",
         icon: "fas fa-arrow-left",
-        // current: false,
       },
       {
         id: "1",
         title: "Electronics",
-        // current: false,
       },
       {
         id: "2",
         title: "Desktop",
-        // current: true,
       },
     ],
   },
-};
+  argTypes: {
+    items: {
+      control: "object",
+      table: {
+        type: {
+          summary:
+            "{ id: string, title: string, icon?: string, clickHandler?: (id: string) => void | Promise<void> }[]",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcBreadcrumbs>;
+
+export const Primary: StoryFn<typeof VcBreadcrumbs> = (args) => ({
+  components: { VcBreadcrumbs },
+  setup() {
+    return { args };
+  },
+  template: '<vc-breadcrumbs v-bind="args"></vc-breadcrumbs>',
+});

package/ui/components/molecules/vc-editor/vc-editor.stories.ts

@@ -1,21 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcEditor } from "./";
 
-const meta: Meta<typeof VcEditor> = {
+export default {
   title: "molecules/VcEditor",
   component: VcEditor,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcEditor>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcEditor },
-    setup() {
-      return { args };
+  args: {
+    assetsFolder: "folder",
+    placeholder: "Editor text placeholder",
+  },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string | number | Date",
+        },
+      },
     },
-    template: '<vc-editor v-bind="args" class="tw-h-[400px]"></vc-editor></>',
-  }),
-  args: {},
-};
+  },
+} satisfies Meta<typeof VcEditor>;
+
+export const Primary: StoryFn<typeof VcEditor> = (args) => ({
+  components: { VcEditor },
+  setup() {
+    return { args };
+  },
+  template: '<vc-editor v-bind="args"></vc-editor>',
+});

package/ui/components/molecules/vc-field/vc-field.stories.ts

@@ -0,0 +1,114 @@
+import { StoryFn, Meta } from "@storybook/vue3";
+import VcField from "./vc-field.vue";
+
+const TYPE = ["text", "date", "date-ago", "link", "email"];
+const ORIENTATION = ["vertical", "horizontal"];
+
+export default {
+  title: "molecules/VcField",
+  component: VcField,
+  args: {
+    label: "Field Label",
+    tooltip: "Field Tooltip",
+    type: "text",
+    modelValue: "Field Value",
+    orientation: "vertical",
+    aspectRatio: [1, 1],
+  },
+  argTypes: {
+    type: {
+      control: "radio",
+
+      options: TYPE,
+      table: {
+        type: {
+          summary: TYPE.join(" | "),
+        },
+      },
+    },
+    orientation: {
+      control: "radio",
+      options: ORIENTATION,
+      table: {
+        type: {
+          summary: ORIENTATION.join(" | "),
+        },
+      },
+    },
+    aspectRatio: {
+      control: "array",
+      table: {
+        type: {
+          summary: "number[]",
+        },
+      },
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+  components: { VcField },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-field v-bind="args" />
+  `,
+  args: {},
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  ...Template.args,
+  type: "text",
+  modelValue: "Field Value",
+};
+
+export const DateType = Template.bind({});
+DateType.args = {
+  ...Template.args,
+  type: "date",
+  modelValue: new Date(),
+};
+
+export const DateAgo = Template.bind({});
+DateAgo.args = {
+  ...Template.args,
+  type: "date-ago",
+  modelValue: new Date(),
+};
+
+export const Link = Template.bind({});
+Link.args = {
+  ...Template.args,
+  type: "link",
+  modelValue: "https://virtocommerce.com/",
+};
+
+export const LinkCopyable = Template.bind({});
+LinkCopyable.args = {
+  ...Template.args,
+  type: "link",
+  modelValue: "https://virtocommerce.com/",
+  copyable: true,
+};
+
+export const Email = Template.bind({});
+Email.args = {
+  ...Template.args,
+  type: "email",
+  modelValue: "email@virtocommerce.com",
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  ...Template.args,
+  orientation: "horizontal",
+};
+
+export const HorizontalAspectRatio = Template.bind({});
+HorizontalAspectRatio.args = {
+  ...Template.args,
+  orientation: "horizontal",
+  aspectRatio: [1, 2],
+};

package/ui/components/molecules/vc-file-upload/vc-file-upload.stories.ts

@@ -1,21 +1,39 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcFileUpload } from "./";
 
-const meta: Meta<typeof VcFileUpload> = {
+const VARIANT = ["gallery", "file-upload"];
+
+export default {
   title: "molecules/VcFileUpload",
   component: VcFileUpload,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcFileUpload>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcFileUpload },
-    setup() {
-      return { args };
+  args: {
+    variant: "gallery",
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(" | "),
+        },
+      },
     },
-    template: '<vc-file-upload v-bind="args"></vc-file-upload>',
-  }),
-  args: {},
-};
+    rules: {
+      control: "object",
+      table: {
+        type: {
+          summary: "keyof IValidationRules | IValidationRules",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcFileUpload>;
+
+export const Primary: StoryFn<typeof VcFileUpload> = (args) => ({
+  components: { VcFileUpload },
+  setup() {
+    return { args };
+  },
+  template: '<vc-file-upload v-bind="args"></vc-file-upload>',
+});

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -19,7 +19,7 @@
     >
       <VcIcon
         class="tw-text-[#c8dbea]"
-        icon="fas fa-cloud-upload-alt"
+        :icon="icon"
         size="xxl"
       ></VcIcon>
 
@@ -65,6 +65,7 @@ export interface Props {
   multiple?: boolean;
   rules?: keyof IValidationRules | IValidationRules;
   name?: string;
+  icon?: string;
 }
 
 export interface Emits {
@@ -75,6 +76,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: "gallery",
   accept: ".jpg, .png, .jpeg",
   name: "Gallery",
+  icon: "fas fa-cloud-upload-alt",
 });
 
 const emit = defineEmits<Emits>();

package/ui/components/molecules/vc-form/vc-form.stories.ts

@@ -1,21 +1,25 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcForm } from "./";
+import { VcInput } from "../vc-input";
 
-const meta: Meta<typeof VcForm> = {
+export default {
   title: "molecules/VcForm",
   component: VcForm,
-};
+} satisfies Meta<typeof VcForm>;
 
-export default meta;
-type Story = StoryObj<typeof VcForm>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcForm },
-    setup() {
-      return { args };
-    },
-    template: '<vc-textarea v-bind="args"></vc-textarea>',
-  }),
-  args: {},
-};
+export const Primary: StoryFn<typeof VcForm> = (args) => ({
+  components: { VcForm, VcInput },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-form v-bind="args">
+      <template #default>
+        <div class="tw-flex tw-flex-col tw-gap-4">
+          <vc-input label="First Name" />
+          <vc-input label="Last Name" />
+          <vc-input label="Email" />
+        </div>
+      </template>
+    </vc-form>`,
+});

package/ui/components/molecules/vc-input/vc-input.stories.ts

@@ -1,21 +1,151 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcInput } from "./";
+import { VcButton } from "../..";
 
-const meta: Meta<typeof VcInput> = {
+export default {
   title: "molecules/VcInput",
   component: VcInput,
+  args: {
+    label: "This is an input",
+    placeholder: "Placeholder",
+  },
+} satisfies Meta<typeof VcInput>;
+
+export const Template: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput },
+  setup() {
+    return { args };
+  },
+  template: '<vc-input v-bind="args"></vc-input>',
+});
+
+export const Error: StoryFn<typeof VcInput> = Template.bind({});
+Error.args = {
+  errorMessage: "This is an error",
+  error: true,
+};
+
+export const Disabled: StoryFn<typeof VcInput> = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Hint: StoryFn<typeof VcInput> = Template.bind({});
+Hint.args = {
+  hint: "This is a hint",
+};
+
+export const Tooltip: StoryFn<typeof VcInput> = Template.bind({});
+Tooltip.args = {
+  tooltip: "This is a tooltip",
+};
+
+export const Required: StoryFn<typeof VcInput> = Template.bind({});
+Required.args = {
+  required: true,
 };
 
-export default meta;
-type Story = StoryObj<typeof VcInput>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcInput },
-    setup() {
-      return { args };
-    },
-    template: '<vc-input v-bind="args"></vc-input>',
-  }),
-  args: {},
+export const Prefix: StoryFn<typeof VcInput> = Template.bind({});
+Prefix.args = {
+  prefix: "Prefix",
 };
+
+export const Suffix: StoryFn<typeof VcInput> = Template.bind({});
+Suffix.args = {
+  suffix: "Suffix",
+};
+
+export const CustomInputControlSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args">
+    <template #control="{ placeholder }">
+    <input
+      type="range"
+      :disabled="disabled"
+      :placeholder="placeholder"
+    />
+    </template>
+  </vc-input>`,
+});
+
+export const CustomPrependSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput, VcButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args">
+    <template #prepend>
+      <vc-button>Action</vc-button>
+    </template>
+  </vc-input>`,
+});
+
+export const CustomAppendSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput, VcButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args">
+    <template #append>
+      <vc-button>Action</vc-button>
+    </template>
+  </vc-input>`,
+});
+
+export const CustomPrependInnerSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput, VcButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args">
+    <template #prepend-inner>
+      <vc-button>Action</vc-button>
+    </template>
+  </vc-input>`,
+});
+
+export const CustomAppendInnerSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput, VcButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args">
+    <template #append-inner>
+      <vc-button>Action</vc-button>
+    </template>
+  </vc-input>`,
+});
+
+export const CustomErrorSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args" error>
+    <template #error>
+      <p class="tw-font-bold tw-text-green-700">This is an custom error message</p>
+    </template>
+  </vc-input>`,
+});
+
+export const CustomHintSlot: StoryFn<typeof VcInput> = (args) => ({
+  components: { VcInput, VcButton },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-input v-bind="args">
+    <template #hint>
+      <VcButton text>Custom hint action button</VcButton>
+    </template>
+  </vc-input>`,
+});

package/ui/components/molecules/vc-input-currency/vc-input-currency.stories.ts

@@ -1,26 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcInputCurrency } from "./";
 import { ref } from "vue";
 
-const meta: Meta<typeof VcInputCurrency> = {
+export default {
   title: "molecules/VcInputCurrency",
   component: VcInputCurrency,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcInputCurrency>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    // components: { VcInputCurrency, VcSelect, VcInput },
-    setup() {
-      const price = ref(0);
-      const option = ref("USD");
-      return { args, price, option };
-    },
-    template:
-      '<vc-input-currency v-bind="args" v-model:modelValue.number="price" v-model:option="option"></vc-input-currency>',
-  }),
   args: {
     label: "Label",
     placeholder: "Placeholder",
@@ -36,5 +20,64 @@ export const Primary: Story = {
     ],
     optionLabel: "title",
     optionValue: "value",
+    modelValue: 1000000,
+  },
+  argTypes: {
+    optionLabel: {
+      control: "text",
+    },
+    optionValue: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcInputCurrency>;
+
+export const Template: StoryFn<typeof VcInputCurrency> = (args) => ({
+  components: { VcInputCurrency },
+  setup() {
+    const option = ref("USD");
+    return { args, option };
   },
+  template: '<vc-input-currency v-bind="args" v-model:option="option"></vc-input-currency>',
+});
+
+export const Hint: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Hint.args = {
+  hint: "This is a hint",
+};
+
+export const Tooltip: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Tooltip.args = {
+  tooltip: "This is a tooltip",
+};
+
+export const Error: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Error.args = {
+  errorMessage: "This is an error",
+  error: true,
+};
+
+export const Disabled: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Required: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const Prefix: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Prefix.args = {
+  prefix: "$",
+};
+
+export const Suffix: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Suffix.args = {
+  suffix: "USD",
+};
+
+export const Loading: StoryFn<typeof VcInputCurrency> = Template.bind({});
+Loading.args = {
+  loading: true,
 };