feat: migration calendar kit

apps/web/.storybook/preview.tsx

@@ -22,7 +22,7 @@ const preview: Preview = {
     options: {
       storySort: {
         method: 'alphabetical',
-        order: ['Foundations', 'Components'],
+        order: ['Welcome', 'Foundations', 'Components'],
       },
     },
     controls: {

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

@@ -19,18 +19,18 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 ## Install
 
-The UI came with diffences package namely `@var-meta/icon`, `@var-meta/theme` and `@var-meta/ui`
+The UI came with diffences package namely `@var-meta/icons`, `@var-meta/theme` and `@var-meta/ui`
 
 ```sh
-npm install @var-meta/ui @var-meta/theme @var-meta/icon
+npm install @var-meta/ui @var-meta/theme @var-meta/icons
 ```
 
 ```sh
-yarn add @var-meta/ui @var-meta/theme @var-meta/icon
+yarn add @var-meta/ui @var-meta/theme @var-meta/icons
 ```
 
 ```sh
-pnpm i @var-meta/ui @var-meta/theme @var-meta/icon
+pnpm i @var-meta/ui @var-meta/theme @var-meta/icons
 ```
 
 ## Tailwind CSS Setup

apps/web/next.config.js

@@ -2,7 +2,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
-    optimizePackageImports: ['@var-meta/icon', '@var-meta/ui'],
+    optimizePackageImports: ['@var-meta/icons', '@var-meta/ui'],
   },
 };
 

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

@@ -1,34 +1,45 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { Calendar, type CalendarProps } from '@var-meta/ui';
 
 import { EnhancedView } from '@/components/View';
 
-const mode = ['single', 'multiple', 'range'];
-
 const meta: Meta = {
-  title: 'Components/DatePicker/Calendar',
+  title: 'Components/Calendar/Calendar',
   component: Calendar,
   tags: ['autodocs'],
-  argTypes: {
-    mode: {
-      options: mode,
-      control: { type: 'select' },
-    },
-  },
+  argTypes: {},
   args: {},
 };
 
 export default meta;
 
