@aggc/ui 0.8.0 → 1.0.0

package/src/components/UiModal.vue

@@ -20,6 +20,7 @@ import {
   uiModalHeaderContentClass,
   uiModalOverlayClass,
   uiModalTitleClass,
+  uiModalWrapperClass,
 } from "./UiModal.styles";
 
 withDefaults(
@@ -52,7 +53,8 @@ function handleOpenChange(open: boolean) {
   <DialogRoot :open="open" @update:open="handleOpenChange">
     <DialogPortal>
       <DialogOverlay :class="uiModalOverlayClass" />
-      <DialogContent :class="uiModalContentClass({ size })">
+      <div :class="uiModalWrapperClass">
+        <DialogContent :class="uiModalContentClass({ size })">
         <div :class="uiModalHeaderClass">
           <div :class="uiModalHeaderContentClass">
             <DialogTitle :class="uiModalTitleClass">{{ title }}</DialogTitle>
@@ -74,6 +76,7 @@ function handleOpenChange(open: boolean) {
           <slot name="actions" />
         </div>
       </DialogContent>
+      </div>
     </DialogPortal>
   </DialogRoot>
 </template>

package/src/components/UiToast.styles.ts

@@ -4,7 +4,7 @@ export const uiToastViewportClass = css({
   position: "fixed",
   bottom: "4",
   right: "4",
-  zIndex: "50",
+  zIndex: "60",
   display: "flex",
   flexDirection: "column",
   gap: "2",

package/src/components/UiTooltip.styles.ts

@@ -0,0 +1,25 @@
+import { css } from "@styled/css";
+
+// Tooltip content floating panel. Positioned by reka-ui (floating-ui),
+// so this only defines the visual surface.
+
+export const tooltipContent = css({
+  bg: "bg.menu",
+  color: "text.primary",
+  fontSize: "xs",
+  fontWeight: "500",
+  lineHeight: "1.4",
+  px: "2.5",
+  py: "1.5",
+  borderRadius: "md",
+  boxShadow:
+    "0 4px 16px -4px rgba(15,23,42,0.08), 0 2px 6px -2px rgba(15,23,42,0.04)",
+  zIndex: "70",
+  maxWidth: "90",
+  whiteSpace: "normal",
+  wordBreak: "break-word",
+  _dark: {
+    boxShadow:
+      "0 4px 16px -4px rgba(0,0,0,0.48), 0 2px 6px -2px rgba(0,0,0,0.28)",
+  },
+});

package/src/components/UiTooltip.test.ts

@@ -0,0 +1,37 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import UiTooltip from "./UiTooltip.vue";
+
+describe("UiTooltip", () => {
+  it("renders the trigger slot", () => {
+    const wrapper = mount(UiTooltip, {
+      props: { content: "Help" },
+      slots: { default: '<button type="button">Hover me</button>' },
+    });
+
+    expect(wrapper.text()).toContain("Hover me");
+    expect(wrapper.find("button").exists()).toBe(true);
+  });
+
+  it("renders the trigger bare when content is empty (no tooltip)", () => {
+    const wrapper = mount(UiTooltip, {
+      props: { content: "" },
+      slots: { default: '<button type="button">Bare</button>' },
+    });
+
+    expect(wrapper.find("button").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Bare");
+    // No tooltip content rendered for empty content.
+    expect(wrapper.find('[role="tooltip"]').exists()).toBe(false);
+  });
+
+  it("keeps the trigger focusable", () => {
+    const wrapper = mount(UiTooltip, {
+      props: { content: "Help" },
+      slots: { default: '<button type="button">Hover me</button>' },
+    });
+
+    const trigger = wrapper.find("button");
+    expect(trigger.attributes("tabindex")).not.toBe("-1");
+  });
+});

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

@@ -13,3 +13,16 @@ 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/css/base.css

@@ -91,11 +91,22 @@ body {
 @keyframes modalIn {
   from {
     opacity: 0;
-    transform: scale(0.95) translateY(12px);
+    transform: translateY(8px) scale(0.97);
   }
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 

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/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>
+    `,
+  }),
+};

package/src/stories/support/sources.ts

@@ -372,3 +372,84 @@ import { PageSurface, SectionCard, StatusBadge, UiButton } from "@aggc/ui";
     </SectionCard>
   </PageSurface>
 </template>`;
+
+export const dataTableDefaultSource = `<script setup lang="ts">
+import { ref } from "vue";
+import { DataTable, UiButton, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent } from "@aggc/ui";
+import type { DataTableColumn } from "@aggc/ui";
+
+interface Member { id: string; name: string; email: string; }
+
+const items = ref<Member[]>([
+  { id: "1", name: "Alice", email: "alice@example.com" },
+  { id: "2", name: "Bob", email: "bob@example.com" },
+]);
+
+const columns: DataTableColumn[] = [
+  { key: "name", label: "Member", width: "1fr" },
+  { key: "email", label: "Email", width: "1fr" },
+];
+
+const selected = ref<string[]>([]);
+</script>
+
+<template>
+  <DataTable v-model:selected="selected" :items="items" :columns="columns" searchable :search-fields="['name', 'email']">
+    <template #bulk-actions="{ selectedItems }">
+      <UiButton size="sm" variant="outline">{{ selectedItems.length }} selected</UiButton>
+    </template>
+    <template #cell-name="{ item }">{{ item.name }}</template>
+    <template #cell-email="{ item }">{{ item.email }}</template>
+    <template #actions="{ item }">
+      <DropdownMenuItem @select="() => {}">Edit {{ item.name }}</DropdownMenuItem>
+    </template>
+  </DataTable>
+</template>`;
+
+export const dataTableLoadingSource = `<script setup lang="ts">
+import { DataTable } from "@aggc/ui";
+import type { DataTableColumn } from "@aggc/ui";
+
+const columns: DataTableColumn[] = [
+  { key: "name", label: "Member", width: "1fr" },
+  { key: "email", label: "Email", width: "1fr" },
+];
+</script>
+
+<template>
+  <DataTable :items="[]" :columns="columns" :is-loading="true" searchable />
+</template>`;
+
+export const uiTooltipDefaultSource = `<script setup lang="ts">
+import { UiTooltip } from "@aggc/ui";
+</script>
+
+<template>
+  <UiTooltip content="Helpful tip">
+    <button type="button">Hover me</button>
+  </UiTooltip>
+</template>`;
+
+export const dataTableSortableSource = `<script setup lang="ts">
+import { ref } from "vue";
+import { DataTable } from "@aggc/ui";
+import type { DataTableColumn } from "@aggc/ui";
+
+interface Member { id: string; name: string; email: string; }
+
+const items = ref<Member[]>([
+  { id: "1", name: "Alice", email: "alice@example.com" },
+  { id: "2", name: "Bob", email: "bob@example.com" },
+  { id: "3", name: "Carla", email: "carla@example.com" },
+  { id: "4", name: "Dan", email: "dan@example.com" },
+]);
+
+const columns: DataTableColumn[] = [
+  { key: "name", label: "Member", width: "1fr", sortable: true },
+  { key: "email", label: "Email", width: "1fr", sortable: true },
+];
+</script>
+
+<template>
+  <DataTable :items="items" :columns="columns" :page-size="3" />
+</template>`;