@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/PhoneInput.stories.ts

@@ -0,0 +1,53 @@
+import PhoneInput from '@/components/PhoneInput/PhoneInput.vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+
+const meta: Meta<typeof PhoneInput> = {
+  title: 'WL/PhoneInput',
+  component: PhoneInput,
+  tags: ['autodocs'],
+  argTypes: {
+    state: { control: 'select', options: ['default', 'error', 'success'], description: 'The state of the phone input' },
+    placeholder: { control: 'text', description: 'The placeholder text for the phone input' },
+    countriesCodes: { control: 'array', description: 'The list of country codes for the phone input' },
+    defaultCountryCode: { control: 'text', description: 'The default country code for the phone input' },
+    appendInnerIcon: { control: 'text', description: 'The icon to display at the end of the input' },
+    variant: { control: 'text', description: 'The variant of the phone input' },
+    borderOnHover: { control: 'boolean', description: 'Whether to show a border on hover' }
+  },
+  args: {
+
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: ''
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { PhoneInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <PhoneInput
+          :state="args.state"
+          :countriesCodes="args.countriesCodes"
+          :defaultCountryCode="args.defaultCountryCode"
+          :appendInnerIcon="args.appendInnerIcon"
+          :variant="args.variant"
+          :borderOnHover="args.borderOnHover"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const Default: Story = { ...Template, args: {} };

package/src/stories/Select.stories.ts

@@ -0,0 +1,419 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Select from '../components/Select/Select.vue';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+
+const meta: Meta<typeof Select> = {
+  title: 'WL/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    clearable: { control: 'boolean' },
+    label: { control: 'text' },
+    chips: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    closableChips: { control: 'boolean' },
+    items: { control: 'object' },
+    returnObject: { control: 'boolean' },
+    'click:append': { action: 'click:append' },
+    'click:prepend': { action: 'click:prepend' },
+    'click:append-inner': { action: 'click:append-inner' },
+    'click:prepend-inner': { action: 'click:prepend-inner' },
+    'click:clear': { action: 'click:clear' },
+    'update:modelValue': { action: 'update:modelValue' },
+    'update:search': { action: 'update:search' },
+  },
+  args: {
+    items: ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'],
+    label: 'Select a state',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Select\` component allows for a customizable dropdown menu with options for multiple selections, chips, clearable selections, and icons.
+
+### Props
+- **\`clearable\`**: Allows the selection to be cleared.
+- **\`label\`**: Specifies the label for the select input.
+- **\`chips\`**: Displays selected items as chips within the input.
+- **\`multiple\`**: Enables selection of multiple items.
+- **\`closableChips\`**: Allows chips to be individually closed.
+- **\`items\`**: An array of items to display in the dropdown.
+- **\`returnObject\`**: Returns the entire item object instead of just the value.
+
+### Slots
+- **\`prependIcon\`**: Adds an icon before the input.
+- **\`appendIcon\`**: Adds an icon after the input.
+
+### Example Usage
+The following examples demonstrate various configurations, including single and multiple selections, clearable, and chips.
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const prependClick = action('click:prepend');
+      const appendClick = action('click:append');
+      const prependInnerClick = action('click:prepend-inner');
+      const appendInnerClick = action('click:append-inner');
+      const clearClick = action('click:clear');
+      const updateModelValue = action('update:modelValue');
+      const updateSearch = action('update:search');
+
+      return {
+        args,
+        prependClick,
+        appendClick,
+        prependInnerClick,
+        appendInnerClick,
+        clearClick,
+        updateModelValue,
+        updateSearch,
+      };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <Select
+          v-bind="args"
+          @click:prepend="prependClick"
+          @click:append="appendClick"
+          @click:prepend-inner="prependInnerClick"
+          @click:append-inner="appendInnerClick"
+          @click:clear="clearClick"
+          @update:modelValue="updateModelValue"
+          @update:search="updateSearch"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Default story without any additional props like chips or clearable
+export const Default: Story = {
+  ...Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" label="Select a state" />`,
+      },
+    },
+  },
+};
+
+// Story with chips enabled and clearable set to true
+export const WithChips: Story = {
+  ...Template,
+  args: {
+    chips: true,
+    closableChips: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select chips closableChips />`,
+      },
+    },
+  },
+};
+
+// Story with prepend and append icons
+export const WithPrependAppendIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
+      },
+    },
+  },
+};
+
+// Disabled state story
+export const Disabled: Story = {
+  ...Template,
+  args: { disabled: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select disabled />`,
+      },
+    },
+  },
+};
+
+// Story with compact density
+export const CompactSelect: Story = {
+  ...Template,
+  args: { density: 'compact' },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select density="compact" />`,
+      },
+    },
+  },
+};
+
+// Disabled state with icons
+export const DisabledWithIcons: Story = {
+  ...Template,
+  args: {
+    disabled: true,
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+    appendInnerIcon: 'heroicons:calendar',
+    prependInnerIcon: 'heroicons:calendar',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select disabled prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
+      },
+    },
+  },
+};
+
+// Story with custom icons
+export const CustomIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:sparkles',
+    appendIcon: 'heroicons:paper-airplane',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select prependIcon="heroicons:sparkles" appendIcon="heroicons:paper-airplane" />`,
+      },
+    },
+  },
+};
+
+// Without chips
+export const WithoutChips: Story = {
+  ...Template,
+  args: { chips: false },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select chips="false" />`,
+      },
+    },
+  },
+};
+
+// Multiple selection with chips enabled
+export const MultipleWithChips: Story = {
+  ...Template,
+  args: {
+    multiple: true,
+    chips: true,
+    closableChips: true,
+    items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select multiple chips closableChips :items="['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']" />`,
+      },
+    },
+  },
+};
+
+// Closable chips story
+export const ClosableChips: Story = {
+  ...Template,
+  args: {
+    chips: true,
+    closableChips: true,
+    items: ['Red', 'Blue', 'Green', 'Yellow', 'Purple'],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select chips closableChips :items="['Red', 'Blue', 'Green', 'Yellow', 'Purple']" />`,
+      },
+    },
+  },
+};
+
+// Menu and clear icons
+export const WithMenuAndClearIcons: Story = {
+  ...Template,
+  args: {
+    menuIcon: 'heroicons:menu',
+    clearIcon: 'heroicons:x-circle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select menuIcon="heroicons:menu" clearIcon="heroicons:x-circle" />`,
+      },
+    },
+  },
+};
+
+// Clearable and multiple disabled
+export const ClearableAndMultiple: Story = {
+  ...Template,
+  args: {
+    clearable: false,
+    multiple: false,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Select clearable="false" multiple="false" />`,
+      },
+    },
+  },
+};
+
+// Preselected values with returnObject variations
+export const PreselectedValues: Story = {
+  render: (args) => ({
+    components: { Select },
+    setup() {
+      const items = [
+        { title: 'California', value: 'CA' },
+        { title: 'Colorado', value: 'CO' },
+        { title: 'Florida', value: 'FL' },
+        { title: 'Georgia', value: 'GA' },
+        { title: 'Texas', value: 'TX' },
+        { title: 'Wyoming', value: 'WY' },
+      ];
+
+      const selectedValueFalse = ref('CA'); // Single selection, returnObject: false
+      const selectedObjectTrue = ref(items.find((item) => item.value === 'FL')); // Single selection, returnObject: true
+      const selectedValuesFalse = ref(['CA', 'GA']); // Multiple selection, returnObject: false
+      const selectedObjectsTrue = ref(
+        items.filter((item) => ['TX', 'WY'].includes(item.value)),
+      ); // Multiple selection, returnObject: true
+
+      const updateModelValue = action('update:modelValue');
+
+      return {
+        args: { ...args, items, itemTitle: 'title', itemValue: 'value' },
+        selectedValueFalse,
+        selectedObjectTrue,
+        selectedValuesFalse,
+        selectedObjectsTrue,
+        updateModelValue,
+      };
+    },
+    template: `
+      <div style="padding: 16px; display: flex; flex-direction: column; gap: 24px;">
+        <!-- Single selection with returnObject: false -->
+        <Select v-bind="args" :returnObject="false" :multiple="false" v-model="selectedValueFalse" @update:modelValue="updateModelValue" />
+        <p>Selected Value (returnObject: false): {{ selectedValueFalse }}</p>
+
+        <!-- Single selection with returnObject: true -->
+        <Select v-bind="args" :returnObject="true" :multiple="false" v-model="selectedObjectTrue" @update:modelValue="updateModelValue" />
+        <p>Selected Object (returnObject: true): {{ selectedObjectTrue }}</p>
+
+        <!-- Multiple selection with returnObject: false -->
+        <Select v-bind="args" :returnObject="false" :multiple="true" v-model="selectedValuesFalse" @update:modelValue="updateModelValue" />
+        <p>Selected Values (multiple, returnObject: false): {{ selectedValuesFalse }}</p>
+
+        <!-- Multiple selection with returnObject: true -->
+        <Select v-bind="args" :returnObject="true" :multiple="true" v-model="selectedObjectsTrue" @update:modelValue="updateModelValue" />
+        <p>Selected Objects (multiple, returnObject: true): {{ selectedObjectsTrue }}</p>
+      </div>
+    `,
+  }),
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="false"
+    :multiple="false"
+    v-model="selectedValueFalse"
+  />
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="true"
+    :multiple="false"
+    v-model="selectedObjectTrue"
+  />
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="false"
+    :multiple="true"
+    v-model="selectedValuesFalse"
+  />
+  <Select
+    :items="[
+      { title: 'California', value: 'CA' },
+      { title: 'Colorado', value: 'CO' },
+      { title: 'Florida', value: 'FL' },
+      { title: 'Georgia', value: 'GA' },
+      { title: 'Texas', value: 'TX' },
+      { title: 'Wyoming', value: 'WY' }
+    ]"
+    :returnObject="true"
+    :multiple="true"
+    v-model="selectedObjectsTrue"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = [
+  { title: 'California', value: 'CA' },
+  { title: 'Colorado', value: 'CO' },
+  { title: 'Florida', value: 'FL' },
+  { title: 'Georgia', value: 'GA' },
+  { title: 'Texas', value: 'TX' },
+  { title: 'Wyoming', value: 'WY' },
+];
+
+const selectedValueFalse = ref('CA');
+const selectedObjectTrue = ref(items.find((item) => item.value === 'FL'));
+const selectedValuesFalse = ref(['CA', 'GA']);
+const selectedObjectsTrue = ref(items.filter((item) => ['TX', 'WY'].includes(item.value)));
+</script>
+        `,
+      },
+    },
+  },
+};

