feat: add calendar doc

Author: jason89521

doc-site/docs/react-typist-component/index.mdx

@@ -1,7 +1,9 @@
 ---
-title: React Typist Component
+title: Typist
 ---
 
+# React Typist Component
+
 ## Install
 
 ```bash

doc-site/docs/react-use-calendar-component/index.mdx

@@ -0,0 +1,131 @@
+---
+title: Use Calendar
+---
+
+# React Use Calendar Component
+
+This package is aimed to provide an easy-to-use API interface for those people who want to build their own calendar component with custom style.
+
+## Install
+
+```sh
+npm install react-use-calendar-component
+```
+
+## Usage
+
+```tsx
+import useCalendarComponent from 'react-use-calendar-component';
+
+const Calendar = () => {
+  const [value, setValue] = useState(new Date());
+  const {
+    selectedDates,
+    displayedYear,
+    displayedMonth,
+    changeDisplayedYear,
+    changeDisplayedMonth,
+    getDateCellInfos,
+  } = useCalendarComponent({
+    initialDisplayedDate: new Date(2022, 10, 10),
+    selectType: 'single',
+    value,
+    onChange: setValue,
+  });
+
+  return (
+    <div>
+      {/* Display and control the year/month */}
+      <CalendarHeader
+        onYearClick={changeDisplayedYear}
+        onMonthClick={changeDisplayedMonth}
+        year={displayedYear}
+        month={displayedMonth}
+      />
+      <CalendarBody>
+        {/* Use these function to display and control your calendar cells*/}
+        {getDateCellInfos().map(({key, ...info}) => {
+          return <CalendarCell key={key} {...info}>
+        })}
+      </CalendarBody>
+    </div>
+  );
+};
+```
+
+## API Reference
+
+```ts
+const {
+  selectedDates,
+  displayedYear,
+  displayedMonth,
+  changeDisplayedYear,
+  changeDisplayedMonth,
+  getDateCellInfos,
+} = useCalendarComponent({ initialDisplayedDate, selectType, value, onChange });
+```
+
+### Args
+
+#### `initialDisplayedDate`
+
+This value will be used to generate the date cells at beginning. Its default value is `new Date()`.
+
+#### `selectType`
+
+The selection type of the calendar, currently support `'single' | 'multiple'`. Its default value is `'single'`.
+
+> This option must be set if you don't want to use `single` type.
+
+#### `value`
+
+Set it up to get the full control of the calendar. For `'single'` selection type, the type of this value should be `Date`. For `'multiple'` selection type, the type of this value should be `Date[]`.
+
+#### `onChange`
+
+```ts
+type OnChange: (value: Date|Date[]) => void
+```
+
+For `single` selection type, the `value` is a `Date` instance. For `multiple` selection type, the `value` is an array of `Date` instances.
+
+### Returns
+
+#### `selectedDates`
+
+An array contains the `Date` instances of all selected date.
+
+#### `displayedYear`
+
+The year of the calendar which should be rendered.
+
+#### `displayedMonth`
+
+The month of the calendar which should be rendered.
+
+#### `changeDisplayedYear`
+
+Call this function to add a value to `displayedYear`.
+
+#### `changeDisplayedMonth`
+
+Call this function to add a value to `displayedMonth`.
+
+#### `getDateCellInfos`
+
+```ts
+interface DateCellInfo {
+  key: string;
+  year: number;
+  month: number;
+  dayOfMonth: number;
+  dayOfWeek: number;
+  isToday: boolean;
+  isSelected: boolean;
+  monthStatus: 'current' | 'next' | 'previous';
+  selectThisDate: (options?: SelectDateOptions) => void;
+}
+```
+
+This function returns an array of `DateCellInfo`. It can be used to render your calendar.