kevinsatriadarmawan/Frontend-Smart_Ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize project with React 19, TypeScript, and Tailwind CSS v4 support

Browse Source
This commit is contained in:
Kevin Satria D
2026-05-20 10:42:57 +07:00
parent b1c3ddffe0
commit 84eca45e35
11 changed files with 3985 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
.gitignore vendored Normal file
View File

@@ -0,0 +1,25 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
# Node
node_modules/
dist/
dist-ssr/
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

28
eslint.config.js Normal file
View File

@@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
)

2
index.html
View File

@@ -14,6 +14,6 @@
</head> </head>
<body class="bg-slate-950 text-slate-100 antialiased font-sans"> <body class="bg-slate-950 text-slate-100 antialiased font-sans">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

3859
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@@ -1,11 +1,12 @@
{ {
"name": "smart-tiket", "name": "smart-tiket",
"private": true, "private": true,
"version": "0.1.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
@@ -14,11 +15,18 @@
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.19.0",
"@tailwindcss/vite": "^4.0.0", "@tailwindcss/vite": "^4.0.0",
"@types/react": "^19.0.8", "@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3", "@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.19.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"tailwindcss": "^4.0.0", "tailwindcss": "^4.0.0",
"typescript": "~5.7.2",
"typescript-eslint": "^8.22.0",
"vite": "^6.1.0" "vite": "^6.1.0"
} }
} }

10
src/App.jsx → src/App.tsx
View File

@@ -1,8 +1,8 @@
import { useState } from 'react' import { useState } from 'react'
import { CheckCircle2, Terminal, ArrowRight, Layers, Sparkles } from 'lucide-react' import { CheckCircle2, Terminal, Layers, Sparkles } from 'lucide-react'
export default function App() { export default function App() {
const [count, setCount] = useState(0) const [count, setCount] = useState<number>(0)
return ( return (
<div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center relative overflow-hidden px-4 selection:bg-indigo-500 selection:text-white"> <div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center relative overflow-hidden px-4 selection:bg-indigo-500 selection:text-white">
@@ -16,7 +16,7 @@ export default function App() {
{/* Status Badge */} {/* Status Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold tracking-wide mb-8 animate-pulse"> <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold tracking-wide mb-8 animate-pulse">
<CheckCircle2 className="w-3.5 h-3.5" /> <CheckCircle2 className="w-3.5 h-3.5" />
<span>SETUP SUCCESSFUL</span> <span>SETUP SUCCESSFUL (TSX)</span>
</div> </div>
{/* Heading using Google Font 'Outfit' */} {/* Heading using Google Font 'Outfit' */}
@@ -26,7 +26,7 @@ export default function App() {
{/* Body using Google Font 'Plus Jakarta Sans' */} {/* Body using Google Font 'Plus Jakarta Sans' */}
<p className="font-sans text-slate-400 text-base sm:text-lg leading-relaxed mb-8"> <p className="font-sans text-slate-400 text-base sm:text-lg leading-relaxed mb-8">
Welcome to your new development environment. React 19, Tailwind CSS v4, and Google Fonts are successfully configured and ready. Welcome to your new development environment. React 19, Tailwind CSS v4, TypeScript, and Google Fonts are successfully configured and ready.
</p> </p>
{/* Feature Checkmarks */} {/* Feature Checkmarks */}
@@ -42,7 +42,7 @@ export default function App() {
<div className="w-5 h-5 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center"> <div className="w-5 h-5 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
<Layers className="w-3.5 h-3.5 text-indigo-400" /> <Layers className="w-3.5 h-3.5 text-indigo-400" />
</div> </div>
<span className="font-sans text-sm font-medium">Tailwind CSS v4 &amp; Nesting Integration</span> <span className="font-sans text-sm font-medium">Tailwind CSS v4 &amp; TypeScript</span>
</div> </div>
<div className="flex items-center gap-3 text-slate-300"> <div className="flex items-center gap-3 text-slate-300">

4
src/main.jsx → src/main.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react' import React from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import App from './App.jsx' import App from './App'
import './index.css' import './index.css'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,

25
tsconfig.app.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

23
tsconfig.node.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

11
vite.config.js
View File

@@ -1,11 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
})