Skip to content

Commit 7d560bb

Browse files
jbee37142jbee37142
committed
docs(mdx): update docs
1 parent 1c55452 commit 7d560bb

File tree

17 files changed

+599
-45
lines changed

17 files changed

+599
-45
lines changed

‎docs/gatsby-browser.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import './src/styles/global.css'
2+
import './src/styles/button.css'

‎docs/gatsby-config.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,24 @@ const config = require('./config')
22

33
module.exports = {
44
plugins: [
5+
'gatsby-plugin-postcss',
56
{
67
resolve: 'gatsby-theme-docz',
78
options: {
89
typescript: true,
10+
editBranch: 'main',
11+
912
title: config.title,
1013
description: config.description,
1114

1215
menu: [
1316
'React Calendar',
14-
'Installation',
15-
'Core Concept',
16-
'Getting Started',
17-
'API Reference',
18-
'Examples',
17+
{
18+
name: 'Getting Started',
19+
menu: ['Overview', 'Installation', 'Quick Start'],
20+
},
21+
{ name: 'API References', menu: ['useCalendar'] },
22+
{ name: 'Examples', menu: ['Basic'] },
1923
],
2024
},
2125
},

‎docs/gatsby-node.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
exports.onCreateBabelConfig = ({ actions }) => {
2+
actions.setBabelPlugin({
3+
name: '@emotion/babel-plugin',
4+
options: {
5+
sourceMap: true,
6+
},
7+
})
8+
}

‎docs/package.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
"dependencies": {
2121
"@emotion/react": "^11.1.4",
2222
"@emotion/styled": "^11.0.0",
23+
"@veccu/react-calendar": "^1.2.1",
24+
"classnames": "^2.2.6",
25+
"date-fns": "^2.16.1",
2326
"docz": "latest",
2427
"gatsby": "^2.29.2",
2528
"gatsby-theme-docz": "^2.3.1-alpha.0",
@@ -28,7 +31,14 @@
2831
"typescript": "^4.1.3"
2932
},
3033
"devDependencies": {
34+
"@emotion/babel-plugin": "^11.1.2",
35+
"@emotion/babel-preset-css-prop": "^11.0.0",
36+
"@types/classnames": "^2.2.11",
3137
"@types/react": "^17.0.0",
32-
"@types/react-dom": "^17.0.0"
38+
"@types/react-dom": "^17.0.0",
39+
"autoprefixer": "^10.1.0",
40+
"gatsby-plugin-postcss": "^3.4.0",
41+
"postcss": "^8.2.2",
42+
"tailwindcss": "^2.0.2"
3343
}
3444
}

‎docs/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎docs/src/api-reference/useCalendar.mdx‎

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

‎docs/src/api-references/useCalendar.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
name: useCalendar
3+
route: /api-references/useCalendar
4+
menu: API References
5+
---
6+
7+
# useCalendar
8+
9+
## Usage
10+
11+
```ts
12+
function Component() {
13+
const { cursorDate, headers, body, navigation, view } = useCalendar()
14+
15+
return (
16+
<Something ... />
17+
)
18+
}
19+
```
20+
21+
## Options
22+
23+
```ts
24+
export interface UseCalendarOptions {
25+
defaultDate?: Date | number | string
26+
defaultWeekStart?: WeekDayType
27+
defaultViewType?: CalendarViewType
28+
}
29+
```

‎docs/src/components/Calendar.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import useCalendar from '@veccu/react-calendar'
2+
import cx from 'classnames'
3+
import { format, getDate } from 'date-fns'
4+
import React from 'react'
5+
6+
export default function Calendar() {
7+
const { calendar, headers, body, view, navigation } = useCalendar()
8+
9+
return (
10+
<>
11+
<table className="table-fixed border-collapse border border-gray-100 w-full rounded-sm">
12+
<caption>
13+
<div className="flex flex-row justify-between items-center pb-4">
14+
<div className="flex flex-row space space-x-2">
15+
<button
16+
onClick={() => view.showMonthView()}
17+
className={cx('btn bg-blue-50', {
18+
'bg-blue-200': view.isMonthView,
19+
})}
20+
>
21+
M
22+
</button>
23+
<button
24+
onClick={() => view.showWeekView()}
25+
className={cx('btn bg-blue-50', {
26+
'bg-blue-200': view.isWeekView,
27+
})}
28+
>
29+
W
30+
</button>
31+
<button
32+
onClick={() => view.showDayView()}
33+
className={cx('btn bg-blue-50', {
34+
'bg-blue-200': view.isDayView,
35+
})}
36+
>
37+
D
38+
</button>
39+
</div>
40+
<div className="text-2xl font-black">
41+
{format(calendar.cursorDate, 'yyyy.MM')}
42+
</div>
43+
<div className="flex flex-row space space-x-2">
44+
<button
45+
onClick={() => navigation.toPrev()}
46+
className={cx('btn bg-blue-50')}
47+
>
48+
{'<'}
49+
</button>
50+
<button
51+
onClick={() => navigation.setToday()}
52+
className={cx('btn bg-blue-500 text-white')}
53+
>
54+
TODAY
55+
</button>
56+
<button
57+
onClick={() => navigation.toNext()}
58+
className={cx('btn bg-blue-50')}
59+
>
60+
{'>'}
61+
</button>
62+
</div>
63+
</div>
64+
</caption>
65+
<thead className="border-b-1">
66+
<tr>
67+
{headers.weekDays.map(({ key, value }) => {
68+
return (
69+
<th className="border border-gray-100 p-3" key={key}>
70+
{format(value, 'E')}
71+
</th>
72+
)
73+
})}
74+
</tr>
75+
</thead>
76+
<tbody>
77+
{body.value.map((week) => {
78+
const { key, value: days } = week
79+
80+
return (
81+
<tr key={key}>
82+
{days.map((day) => {
83+
const { key, value, isCurrentDate, isCurrentMonth } = day
84+
85+
return (
86+
<td
87+
key={key}
88+
className={cx(
89+
'border border-gray-100 p-6 text-center text-xl',
90+
{
91+
'bg-blue-200 animate-pulse': isCurrentDate,
92+
'opacity-20': !isCurrentMonth,
93+
},
94+
)}
95+
>
96+
{getDate(value)}
97+
</td>
98+
)
99+
})}
100+
</tr>
101+
)
102+
})}
103+
</tbody>
104+
</table>
105+
106+
<button
107+
onClick={() => {
108+
window.location.href = '/getting-started/overview'
109+
}}
110+
className="block mt-20 mx-auto p-4 rounded bg-gradient-to-r from-indigo-400 via-purple-500 to-blue-500 text-white"
111+
>
112+
Go to <span className="italic font-bold">Getting Started</span>
113+
</button>
114+
</>
115+
)
116+
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { css } from '@emotion/react'
2+
import React from 'react'
3+
4+
export function Logo() {
5+
return (
6+
<div
7+
css={css`
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
height: 100%;
12+
`}
13+
>
14+
<img
15+
css={css`
16+
display: inline-block;
17+
margin-right: 8px;
18+
height: 36px;
19+
`}
20+
src="/icon/logo.png"
21+
alt="react-calendar Logo"
22+
/>
23+
<span
24+
css={css`
25+
font-weight: bolder;
26+
`}
27+
>
28+
React Calendar
29+
</span>
30+
</div>
31+
)
32+
}

‎docs/src/installation.mdx‎ renamed to ‎docs/src/getting-started/installation.mdx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
name: Installation
3-
route: /installation
3+
route: /getting-started/installation
4+
menu: Getting Started
45
---
56

67
# Installation
@@ -16,7 +17,14 @@ npm install --save @veccu/react-calendar
1617
```json
1718
"peerDependencies": {
1819
"date-fns": ">= 2",
19-
"react": ">= 16.8",
20-
"react-dom": ">= 16.8"
20+
"react": "^16.8.0 || ^17.0.0"
21+
},
22+
"peerDependenciesMeta": {
23+
"react-dom": {
24+
"optional": true
25+
},
26+
"react-native": {
27+
"optional": true
28+
}
2129
}
2230
```

0 commit comments

Comments
 (0)