Skip to content

Commit e779207

Browse files
jason89521jason89521
authored
Merge pull request #21 from jason89521/doc-sites/docusaurus
2 parents 45f099c + 9265724 commit e779207

48 files changed

Lines changed: 11995 additions & 5261 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎doc-site/.gitignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎doc-site/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

‎doc-site/babel.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

‎doc-site/docs/index.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Introduction
3+
---
4+
5+
This project provides some useful react component with zero style so you can build some fully customized components based on the components this project provides.
6+
7+
- [React Typist Component](./react-typist-component)
8+
- [React Use Calendar Component](./react-use-calendar-component)

website/contents/docs/react-typist-component.mdx renamed to doc-site/docs/react-typist-component/index.mdx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
name: react-typist-component
3-
title: React Typist Component
4-
intro: A react component for creating typewritter effect by setting up its children directy.
2+
title: Typist
53
---
64

5+
# React Typist Component
6+
77
## Install
88

99
```bash
@@ -12,16 +12,6 @@ npm install react-typist-component
1212
yarn add react-typist-component
1313
```
1414

15-
## Features
16-
17-
### Support Looping
18-
19-
<Loop />
20-
21-
### Support Pausing
22-
23-
<Pause />
24-
2515
## Examples
2616

2717
```jsx

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

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Use Calendar
3+
---
4+
5+
# React Use Calendar Component
6+
7+
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.
8+
9+
## Install
10+
11+
```sh
12+
npm install react-use-calendar-component
13+
```
14+
15+
## Usage
16+
17+
```tsx
18+
import useCalendarComponent from 'react-use-calendar-component';
19+
20+
const Calendar = () => {
21+
const [value, setValue] = useState(new Date());
22+
const {
23+
selectedDates,
24+
displayedYear,
25+
displayedMonth,
26+
changeDisplayedYear,
27+
changeDisplayedMonth,
28+
getDateCellInfos,
29+
} = useCalendarComponent({
30+
initialDisplayedDate: new Date(2022, 10, 10),
31+
selectType: 'single',
32+
value,
33+
onChange: setValue,
34+
});
35+
36+
return (
37+
<div>
38+
{/* Display and control the year/month */}
39+
<CalendarHeader
40+
onYearClick={changeDisplayedYear}
41+
onMonthClick={changeDisplayedMonth}
42+
year={displayedYear}
43+
month={displayedMonth}
44+
/>
45+
<CalendarBody>
46+
{/* Use these function to display and control your calendar cells*/}
47+
{getDateCellInfos().map(({key, ...info}) => {
48+
return <CalendarCell key={key} {...info}>
49+
})}
50+
</CalendarBody>
51+
</div>
52+
);
53+
};
54+
```
55+
56+
## API Reference
57+
58+
```ts
59+
const {
60+
selectedDates,
61+
displayedYear,
62+
displayedMonth,
63+
changeDisplayedYear,
64+
changeDisplayedMonth,
65+
getDateCellInfos,
66+
} = useCalendarComponent({ initialDisplayedDate, selectType, value, onChange });
67+
```
68+
69+
### Args
70+
71+
#### `initialDisplayedDate`
72+
73+
This value will be used to generate the date cells at beginning. Its default value is `new Date()`.
74+
75+
#### `selectType`
76+
77+
The selection type of the calendar, currently support `'single' | 'multiple'`. Its default value is `'single'`.
78+
79+
> This option must be set if you don't want to use `single` type.
80+
81+
#### `value`
82+
83+
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[]`.
84+
85+
#### `onChange`
86+
87+
```ts
88+
type OnChange: (value: Date|Date[]) => void
89+
```
90+
91+
For `single` selection type, the `value` is a `Date` instance. For `multiple` selection type, the `value` is an array of `Date` instances.
92+
93+
### Returns
94+
95+
#### `selectedDates`
96+
97+
An array contains the `Date` instances of all selected date.
98+
99+
#### `displayedYear`
100+
101+
The year of the calendar which should be rendered.
102+
103+
#### `displayedMonth`
104+
105+
The month of the calendar which should be rendered.
106+
107+
#### `changeDisplayedYear`
108+
109+
Call this function to add a value to `displayedYear`.
110+
111+
#### `changeDisplayedMonth`
112+
113+
Call this function to add a value to `displayedMonth`.
114+
115+
#### `getDateCellInfos`
116+
117+
```ts
118+
interface DateCellInfo {
119+
key: string;
120+
year: number;
121+
month: number;
122+
dayOfMonth: number;
123+
dayOfWeek: number;
124+
isToday: boolean;
125+
isSelected: boolean;
126+
monthStatus: 'current' | 'next' | 'previous';
127+
selectThisDate: (options?: SelectDateOptions) => void;
128+
}
129+
```
130+
131+
This function returns an array of `DateCellInfo`. It can be used to render your calendar.

