@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiTooltip/UiTooltip.stories.ts

@@ -0,0 +1,550 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiTooltip from './UiTooltip.vue';
+import { UiButton } from '@/components/UiButton';
+import { UiIcon } from '@/components/UiIcon';
+
+const meta: Meta<typeof UiTooltip> = {
+  title: 'Components/UiTooltip',
+  component: UiTooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'The text content to display in the tooltip',
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The side of the trigger where the tooltip should appear',
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+      description: 'The preferred alignment against the trigger',
+    },
+    sideOffset: {
+      control: 'number',
+      description: 'The distance in pixels from the trigger',
+    },
+    delayDuration: {
+      control: 'number',
+      description: 'The duration from when the pointer enters until the tooltip opens',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Prevents the tooltip from opening',
+    },
+  },
+  args: {
+    content: 'This is a helpful tooltip',
+    side: 'top',
+    align: 'center',
+    sideOffset: 4,
+    delayDuration: 500,
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiTooltip>;
+
+/**
+ * The default tooltip story. Hover over the button to see the tooltip.
+ */
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="This is a helpful tooltip" side="top" align="center" :delay-duration="500" :disabled="false">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+</template>`;
+
+const defaultTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="This is a helpful tooltip" side="top" align="center" :delay-duration="500" :disabled="false">
+      <UiButton>Hover me</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Default tooltip that appears on hover.
+ * Customize content, position, and delay via props.
+ */
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { UiTooltip, UiButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="flex justify-center p-8">
+        <UiTooltip 
+          :content="args.content" 
+          :side="args.side" 
+          :align="args.align" 
+          :side-offset="args.sideOffset"
+          :delay-duration="args.delayDuration" 
+          :disabled="args.disabled"
+        >
+          <UiButton>Hover me</UiButton>
+        </UiTooltip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Tooltip with an icon button.
+ */
+
+const withIconButtonTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+import { UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
+    <UiButton size="icon" variant="ghost" aria-label="Information">
+      <UiIcon name="info" :size="16" />
+    </UiButton>
+  </UiTooltip>
+</template>`;
+
+const withIconButtonTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
+      <UiButton size="icon" variant="ghost" aria-label="Information">
+        <UiIcon name="info" :size="16" />
+      </UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Tooltip with an icon button trigger.
+ */
+export const WithIconButton: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: withIconButtonTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton, UiIcon },
+    template: withIconButtonTemplate,
+  }),
+};
+
+const instantDelayTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Appears instantly" side="top" align="center" :delay-duration="0">
+    <UiButton>Instant tooltip</UiButton>
+  </UiTooltip>
+</template>`;
+
+const instantDelayTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Appears instantly" side="top" align="center" :delay-duration="0">
+      <UiButton>Instant tooltip</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Tooltip with instant appearance (no delay).
+ */
+export const InstantDelay: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: instantDelayTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: instantDelayTemplate,
+  }),
+};
+
+const longDelayTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Takes a moment to appear" side="top" align="center" :delay-duration="1500">
+    <UiButton>Slow tooltip</UiButton>
+  </UiTooltip>
+</template>`;
+
+const longDelayTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Takes a moment to appear" side="top" align="center" :delay-duration="1500">
+      <UiButton>Slow tooltip</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Tooltip with longer delay duration (1500ms).
+ */
+export const LongDelay: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: longDelayTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: longDelayTemplate,
+  }),
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="You should not see this" :disabled="true">
+    <UiButton>Hover me (disabled tooltip)</UiButton>
+  </UiTooltip>
+</template>`;
+
+const disabledTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="You should not see this" :disabled="true">
+      <UiButton>Hover me (disabled tooltip)</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Disabled tooltip that will not show on hover.
+ */
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: disabledTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: disabledTemplate,
+  }),
+};
+
+const alignmentOptionsTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Aligned to the start" side="bottom" align="start">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Aligned to the center" side="bottom" align="center">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Aligned to the end" side="bottom" align="end">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+</template>`;
+
+const alignmentOptionsTemplate = `
+	<div class="flex flex-col gap-8 items-center p-8">
+		<div class="flex flex-col items-center gap-2">
+			<span class="text-xs text-muted-foreground">Align Start</span>
+			<UiTooltip content="Aligned to the start" side="bottom" align="start">
+				<UiButton>Hover me</UiButton>
+			</UiTooltip>
+		</div>
+
+		<div class="flex flex-col items-center gap-2">
+			<span class="text-xs text-muted-foreground">Align Center</span>
+			<UiTooltip content="Aligned to the center" side="bottom" align="center">
+				<UiButton>Hover me</UiButton>
+			</UiTooltip>
+		</div>
+		
+		<div class="flex flex-col items-center gap-2">
+			<span class="text-xs text-muted-foreground">Align End</span>
+			<UiTooltip content="Aligned to the end" side="bottom" align="end">
+				<UiButton>Hover me</UiButton>
+			</UiTooltip>
+		</div>
+	</div>
+`;
+
+/**
+ * Tooltip with different alignment options (start, center, end).
+ */
+export const AlignmentOptions: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: alignmentOptionsTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: alignmentOptionsTemplate,
+  }),
+};
+
+const allSidesTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Top tooltip" side="top" align="center">
+    <UiButton>Top</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Right tooltip" side="right" align="center">
+    <UiButton>Right</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Bottom tooltip" side="bottom" align="center">
+    <UiButton>Bottom</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Left tooltip" side="left" align="center">
+    <UiButton>Left</UiButton>
+  </UiTooltip>
+</template>`;
+
+const allSidesTemplate = `
+  <div class="flex items-center justify-center gap-8 p-16">
+    <UiTooltip content="Top tooltip" side="top" align="center">
+      <UiButton>Top</UiButton>
+    </UiTooltip>
+    
+    <UiTooltip content="Right tooltip" side="right" align="center">
+      <UiButton>Right</UiButton>
+    </UiTooltip>
+    
+    <UiTooltip content="Bottom tooltip" side="bottom" align="center">
+      <UiButton>Bottom</UiButton>
+    </UiTooltip>
+    
+    <UiTooltip content="Left tooltip" side="left" align="center">
+      <UiButton>Left</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * All available position options for the tooltip (top, right, bottom, left).
+ */
+export const AllSides: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: allSidesTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: allSidesTemplate,
+  }),
+};
+
+const useCasesTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+import { UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Click to submit the form" side="top" align="center">
+    <UiButton>Submit</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="This action is permanent and cannot be undone" side="top" align="center">
+    <UiButton variant="destructive">Delete</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Need help? Click for documentation" side="top" align="center">
+    <UiButton size="icon" variant="ghost" aria-label="Help">
+      <UiIcon name="circle-help" :size="16" />
+    </UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Important information about this feature" side="top" align="center">
+    <UiButton size="icon" variant="outline" aria-label="Information">
+      <UiIcon name="info" :size="16" />
+    </UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Warning: This may affect other settings" side="top" align="center">
+    <UiButton size="icon" variant="secondary" aria-label="Warning">
+      <UiIcon name="triangle-alert" :size="16" />
+    </UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Disabled buttons can also have tooltips" side="top" align="center">
+    <UiButton :disabled="true">Disabled</UiButton>
+  </UiTooltip>
+</template>`;
+
+const useCasesTemplate = `
+	<div class="flex flex-wrap gap-4 items-center justify-center p-8">
+		<UiTooltip content="Click to submit the form" side="top" align="center">
+			<UiButton>Submit</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="This action is permanent and cannot be undone" side="top" align="center">
+			<UiButton variant="destructive">Delete</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Need help? Click for documentation" side="top" align="center">
+			<UiButton size="icon" variant="ghost" aria-label="Help">
+				<UiIcon name="circle-help" :size="16" />
+			</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Important information about this feature" side="top" align="center">
+			<UiButton size="icon" variant="outline" aria-label="Information">
+				<UiIcon name="info" :size="16" />
+			</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Warning: This may affect other settings" side="top" align="center">
+			<UiButton size="icon" variant="secondary" aria-label="Warning">
+				<UiIcon name="triangle-alert" :size="16" />
+			</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Disabled buttons can also have tooltips" side="top" align="center">
+			<UiButton :disabled="true">Disabled</UiButton>
+		</UiTooltip>
+	</div>
+`;
+
+/**
+ * Various tooltip use cases with different trigger elements and purposes.
+ */
+export const UseCases: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: useCasesTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton, UiIcon },
+    template: useCasesTemplate,
+  }),
+};
+
+const withTextTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Additional context for this text" side="top" align="center">
+    <span class="underline decoration-dashed cursor-help">Hover over this text</span>
+  </UiTooltip>
+</template>`;
+
+const withTextTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Additional context for this text" side="top" align="center">
+      <span class="underline decoration-dashed cursor-help">Hover over this text</span>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Tooltip wrapping inline text instead of a button.
+ */
+export const WithText: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: withTextTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip },
+    template: withTextTemplate,
+  }),
+};
+
+const customOffsetTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Tooltip with 16px offset" side="top" align="center" :side-offset="16">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+</template>`;
+
+const customOffsetTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Tooltip with 16px offset" side="top" align="center" :side-offset="16">
+      <UiButton>Hover me</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+/**
+ * Tooltip with a custom offset from the trigger (16px instead of default 4px).
+ */
+export const CustomOffset: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: customOffsetTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: customOffsetTemplate,
+  }),
+};

