create-jsc-vite-react-ts 1.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Cédric Rochefolle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# create-jsc-vite-react-ts
+
+A CLI tool to scaffold modern React applications with TypeScript, Vite, Tailwind CSS, and Vitest pre-configured.
+
+## Quick Start
+
+Create a new project using npm, yarn, or pnpm:
+
+```bash
+# npm
+npm create jsc-vite-react-ts my-app
+
+# yarn
+yarn create jsc-vite-react-ts my-app
+
+# pnpm
+pnpm create jsc-vite-react-ts my-app
+```
+
+Then navigate to your project and start developing:
+
+```bash
+cd my-app
+yarn dev
+```
+
+## What's Included
+
+The generated project includes:
+
+- **React 19** with TypeScript
+- **Vite 7** for blazing-fast development and builds
+- **Tailwind CSS 4** for utility-first styling
+- **Vitest** for unit testing with React Testing Library
+- **ESLint** with TypeScript and React rules
+- **Dark mode** implementation example with theme context
+- **Arrow function** components by default
+- **100% test coverage** example with all components tested
+
+## Features
+
+### Pre-configured Testing
+
+- Vitest with jsdom environment
+- React Testing Library setup
+- Example tests for all components and hooks
+- Coverage reporting with `yarn test:coverage`
+
+### Dark Mode Ready
+
+Complete dark mode implementation using React Context and Tailwind CSS, including localStorage persistence.
+
+### TypeScript First
+
+Strict TypeScript configuration with project references for optimal type checking and IDE performance.
+
+### Modern Stack
+
+All dependencies are up-to-date with the latest stable versions of React, Vite, Tailwind CSS, and testing libraries.
+
+## Available Scripts
+
+In the generated project, you can run:
+
+- `yarn dev` - Start development server
+- `yarn build` - Build for production
+- `yarn preview` - Preview production build
+- `yarn lint` - Run ESLint
+- `yarn test` - Run tests in watch mode
+- `yarn test:ui` - Run tests with interactive UI
+- `yarn test:coverage` - Run tests with coverage report
+
+## Requirements
+
+- Node.js 18.0.0 or higher
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process'
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import prompts from 'prompts'
+import chalk from 'chalk'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const run = async () => {
+  console.log(chalk.bold.cyan('\n🚀 Create React + TypeScript + Vite App\n'))
+
+  const args = process.argv.slice(2)
+  let projectName = args[0]
+
+  if (!projectName) {
+    const response = await prompts({
+      type: 'text',
+      name: 'projectName',
+      message: 'What is your project named?',
+      initial: 'my-app',
+      validate: (value) => {
+        if (!value) return 'Project name is required'
+        if (!/^[a-z0-9-_]+$/.test(value)) {
+          return 'Project name can only contain lowercase letters, numbers, hyphens, and underscores'
+        }
+        return true
+      },
+    })
+
+    if (!response.projectName) {
+      console.log(chalk.red('\n✖ Project creation cancelled\n'))
+      process.exit(1)
+    }
+
+    projectName = response.projectName
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectName)
+
+  if (fs.existsSync(targetDir)) {
+    console.log(chalk.red(`\n✖ Directory ${projectName} already exists\n`))
+    process.exit(1)
+  }
+
+  console.log(chalk.blue(`\n📁 Creating project in ${targetDir}...\n`))
+
+  const templateDir = path.resolve(__dirname, '../template')
+  fs.copySync(templateDir, targetDir, {
+    filter: (src) => {
+      const basename = path.basename(src)
+      return !['node_modules', 'dist', 'coverage', '.claude', 'plan.md', 'CLAUDE.md', 'yarn.lock'].includes(basename)
+    },
+  })
+
+  const packageJsonPath = path.join(targetDir, 'package.json')
+  const packageJson = fs.readJsonSync(packageJsonPath)
+  packageJson.name = projectName
+  fs.writeJsonSync(packageJsonPath, packageJson, { spaces: 2 })
+
+  console.log(chalk.green('✓ Project files created'))
+
+  const packageManager = await detectPackageManager()
+
+  console.log(chalk.blue(`\n📦 Installing dependencies with ${packageManager}...\n`))
+
+  try {
+    execSync(`${packageManager} install`, {
+      cwd: targetDir,
+      stdio: 'inherit',
+    })
+    console.log(chalk.green('\n✓ Dependencies installed'))
+  } catch (error) {
+    console.log(chalk.yellow('\n⚠ Failed to install dependencies automatically'))
+    console.log(chalk.yellow(`  Please run "${packageManager} install" manually\n`))
+  }
+
+  console.log(chalk.bold.green('\n✨ Success! Your project is ready.\n'))
+  console.log(chalk.bold('Next steps:\n'))
+  console.log(chalk.cyan(`  cd ${projectName}`))
+  console.log(chalk.cyan(`  ${packageManager} dev`))
+  console.log()
+}
+
+const detectPackageManager = async () => {
+  const userAgent = process.env.npm_config_user_agent || ''
+
+  if (userAgent.startsWith('yarn')) return 'yarn'
+  if (userAgent.startsWith('pnpm')) return 'pnpm'
+
+  const response = await prompts({
+    type: 'select',
+    name: 'packageManager',
+    message: 'Which package manager do you want to use?',
+    choices: [
+      { title: 'npm', value: 'npm' },
+      { title: 'yarn', value: 'yarn' },
+      { title: 'pnpm', value: 'pnpm' },
+    ],
+    initial: 0,
+  })
+
+  return response.packageManager || 'npm'
+}
+
+run().catch((error) => {
+  console.error(chalk.red('\n✖ An error occurred:\n'))
+  console.error(error)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "create-jsc-vite-react-ts",
+  "version": "1.0.1",
+  "description": "Create a modern React app with TypeScript, Vite, Tailwind CSS, and Vitest",
+  "type": "module",
+  "bin": {
+    "create-create-jsc-vite-react-ts": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "react",
+    "vite",
+    "typescript",
+    "tailwindcss",
+    "vitest",
+    "starter",
+    "template",
+    "boilerplate",
+    "scaffolding",
+    "create-app"
+  ],
+  "author": "JScoobyCed",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jscoobyced/create-jsc-vite-react-ts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jscoobyced/create-jsc-vite-react-ts/issues"
+  },
+  "homepage": "https://github.com/jscoobyced/create-jsc-vite-react-ts#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "fs-extra": "^11.2.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9"
+  }
+}

