@aggc/ui 0.4.0 → 0.5.0

package/src/stories/feedback/UiSkeleton.stories.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiSkeleton } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import {
+  storyCaptionClass,
+  storyGridClass,
+  storySectionLabelClass,
+  storyStackClass,
+  storySurfaceClass,
+  storySurfaceWideClass,
+} from "../support/storyStyles";
+import { uiSkeletonStackSource, uiSkeletonVariantsSource } from "../support/sources";
+
+const meta = {
+  title: "Feedback/UiSkeleton",
+  id: "ui-skeleton",
+  component: UiSkeleton,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Shared skeleton primitives for text, stat and action placeholders.",
+      },
+    },
+  },
+} satisfies Meta<typeof UiSkeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Stack: Story = {
+  parameters: {
+    docs: { source: { code: uiSkeletonStackSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiSkeleton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storyStackClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="stack">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Content stack</p>
+          <div :class="storyStackClass">
+            <UiSkeleton variant="title" />
+            <UiSkeleton variant="text" />
+            <UiSkeleton variant="rect" height="120px" />
+          </div>
+          <p :class="storyCaptionClass">Use the stack composition for page bodies and list sections while data is still loading.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Variants: Story = {
+  parameters: {
+    docs: { source: { code: uiSkeletonVariantsSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiSkeleton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storyGridClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="variants">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Available shapes</p>
+          <div :class="storyGridClass">
+            <UiSkeleton variant="title" />
+            <UiSkeleton variant="text" />
+            <UiSkeleton variant="pill" />
+            <UiSkeleton variant="circle" />
+            <UiSkeleton variant="stat" />
+            <UiSkeleton variant="action" />
+          </div>
+          <p :class="storyCaptionClass">Keep skeleton shapes close to the final layout so loading does not create reflow surprises.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/forms/UiCheckbox.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { UiCheckbox } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass } from "../support/storyStyles";
+import {
+  uiCheckboxCheckedSource,
+  uiCheckboxDisabledSource,
+  uiCheckboxUncheckedSource,
+} from "../support/sources";
+
+const meta = {
+  title: "Forms/UiCheckbox",
+  id: "ui-checkbox",
+  component: UiCheckbox,
+  tags: ["autodocs"],
+  args: {
+    modelValue: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Checkbox control with shared label, description and invalid states.",
+      },
+    },
+  },
+} satisfies Meta<typeof UiCheckbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unchecked: Story = {
+  parameters: {
+    docs: { source: { code: uiCheckboxUncheckedSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiCheckbox },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const enabled = ref(false);
+      return { enabled, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="unchecked">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <p :class="storySectionLabelClass">Unchecked</p>
+          <UiCheckbox v-model="enabled" label="Enable feature flag" description="Unchecked baseline state." />
+          <p :class="storyCaptionClass">Baseline checkbox state with label and supporting description.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Checked: Story = {
+  parameters: {
+    docs: { source: { code: uiCheckboxCheckedSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiCheckbox },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const enabled = ref(true);
+      return { enabled, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="checked">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <p :class="storySectionLabelClass">Checked</p>
+          <UiCheckbox v-model="enabled" label="Enable feature flag" description="Checked baseline state." />
+          <p :class="storyCaptionClass">The checked state keeps the same layout and emphasis as the baseline control.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  parameters: {
+    docs: { source: { code: uiCheckboxDisabledSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiCheckbox },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const enabled = ref(true);
+      return { enabled, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceCompactClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="disabled">
+        <div :class="[storySurfaceClass, storySurfaceCompactClass]">
+          <p :class="storySectionLabelClass">Disabled</p>
+          <UiCheckbox
+            v-model="enabled"
+            label="Protected setting"
+            description="Disabled state keeps the same layout and copy."
+            disabled
+          />
+          <p :class="storyCaptionClass">Use disabled controls sparingly and keep the label explicit about why the setting cannot be changed.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/forms/UiField.stories.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { StatusBadge, UiField, UiSelect } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass } from "../support/storyStyles";
+import { uiFieldMetaSource, uiFieldSource } from "../support/sources";
+
+const meta = {
+  title: "Forms/UiField",
+  id: "ui-field",
+  component: UiField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Labeling wrapper for form controls that need shared copy and field-level status.",
+      },
+    },
+  },
+} satisfies Meta<typeof UiField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { label: "Desktop app", value: "desktop" },
+  { label: "Public web", value: "web" },
+];
+
+export const Basic: Story = {
+  parameters: {
+    docs: { source: { code: uiFieldSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiField, UiSelect },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const target = ref("desktop");
+      return { options, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass, target };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="basic">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Baseline field</p>
+          <UiField id="consumer-target-hint" for-id="consumer-target" label="Consumer target" hint="The same component works in desktop and public web.">
+            <UiSelect id="consumer-target" v-model="target" :options="options" aria-describedby="consumer-target-hint" />
+          </UiField>
+          <p :class="storyCaptionClass">UiField handles label, hint and field rhythm so controls stay visually consistent.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const WithMeta: Story = {
+  parameters: {
+    docs: { source: { code: uiFieldMetaSource } },
+  },
+  render: () => ({
+    components: { StatusBadge, StoryThemeFrame, UiField, UiSelect },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const target = ref("web");
+      return { options, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass, target };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="with-meta">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Field metadata</p>
+          <UiField
+            id="consumer-target-meta-hint"
+            for-id="consumer-target-meta"
+            eyebrow="Shared system"
+            label="Release target"
+            hint="Use the meta slot for compact status context."
+          >
+            <template #meta>
+              <StatusBadge tone="info">Required</StatusBadge>
+            </template>
+            <UiSelect id="consumer-target-meta" v-model="target" :options="options" aria-describedby="consumer-target-meta-hint" />
+          </UiField>
+          <p :class="storyCaptionClass">The meta slot is useful for compact status or requirement markers without crowding the main label copy.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/forms/UiSelect.stories.ts

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { defineComponent, onMounted, ref } from "vue";
+import { UiField, UiSelect } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass } from "../support/storyStyles";
+import { uiSelectClosedSource, uiSelectOpenSource, uiSelectSmallSource } from "../support/sources";
+
+const options = [
+  { label: "Desktop app", value: "desktop", description: "Product shell and authenticated workflows." },
+  { label: "Public web", value: "web", description: "Marketing site and reusable presentation sections." },
+];
+
+const meta = {
+  title: "Forms/UiSelect",
+  id: "ui-select",
+  component: UiSelect,
+  tags: ["autodocs"],
+  args: {
+    modelValue: "desktop",
+    options,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Shared select control with deterministic open state for docs and visual testing.",
+      },
+    },
+  },
+} satisfies Meta<typeof UiSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const OpenSelectDemo = defineComponent({
+  name: "OpenSelectDemo",
+  components: { UiField, UiSelect },
+  setup() {
+    const value = ref("desktop");
+    onMounted(() => {
+      requestAnimationFrame(() => {
+        document.querySelector<HTMLButtonElement>("#docs-select-open")?.click();
+      });
+    });
+
+    return { options, value };
+  },
+  template: `
+    <UiField
+      id="docs-select-open-hint"
+      for-id="docs-select-open"
+      label="Consumer target"
+      hint="Open state of the shared select component."
+    >
+      <UiSelect
+        id="docs-select-open"
+        v-model="value"
+        :options="options"
+        aria-describedby="docs-select-open-hint"
+      />
+    </UiField>
+  `,
+});
+
+export const Closed: Story = {
+  parameters: {
+    docs: { source: { code: uiSelectClosedSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiField, UiSelect },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const value = ref("desktop");
+      return { options, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass, value };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="closed">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Baseline</p>
+          <UiField id="consumer-target-hint" for-id="consumer-target" label="Consumer target" hint="The same component works in desktop and public web.">
+            <UiSelect id="consumer-target" v-model="value" :options="options" aria-describedby="consumer-target-hint" />
+          </UiField>
+          <p :class="storyCaptionClass">Closed state keeps label, selected value and icon alignment stable across themes.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Open: Story = {
+  parameters: {
+    docs: { source: { code: uiSelectOpenSource } },
+  },
+  render: () => ({
+    components: { OpenSelectDemo, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="open">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Open listbox</p>
+          <OpenSelectDemo />
+          <p :class="storyCaptionClass">The open state is deterministic so it can be documented and captured in visual tests.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const Small: Story = {
+  parameters: {
+    docs: { source: { code: uiSelectSmallSource } },
+  },
+  render: () => ({
+    components: { StoryThemeFrame, UiField, UiSelect },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      const value = ref("web");
+      return { options, previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass, value };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="small">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Compact control</p>
+          <UiField id="consumer-target-small-hint" for-id="consumer-target-small" label="Compact selector" hint="Use the small size in dense toolbars or secondary controls.">
+            <UiSelect id="consumer-target-small" v-model="value" size="sm" :options="options" aria-describedby="consumer-target-small-hint" />
+          </UiField>
+          <p :class="storyCaptionClass">The small variant keeps the same semantics and dropdown behavior while reducing vertical footprint.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/layout/PageSurface.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { PageSurface, SectionCard, StatusBadge, UiButton } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceWideClass } from "../support/storyStyles";
+import { pageSurfaceSource } from "../support/sources";
+
+const meta = {
+  title: "Layout/PageSurface",
+  id: "page-surface",
+  component: PageSurface,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Top-level scroll-aware wrapper for page-sized views and workspace surfaces.",
+      },
+    },
+  },
+} satisfies Meta<typeof PageSurface>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Overview: Story = {
+  parameters: {
+    docs: { source: { code: pageSurfaceSource } },
+  },
+  render: () => ({
+    components: { PageSurface, SectionCard, StatusBadge, StoryThemeFrame, UiButton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="overview">
+        <div :class="storySurfaceWideClass">
+          <p :class="storySectionLabelClass">Page wrapper</p>
+          <PageSurface>
+            <SectionCard title="Release summary" eyebrow="Shared shell" description="Use PageSurface as the main scroll-aware wrapper for top-level screens.">
+              <template #actions>
+                <StatusBadge tone="info">Desktop + Web</StatusBadge>
+              </template>
+              <p>PageSurface gives top-level views a predictable outer rhythm and width behavior.</p>
+              <UiButton>Primary action</UiButton>
+            </SectionCard>
+          </PageSurface>
+          <p :class="storyCaptionClass">Use PageSurface at the page level, not for nested cards or inline sub-sections.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};

package/src/stories/layout/SectionCard.stories.ts

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { StatusBadge, SectionCard, UiButton } from "../../components";
+import StoryThemeFrame from "../support/StoryThemeFrame.vue";
+import { ref } from "vue";
+import { storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass } from "../support/storyStyles";
+import { sectionCardDefaultSource, sectionCardScrollSource } from "../support/sources";
+
+const meta = {
+  title: "Layout/SectionCard",
+  id: "section-card",
+  component: SectionCard,
+  tags: ["autodocs"],
+  args: {
+    title: "Section title",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Reusable section surface for grouped content with optional actions.",
+      },
+    },
+  },
+} satisfies Meta<typeof SectionCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: { source: { code: sectionCardDefaultSource } },
+  },
+  render: () => ({
+    components: { SectionCard, StatusBadge, StoryThemeFrame, UiButton },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="default">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Base surface</p>
+          <SectionCard title="AGGC UI Playground" eyebrow="Shared system" description="Visual reference for reusable components and patterns.">
+            <template #actions>
+              <StatusBadge tone="info">v0.1.0</StatusBadge>
+            </template>
+            <p>Shared components should render consistently in desktop and public web.</p>
+            <UiButton variant="outline">Open docs</UiButton>
+          </SectionCard>
+          <p :class="storyCaptionClass">Use SectionCard for focused regions with a strong header and optional header actions.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};
+
+export const ScrollBody: Story = {
+  parameters: {
+    docs: { source: { code: sectionCardScrollSource } },
+  },
+  render: () => ({
+    components: { SectionCard, StatusBadge, StoryThemeFrame },
+    setup() {
+      const previewTheme = ref<"light" | "dark">("dark");
+      return { previewTheme, storyCaptionClass, storySectionLabelClass, storySurfaceClass, storySurfaceWideClass };
+    },
+    template: `
+      <StoryThemeFrame v-model:theme="previewTheme" preview-id="scroll-body">
+        <div :class="[storySurfaceClass, storySurfaceWideClass]">
+          <p :class="storySectionLabelClass">Scrollable body</p>
+          <SectionCard title="Changelog" eyebrow="Scrollable region" description="Longer bodies can scroll without breaking the card header." scroll-body>
+            <template #actions>
+              <StatusBadge tone="neutral">14 entries</StatusBadge>
+            </template>
+            <p>Release note 1. Shared surfaces keep spacing stable across dense content.</p>
+            <p>Release note 2. Shared surfaces keep spacing stable across dense content.</p>
+            <p>Release note 3. Shared surfaces keep spacing stable across dense content.</p>
+            <p>Release note 4. Shared surfaces keep spacing stable across dense content.</p>
+            <p>Release note 5. Shared surfaces keep spacing stable across dense content.</p>
+          </SectionCard>
+          <p :class="storyCaptionClass">Use scrollBody when long detail lists should stay within a bounded panel.</p>
+        </div>
+      </StoryThemeFrame>
+    `,
+  }),
+};