@aleph-alpha/ui-library 1.8.0 → 1.10.0

package/src/primitives/UiTabs/types.ts

@@ -0,0 +1,68 @@
+/** Orientation of the tabs. */
+export type UiTabsOrientation = 'horizontal' | 'vertical';
+
+/** Reading direction for the tabs. */
+export type UiTabsDir = 'ltr' | 'rtl';
+
+/**
+ * Activation mode for tabs.
+ */
+export type UiTabsActivationMode = 'automatic' | 'manual';
+
+/**
+ * Tabbed navigation for switching between content panels. Use for
+ * organizing related content into separate views.
+ *
+ * @category Navigation
+ * @useCases content sections, view switcher, settings tabs, navigation
+ * @keywords tabs, tablist, panel, navigation, switch, section
+ * @related UiAccordion
+ */
+export type UiTabsProps = {
+  /** The controlled value of the active tab when using `v-model` for two-way binding. */
+  modelValue?: string;
+  /** The value of the tab that should be active when initially rendered (uncontrolled). */
+  defaultValue?: string;
+  /** The orientation of the tabs. */
+  orientation?: UiTabsOrientation;
+  /** The reading direction. */
+  dir?: UiTabsDir;
+  /** Whether tabs are activated automatically on focus or manually on click. */
+  activationMode?: UiTabsActivationMode;
+};
+
+/**
+ * Emits for the UiTabs root component.
+ */
+export type UiTabsEmits = {
+  /** Emitted when the active tab changes. */
+  'update:modelValue': [value: string];
+};
+
+/**
+ * Props for the UiTabsList component.
+ */
+export type UiTabsListProps = {
+  /** Whether keyboard navigation should loop from last to first and vice versa. */
+  loop?: boolean;
+};
+
+/**
+ * Props for the UiTabsTrigger component.
+ */
+export type UiTabsTriggerProps = {
+  /** Unique value that associates the trigger with a content panel (required). */
+  value: string;
+  /** Whether the tab trigger is disabled. */
+  disabled?: boolean;
+};
+
+/**
+ * Props for the UiTabsContent component.
+ */
+export type UiTabsContentProps = {
+  /** Unique value that associates the content with a trigger (required). */
+  value: string;
+  /** Force mounting when more control is needed (useful for animations). */
+  forceMount?: boolean;
+};

package/src/primitives/UiTextarea/UiTextarea.stories.ts

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiTextarea from './UiTextarea.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof UiTextarea> = {
+  title: 'Primitives/UiTextarea',
+  component: UiTextarea,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Set component as disabled',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Set placeholder text',
+    },
+  },
+  args: {
+    name: 'textarea',
+    disabled: false,
+    placeholder: 'Type your message here.',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiTextarea>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTextarea } from '@aleph-alpha/ui-library'
+
+const value = ref('')
+</script>
+
+<template>
+  <div class="grid w-full gap-1.5">
+    <label for="message" class="text-sm font-medium">Your message</label>
+    <UiTextarea id="message" v-model="value" name="message" placeholder="Type your message here." />
+  </div>
+</template>`;
+
+/**
+ * Default textarea with a label.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiTextarea },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: `
+      <div class="grid w-full gap-1.5">
+        <label for="message" class="text-sm font-medium">Your message</label>
+        <UiTextarea id="message" v-model="value" name="message" :placeholder="args.placeholder" :disabled="args.disabled" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiTextarea } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="grid w-full gap-1.5">
+    <label for="message" class="text-sm font-medium">Your message</label>
+    <UiTextarea id="message" name="message" placeholder="Type your message here." disabled />
+  </div>
+</template>`;
+
+/**
+ * Textarea in disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { UiTextarea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="grid w-full gap-1.5">
+        <label for="message" class="text-sm font-medium">Your message</label>
+        <UiTextarea id="message" name="message" :placeholder="args.placeholder" :disabled="args.disabled" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiTextarea/UiTextarea.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { Textarea as ShadcnTextarea } from '@/primitives/shadcn/textarea';
+  import type { UiTextareaProps } from './types';
+
+  defineOptions({
+    name: 'UiTextarea',
+  });
+
+  const props = withDefaults(defineProps<UiTextareaProps>(), {
+    placeholder: undefined,
+    disabled: false,
+  });
+
+  const model = defineModel<string>();
+</script>
+
+<template>
+  <ShadcnTextarea v-model="model" v-bind="props" />
+</template>

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

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+import UiTextarea from '../UiTextarea.vue';
+
+describe('UiTextarea', () => {
+  test('renders enabled by default with placeholder', () => {
+    const placeholder = 'Enter text';
+    const { getByRole, getByPlaceholderText } = render(UiTextarea, {
+      props: {
+        name: 'test-textarea',
+        placeholder,
+      },
+    });
+    expect(getByRole('textbox')).toBeEnabled();
+    expect(getByPlaceholderText(placeholder)).toBeInTheDocument();
+  });
+
+  test('renders disabled when disabled prop is true', () => {
+    const { getByRole } = render(UiTextarea, {
+      props: {
+        name: 'test-textarea',
+        disabled: true,
+      },
+    });
+    expect(getByRole('textbox')).toBeDisabled();
+  });
+
+  test('emits update:modelValue on user input', async () => {
+    const testValue = 'Hello';
+    const { getByRole, emitted } = render(UiTextarea, {
+      props: {
+        name: 'test-textarea',
+      },
+    });
+    await userEvent.type(getByRole('textbox'), testValue);
+    const emittedModelValue = emitted('update:modelValue') as string[][];
+    expect(emittedModelValue[emittedModelValue.length - 1][0]).toMatch(testValue);
+  });
+});

package/src/primitives/UiTextarea/index.ts

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

package/src/primitives/UiTextarea/types.ts

@@ -0,0 +1,30 @@
+/**
+ * A multi-line text input for longer content. Use for comments,
+ * descriptions, messages, or any text that may span multiple lines.
+ *
+ * @category Form Inputs
+ * @useCases comment box, message input, description field, notes, bio
+ * @keywords textarea, multiline, text, comment, message, description, form
+ * @related UiInput
+ */
+export interface UiTextareaProps {
+  /**
+   * Prop to name the element
+   */
+  name: string;
+  /**
+   * Prop to define the Textarea as disabled, therefore blocking all user interaction with it.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Prop to define the Textarea as placeholder.
+   * @default undefined
+   */
+  placeholder?: string;
+  /**
+   * Define the element as required on a Form.
+   * @default false
+   */
+  required?: boolean;
+}