@aggc/ui 0.4.0 → 0.5.0

package/src/components/UiSelect.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { Check, ChevronDown } from "lucide-vue-next";
+import {
+  uiSelectCheckClass,
+  uiSelectChevronClass,
+  uiSelectMenuClass,
+  uiSelectMenuClassExtra,
+  uiSelectOptionClass,
+  uiSelectOptionContentClass,
+  uiSelectOptionDescriptionClass,
+  uiSelectOptionLabelClass,
+  uiSelectRootClass,
+  uiSelectTriggerClass,
+  uiSelectValueTextClass,
+  uiSelectValueWrapClass,
+} from "./UiSelect.styles";
+
+type UiSelectOption = {
+  label: string;
+  value: string;
+  description?: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    options: UiSelectOption[];
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: "sm" | "md";
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+  }>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: "Select an option",
+    disabled: false,
+    invalid: false,
+    size: "md",
+    ariaLabel: undefined,
+    ariaLabelledby: undefined,
+    ariaDescribedby: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [string];
+}>();
+
+const rootRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLButtonElement | null>(null);
+const optionRefs = ref<(HTMLButtonElement | null)[]>([]);
+const open = ref(false);
+const activeIndex = ref(-1);
+const generatedId = useId();
+const baseId = computed(() => props.id ?? `ui-select-${generatedId}`);
+const listId = computed(() => `${baseId.value}-listbox`);
+
+const selectedOption = computed(
+  () => props.options.find((option) => option.value === props.modelValue) ?? null
+);
+
+function setActiveIndex(index: number) {
+  if (!props.options.length) {
+    activeIndex.value = -1;
+    return;
+  }
+
+  const normalized = (index + props.options.length) % props.options.length;
+  activeIndex.value = normalized;
+  nextTick(() => {
+    optionRefs.value[normalized]?.focus();
+  });
+}
+
+function closeMenu() {
+  open.value = false;
+  activeIndex.value = -1;
+}
+
+async function openMenu() {
+  if (props.disabled || !props.options.length) {
+    return;
+  }
+
+  open.value = true;
+  const selectedIndex = props.options.findIndex((option) => option.value === props.modelValue);
+  await nextTick();
+  setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+}
+
+function toggleMenu() {
+  if (open.value) {
+    closeMenu();
+    return;
+  }
+  void openMenu();
+}
+
+function selectOption(value: string) {
+  emit("update:modelValue", value);
+  closeMenu();
+  nextTick(() => {
+    triggerRef.value?.focus();
+  });
+}
+
+function onTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled) {
+    return;
+  }
+
+  if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    void openMenu();
+  }
+}
+
+function onOptionKeydown(event: KeyboardEvent, index: number) {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      setActiveIndex(index + 1);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      setActiveIndex(index - 1);
+      break;
+    case "Home":
+      event.preventDefault();
+      setActiveIndex(0);
+      break;
+    case "End":
+      event.preventDefault();
+      setActiveIndex(props.options.length - 1);
+      break;
+    case "Escape":
+      event.preventDefault();
+      closeMenu();
+      triggerRef.value?.focus();
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      selectOption(props.options[index].value);
+      break;
+  }
+}
+
+function onPointerDown(event: MouseEvent) {
+  if (!open.value) {
+    return;
+  }
+
+  if (rootRef.value?.contains(event.target as Node)) {
+    return;
+  }
+
+  closeMenu();
+}
+
+watch(
+  () => props.options,
+  () => {
+    optionRefs.value = [];
+    if (!props.options.some((option) => option.value === props.modelValue)) {
+      closeMenu();
+    }
+  }
+);
+
+watch(
+  () => props.disabled,
+  (disabled) => {
+    if (disabled) {
+      closeMenu();
+    }
+  }
+);
+
+onMounted(() => {
+  document.addEventListener("pointerdown", onPointerDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("pointerdown", onPointerDown);
+});
+</script>
+
+<template>
+  <div ref="rootRef" :class="uiSelectRootClass({ open })">
+    <button
+      ref="triggerRef"
+      type="button"
+      :id="baseId"
+      :name="name"
+      :disabled="disabled"
+      :class="uiSelectTriggerClass({ size, open, selected: Boolean(selectedOption), disabled })"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      :aria-controls="listId"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
+      :aria-describedby="ariaDescribedby"
+      :aria-invalid="invalid || undefined"
+      @click="toggleMenu"
+      @keydown="onTriggerKeydown"
+    >
+      <span :class="uiSelectValueWrapClass">
+        <span :class="uiSelectValueTextClass">
+          {{ selectedOption?.label ?? placeholder }}
+        </span>
+      </span>
+      <ChevronDown :size="16" :class="uiSelectChevronClass({ open })" />
+    </button>
+
+    <div
+      v-if="open"
+      :id="listId"
+      :class="[uiSelectMenuClass, uiSelectMenuClassExtra]"
+      role="listbox"
+      :aria-activedescendant="activeIndex >= 0 ? `${baseId}-${activeIndex}` : undefined"
+    >
+      <button
+        v-for="(option, index) in options"
+        :id="`${baseId}-${index}`"
+        :key="option.value"
+        :ref="(node) => (optionRefs[index] = node as HTMLButtonElement | null)"
+        type="button"
+        role="option"
+        :aria-selected="option.value === modelValue"
+        :class="uiSelectOptionClass({ size, active: activeIndex === index || option.value === modelValue })"
+        @mouseenter="activeIndex = index"
+        @click="selectOption(option.value)"
+        @keydown="onOptionKeydown($event, index)"
+        >
+          <span :class="uiSelectOptionContentClass">
+          <span :class="uiSelectOptionLabelClass">{{ option.label }}</span>
+          <span
+            v-if="option.description && size === 'md'"
+            :class="uiSelectOptionDescriptionClass"
+          >
+            {{ option.description }}
+          </span>
+        </span>
+        <Check :size="15" :class="uiSelectCheckClass({ selected: option.value === modelValue })" />
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/UiSkeleton.styles.ts

@@ -0,0 +1,93 @@
+import { cva } from "@styled/css";
+
+export const skeletonClass = cva({
+  base: {
+    position: "relative",
+    overflow: "hidden",
+    _before: {
+      content: "\"\"",
+      position: "absolute",
+      inset: "0",
+      background:
+        "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0) 100%)",
+      transform: "translateX(-100%)",
+      animation: "aggc-shimmer 1.45s ease-in-out infinite",
+    },
+    _dark: {
+      _before: {
+        background:
+          "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,204,236,0.22) 50%, rgba(255,255,255,0) 100%)",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      text: {
+        width: "100%",
+        height: "0.875rem",
+        borderRadius: "md",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)",
+        },
+      },
+      title: {
+        width: "100%",
+        height: "1.75rem",
+        borderRadius: "xl",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)",
+        },
+      },
+      rect: {
+        width: "100%",
+        height: "5rem",
+        borderRadius: "xl",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)",
+        },
+      },
+      pill: {
+        width: "5rem",
+        height: "1.75rem",
+        borderRadius: "999px",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)",
+        },
+      },
+      circle: {
+        width: "2.75rem",
+        height: "2.75rem",
+        borderRadius: "999px",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)",
+        },
+      },
+      stat: {
+        width: "100%",
+        height: "4.75rem",
+        borderRadius: "xl",
+        bg: "rgba(117, 138, 178, 0.16)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.11)",
+        },
+      },
+      action: {
+        width: "100%",
+        height: "2.75rem",
+        borderRadius: "xl",
+        bg: "rgba(127, 146, 184, 0.14)",
+        _dark: {
+          bg: "rgba(210, 220, 240, 0.09)",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "rect",
+  },
+});

