Skip to content

Commit 7ac98c6

Browse files
JefteCaroJefteCaro
committed
Initial development playground
1 parent 5c65dbc commit 7ac98c6

14 files changed

+574
-103
lines changed

Diff for: ‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# Folders
22
dist/
33
assets/
4+
pages/
5+
test-components/
46

57
# Files
68
README.md

Diff for: ‎.eslintrc.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"plugin:react/recommended",
1111
"plugin:@typescript-eslint/recommended",
1212
"plugin:prettier/recommended",
13-
"plugin:react-hooks/recommended"
13+
"plugin:react-hooks/recommended",
14+
"next/core-web-vitals"
1415
],
1516
"overrides": [],
1617
"parser": "@typescript-eslint/parser",
@@ -26,7 +27,7 @@
2627
"version": "detect"
2728
}
2829
},
29-
"plugins": ["react", "@typescript-eslint", "import", "prettier"],
30+
"plugins": ["react", "@typescript-eslint", "import", "prettier", "@next/eslint-plugin-next"],
3031
"rules": {
3132
"indent": "off",
3233
"linebreak-style": ["error", "unix"],
@@ -47,6 +48,7 @@
4748
"react/react-in-jsx-scope": "off",
4849
"react-hooks/rules-of-hooks": "error",
4950
"react-hooks/exhaustive-deps": "warn",
50-
"@typescript-eslint/no-var-requires": 0
51+
"@typescript-eslint/no-var-requires": 0,
52+
"prettier/prettier": ["error", { "endOfLine": "auto" }, { "usePrettierrc": true }]
5153
}
5254
}

Diff for: ‎.gitignore

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# See https://help.github.com/ignore-files/ for more about ignoring files.
22

33
# dependencies
4-
node_modules
5-
package-lock.json
6-
yarn.lock
4+
/node_modules/
5+
/package-lock.json
6+
/yarn.lock
7+
/.next/
78

89
# test coverage
910
coverage

Diff for: ‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Folders
22
dist/
33
assets/
4+
.next/
45

56
# Files
67
README.md

Diff for: ‎next-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

Diff for: ‎next.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true
4+
};
5+
6+
module.exports = nextConfig;

Diff for: ‎package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
"pret": "prettier -c .",
1616
"pret:fix": "prettier -w .",
1717
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
18-
"build": "npm run pret && npm run lint && npm run clean && rollup -c"
18+
"build": "npm run pret && npm run lint && npm run clean && rollup -c",
19+
"dev": "next dev -p 8888"
1920
},
2021
"repository": {
2122
"type": "git",
@@ -46,16 +47,18 @@
4647
"@typescript-eslint/eslint-plugin": "^5.45.0",
4748
"@typescript-eslint/parser": "^5.45.0",
4849
"autoprefixer": "^10.4.13",
49-
"dayjs": "^1.11.6",
50+
"dayjs": "^1.11.7",
5051
"eslint": "^8.29.0",
5152
"eslint-config-prettier": "^8.5.0",
5253
"eslint-plugin-import": "^2.26.0",
5354
"eslint-plugin-prettier": "^4.2.1",
5455
"eslint-plugin-react": "^7.31.11",
5556
"eslint-plugin-react-hooks": "^4.6.0",
57+
"next": "^13.1.1",
5658
"postcss": "^8.4.19",
5759
"prettier": "^2.8.0",
5860
"react": "^18.2.0",
61+
"react-dom": "^18.2.0",
5962
"rollup": "^2.77.2",
6063
"tailwindcss": "^3.2.4",
6164
"tslib": "^2.4.0",

Diff for: ‎pages/_app.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import "../styles/globals.css";
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />;
5+
}
6+
7+
export default MyApp;

Diff for: ‎pages/index.js

