@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/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: 'Components/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/components/UiSkeleton/UiSkeleton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { Skeleton as ShadcnSkeleton } from '@/components/core/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/components/UiSkeleton/types.ts

@@ -0,0 +1,25 @@
+/**
+ * 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/components/UiSlider/UiSlider.stories.ts

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
+import { UiSlider } from '.';
+
+/**
+ * UiSlider lets users pick a numeric value (single thumb) or a range (multiple thumbs) by dragging.
+ * Use it for filters and settings where immediate, continuous feedback is helpful.
+ */
+const meta: Meta<typeof UiSlider> = {
+  title: 'Components/UiSlider',
+  component: UiSlider,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'object',
+      description:
+        'Controlled slider value (array of numbers). Use `[value]` for a single thumb and `[min, max]` for a range.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the slider is disabled.',
+    },
+    min: {
+      control: { type: 'number' },
+      description: 'Minimum value.',
+    },
+    max: {
+      control: { type: 'number' },
+      description: 'Maximum value.',
+    },
+    step: {
+      control: { type: 'number' },
+      description: 'Step size.',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Slider orientation.',
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Whether the slider direction is visually inverted (low/high swapped).',
+    },
+  },
+  args: {
+    modelValue: [50],
+    disabled: false,
+    min: 0,
+    max: 100,
+    step: 1,
+    orientation: 'horizontal',
+    inverted: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UiSlider>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSlider } from '@aleph-alpha/ui-library'
+
+const value = ref([50])
+</script>
+
+<template>
+  <div class="w-72 space-y-3">
+    <UiSlider v-model="value" :min="0" :max="100" :step="1" />
+    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
+  </div>
+</template>`;
+
+/**
+ * Single-thumb slider for selecting a single numeric value.
+ * Use this for settings like volume/zoom/opacity.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSlider },
+    setup() {
+      const value = ref<number[]>(Array.isArray(args.modelValue) ? args.modelValue : [50]);
+      watch(
+        () => args.modelValue,
+        (val) => {
+          value.value = Array.isArray(val) ? val : [50];
+        },
+      );
+      return { args, value };
+    },
+    template: `
+      <div class="w-72 space-y-3">
+        <UiSlider
+          v-model="value"
+          :disabled="args.disabled"
+          :min="args.min"
+          :max="args.max"
+          :step="args.step"
+          :orientation="args.orientation"
+          :inverted="args.inverted"
+        />
+        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: defaultTemplateSource } },
+  },
+};
+
+const rangeTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSlider } from '@aleph-alpha/ui-library'
+
+const range = ref([25, 75])
+</script>
+
+<template>
+  <div class="w-72 space-y-3">
+    <UiSlider v-model="range" :min="0" :max="100" :step="1" :min-steps-between-thumbs="5" />
+    <div class="text-sm text-muted-foreground">Range: {{ range[0] }} – {{ range[1] }}</div>
+  </div>
+</template>`;
+
+/**
+ * Multi-thumb slider for selecting a min/max range.
+ * Use this for filters like price ranges or rating ranges.
+ */
+export const Range: Story = {
+  render: () => ({
+    components: { UiSlider },
+    setup() {
+      const range = ref([25, 75]);
+      return { range };
+    },
+    template: `
+      <div class="w-72 space-y-3">
+        <UiSlider v-model="range" :min="0" :max="100" :step="1" :min-steps-between-thumbs="5" />
+        <div class="text-sm text-muted-foreground">Range: {{ range[0] }} – {{ range[1] }}</div>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: rangeTemplateSource } },
+  },
+};
+
+const verticalTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSlider } from '@aleph-alpha/ui-library'
+
+const value = ref([50])
+</script>
+
+<template>
+  <div class="flex items-center gap-6">
+    <div class="h-44">
+      <UiSlider v-model="value" orientation="vertical" />
+    </div>
+    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
+  </div>
+</template>`;
+
+/**
+ * Vertical slider orientation.
+ * Use this when horizontal space is limited or when matching an existing vertical control pattern.
+ */
+export const Vertical: Story = {
+  render: () => ({
+    components: { UiSlider },
+    setup() {
+      const value = ref([50]);
+      return { value };
+    },
+    template: `
+      <div class="flex items-center gap-6">
+        <div class="h-44">
+          <UiSlider v-model="value" orientation="vertical" />
+        </div>
+        <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: verticalTemplateSource } },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSlider } from '@aleph-alpha/ui-library'
+
+const value = ref([50])
+</script>
+
+<template>
+  <div class="w-72 space-y-3">
+    <UiSlider v-model="value" disabled />
+    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
+  </div>
+</template>`;
+
+/**
+ * Disabled state.
+ * Use this when the slider is not currently applicable (e.g., gated behind another toggle).
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { UiSlider },
+    setup() {
+      const value = ref([50]);
+      return { value };
+    },
+    template: `
+      <div class="w-72 space-y-3">
+        <UiSlider v-model="value" disabled />
+        <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: disabledTemplateSource } },
+  },
+};

