docs(mdx): update docs

docs/gatsby-browser.js

@@ -0,0 +1,2 @@
+import './src/styles/global.css'
+import './src/styles/button.css'

docs/gatsby-config.js

@@ -2,20 +2,24 @@ const config = require('./config')
 
 module.exports = {
   plugins: [
+    'gatsby-plugin-postcss',
     {
       resolve: 'gatsby-theme-docz',
       options: {
         typescript: true,
+        editBranch: 'main',
+
         title: config.title,
         description: config.description,
 
         menu: [
           'React Calendar',
-          'Installation',
-          'Core Concept',
-          'Getting Started',
-          'API Reference',
-          'Examples',
+          {
+            name: 'Getting Started',
+            menu: ['Overview', 'Installation', 'Quick Start'],
+          },
+          { name: 'API References', menu: ['useCalendar'] },
+          { name: 'Examples', menu: ['Basic'] },
         ],
       },
     },

docs/gatsby-node.js

@@ -0,0 +1,8 @@
+exports.onCreateBabelConfig = ({ actions }) => {
+  actions.setBabelPlugin({
+    name: '@emotion/babel-plugin',
+    options: {
+      sourceMap: true,
+    },
+  })
+}

docs/package.json

@@ -20,6 +20,9 @@
   "dependencies": {
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",
+    "@veccu/react-calendar": "^1.2.1",
+    "classnames": "^2.2.6",
+    "date-fns": "^2.16.1",
     "docz": "latest",
     "gatsby": "^2.29.2",
     "gatsby-theme-docz": "^2.3.1-alpha.0",
@@ -28,7 +31,14 @@
     "typescript": "^4.1.3"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.1.2",
+    "@emotion/babel-preset-css-prop": "^11.0.0",
+    "@types/classnames": "^2.2.11",
     "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0"
+    "@types/react-dom": "^17.0.0",
+    "autoprefixer": "^10.1.0",
+    "gatsby-plugin-postcss": "^3.4.0",
+    "postcss": "^8.2.2",
+    "tailwindcss": "^2.0.2"
   }
 }

docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

docs/src/api-references/useCalendar.mdx

@@ -0,0 +1,29 @@
+---
+name: useCalendar
+route: /api-references/useCalendar
+menu: API References
+---
+
+# useCalendar
+
+## Usage
+
+```ts
+function Component() {
+	const { cursorDate, headers, body, navigation, view } = useCalendar()
+
+	return (
+		<Something ... />
+	)
+}
+```
+
+## Options
+
+```ts
+export interface UseCalendarOptions {
+  defaultDate?: Date | number | string
+  defaultWeekStart?: WeekDayType
+  defaultViewType?: CalendarViewType
+}
+```

docs/src/components/Calendar.tsx

@@ -0,0 +1,116 @@
+import useCalendar from '@veccu/react-calendar'
+import cx from 'classnames'
+import { format, getDate } from 'date-fns'
+import React from 'react'
+
+export default function Calendar() {
+  const { calendar, headers, body, view, navigation } = useCalendar()
+
+  return (
+    <>
+      <table className="table-fixed border-collapse border border-gray-100 w-full rounded-sm">
+        <caption>
+          <div className="flex flex-row justify-between items-center pb-4">
+            <div className="flex flex-row space space-x-2">
+              <button
+                onClick={() => view.showMonthView()}
+                className={cx('btn bg-blue-50', {
+                  'bg-blue-200': view.isMonthView,
+                })}
+              >
+                M
+              </button>
+              <button
+                onClick={() => view.showWeekView()}
+                className={cx('btn bg-blue-50', {
+                  'bg-blue-200': view.isWeekView,
+                })}
+              >
+                W
+              </button>
+              <button
+                onClick={() => view.showDayView()}
+                className={cx('btn bg-blue-50', {
+                  'bg-blue-200': view.isDayView,
+                })}
+              >
+                D
+              </button>
+            </div>
+            <div className="text-2xl font-black">
+              {format(calendar.cursorDate, 'yyyy.MM')}
+            </div>
+            <div className="flex flex-row space space-x-2">
+              <button
+                onClick={() => navigation.toPrev()}
+                className={cx('btn bg-blue-50')}
+              >
+                {'<'}
+              </button>
+              <button
+                onClick={() => navigation.setToday()}
+                className={cx('btn bg-blue-500 text-white')}
+              >
+                TODAY
+              </button>
+              <button
+                onClick={() => navigation.toNext()}
+                className={cx('btn bg-blue-50')}
+              >
+                {'>'}
+              </button>
+            </div>
+          </div>
+        </caption>
+        <thead className="border-b-1">
+          <tr>
+            {headers.weekDays.map(({ key, value }) => {
+              return (
+                <th className="border border-gray-100 p-3" key={key}>
+                  {format(value, 'E')}
+                </th>
+              )
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {body.value.map((week) => {
+            const { key, value: days } = week
+
+            return (
+              <tr key={key}>
+                {days.map((day) => {
+                  const { key, value, isCurrentDate, isCurrentMonth } = day
+
+                  return (
+                    <td
+                      key={key}
+                      className={cx(
+                        'border border-gray-100 p-6 text-center text-xl',
+                        {
+                          'bg-blue-200 animate-pulse': isCurrentDate,
+                          'opacity-20': !isCurrentMonth,
+                        },
+                      )}
+                    >
+                      {getDate(value)}
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+
+      <button
+        onClick={() => {
+          window.location.href = '/getting-started/overview'
+        }}
+        className="block mt-20 mx-auto p-4 rounded bg-gradient-to-r from-indigo-400 via-purple-500 to-blue-500 text-white"
+      >
+        Go to <span className="italic font-bold">Getting Started</span>
+      </button>
+    </>
+  )
+}

docs/src/gatsby-theme-docz/components/Logo.js

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react'
+import React from 'react'
+
+export function Logo() {
+  return (
+    <div
+      css={css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      `}
+    >
+      <img
+        css={css`
+          display: inline-block;
+          margin-right: 8px;
+          height: 36px;
+        `}
+        src="/icon/logo.png"
+        alt="react-calendar Logo"
+      />
+      <span
+        css={css`
+          font-weight: bolder;
+        `}
+      >
+        React Calendar
+      </span>
+    </div>
+  )
+}

docs/src/installation.mdx → docs/src/getting-started/installation.mdx

@@ -1,6 +1,7 @@
 ---
 name: Installation
-route: /installation
+route: /getting-started/installation
+menu: Getting Started
 ---
 
 # Installation
@@ -16,7 +17,14 @@ npm install --save @veccu/react-calendar
 ```json
 "peerDependencies": {
   "date-fns": ">= 2",
-  "react": ">= 16.8",
-  "react-dom": ">= 16.8"
+  "react": "^16.8.0 || ^17.0.0"
+},
+"peerDependenciesMeta": {
+  "react-dom": {
+    "optional": true
+  },
+  "react-native": {
+    "optional": true
+  }
 }
 ```

docs/src/core-concept.mdx → docs/src/getting-started/overview.mdx

@@ -1,9 +1,10 @@
 ---
-name: Core Concept
-route: /core-concept
+name: Overview
+route: /getting-started/overview
+menu: Getting Started
 ---
 
-# Core Concept
+# Overview
 
 - Headless UI Library
 - @veccu/react-calendar treat calendar as matrix (2x2)
@@ -12,11 +13,21 @@ route: /core-concept
 
 > A component that doesn’t have a UI, but has the functionality.
 
+react-calendar is a headless utility, which means out of the box, it doesn't render or supply any actual UI elements.
+
+### A Calendar Utility
+
+These hooks do not render any markup or styles for you. react-calendar opens up the possibility for your tables to integrate into any existing theme
+
 If you want to know more about headless components, please refer to this [link](https://blog.logrocket.com/the-complete-guide-to-building-headless-interface-components-in-react).
 
+### Reference
+
+Inspired by https://react-table.tanstack.com/docs/overview
+
 ## Calendar model
 
-Let's see model of [`Calendar`](https://github.com/veccu/react-calendar/blob/main/src/models/Calendar.ts)
+Let's see the model of [`Calendar`](https://github.com/veccu/react-calendar/blob/main/src/models/Calendar.ts)
 
 ```ts
 export interface MonthMatrix extends Record<string, unknown> {
@@ -72,4 +83,6 @@ export interface DateCell extends Record<string, unknown> {
     },
   ],
 }
-```
+```
+
+> Let's start!

docs/src/getting-started.mdx → docs/src/getting-started/quick-start.mdx

@@ -1,12 +1,25 @@
 ---
-name: Getting Started
-route: /getting-started
+name: Quick Start
+route: /getting-started/quick-start
+menu: Getting Started
 ---
 
-# Getting Started
+# Quick Start
 
 Quickly create calendar UI with table HTML elements!
 
+## Get calendar data
+
+`useCalendar` hooks are the most important functions and everything in React Calendar. These hooks return almost everything you need to construct a calendar.
+
+```ts
+const { headers, body, view } = useCalendar()
+```
+
+## Build UI with anything
+
+You can use anything UI library (like Charkra UI, Material UI, etc ...)
+
 ```tsx
 import useCalendar from '@veccu/react-calendar'
 

docs/src/index.mdx

@@ -4,8 +4,10 @@ route: /
 fullpage: true
 ---
 
-![react-calendar](../static/logo/react-calendar.png)
+import Calendar from './components/Calendar'
+
+# react-calendar
 
 Headless Calendar UI Library
 
-- [GitHub](https://github.com/veccu/react-calendar)
+<Calendar />

docs/src/styles/button.css

@@ -0,0 +1,4 @@
+.btn {
+	@apply py-2 p-4;
+	@apply rounded-md;
+}