docs(storybook): update all Date range stories and fix the Stories so…

…urce code
persian-tools · Aug 9, 2021 · 1a41204 · 1a41204
1 parent 1539664
commit 1a41204
Show file tree

Hide file tree

Showing 8 changed files with 591 additions and 186 deletions.
diff --git a/src/stories/Date Range/max-date.stories.tsx b/src/stories/Date Range/max-date.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { createBaseStory, BaseTemplate, baseArgs } from './../base';
+import { newDate, format, Picker, WheelPickerSelectEvent } from '../../index'; // in your code: @persian-tools/persian-mobile-datepicker
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// Types
+import type { ComponentStory } from '@storybook/react';
+import type { Event } from '../../components/WheelPicker/index.types';
+
+const title = 'Date Range/Max Date';
+
+export default createBaseStory(title);
+
+const config = {
+  year: {
+    caption: {
+      text: 'سال',
+    },
+  },
+  month: {
+    caption: {
+      text: 'ماه',
+    },
+  },
+  day: {
+    caption: {
+      text: 'روز',
+    },
+  },
+};
+
+const BasePickerTemplate: ComponentStory<typeof Picker & { info: string }> = (
+  args,
+) => {
+  const { info, ...pickerArgs } = args;
+  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
+  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
+    Array<Event>
+  >([]);
+
+  function handleEvent(eventType: string) {
+    return (data: WheelPickerSelectEvent) => {
+      setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
+      setSelectedDateEvents(data.events);
+      action(eventType)(data);
+    };
+  }
+
+  return (
+    <BaseTemplate
+      value={selectedDateValue!}
+      events={selectedDateEvents!}
+      info={info}
+    >
+      <Picker
+        {...pickerArgs}
+        onChange={handleEvent('onChange')}
+        onSubmit={handleEvent('onSubmit')}
+      />
+    </BaseTemplate>
+  );
+};
+
+storiesOf(title, module).add(
+  'Max Date',
+  (args: any) => <BasePickerTemplate {...args} />,
+  {
+    component: Picker,
+    args: {
+      isOpen: true,
+      theme: 'auto',
+      title: 'انتخاب تاریخ از ۲۰ خرداد ۱۳۹۶',
+      highlightHolidays: true,
+      highlightWeekends: true,
+      config,
+      initialValue: newDate({ year: 1396, month: 3, day: 20 }),
+      maxDate: newDate({ year: 1396, month: 3, day: 20 }),
+    },
+    argTypes: baseArgs,
+    badges: [BADGE.STABLE],
+  },
+);
diff --git a/src/stories/Date Range/max-year.stories.tsx b/src/stories/Date Range/max-year.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { createBaseStory, BaseTemplate, baseArgs } from './../base';
+import { newDate, format, Picker, WheelPickerSelectEvent } from '../../index'; // in your code: @persian-tools/persian-mobile-datepicker
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// Types
+import type { ComponentStory } from '@storybook/react';
+import type { Event } from '../../components/WheelPicker/index.types';
+
+const title = 'Date Range/Max Year';
+
+export default createBaseStory(title);
+
+const config = {
+  year: {
+    caption: {
+      text: 'سال',
+    },
+  },
+  month: {
+    caption: {
+      text: 'ماه',
+    },
+  },
+  day: {
+    caption: {
+      text: 'روز',
+    },
+  },
+};
+
+const BasePickerTemplate: ComponentStory<typeof Picker & { info: string }> = (
+  args,
+) => {
+  const { info, ...pickerArgs } = args;
+  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
+  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
+    Array<Event>
+  >([]);
+
+  function handleEvent(eventType: string) {
+    return (data: WheelPickerSelectEvent) => {
+      setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
+      setSelectedDateEvents(data.events);
+      action(eventType)(data);
+    };
+  }
+
+  return (
+    <BaseTemplate
+      value={selectedDateValue!}
+      events={selectedDateEvents!}
+      info={info}
+    >
+      <Picker
+        {...pickerArgs}
+        onChange={handleEvent('onChange')}
+        onSubmit={handleEvent('onSubmit')}
+      />
+    </BaseTemplate>
+  );
+};
+
+storiesOf(title, module).add(
+  'Max Year',
+  (args: any) => <BasePickerTemplate {...args} />,
+  {
+    component: Picker,
+    args: {
+      isOpen: true,
+      theme: 'auto',
+      title: 'انتخاب تاریخ از ۲۰ خرداد ۱۳۹۶ تا پایان سال ۱۳۹۸',
+      highlightHolidays: true,
+      highlightWeekends: true,
+      config,
+      initialValue: newDate({ year: 1396, month: 3, day: 20 }),
+      endYear: 1398,
+    },
+    argTypes: baseArgs,
+    badges: [BADGE.STABLE],
+  },
+);
diff --git a/src/stories/Date Range/min-date.stories.tsx b/src/stories/Date Range/min-date.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { createBaseStory, BaseTemplate, baseArgs } from './../base';
+import { newDate, format, Picker, WheelPickerSelectEvent } from '../../index'; // in your code: @persian-tools/persian-mobile-datepicker
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// Types
+import type { ComponentStory } from '@storybook/react';
+import type { Event } from '../../components/WheelPicker/index.types';
+
+const title = 'Date Range/Min Date';
+
+export default createBaseStory(title);
+
+const config = {
+  year: {
+    caption: {
+      text: 'سال',
+    },
+  },
+  month: {
+    caption: {
+      text: 'ماه',
+    },
+  },
+  day: {
+    caption: {
+      text: 'روز',
+    },
+  },
+};
+
+const BasePickerTemplate: ComponentStory<typeof Picker & { info: string }> = (
+  args,
+) => {
+  const { info, ...pickerArgs } = args;
+  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
+  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
+    Array<Event>
+  >([]);
+
+  function handleEvent(eventType: string) {
+    return (data: WheelPickerSelectEvent) => {
+      setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
+      setSelectedDateEvents(data.events);
+      action(eventType)(data);
+    };
+  }
+
+  return (
+    <BaseTemplate
+      value={selectedDateValue!}
+      events={selectedDateEvents!}
+      info={info}
+    >
+      <Picker
+        {...pickerArgs}
+        onChange={handleEvent('onChange')}
+        onSubmit={handleEvent('onSubmit')}
+      />
+    </BaseTemplate>
+  );
+};
+
+storiesOf(title, module).add(
+  'Min Date',
+  (args: any) => <BasePickerTemplate {...args} />,
+  {
+    component: Picker,
+    args: {
+      isOpen: true,
+      theme: 'auto',
+      title: 'انتخاب تاریخ از خرداد ماه به بعد',
+      highlightHolidays: true,
+      highlightWeekends: true,
+      config,
+      initialValue: newDate({ year: 1396, month: 3, day: 1 }),
+      minDate: newDate({ year: 1396, month: 3, day: 1 }),
+    },
+    argTypes: baseArgs,
+    badges: [BADGE.STABLE],
+  },
+);
diff --git a/src/stories/Date Range/min-max-date.stories.tsx b/src/stories/Date Range/min-max-date.stories.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { createBaseStory, BaseTemplate, baseArgs } from './../base';
+import { newDate, format, Picker, WheelPickerSelectEvent } from '../../index'; // in your code: @persian-tools/persian-mobile-datepicker
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// Types
+import type { ComponentStory } from '@storybook/react';
+import type { Event } from '../../components/WheelPicker/index.types';
+
+const title = 'Date Range/Min and Max Date';
+
+export default createBaseStory(title);
+
+const config = {
+  year: {
+    caption: {
+      text: 'سال',
+    },
+  },
+  month: {
+    caption: {
+      text: 'ماه',
+    },
+  },
+  day: {
+    caption: {
+      text: 'روز',
+    },
+  },
+};
+
+const BasePickerTemplate: ComponentStory<typeof Picker & { info: string }> = (
+  args,
+) => {
+  const { info, ...pickerArgs } = args;
+  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
+  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
+    Array<Event>
+  >([]);
+
+  function handleEvent(eventType: string) {
+    return (data: WheelPickerSelectEvent) => {
+      setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
+      setSelectedDateEvents(data.events);
+      action(eventType)(data);
+    };
+  }
+
+  return (
+    <BaseTemplate
+      value={selectedDateValue!}
+      events={selectedDateEvents!}
+      info={info}
+    >
+      <Picker
+        {...pickerArgs}
+        onChange={handleEvent('onChange')}
+        onSubmit={handleEvent('onSubmit')}
+      />
+    </BaseTemplate>
+  );
+};
+
+storiesOf(title, module).add(
+  'Min and Max Date',
+  (args: any) => <BasePickerTemplate {...args} />,
+  {
+    component: Picker,
+    args: {
+      isOpen: true,
+      theme: 'auto',
+      title: 'انتخاب تاریخ در بازه فروردین تا مرداد',
+      highlightHolidays: true,
+      highlightWeekends: true,
+      config,
+      initialValue: newDate({ year: 1400, month: 1, day: 20 }),
+      minDate: newDate({ year: 1400, month: 1, day: 20 }),
+      maxDate: newDate({ year: 1400, month: 5, day: 31 }),
+    },
+    argTypes: baseArgs,
+    badges: [BADGE.STABLE],
+  },
+);