Skip to content

Commit e787bee

Browse files
jason89521jason89521
authored
Merge pull request #18 from jason89521/react-date-time-picker-component
2 parents 9dd23c2 + 35331ea commit e787bee

48 files changed

Lines changed: 1053 additions & 3 deletions

Some content is hidden

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

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
# React Components Monorepo
22

33
- [react-typist-component](./packages/react-typist-component/README.md)
4+
- [react-use-calendar-component](./packages//react-use-calendar-component/README.md)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"test": "pnpm -r --filter ./packages/* run test",
1616
"dev:website": "pnpm build:packages && pnpm --filter ./website dev",
1717
"build:website": "pnpm build:packages && pnpm --filter ./website run build",
18-
"build:packages": "pnpm -r --filter ./packages/* run build:package",
18+
"build:packages": "pnpm -r --filter './packages/*' run build:package",
1919
"prepublishOnly": "pnpm build:lib"
2020
},
2121
"devDependencies": {

‎packages/react-use-calendar-component/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/react-use-calendar-component/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# React Use Calendar Component
2+
3+
This project is aimed to provide an easy-to-use API interface for those people who want to build their own calendar component with custom style.
4+
5+
## Caveat
6+
7+
This package is still under development, the API interface may change frequently.
8+
9+
## Todo
10+
11+
- [x] Generate 42 date cell information
12+
- [x] Change displayed year/month when selected date is change
13+
- [x] Select multiple dates
14+
- [ ] Select with range
15+
- [ ] Support disabled date
16+
- [ ] Support displaying two calendar
17+
- [ ] Support week, month, year selection
18+
19+
## Examples
20+
21+
- [Single Mode](./src/app/components/Examples/Single.tsx)
22+
- [Multiple Mode](./src/app/components/Examples/Multiple.tsx)

‎packages/react-use-calendar-component/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./src/app/main.tsx"></script>
13+
</body>
14+
15+
</html>

‎packages/react-use-calendar-component/jest-setup.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom/extend-expect';

‎packages/react-use-calendar-component/jest.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
2+
export default {
3+
preset: 'ts-jest',
4+
testEnvironment: 'jsdom',
5+
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
6+
};

‎packages/react-use-calendar-component/package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "react-use-calendar-component",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"test": "jest",
8+
"test:watch": "jest --watch",
9+
"build:website": "tsc && vite build",
10+
"build:types": "tsc --project tsconfig.lib.json",
11+
"build:package": "vite build --mode lib && pnpm build:types",
12+
"prepublishOnly": "pnpm build:package",
13+
"preview": "vite preview"
14+
},
15+
"license": "MIT",
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/jason89521/react-components-monorepo"
19+
},
20+
"files": [
21+
"dist"
22+
],
23+
"types": "./dist/types/index.d.ts",
24+
"main": "./dist/react-use-calendar-component.umd.cjs",
25+
"module": "./dist/react-use-calendar-component.js",
26+
"devDependencies": {
27+
"@testing-library/jest-dom": "^5.16.5",
28+
"@testing-library/react": "^13.4.0",
29+
"@testing-library/user-event": "14.4.3",
30+
"@types/jest": "^29.0.3",
31+
"@types/react": "^18.0.20",
32+
"@types/react-dom": "^18.0.6",
33+
"@types/testing-library__jest-dom": "5.14.5",
34+
"@vitejs/plugin-react": "^2.1.0",
35+
"autoprefixer": "^10.4.11",
36+
"jest": "^29.0.3",
37+
"postcss": "^8.4.16",
38+
"react": "^18.2.0",
39+
"react-dom": "^18.2.0",
40+
"tailwindcss": "^3.1.8",
41+
"ts-jest": "^29.0.1",
42+
"typescript": "^4.8.3",
43+
"vite": "^3.1.3"
44+
},
45+
"peerDependencies": {
46+
"react": ">=18.0.0"
47+
}
48+
}

‎packages/react-use-calendar-component/postcss.config.cjs‎

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+
}

‎packages/react-use-calendar-component/src/app/App.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
}
13+
.logo:hover {
14+
filter: drop-shadow(0 0 2em #646cffaa);
15+
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
19+
20+
@keyframes logo-spin {
21+
from {
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
@media (prefers-reduced-motion: no-preference) {
30+
a:nth-of-type(2) .logo {
31+
animation: logo-spin infinite 20s linear;
32+
}
33+
}
34+
35+
.card {
36+
padding: 2em;
37+
}
38+
39+
.read-the-docs {
40+
color: #888;
41+
}

0 commit comments

Comments
 (0)