@aggc/ui 0.7.1 → 0.9.0

package/src/components/UiTooltip.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipContent,
+} from "reka-ui";
+import { tooltipContent } from "./UiTooltip.styles";
+
+withDefaults(
+  defineProps<{
+    /** Tooltip text. When empty, renders the trigger bare (no tooltip). */
+    content: string;
+    side?: "top" | "right" | "bottom" | "left";
+    /** Open delay in ms. */
+    delay?: number;
+  }>(),
+  {
+    side: "top",
+    delay: 500,
+  },
+);
+</script>
+
+<template>
+  <TooltipProvider v-if="content" :delay-duration="delay">
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipContent :side="side" :side-offset="6" :class="tooltipContent">
+        {{ content }}
+      </TooltipContent>
+    </TooltipRoot>
+  </TooltipProvider>
+  <slot v-else />
+</template>

package/src/components/index.ts

@@ -2,10 +2,27 @@ 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 UiAvatar } from "./UiAvatar.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 UiModal } from "./UiModal.vue";
 export { default as UiSegmentedControl } from "./UiSegmentedControl.vue";
 export { default as UiSelect } from "./UiSelect.vue";
 export { default as UiSkeleton } from "./UiSkeleton.vue";
+export { default as UiToast } from "./UiToast.vue";
+export { default as UiToastProvider } from "./UiToastProvider.vue";
+export { default as UiTooltip } from "./UiTooltip.vue";
+export { default as DataTable } from "./DataTable.vue";
+export type { DataTableColumn } from "./DataTable.types";
+export {
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from "reka-ui";
+export { actionMenu, menuBtnIcon } from "./DataTable.styles";
+export { tooltipContent } from "./UiTooltip.styles";
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider } from "reka-ui";

package/src/composables/useToast.ts

@@ -0,0 +1,43 @@
+import { ref } from "vue";
+
+export type ToastTone = "success" | "error" | "info" | "warning";
+
+export interface ToastItem {
+  id: number;
+  tone: ToastTone;
+  message: string;
+  duration: number;
+}
+
+const toasts = ref<ToastItem[]>([]);
+let nextId = 0;
+
+function addToast(tone: ToastTone, message: string, duration = 4000) {
+  const id = nextId++;
+  toasts.value = [...toasts.value, { id, tone, message, duration }];
+
+  if (duration > 0) {
+    setTimeout(() => removeToast(id), duration);
+  }
+
+  return id;
+}
+
+function removeToast(id: number) {
+  toasts.value = toasts.value.filter((t) => t.id !== id);
+}
+
+export function useToast() {
+  return {
+    toasts,
+    success: (message: string, duration?: number) =>
+      addToast("success", message, duration),
+    error: (message: string, duration?: number) =>
+      addToast("error", message, duration),
+    info: (message: string, duration?: number) =>
+      addToast("info", message, duration),
+    warning: (message: string, duration?: number) =>
+      addToast("warning", message, duration),
+    dismiss: removeToast,
+  };
+}

package/src/css/base.css

