@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.17

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

@@ -1,82 +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.',
-  },
-};
+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

@@ -1,198 +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>
-        `,
-      },
-    },
-  },
-};
+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>
+        `,
+      },
+    },
+  },
+};