Merge pull request #25 from Sharmaz/feature/react-ts-tw-lint-test

add template with react typescript, tw, eslint, and react testing library.

README.md

@@ -68,4 +68,5 @@ mk-app --template react-ts my-app
 | **react-tw** | React + Vite + Tailwind CSS. |
 | **react-tw-lint-test** | React + Vite + Tailwind CSS + ESlint 8 + React Testing Library |
 | **react-ts** | React + Vite + TypeScript + ESlint 8. |
+| **react-dev-ts** | React + Typescript + Vite + Tailwind CSS + ESlint 8 + React Testing Library |
 | **react-next** | React 19 + Farm + Oxlint. |

src/templateList.js

@@ -14,7 +14,7 @@ const templates = [
  {
  value: 'minimal-react-wp',
  title: colors.react('Minimal React Webpack'),
- description: colors.error('React + Webpack')
+ description: colors.error('React + Webpack.')
  },
  {
  value: 'react-tw',
@@ -24,13 +24,18 @@ const templates = [
  {
  value: 'react-tw-lint-test',
  title: colors.react('React Tailwind CSS, Linter and Testing'),
- description: colors.error('React + Vite + Tailwind CSS + ESlint 8 + ESlint Airbnb + Jest + React Testing Library'),
+ description: colors.error('React + Vite + Tailwind CSS + ESlint 8 + ESlint Airbnb + Jest + React Testing Library.'),
  },
  {
  value: 'react-ts',
  title: colors.typescript('React TypeScript'),
  description: colors.error('React + Vite + TypeScript + ESlint 8.'),
  },
+ {
+ value: 'react-ts-tw-lint-test',
+ title: colors.typescript('React TypeScript, Tailwind CSS, Linter and Testing'),
+ description: colors.error('React + Vite + TypeScript + Tailwind CSS + ESlint 8 + Jest + React Testing Library.'),
+ },
  {
  value: 'react-next',
  title: colors.error('React Experimental'),

templates/minimal-react-wp/package.json

@@ -1,5 +1,5 @@
 {
- "name": "my-app",
+ "name": "minimal-react-webpack",
  "private": true,
  "version": "0.0.0",
  "scripts": {

templates/react-dev-ts/.babelrc

@@ -0,0 +1,11 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-typescript",
+ ["@babel/preset-react",
+ { "runtime": "automatic" }]
+ ],
+ "plugins": [
+ "@babel/plugin-transform-runtime"
+ ]
+}

templates/react-dev-ts/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+ globals: {
+ JSX: true,
+ },
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+}

templates/react-dev-ts/__tests__/App.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import App from '../src/App';
+
+test('App component render', async () => {
+ render(<App />);
+
+ expect(screen.getByRole('button')).toHaveTextContent('count');
+});

templates/react-dev-ts/_gitignore

@@ -0,0 +1,89 @@
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

templates/react-dev-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="#" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>React TypeScript</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>

templates/react-dev-ts/jest.config.cjs

@@ -0,0 +1,13 @@
+/** @type {import('jest').Config} */
+const config = {
+ verbose: true,
+ transform: {"\\.[jt]sx?$": "babel-jest"},
+ collectCoverage: true,
+ collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
+ coverageDirectory: 'coverage',
+ testEnvironment: 'jest-environment-jsdom',
+ setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+ testMatch: ['**/__tests__/**/?(*.)+(spec|test).[jt]s?(x)']
+};
+
+module.exports = config;

templates/react-dev-ts/jest.setup.js

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

templates/react-dev-ts/package.json

@@ -0,0 +1,43 @@
+{
+ "name": "react-ts-tw-lint-test",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview",
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "typecheck": "tsc -b",
+ "test": "jest"
+ },
+ "dependencies": {
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1"
+ },
+ "devDependencies": {
+ "@babel/plugin-transform-runtime": "^7.24.7",
+ "@babel/preset-env": "^7.24.7",
+ "@babel/preset-react": "^7.24.7",
+ "@babel/preset-typescript": "^7.24.7",
+ "@testing-library/dom": "^10.3.1",
+ "@testing-library/jest-dom": "^6.4.6",
+ "@testing-library/react": "^16.0.0",
+ "@types/jest": "^29.5.12",
+ "@types/react": "^18.3.3",
+ "@types/react-dom": "^18.3.0",
+ "@typescript-eslint/eslint-plugin": "^7.13.1",
+ "@typescript-eslint/parser": "^7.13.1",
+ "@vitejs/plugin-react": "^4.3.0",
+ "autoprefixer": "^10.4.19",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.2",
+ "eslint-plugin-react-refresh": "^0.4.7",
+ "jest": "^29.7.0",
+ "jest-environment-jsdom": "^29.7.0",
+ "postcss": "^8.4.39",
+ "tailwindcss": "^3.4.4",
+ "typescript": "5.2.2",
+ "vite": "^5.2.12"
+ }
+}

templates/react-dev-ts/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}

templates/react-dev-ts/src/App.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+
+function App() {
+ const [count, setCount] = useState(0)
+ return (
+ <div className="flex flex-col justify-center items-center h-screen bg-neutral-800">
+ <h1 className="text-5xl text-blue-400 text-center">React</h1>
+ <div className="p-8">
+ <button
+ className="bg-slate-950 px-4 py-2 rounded-lg text-slate-200"
+ onClick={() => setCount((counter) => counter + 1)}
+ type="button"
+ >
+ {`count is ${count}`}
+ </button>
+ </div>
+ </div>
+ )
+}
+
+export default App

templates/react-dev-ts/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

templates/react-dev-ts/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.js'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>,
+)

templates/react-dev-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

templates/react-dev-ts/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ './index.html',
+ './src/**/*.{js,ts,jsx,tsx}',
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}

templates/react-dev-ts/tsconfig.app.json

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

templates/react-dev-ts/tsconfig.json

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

templates/react-dev-ts/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "noEmit": true
+ },
+ "include": ["vite.config.ts"]
+}

templates/react-dev-ts/vite.config.ts

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

templates/react-next/package.json

@@ -1,5 +1,5 @@
 {
- "name": "react-minimal-app",
+ "name": "react-experimental",
  "private": true,
  "version": "0.0.0",
  "type": "module",