package/src/components/UiSlider/UiSlider.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import type { SliderRootEmits } from 'reka-ui';
+  import { Slider as ShadcnSlider } from '@/components/core/slider';
+  import type { UiSliderProps, UiSliderEmits } from './types';
+
+  defineOptions({
+    name: 'UiSlider',
+  });
+
+  const props = defineProps<UiSliderProps>();
+  const emit = defineEmits<UiSliderEmits>();
+
+  function handleModelValueUpdate(
+    value: SliderRootEmits['update:modelValue'] extends [infer P] ? P : unknown,
+  ) {
+    if (Array.isArray(value) && value.every((v) => typeof v === 'number')) {
+      emit('update:modelValue', value);
+      return;
+    }
+
+    // reka-ui can emit undefined in some cases; keep our public API stable.
+    emit('update:modelValue', []);
+  }
+</script>
+
+<template>
+  <ShadcnSlider
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :disabled="props.disabled"
+    :orientation="props.orientation"
+    :dir="props.dir"
+    :inverted="props.inverted"
+    :min="props.min"
+    :max="props.max"
+    :step="props.step"
+    :min-steps-between-thumbs="props.minStepsBetweenThumbs"
+    :thumb-alignment="props.thumbAlignment"
+    :name="props.name"
+    :required="props.required"
+    @update:model-value="handleModelValueUpdate"
+    @value-commit="emit('valueCommit', $event)"
+  />
+</template>

package/src/components/UiSlider/__tests__/UiSlider.test.ts

@@ -0,0 +1,76 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test, vi } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { UiSlider } from '../index';
+
+let emitUndefinedPayload = false;
+
+vi.mock('@/components/core/slider', () => {
+  return {
+    Slider: defineComponent({
+      name: 'ShadcnSliderMock',
+      emits: ['update:modelValue', 'valueCommit'],
+      setup(_props, { emit }) {
+        return () =>
+          h('button', {
+            type: 'button',
+            onClick: () => {
+              const payload = emitUndefinedPayload ? undefined : [51];
+              emit('update:modelValue', payload);
+              if (!emitUndefinedPayload) {
+                emit('valueCommit', [51]);
+              }
+            },
+          });
+      },
+    }),
+  };
+});
+
+describe('UiSlider', () => {
+  test('re-emits update:modelValue and valueCommit from the vendor slider', async () => {
+    const { container, emitted } = render(UiSlider, {
+      props: { modelValue: [50] },
+    });
+
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+    await (button as HTMLButtonElement).click();
+
+    expect(emitted('update:modelValue')?.[0]).toEqual([[51]]);
+    expect(emitted('valueCommit')?.[0]).toEqual([[51]]);
+  });
+
+  test('normalizes invalid update:modelValue payloads to an empty array', async () => {
+    emitUndefinedPayload = true;
+    const { container, emitted } = render(UiSlider);
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+    await (button as HTMLButtonElement).click();
+
+    expect(emitted('update:modelValue')?.[0]).toEqual([[]]);
+    emitUndefinedPayload = false;
+  });
+
+  test('supports controlled mode via v-model:modelValue', async () => {
+    const { container, getByText } = render({
+      components: { UiSlider },
+      setup() {
+        const value = ref([50]);
+        return { value };
+      },
+      template: `
+        <div>
+          <div>Value: {{ value[0] }}</div>
+          <UiSlider v-model:modelValue="value" />
+        </div>
+      `,
+    });
+
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+    await (button as HTMLButtonElement).click();
+
+    expect(getByText('Value: 51')).toBeInTheDocument();
+  });
+});

package/src/components/UiSlider/index.ts

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