diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__gitignore b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__gitignore index 4d29575de..5745a0034 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__gitignore +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/__dot__gitignore @@ -1,23 +1,41 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# dependencies +# Dependencies /node_modules /.pnp .pnp.js -# testing +# Testing /coverage -# production +# Production /build +dist +dist-ssr -# misc +# Misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local +*.local +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/eslint.config.js b/packages/cli/templates/react/igr-ts/projects/_base/files/eslint.config.js new file mode 100644 index 000000000..11fb1227c --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/eslint.config.js @@ -0,0 +1,42 @@ +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, + }, + plugins: { + reactRefresh + }, + rules: { + '@typescript-eslint/no-unused-vars': [ + 'error', + { + args: 'all', + argsIgnorePattern: '^_', + caughtErrors: 'all', + caughtErrorsIgnorePattern: '^_', + destructuredArrayIgnorePattern: '^(_|set)', + varsIgnorePattern: '^_', + ignoreRestSiblings: true, + }, + ], + 'reactRefresh/only-export-components': ['warn', { allowConstantExport: true }], + '@typescript-eslint/no-explicit-any': 'off', + }, + }, +]) diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/eslint.config.mjs b/packages/cli/templates/react/igr-ts/projects/_base/files/eslint.config.mjs deleted file mode 100644 index 1b778c7fc..000000000 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/eslint.config.mjs +++ /dev/null @@ -1,48 +0,0 @@ -import js from '@eslint/js'; -import typescriptParser from '@typescript-eslint/parser'; -import reactRefresh from 'eslint-plugin-react-refresh'; -import { FlatCompat } from "@eslint/eslintrc"; - -const compat = new FlatCompat({ - recommendedConfig: js.configs.recommended -}); - -export default [ - ...compat.extends('eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'), - { - files: ['**/*.ts', '**/*.tsx'], - languageOptions: { - globals: { - browser: true, - es2020: true, - }, - parser: typescriptParser, - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - }, - }, - plugins: { - reactRefresh - }, - rules: { - '@typescript-eslint/no-unused-vars': [ - 'error', - { - args: 'all', - argsIgnorePattern: '^_', - caughtErrors: 'all', - caughtErrorsIgnorePattern: '^_', - destructuredArrayIgnorePattern: '^(_|set)', - varsIgnorePattern: '^_', - ignoreRestSiblings: true, - }, - ], - 'reactRefresh/only-export-components': ['warn', { allowConstantExport: true }], - '@typescript-eslint/no-explicit-any': 'off', - }, - }, - { - ignores: ['dist'] - } -]; diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/index.html b/packages/cli/templates/react/igr-ts/projects/_base/files/index.html index b07ba60d0..acfd2c262 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/index.html +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/index.html @@ -1,13 +1,9 @@ - - - - + + + <%=ApplicationTitle%> diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/package.json b/packages/cli/templates/react/igr-ts/projects/_base/files/package.json index 3d97a77a0..10f880b52 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/package.json +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/package.json @@ -1,44 +1,45 @@ { "name": "$(dash-name)", - "version": "0.1.0", "private": true, + "version": "0.1.0", "type": "module", + "scripts": { + "start": "vite", + "build": "tsc -b && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "lint": "eslint . --report-unused-disable-directives --max-warnings 0", + "test": "vitest" + }, "dependencies": { "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.0", "element-internals-polyfill": "^3.0.2", "functions-have-names": "^1.2.3", "igniteui-react": "~19.6.0", - "react": "^19.1.0", + "react": "^19.2.4", "react-app-polyfill": "^3.0.0", - "react-dom": "^19.1.0", + "react-dom": "^19.2.4", "react-router-dom": "^7.9.3", "resize-observer-polyfill": "^1.5.1" }, "devDependencies": { - "@types/react": "^19.1.8", - "@types/react-dom": "^19.1.6", - "@typescript-eslint/eslint-plugin": "^8.21.0", - "@typescript-eslint/parser": "^8.21.0", - "eslint": "^9.20.0", - "eslint-plugin-react-hooks": "^5.1.0", - "eslint-plugin-react-refresh": "^0.4.3", - "typescript": "^5.8.3", - "vite": "^7.1.6", - "vitest": "^3.2.4", - "@vitest/browser": "^3.2.4", + "@eslint/js": "^9.39.4", + "@types/node": "^24.12.0", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.0.3", - "vitest-canvas-mock": "^0.3.3", - "playwright": "^1.55.1", + "@vitest/browser-playwright": "^4.1.0", + "eslint": "^9.39.4", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.5.2", + "globals": "^17.4.0", + "typescript": "^5.9.3", + "typescript-eslint": "^8.57.0", + "vite": "^8.0.1", + "vitest": "^4.1.0", + "playwright": "^1.58.2", "igniteui-cli": "~$(cliVersion)" }, - "scripts": { - "start": "vite", - "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", - "preview": "vite preview", - "lint": "eslint . --report-unused-disable-directives --max-warnings 0", - "test": "vitest" - }, "browserslist": [ ">0.2%", "not dead", diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/public/favicon.ico b/packages/cli/templates/react/igr-ts/projects/_base/files/public/favicon.ico deleted file mode 100644 index a11777cc4..000000000 Binary files a/packages/cli/templates/react/igr-ts/projects/_base/files/public/favicon.ico and /dev/null differ diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/public/favicon.svg b/packages/cli/templates/react/igr-ts/projects/_base/files/public/favicon.svg new file mode 100644 index 000000000..6893eb132 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/public/icons.svg b/packages/cli/templates/react/igr-ts/projects/_base/files/public/icons.svg new file mode 100644 index 000000000..e9522193d --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx b/packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx index 3a1b23be3..c28e56fa2 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' import { createBrowserRouter, RouterProvider } from "react-router-dom"; import App from './app/app'; import { routes } from "./app/app-routes"; @@ -22,8 +22,8 @@ const router = createBrowserRouter([ basename: basename }); -ReactDOM.createRoot(document.getElementById('root')!).render( - +createRoot(document.getElementById('root')!).render( + - + ) diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.app.json b/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.app.json new file mode 100644 index 000000000..af516fcca --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.app.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2023", + "useDefineForClassFields": true, + "lib": ["ES2023", "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"] +} diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.json b/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.json index a840abb3c..1ffef600d 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.json +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.json @@ -1,25 +1,7 @@ { - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - "composite": true, - "allowSyntheticDefaultImports": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", - - /* Linting */ - "strict": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src", "vite.config.ts"] + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] } diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.node.json b/packages/cli/templates/react/igr-ts/projects/_base/files/tsconfig.node.json new file mode 100644 index 000000000..8a67f62f4 --- /dev/null +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/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"] +} diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/vite.config.ts b/packages/cli/templates/react/igr-ts/projects/_base/files/vite.config.ts index 5997573bf..17ee62a70 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base/files/vite.config.ts +++ b/packages/cli/templates/react/igr-ts/projects/_base/files/vite.config.ts @@ -1,5 +1,6 @@ -/// -import { defineConfig } from 'vitest/config' +/// +import { playwright } from '@vitest/browser-playwright' +import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ @@ -11,12 +12,8 @@ export default defineConfig({ test: { browser: { enabled: true, - provider: 'playwright', - instances: [ - { - browser: 'chromium' - }, - ], + provider: playwright(), + instances: [{ browser: 'chromium' }] } }, resolve: { diff --git a/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/index.html b/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/index.html index 4afbe311b..208bd7126 100644 --- a/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/index.html +++ b/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/index.html @@ -1,13 +1,9 @@ - - - - + + + IgniteUI for React diff --git a/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx b/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx index 4151a4060..99565a4cc 100644 --- a/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx +++ b/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx @@ -1,27 +1,17 @@ -import { useState, useEffect } from 'react'; -import { Link } from 'react-router-dom'; +import { useMemo } from 'react'; +import { Link, useLocation } from 'react-router-dom'; export default function NavigationHeader({ routes }: any) { - const [state, setState] = useState({ activeItem: null }); - - function handleClick(index: any) { - setState({ activeItem: index }); - } - - useEffect(() => { - let currentRoute = window.location.href.split(window.location.origin)[1]; - if (!currentRoute) { - currentRoute = '/' - } - const activeItem = routes.findIndex((route: any) => route.path === currentRoute); - setState({ activeItem }); - }, [routes]); + const location = useLocation(); + const activeItem = useMemo(() => { + return routes.findIndex((route: { path: string; }) => route.path === location.pathname); + }, [routes, location.pathname]); return (