Skip to content

Commit 18e3e62

Browse files
BunlongBunlong
committed
Add create-next-app
1 parent b6de551 commit 18e3e62

File tree

12 files changed

+386
-8
lines changed

12 files changed

+386
-8
lines changed

‎.gitignore

+3-8
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,8 @@ package-lock.json
2727
/docs/out
2828

2929
/supports/create-react-app/node_modules
30-
/supports/create-react-app/.next
3130
/supports/create-react-app/package-lock.json
3231

33-
/supports/default/node_modules
34-
/supports/default/.next
35-
/supports/default/package-lock.json
36-
37-
/supports/typescript/node_modules
38-
/supports/typescript/.next
39-
/supports/typescript/package-lock.json
32+
/supports/create-next-app/node_modules
33+
/supports/create-next-app/package-lock.json
34+
/supports/create-next-app/.next

‎supports/create-next-app/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16+
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18+
19+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎supports/create-next-app/next-env.d.ts

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

‎supports/create-next-app/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "react-papaparse",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"dependencies": {
11+
"next": "11.1.0",
12+
"react": "17.0.2",
13+
"react-dom": "17.0.2",
14+
"react-papaparse": "file:../.."
15+
},
16+
"devDependencies": {
17+
"@types/react": "17.0.19",
18+
"typescript": "4.4.2"
19+
}
20+
}

‎supports/create-next-app/pages/_app.tsx

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

‎supports/create-next-app/pages/api/hello.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
import type { NextApiRequest, NextApiResponse } from 'next'
3+
4+
type Data = {
5+
name: string
6+
}
7+
8+
export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
9+
res.status(200).json({ name: 'John Doe' })
10+
}

‎supports/create-next-app/pages/index.tsx

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React, { useState } from 'react'
2+
import { CSVReader, CSVDownloader } from 'react-papaparse'
3+
4+
export default function Home() {
5+
const [isReset, setIsReset] = useState<boolean>(false);
6+
7+
const handleReset = () => {
8+
setIsReset(!isReset)
9+
}
10+
11+
const handleOnDrop = (data: any) => {
12+
console.log('---------------------------')
13+
console.log(data)
14+
console.log('---------------------------')
15+
}
16+
17+
const handleOnError = (
18+
err: any,
19+
// file,
20+
// inputElem,
21+
// reason
22+
) => {
23+
console.log(err)
24+
}
25+
26+
const handleOnRemoveFile = (data: any) => {
27+
console.log('---------------------------')
28+
console.log(data)
29+
console.log('---------------------------')
30+
}
31+
32+
return (
33+
<>
34+
<CSVReader
35+
isReset={isReset}
36+
onDrop={handleOnDrop}
37+
onError={handleOnError}
38+
// noDrag
39+
addRemoveButton
40+
onRemoveFile={handleOnRemoveFile}
41+
style={{
42+
dropArea: {
43+
borderColor: 'pink',
44+
borderRadius: 20,
45+
},
46+
dropAreaActive: {
47+
borderColor: 'red',
48+
},
49+
dropFile: {
50+
width: 100,
51+
height: 120,
52+
background: '#ccc',
53+
},
54+
fileSizeInfo: {
55+
color: '#fff',
56+
backgroundColor: '#000',
57+
borderRadius: 3,
58+
lineHeight: 1,
59+
marginBottom: '0.5em',
60+
padding: '0 0.4em',
61+
},
62+
fileNameInfo: {
63+
color: '#fff',
64+
backgroundColor: '#eee',
65+
borderRadius: 3,
66+
fontSize: 14,
67+
lineHeight: 1,
68+
padding: '0 0.4em',
69+
},
70+
removeButton: {
71+
color: 'blue',
72+
},
73+
progressBar: {
74+
backgroundColor: 'pink',
75+
},
76+
}}
77+
>
78+
<span>Click to upload.</span>
79+
</CSVReader>
80+
<button onClick={() => handleReset()}>Reset</button>
81+
<CSVDownloader
82+
data={[
83+
{
84+
"Column 1": "1-1",
85+
"Column 2": "1-2",
86+
"Column 3": "1-3",
87+
"Column 4": "1-4",
88+
},
89+
{
90+
"Column 1": "2-1",
91+
"Column 2": "2-2",
92+
"Column 3": "2-3",
93+
"Column 4": "2-4",
94+
},
95+
{
96+
"Column 1": "3-1",
97+
"Column 2": "3-2",
98+
"Column 3": "3-3",
99+
"Column 4": "3-4",
100+
},
101+
{
102+
"Column 1": 4,
103+
"Column 2": 5,
104+
"Column 3": 6,
105+
"Column 4": 7,
106+
},
107+
]}
108+
type="button"
109+
filename={'filename'}
110+
config={
111+
{
112+
delimiter: ';',
113+
}
114+
}
115+
>
116+
Download
117+
</CSVDownloader>
118+
<CSVDownloader
119+
data={`Column 1,Column 2,Column 3,Column 4
120+
1-1,1-2,1-3,1-4
121+
#2-1,मुकेश,ខ្ញុំ,2-4
122+
3-1,3-2,អ្នក,3-4
123+
4,5,6,7`}
124+
filename={'filename'}
125+
bom={true}
126+
>
127+
Download
128+
</CSVDownloader>
129+
<CSVDownloader
130+
filename={'filename'}
131+
data={() => {
132+
return [
133+
{
134+
"Column 1": "1-1",
135+
"Column 2": "1-2",
136+
"Column 3": "1-3",
137+
"Column 4": "1-4",
138+
}
139+
]}
140+
}
141+
>
142+
Download
143+
</CSVDownloader>
144+
</>
145+
)
146+
}