+283
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
import Datepicker from "../src";
2+
import { useState } from "react";
3+
import { COLORS } from "../src/constants";
4+
import dayjs from "dayjs";
5+
import Head from "next/head";
6+
7+
export default function Playground() {
8+
const [value, setValue] = useState({
9+
startDate: null,
10+
endDate: null
11+
});
12+
const [primaryColor, setPrimaryColor] = useState("blue");
13+
const [useRange, setUseRange] = useState(true);
14+
const [showFooter, setShowFooter] = useState(false);
15+
const [showShortcuts, setShowShortcuts] = useState(false);
16+
const [configs, setConfigs] = useState(null);
17+
const [asSingle, setAsSingle] = useState(false);
18+
const [placeholder, setPlaceholder] = useState("");
19+
const [separator, setSeparator] = useState("~");
20+
const [i18n, setI18n] = useState("en");
21+
const [disabled, setDisabled] = useState(false);
22+
const [inputClassName, setInputClassName] = useState("");
23+
const [containerClassName, setContainerClassName] = useState("");
24+
const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
25+
const [readOnly, setReadOnly] = useState(false);
26+
const [startFrom, setStartFrom] = useState("2023-03-01");
27+
28+
return (
29+
<div className="px-4 py-8">
30+
<Head>
31+
<title>react-tailwindcss-datepicker PlayGround</title>
32+
</Head>
33+
<h1 className="text-center font-semibold text-xl">
34+
<pre className="text-gray-600 text-lg bg-gray-200 max-w-max mx-auto px-2 rounded">
35+
react-tailwindcss-datepicker
36+
</pre>
37+
<span className="text-gray-700">PlayGround</span>
38+
</h1>
39+
40+
<div className="max-w-md mx-auto my-4">
41+
<Datepicker
42+
value={value}
43+
primaryColor={primaryColor}
44+
onChange={setValue}
45+
useRange={useRange}
46+
showFooter={showFooter}
47+
showShortcuts={showShortcuts}
48+
configs={configs}
49+
asSingle={asSingle}
50+
placeholder={placeholder}
51+
separator={separator}
52+
startFrom={
53+
startFrom.length && dayjs(startFrom).isValid() ? new Date(startFrom) : null
54+
}
55+
i18n={i18n}
56+
disabled={disabled}
57+
inputClassName={inputClassName}
58+
containerClassName={containerClassName}
59+
displayFormat={displayFormat}
60+
readOnly={readOnly}
61+
/>
62+
</div>
63+
64+
<div className="py-4 max-w-3xl mx-auto flex flex-row flex-wrap">
65+
<div className="w-full sm:w-1/3 pr-2 flex flex-row flex-wrap sm:flex-col">
66+
<div className="mb-2 w-1/2 sm:w-full">
67+
<div className="inline-flex items-center">
68+
<input
69+
type="checkbox"
70+
className="mr-2 rounded"
71+
id="useRange"
72+
checked={useRange}
73+
onChange={e => setUseRange(e.target.checked)}
74+
/>
75+
<label className="block" htmlFor="useRange">
76+
Use Range
77+
</label>
78+
</div>
79+
</div>
80+
<div className="mb-2 w-1/2 sm:w-full">
81+
<div className="inline-flex items-center">
82+
<input
83+
type="checkbox"
84+
className="mr-2 rounded"
85+
id="showFooter"
86+
checked={showFooter}
87+
onChange={e => setShowFooter(e.target.checked)}
88+
/>
89+
<label className="block" htmlFor="showFooter">
90+
Show Footer
91+
</label>
92+
</div>
93+
</div>
94+
<div className="mb-2 w-1/2 sm:w-full">
95+
<div className="inline-flex items-center">
96+
<input
97+
type="checkbox"
98+
className="mr-2 rounded"
99+
id="showShortcuts"
100+
checked={showShortcuts}
101+
onChange={e => setShowShortcuts(e.target.checked)}
102+
/>
103+
<label className="block" htmlFor="showShortcuts">
104+
Show Shortcuts
105+
</label>
106+
</div>
107+
</div>
108+
<div className="mb-2 w-1/2 sm:w-full">
109+
<div className="inline-flex items-center">
110+
<input
111+
type="checkbox"
112+
className="mr-2 rounded"
113+
id="asSingle"
114+
checked={asSingle}
115+
onChange={e => setAsSingle(e.target.checked)}
116+
/>
117+
<label className="block" htmlFor="asSingle">
118+
As Single
119+
</label>
120+
</div>
121+
</div>
122+
<div className="mb-2 w-1/2 sm:w-full">
123+
<div className="inline-flex items-center">
124+
<input
125+
type="checkbox"
126+
className="mr-2 rounded"
127+
id="disabled"
128+
checked={disabled}
129+
onChange={e => setDisabled(e.target.checked)}
130+
/>
131+
<label className="block" htmlFor="disabled">
132+
Disabled
133+
</label>
134+
</div>
135+
</div>
136+
<div className="mb-2 w-1/2 sm:w-full">
137+
<div className="inline-flex items-center">
138+
<input
139+
type="checkbox"
140+
className="mr-2 rounded"
141+
id="readOnly"
142+
checked={readOnly}
143+
onChange={e => setReadOnly(e.target.checked)}
144+
/>
145+
<label className="block" htmlFor="readOnly">
146+
Read Only
147+
</label>
148+
</div>
149+
</div>
150+
</div>
151+
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
152+
<div className="mb-2">
153+
<label className="block" htmlFor="primaryColor">
154+
Primary Color
155+
</label>
156+
<select
157+
className="rounded block w-full border-gray-200 border px-4 py-2"
158+
id="primaryColor"
159+
value={primaryColor}
160+
onChange={e => {
161+
setPrimaryColor(e.target.value);
162+
}}
163+
>
164+
{COLORS.map((color, i) => (
165+
<option key={i} value={color}>
166+
{color}
167+
</option>
168+
))}
169+
</select>
170+
</div>
171+
<div className="mb-2">
172+
<label className="block" htmlFor="placeholder">
173+
Placeholder
174+
</label>
175+
<input
176+
className="rounded border px-4 py-2 w-full border-gray-200"
177+
id="placeholder"
178+
value={placeholder}
179+
onChange={e => {
180+
setPlaceholder(e.target.value);
181+
}}
182+
/>
183+
</div>
184+
<div className="mb-2">
185+
<label className="block" htmlFor="separator">
186+
Separator
187+
</label>
188+
<input
189+
className="rounded border px-4 py-2 w-full border-gray-200"
190+
id="separator"
191+
value={separator}
192+
onChange={e => {
193+
setSeparator(e.target.value);
194+
}}
195+
/>
196+
</div>
197+
<div className="mb-2">
198+
<label className="block" htmlFor="startFrom">
199+
Start From
200+
</label>
201+
<input
202+
className="rounded border px-4 py-2 w-full border-gray-200"
203+
id="startFrom"
204+
value={startFrom}
205+
onChange={e => {
206+
setStartFrom(e.target.value);
207+
}}
208+
/>
209+
</div>
210+
</div>
211+
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
212+
<div className="mb-2">
213+
<label className="block" htmlFor="i18n">
214+
i18n
215+
</label>
216+
<input
217+
className="rounded border px-4 py-2 w-full border-gray-200"
218+
id="i18n"
219+
value={i18n}
220+
onChange={e => {
221+
setI18n(e.target.value);
222+
}}
223+
/>
224+
</div>
225+
<div className="mb-2">
226+
<label className="block" htmlFor="displayFormat">
227+
Display Format
228+
</label>
229+
<input
230+
className="rounded border px-4 py-2 w-full border-gray-200"
231+
id="displayFormat"
232+
value={displayFormat}
233+
onChange={e => {
234+
setDisplayFormat(e.target.value);
235+
}}
236+
/>
237+
</div>
238+
<div className="mb-2">
239+
<label className="block" htmlFor="inputClassName">
240+
Input Class
241+
</label>
242+
<input
243+
className="rounded border px-4 py-2 w-full border-gray-200"
244+
id="inputClassName"
245+
value={inputClassName}
246+
onChange={e => {
247+
setInputClassName(e.target.value);
248+
}}
249+
/>
250+
</div>
251+
<div className="mb-2">
252+
<label className="block" htmlFor="containerClassName">
253+
Container Class
254+
</label>
255+
<input
256+
className="rounded border px-4 py-2 w-full border-gray-200"
257+
id="containerClassName"
258+
value={containerClassName}
259+
onChange={e => {
260+
setContainerClassName(e.target.value);
261+
}}
262+
/>
263+
</div>
264+
</div>
265+
</div>
266+
<div className="flex flex-row flex-wrap items-center justify-center w-full">
267+
<a
268+
href="https://github.com/onesine/react-tailwindcss-datepicker"
269+
className="block text-gray-700 hover:text-gray-600"
270+
>
271+
<svg
272+
xmlns="http://www.w3.org/2000/svg"
273+
fill="currentColor"
274+
className="w-6 h-6"
275+
viewBox="0 0 16 16"
276+
>
277+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
278+
</svg>
279+
</a>
280+
</div>
281+
</div>
282+
);
283+
}

0 commit comments

Comments
 (0)