@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Laboratory/Cards/TicketCard/TicketCard.stories.ts

@@ -0,0 +1,335 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import TicketCard from '@components/Laboratory/TicketCard/TicketCard.vue';
+
+// Meta configuration for the TicketCard component
+const meta: Meta<typeof TicketCard> = {
+  title: 'WL/Laboratory/Cards/TicketCard',
+  component: TicketCard,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: [
+        'Draft',
+        'Done',
+        'Ready',
+        'Took',
+        'Started',
+        'Dispatched',
+        'Proof',
+      ],
+      description: 'The status displayed by the TagLabel component.',
+    },
+    number: {
+      control: 'number',
+      description: 'The number displayed in the notification bubble.',
+    },
+    tagNumber: { control: 'text', description: 'The tag number displayed.' },
+    name: { control: 'text', description: 'The name to display.' },
+    description: {
+      control: 'text',
+      description: 'The description to display.',
+    },
+    taskNumber: {
+      control: 'text',
+      description:
+        'If provided, displays a button with the task number as the label.',
+    },
+  },
+  args: {
+    status: 'Done',
+    tagNumber: '12345',
+    name: 'Zufall, Rainer',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TicketCard\` component displays information about a ticket in the laboratory context, including the status, ticket number, name, and description.
+
+### Props
+- **\`status\`**: Status label displayed by the TagLabel component, such as Draft, Done, Ready, etc.
+- **\`number\`**: Numeric value displayed in the notification bubble.
+- **\`tagNumber\`**: A unique identifier or tag number for the ticket.
+- **\`name\`**: Name associated with the ticket.
+- **\`description\`**: Additional details describing the ticket.
+- **\`taskNumber\`**: Optional task number. If specified, shows a button with this label.
+
+### Example Usage
+Below are examples of how to use the \`TicketCard\` component with various ticket statuses.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { TicketCard },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <TicketCard v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Define different stories using the common template
+export const Default: Story = {
+  ...Template,
+  args: {
+    status: 'Done',
+    tagNumber: '12345',
+    name: 'Zufall, Rainer',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Done"
+    tagNumber="12345"
+    name="Zufall, Rainer"
+    description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DispatchedStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Dispatched',
+    number: 10,
+    tagNumber: '54321',
+    name: 'Doe, John',
+    description: 'This is a dispatched ticket description.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Dispatched"
+    number="10"
+    tagNumber="54321"
+    name="Doe, John"
+    description="This is a dispatched ticket description."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ReadyStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Ready',
+    number: 5,
+    tagNumber: '67890',
+    name: 'Smith, Jane',
+    description: 'This ticket is ready for review.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Ready"
+    number="5"
+    tagNumber="67890"
+    name="Smith, Jane"
+    description="This ticket is ready for review."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ProofStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Proof',
+    tagNumber: '77777',
+    name: 'Dr. Olivia Brown',
+    description: 'Review the documentation for accuracy.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Proof"
+    tagNumber="77777"
+    name="Dr. Olivia Brown"
+    description="Review the documentation for accuracy."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story demonstrating the use of `taskNumber` prop
+export const TaskNumberButton: Story = {
+  ...Template,
+  args: {
+    status: 'Started',
+    tagNumber: '99999',
+    name: 'Johnson, Emily',
+    description: 'Processing is underway.',
+    taskNumber: 'TASK-00123',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Started"
+    tagNumber="99999"
+    name="Johnson, Emily"
+    description="Processing is underway."
+    taskNumber="TASK-00123"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Example: Multiple Ticket Cards in a List with v-item-group
+export const TicketCardList: Story = {
+  render: (args) => ({
+    components: { TicketCard },
+    setup() {
+      const tickets = [
+        {
+          id: 1,
+          status: 'Done',
+          number: 11,
+          tagNumber: '11001',
+          name: 'Rainer Zufall',
+          description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+        },
+        {
+          id: 2,
+          status: 'Ready',
+          number: 12,
+          tagNumber: '11002',
+          name: 'John Doe',
+          description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+        },
+        {
+          id: 3,
+          status: 'Dispatched',
+          number: 9,
+          tagNumber: '11003',
+          name: 'Jane Doe',
+          description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+        },
+      ];
+      return { args, tickets };
+    },
+    template: `
+      <v-item-group class="d-flex flex-column w-100 pa-2 ga-2">
+        <v-item
+          v-for="(ticket, index) in tickets"
+          :key="ticket.id"
+          v-slot="{ isSelected, toggle }"
+        >
+          <TicketCard
+            :status="ticket.status"
+            :number="ticket.number"
+            :tagNumber="ticket.tagNumber"
+            :name="ticket.name"
+            :description="ticket.description"
+            :isSelected="isSelected"
+            :toggle="toggle"
+          />
+        </v-item>
+      </v-item-group>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<script setup>
+import TicketCard from '@components/Laboratory/TicketCard/TicketCard.vue';
+
+const tickets = [
+  {
+    id: 1,
+    status: 'Done',
+    number: 11,
+    tagNumber: '11001',
+    name: 'Rainer Zufall',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  {
+    id: 2,
+    status: 'Ready',
+    number: 12,
+    tagNumber: '11002',
+    name: 'John Doe',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  {
+    id: 3,
+    status: 'Dispatched',
+    number: 9,
+    tagNumber: '11003',
+    name: 'Jane Doe',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+];
+</script>
+
+<template>
+  <v-item-group class="d-flex flex-column w-100 pa-2 ga-2">
+    <v-item
+      v-for="ticket in tickets"
+      :key="ticket.id"
+      v-slot="{ isSelected, toggle }"
+    >
+      <TicketCard
+        :status="ticket.status"
+        :number="ticket.number"
+        :tagNumber="ticket.tagNumber"
+        :name="ticket.name"
+        :description="ticket.description"
+        :isSelected="isSelected"
+        :toggle="toggle"
+      />
+    </v-item>
+  </v-item-group>
+</template>
+        `,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import ChatBoxImage from '@components/Laboratory/ChatBoxImage/ChatBoxImage.vue'; // Ensure the path is correct
+import { action } from '@storybook/addon-actions'; // Import the addon for actions
+
+export default {
+  title: 'WL/Laboratory/Chat/ChatBoxImage',
+  component: ChatBoxImage,
+  tags: ['autodocs'],
+  argTypes: {
+    paragraphText: {
+      control: 'text',
+      description: 'Text content displayed in the card',
+    },
+    imageSources: {
+      control: 'object',
+      description: 'Array of image URLs to display',
+    },
+  },
+  args: {
+    paragraphText:
+      'This is the default paragraph for the ChatBoxImage component.',
+    imageSources: ['https://cdn.vuetifyjs.com/images/parallax/material.jpg'],
+  },
+} as Meta<typeof ChatBoxImage>;
+
+type Story = StoryObj<typeof ChatBoxImage>;
+
+// Default story with centered ChatBoxImage and max width
+export const With1Image: Story = {
+  render: (args) => ({
+    components: { ChatBoxImage },
+    setup() {
+      // Log the events in the Storybook action panel
+      const handleApproved = action('click:approved');
+      const handleNotApproved = action('click:not-approved');
+
+      return { args, handleApproved, handleNotApproved };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <div style="max-width: 400px; width: 100%;">
+          <ChatBoxImage 
+            v-bind="args" 
+            @click:approved="handleApproved"
+            @click:not-approved="handleNotApproved"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithCustomImages: Story = {
+  render: (args) => ({
+    components: { ChatBoxImage },
+    setup() {
+      // Log the events in the Storybook action panel
+      const handleApproved = action('click:approved');
+      const handleNotApproved = action('click:not-approved');
+
+      return { args, handleApproved, handleNotApproved };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <div style="max-width: 400px; width: 100%;">
+          <ChatBoxImage 
+            v-bind="args" 
+            @click:approved="handleApproved"
+            @click:not-approved="handleNotApproved"
+          />
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    imageSources: [
+      'https://cdn.vuetifyjs.com/images/cards/cooking.png',
+      'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',
+    ],
+    paragraphText: 'This is a custom set of images.',
+  },
+};

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

@@ -0,0 +1,198 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import ChatMessage from '@components/Laboratory/ChatMessage/ChatMessage.vue';
+
+// Meta configuration for the ChatMessage component
+const meta: Meta<typeof ChatMessage> = {
+  title: 'WL/Laboratory/chat/ChatMessage',
+  component: ChatMessage,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['income', 'outcome'],
+      description: 'Defines the type of message, either incoming or outgoing.',
+    },
+    username: {
+      control: 'text',
+      description: 'The name of the user sending the message.',
+    },
+    time: {
+      control: 'text',
+      description: 'The timestamp for when the message was sent.',
+    },
+    message: {
+      control: 'text',
+      description: 'The content of the chat message.',
+    },
+  },
+  args: {
+    type: 'income',
+    username: 'Martin Paetz',
+    time: '11:24',
+    message: 'This is a default message.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ChatMessage\` component displays a message in a chat interface, complete with a username, timestamp, and message content. This component supports both incoming and outgoing message types, which change the styling accordingly.
+
+### Props
+- **\`type\`**: Specifies the message type, either 'income' (incoming message) or 'outcome' (outgoing message).
+- **\`username\`**: Displays the name of the user who sent the message.
+- **\`time\`**: Shows the time when the message was sent.
+- **\`message\`**: The main content or text of the message.
+
+### Usage
+This component can be used to represent chat messages in a conversation, with different styling options for incoming and outgoing messages.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ChatMessage },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div style="padding: 16px; margin: 16px;"><ChatMessage v-bind="args" /></div>',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="padding: 16px; margin: 16px;">
+    <ChatMessage 
+      :type="type" 
+      :username="username" 
+      :time="time" 
+      :message="message" 
+    />
+  </div>
+</template>
+
+<script setup>
+import ChatMessage from '@components/Laboratory/ChatMessage/ChatMessage.vue';
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story for an Income Message
+export const IncomeMessage: Story = {
+  ...Template,
+  args: {
+    type: 'income',
+    username: 'Martin Paetz',
+    message: 'This is an income message.',
+    time: '10:45',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessage 
+    type="income" 
+    username="Martin Paetz" 
+    message="This is an income message." 
+    time="10:45" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story for an Outcome Message
+export const OutcomeMessage: Story = {
+  ...Template,
+  args: {
+    type: 'outcome',
+    username: 'John Doe',
+    message: 'This is an outcome message.',
+    time: '11:45',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessage 
+    type="outcome" 
+    username="John Doe" 
+    message="This is an outcome message." 
+    time="11:45" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story for a Custom Username
+export const CustomUsernameMessage: Story = {
+  ...Template,
+  args: {
+    type: 'income',
+    username: 'Jane Smith',
+    message: 'Hello from Jane!',
+    time: '12:30',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessage 
+    type="income" 
+    username="Jane Smith" 
+    message="Hello from Jane!" 
+    time="12:30" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story for a Long Message
+export const LongMessage: Story = {
+  ...Template,
+  args: {
+    type: 'outcome',
+    username: 'Anna Johnson',
+    message:
+      'This is a very long message that demonstrates how a longer message will be displayed in the message box. This can help visualize text wrapping and overall layout of the message component.',
+    time: '14:05',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessage 
+    type="outcome" 
+    username="Anna Johnson" 
+    message="This is a very long message that demonstrates how a longer message will be displayed in the message box. This can help visualize text wrapping and overall layout of the message component." 
+    time="14:05" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};