package/src/stories/TextArea.stories.ts

@@ -0,0 +1,112 @@
+// v-textarea.stories.ts
+import { Meta, StoryObj } from '@storybook/vue3';
+import TextArea from '../components/TextArea/TextArea.vue'; // Adjust the import path accordingly
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the TextArea component
+const meta: Meta<typeof TextArea> = {
+  title: 'WL/TextArea',
+  component: TextArea,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    clearIcon: { control: 'text' },
+    prependIcon: { control: 'text' },
+    appendIcon: { control: 'text' },
+    prependInnerIcon: { control: 'text' },
+    appendInnerIcon: { control: 'text' },
+    modelValue: { control: 'text' },
+    'click:append': { action: 'click:append' },
+    'click:prepend': { action: 'click:prepend' },
+    'click:appendInner': { action: 'click:appendInner' },
+    'click:prependInner': { action: 'click:prependInner' },
+    'click:clear': { action: 'click:clear' },
+    'click:control': { action: 'click:control' },
+  },
+  args: {
+    label: 'Label',
+    clearIcon: 'heroicons:trash',
+    prependIcon: 'heroicons:chat-bubble',
+    appendIcon: 'heroicons:paper-airplane',
+    prependInnerIcon: 'heroicons:exclamation',
+    appendInnerIcon: 'heroicons:x-circle',
+    modelValue: '',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TextArea\` component provides a multi-line input with various options for customization.
+
+### Props
+- **\`label\`**: Sets the label text for the TextArea.
+- **\`clearIcon\`**: Icon to clear the text input.
+- **\`prependIcon\`**: Icon displayed before the text area.
+- **\`appendIcon\`**: Icon displayed after the text area.
+- **\`prependInnerIcon\`**: Inner icon before the text.
+- **\`appendInnerIcon\`**: Inner icon after the text.
+- **\`modelValue\`**: Binding for the text area content.
+
+### Slots
+- **\`prependIcon\`**: Adds an icon before the input.
+- **\`appendIcon\`**: Adds an icon after the input.
+
+### Example Usage
+The following examples demonstrate various configurations of the \`TextArea\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template for the TextArea
+const Template: Story = {
+  render: (args) => ({
+    components: { TextArea },
+    setup() {
+      // Define actions for events
+      const prependClick = action('click:prepend');
+      const appendClick = action('click:append');
+      const prependInnerClick = action('click:prepend-inner');
+      const appendInnerClick = action('click:append-inner');
+      const clearClick = action('click:clear');
+      const controlClick = action('click:control');
+
+      return {
+        args,
+        prependClick,
+        appendClick,
+        prependInnerClick,
+        appendInnerClick,
+        clearClick,
+        controlClick,
+      };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <TextArea
+          v-bind="args"
+          @click:prepend="prependClick"
+          @click:append="appendClick"
+          @click:prepend-inner="prependInnerClick"
+          @click:append-inner="appendInnerClick"
+          @click:clear="clearClick"
+          @click:control="controlClick"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Stories with different states and configurations
+export const Default: Story = { ...Template, args: {} };
+export const WithIcons: Story = { ...Template };
+
+export const Disabled: Story = { ...Template, args: { disabled: true } };
+export const CustomIcons: Story = {
+  ...Template,
+  args: { prependIcon: 'heroicons:calendar', appendIcon: 'heroicons:pencil' },
+};