@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/src/primitives/UiSkeleton/UiSkeleton.stories.ts

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiSkeleton from './UiSkeleton.vue';
+
+const meta: Meta<typeof UiSkeleton> = {
+  title: 'Primitives/UiSkeleton',
+  component: UiSkeleton,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Custom width for the skeleton. @default undefined',
+    },
+    height: {
+      control: 'text',
+      description: 'Custom height for the skeleton. @default undefined',
+    },
+    rounded: {
+      control: 'boolean',
+      description: 'Whether to render as a rounded. @default false',
+    },
+  },
+  args: {
+    rounded: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiSkeleton>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiSkeleton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-center space-x-4">
+    <UiSkeleton class="h-12 w-12" rounded />
+    <div class="space-y-2">
+      <UiSkeleton class="h-4 w-[250px]" />
+      <UiSkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Default skeleton with avatar and text lines.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex items-center space-x-4">
+      <UiSkeleton class="h-12 w-12" v-bind="args" />
+      <div class="space-y-2">
+        <UiSkeleton class="h-4 w-[250px]" />
+        <UiSkeleton class="h-4 w-[200px]" />
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const cardTemplateSource = `<script setup lang="ts">
+import { UiSkeleton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-col space-y-3">
+    <UiSkeleton class="h-[125px] w-[250px] rounded-xl" />
+    <div class="space-y-2">
+      <UiSkeleton class="h-4 w-[250px]" />
+      <UiSkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Card skeleton with image placeholder.
+ */
+export const Card: Story = {
+  render: (args) => ({
+    components: { UiSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex flex-col space-y-3">
+      <UiSkeleton class="h-[125px] w-[250px] rounded-xl" />
+      <div class="space-y-2">
+        <UiSkeleton class="h-4 w-[250px]" />
+        <UiSkeleton class="h-4 w-[200px]" />
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: cardTemplateSource,
+      },
+    },
+  },
+};
+
+const textTemplateSource = `<script setup lang="ts">
+import { UiSkeleton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="space-y-2">
+    <UiSkeleton class="h-4 w-full" />
+    <UiSkeleton class="h-4 w-full" />
+    <UiSkeleton class="h-4 w-3/4" />
+  </div>
+</template>`;
+
+/**
+ * Text paragraph skeleton.
+ */
+export const TextBlock: Story = {
+  render: (args) => ({
+    components: { UiSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-y-2 w-[300px]">
+      <UiSkeleton class="h-4 w-full" />
+      <UiSkeleton class="h-4 w-full" />
+      <UiSkeleton class="h-4 w-3/4" />
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: textTemplateSource,
+      },
+    },
+  },
+};
+
+const avatarTemplateSource = `<script setup lang="ts">
+import { UiSkeleton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex space-x-2">
+    <UiSkeleton class="h-10 w-10" rounded />
+    <UiSkeleton class="h-10 w-10" rounded />
+    <UiSkeleton class="h-10 w-10" rounded />
+  </div>
+</template>`;
+
+/**
+ * Avatar skeleton roundeds.
+ */
+export const Avatars: Story = {
+  render: (args) => ({
+    components: { UiSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex space-x-2">
+      <UiSkeleton class="h-10 w-10" rounded />
+      <UiSkeleton class="h-10 w-10" rounded />
+      <UiSkeleton class="h-10 w-10" rounded />
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: avatarTemplateSource,
+      },
+    },
+  },
+};
+
+const tableTemplateSource = `<script setup lang="ts">
+import { UiSkeleton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex space-x-4">
+      <UiSkeleton class="h-8 w-[100px]" />
+      <UiSkeleton class="h-8 w-[150px]" />
+      <UiSkeleton class="h-8 w-[100px]" />
+      <UiSkeleton class="h-8 w-[80px]" />
+    </div>
+    <div class="flex space-x-4">
+      <UiSkeleton class="h-6 w-[100px]" />
+      <UiSkeleton class="h-6 w-[150px]" />
+      <UiSkeleton class="h-6 w-[100px]" />
+      <UiSkeleton class="h-6 w-[80px]" />
+    </div>
+    <div class="flex space-x-4">
+      <UiSkeleton class="h-6 w-[100px]" />
+      <UiSkeleton class="h-6 w-[150px]" />
+      <UiSkeleton class="h-6 w-[100px]" />
+      <UiSkeleton class="h-6 w-[80px]" />
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Table skeleton with header and rows.
+ */
+export const Table: Story = {
+  render: (args) => ({
+    components: { UiSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-y-4">
+      <div class="flex space-x-4">
+        <UiSkeleton class="h-8 w-[100px]" />
+        <UiSkeleton class="h-8 w-[150px]" />
+        <UiSkeleton class="h-8 w-[100px]" />
+        <UiSkeleton class="h-8 w-[80px]" />
+      </div>
+      <div class="flex space-x-4">
+        <UiSkeleton class="h-6 w-[100px]" />
+        <UiSkeleton class="h-6 w-[150px]" />
+        <UiSkeleton class="h-6 w-[100px]" />
+        <UiSkeleton class="h-6 w-[80px]" />
+      </div>
+      <div class="flex space-x-4">
+        <UiSkeleton class="h-6 w-[100px]" />
+        <UiSkeleton class="h-6 w-[150px]" />
+        <UiSkeleton class="h-6 w-[100px]" />
+        <UiSkeleton class="h-6 w-[80px]" />
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: tableTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiSkeleton/UiSkeleton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { Skeleton as ShadcnSkeleton } from '@/primitives/shadcn/skeleton';
+  import { computed } from 'vue';
+  import type { UiSkeletonProps } from './types';
+
+  defineOptions({
+    name: 'UiSkeleton',
+  });
+
+  const props = withDefaults(defineProps<UiSkeletonProps>(), {
+    rounded: false,
+  });
+
+  const style = computed(() => ({
+    width: props.width,
+    height: props.height,
+  }));
+
+  const classes = computed(() => (props.rounded ? 'rounded-full' : ''));
+</script>
+
+<template>
+  <ShadcnSkeleton :class="classes" :style="style" />
+</template>

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

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiSkeleton from '../UiSkeleton.vue';
+
+describe('UiSkeleton', () => {
+  test('renders skeleton element', () => {
+    const { container } = render(UiSkeleton);
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toBeInTheDocument();
+  });
+
+  test('applies animate-pulse class for loading animation', () => {
+    const { container } = render(UiSkeleton);
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toHaveClass('animate-pulse');
+  });
+
+  test('applies rounded-full class when rounded prop is true', () => {
+    const { container } = render(UiSkeleton, {
+      props: { rounded: true },
+    });
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toHaveClass('rounded-full');
+  });
+
+  test('does not apply rounded-full class by default', () => {
+    const { container } = render(UiSkeleton);
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).not.toHaveClass('rounded-full');
+  });
+
+  test('applies custom width style', () => {
+    const { container } = render(UiSkeleton, {
+      props: { width: '200px' },
+    });
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toHaveStyle({ width: '200px' });
+  });
+
+  test('applies custom height style', () => {
+    const { container } = render(UiSkeleton, {
+      props: { height: '50px' },
+    });
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toHaveStyle({ height: '50px' });
+  });
+});

package/src/primitives/UiSkeleton/index.ts

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

package/src/primitives/UiSkeleton/types.ts

@@ -0,0 +1,26 @@
+/**
+ * A placeholder loading state for content. Use to indicate
+ * loading state while preserving layout structure.
+ *
+ * @category Feedback
+ * @useCases loading state, content placeholder, lazy loading, data fetching
+ * @keywords skeleton, loading, placeholder, shimmer, pulse, loader
+ * @related UiSpinner, UiProgress
+ */
+export interface UiSkeletonProps {
+  /**
+   * Custom width for the skeleton.
+   * Can be any valid CSS width value.
+   */
+  width?: string;
+  /**
+   * Custom height for the skeleton.
+   * Can be any valid CSS height value.
+   */
+  height?: string;
+  /**
+   * Whether to render as a rounded.
+   * @default false
+   */
+  rounded?: boolean;
+}

package/src/primitives/UiTable/UiTable.stories.ts

@@ -238,7 +238,7 @@ const invoices = [
             <UiDropdownMenuTrigger as-child>
               <UiButton variant="ghost" size="icon" class="h-8 w-8 p-0">
                 <span class="sr-only">Open menu</span>
-                <UiIcon icon="i-material-symbols-more-horiz" class="h-4 w-4" />
+                <UiIcon name="more-horizontal" :size="16" />
               </UiButton>
             </UiDropdownMenuTrigger>
             <UiDropdownMenuContent align="end">
@@ -277,7 +277,7 @@ const withRowActionsTemplate = `
           <UiDropdownMenuTrigger as-child>
             <UiButton variant="ghost" size="icon" class="h-8 w-8 p-0">
               <span class="sr-only">Open menu</span>
-              <UiIcon icon="i-material-symbols-more-horiz" class="h-4 w-4" />
+              <UiIcon name="more-horizontal" :size="16" />
             </UiButton>
           </UiDropdownMenuTrigger>
           <UiDropdownMenuContent align="end">