@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiSheet/UiSheet.stories.ts

@@ -0,0 +1,715 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  UiSheet,
+  UiSheetClose,
+  UiSheetContent,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetTrigger,
+} from '.';
+import { UiButton } from '../UiButton';
+import { UiInput } from '../UiInput';
+import { UiLabel } from '../UiLabel';
+import { ref, watch } from 'vue';
+
+/**
+ * UiSheet slides a panel in from the edge of the screen.
+ * Use it for supplementary content like forms, filters, detail views, or settings
+ * that shouldn't navigate away from the current page.
+ */
+const meta: Meta<typeof UiSheet> = {
+  title: 'Components/UiSheet',
+  component: UiSheet,
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Controlled open state (use `v-model:open` for controlled mode).',
+    },
+    modal: {
+      control: 'boolean',
+      description: 'If true, traps focus and blocks interaction with the page while open.',
+    },
+  },
+  args: {
+    open: false,
+    modal: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiSheet>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiSheet>
+    <UiSheetTrigger as-child>
+      <UiButton variant="outline">Open Sheet</UiButton>
+    </UiSheetTrigger>
+    <UiSheetContent>
+      <UiSheetHeader>
+        <UiSheetTitle>Sheet title</UiSheetTitle>
+        <UiSheetDescription>
+          A slide-out panel for supplementary content.
+        </UiSheetDescription>
+      </UiSheetHeader>
+      <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+        Put any content here.
+      </div>
+      <UiSheetFooter>
+        <UiSheetClose as-child>
+          <UiButton>Close</UiButton>
+        </UiSheetClose>
+      </UiSheetFooter>
+    </UiSheetContent>
+  </UiSheet>
+</template>`;
+
+/**
+ * Basic sheet composition showing Trigger + Content + Header/Footer.
+ * Opens from the right side by default.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetFooter,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+    },
+    setup() {
+      const open = ref(args.open);
+      const modal = ref(args.modal);
+
+      watch(
+        () => args.open,
+        (val) => {
+          open.value = val;
+        },
+      );
+      watch(
+        () => args.modal,
+        (val) => {
+          modal.value = val;
+        },
+      );
+
+      return { open, modal };
+    },
+    template: `
+      <UiSheet v-model:open="open" :modal="modal">
+        <UiSheetTrigger as-child>
+          <UiButton variant="outline">Open Sheet</UiButton>
+        </UiSheetTrigger>
+        <UiSheetContent>
+          <UiSheetHeader>
+            <UiSheetTitle>Sheet title</UiSheetTitle>
+            <UiSheetDescription>
+              A slide-out panel for supplementary content.
+            </UiSheetDescription>
+          </UiSheetHeader>
+          <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+            Put any content here.
+          </div>
+          <UiSheetFooter>
+            <UiSheetClose as-child>
+              <UiButton>Close</UiButton>
+            </UiSheetClose>
+          </UiSheetFooter>
+        </UiSheetContent>
+      </UiSheet>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: defaultTemplateSource } },
+  },
+};
+
+const controlledTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(false)
+</script>
+
+<template>
+  <UiSheet v-model:open="open">
+    <UiSheetTrigger as-child>
+      <UiButton variant="outline">
+        {{ open ? 'Close' : 'Open' }} Sheet
+      </UiButton>
+    </UiSheetTrigger>
+    <UiSheetContent>
+      <UiSheetHeader>
+        <UiSheetTitle>Controlled sheet</UiSheetTitle>
+        <UiSheetDescription>
+          This sheet is controlled via v-model:open.
+        </UiSheetDescription>
+      </UiSheetHeader>
+      <div class="flex-1 overflow-auto px-4 py-4 text-sm space-y-3">
+        <p>Click the buttons below to close programmatically.</p>
+        <div class="flex gap-2 flex-wrap">
+          <UiButton size="sm" @click="open = false">Close via model</UiButton>
+          <UiSheetClose as-child>
+            <UiButton size="sm" variant="outline">Close via UiSheetClose</UiButton>
+          </UiSheetClose>
+        </div>
+      </div>
+    </UiSheetContent>
+  </UiSheet>
+</template>`;
+
+/**
+ * Controlled sheet using `v-model:open`.
+ * Use this when visibility is driven by app state (router, async flows, programmatic close).
+ */
+export const Controlled: Story = {
+  render: () => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetFooter,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+    },
+    setup() {
+      const open = ref(false);
+      return { open };
+    },
+    template: `
+      <UiSheet v-model:open="open">
+        <UiSheetTrigger as-child>
+          <UiButton variant="outline">
+            {{ open ? 'Close' : 'Open' }} Sheet
+          </UiButton>
+        </UiSheetTrigger>
+        <UiSheetContent>
+          <UiSheetHeader>
+            <UiSheetTitle>Controlled sheet</UiSheetTitle>
+            <UiSheetDescription>
+              This sheet is controlled via v-model:open.
+            </UiSheetDescription>
+          </UiSheetHeader>
+          <div class="flex-1 overflow-auto px-4 py-4 text-sm space-y-3">
+            <p>Click the buttons below to close programmatically.</p>
+            <div class="flex gap-2 flex-wrap">
+              <UiButton size="sm" @click="open = false">Close via model</UiButton>
+              <UiSheetClose as-child>
+                <UiButton size="sm" variant="outline">Close via UiSheetClose</UiButton>
+              </UiSheetClose>
+            </div>
+          </div>
+        </UiSheetContent>
+      </UiSheet>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: controlledTemplateSource } },
+  },
+};
+
+const sideVariantsTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <UiSheet v-for="side in ['top', 'right', 'bottom', 'left']" :key="side">
+      <UiSheetTrigger as-child>
+        <UiButton variant="outline">{{ side }}</UiButton>
+      </UiSheetTrigger>
+      <UiSheetContent :side="side">
+        <UiSheetHeader>
+          <UiSheetTitle>{{ side }} sheet</UiSheetTitle>
+          <UiSheetDescription>
+            This sheet slides in from the {{ side }}.
+          </UiSheetDescription>
+        </UiSheetHeader>
+        <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+          Content for the {{ side }} sheet.
+        </div>
+        <UiSheetClose as-child>
+          <UiButton class="mx-4 mb-4">Close</UiButton>
+        </UiSheetClose>
+      </UiSheetContent>
+    </UiSheet>
+  </div>
+</template>`;
+
+/**
+ * All four side variants: top, right, bottom, left.
+ * The `side` prop on `UiSheetContent` controls the slide-in direction.
+ */
+export const SideVariants: Story = {
+  render: () => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+    },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <UiSheet v-for="side in ['top', 'right', 'bottom', 'left']" :key="side">
+          <UiSheetTrigger as-child>
+            <UiButton variant="outline">{{ side }}</UiButton>
+          </UiSheetTrigger>
+          <UiSheetContent :side="side">
+            <UiSheetHeader>
+              <UiSheetTitle>{{ side }} sheet</UiSheetTitle>
+              <UiSheetDescription>
+                This sheet slides in from the {{ side }}.
+              </UiSheetDescription>
+            </UiSheetHeader>
+            <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+              Content for the {{ side }} sheet.
+            </div>
+            <UiSheetClose as-child>
+              <UiButton class="mx-4 mb-4">Close</UiButton>
+            </UiSheetClose>
+          </UiSheetContent>
+        </UiSheet>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: sideVariantsTemplateSource } },
+  },
+};
+
+const nonModalTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p class="text-sm text-muted-foreground">
+      Non-modal sheet: you can still interact with the page while it is open.
+    </p>
+    <UiSheet :modal="false">
+      <UiSheetTrigger as-child>
+        <UiButton variant="outline">Open non-modal</UiButton>
+      </UiSheetTrigger>
+      <UiSheetContent>
+        <UiSheetHeader>
+          <UiSheetTitle>Non-modal sheet</UiSheetTitle>
+          <UiSheetDescription>
+            Outside interaction is allowed.
+          </UiSheetDescription>
+        </UiSheetHeader>
+        <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+          Try selecting text outside the sheet.
+        </div>
+        <UiSheetFooter>
+          <UiSheetClose as-child>
+            <UiButton>Close</UiButton>
+          </UiSheetClose>
+        </UiSheetFooter>
+      </UiSheetContent>
+    </UiSheet>
+  </div>
+</template>`;
+
+/**
+ * Non-modal sheet (`modal=false`) where outside interaction remains possible.
+ * Use this for lightweight panels that shouldn't block the rest of the UI.
+ */
+export const NonModal: Story = {
+  render: () => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetFooter,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+    },
+    template: `
+      <div class="space-y-4">
+        <p class="text-sm text-muted-foreground">
+          Non-modal sheet: you can still interact with the page while it is open.
+        </p>
+        <UiSheet :modal="false">
+          <UiSheetTrigger as-child>
+            <UiButton variant="outline">Open non-modal</UiButton>
+          </UiSheetTrigger>
+          <UiSheetContent>
+            <UiSheetHeader>
+              <UiSheetTitle>Non-modal sheet</UiSheetTitle>
+              <UiSheetDescription>
+                Outside interaction is allowed.
+              </UiSheetDescription>
+            </UiSheetHeader>
+            <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+              Try selecting text outside the sheet.
+            </div>
+            <UiSheetFooter>
+              <UiSheetClose as-child>
+                <UiButton>Close</UiButton>
+              </UiSheetClose>
+            </UiSheetFooter>
+          </UiSheetContent>
+        </UiSheet>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: nonModalTemplateSource } },
+  },
+};
+
+const withFormTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetClose,
+  UiButton,
+  UiInput,
+  UiLabel,
+} from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(false)
+</script>
+
+<template>
+  <UiSheet v-model:open="open">
+    <UiSheetTrigger as-child>
+      <UiButton variant="outline">Edit Profile</UiButton>
+    </UiSheetTrigger>
+    <UiSheetContent>
+      <UiSheetHeader>
+        <UiSheetTitle>Edit profile</UiSheetTitle>
+        <UiSheetDescription>
+          Make changes to your profile here. Click save when you're done.
+        </UiSheetDescription>
+      </UiSheetHeader>
+      <div class="flex-1 overflow-auto px-4 py-4 space-y-4">
+        <div class="space-y-2">
+          <UiLabel for="name">Name</UiLabel>
+          <UiInput id="name" placeholder="Enter your name" />
+        </div>
+        <div class="space-y-2">
+          <UiLabel for="email">Email</UiLabel>
+          <UiInput id="email" placeholder="Enter your email" />
+        </div>
+      </div>
+      <UiSheetFooter>
+        <UiSheetClose as-child>
+          <UiButton variant="outline">Cancel</UiButton>
+        </UiSheetClose>
+        <UiButton @click="open = false">Save changes</UiButton>
+      </UiSheetFooter>
+    </UiSheetContent>
+  </UiSheet>
+</template>`;
+
+/**
+ * Sheet with a form layout for editing data.
+ * A common pattern for settings panels, profile editing, or filter configuration.
+ */
+export const WithForm: Story = {
+  render: () => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetFooter,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+      UiInput,
+      UiLabel,
+    },
+    setup() {
+      const open = ref(false);
+      return { open };
+    },
+    template: `
+      <UiSheet v-model:open="open">
+        <UiSheetTrigger as-child>
+          <UiButton variant="outline">Edit Profile</UiButton>
+        </UiSheetTrigger>
+        <UiSheetContent>
+          <UiSheetHeader>
+            <UiSheetTitle>Edit profile</UiSheetTitle>
+            <UiSheetDescription>
+              Make changes to your profile here. Click save when you're done.
+            </UiSheetDescription>
+          </UiSheetHeader>
+          <div class="flex-1 overflow-auto px-4 py-4 space-y-4">
+            <div class="space-y-2">
+              <UiLabel for="name">Name</UiLabel>
+              <UiInput id="name" placeholder="Enter your name" />
+            </div>
+            <div class="space-y-2">
+              <UiLabel for="email">Email</UiLabel>
+              <UiInput id="email" placeholder="Enter your email" />
+            </div>
+          </div>
+          <UiSheetFooter>
+            <UiSheetClose as-child>
+              <UiButton variant="outline">Cancel</UiButton>
+            </UiSheetClose>
+            <UiButton @click="open = false">Save changes</UiButton>
+          </UiSheetFooter>
+        </UiSheetContent>
+      </UiSheet>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: withFormTemplateSource } },
+  },
+};
+
+const longContentTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiSheet>
+    <UiSheetTrigger as-child>
+      <UiButton variant="outline">Open long content</UiButton>
+    </UiSheetTrigger>
+    <UiSheetContent>
+      <UiSheetHeader>
+        <UiSheetTitle>Long content</UiSheetTitle>
+        <UiSheetDescription>
+          Demonstrates scrolling content inside the sheet.
+        </UiSheetDescription>
+      </UiSheetHeader>
+      <div class="flex-1 overflow-auto px-4 py-4">
+        <div class="space-y-2 text-sm">
+          <p v-for="i in 30" :key="i">Item {{ i }} — Lorem ipsum dolor sit amet.</p>
+        </div>
+      </div>
+      <UiSheetFooter>
+        <UiSheetClose as-child>
+          <UiButton>Close</UiButton>
+        </UiSheetClose>
+      </UiSheetFooter>
+    </UiSheetContent>
+  </UiSheet>
+</template>`;
+
+/**
+ * Sheet with scrollable content.
+ * Use this for lists or forms that exceed the viewport height.
+ */
+export const LongContent: Story = {
+  render: () => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetFooter,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+    },
+    template: `
+      <UiSheet>
+        <UiSheetTrigger as-child>
+          <UiButton variant="outline">Open long content</UiButton>
+        </UiSheetTrigger>
+        <UiSheetContent>
+          <UiSheetHeader>
+            <UiSheetTitle>Long content</UiSheetTitle>
+            <UiSheetDescription>
+              Demonstrates scrolling content inside the sheet.
+            </UiSheetDescription>
+          </UiSheetHeader>
+          <div class="flex-1 overflow-auto px-4 py-4">
+            <div class="space-y-2 text-sm">
+              <p v-for="i in 30" :key="i">Item {{ i }} — Lorem ipsum dolor sit amet.</p>
+            </div>
+          </div>
+          <UiSheetFooter>
+            <UiSheetClose as-child>
+              <UiButton>Close</UiButton>
+            </UiSheetClose>
+          </UiSheetFooter>
+        </UiSheetContent>
+      </UiSheet>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: longContentTemplateSource } },
+  },
+};
+
+const openByDefaultTemplateSource = `<script setup lang="ts">
+import {
+  UiSheet,
+  UiSheetTrigger,
+  UiSheetContent,
+  UiSheetHeader,
+  UiSheetTitle,
+  UiSheetDescription,
+  UiSheetFooter,
+  UiSheetClose,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(true)
+</script>
+
+<template>
+  <UiSheet v-model:open="open">
+    <UiSheetTrigger as-child>
+      <UiButton variant="outline">Toggle Sheet</UiButton>
+    </UiSheetTrigger>
+    <UiSheetContent>
+      <UiSheetHeader>
+        <UiSheetTitle>Open by default</UiSheetTitle>
+        <UiSheetDescription>
+          Useful for visual regression testing.
+        </UiSheetDescription>
+      </UiSheetHeader>
+      <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+        This sheet starts open.
+      </div>
+      <UiSheetFooter>
+        <UiSheetClose as-child>
+          <UiButton>Close</UiButton>
+        </UiSheetClose>
+      </UiSheetFooter>
+    </UiSheetContent>
+  </UiSheet>
+</template>`;
+
+/**
+ * Sheet that starts open.
+ * Use this for visual regression testing to capture sheet content without user interaction.
+ */
+export const OpenByDefault: Story = {
+  render: () => ({
+    components: {
+      UiSheet,
+      UiSheetClose,
+      UiSheetContent,
+      UiSheetDescription,
+      UiSheetFooter,
+      UiSheetHeader,
+      UiSheetTitle,
+      UiSheetTrigger,
+      UiButton,
+    },
+    setup() {
+      const open = ref(true);
+      return { open };
+    },
+    template: `
+      <UiSheet v-model:open="open">
+        <UiSheetTrigger as-child>
+          <UiButton variant="outline">Toggle Sheet</UiButton>
+        </UiSheetTrigger>
+        <UiSheetContent>
+          <UiSheetHeader>
+            <UiSheetTitle>Open by default</UiSheetTitle>
+            <UiSheetDescription>
+              Useful for visual regression testing.
+            </UiSheetDescription>
+          </UiSheetHeader>
+          <div class="flex-1 overflow-auto px-4 py-4 text-sm">
+            This sheet starts open.
+          </div>
+          <UiSheetFooter>
+            <UiSheetClose as-child>
+              <UiButton>Close</UiButton>
+            </UiSheetClose>
+          </UiSheetFooter>
+        </UiSheetContent>
+      </UiSheet>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: openByDefaultTemplateSource } },
+  },
+};