‎doc-site/docusaurus.config.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* eslint-disable no-undef */
2+
/* eslint-disable @typescript-eslint/no-var-requires */
3+
// @ts-check
4+
// Note: type annotations allow type checking and IDEs autocompletion
5+
6+
const lightCodeTheme = require('prism-react-renderer/themes/github');
7+
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
8+
9+
/** @type {import('@docusaurus/types').Config} */
10+
const config = {
11+
title: 'React Components',
12+
tagline: 'React components collection.',
13+
url: 'https://your-docusaurus-test-site.com',
14+
baseUrl: '/',
15+
onBrokenLinks: 'throw',
16+
onBrokenMarkdownLinks: 'warn',
17+
favicon: 'img/favicon.ico',
18+
19+
// GitHub pages deployment config.
20+
// If you aren't using GitHub pages, you don't need these.
21+
organizationName: 'facebook', // Usually your GitHub org/user name.
22+
projectName: 'docusaurus', // Usually your repo name.
23+
24+
// Even if you don't use internalization, you can use this field to set useful
25+
// metadata like html lang. For example, if your site is Chinese, you may want
26+
// to replace "en" with "zh-Hans".
27+
i18n: {
28+
defaultLocale: 'en',
29+
locales: ['en'],
30+
},
31+
32+
presets: [
33+
[
34+
'classic',
35+
/** @type {import('@docusaurus/preset-classic').Options} */
36+
({
37+
docs: {
38+
sidebarPath: require.resolve('./sidebars.js'),
39+
routeBasePath: '/',
40+
},
41+
theme: {
42+
customCss: require.resolve('./src/css/custom.css'),
43+
},
44+
}),
45+
],
46+
],
47+
48+
themeConfig:
49+
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
50+
({
51+
navbar: {
52+
title: 'React Components',
53+
items: [
54+
{
55+
href: 'https://github.com/facebook/docusaurus',
56+
label: 'GitHub',
57+
position: 'right',
58+
},
59+
],
60+
},
61+
footer: {
62+
style: 'dark',
63+
copyright: `Copyright © ${new Date().getFullYear()} Xuan. Built with Docusaurus.`,
64+
},
65+
prism: {
66+
theme: lightCodeTheme,
67+
darkTheme: darkCodeTheme,
68+
},
69+
}),
70+
};
71+
72+
module.exports = config;

‎doc-site/package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "doc-site",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"docusaurus": "docusaurus",
7+
"start": "docusaurus start",
8+
"build": "docusaurus build",
9+
"swizzle": "docusaurus swizzle",
10+
"deploy": "docusaurus deploy",
11+
"clear": "docusaurus clear",
12+
"serve": "docusaurus serve",
13+
"write-translations": "docusaurus write-translations",
14+
"write-heading-ids": "docusaurus write-heading-ids",
15+
"typecheck": "tsc"
16+
},
17+
"dependencies": {
18+
"@docusaurus/core": "2.1.0",
19+
"@docusaurus/preset-classic": "2.1.0",
20+
"@mdx-js/react": "^1.6.22",
21+
"clsx": "^1.2.1",
22+
"prism-react-renderer": "^1.3.5",
23+
"react": "^17.0.2",
24+
"react-dom": "^17.0.2",
25+
"react-typist-component": "workspace:*"
26+
},
27+
"devDependencies": {
28+
"@docusaurus/module-type-aliases": "2.1.0",
29+
"@tsconfig/docusaurus": "^1.0.5",
30+
"typescript": "^4.7.4"
31+
},
32+
"browserslist": {
33+
"production": [
34+
">0.5%",
35+
"not dead",
36+
"not op_mini all"
37+
],
38+
"development": [
39+
"last 1 chrome version",
40+
"last 1 firefox version",
41+
"last 1 safari version"
42+
]
43+
},
44+
"engines": {
45+
"node": ">=16.14"
46+
}
47+
}

‎doc-site/sidebars.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Creating a sidebar enables you to:
3+
- create an ordered group of docs
4+
- render a sidebar for each doc of that group
5+
- provide next/previous navigation
6+
7+
The sidebars can be generated from the filesystem, or explicitly defined here.
8+
9+
Create as many sidebars as you want.
10+
*/
11+
12+
// @ts-check
13+
14+
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
15+
const sidebars = {
16+
// By default, Docusaurus generates a sidebar from the docs folder structure
17+
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
18+
19+
// But you can create a sidebar manually
20+
/*
21+
tutorialSidebar: [
22+
'intro',
23+
'hello',
24+
{
25+
type: 'category',
26+
label: 'Tutorial',
27+
items: ['tutorial-basics/create-a-document'],
28+
},
29+
],
30+
*/
31+
};
32+
33+
module.exports = sidebars;

0 commit comments

Comments
 (0)