Skip to content

Commit 64e8bb9

Browse files
author
Nikolai Lopin
committed
docs: moves datepicker stories to the datepicker folder
1 parent ec9c6a2 commit 64e8bb9

13 files changed

+351
-336
lines changed

‎src/components/Datepicker/DatepickerRangeInput.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,12 +126,12 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
126126
maxDate?: Date;
127127
/**
128128
* Accepts a number for first day of the week from 0 (Sunday) to 6 (Saturday).
129-
* Default: 1
129+
* @default 1
130130
*/
131131
firstDayOfWeek?: FirstDayOfWeek;
132132
/**
133133
* Function that runs for each date and returns boolean whether date is disabled or not.
134-
* Default: () => false
134+
* @default () => false
135135
*/
136136
isDateBlocked?: (date: Date) => boolean;
137137
/**
@@ -140,13 +140,13 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
140140
*/
141141
placement?: 'left' | 'right' | 'center';
142142
/**
143-
* String to format dates.
144-
* Default: dd/MM/yyyy
143+
* String to format dates. See the format at [date-fns docs](https://date-fns.org/v2.29.3/docs/format)
144+
* @default dd/MM/yyyy
145145
*/
146146
displayFormat?: string;
147147
/**
148148
* String to define the locale in ISO-639-1
149-
* Default: en-US
149+
* @default en-US
150150
*/
151151
locale?: string;
152152
/**
@@ -163,7 +163,7 @@ interface DatepickerRangeInputProps extends MarginProps, WidthProps {
163163
*/
164164
endInputId?: string;
165165
/**
166-
* Determines the variant
166+
* Show two (`'normal'`) or one (`'compact'`) month in the datepicker
167167
* @value `'compact'` displays only a single month
168168
* @default 'normal'
169169
*/