package/template/README.md

@@ -0,0 +1,97 @@
+# React + TypeScript + Vite Starter
+
+A modern React application scaffolding with TypeScript, Vite, Tailwind CSS, and testing pre-configured.
+
+## What's Included
+
+- **React 19** with TypeScript
+- **Vite 7** for blazing-fast development and builds
+- **Tailwind CSS 4** for utility-first styling
+- **Vitest** for unit testing with React Testing Library
+- **ESLint** with TypeScript and React rules
+- **Dark mode** implementation example with theme context
+- **Arrow function** components by default
+
+## Getting Started
+
+### Install Dependencies
+
+```bash
+yarn install
+```
+
+### Development
+
+Start the development server with hot module replacement:
+
+```bash
+yarn dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) to view your app.
+
+### Build
+
+Create a production build:
+
+```bash
+yarn build
+```
+
+Preview the production build locally:
+
+```bash
+yarn preview
+```
+
+## Available Scripts
+
+- `yarn dev` - Start development server
+- `yarn build` - Build for production
+- `yarn preview` - Preview production build
+- `yarn lint` - Run ESLint
+- `yarn test` - Run tests in watch mode
+- `yarn test:ui` - Run tests with interactive UI
+- `yarn test:coverage` - Run tests with coverage report
+
+## Project Structure
+
+```
+src/
+├── components/       # React components
+├── contexts/         # React contexts and providers
+├── hooks/           # Custom React hooks
+├── test/            # Test setup and utilities
+├── App.tsx          # Main application component
+└── main.tsx         # Application entry point
+```
+
+## Key Features
+
+### Dark Mode
+
+The template includes a complete dark mode implementation using React Context and Tailwind CSS. Toggle between light and dark themes with the button in the top-right corner.
+
+### Testing
+
+All components and hooks include example tests demonstrating best practices with Vitest and React Testing Library. Run `yarn test:coverage` to see your test coverage.
+
+### TypeScript
+
+Strict TypeScript configuration with project references for optimal type checking and IDE performance.
+
+## Next Steps
+
+1. Update `package.json` with your project name and details
+2. Customize the theme colors in your Tailwind configuration
+3. Replace the example content in `App.tsx` with your application
+4. Add your routes, state management, and API integration
+5. Update this README with your project-specific information
+
+## Learn More
+
+- [React Documentation](https://react.dev)
+- [Vite Documentation](https://vite.dev)
+- [Tailwind CSS Documentation](https://tailwindcss.com)
+- [Vitest Documentation](https://vitest.dev)
+- [TypeScript Documentation](https://www.typescriptlang.org)

package/template/eslint.config.js

@@ -0,0 +1,23 @@
+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'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/template/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+    <title>hello-world</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "my-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "jsdom": "^27.3.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.16"
+  }
+}

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import App from './App'
+import { ThemeProvider } from './contexts/ThemeContext'
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(<ThemeProvider>{component}</ThemeProvider>)
+}
+
+describe('App', () => {
+  it('renders Hello World heading', () => {
+    renderWithTheme(<App />)
+    const heading = screen.getByText('Hello World')
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveClass('text-4xl')
+  })
+
+  it('renders ThemeToggle button', () => {
+    renderWithTheme(<App />)
+    const button = screen.getByRole('button', { name: /toggle theme/i })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('renders Footer', () => {
+    renderWithTheme(<App />)
+    const footer = screen.getByText(/built with ❤️/i)
+    expect(footer).toBeInTheDocument()
+  })
+})

package/template/src/App.tsx

@@ -0,0 +1,18 @@
+import { ThemeToggle } from './components/ThemeToggle'
+import { Footer } from './components/Footer'
+
+const App = () => {
+  return (
+    <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+      <ThemeToggle />
+      <main className="grow flex items-center justify-center">
+        <h1 className="text-4xl text-gray-900 dark:text-white font-family-sans">
+          Hello World
+        </h1>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App

package/template/src/app.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-family-sans: 'Inter';
+}

package/template/src/components/Footer.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Footer } from './Footer'
+
+describe('Footer', () => {
+  it('renders footer text', () => {
+    render(<Footer />)
+    const footerText = screen.getByText(/built with ❤️ by IndyTheDog/i)
+    expect(footerText).toBeInTheDocument()
+  })
+
+  it('has correct styling classes', () => {
+    render(<Footer />)
+    const footer = screen.getByRole('contentinfo')
+    expect(footer).toHaveClass('text-center')
+  })
+})

package/template/src/components/Footer.tsx

@@ -0,0 +1,7 @@
+export const Footer = () => {
+  return (
+    <footer className="mt-5 py-4 text-center text-gray-600 dark:text-gray-400 font-family-sans">
+      <p>Built with ❤️ by IndyTheDog</p>
+    </footer>
+  )
+}

package/template/src/components/ThemeToggle.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { ThemeToggle } from './ThemeToggle'
+import { ThemeProvider } from '../contexts/ThemeContext'
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(<ThemeProvider>{component}</ThemeProvider>)
+}
+
+describe('ThemeToggle', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('renders theme toggle button', () => {
+    renderWithTheme(<ThemeToggle />)
+    const button = screen.getByRole('button', { name: /toggle theme/i })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('displays moon icon for light theme', () => {
+    renderWithTheme(<ThemeToggle />)
+    const button = screen.getByRole('button', { name: /toggle theme/i })
+    expect(button).toHaveTextContent('🌙')
+  })
+
+  it('toggles theme when clicked', async () => {
+    const user = userEvent.setup()
+    renderWithTheme(<ThemeToggle />)
+    const button = screen.getByRole('button', { name: /toggle theme/i })
+
+    expect(button).toHaveTextContent('🌙')
+
+    await user.click(button)
+
+    expect(button).toHaveTextContent('☀️')
+  })
+
+  it('toggles theme back and forth', async () => {
+    const user = userEvent.setup()
+    renderWithTheme(<ThemeToggle />)
+    const button = screen.getByRole('button', { name: /toggle theme/i })
+
+    expect(button).toHaveTextContent('🌙')
+
+    await user.click(button)
+    expect(button).toHaveTextContent('☀️')
+
+    await user.click(button)
+    expect(button).toHaveTextContent('🌙')
+  })
+})

package/template/src/components/ThemeToggle.tsx

@@ -0,0 +1,15 @@
+import { useTheme } from '../hooks/useTheme'
+
+export const ThemeToggle = () => {
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="fixed top-4 right-4 p-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
+      aria-label="Toggle theme"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  )
+}

package/template/src/contexts/ThemeContext.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { ThemeContext, type Theme } from './theme'
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem('theme')
+    return (saved as Theme) || 'light'
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (theme === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'))
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+

package/template/src/contexts/theme.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+export type Theme = 'light' | 'dark'
+
+export interface ThemeContextType {
+  theme: Theme
+  toggleTheme: () => void
+}
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

package/template/src/hooks/useTheme.test.tsx

@@ -0,0 +1,34 @@
+import { renderHook } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useTheme } from './useTheme'
+import { ThemeProvider } from '../contexts/ThemeContext'
+
+describe('useTheme', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('throws error when used outside ThemeProvider', () => {
+    expect(() => {
+      renderHook(() => useTheme())
+    }).toThrow('useTheme must be used within a ThemeProvider')
+  })
+
+  it('returns theme and toggleTheme function', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+    })
+
+    expect(result.current).toHaveProperty('theme')
+    expect(result.current).toHaveProperty('toggleTheme')
+    expect(typeof result.current.toggleTheme).toBe('function')
+  })
+
+  it('starts with light theme by default', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+    })
+
+    expect(result.current.theme).toBe('light')
+  })
+})

package/template/src/hooks/useTheme.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { ThemeContext } from '../contexts/theme'
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/template/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './app.css'
+import App from './App.tsx'
+import { ThemeProvider } from './contexts/ThemeContext'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+)

package/template/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/template/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/template/tsconfig.json

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

package/template/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+  },
+})