@@ -83,9 +83,69 @@ body {
   }
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toastFadeOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
+@keyframes toastSwipeOut {
+  from {
+    transform: translateX(var(--reka-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + 1rem));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aggc-spin,
-  [data-ui-loading-pulse] {
+  [data-ui-loading-pulse],
+  [data-state="open"],
+  [data-state="closed"] {
     animation: none !important;
   }
 

package/src/index.ts

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

package/src/stories/feedback/UiToast.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiButton, UiToast, UiToastProvider } from "../../components";
+import { useToast } from "../../composables/useToast";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storySurfaceClass,
+  storySurfaceCompactClass,
+} from "../support/storyStyles";
+
+const meta: Meta = {
+  title: "Feedback/UiToast",
+  id: "ui-toast",
+  component: UiToast,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Notification toast with tone-based styling, auto-dismiss, and swipe-to-dismiss. Built on Reka UI Toast.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Tones: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiToast, UiToastProvider, UiButton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const toast = useToast();
+      return { previewTheme, toast };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="toast-tones">
+        <UiToastProvider>
+          <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
+            <UiButton variant="outline" @click="toast.success('Workspace created successfully')">Success</UiButton>
+            <UiButton variant="outline" @click="toast.error('Failed to upload document')">Error</UiButton>
+            <UiButton variant="outline" @click="toast.info('API key copied to clipboard')">Info</UiButton>
+            <UiButton variant="outline" @click="toast.warning('Storage quota almost full')">Warning</UiButton>
+          </div>
+        </UiToastProvider>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Static: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiToast, UiToastProvider },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="toast-static">
+        <UiToastProvider>
+          <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; flex-direction: column; gap: 0.75rem;">
+            <UiToast tone="success" message="Document uploaded and processed." :duration="0" />
+            <UiToast tone="error" message="Upload failed. Please try again." :duration="0" />
+            <UiToast tone="info" message="New workspace available." :duration="0" />
+            <UiToast tone="warning" message="Rate limit approaching." :duration="0" />
+          </div>
+        </UiToastProvider>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/layout/DataTable.stories.ts

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import {
+  DataTable,
+  UiButton,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from "../../components";
+import type { DataTableColumn } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass } from "../support/storyStyles";
+import { dataTableDefaultSource, dataTableLoadingSource, dataTableSortableSource } from "../support/sources";
+
+interface Member {
+  id: string;
+  name: string;
+  email: string;
+  role: "ADMIN" | "MEMBER";
+}
+
+const columns: DataTableColumn[] = [
+  { key: "name", label: "Member", width: "1fr" },
+  { key: "email", label: "Email", width: "1fr" },
+  { key: "role", label: "Role", width: "120px" },
+];
+
+const meta = {
+  title: "Layout/DataTable",
+  id: "data-table",
+  // Generic <T> component doesn't fit Meta's ConcreteComponent type; cast keeps
+  // autodocs working without forcing typed args on every story.
+  component: DataTable as never,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Reusable data table with debounced search, Set-based selection (shift+click, drag-to-select, Ctrl/Cmd+A, Escape), responsive mobile cards, bulk actions, per-row actions, and loading skeletons.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  parameters: { docs: { source: { code: dataTableDefaultSource } } },
+  render: () => ({
+    components: { DataTable, UiButton, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const selected = ref<string[]>([]);
+      const items = ref<Member[]>([
+        { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "ADMIN" },
+        { id: "2", name: "Bob Smith", email: "bob@example.com", role: "MEMBER" },
+        { id: "3", name: "Carla Mendes", email: "carla@example.com", role: "MEMBER" },
+      ]);
+      return { previewTheme, selected, items, columns, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="default">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Searchable + selectable</p>
+          <DataTable v-model:selected="selected" :items="items" :columns="columns" searchable :search-fields="['name', 'email']" search-placeholder="Search by name or email...">
+            <template #bulk-actions="{ selectedItems }">
+              <UiButton size="sm" variant="outline">{{ selectedItems.length }} selected</UiButton>
+            </template>
+            <template #cell-name="{ item }"><strong>{{ item.name }}</strong></template>
+            <template #cell-email="{ item }">{{ item.email }}</template>
+            <template #cell-role="{ item }">{{ item.role === 'ADMIN' ? 'Admin' : 'Member' }}</template>
+            <template #actions="{ item }">
+              <DropdownMenuItem @select="() => {}">Change role</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem @select="() => {}">Deactivate</DropdownMenuItem>
+            </template>
+          </DataTable>
+          <p :class="storyCaptionClass">Shift+click ranges, drag to paint, Ctrl/Cmd+A selects all visible, Escape clears.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Loading: Story = {
+  parameters: { docs: { source: { code: dataTableLoadingSource } } },
+  render: () => ({
+    components: { DataTable, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, columns, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="loading">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Loading skeletons</p>
+          <DataTable :items="[]" :columns="columns" :is-loading="true" searchable />
+          <p :class="storyCaptionClass">Skeleton rows render while data loads, with aria-busy on the root.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const SortablePaginated: Story = {
+  parameters: { docs: { source: { code: dataTableSortableSource } } },
+  render: () => ({
+    components: { DataTable, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const items = ref<Member[]>([
+        { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "ADMIN" },
+        { id: "2", name: "Bob Smith", email: "bob@example.com", role: "MEMBER" },
+        { id: "3", name: "Carla Mendes", email: "carla@example.com", role: "MEMBER" },
+        { id: "4", name: "Dan Lee", email: "dan@example.com", role: "MEMBER" },
+      ]);
+      const sortColumns: DataTableColumn[] = [
+        { key: "name", label: "Member", width: "1fr", sortable: true },
+        { key: "email", label: "Email", width: "1fr", sortable: true },
+        { key: "role", label: "Role", width: "120px", sortable: true },
+      ];
+      return { previewTheme, items, sortColumns, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="sortable">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Sortable + paginated (display-only)</p>
+          <DataTable :items="items" :columns="sortColumns" :page-size="3" :selectable="false">
+            <template #cell-name="{ item }"><strong>{{ item.name }}</strong></template>
+            <template #cell-email="{ item }">{{ item.email }}</template>
+            <template #cell-role="{ item }">{{ item.role === 'ADMIN' ? 'Admin' : 'Member' }}</template>
+          </DataTable>
+          <p :class="storyCaptionClass">sortable columns toggle asc/desc/clear; pageSize adds client-side pagination. selectable=false hides the checkbox column.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/layout/UiModal.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiButton, UiField, UiModal } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storySurfaceClass,
+  storySurfaceCompactClass,
+} from "../support/storyStyles";
+
+const meta: Meta = {
+  title: "Layout/UiModal",
+  id: "ui-modal",
+  component: UiModal,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Accessible dialog overlay with focus trap, ESC close, and portal rendering. Built on Reka UI Dialog.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiModal, UiButton, UiField },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const open = ref(false);
+      return { previewTheme, open };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="modal-default">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <UiButton @click="open = true">Open Modal</UiButton>
+          <UiModal v-model:open="open" title="Create Workspace" description="Add a new workspace to your tenant.">
+            <div style="display: flex; flex-direction: column; gap: 1rem;">
+              <UiField label="Name" for-id="ws-name">
+                <input id="ws-name" type="text" placeholder="e.g., Legal Documents Q2" style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--colors-border-default); background: var(--colors-bg-input); color: var(--colors-text-primary); font-size: 0.875rem;" />
+              </UiField>
+            </div>
+            <template #actions>
+              <UiButton variant="outline" @click="open = false">Cancel</UiButton>
+              <UiButton @click="open = false">Create</UiButton>
+            </template>
+          </UiModal>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiModal, UiButton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const openSm = ref(false);
+      const openMd = ref(false);
+      const openLg = ref(false);
+      return { previewTheme, openSm, openMd, openLg };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="modal-sizes">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; gap: 0.75rem;">
+          <UiButton variant="outline" @click="openSm = true">Small</UiButton>
+          <UiButton variant="outline" @click="openMd = true">Medium</UiButton>
+          <UiButton variant="outline" @click="openLg = true">Large</UiButton>
+          <UiModal v-model:open="openSm" size="sm" title="Small Modal">
+            <p>This is a small modal (400px max width).</p>
+          </UiModal>
+          <UiModal v-model:open="openMd" size="md" title="Medium Modal">
+            <p>This is a medium modal (560px max width).</p>
+          </UiModal>
+          <UiModal v-model:open="openLg" size="lg" title="Large Modal">
+            <p>This is a large modal (720px max width).</p>
+            <template #actions>
+              <UiButton variant="outline" @click="openLg = false">Close</UiButton>
+            </template>
+          </UiModal>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/primitives/UiAvatar.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiAvatar } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storySurfaceClass,
+  storySurfaceCompactClass,
+} from "../support/storyStyles";
+
+const meta: Meta = {
+  title: "Primitives/UiAvatar",
+  id: "ui-avatar",
+  component: UiAvatar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "User avatar with image support and initials fallback. Built on Reka UI Avatar.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiAvatar },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="avatar-sizes">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; align-items: center; gap: 1rem;">
+          <UiAvatar name="Alice Johnson" size="sm" />
+          <UiAvatar name="Alice Johnson" size="md" />
+          <UiAvatar name="Alice Johnson" size="lg" />
+          <UiAvatar name="Alice Johnson" size="xl" />
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Shapes: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiAvatar },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="avatar-shapes">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; align-items: center; gap: 1rem;">
+          <UiAvatar name="Alice Johnson" size="lg" shape="circle" />
+          <UiAvatar name="Alice Johnson" size="lg" shape="square" />
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  render: () => ({
+    components: { StoryThemeFrame, UiAvatar },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="avatar-image">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]" style="display: flex; align-items: center; gap: 1rem;">
+          <UiAvatar name="Colm Tuite" src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" size="lg" />
+          <UiAvatar name="Fallback User" src="https://broken-url.invalid/photo.jpg" size="lg" />
+          <UiAvatar name="No Image" size="lg" />
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/primitives/UiTooltip.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiTooltip, UiButton } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass } from "../support/storyStyles";
+import { uiTooltipDefaultSource } from "../support/sources";
+
+const meta = {
+  title: "Primitives/UiTooltip",
+  id: "ui-tooltip",
+  component: UiTooltip as never,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Accessible tooltip built on Reka UI. Renders the trigger in place and floats the content on hover/focus with positioning, portal, and keyboard support.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  parameters: { docs: { source: { code: uiTooltipDefaultSource } } },
+  render: () => ({
+    components: { UiTooltip, UiButton, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="default">
+        <div :class="storySurfaceClass" style="min-height:160px;display:flex;align-items:center;justify-content:center;gap:4">
+          <p :class="storySectionLabelClass">Hover the button</p>
+          <UiTooltip content="Saves changes to the workspace">
+            <UiButton size="sm">Save</UiButton>
+          </UiTooltip>
+          <p :class="storyCaptionClass">Reka UI handles positioning, portal, and focus.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};