@vc-shell/framework 1.1.0-alpha.9 → 1.1.0

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

@@ -1,19 +1,150 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcVideo } from "./";
-
-export default {
-  title: "atoms/VcVideo",
-  component: VcVideo,
-  args: {
-    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
-    label: "Video",
-  },
-} satisfies Meta<typeof VcVideo>;
-
-export const Primary: StoryFn<typeof VcVideo> = (args) => ({
-  components: { VcVideo },
-  setup() {
-    return { args };
-  },
-  template: '<vc-video v-bind="args" />',
-});
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcVideo } from "./";
+
+/**
+ * `VcVideo` - component for embedding video content with optional label and tooltip
+ */
+const meta = {
+  title: "Atoms/VcVideo",
+  component: VcVideo,
+  tags: ["autodocs"],
+  args: {
+    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
+    label: "Video",
+  },
+  argTypes: {
+    source: {
+      description: "URL of the video to be embedded",
+      control: "text",
+      table: {
+        category: "Props",
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    label: {
+      description: "Label displayed above the video",
+      control: "text",
+      table: {
+        category: "Props",
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    tooltip: {
+      description: "Additional information shown in a tooltip",
+      control: "text",
+      table: {
+        category: "Props",
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The VcVideo component provides an embedded video player:
+
+- Supports YouTube and other embed URLs
+- Optional label and tooltip for additional information
+- Responsive container that maintains aspect ratio
+- Displays placeholder when no source is provided
+        `,
+      },
+    },
+    actions: {
+      handles: ["click"],
+    },
+  },
+} satisfies Meta<typeof VcVideo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default video player with label
+ */
+export const Default: Story = {
+  args: {
+    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
+    label: "Introduction Video",
+  },
+  render: (args) => ({
+    components: { VcVideo },
+    setup() {
+      return { args };
+    },
+    template: '<div style="max-width: 600px;"><vc-video v-bind="args" /></div>',
+  }),
+};
+
+/**
+ * Video player with label and tooltip
+ */
+export const WithTooltip: Story = {
+  args: {
+    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
+    label: "Product Overview",
+    tooltip: "This video provides an overview of our product features and benefits",
+  },
+  render: (args) => ({
+    components: { VcVideo },
+    setup() {
+      return { args };
+    },
+    template: '<div style="max-width: 600px;"><vc-video v-bind="args" /></div>',
+  }),
+};
+
+/**
+ * Video player without a label
+ */
+export const WithoutLabel: Story = {
+  args: {
+    source: "https://www.youtube.com/embed/PeXX-V-dwpA",
+    label: undefined,
+  },
+  render: (args) => ({
+    components: { VcVideo },
+    setup() {
+      return { args };
+    },
+    template: '<div style="max-width: 600px;"><vc-video v-bind="args" /></div>',
+  }),
+};
+
+/**
+ * Placeholder displayed when no source is provided
+ */
+export const Placeholder: Story = {
+  args: {
+    source: undefined,
+    label: "Video Not Available",
+  },
+  render: (args) => ({
+    components: { VcVideo },
+    setup() {
+      return { args };
+    },
+    template: '<div style="max-width: 600px; height: 300px;"><vc-video v-bind="args" /></div>',
+  }),
+};
+
+/**
+ * Different video source example
+ */
+export const AlternativeSource: Story = {
+  args: {
+    source: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+    label: "Alternative Video Source",
+  },
+  render: (args) => ({
+    components: { VcVideo },
+    setup() {
+      return { args };
+    },
+    template: '<div style="max-width: 600px;"><vc-video v-bind="args" /></div>',
+  }),
+};

package/ui/components/atoms/vc-video/vc-video.vue

@@ -30,7 +30,7 @@
         class="vc-video__placeholder"
       >
         <VcIcon
-          icon="fas fa-film"
+          icon="material-theaters"
           size="xl"
         ></VcIcon>
       </div>

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

@@ -1,20 +1,272 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcWidget } from "./";
-
-export default {
-  title: "atoms/VcWidget",
-  component: VcWidget,
-  args: {
-    icon: "fas fa-save",
-    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>',
-});
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcWidget } from "./";
+
+/**
+ * `VcWidget` is a component that represents a clickable widget with an icon, title, and optional badge.
+ * It's commonly used in dashboards, sidebars, and navigation elements.
+ */
+const meta = {
+  title: "Atoms/VcWidget",
+  component: VcWidget,
+  tags: ["autodocs"],
+  argTypes: {
+    icon: {
+      description: "Icon to display in the widget (Font Awesome format or component name)",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    title: {
+      description: "Title text displayed below the icon",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    value: {
+      description: "Value to display as a badge count (truncated at 99+)",
+      control: "number",
+      table: {
+        type: { summary: "string | number" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    disabled: {
+      description: "Whether the widget is disabled",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    isExpanded: {
+      description: "Whether the widget is expanded",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    horizontal: {
+      description: "Whether to arrange the widget horizontally",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+  args: {
+    icon: "material-save",
+    title: "Saved",
+    value: 12,
+    disabled: false,
+    isExpanded: false,
+    horizontal: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The VcWidget component represents an interactive widget with the following features:
+
+- Icon display with support for Font Awesome icons
+- Optional title text
+- Badge counter with automatic truncation of large numbers (99+)
+- Support for disabled state
+- Expanded/collapsed states
+- Can be arranged horizontally or vertically
+- Emits click events for interaction handling
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcWidget>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default widget with icon, title and badge count
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-block">
+        <vc-widget v-bind="args" @click="onClick" />
+      </div>
+    `,
+    methods: {
+      onClick() {
+        console.log("Widget clicked");
+      },
+    },
+  }),
+};
+
+/**
+ * Horizontal layout with icon and title side by side
+ */
+export const Horizontal: Story = {
+  args: {
+    horizontal: true,
+  },
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-block">
+        <vc-widget v-bind="args" @click="onClick" />
+      </div>
+    `,
+    methods: {
+      onClick() {
+        console.log("Horizontal widget clicked");
+      },
+    },
+  }),
+};
+
+/**
+ * Widget in disabled state
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-block">
+        <vc-widget v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Widget with a large badge count (shows truncation)
+ */
+export const LargeBadgeCount: Story = {
+  args: {
+    value: 120,
+  },
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-block">
+        <vc-widget v-bind="args" @click="onClick" />
+      </div>
+    `,
+    methods: {
+      onClick() {
+        console.log("Widget with large badge clicked");
+      },
+    },
+  }),
+};
+
+/**
+ * Widget in expanded state
+ */
+export const Expanded: Story = {
+  args: {
+    isExpanded: true,
+  },
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-block">
+        <vc-widget v-bind="args" @click="onClick" />
+      </div>
+    `,
+    methods: {
+      onClick() {
+        console.log("Expanded widget clicked");
+      },
+    },
+  }),
+};
+
+/**
+ * Widget with different icon
+ */
+export const DifferentIcon: Story = {
+  args: {
+    icon: "fas fa-bell",
+    title: "Notifications",
+    value: 5,
+  },
+  render: (args) => ({
+    components: { VcWidget },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-block">
+        <vc-widget v-bind="args" @click="onClick" />
+      </div>
+    `,
+    methods: {
+      onClick() {
+        console.log("Notification widget clicked");
+      },
+    },
+  }),
+};
+
+/**
+ * Multiple widgets arranged in a sidebar layout
+ */
+export const SidebarLayout: Story = {
+  render: () => ({
+    components: { VcWidget },
+    setup() {
+      const widgets = [
+        { icon: "fas fa-home", title: "Dashboard", value: null },
+        { icon: "fas fa-envelope", title: "Messages", value: 3 },
+        { icon: "fas fa-bell", title: "Notifications", value: 12 },
+        { icon: "fas fa-user", title: "Profile", value: null },
+        { icon: "fas fa-cog", title: "Settings", value: 1 },
+      ];
+
+      return { widgets };
+    },
+    template: `
+      <div class="tw-bg-gray-100 tw-p-4 tw-inline-flex tw-flex-col tw-gap-4">
+        <vc-widget
+          v-for="(widget, index) in widgets"
+          :key="index"
+          :icon="widget.icon"
+          :title="widget.title"
+          :value="widget.value"
+          @click="() => onClick(widget)"
+        />
+      </div>
+    `,
+    methods: {
+      onClick(widget: { icon: string; title: string; value: number | null }) {
+        console.log(`Widget ${widget.title} clicked`);
+      },
+    },
+  }),
+};

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -1,56 +1,42 @@
 <template>
-  <VcTooltip
+  <div
     class="vc-widget"
-    :placement="$isDesktop.value ? 'bottom' : 'top'"
-    :offset="{
-      crossAxis: 0,
-      mainAxis: -10,
-    }"
-    :delay="1000"
+    :data-widget-id="widgetName"
+    :data-widget-name="title"
+    :class="[
+      { 'vc-widget--expanded': isExpanded },
+      { 'vc-widget--collapsed': !isExpanded },
+      { 'vc-widget--disabled': disabled },
+      { 'vc-widget--horizontal': horizontal },
+    ]"
+    @click="onClick"
   >
