@dropi/ui-components 1.0.0

package/src/components-source/date-picker/date-picker.component.stories.ts

@@ -0,0 +1,444 @@
+/**
+ * @fileoverview DatePicker component stories for Storybook
+ * @description Calendar-based date selection component with configurable options
+ */
+import type { Meta, StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { DatePickerComponent } from './date-picker.component';
+
+const meta: Meta<DatePickerComponent> = {
+  title: 'UI Dropi/Single Date Picker',
+  component: DatePickerComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# DatePickerComponent
+
+A calendar component for selecting dates with multiple configuration options.
+
+## Key Features
+- ✅ Support for minimum and maximum dates
+- ✅ Customizable floating label
+- ✅ Configurable placeholder text
+- ✅ Loading and invalid states
+- ✅ Selection and panel close events
+- ✅ Calendar alignment (left/right)
+- ✅ Optional calendar icon
+- ✅ Required field validation
+
+## Available Events
+- **onChangeDate**: Fired when a new date is selected
+- **onClosePanel**: Emitted when the calendar popup panel is closed
+        `,
+      },
+    },
+  },
+  argTypes: {
+    minDate: {
+      description: 'Sets the minimum selectable date. Useful for restricting past or future dates.',
+      control: 'date',
+      table: {
+        type: { summary: 'Date' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    maxDate: {
+      description: 'Sets the maximum selectable date. Useful for restricting future or past dates.',
+      control: 'date',
+      table: {
+        type: { summary: 'Date' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    loading: {
+      description:
+        'Indicates if the component is in loading state. Displays a visual loading indicator.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    setRight: {
+      description: 'Sets the calendar popup alignment. False = left, True = right.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    label: {
+      description: 'Sets a floating label above the date component. Improves user experience.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    placeholder: {
+      description: 'Text displayed in the input when no date is selected.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"DD/MM/YYYY"' },
+      },
+    },
+    showIcon: {
+      description:
+        'Determines whether to show the calendar icon next to the input for better usability.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    required: {
+      description: 'Indicates if the field is mandatory. Affects form validation.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isInvalid: {
+      description: 'Indicates if the component should display a visual error state.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    selectedDate: {
+      description:
+        'Defines the pre-selected date when the component already has an established date.',
+      control: 'date',
+      table: {
+        type: { summary: 'Date' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onChangeDate: {
+      description: 'Event fired when a new date is selected.',
+      action: 'onChangeDate',
+      table: {
+        type: { summary: 'EventEmitter<Date>' },
+      },
+    },
+    onClosePanel: {
+      description: 'Event emitted when the calendar popup panel is closed.',
+      action: 'onClosePanel',
+      table: {
+        type: { summary: 'EventEmitter<AnimationEvent>' },
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<DatePickerComponent>;
+
+/**
+ * Default DatePicker story.
+ * Shows the basic state without additional configurations.
+ */
+export const Default: Story = {
+  args: {
+    placeholder: 'DD/MM/YYYY',
+    required: false,
+    isInvalid: false,
+    loading: false,
+    showIcon: false,
+    setRight: false,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic DatePicker configuration without additional properties.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker in loading state.
+ * Useful when loading data or validating information.
+ */
+export const Loading: Story = {
+  args: {
+    loading: true,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the component in loading state with visual indicator.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with minimum date set.
+ * Restricts selection to dates after the minimum date.
+ */
+export const WithMinDate: Story = {
+  args: {
+    minDate: new Date(),
+    label: 'Start Date',
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component with minimum date set (today). Dates before this cannot be selected.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with maximum date set.
+ * Restricts selection to dates before the maximum date.
+ */
+export const WithMaxDate: Story = {
+  args: {
+    maxDate: new Date(new Date().setMonth(new Date().getMonth() + 1)),
+    label: 'End Date',
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component with maximum date set (next month). Dates after this cannot be selected.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with valid date range.
+ * Combines minimum and maximum dates to create a specific range.
+ */
+export const WithDateRange: Story = {
+  args: {
+    minDate: new Date(),
+    maxDate: new Date(new Date().setMonth(new Date().getMonth() + 2)),
+    label: 'Date in specific range',
+    placeholder: 'Select date within range',
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component with valid date range (from today to 2 months ahead).',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with right-aligned calendar.
+ * Useful when the component is near the right edge of the screen.
+ */
+export const RightAligned: Story = {
+  args: {
+    setRight: true,
+    label: 'Right-aligned calendar',
+    showIcon: true,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The calendar popup opens to the right of the input.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with custom label.
+ * Improves accessibility and user experience.
+ */
+export const WithLabel: Story = {
+  args: {
+    label: 'Birth Date',
+    placeholder: 'Select your birth date',
+    required: true,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component with custom floating label and marked as required.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with custom placeholder.
+ * Provides specific instructions to the user.
+ */
+export const WithCustomPlaceholder: Story = {
+  args: {
+    placeholder: 'Select a delivery date',
+    label: 'Delivery Date',
+    showIcon: true,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component with custom placeholder text and calendar icon.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with visible calendar icon.
+ * Improves usability by providing a clear visual indication.
+ */
+export const WithIcon: Story = {
+  args: {
+    showIcon: true,
+    label: 'Date with icon',
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component showing a calendar icon for improved usability.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker marked as required field.
+ * Important for form validation.
+ */
+export const Required: Story = {
+  args: {
+    required: true,
+    label: 'Required Date *',
+    placeholder: 'This field is mandatory',
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component marked as mandatory field for form validation.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker in error state.
+ * Shows visual feedback when validation errors occur.
+ */
+export const Invalid: Story = {
+  args: {
+    isInvalid: true,
+    label: 'Date with error',
+    placeholder: 'Invalid date',
+    required: true,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component in error state, showing visual feedback for failed validation.',
+      },
+    },
+  },
+};
+
+/**
+ * DatePicker with pre-selected date.
+ * Useful when a default value already exists.
+ */
+export const WithPreselectedDate: Story = {
+  args: {
+    selectedDate: new Date(),
+    label: 'Pre-selected date',
+    showIcon: true,
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Component with an already pre-selected date (current date).',
+      },
+    },
+  },
+};
+
+/**
+ * Full DatePicker configuration.
+ * Shows all features enabled simultaneously.
+ */
+export const FullFeatured: Story = {
+  args: {
+    label: 'Complete date selector',
+    placeholder: 'Select a valid date',
+    minDate: new Date(),
+    maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
+    showIcon: true,
+    required: true,
+    selectedDate: new Date(new Date().setDate(new Date().getDate() + 7)),
+    onChangeDate: action('onChangeDate'),
+    onClosePanel: action('onClosePanel'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete example showing all component features: label, date range, icon, pre-selected date, and required state.',
+      },
+    },
+  },
+};
+
+/**
+ * Booking form example.
+ * Real use case for reservations with minimum date.
+ */
+export const BookingForm: Story = {
+  args: {
+    label: 'Booking Date',
+    placeholder: 'Select booking date',
+    minDate: new Date(),
+    maxDate: new Date(new Date().setMonth(new Date().getMonth() + 6)),
+    showIcon: true,
+    required: true,
+    setRight: false,
+    onChangeDate: action('Booking date selected'),
+    onClosePanel: action('Calendar panel closed'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Practical example for a booking form where only future dates within the next 6 months can be selected.',
+      },
+    },
+  },
+};