Skip to content

Commit 9240471

Browse files
pixelsoulpixelsoul
committed
init commit for react dev
1 parent cff237c commit 9240471

34 files changed

+3051
-840
lines changed

‎.vscode/extensions.json

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎README.md

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,50 @@
1-
# Tipsy Calculator
1+
# React + TypeScript + Vite
22

3-
This is a simple calculator that calculates the amount of tips you should give to a waiter/waitress. It can also split the bill between multiple people. I created this because I had found myself in situations where I had to calculate the amount of tips I should give to a waiter/waitress and I had to do it manually, and/or I had to split the bill between multiple people. This was built using Vue 3 and CSS.
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
44

5-
- [Live Demo](https://tipsy.pixelsoul.com)
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
14+
- Configure the top-level `parserOptions` property like this:
15+
16+
```js
17+
export default tseslint.config({
18+
languageOptions: {
19+
// other options...
20+
parserOptions: {
21+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22+
tsconfigRootDir: import.meta.dirname,
23+
},
24+
},
25+
})
26+
```
27+
28+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31+
32+
```js
33+
// eslint.config.js
34+
import react from 'eslint-plugin-react'
35+
36+
export default tseslint.config({
37+
// Set the react version
38+
settings: { react: { version: '18.3' } },
39+
plugins: {
40+
// Add the react plugin
41+
react,
42+
},
43+
rules: {
44+
// other rules...
45+
// Enable its recommended rules
46+
...react.configs.recommended.rules,
47+
...react.configs['jsx-runtime'].rules,
48+
},
49+
})
50+
```

‎components.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/index.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎eslint.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎index.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta
7-
name="viewport"
8-
content="width=device-width, initial-scale=1.0"
9-
/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
107
<title>Tipsy</title>
118
</head>
129
<body>
13-
<div id="app"></div>
14-
<script type="module" src="/src/main.js"></script>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
1512
</body>
1613
</html>

‎package.json

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,40 @@
11
{
2-
"name": "-tipsy",
2+
"name": "tipsy",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8-
"build": "vite build",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
910
"preview": "vite preview"
1011
},
1112
"dependencies": {
12-
"vue": "^3.2.47"
13+
"@radix-ui/react-dropdown-menu": "^2.1.4",
14+
"@radix-ui/react-slot": "^1.1.1",
15+
"class-variance-authority": "^0.7.1",
16+
"clsx": "^2.1.1",
17+
"lucide-react": "^0.469.0",
18+
"react": "^18.3.1",
19+
"react-dom": "^18.3.1",
20+
"tailwind-merge": "^2.5.5",
21+
"tailwindcss-animate": "^1.0.7"
1322
},
1423
"devDependencies": {
15-
"@vitejs/plugin-vue": "^4.1.0",
16-
"vite": "^4.3.2"
24+
"@eslint/js": "^9.17.0",
25+
"@types/node": "^22.10.2",
26+
"@types/react": "^18.3.17",
27+
"@types/react-dom": "^18.3.5",
28+
"@vitejs/plugin-react": "^4.3.4",
29+
"autoprefixer": "^10.4.20",
30+
"eslint": "^9.17.0",
31+
"eslint-plugin-react-hooks": "^5.0.0",
32+
"eslint-plugin-react-refresh": "^0.4.16",
33+
"globals": "^15.13.0",
34+
"postcss": "^8.4.49",
35+
"tailwindcss": "^3.4.17",
36+
"typescript": "~5.6.2",
37+
"typescript-eslint": "^8.18.1",
38+
"vite": "^6.0.3"
1739
}
1840
}

‎postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/App.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { ThemeProvider } from "@/components/ThemeProvider"
2+
import ThemeToggle from "@/components/ThemeToggle"
3+
4+
const App = () => {
5+
return (
6+
<ThemeProvider>
7+
<header>
8+
<h1>Vite + React + TypeScript + Tailwind CSS</h1>
9+
<ThemeToggle />
10+
</header>
11+
<main>
12+
<section>
13+
<p>
14+
Edit <code>App.tsx</code> and save to test HMR updates.
15+
</p>
16+
</section>
17+
18+
<section>
19+
<p>
20+
<a
21+
href="https://tailwindcss.com/docs"
22+
target="_blank"
23+
rel="noopener noreferrer">
24+
Tailwind CSS Docs
25+
</a>
26+
</p>
27+
</section>
28+
</main>
29+
<footer>
30+
<p>
31+
<a
32+
href="https://vitejs.dev/guide/features.html"
33+
target="_blank"
34+
rel="noopener noreferrer">
35+
Vite Docs
36+
</a>
37+
</p>
38+
</footer>
39+
</ThemeProvider>
40+
)
41+
}
42+
43+
export default App

‎src/App.vue

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/assets/vue.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)