+    <VcBadge
+      :content="truncateCount"
+      size="s"
+    >
+      <div class="vc-widget__icon-container">
+        <VcIcon
+          v-if="icon"
+          class="vc-widget__icon"
+          :icon="icon"
+          size="m"
+        ></VcIcon>
+      </div>
+    </VcBadge>
     <div
-      class="vc-widget__container"
-      :class="[
-        { 'vc-widget__container--expanded': isExpanded },
-        { 'vc-widget__container--collapsed': !isExpanded },
-        { 'vc-widget__container--disabled': disabled },
-        { 'vc-widget__container--horizontal': horizontal },
-      ]"
-      @click="onClick"
+      v-if="title"
+      class="vc-widget__content"
     >
-      <VcBadge
-        :content="truncateCount"
-        size="s"
-      >
-        <div class="vc-widget__icon-container">
-          <VcIcon
-            v-if="icon"
-            class="vc-widget__icon"
-            :icon="icon"
-            size="m"
-          ></VcIcon>
-        </div>
-      </VcBadge>
-      <div
-        v-if="title"
-        class="vc-widget__content"
-      >
-        <div class="vc-widget__title">
-          {{ title }}
-        </div>
+      <div class="vc-widget__title">
+        {{ title }}
       </div>
     </div>
-    <template
-      v-if="$isDesktop.value"
-      #tooltip
-    >
-      {{ title }}
-    </template>
-  </VcTooltip>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject } from "vue";
+import { computed, getCurrentInstance } from "vue";
 import { VcIcon } from "./../vc-icon";
 import { useWidgets } from "../../../../core/composables";
 