‎supports/create-next-app/public/favicon.ico

14.7 KB
Binary file not shown.

‎supports/create-next-app/public/vercel.svg

+4
Loading

‎supports/create-next-app/styles/Home.module.css

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.container {
2+
min-height: 100vh;
3+
padding: 0 0.5rem;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
}
10+
11+
.main {
12+
padding: 5rem 0;
13+
flex: 1;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
.footer {
21+
width: 100%;
22+
height: 100px;
23+
border-top: 1px solid #eaeaea;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
}
28+
29+
.footer a {
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
flex-grow: 1;
34+
}
35+
36+
.title a {
37+
color: #0070f3;
38+
text-decoration: none;
39+
}
40+
41+
.title a:hover,
42+
.title a:focus,
43+
.title a:active {
44+
text-decoration: underline;
45+
}
46+
47+
.title {
48+
margin: 0;
49+
line-height: 1.15;
50+
font-size: 4rem;
51+
}
52+
53+
.title,
54+
.description {
55+
text-align: center;
56+
}
57+
58+
.description {
59+
line-height: 1.5;
60+
font-size: 1.5rem;
61+
}
62+
63+
.code {
64+
background: #fafafa;
65+
border-radius: 5px;
66+
padding: 0.75rem;
67+
font-size: 1.1rem;
68+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
69+
Bitstream Vera Sans Mono, Courier New, monospace;
70+
}
71+
72+
.grid {
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
flex-wrap: wrap;
77+
max-width: 800px;
78+
margin-top: 3rem;
79+
}
80+
81+
.card {
82+
margin: 1rem;
83+
padding: 1.5rem;
84+
text-align: left;
85+
color: inherit;
86+
text-decoration: none;
87+
border: 1px solid #eaeaea;
88+
border-radius: 10px;
89+
transition: color 0.15s ease, border-color 0.15s ease;
90+
width: 45%;
91+
}
92+
93+
.card:hover,
94+
.card:focus,
95+
.card:active {
96+
color: #0070f3;
97+
border-color: #0070f3;
98+
}
99+
100+
.card h2 {
101+
margin: 0 0 1rem 0;
102+
font-size: 1.5rem;
103+
}
104+
105+
.card p {
106+
margin: 0;
107+
font-size: 1.25rem;
108+
line-height: 1.5;
109+
}
110+
111+
.logo {
112+
height: 1em;
113+
margin-left: 0.5rem;
114+
}
115+
116+
@media (max-width: 600px) {
117+
.grid {
118+
width: 100%;
119+
flex-direction: column;
120+
}
121+
}

‎supports/create-next-app/styles/globals.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7+
}
8+
9+
a {
10+
color: inherit;
11+
text-decoration: none;
12+
}
13+
14+
* {
15+
box-sizing: border-box;
16+
}

0 commit comments

Comments
 (0)