@vc-shell/framework 1.0.181 → 1.0.182

package/ui/components/atoms/vc-hint/vc-hint.stories.ts

@@ -1,21 +1,23 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcHint } from "./";
 
-const meta: Meta<typeof VcHint> = {
+export default {
   title: "atoms/VcHint",
   component: VcHint,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcHint>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcHint },
-    setup() {
-      return { args };
+  args: {
+    default: "This is a hint",
+  },
+  argTypes: {
+    default: {
+      control: "text",
     },
-    template: '<vc-hint v-bind="args">This is a hint</vc-hint>',
-  }),
-  args: {},
-};
+  },
+} satisfies Meta<typeof VcHint>;
+
+export const Primary: StoryFn<typeof VcHint> = (args) => ({
+  components: { VcHint },
+  setup() {
+    return { args };
+  },
+  template: '<vc-hint v-bind="args">{{args.default}}</vc-hint>',
+});

package/ui/components/atoms/vc-icon/vc-icon.stories.ts

@@ -1,24 +1,65 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcIcon } from "./";
 
-const meta: Meta<typeof VcIcon> = {
+const SIZE = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+const VARIANT = ["warning", "danger", "success"];
+
+export default {
   title: "atoms/VcIcon",
   component: VcIcon,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcIcon>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcIcon },
-    setup() {
-      return { args };
-    },
-    template: '<vc-icon v-bind="args"></vc-icon>',
-  }),
   args: {
     icon: "fas fa-star",
     size: "m",
   },
-};
+  argTypes: {
+    icon: { control: "text" },
+    size: {
+      control: "radio",
+      options: SIZE,
+      table: {
+        type: {
+          summary: SIZE.join(" | "),
+        },
+      },
+    },
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcIcon>;
+
+export const Primary: StoryFn<typeof VcIcon> = (args) => ({
+  components: { VcIcon },
+  setup() {
+    return { args };
+  },
+  template: '<vc-icon v-bind="args"></vc-icon>',
+});
+
+export const AllStates: StoryFn<typeof VcIcon> = (args) => ({
+  components: {
+    VcIcon,
+  },
+  setup() {
+    return { args, variants: VARIANT, sizes: SIZE };
+  },
+  template: `
+    <div>
+      <div v-for="variant in variants" :key="variant">
+        <h2 class="tw-font-bold">Color: {{variant}}</h2>
+        <div class="tw-space-x-4 tw-flex tw-flex-row">
+          <div v-for="size in sizes" :key="size" >
+            <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
+            <vc-icon v-bind="{...args, variant, size}"></vc-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});

package/ui/components/atoms/vc-image/vc-image.stories.ts

@@ -1,37 +1,85 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcImage } from "./";
 
-const meta: Meta<typeof VcImage> = {
+const ASPECT = ["1x1", "3x2", "4x3", "16x9"];
+const SIZE = ["auto", "xs", "s", "m", "l", "xl", "xxl"];
+const BACKGROUND = ["cover", "contain", "auto"];
+
+export default {
   title: "atoms/VcImage",
   component: VcImage,
+  args: {
+    aspect: "1x1",
+    rounded: false,
+    clickable: false,
+    src: "https://picsum.photos/600",
+    size: "auto",
+    background: "cover",
+  },
   argTypes: {
     aspect: {
-      options: ["1x1", "3x2", "4x3", "16x9"],
-      control: { type: "radio" },
+      control: "radio",
+      options: ASPECT,
+      table: {
+        type: {
+          summary: ASPECT.join(" | "),
+        },
+      },
     },
     size: {
-      options: ["auto", "xs", "s", "m", "l", "xl"],
-      control: { type: "radio" },
+      options: SIZE,
+      control: "radio",
+      table: {
+        type: {
+          summary: SIZE.join(" | "),
+        },
+      },
+    },
+    background: {
+      options: BACKGROUND,
+      control: "radio",
+      table: {
+        type: {
+          summary: BACKGROUND.join(" | "),
+        },
+      },
     },
   },
-};
+} satisfies Meta<typeof VcImage>;
 
-export default meta;
-type Story = StoryObj<typeof VcImage>;
+export const Primary: StoryFn<typeof VcImage> = (args) => ({
+  components: { VcImage },
+  setup() {
+    return { args };
+  },
+  template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
+});
 
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcImage },
-    setup() {
-      return { args };
-    },
-    template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
-  }),
-  args: {
-    aspect: "1x1",
-    rounded: false,
-    clickable: false,
-    src: "https://placekitten.com/800/600",
-    size: "auto",
+export const AllStates: StoryFn<typeof VcImage> = (args) => ({
+  components: { VcImage },
+  setup() {
+    return { args, aspects: ASPECT, sizes: SIZE, backgrounds: BACKGROUND };
   },
-};
+  template: `
+      <div>
+        <div v-for="aspect in aspects" :key="aspect">
+          <h2 class="tw-font-bold">Aspect: {{aspect}}</h2>
+          <div class="tw-space-x-4 tw-flex tw-flex-row">
+            <div v-for="size in sizes" :key="size" >
+              <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
+              <vc-image v-bind="{...args, aspect, size}"></vc-image>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h2 class="tw-font-bold">Bordered and Rounded</h2>
+          <div class="tw-space-x-4 tw-flex tw-flex-row">
+            <div v-for="size in sizes" :key="size" >
+              <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
+              <vc-image v-bind="{...args, aspect: '1x1', size, bordered: true, rounded: true}"></vc-image>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+});

package/ui/components/atoms/vc-label/vc-label.stories.ts

@@ -1,21 +1,31 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcLabel } from "./";
 
