@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.1

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

@@ -1,225 +0,0 @@
-<template>
-  <div
-    class="vc-banner"
-    :class="[
-      `vc-banner--${normalizedVariant}`,
-      {
-        'vc-banner--title-only': isTitleOnly,
-        'vc-banner--collapsed': isCollapsed,
-      },
-    ]"
-    :role="normalizedVariant === 'danger' || normalizedVariant === 'warning' ? 'alert' : 'region'"
-    :aria-label="normalizedVariant === 'danger' ? 'Error' : normalizedVariant === 'warning' ? 'Warning' : 'Information'"
-  >
-    <VcIcon
-      v-if="icon"
-      :icon="icon"
-      :size="iconSize"
-      :variant="iconVariant"
-      class="vc-banner__icon"
-      aria-hidden="true"
-    />
-    <div class="vc-banner__body">
-      <div v-if="hasTitle" class="vc-banner__title">
-        <slot name="title"></slot>
-      </div>
-      <div
-        v-if="hasContent"
-        class="vc-banner__content-wrapper"
-        :style="wrapperStyle"
-      >
-        <div ref="contentRef" class="vc-banner__content">
-          <slot name="default"></slot>
-        </div>
-      </div>
-      <div v-if="showTrigger" class="vc-banner__trigger">
-        <slot
-          name="trigger"
-          :is-expanded="isExpanded"
-          :toggle="toggle"
-        >
-          <button
-            type="button"
-            class="vc-banner__trigger-button"
-            :aria-expanded="isExpanded"
-            @click="toggle"
-          >
-            {{ isExpanded ? $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_LESS") : $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_MORE") }}
-          </button>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { computed, useSlots } from "vue";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useCollapsible } from "@ui/composables/useCollapsible";
-
-export type CurrentBannerVariant = "info" | "warning" | "danger" | "success";
-/**
- * @deprecated Use current variants: "info" | "warning" | "danger" | "success".
- */
-export type LegacyBannerVariant = "light-danger" | "info-dark" | "primary";
-export type BannerVariant = CurrentBannerVariant | LegacyBannerVariant;
-
-export interface Props {
-  /**
-   * @deprecated Legacy variants ("light-danger", "info-dark", "primary") are supported for backward compatibility
-   * and mapped to modern variants ("danger", "info", "info").
-   */
-  variant?: BannerVariant;
-  icon?: string;
-  iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
-  iconVariant?: InstanceType<typeof VcIcon>["$props"]["variant"];
-  collapsedHeight?: number;
-}
-
-defineSlots<{
-  title: (props: any) => any;
-  default: (props: any) => any;
-  trigger: (props: { isExpanded: boolean; toggle: () => void }) => any;
-}>();
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: "info",
-  iconSize: "l",
-  collapsedHeight: 100,
-});
-
-const slots = useSlots();
-const { contentRef, isExpanded, hasOverflow, wrapperStyle, toggle } = useCollapsible({
-  collapsedHeight: props.collapsedHeight,
-});
-
-function normalizeVariant(variant: BannerVariant): CurrentBannerVariant {
-  switch (variant) {
-    case "light-danger":
-      return "danger";
-    case "info-dark":
-    case "primary":
-      return "info";
-    default:
-      return variant;
-  }
-}
-
-const normalizedVariant = computed<CurrentBannerVariant>(() => normalizeVariant(props.variant));
-const hasTitle = computed(() => Boolean(slots.title));
-const hasContent = computed(() => Boolean(slots.default));
-const isTitleOnly = computed(() => hasTitle.value && !hasContent.value);
-const showTrigger = computed(() => hasContent.value && hasOverflow.value);
-const isCollapsed = computed(() => showTrigger.value && !isExpanded.value);
-
-if (import.meta.env?.DEV) {
-  if (props.variant === "light-danger" || props.variant === "info-dark" || props.variant === "primary") {
-    console.warn(
-      `[VcBanner] variant "${props.variant}" is deprecated. Use "${normalizeVariant(props.variant)}" instead.`,
-    );
-  }
-}
-</script>
-
-<style lang="scss">
-@use "sass:map";
-
-$banner-variants: (
-  info: (bg: var(--neutrals-50), border: var(--info-100), accent: var(--info-500)),
-  warning: (bg: var(--neutrals-50), border: var(--warning-100), accent: var(--warning-500)),
-  danger: (bg: var(--neutrals-50), border: var(--danger-100), accent: var(--danger-500)),
-  success: (bg: var(--neutrals-50), border: var(--success-100), accent: var(--success-500)),
-);
-
-.vc-banner {
-  @apply tw-relative tw-flex tw-items-start tw-gap-3 tw-overflow-hidden tw-rounded-md tw-border tw-border-solid tw-py-3 tw-pr-3 tw-pl-4;
-  --vc-banner-accent: var(--info-500);
-
-  &::before {
-    content: "";
-    @apply tw-absolute tw-left-0 tw-top-0 tw-bottom-0;
-    width: 3px;
-    background-color: var(--vc-banner-accent);
-  }
-
-  @each $name, $colors in $banner-variants {
-    &.vc-banner--#{$name} {
-      --vc-banner-accent: #{map.get($colors, accent)};
-      background-color: #{map.get($colors, bg)};
-      border-color: #{map.get($colors, border)};
-    }
-  }
-
-  &.vc-banner--title-only {
-    @apply tw-items-center;
-
-    .vc-banner__icon {
-      @apply tw-mt-0;
-    }
-  }
-
-  &__icon {
-    @apply tw-mt-0.5 tw-shrink-0;
-    color: var(--vc-banner-accent);
-  }
-
-  &__body {
-    @apply tw-flex tw-flex-col tw-min-w-0 tw-flex-1;
-  }
-
-  &__title {
-    @apply tw-text-sm tw-font-medium tw-leading-5;
-    color: var(--neutrals-900);
-  }
-
-  &__content-wrapper {
-    @apply tw-relative tw-overflow-hidden;
-    transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
-    will-change: max-height;
-
-    &::after {
-      content: "";
-      @apply tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-h-8;
-      background: linear-gradient(to bottom, rgb(250 250 250 / 0), var(--neutrals-50));
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-  }
-
-  &__content {
-    @apply tw-text-sm tw-leading-5;
-    color: var(--neutrals-700);
-  }
-
-  &__title + &__content-wrapper {
-    @apply tw-mt-0.5;
-  }
-
-  &.vc-banner--collapsed {
-    .vc-banner__content-wrapper::after {
-      opacity: 1;
-    }
-  }
-
-  &__trigger {
-    @apply tw-mt-1;
-  }
-
-  &__trigger-button {
-    @apply tw-inline-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-leading-5;
-    color: var(--vc-banner-accent);
-    transition: color 0.15s ease;
-
-    &:hover {
-      @apply tw-underline;
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--vc-banner-accent);
-      outline-offset: 2px;
-      border-radius: 2px;
-    }
-  }
-}
-</style>

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

