Skip to content

Commit bcaee1a

Browse files
hoangdevnullhoangdevnull
committed
feat: migration calendar kit
1 parent b974140 commit bcaee1a

38 files changed

Lines changed: 1193 additions & 1459 deletions

‎apps/web/.storybook/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const preview: Preview = {
2222
options: {
2323
storySort: {
2424
method: 'alphabetical',
25-
order: ['Foundations', 'Components'],
25+
order: ['Welcome', 'Foundations', 'Components'],
2626
},
2727
},
2828
controls: {

‎apps/web/.storybook/welcome.stories.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,18 @@ import { Meta, Story } from '@storybook/addon-docs';
1919

2020
## Install
2121

22-
The UI came with diffences package namely `@var-meta/icon`, `@var-meta/theme` and `@var-meta/ui`
22+
The UI came with diffences package namely `@var-meta/icons`, `@var-meta/theme` and `@var-meta/ui`
2323

2424
```sh
25-
npm install @var-meta/ui @var-meta/theme @var-meta/icon
25+
npm install @var-meta/ui @var-meta/theme @var-meta/icons
2626
```
2727

2828
```sh
29-
yarn add @var-meta/ui @var-meta/theme @var-meta/icon
29+
yarn add @var-meta/ui @var-meta/theme @var-meta/icons
3030
```
3131

3232
```sh
33-
pnpm i @var-meta/ui @var-meta/theme @var-meta/icon
33+
pnpm i @var-meta/ui @var-meta/theme @var-meta/icons
3434
```
3535

3636
## Tailwind CSS Setup

‎apps/web/next.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/** @type {import('next').NextConfig} */
33
const nextConfig = {
44
experimental: {
5-
optimizePackageImports: ['@var-meta/icon', '@var-meta/ui'],
5+
optimizePackageImports: ['@var-meta/icons', '@var-meta/ui'],
66
},
77
};
88

‎apps/web/src/stories/calendar.stories.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,45 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import { Calendar, type CalendarProps } from '@var-meta/ui';
44

55
import { EnhancedView } from '@/components/View';
66

7-
const mode = ['single', 'multiple', 'range'];
8-
97
const meta: Meta = {
10-
title: 'Components/DatePicker/Calendar',
8+
title: 'Components/Calendar/Calendar',
119
component: Calendar,
1210
tags: ['autodocs'],
13-
argTypes: {
14-
mode: {
15-
options: mode,
16-
control: { type: 'select' },
17-
},
18-
},
11+
argTypes: {},
1912
args: {},
2013
};
2114

2215
export default meta;
2316

24-
const DefaultTemplate: StoryFn<CalendarProps> = ({ mode = 'single', ...args }) => {
25-
const [selected, setSelect] = useState<any>();
26-
17+
const DefaultTemplate: StoryFn<CalendarProps> = (args) => {
2718
return (
2819
<EnhancedView prop="Default">
29-
<Calendar selected={selected} onSelect={setSelect as any} mode={mode} {...args} />
20+
<Calendar {...args} />
3021
</EnhancedView>
3122
);
3223
};
3324

3425
export const Default: StoryFn<typeof Calendar> = DefaultTemplate.bind({});
26+
27+
const WithPickerTemplate: StoryFn<CalendarProps> = (args) => {
28+
return (
29+
<EnhancedView prop="WithPicker">
30+
<Calendar withPicker {...args} />
31+
</EnhancedView>
32+
);
33+
};
34+
35+
export const WithPicker: StoryFn<typeof Calendar> = WithPickerTemplate.bind({});
36+
37+
const MultipleMonthsTemplate: StoryFn<CalendarProps> = (args) => {
38+
return (
39+
<EnhancedView prop="MultipleMonths">
40+
<Calendar visibleMonths={2} {...args} />
41+
</EnhancedView>
42+
);
43+
};
44+
45+
export const MultipleMonths: StoryFn<typeof Calendar> = MultipleMonthsTemplate.bind({});

‎apps/web/src/stories/date-input.stories.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import type { Meta, StoryFn } from '@storybook/react';
3+
import { DateInput, type DateInputProps } from '@var-meta/ui';
4+
5+
import { EnhancedView } from '@/components/View';
6+
7+
const meta: Meta = {
8+
title: 'Components/Calendar/DateInput',
9+
component: DateInput,
10+
tags: ['autodocs'],
11+
argTypes: {},
12+
args: {},
13+
};
14+
15+
export default meta;
16+
17+
const DefaultTemplate: StoryFn<DateInputProps> = (args) => {
18+
return (
19+
<EnhancedView prop="Default">
20+
<DateInput {...args} />
21+
</EnhancedView>
22+
);
23+
};
24+
25+
export const Default: StoryFn<typeof DateInput> = DefaultTemplate.bind({});

‎apps/web/src/stories/date-picker.stories.tsx‎

Lines changed: 18 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,43 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
3-
import {
4-
Button,
5-
CalendarIcon,
6-
DatePicker,
7-
Modal,
8-
Popper,
9-
useDisclosure,
10-
type Calendar,
11-
type DatePickerProps,
12-
} from '@var-meta/ui';
13-
import dayjs from 'dayjs';
3+
import { Button, DatePicker, Modal, ModalBody, ModalHeader } from '@var-meta/ui';
144

155
import { View } from '@/components/View';
166

17-
const mode = ['single', 'multiple', 'range'];
18-
197
const meta: Meta = {
20-
title: 'Components/DatePicker/DatePicker',
8+
title: 'Components/Calendar/DatePicker',
219
component: DatePicker,
2210
tags: ['autodocs'],
23-
argTypes: {
24-
mode: {
25-
options: mode,
26-
control: { type: 'select' },
27-
},
28-
},
11+
argTypes: {},
2912
args: {},
3013
};
3114

3215
export default meta;
3316

34-
const DefaultTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
35-
const [value, setValue] = useState<Date>();
17+
const DefaultTemplate: StoryFn<typeof DatePicker> = ({ ...args }) => {
3618
return (
3719
<View prop="Default">
38-
<DatePicker {...args} onCancel={close} value={value} onChange={(date) => setValue(date)} />
20+
<DatePicker {...args} />
3921
</View>
4022
);
4123
};
4224

43-
export const Default: StoryFn<typeof Calendar> = DefaultTemplate.bind({});
44-
45-
const WithPopperTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
46-
const [value, setValue] = useState<Date>();
47-
const [isOpen, { close, setOpened }] = useDisclosure(false);
25+
export const Default: StoryFn<typeof DatePicker> = DefaultTemplate.bind({});
4826

49-
const handleChange = (date?: Date) => {
50-
setValue(date);
51-
close();
52-
};
27+
const WithModalTemplate: StoryFn<typeof DatePicker> = ({ ...args }) => {
5328
return (
54-
<View prop="Default">
55-
<Popper
56-
onOpenChange={setOpened}
57-
open={isOpen}
58-
trigger={
59-
<Button variant="link">
60-
<CalendarIcon />
61-
{value ? dayjs(value).format('MMM DD, YYYY') : 'Select date'}
62-
</Button>
63-
}
64-
>
65-
<DatePicker {...args} onCancel={close} value={value} onChange={handleChange} />
66-
</Popper>
67-
</View>
68-
);
69-
};
70-
71-
export const WithPopper: StoryFn<typeof Calendar> = WithPopperTemplate.bind({});
72-
73-
const WithModalTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
74-
const [value, setValue] = useState<Date>();
75-
const [isOpen, { close, setOpened }] = useDisclosure(false);
76-
77-
const handleChange = (date?: Date) => {
78-
setValue(date);
79-
close();
80-
};
81-
return (
82-
<View prop="Default">
83-
<Modal
84-
className="max-w-fit"
85-
onOpenChange={setOpened}
86-
open={isOpen}
87-
fitContent
88-
trigger={
89-
<Button variant="link">
90-
<CalendarIcon />
91-
{value ? dayjs(value).format('MMM DD, YYYY') : 'Select date'}
92-
</Button>
93-
}
94-
>
95-
<DatePicker {...args} onCancel={close} value={value} onChange={handleChange} />
29+
<View prop="WithModal">
30+
<Modal trigger={<Button>Show Modal</Button>}>
31+
<ModalHeader
32+
title="Blog post published"
33+
description="This blog post has been published. Team members will be able to edit this post and republish changes."
34+
/>
35+
<ModalBody>
36+
<DatePicker {...args} />
37+
</ModalBody>
9638
</Modal>
9739
</View>
9840
);
9941
};
10042

101-
export const WithModal: StoryFn<typeof Calendar> = WithModalTemplate.bind({});
43+
export const WithModal: StoryFn<typeof DatePicker> = WithModalTemplate.bind({});

‎apps/web/src/stories/date-range-picker.stories.tsx‎

Lines changed: 19 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,20 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
3-
import {
4-
Button,
5-
CalendarIcon,
6-
DateRangePicker,
7-
Modal,
8-
Popper,
9-
useDisclosure,
10-
type Calendar,
11-
type DatePickerProps,
12-
type DateRange,
13-
type DateRangePickerProps,
14-
} from '@var-meta/ui';
15-
import dayjs from 'dayjs';
3+
import { Button, DateRangePicker, Modal, ModalBody, ModalHeader, type DateRangePickerProps } from '@var-meta/ui';
164

175
import { View } from '@/components/View';
186

197
const meta: Meta = {
20-
title: 'Components/DatePicker/DateRangePicker',
8+
title: 'Components/Calendar/DateRangePicker',
219
component: DateRangePicker,
2210
tags: ['autodocs'],
2311
argTypes: {},
24-
args: {
25-
withPreset: true,
26-
},
12+
args: {},
2713
};
2814

2915
export default meta;
3016

31-
const DefaultTemplate: StoryFn<DateRangePickerProps> = ({ ...args }) => {
17+
const DefaultTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
3218
return (
3319
<View prop="Default">
3420
<DateRangePicker {...args} />
@@ -38,84 +24,30 @@ const DefaultTemplate: StoryFn<DateRangePickerProps> = ({ ...args }) => {
3824

3925
export const Default: StoryFn<typeof DateRangePicker> = DefaultTemplate.bind({});
4026

41-
const WithPopperTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
42-
const [value, setValue] = useState<DateRange>({
43-
from: new Date(new Date().setHours(0, 0, 0, 0)),
44-
to: undefined,
45-
});
46-
const [isOpen, { close, setOpened }] = useDisclosure(false);
47-
48-
const handleChange = (date?: DateRange) => {
49-
setValue(date);
50-
close();
51-
};
27+
const MultipleMonthsTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
5228
return (
53-
<View prop="Default">
54-
<Popper
55-
onOpenChange={setOpened}
56-
open={isOpen}
57-
trigger={
58-
<Button variant="link">
59-
<CalendarIcon />
60-
{value?.to
61-
? `${dayjs(value.from).format('MMM DD, YYYY')} - ${dayjs(value.to).format('MMM DD, YYYY')}`
62-
: 'Select date'}
63-
</Button>
64-
}
65-
>
66-
<DateRangePicker
67-
{...args}
68-
withPreset
69-
onCancel={close}
70-
from={value.from}
71-
to={value.to}
72-
onChange={handleChange}
73-
/>
74-
</Popper>
29+
<View prop="MultipleMonths">
30+
<DateRangePicker calendarProps={{ visibleMonths: 2 }} {...args} />
7531
</View>
7632
);
7733
};
7834

79-
export const WithPopper: StoryFn<typeof Calendar> = WithPopperTemplate.bind({});
35+
export const MultipleMonths: StoryFn<typeof DateRangePicker> = MultipleMonthsTemplate.bind({});
8036

81-
const WithModalTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
82-
const [value, setValue] = useState<DateRange>({
83-
from: new Date(new Date().setHours(0, 0, 0, 0)),
84-
to: undefined,
85-
});
86-
const [isOpen, { close, setOpened }] = useDisclosure(false);
87-
88-
const handleChange = (date?: DateRange) => {
89-
setValue(date);
90-
close();
91-
};
37+
const WithModalTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
9238
return (
93-
<View prop="Default">
94-
<Modal
95-
className="max-w-fit"
96-
onOpenChange={setOpened}
97-
open={isOpen}
98-
fitContent
99-
trigger={
100-
<Button variant="link">
101-
<CalendarIcon />
102-
{value?.to
103-
? `${dayjs(value.from).format('MMM DD, YYYY')} - ${dayjs(value.to).format('MMM DD, YYYY')}`
104-
: 'Select date'}
105-
</Button>
106-
}
107-
>
108-
<DateRangePicker
109-
{...args}
110-
withPreset
111-
onCancel={close}
112-
from={value.from}
113-
to={value.to}
114-
onChange={handleChange}
39+
<View prop="WithModal">
40+
<Modal trigger={<Button>Show Modal</Button>}>
41+
<ModalHeader
42+
title="Blog post published"
43+
description="This blog post has been published. Team members will be able to edit this post and republish changes."
11544
/>
45+
<ModalBody>
46+
<DateRangePicker {...args} />
47+
</ModalBody>
11648
</Modal>
11749
</View>
11850
);
11951
};
12052

121-
export const WithModal: StoryFn<typeof Calendar> = WithModalTemplate.bind({});
53+
export const WithModal: StoryFn<typeof DateRangePicker> = WithModalTemplate.bind({});

0 commit comments

Comments
 (0)