package/src/components/UiSkeleton.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { skeletonClass } from "./UiSkeleton.styles";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "text" | "title" | "rect" | "pill" | "circle" | "stat" | "action";
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    variant: "rect",
+    width: undefined,
+    height: undefined,
+  }
+);
+
+const skeletonClassName = computed(() => skeletonClass({ variant: props.variant }));
+const skeletonStyle = computed(() => ({
+  width:
+    props.width ??
+    (props.variant === "circle" ? "2.75rem" : props.variant === "pill" ? "5rem" : "100%"),
+  height:
+    props.height ??
+    (props.variant === "text"
+      ? "0.875rem"
+      : props.variant === "title"
+        ? "1.75rem"
+        : props.variant === "pill"
+          ? "1.75rem"
+          : props.variant === "circle"
+            ? "2.75rem"
+            : props.variant === "action"
+              ? "2.75rem"
+              : props.variant === "stat"
+                ? "4.75rem"
+                : "5rem"),
+}));
+</script>
+
+<template>
+  <div
+    aria-hidden="true"
+    data-ui-skeleton
+    :class="skeletonClassName"
+    :style="skeletonStyle"
+  />
+</template>

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export { default as PageSurface } from "./PageSurface.vue";
+export { default as ResultPanel } from "./ResultPanel.vue";
+export { default as SectionCard } from "./SectionCard.vue";
+export { default as StatusBadge } from "./StatusBadge.vue";
+export { default as UiButton } from "./UiButton.vue";
+export { default as UiCheckbox } from "./UiCheckbox.vue";
+export { default as UiField } from "./UiField.vue";
+export { default as UiLoadingState } from "./UiLoadingState.vue";
+export { default as UiSegmentedControl } from "./UiSegmentedControl.vue";
+export { default as UiSelect } from "./UiSelect.vue";
+export { default as UiSkeleton } from "./UiSkeleton.vue";

package/src/components.ts

@@ -0,0 +1 @@
+export * from "./components/index";

package/src/css/base.css

