@aleph-alpha/ui-library 1.8.0 → 1.10.0

package/src/primitives/UiInput/UiInput.stories.ts

@@ -0,0 +1,193 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiInput from './UiInput.vue';
+import { UiButton } from '../UiButton';
+
+const meta: Meta<typeof UiInput> = {
+  title: 'Primitives/UiInput',
+  component: UiInput,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Set component as disabled',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Set component as required',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+  },
+  args: {
+    name: 'input',
+    disabled: false,
+    required: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiInput>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiInput } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiInput type="email" name="email" placeholder="Email" />
+</template>`;
+
+/**
+ * Default input field.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiInput },
+    setup() {
+      return { args };
+    },
+    template: `<UiInput type="email" name="email" placeholder="Email" :disabled="args.disabled" :required="args.required" />`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const withLabelTemplateSource = `<script setup lang="ts">
+import { UiInput } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="grid w-full max-w-sm items-center gap-1.5">
+    <label for="email" class="text-sm font-medium">Email</label>
+    <UiInput id="email" name="email" type="email" placeholder="Email" />
+  </div>
+</template>`;
+
+/**
+ * Input with label for better accessibility.
+ */
+export const WithLabel: Story = {
+  render: (args) => ({
+    components: { UiInput },
+    setup() {
+      return { args };
+    },
+    template: `<div class="grid w-full max-w-sm items-center gap-1.5">
+      <label for="email" class="text-sm font-medium">Email</label>
+      <UiInput id="email" name="email" type="email" placeholder="Email" :disabled="args.disabled" :required="args.required" />
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withLabelTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiInput } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiInput name="disabled" disabled placeholder="Disabled input" />
+</template>`;
+
+/**
+ * Disabled input field.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { UiInput },
+    setup() {
+      return { args };
+    },
+    template: `<UiInput name="disabled" :disabled="args.disabled" placeholder="Disabled input" />`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};
+
+const withButtonTemplateSource = `<script setup lang="ts">
+import { UiInput, UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex w-full max-w-sm items-center space-x-2">
+    <UiInput name="email" type="email" placeholder="Email" />
+    <UiButton type="submit">Subscribe</UiButton>
+  </div>
+</template>`;
+
+/**
+ * Input with button, commonly used for subscriptions or search.
+ */
+export const WithButton: Story = {
+  render: (args) => ({
+    components: { UiInput, UiButton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex w-full max-w-sm items-center space-x-2">
+      <UiInput name="email" type="email" placeholder="Email" :disabled="args.disabled" />
+      <UiButton type="submit">Subscribe</UiButton>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withButtonTemplateSource,
+      },
+    },
+  },
+};
+
+const fileTemplateSource = `<script setup lang="ts">
+import { UiInput } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="grid w-full max-w-sm items-center gap-1.5">
+    <label for="picture" class="text-sm font-medium">Picture</label>
+    <UiInput id="picture" name="picture" type="file" />
+  </div>
+</template>`;
+
+/**
+ * File input for uploads.
+ */
+export const File: Story = {
+  render: (args) => ({
+    components: { UiInput },
+    setup() {
+      return { args };
+    },
+    template: `<div class="grid w-full max-w-sm items-center gap-1.5">
+      <label for="picture" class="text-sm font-medium">Picture</label>
+      <UiInput id="picture" name="picture" type="file" :disabled="args.disabled" />
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: fileTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiInput/UiInput.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { Input as ShadcnInput } from '@/primitives/shadcn/input';
+  import { UiInputProps } from './types';
+
+  defineOptions({
+    name: 'UiInput',
+  });
+
+  const props = withDefaults(defineProps<UiInputProps>(), {
+    disabled: false,
+    placeholder: undefined,
+  });
+
+  const model = defineModel<string>();
+</script>
+
+<template>
+  <ShadcnInput v-model="model" v-bind="props" />
+</template>

package/src/primitives/UiInput/__tests__/UiInput.test.ts

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+import UiInput from '../UiInput.vue';
+
+describe('UiInput', () => {
+  test('renders input with placeholder', () => {
+    const placeholder = 'Input Placeholder';
+    const { getByPlaceholderText } = render(UiInput, {
+      props: {
+        placeholder,
+      },
+    });
+    expect(getByPlaceholderText(placeholder)).toBeInTheDocument();
+  });
+
+  test('renders input normally', () => {
+    const { getByRole } = render(UiInput);
+    expect(getByRole('textbox')).toBeEnabled();
+  });
+
+  test('renders input disabled', () => {
+    const { getByRole } = render(UiInput, {
+      props: {
+        disabled: true,
+      },
+    });
+    expect(getByRole('textbox')).toBeDisabled();
+  });
+
+  test('emits update:modelValue on user input', async () => {
+    const testValue = 'Hello';
+    const { getByRole, emitted } = render(UiInput);
+    await userEvent.type(getByRole('textbox'), testValue);
+    const emittedModelValue = emitted('update:modelValue') as string[][];
+    expect(emittedModelValue[emittedModelValue.length - 1][0]).toMatch(testValue);
+  });
+});

package/src/primitives/UiInput/index.ts

@@ -0,0 +1,2 @@
+export { default as UiInput } from './UiInput.vue';
+export * from './types';

package/src/primitives/UiInput/types.ts

@@ -0,0 +1,31 @@
+/**
+ * A text input field for single-line user input. Use for forms, search bars,
+ * and any text entry that fits on one line.
+ *
+ * @category Form Inputs
+ * @useCases text entry, search field, email input, password field, form field
+ * @keywords input, text, field, form, search, email, password, textbox
+ * @related UiTextarea, UiSelect, UiCheckbox
+ */
+export interface UiInputProps {
+  /**
+   * Prop to name the element
+   */
+  name: string;
+  /**
+   * Prop to define the Input as disabled, therefore blocking all user interaction with it.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+ /**
+   * Prop to define the Input placeholder text.
+   * @default undefined
+   */
+  placeholder?: string;
+  /**
+   * Define the element as required on a Form.
+   * @default false
+   */
+  required?: boolean;
+}

package/src/primitives/UiPopover/UiPopover.stories.ts

@@ -0,0 +1,394 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { UiPopover, UiPopoverTrigger, UiPopoverContent } from '.';
+import { UiButton } from '../UiButton';
+import { ref, watch } from 'vue';
+
+const meta: Meta<typeof UiPopover> = {
+  title: 'Primitives/UiPopover',
+  component: UiPopover,
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Controls whether the popover is open',
+    },
+    modal: {
+      control: 'boolean',
+      description: 'Whether the popover should be modal',
+    },
+  },
+  args: {
+    open: false,
+    modal: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiPopover>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiPopover>
+    <UiPopoverTrigger as-child>
+      <UiButton variant="outline">Open Popover</UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent>
+      <div class="space-y-2">
+        <h4 class="font-medium leading-none">Dimensions</h4>
+        <p class="text-sm text-muted-foreground">
+          Set the dimensions for the layer.
+        </p>
+      </div>
+    </UiPopoverContent>
+  </UiPopover>
+</template>`;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, 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: `
+      <UiPopover v-model:open="open" :modal="modal">
+        <UiPopoverTrigger as-child>
+          <UiButton variant="outline">Open Popover</UiButton>
+        </UiPopoverTrigger>
+        <UiPopoverContent>
+          <div class="space-y-2">
+            <h4 class="font-medium leading-none">Dimensions</h4>
+            <p class="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+        </UiPopoverContent>
+      </UiPopover>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const controlledTemplateSource = `<script setup lang="ts">
+import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(false)
+</script>
+
+<template>
+  <UiPopover v-model:open="open">
+    <UiPopoverTrigger as-child>
+      <UiButton variant="outline">
+        {{ open ? 'Close' : 'Open' }} Popover
+      </UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent>
+      <div class="space-y-2">
+        <h4 class="font-medium leading-none">Controlled Popover</h4>
+        <p class="text-sm text-muted-foreground">
+          This popover is controlled via v-model:open.
+        </p>
+        <UiButton size="sm" @click="open = false">Close</UiButton>
+      </div>
+    </UiPopoverContent>
+  </UiPopover>
+</template>`;
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
+    setup() {
+      const open = ref(false);
+      return { open };
+    },
+    template: `
+      <UiPopover v-model:open="open">
+        <UiPopoverTrigger as-child>
+          <UiButton variant="outline">
+            {{ open ? 'Close' : 'Open' }} Popover
+          </UiButton>
+        </UiPopoverTrigger>
+        <UiPopoverContent>
+          <div class="space-y-2">
+            <h4 class="font-medium leading-none">Controlled Popover</h4>
+            <p class="text-sm text-muted-foreground">
+              This popover is controlled via v-model:open.
+            </p>
+            <UiButton size="sm" @click="open = false">Close</UiButton>
+          </div>
+        </UiPopoverContent>
+      </UiPopover>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: controlledTemplateSource,
+      },
+    },
+  },
+};
+
+const positionsTemplateSource = `<script setup lang="ts">
+import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex gap-4 flex-wrap">
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Top</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent side="top">
+        <p class="text-sm">Popover on top</p>
+      </UiPopoverContent>
+    </UiPopover>
+
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Right</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent side="right">
+        <p class="text-sm">Popover on right</p>
+      </UiPopoverContent>
+    </UiPopover>
+
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Bottom</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent side="bottom">
+        <p class="text-sm">Popover on bottom</p>
+      </UiPopoverContent>
+    </UiPopover>
+
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Left</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent side="left">
+        <p class="text-sm">Popover on left</p>
+      </UiPopoverContent>
+    </UiPopover>
+  </div>
+</template>`;
+
+export const Positions: Story = {
+  render: () => ({
+    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
+    template: `
+      <div class="flex gap-4 flex-wrap">
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Top</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent side="top">
+            <p class="text-sm">Popover on top</p>
+          </UiPopoverContent>
+        </UiPopover>
+
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Right</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent side="right">
+            <p class="text-sm">Popover on right</p>
+          </UiPopoverContent>
+        </UiPopover>
+
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Bottom</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent side="bottom">
+            <p class="text-sm">Popover on bottom</p>
+          </UiPopoverContent>
+        </UiPopover>
+
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Left</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent side="left">
+            <p class="text-sm">Popover on left</p>
+          </UiPopoverContent>
+        </UiPopover>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: positionsTemplateSource,
+      },
+    },
+  },
+};
+
+const alignmentsTemplateSource = `<script setup lang="ts">
+import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex gap-4 flex-wrap">
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Align Start</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent align="start">
+        <p class="text-sm">Aligned to start</p>
+      </UiPopoverContent>
+    </UiPopover>
+
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Align Center</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent align="center">
+        <p class="text-sm">Aligned to center</p>
+      </UiPopoverContent>
+    </UiPopover>
+
+    <UiPopover>
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Align End</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent align="end">
+        <p class="text-sm">Aligned to end</p>
+      </UiPopoverContent>
+    </UiPopover>
+  </div>
+</template>`;
+
+export const Alignments: Story = {
+  render: () => ({
+    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
+    template: `
+      <div class="flex gap-4 flex-wrap">
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Align Start</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent align="start">
+            <p class="text-sm">Aligned to start</p>
+          </UiPopoverContent>
+        </UiPopover>
+
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Align Center</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent align="center">
+            <p class="text-sm">Aligned to center</p>
+          </UiPopoverContent>
+        </UiPopover>
+
+        <UiPopover>
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Align End</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent align="end">
+            <p class="text-sm">Aligned to end</p>
+          </UiPopoverContent>
+        </UiPopover>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: alignmentsTemplateSource,
+      },
+    },
+  },
+};
+
+const openByDefaultTemplateSource = `<script setup lang="ts">
+import { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton } from '@aleph-alpha/ui-library'
+import { ref } from 'vue'
+
+const open = ref(true)
+</script>
+
+<template>
+  <div class="pt-4">
+    <UiPopover v-model:open="open">
+      <UiPopoverTrigger as-child>
+        <UiButton variant="outline">Toggle Popover</UiButton>
+      </UiPopoverTrigger>
+      <UiPopoverContent>
+        <div class="space-y-2">
+          <h4 class="font-medium leading-none">Popover Content</h4>
+          <p class="text-sm text-muted-foreground">
+            This popover is open by default for visual testing.
+          </p>
+        </div>
+      </UiPopoverContent>
+    </UiPopover>
+  </div>
+</template>`;
+
+/**
+ * Popover that starts open. Useful for visual regression testing
+ * to capture the popover content without user interaction.
+ */
+export const OpenByDefault: Story = {
+  render: () => ({
+    components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
+    setup() {
+      const open = ref(true);
+      return { open };
+    },
+    template: `
+      <div class="pt-4">
+        <UiPopover v-model:open="open">
+          <UiPopoverTrigger as-child>
+            <UiButton variant="outline">Toggle Popover</UiButton>
+          </UiPopoverTrigger>
+          <UiPopoverContent>
+            <div class="space-y-2">
+              <h4 class="font-medium leading-none">Popover Content</h4>
+              <p class="text-sm text-muted-foreground">
+                This popover is open by default for visual testing.
+              </p>
+            </div>
+          </UiPopoverContent>
+        </UiPopover>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: openByDefaultTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiPopover/UiPopover.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { Popover as ShadcnPopover } from '@/primitives/shadcn/popover';
+  import type { UiPopoverProps } from './types';
+
+  defineOptions({
+    name: 'UiPopover',
+  });
+
+  defineProps<UiPopoverProps>();
+  const open = defineModel<boolean>('open');
+</script>
+
+<template>
+  <ShadcnPopover v-model:open="open" :modal="$props.modal">
+    <slot />
+  </ShadcnPopover>
+</template>