@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Laboratory/Chat/ChatMessageBadge.stories.ts

@@ -0,0 +1,204 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import ChatMessageBadge from '@components/Laboratory/ChatMessage/ChatMessageBadge.vue';
+
+// Meta configuration for the ChatMessageBadge component
+const meta: Meta<typeof ChatMessageBadge> = {
+  title: 'WL/Laboratory/Chat/ChatMessageBadge',
+  component: ChatMessageBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    badgeColor: {
+      control: 'color',
+      description: 'The background color of the badge.',
+    },
+    icon: {
+      control: 'text',
+      description: 'The icon displayed inside the badge, e.g., mdi-mail.',
+    },
+    iconColor: {
+      control: 'color',
+      description: 'The color of the icon displayed in the badge.',
+    },
+    fabBaseColor: {
+      control: 'color',
+      description: 'The base color of the floating action button (FAB).',
+    },
+    fabColor: {
+      control: 'color',
+      description: 'The background color of the FAB.',
+    },
+    fabIcon: { control: 'text', description: 'The icon displayed in the FAB.' },
+    fabText: {
+      control: 'text',
+      description: 'Text displayed within the FAB, e.g., initials.',
+    },
+    textColor: {
+      control: 'color',
+      description: 'The color of the text displayed in the badge.',
+    },
+  },
+  args: {
+    badgeColor: 'var(--Power-Red-0)', // Default badge color
+    icon: 'mdi-mail', // Default icon
+    iconColor: 'white', // Default icon color
+    fabBaseColor: 'white', // Default FAB base color
+    fabColor: 'var(--Dental-Blue-0)', // Default FAB color
+    fabIcon: '$vuetify', // Default FAB icon
+    fabText: 'Mj', // Default FAB text
+    textColor: 'white', // Default text color
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ChatMessageBadge\` component is used to display a badge with customizable colors, icons, and text. It provides flexibility for different styles, supporting options like background colors, icon colors, and floating action button (FAB) properties.
+
+### Props
+- **\`badgeColor\`**: Sets the background color of the badge.
+- **\`icon\`**: The icon displayed within the badge.
+- **\`iconColor\`**: Defines the color of the icon.
+- **\`fabBaseColor\`**: The base color of the floating action button (FAB).
+- **\`fabColor\`**: The background color of the FAB.
+- **\`fabIcon\`**: The icon displayed in the FAB.
+- **\`fabText\`**: Text displayed within the FAB, often used for initials or abbreviations.
+- **\`textColor\`**: Sets the color of any text displayed in the badge.
+
+### Usage
+This component is suitable for displaying notification badges in a chat application or messaging interface, allowing customization for both appearance and content.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ChatMessageBadge },
+    setup() {
+      return { args };
+    },
+    template: '<ChatMessageBadge v-bind="args" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    :badgeColor="badgeColor" 
+    :icon="icon" 
+    :iconColor="iconColor" 
+    :fabBaseColor="fabBaseColor" 
+    :fabColor="fabColor" 
+    :fabIcon="fabIcon" 
+    :fabText="fabText" 
+    :textColor="textColor" 
+  />
+</template>
+
+<script setup>
+import ChatMessageBadge from '@components/Laboratory/ChatMessage/ChatMessageBadge.vue';
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story with default values
+export const Default: Story = { ...Template };
+
+// Story with custom badge color and icon
+export const CustomBadgeIcon: Story = {
+  ...Template,
+  args: {
+    badgeColor: 'blue',
+    icon: 'mdi-bell',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    badgeColor="blue" 
+    icon="mdi-bell" 
+    iconColor="white" 
+    fabBaseColor="white" 
+    fabColor="var(--Dental-Blue-0)" 
+    fabIcon="$vuetify" 
+    fabText="Mj" 
+    textColor="white" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with a custom FAB icon and text
+export const CustomFabIconText: Story = {
+  ...Template,
+  args: {
+    fabIcon: 'mdi-home',
+    fabText: 'AB',
+    fabColor: 'green',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    badgeColor="var(--Power-Red-0)" 
+    icon="mdi-mail" 
+    iconColor="white" 
+    fabBaseColor="white" 
+    fabColor="green" 
+    fabIcon="mdi-home" 
+    fabText="AB" 
+    textColor="white" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with all custom colors
+export const AllCustomColors: Story = {
+  ...Template,
+  args: {
+    badgeColor: 'purple',
+    iconColor: 'yellow',
+    fabBaseColor: 'black',
+    fabColor: 'orange',
+    textColor: 'blue',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    badgeColor="purple" 
+    icon="mdi-mail" 
+    iconColor="yellow" 
+    fabBaseColor="black" 
+    fabColor="orange" 
+    fabIcon="$vuetify" 
+    fabText="Mj" 
+    textColor="blue" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/Laboratory/Chat/ChatNotification.stories.ts

@@ -0,0 +1,144 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import ChatNotification from '@components/Laboratory/ChatNotification/ChatNotification.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the ChatNotification component
+const meta: Meta<typeof ChatNotification> = {
+  title: 'WL/Laboratory/Chat/ChatNotification',
+  component: ChatNotification,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['cta', 'date', 'tag'],
+      description: 'The type of content displayed (CTA, date, or tag).',
+    },
+    date: {
+      control: 'text',
+      description: 'The date to display.',
+    },
+    patient: {
+      control: 'text',
+      description: 'The patient name to display in the tag scenario.',
+    },
+    status: {
+      control: 'text',
+      description: 'The status to display inside the TagLabel component.',
+    },
+    'click:start': {
+      action: 'click:start',
+      description: 'Event emitted when the Start button is clicked.',
+    },
+    'click:further': {
+      action: 'click:further',
+      description: 'Event emitted when the Weiter (Further) button is clicked.',
+    },
+    'click:cancel': {
+      action: 'click:cancel',
+      description:
+        'Event emitted when the Zurücklegen (Cancel) button is clicked.',
+    },
+    'click:finish': {
+      action: 'click:finish',
+      description:
+        'Event emitted when the Abschließen (Finish) button is clicked.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a template for the stories
+const Template: Story = {
+  render: (args) => ({
+    components: { ChatNotification },
+    setup() {
+      // Define actions for each event
+      const handleStart = action('click:start');
+      const handleFurther = action('click:further');
+      const handleCancel = action('click:cancel');
+      const handleFinish = action('click:finish');
+
+      return { args, handleStart, handleFurther, handleCancel, handleFinish };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <ChatNotification
+          v-bind="args"
+          @click:start="handleStart"
+          @click:further="handleFurther"
+          @click:cancel="handleCancel"
+          @click:finish="handleFinish"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Stories for different scenarios
+
+export const Empty: Story = {
+  ...Template,
+  args: {},
+};
+
+export const DateExample: Story = {
+  ...Template,
+  args: {
+    type: 'date',
+    date: '20. Oktober 2024',
+  },
+};
+
+export const TagExample: Story = {
+  ...Template,
+  args: {
+    type: 'tag',
+    patient: 'Rainer Zufall',
+    status: 'Dispatched',
+    date: '20. Oktober 2024',
+  },
+};
+
+export const CTAExample: Story = {
+  ...Template,
+  args: {
+    type: 'cta',
+    status: 'Draft',
+  },
+};
+
+// Define a story that displays 11 CTA components in a column layout
+export const MultipleCTAsInColumn: Story = {
+  render: (args) => ({
+    components: { ChatNotification },
+    setup() {
+      // Define actions for each event
+      const handleStart = action('click:start');
+      const handleFurther = action('click:further');
+      const handleCancel = action('click:cancel');
+      const handleFinish = action('click:finish');
+
+      return { args, handleStart, handleFurther, handleCancel, handleFinish };
+    },
+    template: `
+      <div class="d-flex flex-column" style="padding: 16px; gap: 16px;">
+        <!-- Each ChatNotification component with different statuses -->
+        <ChatNotification v-bind="args" type="cta" status="Draft" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Design Ready" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Design Started" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Design Proof" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Production Ready" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Production Started" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Shipping Dispatched" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Treatment Took" @click:start="handleStart" />
+
+        <ChatNotification v-bind="args" type="cta" status="Follow-up Case Created" @click:further="handleFurther" />
+        <ChatNotification v-bind="args" type="cta" status="Treatment Done"@click:cancel="handleCancel" @click:finish="handleFinish" />
+          <ChatNotification v-bind="args" type="cta" status="Ready for Treatment" @click:start="handleStart" />
+      </div>
+    `,
+  }),
+  args: {}, // Shared args if needed for all components
+};

package/src/stories/Laboratory/Chat/ProgressLinear.stories.ts

@@ -0,0 +1,186 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
+import SolidArrowRight from '@components/Icons/SolidArrowRight.vue';
+import Circle from '@components/Icons/Circle.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+// Meta configuration for the ProgressLinear component
+const meta: Meta<typeof ProgressLinear> = {
+  title: 'WL/Laboratory/Chat/ProgressLinear',
+  component: ProgressLinear,
+  tags: ['autodocs'],
+  argTypes: {
+    date: {
+      control: 'text',
+      description: 'Displays the estimated project duration, e.g., "1d 4h"',
+    },
+    progressValue: {
+      control: 'number',
+      description: 'The progress value as a percentage (0-100)',
+    },
+    status: {
+      control: 'text',
+      description:
+        'Status label for the progress bar (e.g., "Dispatched", "Ready")',
+    },
+  },
+  args: {
+    date: '1d 4h',
+    progressValue: 20,
+    status: 'Dispatched',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ProgressLinear\` component visually represents the progress of a project or task with a linear progress bar. It includes an estimated duration, progress value, and status label, making it useful for tracking different project stages.
+
+### Props
+- **\`date\`**: Estimated time remaining for the project or task, formatted as a string (e.g., '1d 4h').
+- **\`progressValue\`**: Numeric value representing the progress percentage, where 0 is no progress and 100 is complete.
+- **\`status\`**: Describes the current status of the task, displayed as a label next to the progress bar.
+
+### Usage
+Use this component to track project progress visually, adjusting properties like \`progressValue\` and \`status\` to reflect the current state.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ProgressLinear, SolidArrowRight, Circle, TagLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <ProgressLinear v-bind="args" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressLinear 
+    :date="date" 
+    :progressValue="progressValue" 
+    :status="status" 
+  />
+</template>
+
+<script setup>
+import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Define different stories using the common template
+export const Default: Story = { ...Template, args: {} };
+
+export const Progress50: Story = {
+  ...Template,
+  args: {
+    progressValue: 50,
+    date: '2d 5h',
+    status: 'Took',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressLinear 
+    date="2d 5h" 
+    progressValue="50" 
+    status="Took" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Progress80: Story = {
+  ...Template,
+  args: {
+    progressValue: 80,
+    date: '3d',
+    status: 'Ready',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressLinear 
+    date="3d" 
+    progressValue="80" 
+    status="Ready" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const MultipleProgressBars: Story = {
+  render: (args) => ({
+    components: { ProgressLinear, SolidArrowRight, Circle, TagLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="d-flex flex-column" style="padding: 40px; gap: 16px;">
+        <!-- Each ProgressLinear component with different progress values and statuses -->
+        <ProgressLinear progressValue="15" date="1d 4h" status="Draft" />
+        <ProgressLinear progressValue="30" date="1d 8h" status="Done" />
+        <ProgressLinear progressValue="50" date="2d 5h" status="Took" />
+        <ProgressLinear progressValue="70" date="3d" status="Dispatched" />
+        <ProgressLinear progressValue="60" date="3d" status="Ready" />
+        <ProgressLinear progressValue="80" date="3d 6h" status="Treatment Done" />
+        <ProgressLinear progressValue="20" date="3d 6h" status="Production Ready" />
+        <ProgressLinear progressValue="30" date="3d 6h" status="Production Started" />
+        <ProgressLinear progressValue="40" date="3d 6h" status="Ready for Treatment" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="d-flex flex-column" style="padding: 40px; gap: 16px;">
+    <ProgressLinear progressValue="15" date="1d 4h" status="Draft" />
+    <ProgressLinear progressValue="30" date="1d 8h" status="Done" />
+    <ProgressLinear progressValue="50" date="2d 5h" status="Took" />
+    <ProgressLinear progressValue="70" date="3d" status="Dispatched" />
+    <ProgressLinear progressValue="60" date="3d" status="Ready" />
+    <ProgressLinear progressValue="80" date="3d 6h" status="Treatment Done" />
+    <ProgressLinear progressValue="20" date="3d 6h" status="Production Ready" />
+    <ProgressLinear progressValue="30" date="3d 6h" status="Production Started" />
+    <ProgressLinear progressValue="40" date="3d 6h" status="Ready for Treatment" />
+  </div>
+</template>
+
+<script setup>
+import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
+</script>
+        `,
+      },
+    },
+  },
+  args: {},
+};

