@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiAlert/UiAlert.stories.ts

@@ -1,199 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { UiAlert, UiAlertDescription, UiAlertTitle } from './index';
-import { AlertVariants } from './constants';
-import { UiIcon } from '../UiIcon';
-
-const meta: Meta<typeof UiAlert> = {
-  title: 'Primitives/UiAlert',
-  component: UiAlert,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: AlertVariants,
-      description: 'The visual style of the alert',
-    },
-  },
-  args: {
-    variant: 'default',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiAlert>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAlert>
-    <UiIcon name="circle-check" :size="16"  />
-    <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
-    <UiAlertDescription>
-      This is an alert with icon, title and description.
-    </UiAlertDescription>
-  </UiAlert>
-</template>`;
-
-/**
- * Default alert with icon, title and description.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: {
-      UiAlert,
-      UiAlertDescription,
-      UiAlertTitle,
-      UiIcon,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UiAlert :variant="args.variant">
-        <UiIcon name="circle-check" :size="16"  />
-        <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
-        <UiAlertDescription>
-          This is an alert with icon, title and description.
-        </UiAlertDescription>
-      </UiAlert>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const destructiveTemplateSource = `<script setup lang="ts">
-import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAlert variant="destructive">
-    <UiIcon name="circle-x" :size="16"  />
-    <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
-    <UiAlertDescription>
-      <p>Please verify your billing information and try again.</p>
-      <ul class="mt-2 list-inside list-disc space-y-1">
-        <li>Check your card details</li>
-        <li>Ensure sufficient funds</li>
-        <li>Verify billing address</li>
-      </ul>
-    </UiAlertDescription>
-  </UiAlert>
-</template>`;
-
-/**
- * Destructive alert variant for errors or critical warnings.
- */
-export const Destructive: Story = {
-  render: () => ({
-    components: {
-      UiAlert,
-      UiAlertDescription,
-      UiAlertTitle,
-      UiIcon,
-    },
-    template: `
-      <UiAlert variant="destructive">
-        <UiIcon name="circle-x" :size="16"  />
-        <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
-        <UiAlertDescription>
-          <p>Please verify your billing information and try again.</p>
-          <ul class="mt-2 list-inside list-disc space-y-1">
-            <li>Check your card details</li>
-            <li>Ensure sufficient funds</li>
-            <li>Verify billing address</li>
-          </ul>
-        </UiAlertDescription>
-      </UiAlert>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: destructiveTemplateSource,
-      },
-    },
-  },
-};
-
-const allVariantsTemplateSource = `<script setup lang="ts">
-import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <UiAlert>
-      <UiIcon name="circle-check" :size="16"  />
-      <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
-      <UiAlertDescription>
-        This is an alert with icon, title and description.
-      </UiAlertDescription>
-    </UiAlert>
-
-    <UiAlert variant="destructive">
-      <UiIcon name="circle-x" :size="16"  />
-      <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
-      <UiAlertDescription>
-        <p>Please verify your billing information and try again.</p>
-        <ul class="mt-2 list-inside list-disc space-y-1">
-          <li>Check your card details</li>
-          <li>Ensure sufficient funds</li>
-          <li>Verify billing address</li>
-        </ul>
-      </UiAlertDescription>
-    </UiAlert>
-  </div>
-</template>`;
-
-/**
- * All available alert variants side by side.
- */
-export const AllVariants: Story = {
-  render: () => ({
-    components: {
-      UiAlert,
-      UiAlertDescription,
-      UiAlertTitle,
-      UiIcon,
-    },
-    template: `
-      <div class="flex flex-col gap-4">
-        <UiAlert>
-          <UiIcon name="circle-check" :size="16"  />
-          <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
-          <UiAlertDescription>
-            This is an alert with icon, title and description.
-          </UiAlertDescription>
-        </UiAlert>
-
-        <UiAlert variant="destructive">
-          <UiIcon name="circle-x" :size="16"  />
-          <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
-          <UiAlertDescription>
-            <p>Please verify your billing information and try again.</p>
-            <ul class="mt-2 list-inside list-disc space-y-1">
-              <li>Check your card details</li>
-              <li>Ensure sufficient funds</li>
-              <li>Verify billing address</li>
-            </ul>
-          </UiAlertDescription>
-        </UiAlert>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: allVariantsTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiAlert/UiAlert.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-  import { Alert as ShadcnAlert } from '@/primitives/shadcn/alert';
-
-  import { UiAlertProps } from './types';
-
-  defineOptions({
-    name: 'UiAlert',
-  });
-
-  withDefaults(defineProps<UiAlertProps>(), {
-    variant: 'default',
-  });
-
-  /**
-   * shadcn-vue `Alert` styles are optimized for SVG icons (`has-[>svg]...`).
-   * Our `UiIcon` renders as `<span data-slot="icon" ... />`, so we mirror the same
-   * layout rules for `[data-slot=icon]` to keep alignment consistent.
-   */
-  const uiIconLayoutClasses =
-    'has-[>[data-slot=icon]]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>[data-slot=icon]]:gap-x-3 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:translate-y-0.5 [&>[data-slot=icon]]:text-current';
-</script>
-
-<template>
-  <ShadcnAlert :variant :class="uiIconLayoutClasses">
-    <slot />
-  </ShadcnAlert>
-</template>

package/src/primitives/UiAlert/UiAlertDescription.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-  import { AlertDescription as ShadcnAlertDescription } from '@/primitives/shadcn/alert';
-
-  defineOptions({
-    name: 'UiAlertDescription',
-  });
-</script>
-
-<template>
-  <ShadcnAlertDescription>
-    <slot />
-  </ShadcnAlertDescription>
-</template>

package/src/primitives/UiAlert/UiAlertTitle.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-  import { AlertTitle as ShadcnAlertTitle } from '@/primitives/shadcn/alert';
-
-  defineOptions({
-    name: 'UiAlertTitle',
-  });
-</script>
-
-<template>
-  <ShadcnAlertTitle>
-    <slot />
-  </ShadcnAlertTitle>
-</template>

package/src/primitives/UiAlert/types.ts

@@ -1,14 +0,0 @@
-export type UiAlertVariants = 'default' | 'destructive';
-
-/**
- * A highlighted message box for important information. Use for
- * success messages, warnings, errors, or informational notices.
- *
- * @category Feedback
- * @useCases success message, error notice, warning, info banner, notification
- * @keywords alert, message, notice, warning, error, success, info, banner
- * @related UiAlertDialog
- */
-export type UiAlertProps = {
-  variant?: UiAlertVariants;
-};

package/src/primitives/UiAlertDialog/UiAlertDialog.stories.ts

@@ -1,186 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import {
-  UiAlertDialog,
-  UiAlertDialogAction,
-  UiAlertDialogCancel,
-  UiAlertDialogContent,
-  UiAlertDialogDescription,
-  UiAlertDialogFooter,
-  UiAlertDialogHeader,
-  UiAlertDialogTitle,
-  UiAlertDialogTrigger,
-} from './index';
-import { UiButton } from '../UiButton';
-
-const meta: Meta<typeof UiAlertDialog> = {
-  title: 'Primitives/UiAlertDialog',
-  component: UiAlertDialog,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiAlertDialog>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import {
-  UiAlertDialog,
-  UiAlertDialogAction,
-  UiAlertDialogCancel,
-  UiAlertDialogContent,
-  UiAlertDialogDescription,
-  UiAlertDialogFooter,
-  UiAlertDialogHeader,
-  UiAlertDialogTitle,
-  UiAlertDialogTrigger,
-  UiButton,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAlertDialog>
-    <UiAlertDialogTrigger as-child>
-      <UiButton variant="outline">Show Dialog</UiButton>
-    </UiAlertDialogTrigger>
-    <UiAlertDialogContent>
-      <UiAlertDialogHeader>
-        <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
-        <UiAlertDialogDescription>
-          This action cannot be undone. This will permanently delete your
-          account and remove your data from our servers.
-        </UiAlertDialogDescription>
-      </UiAlertDialogHeader>
-      <UiAlertDialogFooter>
-        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
-        <UiAlertDialogAction>Continue</UiAlertDialogAction>
-      </UiAlertDialogFooter>
-    </UiAlertDialogContent>
-  </UiAlertDialog>
-</template>`;
-
-/**
- * Alert dialog with Button trigger using `as-child`.
- * This is the recommended pattern from shadcn-vue docs.
- */
-export const Default: Story = {
-  render: () => ({
-    components: {
-      UiAlertDialog,
-      UiAlertDialogAction,
-      UiAlertDialogCancel,
-      UiAlertDialogContent,
-      UiAlertDialogDescription,
-      UiAlertDialogFooter,
-      UiAlertDialogHeader,
-      UiAlertDialogTitle,
-      UiAlertDialogTrigger,
-      UiButton,
-    },
-    template: `
-      <UiAlertDialog>
-        <UiAlertDialogTrigger as-child>
-          <UiButton variant="outline">Show Dialog</UiButton>
-        </UiAlertDialogTrigger>
-        <UiAlertDialogContent>
-          <UiAlertDialogHeader>
-            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
-            <UiAlertDialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </UiAlertDialogDescription>
-          </UiAlertDialogHeader>
-          <UiAlertDialogFooter>
-            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
-            <UiAlertDialogAction>Continue</UiAlertDialogAction>
-          </UiAlertDialogFooter>
-        </UiAlertDialogContent>
-      </UiAlertDialog>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const simpleTemplateSource = `<script setup lang="ts">
-import {
-  UiAlertDialog,
-  UiAlertDialogAction,
-  UiAlertDialogCancel,
-  UiAlertDialogContent,
-  UiAlertDialogDescription,
-  UiAlertDialogFooter,
-  UiAlertDialogHeader,
-  UiAlertDialogTitle,
-  UiAlertDialogTrigger,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiAlertDialog>
-    <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
-    <UiAlertDialogContent>
-      <UiAlertDialogHeader>
-        <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
-        <UiAlertDialogDescription>
-          This action cannot be undone. This will permanently delete your account
-          and remove your data from our servers.
-        </UiAlertDialogDescription>
-      </UiAlertDialogHeader>
-      <UiAlertDialogFooter>
-        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
-        <UiAlertDialogAction>Continue</UiAlertDialogAction>
-      </UiAlertDialogFooter>
-    </UiAlertDialogContent>
-  </UiAlertDialog>
-</template>`;
-
-/**
- * Simple alert dialog with plain text trigger.
- */
-export const Simple: Story = {
-  render: () => ({
-    components: {
-      UiAlertDialog,
-      UiAlertDialogAction,
-      UiAlertDialogCancel,
-      UiAlertDialogContent,
-      UiAlertDialogDescription,
-      UiAlertDialogFooter,
-      UiAlertDialogHeader,
-      UiAlertDialogTitle,
-      UiAlertDialogTrigger,
-    },
-    template: `
-      <UiAlertDialog>
-        <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
-        <UiAlertDialogContent>
-          <UiAlertDialogHeader>
-            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
-            <UiAlertDialogDescription>
-              This action cannot be undone. This will permanently delete your account
-              and remove your data from our servers.
-            </UiAlertDialogDescription>
-          </UiAlertDialogHeader>
-          <UiAlertDialogFooter>
-            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
-            <UiAlertDialogAction>Continue</UiAlertDialogAction>
-          </UiAlertDialogFooter>
-        </UiAlertDialogContent>
-      </UiAlertDialog>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: simpleTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiAlertDialog/UiAlertDialog.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialog as ShadcnAlertDialog } from '@/primitives/shadcn/alert-dialog';
-  import { ModelRef } from 'vue';
-
-  defineOptions({
-    name: 'UiAlertDialog',
-  });
-
-  const model: ModelRef<boolean> = defineModel<boolean>({
-    default: false,
-  });
-</script>
-
-<template>
-  <ShadcnAlertDialog v-model:open="model">
-    <slot />
-  </ShadcnAlertDialog>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogAction.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogAction as ShadcnAlertDialogAction } from '@/primitives/shadcn/alert-dialog';
-  import { UiAlertDialogActionProps } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogAction',
-  });
-
-  const props = defineProps<UiAlertDialogActionProps>();
-</script>
-
-<template>
-  <ShadcnAlertDialogAction v-bind="props">
-    <slot />
-  </ShadcnAlertDialogAction>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogCancel.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogCancel as ShadcnAlertDialogCancel } from '@/primitives/shadcn/alert-dialog';
-  import { UiAlertDialogCancelProps } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogCancel',
-  });
-
-  const props = defineProps<UiAlertDialogCancelProps>();
-</script>
-
-<template>
-  <ShadcnAlertDialogCancel v-bind="props">
-    <slot />
-  </ShadcnAlertDialogCancel>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogContent.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogContent as ShadcnAlertDialogContent } from '@/primitives/shadcn/alert-dialog';
-  import { UiAlertDialogContentProps, UiAlertDialogContentEmits } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogContent',
-  });
-
-  const props = defineProps<UiAlertDialogContentProps>();
-
-  const emit = defineEmits<UiAlertDialogContentEmits>();
-</script>
-
-<template>
-  <ShadcnAlertDialogContent
-    v-bind="props"
-    @close-auto-focus="emit('closeAutoFocus', $event)"
-    @open-auto-focus="emit('openAutoFocus', $event)"
-    @focus-outside="emit('focusOutside', $event)"
-    @interact-outside="emit('interactOutside', $event)"
-    @pointer-down-outside="emit('pointerDownOutside', $event)"
-    @escape-key-down="emit('escapeKeydown', $event)"
-  >
-    <slot />
-  </ShadcnAlertDialogContent>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogDescription.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogDescription as ShadcnAlertDialogDescription } from '@/primitives/shadcn/alert-dialog';
-  import { UiAlertDialogDescriptionProps } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogDescription',
-  });
-
-  const props = defineProps<UiAlertDialogDescriptionProps>();
-</script>
-
-<template>
-  <ShadcnAlertDialogDescription v-bind="props">
-    <slot />
-  </ShadcnAlertDialogDescription>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogFooter.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogFooter as ShadcnAlertDialogFooter } from '@/primitives/shadcn/alert-dialog';
-
-  defineOptions({
-    name: 'UiAlertDialogFooter',
-  });
-</script>
-
-<template>
-  <ShadcnAlertDialogFooter>
-    <slot />
-  </ShadcnAlertDialogFooter>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogHeader.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogHeader as ShadcnAlertDialogHeader } from '@/primitives/shadcn/alert-dialog';
-  import { UiAlertDialogHeaderProps } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogHeader',
-  });
-
-  const props = defineProps<UiAlertDialogHeaderProps>();
-</script>
-
-<template>
-  <ShadcnAlertDialogHeader v-bind="props">
-    <slot />
-  </ShadcnAlertDialogHeader>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogTitle.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogTitle as ShadcnAlertDialogTitle } from '@/primitives/shadcn/alert-dialog';
-  import { UiAlertDialogTitleProps } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogTitle',
-  });
-
-  const props = defineProps<UiAlertDialogTitleProps>();
-</script>
-
-<template>
-  <ShadcnAlertDialogTitle v-bind="props">
-    <slot />
-  </ShadcnAlertDialogTitle>
-</template>