-const meta: Meta<typeof VcLabel> = {
+export default {
   title: "atoms/VcLabel",
   component: VcLabel,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcLabel>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcLabel },
-    setup() {
-      return { args };
+  args: {
+    default: "This is a label",
+    tooltip: "This is a tooltip",
+  },
+  argTypes: {
+    default: {
+      control: "text",
     },
-    template: '<vc-label v-bind="args">This is a label</vc-label>',
-  }),
-  args: {},
-};
+    tooltip: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcLabel>;
+
+export const Primary: StoryFn<typeof VcLabel> = (args) => ({
+  components: { VcLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-label v-bind="args">
+    {{args.default}}
+    <template #tooltip>{{args.tooltip}}</template>
+  </vc-label>`,
+});

package/ui/components/atoms/vc-link/vc-link.stories.ts

@@ -1,24 +1,37 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcLink } from "./";
 
-const meta: Meta<typeof VcLink> = {
+export default {
   title: "atoms/VcLink",
   component: VcLink,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcLink>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcLink },
-    setup() {
-      return { args };
-    },
-    template: '<vc-link v-bind="args">This is a link</vc-link>',
-  }),
   args: {
     active: false,
     disabled: false,
+    default: "This is a link",
+  },
+  argTypes: {
+    default: {
+      control: "text",
+      table: {
+        type: {
+          summary: "text",
+        },
+      },
+    },
+    onClick: {
+      table: {
+        type: {
+          summary: "function",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcLink>;
+
+export const Primary: StoryFn<typeof VcLink> = (args) => ({
+  components: { VcLink },
+  setup() {
+    return { args };
   },
-};
+  template: '<vc-link v-bind="args">{{args.default}}</vc-link>',
+});

package/ui/components/atoms/vc-loading/vc-loading.stories.ts

@@ -1,23 +1,18 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcLoading } from "./";
 
-const meta: Meta<typeof VcLoading> = {
+export default {
   title: "atoms/VcLoading",
   component: VcLoading,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcLoading>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcLoading },
-    setup() {
-      return { args };
-    },
-    template: '<vc-loading v-bind="args"></vc-loading>',
-  }),
   args: {
     active: true,
   },
-};
+} satisfies Meta<typeof VcLoading>;
+
+export const Primary: StoryFn<typeof VcLoading> = (args) => ({
+  components: { VcLoading },
+  setup() {
+    return { args };
+  },
+  template: `<div class="tw-h-20"><vc-loading v-bind="args"></vc-loading></div>`,
+});

package/ui/components/atoms/vc-progress/vc-progress.stories.ts

@@ -1,24 +1,30 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcProgress } from "./";
 
-const meta: Meta<typeof VcProgress> = {
+export default {
   title: "atoms/VcProgress",
   component: VcProgress,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcProgress>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcProgress },
-    setup() {
-      return { args };
-    },
-    template: '<vc-progress v-bind="args"></vc-progress>',
-  }),
   args: {
     value: 30,
     variant: "striped",
   },
-};
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["default", "striped"],
+      table: {
+        type: {
+          summary: ["default", "striped"],
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcProgress>;
+
+export const Primary: StoryFn<typeof VcProgress> = (args) => ({
+  components: { VcProgress },
+  setup() {
+    return { args };
+  },
+  template: '<vc-progress v-bind="args"></vc-progress>',
+});

package/ui/components/atoms/vc-row/vc-row.stories.ts

@@ -1,23 +1,20 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcRow } from "./";
 import { VcImage } from "./../../";
 
-const meta: Meta<typeof VcRow> = {
+export default {
   title: "atoms/VcRow",
   component: VcRow,
-};
+} satisfies Meta<typeof VcRow>;
 
-export default meta;
-type Story = StoryObj<typeof VcRow>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcRow, VcImage },
-    setup() {
-      return { args };
-    },
-    template:
-      '<vc-row v-bind="args"><vc-image src="https://placekitten.com/800/600" size="xl" /><vc-image src="https://placekitten.com/800/600" size="xl" /><vc-image src="https://placekitten.com/800/600" size="xl" /></vc-row>',
-  }),
-  args: {},
-};
+export const Primary: StoryFn<typeof VcRow> = (args) => ({
+  components: { VcRow, VcImage },
+  setup() {
+    return { args };
+  },
+  template: `<vc-row v-bind="args">
+      <vc-image src="https://picsum.photos/200" size="xl" />
+      <vc-image src="https://picsum.photos/200" size="xl" />
+      <vc-image src="https://picsum.photos/200" size="xl" />
+    </vc-row>`,
+});

package/ui/components/atoms/vc-status/vc-status.stories.ts

@@ -1,23 +1,85 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcStatus } from "./";
+import { VcIcon } from "../vc-icon";
 
-const meta: Meta<typeof VcStatus> = {
+const VARIANT = ["info", "warning", "danger", "success", "light-danger"];
+
+export default {
   title: "atoms/VcStatus",
   component: VcStatus,
-};
+  args: {
+    variant: "info",
+    outline: true,
+    extend: false,
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT,
+        },
+      },
+    },
+    outline: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    extend: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcStatus>;
 
-export default meta;
-type Story = StoryObj<typeof VcStatus>;
+export const Primary: StoryFn<typeof VcStatus> = (args) => ({
+  components: { VcStatus },
+  setup() {
+    return { args };
+  },
+  template: '<vc-status v-bind="args">Status text</vc-status>',
+});
 
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcStatus },
-    setup() {
-      return { args };
-    },
-    template: '<vc-status v-bind="args">Status text</vc-status>',
-  }),
-  args: {
-    variant: "danger",
+export const Extended: StoryFn<typeof VcStatus> = (args) => ({
+  components: { VcStatus, VcIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-status v-bind="args" extend variant="danger" >
+    <div class="tw-flex tw-flex-row tw-items-center">
+      <VcIcon icon="fas fa-warehouse" size="xl" variant="danger" class="tw-mr-3" />
+      <div>
+        <h3 class="tw-font-bold">Status</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. </p>
+      </div>
+    </div>
+  </vc-status>`,
+});
+
+export const AllStates: StoryFn<typeof VcStatus> = (args) => ({
+  components: { VcStatus },
+  setup() {
+    return { args, variants: VARIANT };
   },
-};
+  template: `
+    <div class="tw-space-y-4">
+      <div v-for="variant in variants" :key="variant">
+        <h2 class="tw-font-bold">Color: {{variant}}</h2>
+        <div class="tw-space-x-4 tw-flex tw-flex-row">
+          <vc-status v-bind="{...args, variant}">Outline {{variant}}</vc-status>
+          <vc-status v-bind="{...args, variant}" :outline="false">{{variant}}</vc-status>
+        </div>
+      </div>
+    </div>
+  `,
+});

