feat!: custom date picker

traefik · Nov 6, 2024 · 3a475d4 · 3a475d4
1 parent 5d5bc8e
commit 3a475d4
Show file tree

Hide file tree

Showing 11 changed files with 1,073 additions and 482 deletions.
diff --git a/components/Alert/Alert.stories.tsx b/components/Alert/Alert.stories.tsx
@@ -6,13 +6,13 @@ import { H2 } from '../Heading';
 import { Text } from '../Text';
 import { Alert, AlertProps, AlertVariants } from './Alert';
 
-const BaseAlert = (props: AlertProps): JSX.Element => <Alert {...props} />;
-const AlertForStory = modifyVariantsForStory<AlertVariants, AlertProps>(BaseAlert);
+const AlertWrapper = (props: AlertProps): JSX.Element => <Alert {...props} />;
+
+const AlertForStory = modifyVariantsForStory<AlertVariants, AlertProps>(AlertWrapper);
 
 const Component: Meta<typeof AlertForStory> = {
   title: 'Components/Alert',
-  // @ts-expect-error
-  component: Alert,
+  component: AlertForStory,
 };
 
 export const Variants: StoryFn<typeof AlertForStory> = (args) => (

diff --git a/components/DateTimePicker/DateTimePicker.stories.tsx b/components/DateTimePicker/DateTimePicker.stories.tsx
@@ -2,52 +2,99 @@ import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
-import { Box } from '../Box';
 import { Flex } from '../Flex';
 import { Label } from '../Label';
 import { Text } from '../Text';
 import { DateTimePicker, DateTimePickerProps, DateTimePickerVariants } from './DateTimePicker';
 
-const BaseDateTimePicker = (props: DateTimePickerProps): JSX.Element => (
+const DateTimePickerWrapper = (props: DateTimePickerProps): JSX.Element => (
   <DateTimePicker {...props} />
 );
 
-const DateTimePickerForStory = modifyVariantsForStory<DateTimePickerVariants, DateTimePickerProps>(
-  BaseDateTimePicker,
-);
+const DateTimePickerForStory = modifyVariantsForStory<
+  DateTimePickerVariants,
+  DateTimePickerProps & {
+    calendarMode?: 'fluid' | 'static' | undefined;
+    maxDate?: Date;
+    minDate?: Date;
+  }
+>(DateTimePickerWrapper);
 
 const Component: Meta<typeof DateTimePickerForStory> = {
   title: 'Components/DateTimePicker',
   component: DateTimePickerForStory,
+  argTypes: {
+    calendarMode: {
+      control: 'inline-radio',
+      options: ['fluid', 'static'],
+    },
+    minDate: {
+      control: 'date',
+    },
+    showDatePresets: {
+      control: 'boolean',
+    },
+    showTimePicker: {
+      control: 'boolean',
+    },
+  },
 };
 
-const Template: StoryFn<typeof DateTimePickerForStory> = (args) => {
-  const [date, setDate] = useState(new Date());
+const DateTimePickerTemplate: StoryFn<typeof DateTimePickerForStory> = (args) => {
+  const [selectedDates, onDatesChange] = useState<Date[]>([]);
 
   return (
-    <form>
-      <Flex direction="column" gap={3}>
-        <Box>
-          <Label htmlFor="expiration-input">Expiration</Label>
-          <DateTimePickerForStory
-            {...args}
-            id="expiration-input"
-            dateFormat="MMMM d, yyyy h:mm aa"
-            onChange={(date) => setDate(date)}
-            popperPlacement="bottom-start"
-            selected={date}
-            showIcon
-          />
-        </Box>
-        <Flex direction="column" css={{ gap: '2px' }}>
-          <Label htmlFor="expiration-date">Expiration date</Label>
-          <Text id="expiration-date">{date.toISOString()}</Text>
-        </Flex>
+    <Flex direction="column" gap={3}>
+      <DateTimePickerForStory
+        {...args}
+        dates={{
+          minDate: new Date(args.minDate || Date.now()),
+        }}
+        calendar={{ mode: args.calendarMode, startDay: 1 }}
+        onDatesChange={onDatesChange}
+        selectedDates={selectedDates}
+      />
+      <Flex direction="column" css={{ gap: '2px' }}>
+        <Label htmlFor="selected-dates">Selected date:</Label>
+        <Text id="selected-dates">
+          {selectedDates.length
+            ? selectedDates.map((date) => date.toISOString()).join(', ')
+            : 'None.'}
+        </Text>
       </Flex>
-    </form>
+    </Flex>
   );
 };
 
-export const Basic: StoryFn<typeof DateTimePickerForStory> = Template.bind({});
+export const Base: StoryFn<typeof DateTimePickerForStory> = DateTimePickerTemplate.bind({});
+
+Base.args = {
+  calendarMode: 'static',
+  minDate: new Date(),
+  showDatePresets: false,
+  showTimePicker: false,
+};
+
+export const WithDatePresets: StoryFn<typeof DateTimePickerForStory> = DateTimePickerTemplate.bind(
+  {},
+);
+
+WithDatePresets.args = {
+  calendarMode: 'static',
+  minDate: new Date(),
+  showDatePresets: true,
+  showTimePicker: false,
+};
+
+export const WithTimePicker: StoryFn<typeof DateTimePickerForStory> = DateTimePickerTemplate.bind(
+  {},
+);
+
+WithTimePicker.args = {
+  calendarMode: 'static',
+  minDate: new Date(),
+  showDatePresets: false,
+  showTimePicker: true,
+};
 
 export default Component;