package/src/components/UiTooltip/UiTooltip.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import {
+    Tooltip as ShadcnTooltip,
+    TooltipContent as ShadcnTooltipContent,
+    TooltipProvider as ShadcnTooltipProvider,
+    TooltipTrigger as ShadcnTooltipTrigger,
+  } from '@/components/core/tooltip';
+  import type { UiTooltipProps } from './types';
+
+  defineOptions({
+    name: 'UiTooltip',
+  });
+
+  const open = defineModel<boolean>('open');
+
+  const props = withDefaults(defineProps<UiTooltipProps>(), {
+    side: 'top',
+    sideOffset: 4,
+    align: 'center',
+    class: '',
+    delayDuration: 500,
+    disabled: false,
+  });
+</script>
+
+<template>
+  <ShadcnTooltipProvider :delay-duration="props.delayDuration">
+    <ShadcnTooltip v-model:open="open" :disabled="props.disabled">
+      <ShadcnTooltipTrigger as-child>
+        <slot />
+      </ShadcnTooltipTrigger>
+      <ShadcnTooltipContent
+        :side="props.side"
+        :side-offset="props.sideOffset"
+        :align="props.align"
+        :class="props.class"
+      >
+        {{ props.content }}
+      </ShadcnTooltipContent>
+    </ShadcnTooltip>
+  </ShadcnTooltipProvider>
+</template>

