@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Button.stories.ts

@@ -0,0 +1,263 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Button from '@components/Button/Button.vue';
+
+export default {
+  title: 'Wl/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color', description: 'Button color' },
+    prependIcon: { control: 'text', description: 'Prepend icon' },
+    appendIcon: { control: 'text', description: 'Append icon' },
+    loading: { control: 'boolean', description: 'Loading state of the button' },
+    density: {
+      control: 'select',
+      options: ['default', 'comfortable', 'compact'],
+      description: 'Density of the button',
+    },
+    variant: {
+      control: 'select',
+      options: ['flat', 'outlined', 'elevated', 'text', 'tonal'],
+      description: 'Button variant',
+    },
+    size: {
+      control: 'select',
+      options: ['x-small', 'small', 'default', 'large', 'x-large'],
+      description: 'Button size',
+    },
+    label: { control: 'text', description: 'Button label text' },
+    disabled: { control: 'boolean', description: 'Disables the button' },
+  },
+  args: {
+    color: '#172774',
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+    loading: false,
+    density: 'default',
+    variant: 'flat',
+    size: 'x-large',
+    label: 'Button',
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Button\` component offers customizable button styles, sizes, icons, and loading states to enhance user interaction.
+
+### Props
+- **\`color\`**: Sets the background color of the button.
+- **\`prependIcon\`**: Icon displayed at the start of the button.
+- **\`appendIcon\`**: Icon displayed at the end of the button.
+- **\`loading\`**: When true, displays a loading spinner.
+- **\`density\`**: Adjusts padding and margins (options: \`default\`, \`comfortable\`, \`compact\`).
+- **\`variant\`**: Specifies the button style (options: \`flat\`, \`outlined\`, \`elevated\`, \`text\`, \`tonal\`).
+- **\`size\`**: Sets the button size (options: \`x-small\`, \`small\`, \`default\`, \`large\`, \`x-large\`).
+- **\`label\`**: Text displayed inside the button.
+- **\`disabled\`**: Disables button functionality.
+
+### Example Usage
+Examples below demonstrate various configurations of the \`Button\` component with options for icons, colors, sizes, and variants.
+        `,
+      },
+    },
+  },
+} as Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: { label: 'Button' },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button label="Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const WithPrependIcon: Story = {
+  args: {
+    prependIcon: '$vuetify',
+    label: 'With Icon',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button prependIcon="$vuetify" label="With Icon" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+    label: 'Loading...',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button loading label="Loading..." />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    color: '#FF5733',
+    label: 'Custom Color',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button color="#FF5733" label="Custom Color" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const OutlinedVariant: Story = {
+  args: {
+    variant: 'outlined',
+    label: 'Outlined Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="outlined" label="Outlined Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TextVariant: Story = {
+  args: {
+    variant: 'text',
+    label: 'Text Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="text" label="Text Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ElevatedVariant: Story = {
+  args: {
+    variant: 'elevated',
+    label: 'Elevated Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="elevated" label="Elevated Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TonalVariant: Story = {
+  args: {
+    variant: 'tonal',
+    label: 'Tonal Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button variant="tonal" label="Tonal Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DisabledState: Story = {
+  args: {
+    disabled: true,
+    label: 'Disabled Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button disabled label="Disabled Button" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DisabledOutlined: Story = {
+  args: {
+    disabled: true,
+    variant: 'outlined',
+    label: 'Disabled Outlined',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button disabled variant="outlined" label="Disabled Outlined" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const SmallButton: Story = {
+  args: {
+    size: 'small',
+    label: 'Small Button',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Button size="small" label="Small Button" />
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/CheckBox.stories.ts

@@ -0,0 +1,348 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Checkbox from '../components/CheckBox/Checkbox.vue';
+import { ref } from 'vue';
+import { action } from '@storybook/addon-actions';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Wl/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    success: { control: 'boolean' },
+    error: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    density: {
+      control: 'select',
+      options: ['comfortable', 'default', 'compact'],
+    },
+    value: { control: 'text' },
+    modelValue: { control: 'boolean' },
+    label: { control: 'text' },
+    'update:modelValue': { action: 'update:modelValue' },
+    'input-error': { action: 'input-error' },
+  },
+  args: {
+    density: 'default',
+    success: false,
+    error: false,
+    disabled: false,
+    value: 'checkbox',
+    modelValue: false,
+    label: 'Checkbox Label',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Checkbox\` component offers customizable checkbox styles with options for success, error, and disabled states. It supports both boolean and array-based models for single and multiple checkbox selections.
+
+### Props
+- **\`success\`**: Applies a success styling to the checkbox.
+- **\`error\`**: Applies an error styling to the checkbox.
+- **\`disabled\`**: Disables the checkbox input.
+- **\`density\`**: Adjusts the padding around the checkbox (comfortable, default, compact).
+- **\`value\`**: Used for array binding; represents a unique item in an array.
+- **\`modelValue\`**: Boolean value that binds the checkbox state.
+- **\`label\`**: The label text for the checkbox.
+
+### Example Usage
+Examples below demonstrate various configurations of the \`Checkbox\` component, including single and multiple checkbox options with boolean and array model binding.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const updateModelValue = action('update:modelValue');
+      const inputError = action('input-error');
+
+      return {
+        args,
+        modelValue,
+        updateModelValue,
+        inputError,
+      };
+    },
+    template: `
+        <div style="padding: 16px;">
+          <Checkbox
+            v-bind="args"
+            v-model="modelValue"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+          />
+        </div>
+      `,
+  }),
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {
+    label: 'Default Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox label="Default Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const SuccessState: Story = {
+  ...Template,
+  args: {
+    success: true,
+    label: 'Success Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox success label="Success Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ErrorState: Story = {
+  ...Template,
+  args: {
+    error: true,
+    label: 'Error Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox error label="Error Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  ...Template,
+  args: {
+    disabled: true,
+    label: 'Disabled Checkbox',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox disabled label="Disabled Checkbox" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DensityComfortable: Story = {
+  ...Template,
+  args: {
+    density: 'comfortable',
+    label: 'Comfortable Density',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox density="comfortable" label="Comfortable Density" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DensityCompact: Story = {
+  ...Template,
+  args: {
+    density: 'compact',
+    label: 'Compact Density',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <Checkbox density="compact" label="Compact Density" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const MultipleCheckboxes: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const selected = ref(['John']);
+      const updateModelValue = action('update:modelValue');
+      const inputError = action('input-error');
+
+      return {
+        args,
+        selected,
+        updateModelValue,
+        inputError,
+      };
+    },
+    template: `
+        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
+          <Checkbox
+            v-bind="args"
+            v-model="selected"
+            value="John"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="John"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="selected"
+            value="Emma"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Emma"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="selected"
+            value="Steve"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Steve"
+          />
+          <p>Selected: {{ selected }}</p>
+        </div>
+      `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Checkbox v-model="selected" value="John" label="John" />
+    <Checkbox v-model="selected" value="Emma" label="Emma" />
+    <Checkbox v-model="selected" value="Steve" label="Steve" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: ['John'],
+    };
+  },
+};
+</script>
+        `,
+      },
+    },
+  },
+};
+
+export const BooleanCheckboxes: Story = {
+  render: (args) => ({
+    components: { Checkbox },
+    setup() {
+      const johnChecked = ref(false);
+      const emmaChecked = ref(false);
+      const steveChecked = ref(false);
+
+      const updateModelValue = action('update:modelValue');
+      const inputError = action('input-error');
+
+      return {
+        args,
+        johnChecked,
+        emmaChecked,
+        steveChecked,
+        updateModelValue,
+        inputError,
+      };
+    },
+    template: `
+        <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
+          <Checkbox
+            v-bind="args"
+            v-model="johnChecked"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="John"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="emmaChecked"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Emma"
+          />
+          <Checkbox
+            v-bind="args"
+            v-model="steveChecked"
+            @update:modelValue="updateModelValue"
+            @input-error="inputError"
+            label="Steve"
+          />
+          <p>John Checked: {{ johnChecked }}</p>
+          <p>Emma Checked: {{ emmaChecked }}</p>
+          <p>Steve Checked: {{ steveChecked }}</p>
+        </div>
+      `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Checkbox v-model="johnChecked" label="John" />
+    <Checkbox v-model="emmaChecked" label="Emma" />
+    <Checkbox v-model="steveChecked" label="Steve" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      johnChecked: false,
+      emmaChecked: false,
+      steveChecked: false,
+    };
+  },
+};
+</script>
+        `,
+      },
+    },
+  },
+};

package/src/stories/DateInput.stories.ts

@@ -0,0 +1,54 @@
+import DateInput from '@components/DateInput/DateInput.vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+
+const meta: Meta<typeof DateInput> = {
+  title: 'WL/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  argTypes: {
+    isoDate: { control: 'text', description: 'The ISO date string' },
+    layout: { control: 'select', options: ['default', 'edit-field'], description: 'The layout of the input' },
+    minDate: { control: 'date', description: 'The minimum selectable date' },
+    minDateErrorMessage: { control: 'text', description: 'Error message for min date' },
+    maxDate: { control: 'date', description: 'The maximum selectable date' },
+    maxDateErrorMessage: { control: 'text', description: 'Error message for max date' },
+    variant: { control: 'text', description: 'The variant of the input' },
+    placeholder: { control: 'text', description: 'The placeholder text' },
+    invalidDateErrorMessage: { control: 'text', description: 'Error message for invalid date' },
+  },
+  args: {
+    isoDate: new Date().toISOString(),
+    minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
+    variant: 'outlined',
+    
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: ''
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { DateInput },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `<div style="padding: 16px;">
+        <DateInput
+          v-bind="args"
+        />
+      </div>`,
+  }),
+};
+
+export const Default: Story = { ...Template, args: {} };