Skip to content

Commit 709875e

Browse files
Davicho-DevDavicho-Dev
committed
CREATE: Base project; ADD: Typescript;
Signed-off-by: HarmonySkull <[email protected]>
1 parent b3ead22 commit 709875e

File tree

14 files changed

+247
-247
lines changed

14 files changed

+247
-247
lines changed

‎.gitignore

Lines changed: 14 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,24 @@
1-
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2-
3-
# dependencies
4-
/node_modules
5-
/.pnp
6-
.pnp.js
7-
8-
# testing
9-
/coverage
10-
11-
# production
12-
/build
13-
14-
# misc
15-
.DS_Store
16-
.env.local
17-
.env.development.local
18-
.env.test.local
19-
.env.production.local
20-
21-
npm-debug.log*
22-
yarn-debug.log*
23-
yarn-error.log*
24-
### Node template
251
# Logs
262
logs
273
*.log
284
npm-debug.log*
295
yarn-debug.log*
306
yarn-error.log*
7+
pnpm-debug.log*
318
lerna-debug.log*
329

33-
# Diagnostic reports (https://nodejs.org/api/report.html)
34-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
35-
36-
# Runtime data
37-
pids
38-
*.pid
39-
*.seed
40-
*.pid.lock
41-
42-
# Directory for instrumented libs generated by jscoverage/JSCover
43-
lib-cov
44-
45-
# Coverage directory used by tools like istanbul
46-
coverage
47-
*.lcov
48-
49-
# nyc test coverage
50-
.nyc_output
51-
52-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
53-
.grunt
54-
55-
# Bower dependency directory (https://bower.io/)
56-
bower_components
57-
58-
# node-waf configuration
59-
.lock-wscript
60-
61-
# Compiled binary addons (https://nodejs.org/api/addons.html)
62-
build/Release
63-
64-
# Dependency directories
65-
node_modules/
66-
jspm_packages/
67-
68-
# Snowpack dependency directory (https://snowpack.dev/)
69-
web_modules/
70-
71-
# TypeScript cache
72-
*.tsbuildinfo
73-
74-
# Optional npm cache directory
75-
.npm
76-
77-
# Optional eslint cache
78-
.eslintcache
79-
80-
# Microbundle cache
81-
.rpt2_cache/
82-
.rts2_cache_cjs/
83-
.rts2_cache_es/
84-
.rts2_cache_umd/
85-
86-
# Optional REPL history
87-
.node_repl_history
88-
89-
# Output of 'npm pack'
90-
*.tgz
91-
92-
# Yarn Integrity file
93-
.yarn-integrity
94-
95-
# dotenv environment variables file
96-
.env
97-
.env.test
98-
99-
# parcel-bundler cache (https://parceljs.org/)
100-
.cache
101-
.parcel-cache
102-
103-
# Next.js build output
104-
.next
105-
out
106-
107-
# Nuxt.js build / generate output
108-
.nuxt
10+
node_modules
10911
dist
12+
dist-ssr
13+
*.local
11014