package/src/components/UiTooltip/index.ts

@@ -0,0 +1,10 @@
+export { default as UiTooltip } from './UiTooltip.vue';
+export * from './types';
+
+// Re-export primitives for complex tooltip use cases (custom content, etc.)
+export {
+  Tooltip as UiTooltipRoot,
+  TooltipContent as UiTooltipContent,
+  TooltipProvider as UiTooltipProvider,
+  TooltipTrigger as UiTooltipTrigger,
+} from '@/components/core/tooltip';

package/src/components/UiTooltip/types.ts

@@ -0,0 +1,52 @@
+export type UiTooltipSides = 'top' | 'right' | 'bottom' | 'left';
+export type UiTooltipAlign = 'start' | 'center' | 'end';
+
+/**
+ * A popup that displays information on hover or focus. Use for
+ * explaining icons, providing hints, or showing additional context.
+ * @category Overlays
+ * @useCases icon explanation, help text, additional info, hints
+ * @keywords tooltip, hint, hover, popup, info, help, explanation
+ * @related UiPopover
+ */
+export interface UiTooltipProps {
+  /**
+   * The text content to display in the tooltip.
+   */
+  content: string;
+
+  /**
+   * The side of the trigger where the tooltip should appear.
+   * @default 'top'
+   */
+  side?: UiTooltipSides;
+
+  /**
+   * The distance in pixels from the trigger.
+   * @default 4
+   */
+  sideOffset?: number;
+
+  /**
+   * The preferred alignment against the trigger.
+   * @default 'center'
+   */
+  align?: UiTooltipAlign;
+
+  /**
+   * Additional CSS classes to apply to the tooltip content.
+   */
+  class?: string;
+
+  /**
+   * The duration from when the pointer enters the trigger until the tooltip opens.
+   * @default 500
+   */
+  delayDuration?: number;
+
+  /**
+   * Prevents the tooltip from opening.
+   * @default false
+   */
+  disabled?: boolean;
+}

package/src/components/core/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
+  import { AccordionRoot, useForwardPropsEmits } from 'reka-ui';
+
+  const props = defineProps<AccordionRootProps>();
+  const emits = defineEmits<AccordionRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AccordionRoot #default="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

package/src/components/core/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import type { AccordionItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AccordionItem, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem
+    #default="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>