@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,143 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcRow } from "@ui/components/atoms/vc-row";
-import { VcImage } from "@ui/components/atoms/vc-image";
-
-/**
- * `VcRow` is a layout component that arranges its children in a horizontal row.
- * It adapts to mobile views by switching to a grid layout.
- */
-const meta = {
-  title: "Atoms/VcRow",
-  component: VcRow,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcRow component provides a simple horizontal layout:
-
-- Arranges child elements in a horizontal row using flexbox
-- Automatically adapts to mobile views by switching to a grid layout
-- Ideal for creating responsive horizontal item arrangements
-- Works with any component as its children
-        `,
-      },
-    },
-  },
-} satisfies Meta<typeof VcRow>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Basic usage with images
- */
-export const Default: Story = {
-  render: (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/201" size="xl" />
-        <vc-image src="https://picsum.photos/202" size="xl" />
-      </vc-row>
-    `,
-  }),
-};
-
-/**
- * With text content
- */
-export const WithTextContent: Story = {
-  render: (args) => ({
-    components: { VcRow },
-    setup() {
-      return { args };
-    },
-    template: `
-      <vc-row v-bind="args">
-        <div class="tw-p-4 tw-bg-blue-100 tw-rounded">Item 1</div>
-        <div class="tw-p-4 tw-bg-green-100 tw-rounded">Item 2</div>
-        <div class="tw-p-4 tw-bg-yellow-100 tw-rounded">Item 3</div>
-        <div class="tw-p-4 tw-bg-red-100 tw-rounded">Item 4</div>
-      </vc-row>
-    `,
-  }),
-};
-
-/**
- * With cards
- */
-export const WithCards: Story = {
-  render: (args) => ({
-    components: { VcRow },
-    setup() {
-      return { args };
-    },
-    template: `
-      <vc-row v-bind="args">
-        <div v-for="i in 3" :key="i" class="tw-w-64 tw-p-4 tw-border tw-border-gray-200 tw-rounded tw-shadow-sm tw-bg-white">
-          <h3 class="tw-font-medium tw-mb-2">Card Title {{ i }}</h3>
-          <p class="tw-text-sm tw-text-gray-600">This is a card component that demonstrates the VcRow layout.</p>
-        </div>
-      </vc-row>
-    `,
-  }),
-};
-
-/**
- * With spacing between items
- */
-export const WithSpacing: Story = {
-  render: (args) => ({
-    components: { VcRow },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div>
-        <p class="tw-mb-2 tw-text-sm">Items with custom spacing using utility classes</p>
-        <vc-row v-bind="args" class="tw-gap-4">
-          <div v-for="i in 4" :key="i" class="tw-p-4 tw-bg-gray-100 tw-rounded tw-w-32 tw-h-32 tw-flex tw-items-center tw-justify-center">
-            Item {{ i }}
-          </div>
-        </vc-row>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Mobile layout simulation
- */
-export const MobileView: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "This example shows how the component adapts to mobile view by applying the mobile class. In a real application, this would happen automatically based on viewport width.",
-      },
-    },
-  },
-  render: (args) => ({
-    components: { VcRow },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div>
-        <p class="tw-mb-2 tw-text-sm">Simulating mobile view with grid layout</p>
-        <div class="vc-app--mobile">
-          <vc-row v-bind="args" class="tw-gap-2">
-            <div v-for="i in 4" :key="i" class="tw-p-4 tw-bg-gray-100 tw-rounded tw-flex tw-items-center tw-justify-center">
-              Item {{ i }}
-            </div>
-          </vc-row>
-        </div>
-      </div>
-    `,
-  }),
-};

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

@@ -1,27 +0,0 @@
-<template>
-  <div class="vc-row">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: (props: any) => any;
-}>();
-</script>
-
-<style lang="scss">
-:root {
-  --row-gap: 0;
-}
-
-.vc-row {
-  @apply tw-flex tw-flex-nowrap tw-items-stretch;
-  gap: var(--row-gap);
-
-  .vc-app--mobile & {
-    @apply tw-grid;
-  }
-}
-</style>

package/ui/components/atoms/vc-scrollable-container/index.ts

@@ -1 +0,0 @@
-export { default as VcScrollableContainer } from "@ui/components/atoms/vc-scrollable-container/vc-scrollable-container.vue";

package/ui/components/atoms/vc-scrollable-container/vc-scrollable-container.vue

@@ -1,119 +0,0 @@
-<template>
-  <div
-    class="vc-scrollable-container"
-    role="region"
-    aria-label="Scrollable content"
-  >
-    <div
-      class="vc-scrollable-container__arrow"
-      :class="{ 'vc-scrollable-container__arrow--hidden': !canScrollUp }"
-      aria-hidden="true"
-      @pointerenter="startScroll('up')"
-      @pointerleave="stopScroll"
-    >
-      <slot name="arrow-up">
-        <VcIcon
-          icon="lucide-chevron-up"
-          size="xs"
-        />
-      </slot>
-    </div>
-
-    <div
-      ref="viewportRef"
-      class="vc-scrollable-container__viewport"
-      tabindex="0"
-      @scroll="updateScrollState"
-      @keydown.up.prevent="scrollByKey('up')"
-      @keydown.down.prevent="scrollByKey('down')"
-    >
-      <slot />
-    </div>
-
-    <div
-      class="vc-scrollable-container__arrow"
-      :class="{ 'vc-scrollable-container__arrow--hidden': !canScrollDown }"
-      aria-hidden="true"
-      @pointerenter="startScroll('down')"
-      @pointerleave="stopScroll"
-    >
-      <slot name="arrow-down">
-        <VcIcon
-          icon="lucide-chevron-down"
-          size="xs"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useScrollArrows, type UseScrollArrowsOptions } from "@ui/composables";
-
-const props = withDefaults(
-  defineProps<{
-    speed?: number;
-  }>(),
-  {
-    speed: undefined,
-  },
-);
-
-const viewportRef = ref<HTMLElement | null>(null);
-
-const options: UseScrollArrowsOptions = {};
-if (props.speed !== undefined) {
-  options.speed = props.speed;
-}
-
-const SCROLL_STEP = 40;
-
-const { canScrollUp, canScrollDown, startScroll, stopScroll, updateScrollState } =
-  useScrollArrows(viewportRef, options);
-
-function scrollByKey(direction: "up" | "down") {
-  if (!viewportRef.value) return;
-  const delta = direction === "up" ? -SCROLL_STEP : SCROLL_STEP;
-  viewportRef.value.scrollBy({ top: delta, behavior: "smooth" });
-}
-
-defineExpose({
-  viewportRef,
-  updateScrollState,
-});
-</script>
-
-<style lang="scss">
-:root {
-  --scroll-arrow-size: 16px;
-  --scroll-arrow-color: var(--neutrals-400);
-}
-
-.vc-scrollable-container {
-  @apply tw-flex tw-flex-col tw-min-h-0;
-
-  &__arrow {
-    @apply tw-flex tw-items-center tw-justify-center tw-py-1
-      tw-cursor-default tw-shrink-0
-      tw-transition-opacity tw-duration-150;
-    color: var(--scroll-arrow-color);
-    font-size: var(--scroll-arrow-size);
-
-    &--hidden {
-      @apply tw-opacity-0 tw-pointer-events-none tw-h-0 tw-py-0 tw-overflow-hidden;
-    }
-  }
-
-  &__viewport {
-    @apply tw-flex-grow tw-overflow-auto tw-min-h-0;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}
-</style>

package/ui/components/atoms/vc-skeleton/index.ts

@@ -1 +0,0 @@
-export { default as VcSkeleton } from "@ui/components/atoms/vc-skeleton/vc-skeleton.vue";

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

@@ -1,246 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import VcSkeleton from "@ui/components/atoms/vc-skeleton/vc-skeleton.vue";
-
-/**
- * `VcSkeleton` component is used to display loading placeholders for content.
- * It helps improve UX by showing preliminary placeholders where content is loading.
- */
-const meta = {
-  title: "Atoms/VcSkeleton",
-  component: VcSkeleton,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["text", "circle", "block"],
-      description: "Shape variant: text rows, circle, or rectangular block",
-      table: {
-        type: { summary: '"text" | "circle" | "block"' },
-        defaultValue: { summary: '"text"' },
-      },
-    },
-    rows: {
-      control: { type: "number", min: 1, max: 20 },
-      description: "Number of skeleton rows (only for variant='text')",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: "1" },
-      },
-    },
-    width: {
-      control: "text",
-      description: "Custom width (number → px, string → as-is). For circle/block variants.",
-      table: {
-        type: { summary: "string | number" },
-      },
-    },
-    height: {
-      control: "text",
-      description: "Custom height (number → px, string → as-is). For circle/block variants.",
-      table: {
-        type: { summary: "string | number" },
-      },
-    },
-    animated: {
-      control: "boolean",
-      description: "Enables pulse animation",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-    },
-  },
-  args: {
-    variant: "text",
-    rows: 1,
-    animated: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcSkeleton component is used to display loading placeholders with support for:
-
-- Pulse animation for visual loading indication
-- Customizable number of rows for paragraph imitation
-- Last row is displayed with 60% width for a more natural look
-
-## Usage Examples
-
-\`\`\`vue
-<!-- Simple skeleton with a single row -->
-<vc-skeleton />
-
-<!-- Skeleton for loading paragraph text -->
-<vc-skeleton :rows="3" />
-
-<!-- Skeleton with animation -->
-<vc-skeleton :rows="3" animated />
-
-<!-- Creating more complex templates with CSS -->
-<div class="card">
-  <div class="card-img tw-h-40 tw-bg-[--neutrals-200] tw-rounded-md tw-mb-4"></div>
-  <div class="card-body">
-    <div class="tw-h-6 tw-bg-[--neutrals-200] tw-rounded tw-w-2/3 tw-mb-4"></div>
-    <vc-skeleton :rows="3" animated />
-  </div>
-</div>
-\`\`\`
-`,
-      },
-    },
-  },
-} satisfies Meta<typeof VcSkeleton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Standard skeleton with a single row and pulse animation.
- */
-export const Default: Story = {
-  args: {},
-};
-
-/**
- * Skeleton with pulse animation, creating a wave effect for loading indication.
- */
-export const Animated: Story = {
-  args: {
-    animated: true,
-  },
-};
-
-/**
- * Skeleton with multiple rows to imitate a paragraph of text.
- */
-export const MultipleRows: Story = {
-  args: {
-    rows: 5,
-  },
-};
-
-/**
- * Customized skeleton for imitating a card with image and text.
- */
-export const CardSkeleton: Story = {
-  render: (args) => ({
-    components: { VcSkeleton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-border tw-rounded-lg tw-overflow-hidden tw-shadow-sm">
-        <div class="tw-h-[200px] tw-bg-[--neutrals-200]"></div>
-        <div class="tw-p-4">
-          <div class="tw-h-5 tw-bg-[--neutrals-200] tw-rounded tw-w-3/5 tw-mb-2"></div>
-          <vc-skeleton :rows="3" animated />
-          <div class="tw-flex tw-gap-2 tw-mt-4">
-            <div class="tw-h-8 tw-w-20 tw-bg-[--neutrals-200] tw-rounded-md"></div>
-            <div class="tw-h-8 tw-w-20 tw-bg-[--neutrals-200] tw-rounded-md"></div>
-          </div>
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Loading list with items imitation.
- */
-export const ListSkeleton: Story = {
-  render: (args) => ({
-    components: { VcSkeleton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-space-y-4">
-        <div v-for="i in 3" :key="i" class="tw-flex tw-gap-4 tw-items-center">
-          <div class="tw-w-12 tw-h-12 tw-bg-[--neutrals-200] tw-rounded-full"></div>
-          <div class="tw-flex-1">
-            <div class="tw-h-4 tw-bg-[--neutrals-200] tw-rounded tw-w-2/5 tw-mb-2"></div>
-            <vc-skeleton :rows="1" animated />
-          </div>
-        </div>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Circle variant — useful for avatar or icon placeholders.
- */
-export const Circle: Story = {
-  args: {
-    variant: "circle",
-    width: 48,
-    height: 48,
-  },
-};
-
-/**
- * Block variant — rectangular placeholder with custom dimensions.
- * Great for buttons, titles, images.
- */
-export const Block: Story = {
-  args: {
-    variant: "block",
-    width: "200px",
-    height: "32px",
-  },
-};
-
-/**
- * Different skeleton shapes composed using variant, width, and height props.
- */
-export const CustomShapes: Story = {
-  render: (args) => ({
-    components: { VcSkeleton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-flex tw-flex-wrap tw-gap-6 tw-items-center">
-        <vc-skeleton variant="circle" :width="100" :height="100" />
-        <vc-skeleton variant="block" :width="100" :height="100" />
-        <vc-skeleton variant="block" width="150px" height="60px" />
-        <vc-skeleton variant="block" width="200px" height="20px" />
-      </div>
-    `,
-  }),
-};
-
-/**
- * Blade-like skeleton layout combining all variants.
- */
-export const BladeSkeletonExample: Story = {
-  render: (args) => ({
-    components: { VcSkeleton },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-border tw-rounded-lg tw-overflow-hidden tw-w-[500px]">
-        <!-- Header skeleton -->
-        <div class="tw-flex tw-items-center tw-gap-3 tw-px-6 tw-py-4 tw-border-b">
-          <vc-skeleton variant="circle" :width="24" :height="24" />
-          <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-1">
-            <vc-skeleton variant="block" width="40%" height="16px" />
-            <vc-skeleton variant="block" width="25%" height="12px" />
-          </div>
-        </div>
-        <!-- Toolbar skeleton -->
-        <div class="tw-flex tw-items-center tw-gap-3 tw-px-4 tw-py-3 tw-border-b tw-bg-[--neutrals-50]">
-          <vc-skeleton variant="block" :width="60" :height="32" />
-          <vc-skeleton variant="block" :width="60" :height="32" />
-          <vc-skeleton variant="block" :width="60" :height="32" />
-        </div>
-        <!-- Content skeleton -->
-        <div class="tw-p-6">
-          <vc-skeleton :rows="6" animated />
-        </div>
-      </div>
-    `,
-  }),
-};

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

@@ -1,115 +0,0 @@
-<template>
-  <!-- Text variant: rows of skeleton lines (original behavior) -->
-  <div
-    v-if="variant === 'text'"
-    class="vc-skeleton"
-    :class="{
-      'vc-skeleton--animated': animated,
-    }"
-    role="status"
-    aria-busy="true"
-    :aria-label="ariaLabel"
-  >
-    <span class="tw-sr-only">{{ ariaLabel }}</span>
-    <div
-      v-for="index in rows"
-      :key="index"
-      class="vc-skeleton__row"
-      :style="{
-        width: getRowWidth(index),
-      }"
-      aria-hidden="true"
-    ></div>
-  </div>
-
-  <!-- Circle / Block variant: single shape element -->
-  <div
-    v-else
-    class="vc-skeleton__shape"
-    :class="[
-      `vc-skeleton__shape--${variant}`,
-      { 'tw-animate-pulse': animated },
-    ]"
-    :style="{
-      width: normalizeSize(width),
-      height: normalizeSize(height),
-    }"
-    role="status"
-    aria-busy="true"
-    :aria-label="ariaLabel"
-  >
-    <span class="tw-sr-only">{{ ariaLabel }}</span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    /** Shape variant: text rows, circle, or rectangular block */
-    variant?: "text" | "circle" | "block";
-    /** Number of rows (only for variant="text") */
-    rows?: number;
-    /** Custom width (number treated as px, string used as-is) */
-    width?: string | number;
-    /** Custom height (number treated as px, string used as-is) */
-    height?: string | number;
-    animated?: boolean;
-    /** Screen reader label */
-    ariaLabel?: string;
-  }>(),
-  {
-    variant: "text",
-    rows: 1,
-    animated: true,
-    ariaLabel: "Loading...",
-  },
-);
-
-function getRowWidth(index: number) {
-  if (index === props.rows) {
-    return "60%";
-  }
-  return "100%";
-}
-
-function normalizeSize(value: string | number | undefined): string | undefined {
-  if (value === undefined) return undefined;
-  return typeof value === "number" ? `${value}px` : value;
-}
-</script>
-
-<style lang="scss">
-:root {
-  --vc-skeleton-bg: var(--neutrals-200);
-  --vc-skeleton-highlight: var(--neutrals-300);
-  --vc-skeleton-border-radius: 6px;
-  --vc-skeleton-row-height: 16px;
-  --vc-skeleton-row-gap: 12px;
-}
-
-.vc-skeleton {
-  @apply tw-w-full tw-flex tw-flex-col;
-  gap: var(--vc-skeleton-row-gap);
-
-  &__row {
-    height: var(--vc-skeleton-row-height);
-    @apply tw-bg-[color:var(--vc-skeleton-bg)] tw-rounded-[var(--vc-skeleton-border-radius)];
-  }
-
-  &--animated &__row {
-    @apply tw-animate-pulse;
-  }
-
-  &__shape {
-    @apply tw-bg-[color:var(--vc-skeleton-bg)];
-
-    &--block {
-      @apply tw-rounded-[var(--vc-skeleton-border-radius)];
-    }
-
-    &--circle {
-      @apply tw-rounded-full;
-    }
-  }
-}
-</style>

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

@@ -1 +0,0 @@
-export { default as VcStatus } from "@ui/components/atoms/vc-status/vc-status.vue";