‎src/components/Datepicker/DatepickerSingleInput.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,22 @@ interface DatepickerSingleInputProps extends MarginProps, WidthProps {
4040
maxDate?: Date;
4141
/**
4242
* Accepts a number for first day of the week from 0 (Sunday) to 6 (Saturday).
43-
* Default: 1
43+
* @default 1
4444
*/
4545
firstDayOfWeek?: FirstDayOfWeek;
4646
/**
4747
* Function that runs for each date and returns boolean whether date is disabled or not.
48-
* Default: () => false
48+
* @default () => false
4949
*/
5050
isDateBlocked?: (date: Date) => boolean;
5151
/**
52-
* String to format dates.
53-
* Default: dd/MM/yyyy
52+
* String to format dates. See the format at [date-fns docs](https://date-fns.org/v2.29.3/docs/format)
53+
* @default dd/MM/yyyy
5454
*/
5555
displayFormat?: string;
5656
/**
5757
* String to define the locale in ISO-639-1
58-
* Default: en-US
58+
* @default en-US
5959
*/
6060
locale?: string;
6161
/**

‎src/components/Datepicker/docs/ControlledDatepickerRangeInput.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/Datepicker/docs/ControlledDatepickerSingleInput.tsx

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/components/Datepicker/docs/DatePicker.stories.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { useState } from 'react';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import { DatePicker } from '../index';
4+
5+
const meta: Meta<typeof DatePicker> = {
6+
title: 'Form Elements/Date/DatePicker',
7+
component: DatePicker,
8+
argTypes: {
9+
firstDayOfWeek: {
10+
type: 'number',
11+
defaultValue: 1,
12+
control: {
13+
type: 'number',
14+
min: 1,
15+
max: 6
16+
}
17+
},
18+
displayFormat: {
19+
control: 'radio',
20+
options: ['dd/MM/yyyy', 'E, d MMM, y', 'do LLLL']
21+
}
22+
},
23+
args: {
24+
label: 'Date'
25+
}
26+
};
27+
28+
export default meta;
29+
30+
type Story = StoryObj<typeof DatePicker>;
31+
32+
export const Default: Story = {
33+
args: {},
34+
render: ({ minDate, maxDate, onChange, ...args }) => {
35+
const [value, setValue] = useState<Date>();
36+
37+
return (
38+
<DatePicker
39+
{...args}
40+
value={value}
41+
minDate={minDate && new Date(minDate)}
42+
maxDate={maxDate && new Date(maxDate)}
43+
onChange={val => {
44+
onChange?.(val);
45+
setValue(val);
46+
}}
47+
/>
48+
);
49+
}
50+
};
51+
52+
const TODAY = new Date();
53+
const minDate = new Date();
54+
minDate.setMonth(TODAY.getMonth() - 1);
55+
const maxDate = new Date();
56+
maxDate.setMonth(TODAY.getMonth() + 1);
57+
58+
export const WithRestrictedDays: Story = {
59+
...Default,
60+
args: {
61+
minDate,
62+
maxDate
63+
}
64+
};
65+
66+
export const WithDayAvailabilityFunction: Story = {
67+
...Default,
68+
args: {
69+
isDateBlocked: date => date.getDate() % 2 === 0
70+
}
71+
};
72+
73+
export const WithErrorHandler: Story = {
74+
...Default,
75+
args: {
76+
errorHandler: 'The expected format is dd/MM/yyyy'
77+
}
78+
};
79+
80+
export const Disabled: Story = {
81+
...Default,
82+
args: {
83+
disabled: true
84+
}
85+
};

‎src/components/Datepicker/docs/DatePicker.storybook.mdx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Meta, ArgTypes, Primary, Story, Stories, Unstyled } from '@storybook/blocks';
2+
3+
import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
4+
import { DatepickerOnModal } from './DatepickerOnModal';
5+
import * as DatePickerStories from './DatePicker.stories';
6+
7+
<Meta of={DatePickerStories} />
8+
9+
# Datepicker
10+
11+
<Primary />
12+
13+
### Properties
14+
15+
<ArgTypes of={DatePickerStories.Default} />
16+
17+
<StyledSystemLinks component="DatePicker" supportedProps={['margin', 'width']} />
18+
19+
## Usage
20+
21+
### Restricted dates range
22+
23+
There are two ways to restrict selectable dates.
24+
25+
If you need to allow dates no later than some date or only after a certain date, use `minDate` and `maxDate`
26+
properties. They accept plain JavaScript `Date`.
27+
28+
For example, the datepicker allow to select dates one month away from the current date:
29+
30+
<Story of={DatePickerStories.WithRestrictedDays} />
31+
32+
If the restriction is more complex, provide a restriction function to the `isDateBlocked` property.
33+
The function will be called for each date at render, passing the `Date` object to it.
34+
35+
For example, a function which disables every even day in the calendar `(date:Date) => date.getDate() % 2 === 0`:
36+
37+
<Story of={DatePickerStories.WithDayAvailabilityFunction} />
38+
39+
### Datepicker on Modal
40+
41+
If you need to show the Datepicker in a Modal window, we recommend to set the modal `dismissable` prop to `false` to avoid
42+
occasional closing.
43+
44+
<Unstyled>
45+
<DatepickerOnModal />
46+
</Unstyled>
47+
48+
Example code:
49+
50+
```tsx
51+
export const DatepickerOnModal = () => {
52+
const [showModal, setShowModal] = useState<boolean>(false);
53+
const [value, setValue] = useState<Date>();
54+
55+
return (
56+
<>
57+
{!showModal && <Button onClick={() => setShowModal(true)}>Open Modal with Datepicker</Button>}
58+
{showModal && (
59+
<Modal dismissible={false} onClose={() => setShowModal(false)}>
60+
{dismiss => (
61+
<>
62+
<Headline as="h2">New Event</Headline>
63+
<DatePicker value={value} onChange={setValue} />
64+
<br />
65+
<Button onClick={dismiss}>Add Event</Button>
66+
<TextButton onClick={dismiss}>Cancel</TextButton>
67+
</>
68+
)}
69+
</Modal>
70+
)}
71+
</>
72+
);
73+
};
74+
```
75+
76+
<Stories includePrimary={false} />

‎src/components/Datepicker/docs/DateRangePicker.stories.tsx

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React, { useState } from 'react';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import { DateRangePicker } from '../index';
4+
5+
const meta: Meta = {
6+
title: 'Form Elements/Date/DateRangePicker',
7+
component: DateRangePicker,
8+
argTypes: {
9+
firstDayOfWeek: {
10+
type: 'number',
11+
defaultValue: 1,
12+
control: {
13+
type: 'number',
14+
min: 1,
15+
max: 6
16+
}
17+
},
18+
displayFormat: {
19+
control: 'radio',
20+
options: ['dd/MM/yyyy', 'E, d MMM, y', 'do LLLL']
21+
},
22+
variant: {
23+
control: 'radio',
24+
options: ['normal', 'compact']
25+
}
26+
},
27+
args: {
28+
label: 'Rides between'
29+
}
30+
};
31+
32+
export default meta;
33+
34+
type Story = StoryObj<typeof DateRangePicker>;
35+
36+
export const Default: Story = {
37+
render: ({ onChange, ...args }) => {
38+
const [range, setRange] = useState<{ startDate?: Date; endDate?: Date }>();
39+
40+
return (
41+
<DateRangePicker
42+
{...args}
43+
value={range}
44+
onChange={newRange => {
45+
onChange?.(newRange);
46+
setRange(newRange);
47+
}}
48+
/>
49+
);
50+
}
51+
};
52+
53+
export const Compact: Story = {
54+
...Default,
55+
args: {
56+
variant: 'compact'
57+
}
58+
};
59+
60+
const TODAY = new Date();
61+
const minDate = new Date();
62+
minDate.setMonth(TODAY.getMonth() - 1);
63+
const maxDate = new Date();
64+
maxDate.setMonth(TODAY.getMonth() + 1);
65+
66+
export const WithRestrictedDays: Story = {
67+
...Default,
68+
args: {
69+
minDate,
70+
maxDate
71+
}
72+
};
73+
74+
export const WithDayAvailabilityFunction: Story = {
75+
...Default,
76+
args: {
77+
isDateBlocked: date => date.getDate() % 2 === 0
78+
}
79+
};
80+
81+
export const WithErrorHandler: Story = {
82+
...Default,
83+
args: {
84+
errorHandler: 'The expected format is dd/MM/yyyy'
85+
}
86+
};
87+
88+
export const Disabled: Story = {
89+
...Default,
90+
args: {
91+
disabled: true
92+
}
93+
};
94+
95+
export const WithManualPlacement: Story = {
96+
...Default,
97+
args: {
98+
placement: 'center'
99+
}
100+
};

0 commit comments

Comments
 (0)