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

2026-05-20 10:42:57 +07:00
parent b1c3ddffe0
commit 84eca45e35
11 changed files with 3985 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -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?
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -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 },
+      ],
+    },
+  }
+)
--- a/index.html
+++ b/index.html
@@ -14,6 +14,6 @@
  </head>
  <body class="bg-slate-950 text-slate-100 antialiased font-sans">
    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
  "name": "smart-tiket",
  "private": true,
-  "version": "0.1.0",
+  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
@@ -14,11 +15,18 @@
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
+    "@eslint/js": "^9.19.0",
    "@tailwindcss/vite": "^4.0.0",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@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",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
    "vite": "^6.1.0"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,8 @@
 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() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState<number>(0)

  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">
@@ -16,7 +16,7 @@ export default function App() {
        {/* 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">
          <CheckCircle2 className="w-3.5 h-3.5" />
-          <span>SETUP SUCCESSFUL</span>
+          <span>SETUP SUCCESSFUL (TSX)</span>
        </div>

        {/* Heading using Google Font 'Outfit' */}
@@ -26,7 +26,7 @@ export default function App() {

        {/* Body using Google Font 'Plus Jakarta Sans' */}
        <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>

        {/* 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">
              <Layers className="w-3.5 h-3.5 text-indigo-400" />
            </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 className="flex items-center gap-3 text-slate-300">
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import App from './App'
 import './index.css'

-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -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"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -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"]
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -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(),
-  ],
-})