-const DefaultTemplate: StoryFn<CalendarProps> = ({ mode = 'single', ...args }) => {
-  const [selected, setSelect] = useState<any>();
-
+const DefaultTemplate: StoryFn<CalendarProps> = (args) => {
   return (
     <EnhancedView prop="Default">
-      <Calendar selected={selected} onSelect={setSelect as any} mode={mode} {...args} />
+      <Calendar {...args} />
     </EnhancedView>
   );
 };
 
 export const Default: StoryFn<typeof Calendar> = DefaultTemplate.bind({});
+
+const WithPickerTemplate: StoryFn<CalendarProps> = (args) => {
+  return (
+    <EnhancedView prop="WithPicker">
+      <Calendar withPicker {...args} />
+    </EnhancedView>
+  );
+};
+
+export const WithPicker: StoryFn<typeof Calendar> = WithPickerTemplate.bind({});
+
+const MultipleMonthsTemplate: StoryFn<CalendarProps> = (args) => {
+  return (
+    <EnhancedView prop="MultipleMonths">
+      <Calendar visibleMonths={2} {...args} />
+    </EnhancedView>
+  );
+};
+
+export const MultipleMonths: StoryFn<typeof Calendar> = MultipleMonthsTemplate.bind({});

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { DateInput, type DateInputProps } from '@var-meta/ui';
+
+import { EnhancedView } from '@/components/View';
+
+const meta: Meta = {
+  title: 'Components/Calendar/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+const DefaultTemplate: StoryFn<DateInputProps> = (args) => {
+  return (
+    <EnhancedView prop="Default">
+      <DateInput {...args} />
+    </EnhancedView>
+  );
+};
+
+export const Default: StoryFn<typeof DateInput> = DefaultTemplate.bind({});

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

@@ -1,101 +1,43 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
-import {
-  Button,
-  CalendarIcon,
-  DatePicker,
-  Modal,
-  Popper,
-  useDisclosure,
-  type Calendar,
-  type DatePickerProps,
-} from '@var-meta/ui';
-import dayjs from 'dayjs';
+import { Button, DatePicker, Modal, ModalBody, ModalHeader } from '@var-meta/ui';
 
 import { View } from '@/components/View';
 
-const mode = ['single', 'multiple', 'range'];
-
 const meta: Meta = {
-  title: 'Components/DatePicker/DatePicker',
+  title: 'Components/Calendar/DatePicker',
   component: DatePicker,
   tags: ['autodocs'],
-  argTypes: {
-    mode: {
-      options: mode,
-      control: { type: 'select' },
-    },
-  },
+  argTypes: {},
   args: {},
 };
 
 export default meta;
 
-const DefaultTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
-  const [value, setValue] = useState<Date>();
+const DefaultTemplate: StoryFn<typeof DatePicker> = ({ ...args }) => {
   return (
     <View prop="Default">
-      <DatePicker {...args} onCancel={close} value={value} onChange={(date) => setValue(date)} />
+      <DatePicker {...args} />
     </View>
   );
 };
 
-export const Default: StoryFn<typeof Calendar> = DefaultTemplate.bind({});
-
-const WithPopperTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
-  const [value, setValue] = useState<Date>();
-  const [isOpen, { close, setOpened }] = useDisclosure(false);
+export const Default: StoryFn<typeof DatePicker> = DefaultTemplate.bind({});
 
-  const handleChange = (date?: Date) => {
-    setValue(date);
-    close();
-  };
+const WithModalTemplate: StoryFn<typeof DatePicker> = ({ ...args }) => {
   return (
-    <View prop="Default">
-      <Popper
-        onOpenChange={setOpened}
-        open={isOpen}
-        trigger={
-          <Button variant="link">
-            <CalendarIcon />
-            {value ? dayjs(value).format('MMM DD, YYYY') : 'Select date'}
-          </Button>
-        }
-      >
-        <DatePicker {...args} onCancel={close} value={value} onChange={handleChange} />
-      </Popper>
-    </View>
-  );
-};
-
-export const WithPopper: StoryFn<typeof Calendar> = WithPopperTemplate.bind({});
-
-const WithModalTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
-  const [value, setValue] = useState<Date>();
-  const [isOpen, { close, setOpened }] = useDisclosure(false);
-
-  const handleChange = (date?: Date) => {
-    setValue(date);
-    close();
-  };
-  return (
-    <View prop="Default">
-      <Modal
-        className="max-w-fit"
-        onOpenChange={setOpened}
-        open={isOpen}
-        fitContent
-        trigger={
-          <Button variant="link">
-            <CalendarIcon />
-            {value ? dayjs(value).format('MMM DD, YYYY') : 'Select date'}
-          </Button>
-        }
-      >
-        <DatePicker {...args} onCancel={close} value={value} onChange={handleChange} />
+    <View prop="WithModal">
+      <Modal trigger={<Button>Show Modal</Button>}>
+        <ModalHeader
+          title="Blog post published"
+          description="This blog post has been published. Team members will be able to edit this post and republish changes."
+        />
+        <ModalBody>
+          <DatePicker {...args} />
+        </ModalBody>
       </Modal>
     </View>
   );
 };
 
-export const WithModal: StoryFn<typeof Calendar> = WithModalTemplate.bind({});
+export const WithModal: StoryFn<typeof DatePicker> = WithModalTemplate.bind({});

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