111-
# Gatsby files
112-
.cache/
113-
# Comment in the public line in if your project uses Gatsby and not Next.js
114-
# https://nextjs.org/blog/next-9-1#public-directory-support
115-
# public
116-
117-
# vuepress build output
118-
.vuepress/dist
119-
120-
# Serverless directories
121-
.serverless/
122-
123-
# FuseBox cache
124-
.fusebox/
125-
126-
# DynamoDB Local files
127-
.dynamodb/
128-
129-
# TernJS port file
130-
.tern-port
131-
132-
# Stores VSCode versions used for testing VSCode extensions
133-
.vscode-test
134-
135-
# yarn v2
136-
.yarn/*
137-
!.yarn/sdks
138-
!.yarn/cache
139-
!.yarn/patches
140-
!.yarn/plugins
141-
!.yarn/releases
142-
!.yarn/versions
143-
.yarn/unplugged
144-
.yarn/build-state.yml
145-
.yarn/install-state.gz
146-
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?

‎.run/Development.run.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<component name="ProjectRunConfigurationManager">
2+
<configuration default="false" name="Development" type="js.build_tools.npm">
3+
<package-json value="$PROJECT_DIR$/package.json" />
4+
<command value="run" />
5+
<scripts>
6+
<script value="dev" />
7+
</scripts>
8+
<node-interpreter value="project" />
9+
<envs />
10+
<method v="2" />
11+
</configuration>
12+
</component>

‎index.html

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

‎package.json

Lines changed: 20 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,22 @@
11
{
2-
"name": "reactjs-typescript-cypress-storybook-eslint-prettier-tailwindcss",
3-
"scripts": {
4-
"start": "react-scripts start",
5-
"build": "react-scripts build",
6-
"eject": "react-scripts eject",
7-
"prettier:fix": "prettier --write .",
8-
"cypress:open": "cypress open",
9-
"storybook": "start-storybook -p 4000 -s public",
10-
"build-storybook": "build-storybook -s public"
11-
},
12-
"dependencies": {
13-
"react": "^17.0.2",
14-
"react-dom": "^17.0.2",
15-
"react-scripts": "5.0.0",
16-
"web-vitals": "^2.1.0"
17-
},
18-
"devDependencies": {
19-
"@cypress/react": "^5.12.1",
20-
"@cypress/webpack-dev-server": "^1.8.0",
21-
"@storybook/addon-actions": "^6.4.13",
22-
"@storybook/addon-essentials": "^6.4.13",
23-
"@storybook/addon-links": "^6.4.13",
24-
"@storybook/builder-webpack5": "^6.4.13",
25-
"@storybook/manager-webpack5": "^6.4.13",
26-
"@storybook/node-logger": "^6.4.13",
27-
"@storybook/preset-create-react-app": "^4.0.0",
28-
"@storybook/react": "^6.4.13",
29-
"@testing-library/cypress": "^8.0.2",
30-
"@types/node": "^17.0.9",
31-
"@types/react": "^17.0.38",
32-
"@types/react-dom": "^17.0.11",
33-
"@typescript-eslint/eslint-plugin": "^5.10.0",
34-
"@typescript-eslint/parser": "^5.10.0",
35-
"autoprefixer": "^10.4.2",
36-
"cypress": "^9.2.1",
37-
"eslint": "^8.7.0",
38-
"eslint-config-prettier": "^8.3.0",
39-
"eslint-plugin-cypress": "^2.12.1",
40-
"eslint-plugin-prettier": "^4.0.0",
41-
"eslint-plugin-react": "^7.28.0",
42-
"eslint-plugin-storybook": "^0.5.5",
43-
"postcss": "^8.4.5",
44-
"prettier": "2.5.1",
45-
"tailwindcss": "^3.0.15",
46-
"typescript": "^4.5.4",
47-
"webpack": "^5.66.0"
48-
},
49-
"eslintConfig": {
50-
"extends": [
51-
"react-app"
52-
],
53-
"overrides": [
54-
{
55-
"files": [
56-
"**/*.stories.*"
57-
],
58-
"rules": {
59-
"import/no-anonymous-default-export": "off"
60-
}
61-
}
62-
]
63-
},
64-
"browserslist": {
65-
"production": [
66-
">0.2%",
67-
"not dead",
68-
"not op_mini all"
69-
],
70-
"development": [
71-
"last 1 chrome version",
72-
"last 1 firefox version",
73-
"last 1 safari version"
74-
]
75-
}
2+
"name": "template",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"react": "^18.2.0",
13+
"react-dom": "^18.2.0"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.0.15",
17+
"@types/react-dom": "^18.0.6",
18+
"@vitejs/plugin-react": "^2.0.0",
19+
"typescript": "^4.6.4",
20+
"vite": "^3.0.0"
21+
}
7622
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/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+
}

‎src/App.tsx

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
1-
import React from 'react'
1+
import { useState } from 'react'
2+
import reactLogo from './assets/react.svg'
3+
import './App.css'
24

35
function App() {
4-
return (
5-
<div className='App'>
6-
<header className='App-header'>
7-
<p>
8-
Edit <code>src/App.tsx</code> and save to reload.
9-
</p>
10-
<a
11-
className='App-link'
12-
href='https://reactjs.org'
13-
target='_blank'
14-
rel='noopener noreferrer'
15-
>
16-
Learn React
17-
</a>
18-
</header>
19-
</div>
20-
)
6+
const [count, setCount] = useState(0)
7+
8+
return (
9+
<div className="App">
10+
<div>
11+
<a href="https://vitejs.dev" target="_blank">
12+
<img src="/vite.svg" className="logo" alt="Vite logo" />
13+
</a>
14+
<a href="https://reactjs.org" target="_blank">
15+
<img src={reactLogo} className="logo react" alt="React logo" />
16+
</a>
17+
</div>
18+
<h1>Vite + React</h1>
19+
<div className="card">
20+
<button onClick={() => setCount((count) => count + 1)}>
21+
count is {count}
22+
</button>
23+
<p>
24+
Edit <code>src/App.tsx</code> and save to test HMR
25+
</p>
26+
</div>
27+
<p className="read-the-docs">
28+
Click on the Vite and React logos to learn more
29+
</p>
30+
</div>
31+
)
2132
}
2233

2334
export default App

‎src/assets/react.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)