package/src/stories/Laboratory/Chat/StatusNotification.stories.ts

@@ -0,0 +1,111 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import StatusNotification from '@components/Laboratory/StatusNotification/StatusNotification.vue'; // Adjust the path accordingly
+
+const meta: Meta<typeof StatusNotification> = {
+  title: 'WL/Laboratory/Chat/StatusNotification',
+  component: StatusNotification,
+  tags: ['autodocs'],
+  argTypes: {
+    header: { control: 'text' },
+    subheader: { control: 'text' },
+    status: {
+      control: 'select',
+      options: [
+        'Draft',
+        'Proof',
+        'Ready',
+        'Design Ready',
+        'Production Ready',
+        'Ready for Treatment',
+        'Started',
+        'Dispatched',
+        'Design Started',
+        'Production Started',
+        'Shipping Dispatched',
+        'Took',
+        'Design Proof',
+        'Treatment Took',
+        'Treatment Done',
+        'Done',
+        'Follow-up Case Created',
+        'Arrived',
+        'Warning',
+      ], // Add more statuses if needed
+    },
+  },
+  args: {
+    header: 'Susanne M. hat neuen Status gesetzt',
+    subheader: 'Do. 12. Sept. 2024 – 15:44',
+    status: 'Draft',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a template for the stories
+const Template: Story = {
+  render: (args) => ({
+    components: { StatusNotification },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <StatusNotification v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+// Different variations of the component
+
+export const Default: Story = { ...Template };
+
+export const DoneStatus: Story = {
+  ...Template,
+  args: {
+    header: 'Max Mustermann hat den Status aktualisiert',
+    subheader: 'Fr. 13. Sept. 2024 – 09:30',
+    status: 'Done',
+  },
+};
+
+export const DispatchedStatus: Story = {
+  ...Template,
+  args: {
+    header: 'Anna Schmidt hat den Status geändert',
+    subheader: 'Mi. 14. Sept. 2024 – 11:20',
+    status: 'Dispatched',
+  },
+};
+
+// Define a story that displays multiple StatusNotification components in a column layout
+export const MultipleStatusNotifications: Story = {
+  render: (args) => ({
+    components: { StatusNotification },
+    setup() {
+      // Define actions for each event if needed
+      const handleStatusChange = action('status:changed');
+
+      return { args, handleStatusChange };
+    },
+    template: `
+      <div class="d-flex flex-column" style="padding: 16px; gap: 16px;">
+        <!-- Each StatusNotification component with different statuses -->
+        <StatusNotification v-bind="args" header="Susanne M. hat neuen Status gesetzt" status="Draft" subheader="Do. 12. Sept. 2024 – 15:44" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Max Mustermann hat den Status aktualisiert" status="Design Ready" subheader="Fr. 13. Sept. 2024 – 09:30" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Anna Schmidt hat den Status geändert" status="Design Started" subheader="Mi. 14. Sept. 2024 – 11:20" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="John Doe hat den Status aktualisiert" status="Production Ready" subheader="Di. 15. Sept. 2024 – 12:50" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Maria König hat den Status gesetzt" status="Production Started" subheader="Mo. 16. Sept. 2024 – 14:10" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Tom Müller hat den Status gesetzt" status="Shipping Dispatched" subheader="So. 17. Sept. 2024 – 16:00" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Lisa Schulz hat den Status gesetzt" status="Treatment Took" subheader="Sa. 18. Sept. 2024 – 17:30" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Robert Becker hat den Status gesetzt" status="Follow-up Case Created" subheader="Fr. 19. Sept. 2024 – 18:50" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Claudia Neumann hat den Status gesetzt" status="Treatment Done" subheader="Do. 20. Sept. 2024 – 20:10" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Michael Fischer hat den Status gesetzt" status="Ready for Treatment" subheader="Mi. 21. Sept. 2024 – 21:40" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Sandra Hoffmann hat den Status gesetzt" status="Done" subheader="Di. 22. Sept. 2024 – 23:15" @status:changed="handleStatusChange" />
+      </div>
+    `,
+  }),
+  args: {}, // Shared args if needed for all components
+};

package/src/stories/Laboratory/MainColumnsBar.stories.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import MainColumnsBar from '@components/Laboratory/MainColumnsBar/MainColumnsBar.vue'; // Adjust the import to match your component location
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the MainColumnsBar component
+const meta: Meta<typeof MainColumnsBar> = {
+  title: 'WL/Laboratory/MainColumnsBar',
+  component: MainColumnsBar,
+  tags: ['autodocs'],
+  argTypes: {
+    'click:draft': { action: 'click:draft' }, // Track the 'click:draft' event
+    'click:design': { action: 'click:design' }, // Track the 'click:design' event
+    'click:production': { action: 'click:production' }, // Track the 'click:production' event
+    'click:shipping': { action: 'click:shipping' }, // Track the 'click:shipping' event
+    'click:treatment': { action: 'click:treatment' }, // Track the 'click:treatment' event
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common render template for the component
+const Template: Story = {
+  render: (args) => ({
+    components: { MainColumnsBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MainColumnsBar 
+        @click:draft="args['click:draft']"
+        @click:design="args['click:design']"
+        @click:production="args['click:production']"
+        @click:shipping="args['click:shipping']"
+        @click:treatment="args['click:treatment']"
+      />
+    `,
+  }),
+};
+
+// Default story
+export const Default: Story = { ...Template };
+
+// Custom story showing action log when buttons are clicked
+export const WithEventActions: Story = {
+  ...Template,
+  args: {},
+};