@@ -0,0 +1,62 @@
+html {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+}
+
+.aggc-spin {
+  animation: aggc-spin 800ms linear infinite;
+}
+
+[data-ui-loading-pulse] {
+  animation: loadingPulse 1.2s ease-out infinite;
+}
+
+[data-ui-skeleton]::before {
+  will-change: transform;
+}
+
+@keyframes aggc-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes loadingPulse {
+  0% {
+    transform: scale(0.96);
+    box-shadow: 0 0 0 0 rgba(49, 94, 255, 0.35);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(49, 94, 255, 0);
+  }
+  100% {
+    transform: scale(0.96);
+    box-shadow: 0 0 0 0 rgba(49, 94, 255, 0);
+  }
+}
+
+@keyframes aggc-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aggc-spin,
+  [data-ui-loading-pulse] {
+    animation: none !important;
+  }
+
+  [data-ui-skeleton]::before {
+    animation: none !important;
+    transform: translateX(0);
+    opacity: 0.45;
+  }
+}

package/src/css/fonts.css

@@ -0,0 +1,6 @@
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-sans/700.css";
+@import "@fontsource/space-grotesk/500.css";
+@import "@fontsource/space-grotesk/700.css";

package/src/css/index.css

@@ -0,0 +1,2 @@
+@import "./base.css";
+@import "../../styled-system/styles.css";

package/src/css/storybook.css

@@ -0,0 +1,15 @@
+html,
+body,
+#storybook-root {
+  min-height: 100%;
+}
+
+body {
+  background:
+    radial-gradient(circle at top, rgba(49, 94, 255, 0.16), transparent 34%),
+    #0a1018;
+}
+
+#storybook-root {
+  padding: 1.5rem;
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/index";
+export * from "./styles/index";
+export * from "./tokens/index";

package/src/stories/feedback/ResultPanel.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { ResultPanel } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass } from "../support/storyStyles";
+import { resultPanelFailureSource, resultPanelSuccessSource } from "../support/sources";
+
+const meta = {
+  title: "Feedback/ResultPanel",
+  id: "result-panel",
+  component: ResultPanel,
+  tags: ["autodocs"],
+  args: {
+    ok: true,
+    summary: "Package validation passed",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Structured summary panel for success, warning and failure results.",
+      },
+    },
+  },
+} satisfies Meta<typeof ResultPanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
+  parameters: {
+    docs: { source: { code: resultPanelSuccessSource } },
+  },
+  render: () => ({
+    components: { ResultPanel, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="success">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Pass state</p>
+          <ResultPanel ok summary="Package validation passed" :messages="['Typecheck passed', 'Tests passed', 'Build passed']" />
+          <p :class="storyCaptionClass">Use success panels to summarize what completed, not just to show a generic green state.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Failure: Story = {
+  parameters: {
+    docs: { source: { code: resultPanelFailureSource } },
+  },
+  render: () => ({
+    components: { ResultPanel, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="failure">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Fail state</p>
+          <ResultPanel
+            :ok="false"
+            summary="Package validation failed"
+            :warnings="['One component needs contrast review']"
+            :errors="['Visual regression diff detected']"
+          />
+          <p :class="storyCaptionClass">Failure panels should distinguish warnings from errors so the next action is obvious.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/feedback/StatusBadge.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { StatusBadge } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { ref } from "vue";
+import { storyCaptionClass, storyRowClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass } from "../support/storyStyles";
+import { statusBadgeTonesSource } from "../support/sources";
+
+const meta = {
+  title: "Feedback/StatusBadge",
+  id: "status-badge",
+  component: StatusBadge,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Compact state label for neutral, informative, warning and success contexts.",
+      },
+    },
+  },
+} satisfies Meta<typeof StatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Tones: Story = {
+  parameters: {
+    docs: { source: { code: statusBadgeTonesSource } },
+  },
+  render: () => ({
+    components: { StatusBadge, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storyRowClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="tones">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <p :class="storySectionLabelClass">Semantic tones</p>
+          <div :class="storyRowClass">
+            <StatusBadge tone="success">Ready</StatusBadge>
+            <StatusBadge tone="warning">Needs review</StatusBadge>
+            <StatusBadge tone="info">Preview</StatusBadge>
+            <StatusBadge tone="neutral">Draft</StatusBadge>
+          </div>
+          <p :class="storyCaptionClass">Badges should stay short and categorical so they work in cards, lists and headers.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/feedback/UiLoadingState.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiLoadingState } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass } from "../support/storyStyles";
+import { uiLoadingStateSource } from "../support/sources";
+
+const meta = {
+  title: "Feedback/UiLoadingState",
+  id: "ui-loading-state",
+  component: UiLoadingState,
+  tags: ["autodocs"],
+  args: {
+    title: "Preparing release artifacts",
+    description: "Generating CSS, declarations and export map.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Shared loading treatment for async flows that need a title and supporting description.",
+      },
+    },
+  },
+} satisfies Meta<typeof UiLoadingState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Overview: Story = {
+  parameters: {
+    docs: { source: { code: uiLoadingStateSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiLoadingState },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="overview">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <p :class="storySectionLabelClass">Async feedback</p>
+          <UiLoadingState
+            title="Preparing release artifacts"
+            description="Generating CSS, declarations and export map."
+          />
+          <p :class="storyCaptionClass">Use when an async action needs more structure than a spinner alone.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};