@@ -1,34 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
-import {
-  Button,
-  CalendarIcon,
-  DateRangePicker,
-  Modal,
-  Popper,
-  useDisclosure,
-  type Calendar,
-  type DatePickerProps,
-  type DateRange,
-  type DateRangePickerProps,
-} from '@var-meta/ui';
-import dayjs from 'dayjs';
+import { Button, DateRangePicker, Modal, ModalBody, ModalHeader, type DateRangePickerProps } from '@var-meta/ui';
 
 import { View } from '@/components/View';
 
 const meta: Meta = {
-  title: 'Components/DatePicker/DateRangePicker',
+  title: 'Components/Calendar/DateRangePicker',
   component: DateRangePicker,
   tags: ['autodocs'],
   argTypes: {},
-  args: {
-    withPreset: true,
-  },
+  args: {},
 };
 
 export default meta;
 
-const DefaultTemplate: StoryFn<DateRangePickerProps> = ({ ...args }) => {
+const DefaultTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
   return (
     <View prop="Default">
       <DateRangePicker {...args} />
@@ -38,84 +24,30 @@ const DefaultTemplate: StoryFn<DateRangePickerProps> = ({ ...args }) => {
 
 export const Default: StoryFn<typeof DateRangePicker> = DefaultTemplate.bind({});
 
-const WithPopperTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
-  const [value, setValue] = useState<DateRange>({
-    from: new Date(new Date().setHours(0, 0, 0, 0)),
-    to: undefined,
-  });
-  const [isOpen, { close, setOpened }] = useDisclosure(false);
-
-  const handleChange = (date?: DateRange) => {
-    setValue(date);
-    close();
-  };
+const MultipleMonthsTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
   return (
-    <View prop="Default">
-      <Popper
-        onOpenChange={setOpened}
-        open={isOpen}
-        trigger={
-          <Button variant="link">
-            <CalendarIcon />
-            {value?.to
-              ? `${dayjs(value.from).format('MMM DD, YYYY')} - ${dayjs(value.to).format('MMM DD, YYYY')}`
-              : 'Select date'}
-          </Button>
-        }
-      >
-        <DateRangePicker
-          {...args}
-          withPreset
-          onCancel={close}
-          from={value.from}
-          to={value.to}
-          onChange={handleChange}
-        />
-      </Popper>
+    <View prop="MultipleMonths">
+      <DateRangePicker calendarProps={{ visibleMonths: 2 }} {...args} />
     </View>
   );
 };
 
-export const WithPopper: StoryFn<typeof Calendar> = WithPopperTemplate.bind({});
+export const MultipleMonths: StoryFn<typeof DateRangePicker> = MultipleMonthsTemplate.bind({});
 
-const WithModalTemplate: StoryFn<DatePickerProps> = ({ ...args }) => {
-  const [value, setValue] = useState<DateRange>({
-    from: new Date(new Date().setHours(0, 0, 0, 0)),
-    to: undefined,
-  });
-  const [isOpen, { close, setOpened }] = useDisclosure(false);
-
-  const handleChange = (date?: DateRange) => {
-    setValue(date);
-    close();
-  };
+const WithModalTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
   return (
-    <View prop="Default">
-      <Modal
-        className="max-w-fit"
-        onOpenChange={setOpened}
-        open={isOpen}
-        fitContent
-        trigger={
-          <Button variant="link">
-            <CalendarIcon />
-            {value?.to
-              ? `${dayjs(value.from).format('MMM DD, YYYY')} - ${dayjs(value.to).format('MMM DD, YYYY')}`
-              : 'Select date'}
-          </Button>
-        }
-      >
-        <DateRangePicker
-          {...args}
-          withPreset
-          onCancel={close}
-          from={value.from}
-          to={value.to}
-          onChange={handleChange}
+    <View prop="WithModal">
+      <Modal trigger={<Button>Show Modal</Button>}>
+        <ModalHeader
+          title="Blog post published"
+          description="This blog post has been published. Team members will be able to edit this post and republish changes."
         />
+        <ModalBody>
+          <DateRangePicker {...args} />
+        </ModalBody>
       </Modal>
     </View>
   );
 };
 
-export const WithModal: StoryFn<typeof Calendar> = WithModalTemplate.bind({});
+export const WithModal: StoryFn<typeof DateRangePicker> = WithModalTemplate.bind({});