@@ -1,3 +0,0 @@
-export { default as VcButton } from "@ui/components/atoms/vc-button/vc-button.vue";
-export { default as VcButtonGroup } from "@ui/components/atoms/vc-button/vc-button-group.vue";
-export { ButtonGroupKey, type ButtonVariant, type ButtonSize, type ButtonGroupContext } from "@ui/components/atoms/vc-button/types";

package/ui/components/atoms/vc-button/types.ts

@@ -1,28 +0,0 @@
-import type { InjectionKey } from "vue";
-
-export type ButtonVariant =
-  | "primary"
-  | "secondary"
-  | "danger"
-  | "warning"
-  | "success"
-  | "info"
-  | "outline"
-  | "ghost"
-  | "link";
-
-export type ButtonSize =
-  | "sm"
-  | "default"
-  | "lg"
-  | "icon"
-  // Legacy aliases (backward compat)
-  | "xs"
-  | "base";
-
-export interface ButtonGroupContext {
-  size?: { value: ButtonSize | undefined };
-  attached?: { value: boolean };
-}
-
-export const ButtonGroupKey: InjectionKey<ButtonGroupContext> = Symbol("vc-button-group");

package/ui/components/atoms/vc-button/vc-button-group.stories.ts

@@ -1,172 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcButton, VcButtonGroup } from "@ui/components/atoms/vc-button";
-
-/**
- * `VcButtonGroup` groups buttons together with consistent spacing or attached borders.
- * Supports size propagation to children via provide/inject.
- */
-const meta = {
-  title: "Atoms/VcButtonGroup",
-  component: VcButtonGroup,
-  tags: ["autodocs"],
-  argTypes: {
-    orientation: {
-      description: "Layout direction of the button group",
-      control: "select",
-      options: ["horizontal", "vertical"],
-      table: {
-        type: { summary: "'horizontal' | 'vertical'" },
-        defaultValue: { summary: "'horizontal'" },
-      },
-    },
-    size: {
-      description: "Size propagated to all child buttons",
-      control: "select",
-      options: [undefined, "sm", "default", "lg", "icon"],
-      table: {
-        type: { summary: "'sm' | 'default' | 'lg' | 'icon'" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    attached: {
-      description: "Whether buttons are visually joined (no gap, shared borders)",
-      control: "boolean",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-} satisfies Meta<typeof VcButtonGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Default horizontal group with gap between buttons.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { VcButton, VcButtonGroup },
-    setup: () => ({ args }),
-    template: `
-      <VcButtonGroup v-bind="args">
-        <VcButton variant="secondary">Left</VcButton>
-        <VcButton variant="secondary">Center</VcButton>
-        <VcButton variant="secondary">Right</VcButton>
-      </VcButtonGroup>
-    `,
-  }),
-};
-
-/**
- * Attached mode — buttons join with no gap, shared borders, and connected border radii.
- */
-export const Attached: Story = {
-  args: { attached: true },
-  render: (args) => ({
-    components: { VcButton, VcButtonGroup },
-    setup: () => ({ args }),
-    template: `
-      <VcButtonGroup v-bind="args">
-        <VcButton variant="secondary">Left</VcButton>
-        <VcButton variant="secondary">Center</VcButton>
-        <VcButton variant="secondary">Right</VcButton>
-      </VcButtonGroup>
-    `,
-  }),
-};
-
-/**
- * Vertical layout.
- */
-export const Vertical: Story = {
-  args: { orientation: "vertical" },
-  render: (args) => ({
-    components: { VcButton, VcButtonGroup },
-    setup: () => ({ args }),
-    template: `
-      <VcButtonGroup v-bind="args">
-        <VcButton variant="secondary">Top</VcButton>
-        <VcButton variant="secondary">Middle</VcButton>
-        <VcButton variant="secondary">Bottom</VcButton>
-      </VcButtonGroup>
-    `,
-  }),
-};
-
-/**
- * Vertical attached — buttons join vertically.
- */
-export const AttachedVertical: Story = {
-  args: { orientation: "vertical", attached: true },
-  render: (args) => ({
-    components: { VcButton, VcButtonGroup },
-    setup: () => ({ args }),
-    template: `
-      <VcButtonGroup v-bind="args">
-        <VcButton variant="secondary">Top</VcButton>
-        <VcButton variant="secondary">Middle</VcButton>
-        <VcButton variant="secondary">Bottom</VcButton>
-      </VcButtonGroup>
-    `,
-  }),
-};
-
-/**
- * Group-level `size` overrides individual button sizes.
- */
-export const PropagatedSize: Story = {
-  render: () => ({
-    components: { VcButton, VcButtonGroup },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <VcButtonGroup size="sm">
-          <VcButton variant="primary">SM via group</VcButton>
-          <VcButton variant="secondary">SM via group</VcButton>
-        </VcButtonGroup>
-        <VcButtonGroup size="default">
-          <VcButton variant="primary">Default via group</VcButton>
-          <VcButton variant="secondary">Default via group</VcButton>
-        </VcButtonGroup>
-        <VcButtonGroup size="lg">
-          <VcButton variant="primary">LG via group</VcButton>
-          <VcButton variant="secondary">LG via group</VcButton>
-        </VcButtonGroup>
-      </div>
-    `,
-  }),
-};
-
-/**
- * Different variants in one group.
- */
-export const MixedVariants: Story = {
-  render: () => ({
-    components: { VcButton, VcButtonGroup },
-    template: `
-      <VcButtonGroup>
-        <VcButton variant="primary" size="icon" icon="lucide-bold" aria-label="Bold" />
-        <VcButton variant="secondary" size="icon" icon="lucide-italic" aria-label="Italic" />
-        <VcButton variant="secondary" size="icon" icon="lucide-underline" aria-label="Underline" />
-      </VcButtonGroup>
-    `,
-  }),
-};
-
-/**
- * Realistic dialog footer pattern — Cancel + Confirm.
- */
-export const DialogFooter: Story = {
-  render: () => ({
-    components: { VcButton, VcButtonGroup },
-    template: `
-      <div style="display: flex; justify-content: flex-end; padding: 16px; border-top: 1px solid #e5e7eb;">
-        <VcButtonGroup>
-          <VcButton variant="outline">Cancel</VcButton>
-          <VcButton variant="primary">Confirm</VcButton>
-        </VcButtonGroup>
-      </div>
-    `,
-  }),
-};

package/ui/components/atoms/vc-button/vc-button-group.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    :class="groupClass"
-    role="group"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, provide, toRef } from "vue";
-import { ButtonGroupKey, type ButtonSize } from "@ui/components/atoms/vc-button/types";
-
-export interface Props {
-  orientation?: "horizontal" | "vertical";
-  size?: ButtonSize;
-  attached?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  orientation: "horizontal",
-  attached: false,
-});
-
-provide(ButtonGroupKey, {
-  size: toRef(props, "size") as { value: ButtonSize | undefined },
-  attached: toRef(props, "attached"),
-});
-
-const groupClass = computed(() => [
-  "vc-button-group",
-  {
-    "vc-button-group--horizontal": props.orientation === "horizontal",
-    "vc-button-group--vertical": props.orientation === "vertical",
-    "vc-button-group--attached": props.attached,
-  },
-]);
-</script>
-
-<style lang="scss">
-.vc-button-group {
-  @apply tw-inline-flex tw-gap-2;
-
-  &--vertical {
-    @apply tw-flex-col;
-  }
-
-  // Attached mode — buttons touch, shared borders, connected radii
-  // Selectors use `> *` to handle both direct .vc-button children
-  // and wrapped buttons (e.g. inside VcTooltip or other wrappers).
-  &--attached {
-    @apply tw-gap-0;
-
-    // Horizontal attached
-    &.vc-button-group--horizontal {
-      // All buttons inside lose rounding
-      .vc-button {
-        @apply tw-rounded-none;
-      }
-
-      // First slot: left rounding
-      > *:first-child .vc-button,
-      > .vc-button:first-child {
-        @apply tw-rounded-l-[var(--button-border-radius)];
-      }
-
-      // Last slot: right rounding
-      > *:last-child .vc-button,
-      > .vc-button:last-child {
-        @apply tw-rounded-r-[var(--button-border-radius)];
-      }
-
-      // Avoid double borders — negative margin on the flex child (wrapper or direct button)
-      > *:not(:first-child) {
-        @apply tw--ml-px;
-      }
-    }
-
-    // Vertical attached
-    &.vc-button-group--vertical {
-      .vc-button {
-        @apply tw-rounded-none;
-      }
-
-      > *:first-child .vc-button,
-      > .vc-button:first-child {
-        @apply tw-rounded-t-[var(--button-border-radius)];
-      }
-
-      > *:last-child .vc-button,
-      > .vc-button:last-child {
-        @apply tw-rounded-b-[var(--button-border-radius)];
-      }
-
-      > *:not(:first-child) {
-        @apply tw--mt-px;
-      }
-    }
-  }
-}
-</style>

package/ui/components/atoms/vc-button/vc-button.a11y.test.ts

@@ -1,46 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { mount, VueWrapper } from "@vue/test-utils";
-import axe from "axe-core";
-import VcButton from "@ui/components/atoms/vc-button/vc-button.vue";
-
-describe("VcButton a11y", () => {
-  let wrapper: VueWrapper;
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  const mountButton = (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
-    wrapper = mount(VcButton as any, {
-      props,
-      slots,
-      global: { stubs: { VcIcon: true } },
-      attachTo: document.body,
-    });
-    return wrapper;
-  };
-
-  it("has no a11y violations with text content", async () => {
-    const w = mountButton({}, { default: "Submit" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations when disabled", async () => {
-    const w = mountButton({ disabled: true }, { default: "Disabled" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations when loading", async () => {
-    const w = mountButton({ loading: true }, { default: "Loading" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has no a11y violations for icon-only button with aria-label", async () => {
-    const w = mountButton({ ariaLabel: "Add item", icon: "lucide-plus" });
-    const results = await axe.run(w.element as HTMLElement);
-    expect(results).toHaveNoViolations();
-  });
-});