package/src/primitives/UiAlertDialog/UiAlertDialogTrigger.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-  import { AlertDialogTrigger as ShadcnAlertDialogTrigger } from '@/primitives/shadcn/alert-dialog';
-
-  import { UiAlertDialogTriggerProps } from './types';
-
-  defineOptions({
-    name: 'UiAlertDialogTrigger',
-  });
-
-  const props = defineProps<UiAlertDialogTriggerProps>();
-</script>
-
-<template>
-  <ShadcnAlertDialogTrigger v-bind="props">
-    <slot />
-  </ShadcnAlertDialogTrigger>
-</template>

package/src/primitives/UiAlertDialog/index.ts

@@ -1,9 +0,0 @@
-export { default as UiAlertDialog } from './UiAlertDialog.vue';
-export { default as UiAlertDialogAction } from './UiAlertDialogAction.vue';
-export { default as UiAlertDialogCancel } from './UiAlertDialogCancel.vue';
-export { default as UiAlertDialogContent } from './UiAlertDialogContent.vue';
-export { default as UiAlertDialogDescription } from './UiAlertDialogDescription.vue';
-export { default as UiAlertDialogFooter } from './UiAlertDialogFooter.vue';
-export { default as UiAlertDialogHeader } from './UiAlertDialogHeader.vue';
-export { default as UiAlertDialogTitle } from './UiAlertDialogTitle.vue';
-export { default as UiAlertDialogTrigger } from './UiAlertDialogTrigger.vue';