@aleph-alpha/ui-library 1.12.0 → 1.14.0

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

@@ -1,537 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import UiButton from './UiButton.vue';
-import { UiIcon } from '../UiIcon';
-
-const ChevronLeftIcon = {
-  components: { UiIcon },
-  template: '<UiIcon name="chevron-left" :size="16" />',
-};
-
-const ChevronRightIcon = {
-  components: { UiIcon },
-  template: '<UiIcon name="chevron-right" :size="16" />',
-};
-
-const MailIcon = {
-  components: { UiIcon },
-  template: '<UiIcon name="mail" :size="16" />',
-};
-
-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 name="chevron-left" :size="16" />',
-}
-</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 name="chevron-right" :size="16" />',
-}
-</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 name="mail" :size="16" />',
-}
-
-const ChevronRightIcon = {
-  components: { UiIcon },
-  template: '<UiIcon name="chevron-right" :size="16" />',
-}
-</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 name="mail" :size="16" />',
-}
-</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 name="mail" :size="16" />',
-}
-
-const ChevronRightIcon = {
-  components: { UiIcon },
-  template: '<UiIcon name="chevron-right" :size="16" />',
-}
-</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 name="git-branch" :size="16" />
-    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 name="git-branch" :size="16" />
-        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

@@ -1,72 +0,0 @@
-<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>