@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Input.stories.ts

@@ -0,0 +1,351 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Input from '@components/Input/Input.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the Input component
+const meta: Meta<typeof Input> = {
+  title: 'WL/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    success: { control: 'boolean' },
+    error: { control: 'boolean' },
+    warning: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    density: {
+      control: 'select',
+      options: ['compact', 'comfortable', 'default'],
+    },
+    prependIcon: { control: 'text' },
+    appendIcon: { control: 'text' },
+    prependInnerIcon: { control: 'text' },
+    appendInnerIcon: { control: 'text' },
+    hideDetails: { control: 'boolean' },
+    hint: { control: 'text' },
+    'click:prepend': { action: 'click:prepend' },
+    'click:append': { action: 'click:append' },
+    'click:prepend-inner': { action: 'click:prepend-inner' },
+    'click:append-inner': { action: 'click:append-inner' },
+  },
+  args: {
+    disabled: false,
+    density: 'compact',
+    success: false,
+    error: false,
+    warning: false,
+    prependIcon: '',
+    appendIcon: '',
+    prependInnerIcon: '',
+    appendInnerIcon: '',
+    hideDetails: true,
+    hint: '',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Input\` component supports various styles, validation states, and icons for flexible customization.
+
+### Props
+- **\`success\`**: Displays success style if true.
+- **\`error\`**: Displays error style if true.
+- **\`warning\`**: Displays warning style if true.
+- **\`disabled\`**: Disables the input.
+- **\`density\`**: Adjusts spacing (compact, comfortable, or default).
+- **\`prependIcon\`**: Adds an icon before the input.
+- **\`appendIcon\`**: Adds an icon after the input.
+- **\`prependInnerIcon\`**: Adds an inner icon before input text.
+- **\`appendInnerIcon\`**: Adds an inner icon after input text.
+- **\`hideDetails\`**: Hides helper text and validation messages.
+- **\`hint\`**: Displays a hint below the input.
+
+### Example Usage
+Each example below showcases a unique configuration of the \`Input\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { Input },
+    setup() {
+      const prependClick = action('click:prepend');
+      const appendClick = action('click:append');
+      const prependInnerClick = action('click:prepend-inner');
+      const appendInnerClick = action('click:append-inner');
+
+      return {
+        args,
+        prependClick,
+        appendClick,
+        prependInnerClick,
+        appendInnerClick,
+      };
+    },
+    template: `<div style="padding: 16px;">
+        <Input
+          v-bind="args"
+          @click:prepend="prependClick"
+          @click:append="appendClick"
+          @click:prepend-inner="prependInnerClick"
+          @click:append-inner="appendInnerClick"
+        />
+      </div>`,
+  }),
+};
+
+export const Default: Story = { ...Template, args: {} };
+
+export const Success: Story = {
+  ...Template,
+  args: { success: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input success />`,
+      },
+    },
+  },
+};
+
+export const Error: Story = {
+  ...Template,
+  args: { error: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input error />`,
+      },
+    },
+  },
+};
+
+export const Warning: Story = {
+  ...Template,
+  args: { warning: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input warning />`,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  ...Template,
+  args: { disabled: true },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input disabled />`,
+      },
+    },
+  },
+};
+
+// Story for Input with heroicons icons
+export const WithIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:calendar',
+    appendIcon: 'heroicons:calendar',
+    prependInnerIcon: 'heroicons:calendar',
+    appendInnerIcon: 'heroicons:calendar',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input prependIcon="heroicons:calendar" appendIcon="heroicons:calendar" />`,
+      },
+    },
+  },
+};
+
+export const SuccessWithIcon: Story = {
+  ...Template,
+  args: {
+    success: true,
+    prependIcon: 'heroicons:check-circle',
+    appendIcon: 'heroicons:check-circle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input success prependIcon="heroicons:check-circle" appendIcon="heroicons:check-circle" />`,
+      },
+    },
+  },
+};
+
+export const ErrorWithIcon: Story = {
+  ...Template,
+  args: {
+    error: true,
+    prependIcon: 'heroicons:exclamation-circle',
+    appendIcon: 'heroicons:exclamation-circle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input error prependIcon="heroicons:exclamation-circle" appendIcon="heroicons:exclamation-circle" />`,
+      },
+    },
+  },
+};
+
+export const WarningWithIcon: Story = {
+  ...Template,
+  args: {
+    warning: true,
+    prependIcon: 'heroicons:exclamation-triangle',
+    appendIcon: 'heroicons:exclamation-triangle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input warning prependIcon="heroicons:exclamation-triangle" appendIcon="heroicons:exclamation-triangle" />`,
+      },
+    },
+  },
+};
+
+export const CustomPrependAppendIcons: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:sparkles',
+    appendIcon: 'heroicons:pencil',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input prependIcon="heroicons:sparkles" appendIcon="heroicons:pencil" />`,
+      },
+    },
+  },
+};
+
+export const DisabledWithIcon: Story = {
+  ...Template,
+  args: {
+    disabled: true,
+    prependIcon: 'heroicons:lock-closed',
+    appendIcon: 'heroicons:lock-closed',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input disabled prependIcon="heroicons:lock-closed" appendIcon="heroicons:lock-closed" />`,
+      },
+    },
+  },
+};
+
+export const SearchInput: Story = {
+  ...Template,
+  args: {
+    appendInnerIcon: 'heroicons:magnifying-glass',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input appendInnerIcon="heroicons:magnifying-glass" />`,
+      },
+    },
+  },
+};
+
+export const DefaultWithHint: Story = {
+  ...Template,
+  args: {
+    hint: 'This is a hint',
+    hideDetails: false,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input hint="This is a hint" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+// Story with validation rules and hint
+export const WithValidationRules: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:check',
+    appendIcon: 'heroicons:x-circle',
+    hideDetails: false,
+    hint: 'This is a detail',
+    persistentHint: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input prependIcon="heroicons:check" appendIcon="heroicons:x-circle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+export const ErrorWithErrorHint: Story = {
+  ...Template,
+  args: {
+    prependIcon: 'heroicons:check',
+    appendIcon: 'heroicons:x-circle',
+    hideDetails: false,
+    hint: 'This is a detail',
+    persistentHint: true,
+    error: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input error prependIcon="heroicons:check" appendIcon="heroicons:x-circle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+export const WarningWithIconAndHint: Story = {
+  ...Template,
+  args: {
+    warning: true,
+    prependIcon: 'heroicons:exclamation-triangle',
+    appendIcon: 'heroicons:exclamation-triangle',
+    hideDetails: false,
+    hint: 'This is a detail',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input warning prependIcon="heroicons:exclamation-triangle" appendIcon="heroicons:exclamation-triangle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};
+
+export const SuccessWithIconAndHint: Story = {
+  ...Template,
+  args: {
+    success: true,
+    prependIcon: 'heroicons:check-circle',
+    appendIcon: 'heroicons:check-circle',
+    hideDetails: false,
+    hint: 'This is a detail',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Input success prependIcon="heroicons:check-circle" appendIcon="heroicons:check-circle" hint="This is a detail" hideDetails="false" />`,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,260 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
+
+// Meta configuration for the AppointmentCard component
+const meta: Meta<typeof AppointmentCard> = {
+  title: 'WL/Laboratory/Cards/AppointmentCard',
+  component: AppointmentCard,
+  tags: ['autodocs'],
+  argTypes: {
+    date: {
+      control: 'text',
+      description: 'The date to display on the appointment card.',
+    },
+    status: {
+      control: 'select',
+      options: [
+        'Draft',
+        'Done',
+        'Ready',
+        'Took',
+        'Started',
+        'Dispatched',
+        'Proof',
+      ],
+      description: 'Status string like Draft, Done, Ready, etc.',
+    },
+    treatmentName: { control: 'text', description: 'Name of the treatment.' },
+    dentistName: { control: 'text', description: 'Name of the dentist.' },
+    buttonTextColor: {
+      control: 'text',
+      description: 'Text color of the button.',
+    },
+    buttonBackgroundColor: {
+      control: 'text',
+      description: 'Background color of the button.',
+    },
+    buttonBorderColor: {
+      control: 'text',
+      description: 'Border color of the button.',
+    },
+  },
+  args: {
+    date: '16.05.2024',
+    status: 'Draft', // Default value
+    treatmentName: '01 Kontrolle',
+    dentistName: 'Dr. Anna Smith',
+    buttonTextColor: '--Dental-Blue-0',
+    buttonBackgroundColor: 'rgba(186, 230, 234, 0.10)',
+    buttonBorderColor: '--Trkis',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`AppointmentCard\` component displays information about a dental appointment, including date, treatment name, dentist name, and status.
+
+### Props
+- **\`date\`**: The date of the appointment.
+- **\`status\`**: Represents the status of the appointment. Options include Draft, Done, Ready, etc.
+- **\`treatmentName\`**: The name of the treatment.
+- **\`dentistName\`**: The name of the dentist.
+- **\`buttonTextColor\`**, **\`buttonBackgroundColor\`**, **\`buttonBorderColor\`**: Colors for customizing the button.
+
+### Example Usage
+Below are examples of how to use the \`AppointmentCard\` component with various appointment statuses.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { AppointmentCard },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <AppointmentCard v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Define different stories using the common template
+export const DraftStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Draft',
+    treatmentName: 'Initial Consultation',
+    dentistName: 'Dr. Anna Smith',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Draft"
+    treatmentName="Initial Consultation"
+    dentistName="Dr. Anna Smith"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DoneStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Done',
+    treatmentName: 'Implantat Checkup',
+    dentistName: 'Dr. John Doe',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Done"
+    treatmentName="Implantat Checkup"
+    dentistName="Dr. John Doe"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ReadyStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Ready',
+    treatmentName: 'Kontrolluntersuchung',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Ready"
+    treatmentName="Kontrolluntersuchung"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TookStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Took',
+    treatmentName: 'Zahnreinigung',
+    dentistName: 'Dr. John Doe',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Took"
+    treatmentName="Zahnreinigung"
+    dentistName="Dr. John Doe"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const StartedStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Started',
+    treatmentName: 'Implant Procedure',
+    dentistName: 'Dr. Sarah Lee',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Started"
+    treatmentName="Implant Procedure"
+    dentistName="Dr. Sarah Lee"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DispatchedStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Dispatched',
+    treatmentName: 'Routine Checkup',
+    dentistName: 'Dr. Emily Davis',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Dispatched"
+    treatmentName="Routine Checkup"
+    dentistName="Dr. Emily Davis"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ProofStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Proof',
+    treatmentName: 'Documentation Review',
+    dentistName: 'Dr. Olivia Brown',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Proof"
+    treatmentName="Documentation Review"
+    dentistName="Dr. Olivia Brown"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};