package/ui/components/atoms/vc-switch/vc-switch.stories.ts

@@ -1,22 +1,24 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcSwitch } from "./";
 import { VcHint } from "./../../";
 
-const meta: Meta<typeof VcSwitch> = {
+export default {
   title: "atoms/VcSwitch",
   component: VcSwitch,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcSwitch>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcSwitch, VcHint },
-    setup() {
-      return { args };
+  args: {
+    label: "This is a switch",
+  },
+  argTypes: {
+    tooltip: {
+      control: "text",
     },
-    template: '<vc-switch v-bind="args"></vc-switch>',
-  }),
-  args: {},
-};
+  },
+} satisfies Meta<typeof VcSwitch>;
+
+export const Primary: StoryFn<typeof VcSwitch> = (args) => ({
+  components: { VcSwitch, VcHint },
+  setup() {
+    return { args };
+  },
+  template: '<vc-switch v-bind="args"></vc-switch>',
+});

package/ui/components/atoms/vc-video/vc-video.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcVideo } from "./";
+
+const SIZE = ["auto", "xs", "s", "m", "l", "xl", "xxl"];
+
+export default {
+  title: "atoms/VcVideo",
+  component: VcVideo,
+  args: {
+    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
+    size: "auto",
+    label: "Video",
+  },
+  argTypes: {
+    size: {
+      options: SIZE,
+      control: "radio",
+      table: {
+        type: {
+          summary: SIZE.join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcVideo>;
+
+export const Primary: StoryFn<typeof VcVideo> = (args) => ({
+  components: { VcVideo },
+  setup() {
+    return { args };
+  },
+  template: '<div style="width: 400px"><vc-video v-bind="args"></vc-video></div>',
+});

package/ui/components/atoms/vc-widget/vc-widget.stories.ts

@@ -1,24 +1,20 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcWidget } from "./";
 
-const meta: Meta<typeof VcWidget> = {
+export default {
   title: "atoms/VcWidget",
   component: VcWidget,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcWidget>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcWidget },
-    setup() {
-      return { args };
-    },
-    template: '<vc-widget v-bind="args"></vc-widget>',
-  }),
   args: {
     icon: "fas fa-save",
-    title: "Default",
+    title: "Saved",
+    value: 12,
+  },
+} satisfies Meta<typeof VcWidget>;
+
+export const Primary: StoryFn<typeof VcWidget> = (args) => ({
+  components: { VcWidget },
+  setup() {
+    return { args };
   },
-};
+  template: '<vc-widget v-bind="args"></vc-widget>',
+});