@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Laboratory/Timeline.stories.ts

@@ -0,0 +1,403 @@
+import { Meta, Story } from '@storybook/vue3';
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const meta: Meta<typeof Timeline> = {
+  title: 'WL/Laboratory/Timeline',
+  component: Timeline,
+  tags: ['autodocs'],
+  argTypes: {
+    events: {
+      control: 'object',
+      description: 'An array of event objects to display in the timeline.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Timeline\` component displays a series of events in chronological order. Each event can include headers, durations, steps, and status indicators.
+
+### Props
+
+- **\`events\`**: An array of event objects. Each event object can have the following properties:
+  - **\`status\`**: The status of the event, e.g., 'Done', 'Ready', 'Dispatched'.
+  - **\`firstHeader\`**: The main header for the event.
+  - **\`secondHeader\`**: A secondary header for the event.
+  - **\`firstDuration\`**: Duration text associated with the first header.
+  - **\`secondDuration\`**: Duration text associated with the second header.
+  - **\`steps\`**: An array of step objects, each containing a date and description.
+  - **\`urgent\`**: A boolean indicating if the event is marked as urgent.
+
+### Slots
+
+- **\`content\`**: Slot to customize the rendering of each event. Receives \`event\` as a scoped slot prop.
+
+### Example Usage
+
+Below are examples of how to use the \`Timeline\` component with various event configurations.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story = (args) => ({
+  components: { Timeline, TimelineEvent, TagLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 16px;">
+      <Timeline v-bind="args">
+        <template #content="{ event }">
+          <TimelineEvent
+            :firstHeader="event.firstHeader"
+            :secondHeader="event.secondHeader"
+            :firstDuration="event.firstDuration"
+            :secondDuration="event.secondDuration"
+            :steps="event.steps"
+            :urgent="event.urgent"
+          >
+            <template #icon>
+              <TagLabel :status="event.status" />
+            </template>
+          </TimelineEvent>
+        </template>
+      </Timeline>
+    </div>
+  `,
+});
+
+export const DefaultTimeline = Template.bind({});
+DefaultTimeline.args = {
+  events: [
+    {
+      status: 'Done',
+      firstHeader: 'Projekt A',
+      secondHeader: 'Projekt B',
+      firstDuration: '10 Tage 5 Stunden',
+      secondDuration: '12 Tage 3 Stunden',
+      steps: [
+        {
+          date: '12. Sept. 2021',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+          date: '15. Sept. 2022',
+          description:
+            'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+      ],
+    },
+  ],
+};
+DefaultTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    status: 'Done',
+    firstHeader: 'Projekt A',
+    secondHeader: 'Projekt B',
+    firstDuration: '10 Tage 5 Stunden',
+    secondDuration: '12 Tage 3 Stunden',
+    steps: [
+      {
+        date: '12. Sept. 2021',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+      {
+        date: '15. Sept. 2022',
+        description:
+          'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};
+
+export const MultipleStepsTimeline = Template.bind({});
+MultipleStepsTimeline.args = {
+  events: [
+    {
+      status: 'Done',
+      firstHeader: 'Projekt A',
+      secondHeader: 'Projekt B',
+      firstDuration: '10 Tage 5 Stunden',
+      secondDuration: '12 Tage 3 Stunden',
+      steps: [
+        {
+          date: '12. Sept. 2021',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+          date: '15. Sept. 2022',
+          description:
+            'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+      ],
+    },
+    {
+      urgent: true,
+      status: 'Ready',
+      firstHeader: 'Projekt C',
+      secondHeader: 'Estimated',
+      firstDuration: '5 Tage 2 Stunden',
+      secondDuration: '1 d 5 h',
+      steps: [
+        {
+          date: '18. Sept. 2023',
+          description:
+            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+        },
+        {
+          date: '20. Sept. 2024',
+          description:
+            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+        },
+      ],
+    },
+    {
+      status: 'Dispatched',
+      firstHeader: 'Projekt E',
+      secondHeader: 'Projekt F',
+      firstDuration: '4 Tage 2 Stunden',
+      secondDuration: '6 Tage 3 Stunden',
+      steps: [], // No steps for this event
+    },
+  ],
+};
+MultipleStepsTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    status: 'Done',
+    firstHeader: 'Projekt A',
+    secondHeader: 'Projekt B',
+    firstDuration: '10 Tage 5 Stunden',
+    secondDuration: '12 Tage 3 Stunden',
+    steps: [
+      {
+        date: '12. Sept. 2021',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+      {
+        date: '15. Sept. 2022',
+        description:
+          'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      },
+    ],
+  },
+  {
+    urgent: true,
+    status: 'Ready',
+    firstHeader: 'Projekt C',
+    secondHeader: 'Estimated',
+    firstDuration: '5 Tage 2 Stunden',
+    secondDuration: '1 d 5 h',
+    steps: [
+      {
+        date: '18. Sept. 2023',
+        description:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+      },
+      {
+        date: '20. Sept. 2024',
+        description:
+          'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+      },
+    ],
+  },
+  {
+    status: 'Dispatched',
+    firstHeader: 'Projekt E',
+    secondHeader: 'Projekt F',
+    firstDuration: '4 Tage 2 Stunden',
+    secondDuration: '6 Tage 3 Stunden',
+    steps: [],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};
+
+export const NoStepsTimeline = Template.bind({});
+NoStepsTimeline.args = {
+  events: [
+    {
+      status: 'Dispatched',
+      firstHeader: 'Projekt E',
+      secondHeader: 'Projekt F',
+      firstDuration: '4 Tage 2 Stunden',
+      secondDuration: '6 Tage 3 Stunden',
+      steps: [], // No steps for this event
+    },
+  ],
+};
+NoStepsTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    status: 'Dispatched',
+    firstHeader: 'Projekt E',
+    secondHeader: 'Projekt F',
+    firstDuration: '4 Tage 2 Stunden',
+    secondDuration: '6 Tage 3 Stunden',
+    steps: [],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};
+
+export const UrgentTimeline = Template.bind({});
+UrgentTimeline.args = {
+  events: [
+    {
+      urgent: true,
+      status: 'Done',
+      firstHeader: 'Projekt B',
+      secondHeader: 'Estimated',
+      firstDuration: '4 Tage 2 Stunden',
+      secondDuration: '6 Tage 3 Stunden',
+      steps: [], // No steps for this event
+    },
+  ],
+};
+UrgentTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    urgent: true,
+    status: 'Done',
+    firstHeader: 'Projekt B',
+    secondHeader: 'Estimated',
+    firstDuration: '4 Tage 2 Stunden',
+    secondDuration: '6 Tage 3 Stunden',
+    steps: [],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};

package/src/stories/NotificationBubble.stories.ts

@@ -0,0 +1,194 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue'; // Adjust the import to match your component location
+
+// Meta configuration for the NotificationBubble component
+const meta: Meta<typeof NotificationBubble> = {
+  title: 'WL/NotificationBubble',
+  component: NotificationBubble,
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+    size: { control: 'text' },
+    text: { control: 'text' },
+    textColor: { control: 'color' },
+    icon: { control: 'text' },
+    iconSize: { control: 'text' },
+  },
+  args: {
+    color: 'var(--Dental-Blue-0)',
+    size: '40',
+    textColor: 'white',
+    iconSize: '24',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`NotificationBubble\` component is a visual indicator used for displaying notifications with either an icon or text. The component offers customizable properties for color, size, and icon/text options.
+
+### Props
+- **\`color\`**: Sets the background color of the notification bubble.
+- **\`size\`**: Determines the size of the bubble.
+- **\`text\`**: Text displayed inside the bubble, typically used to show a count.
+- **\`textColor\`**: Sets the color of the text within the bubble.
+- **\`icon\`**: Icon name to display if no text is present.
+- **\`iconSize\`**: Controls the size of the icon.
+
+### Example Usage
+Examples below show the \`NotificationBubble\` in different states, including icon-only and text-only modes.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common render template for the component
+const Template: Story = {
+  render: (args) => ({
+    components: { NotificationBubble },
+    setup() {
+      return { args };
+    },
+    template: `
+      <NotificationBubble v-bind="args" />
+    `,
+  }),
+};
+
+/**
+ * Default Notification Bubble Story
+ */
+export const Default: Story = {
+  ...Template,
+  args: {
+    icon: 'heroicons:bell',
+    text: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble icon="heroicons:bell" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story with Text Display
+ */
+export const WithText: Story = {
+  ...Template,
+  args: {
+    text: '9',
+    icon: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble text="9" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Custom Color and Text Notification Bubble Story
+ */
+export const CustomColorAndText: Story = {
+  ...Template,
+  args: {
+    color: 'red',
+    icon: 'heroicons:calendar',
+    iconSize: '25',
+    textColor: 'white',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Custom Icon Notification Bubble Story
+ */
+export const CustomIcon: Story = {
+  ...Template,
+  args: {
+    color: 'green',
+    icon: 'heroicons:check-circle',
+    iconSize: '30',
+    text: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="green" icon="heroicons:check-circle" iconSize="30" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const OutlinedIcon: Story = {
+  ...Template,
+  args: {
+    color: 'var(--Dental-Blue-0)',
+    icon: 'heroicons:x-mark',
+    iconSize: '25',
+    textColor: 'var(--Dental-Blue-0)',
+    variant: 'outlined',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
+</template>
+        `,
+      },
+    },
+  },
+};
+export const OutlinedText: Story = {
+  ...Template,
+  args: {
+    color: 'var(--Dental-Blue-0)',
+    text: '9',
+    iconSize: '25',
+    textColor: 'var(--Dental-Blue-0)',
+    variant: 'outlined',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/OtpInput.stories.ts

@@ -0,0 +1,101 @@
+import OtpInput from '@/components/OtpInput/OtpInput.vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+import { reactive } from 'vue';
+
+const meta: Meta<typeof OtpInput> = {
+  title: 'WL/OtpInput',
+  component: OtpInput,
+  tags: ['autodocs'],
+  argTypes: {
+    phoneNumber: { control: 'text', description: 'The phone number to send the OTP to' },
+    message: { control: 'text', description: 'The status message to display under the input' },
+    otpState: { control: 'select', options: ['default', 'error', 'success'], description: 'The state of the OTP input' },
+    submitFn: { control: 'function', description: 'The function to call when the OTP is submitted' },
+    resendFn: { control: 'function', description: 'The function to call when the resend button is clicked' },
+    loading: { control: 'boolean', description: 'Whether the component is loading' },
+    colors: { control: 'object', description: 'The colors to use for the component' }
+  },
+  args: {
+    phoneNumber: '+4915211122344',
+    message: 'Please enter the OTP sent to your phone.',
+    otpState: 'default',
+    submitFn: () => {
+      console.log('OTP submitted');
+    },
+    resendFn: () => {
+      console.log('Resend OTP');
+    },
+    loading: false,
+    colors: {
+      error: 'var(--Error-Red-0)',
+      success: 'var(--Success-Green-0)'
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: ''
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { OtpInput },
+    setup() {
+      const state = reactive({
+        otpState: args.otpState,
+        message: args.message,
+        loading: args.loading,
+      });
+
+      const submitFn = () => {
+        state.loading = true;
+
+        const states = ['error', 'success'] as const;
+        const randomState = states[Math.floor(Math.random() * states.length)];
+
+        setTimeout(() => {
+          state.loading = false;
+
+          state.otpState = randomState;
+          state.message =
+            randomState === 'error'
+              ? 'Invalid OTP. Please try again.'
+              : randomState === 'success'
+                ? 'OTP verified successfully!'
+                : 'Please enter the OTP sent to your phone.';
+        }, 1000);
+      };
+
+      const resendFn = () => {
+        state.loading = true;
+
+        setTimeout(() => {
+          state.loading = false;
+        }, 1000);
+      };
+
+      return { args, state, submitFn, resendFn };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <OtpInput
+          :phone-number="args.phoneNumber"
+          :otp-state="state.otpState"
+          :message="state.message"
+          :loading="state.loading"
+          :submit-fn="submitFn"
+          :resend-fn="resendFn"
+          :colors="args.colors"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const Default: Story = { ...Template, args: {} };