@aleph-alpha/ui-library 1.8.0 → 1.10.0

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

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import { defineComponent, markRaw } from 'vue';
+import UiBadge from '../UiBadge.vue';
+
+// Mock icon component for testing startIcon and endIcon props
+// Using markRaw to prevent Vue from making it reactive
+const MockIcon = (testId: string) =>
+  markRaw(
+    defineComponent({
+      name: 'MockIcon',
+      template: `<svg data-testid="${testId}" />`,
+    }),
+  );
+
+describe('UiBadge', () => {
+  describe('Icons', () => {
+    test('renders start icon', () => {
+      const iconTestId = 'start-icon';
+
+      const { getByTestId } = render(UiBadge, {
+        props: {
+          startIcon: MockIcon(iconTestId),
+        },
+        slots: { default: 'Badge' },
+      });
+
+      expect(getByTestId(iconTestId)).toBeInTheDocument();
+    });
+
+    test('renders end icon', () => {
+      const iconTestId = 'end-icon';
+
+      const { getByTestId } = render(UiBadge, {
+        props: {
+          endIcon: MockIcon(iconTestId),
+        },
+        slots: { default: 'Badge' },
+      });
+
+      expect(getByTestId(iconTestId)).toBeInTheDocument();
+    });
+  });
+});

package/src/primitives/UiBadge/constants.ts

@@ -0,0 +1,3 @@
+import { UiBadgeVariants } from './types';
+
+export const BadgeVariants: UiBadgeVariants[] = ['default', 'destructive', 'outline', 'secondary'];

package/src/primitives/UiBadge/index.ts

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

package/src/primitives/UiBadge/types.ts

@@ -0,0 +1,48 @@
+import { Component } from 'vue';
+
+/**
+ * Variant Types for the UiBadge primitive component
+ */
+export type UiBadgeVariants = 'default' | 'secondary' | 'outline' | 'destructive';
+
+/**
+ * A small label for status, counts, or categories. Use for tags,
+ * notifications counts, status indicators, or labels.
+ *
+ * @category Feedback
+ * @useCases status label, notification count, tag, category, version
+ * @keywords badge, label, tag, status, count, chip, pill
+ * @related UiButton
+ */
+export interface UiBadgeProps {
+  /**
+   * Variant types for the badge
+   * @default default
+   */
+  variant?: UiBadgeVariants;
+
+  /**
+   * Whether to render as a child (Slot) instead of a wrapper element.
+   * Useful for tooltips or wrapping other components.
+   * @default false
+   */
+  asChild?: boolean;
+
+  /**
+   * Icon component to display before the badge text.
+   * @example
+   * ```vue
+   * <UiBadge :startIcon="InfoIcon">Info</UiBadge>
+   * ```
+   */
+  startIcon?: Component;
+
+  /**
+   * Icon component to display after the badge text.
+   * @example
+   * ```vue
+   * <UiBadge :endIcon="CloseIcon">Dismissible</UiBadge>
+   * ```
+   */
+  endIcon?: Component;
+}

package/src/primitives/UiButton/UiButton.stories.ts