@@ -72,9 +58,10 @@ const instance = getCurrentInstance();
 
 const widgetService = useWidgets();
 
+const widgetName = instance?.parent?.type.__name;
+
 function onClick() {
   if (!props.disabled) {
-    const widgetName = instance?.parent?.type.__name;
     if (widgetName && instance?.parent?.exposed) {
       widgetService.setActiveWidget(instance?.parent?.exposed);
     }
@@ -107,34 +94,32 @@ const truncateCount = computed(() => {
 }
 
 .vc-widget {
-  &__container {
-    @apply tw-relative tw-shrink-0 tw-px-2 tw-w-max;
-    @apply tw-flex tw-overflow-visible tw-box-border tw-flex-col tw-items-center tw-justify-center tw-cursor-pointer;
-    @apply tw-bg-[color:var(--widget-bg-color)];
-    @apply tw-transition-colors tw-duration-200;
+  @apply tw-relative tw-shrink-0 tw-px-2 tw-w-max;
+  @apply tw-flex tw-overflow-visible tw-box-border tw-flex-col tw-items-center tw-justify-center tw-cursor-pointer;
+  @apply tw-bg-[color:var(--widget-bg-color)];
+  @apply tw-transition-colors tw-duration-200;
 
-    &--horizontal {
-      @apply tw-flex-row tw-gap-2;
+  &--horizontal {
+    @apply tw-flex-row tw-gap-2;
 
-      .vc-widget__content {
-        @apply tw-ml-1;
-      }
+    .vc-widget__content {
+      @apply tw-ml-1;
+    }
 
-      .vc-widget__title {
-        @apply tw-mt-0 tw-text-left tw-whitespace-nowrap;
-      }
+    .vc-widget__title {
+      @apply tw-mt-0 tw-text-left tw-whitespace-nowrap;
     }
+  }
 
-    &:hover {
-      @apply tw-bg-[color:var(--widget-bg-hover-color)];
+  &:hover {
+    @apply tw-bg-[color:var(--widget-bg-hover-color)];
 
-      .vc-widget__title {
-        @apply tw-text-[color:var(--widget-title-hover-color)];
-      }
+    .vc-widget__title {
+      @apply tw-text-[color:var(--widget-title-hover-color)];
+    }
 
-      .vc-widget__icon {
-        @apply tw-text-[color:var(--widget-icon-hover-color)];
-      }
+    .vc-widget__icon {
+      @apply tw-text-[color:var(--widget-icon-hover-color)];
     }
   }
 
@@ -154,7 +139,7 @@ const truncateCount = computed(() => {
     @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2;
   }
 
-  &__container--disabled {
+  &--disabled {
     @apply tw-cursor-default tw-bg-[color:var(--widget-bg-color)];
 
     .vc-widget__icon {

package/ui/components/molecules/index.ts

@@ -1,16 +1,16 @@
-export * from "./vc-breadcrumbs";
-export * from "./vc-editor";
-export * from "./vc-form";
-export * from "./vc-file-upload";
-export * from "./vc-input";
-export * from "./vc-input-currency";
-export * from "./vc-notification";
-export * from "./vc-pagination";
-export * from "./vc-rating";
-export * from "./vc-select";
-export * from "./vc-slider";
-export * from "./vc-textarea";
-export * from "./vc-multivalue";
-export * from "./vc-field";
-export * from "./vc-radio-button";
-export * from "./vc-checkbox";
+export * from "./vc-breadcrumbs";
+export * from "./vc-editor";
+export * from "./vc-form";
+export * from "./vc-file-upload";
+export * from "./vc-input";
+export * from "./vc-input-currency";
+export * from "./vc-toast";
+export * from "./vc-pagination";
+export * from "./vc-rating";
+export * from "./vc-select";
+export * from "./vc-slider";
+export * from "./vc-textarea";
+export * from "./vc-multivalue";
+export * from "./vc-field";
+export * from "./vc-radio-button";
+export * from "./vc-checkbox";