@@ -0,0 +1,537 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiButton from './UiButton.vue';
+import { UiIcon } from '../UiIcon';
+
+const ChevronLeftIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-chevron-left" class="size-4" />',
+};
+
+const ChevronRightIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+};
+
+const MailIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+};
+
+const meta: Meta<typeof UiButton> = {
+  title: 'Primitives/UiButton',
+  component: UiButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+      description: 'The visual style of the button',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'xs', 'sm', 'lg'],
+      description: 'The size of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the button',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Shows a loading state and prevents interaction',
+    },
+    startIcon: {
+      control: false,
+      description: 'Icon component to display before the button text',
+    },
+    endIcon: {
+      control: false,
+      description: 'Icon component to display after the button text',
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+    loading: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiButton>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton>Default</UiButton>
+</template>`;
+
+/**
+ * Default button variant.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiButton },
+    setup() {
+      return { args };
+    },
+    template: `<UiButton :variant="args.variant" :size="args.size" :disabled="args.disabled" :loading="args.loading">Default</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const outlineTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton variant="outline">Outline</UiButton>
+</template>`;
+
+/**
+ * Outline button variant.
+ */
+export const Outline: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `<UiButton variant="outline">Outline</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: outlineTemplateSource,
+      },
+    },
+  },
+};
+
+const secondaryTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton variant="secondary">Secondary</UiButton>
+</template>`;
+
+/**
+ * Secondary button variant.
+ */
+export const Secondary: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `<UiButton variant="secondary">Secondary</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: secondaryTemplateSource,
+      },
+    },
+  },
+};
+
+const ghostTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton variant="ghost">Ghost</UiButton>
+</template>`;
+
+/**
+ * Ghost button variant.
+ */
+export const Ghost: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `<UiButton variant="ghost">Ghost</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: ghostTemplateSource,
+      },
+    },
+  },
+};
+
+const destructiveTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton variant="destructive">Destructive</UiButton>
+</template>`;
+
+/**
+ * Destructive button variant.
+ */
+export const Destructive: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `<UiButton variant="destructive">Destructive</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: destructiveTemplateSource,
+      },
+    },
+  },
+};
+
+const linkTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton variant="link">Link</UiButton>
+</template>`;
+
+/**
+ * Link button variant.
+ */
+export const Link: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `<UiButton variant="link">Link</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: linkTemplateSource,
+      },
+    },
+  },
+};
+
+const sizesTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <UiButton size="xs" variant="outline">Extra Small</UiButton>
+    <UiButton size="sm" variant="outline">Small</UiButton>
+    <UiButton variant="outline">Default</UiButton>
+    <UiButton size="lg" variant="outline">Large</UiButton>
+  </div>
+</template>`;
+
+/**
+ * Button sizes.
+ */
+export const Sizes: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <UiButton size="xs" variant="outline">Extra Small</UiButton>
+        <UiButton size="sm" variant="outline">Small</UiButton>
+        <UiButton variant="outline">Default</UiButton>
+        <UiButton size="lg" variant="outline">Large</UiButton>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: sizesTemplateSource,
+      },
+    },
+  },
+};
+
+const withStartIconTemplateSource = `<script setup lang="ts">
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
+
+const ChevronLeftIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-chevron-left" class="size-4" />',
+}
+</script>
+
+<template>
+  <UiButton :start-icon="ChevronLeftIcon">Back</UiButton>
+</template>`;
+
+/**
+ * Use the `startIcon` prop to add an icon before the button text.
+ */
+export const WithStartIcon: Story = {
+  render: () => ({
+    components: { UiButton },
+    setup() {
+      return { ChevronLeftIcon };
+    },
+    template: `<UiButton :start-icon="ChevronLeftIcon">Back</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withStartIconTemplateSource,
+      },
+    },
+  },
+};
+
+const withEndIconTemplateSource = `<script setup lang="ts">
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
+
+const ChevronRightIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+}
+</script>
+
+<template>
+  <UiButton :end-icon="ChevronRightIcon">Next</UiButton>
+</template>`;
+
+/**
+ * Use the `endIcon` prop to add an icon after the button text.
+ */
+export const WithEndIcon: Story = {
+  render: () => ({
+    components: { UiButton },
+    setup() {
+      return { ChevronRightIcon };
+    },
+    template: `<UiButton :end-icon="ChevronRightIcon">Next</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withEndIconTemplateSource,
+      },
+    },
+  },
+};
+
+const withBothIconsTemplateSource = `<script setup lang="ts">
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
+
+const MailIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+}
+
+const ChevronRightIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+}
+</script>
+
+<template>
+  <UiButton :start-icon="MailIcon" :end-icon="ChevronRightIcon">
+    Login with Email
+  </UiButton>
+</template>`;
+
+/**
+ * You can use both `startIcon` and `endIcon` together.
+ */
+export const WithBothIcons: Story = {
+  render: () => ({
+    components: { UiButton },
+    setup() {
+      return { MailIcon, ChevronRightIcon };
+    },
+    template: `<UiButton :start-icon="MailIcon" :end-icon="ChevronRightIcon">Login with Email</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withBothIconsTemplateSource,
+      },
+    },
+  },
+};
+
+const loadingTemplateSource = `<script setup lang="ts">
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
+
+const MailIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+}
+</script>
+
+<template>
+  <UiButton :loading="true" :start-icon="MailIcon">Please wait</UiButton>
+</template>`;
+
+/**
+ * When loading is true, the spinner replaces the startIcon automatically.
+ */
+export const Loading: Story = {
+  render: () => ({
+    components: { UiButton },
+    setup() {
+      return { MailIcon };
+    },
+    template: `<UiButton :loading="true" :start-icon="MailIcon">Please wait</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: loadingTemplateSource,
+      },
+    },
+  },
+};
+
+const loadingWithBothIconsTemplateSource = `<script setup lang="ts">
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
+
+const MailIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+}
+
+const ChevronRightIcon = {
+  components: { UiIcon },
+  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+}
+</script>
+
+<template>
+  <UiButton :loading="true" :start-icon="MailIcon" :end-icon="ChevronRightIcon">
+    Saving changes
+  </UiButton>
+</template>`;
+
+/**
+ * When a button has both start and end icons, the loading spinner replaces
+ * the startIcon while the endIcon stays visible.
+ */
+export const LoadingWithBothIcons: Story = {
+  render: () => ({
+    components: { UiButton },
+    setup() {
+      return { MailIcon, ChevronRightIcon };
+    },
+    template: `<UiButton :loading="true" :start-icon="MailIcon" :end-icon="ChevronRightIcon">Saving changes</UiButton>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: loadingWithBothIconsTemplateSource,
+      },
+    },
+  },
+};
+
+const withIconSlotTemplateSource = `<script setup lang="ts">
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton variant="outline" size="sm">
+    <UiIcon icon="i-material-symbols-call-split" class="size-4" />
+    New Branch
+  </UiButton>
+</template>`;
+
+/**
+ * For maximum flexibility, you can use slots to render custom icon content.
+ */
+export const WithIconSlot: Story = {
+  render: () => ({
+    components: { UiButton, UiIcon },
+    template: `
+      <UiButton variant="outline" size="sm">
+        <UiIcon icon="i-material-symbols-call-split" class="size-4" />
+        New Branch
+      </UiButton>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withIconSlotTemplateSource,
+      },
+    },
+  },
+};
+
+const asChildTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiButton as-child>
+    <a href="/login">Login</a>
+  </UiButton>
+</template>`;
+
+/**
+ * Use `as-child` to make another component look like a button.
+ */
+export const AsChild: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `
+      <UiButton as-child>
+        <a href="/login">Login</a>
+      </UiButton>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: asChildTemplateSource,
+      },
+    },
+  },
+};
+
+const allVariantsTemplateSource = `<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <UiButton>Default</UiButton>
+    <UiButton variant="secondary">Secondary</UiButton>
+    <UiButton variant="destructive">Destructive</UiButton>
+    <UiButton variant="outline">Outline</UiButton>
+    <UiButton variant="ghost">Ghost</UiButton>
+    <UiButton variant="link">Link</UiButton>
+  </div>
+</template>`;
+
+/**
+ * All button variants side by side.
+ */
+export const AllVariants: Story = {
+  render: () => ({
+    components: { UiButton },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <UiButton>Default</UiButton>
+        <UiButton variant="secondary">Secondary</UiButton>
+        <UiButton variant="destructive">Destructive</UiButton>
+        <UiButton variant="outline">Outline</UiButton>
+        <UiButton variant="ghost">Ghost</UiButton>
+        <UiButton variant="link">Link</UiButton>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: allVariantsTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiButton/UiButton.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+  import { Button as ShadcnButton } from '@/primitives/shadcn/button';
+  import { UiSpinner } from '@/primitives/UiSpinner';
+  import { computed } from 'vue';
+  import type { UiButtonProps, UiButtonVariant } from './types';
+
+  defineOptions({
+    name: 'UiButton',
+  });
+
+  const props = withDefaults(defineProps<UiButtonProps>(), {
+    variant: 'default',
+    size: 'default',
+    asChild: false,
+    type: 'button',
+    disabled: false,
+    loading: false,
+    ariaLabel: undefined,
+    startIcon: undefined,
+    endIcon: undefined,
+  });
+
+  const variantMap: Record<
+    UiButtonVariant,
+    'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  > = {
+    default: 'default',
+    destructive: 'destructive',
+    outline: 'outline',
+    secondary: 'secondary',
+    ghost: 'ghost',
+    link: 'link',
+  };
+
+  const sizeMap: Record<'default' | 'xs' | 'sm' | 'lg', 'default' | 'xs' | 'sm' | 'lg'> = {
+    default: 'default',
+    xs: 'xs',
+    sm: 'sm',
+    lg: 'lg',
+  };
+
+  const isDisabled = computed(() => props.disabled || props.loading);
+
+  function handleClick(e: MouseEvent) {
+    if (isDisabled.value) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+</script>
+
+<template>
+  <ShadcnButton
+    :variant="variantMap[props.variant]"
+    :size="sizeMap[props.size]"
+    :aria-label="props.ariaLabel"
+    :as-child="props.asChild"
+    :type="props.type"
+    :disabled="isDisabled"
+    :aria-busy="props.loading ? 'true' : undefined"
+    @click="handleClick"
+  >
+    <UiSpinner v-if="props.loading && !props.asChild" class="mr-2" aria-label="Loading" />
+    <component
+      :is="props.startIcon"
+      v-else-if="props.startIcon && !props.asChild"
+      class="mr-2 size-4"
+    />
+    <slot />
+    <component :is="props.endIcon" v-if="props.endIcon && !props.asChild" class="ml-2 size-4" />
+  </ShadcnButton>
+</template>