Initial commit

.babelrc

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

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+    - package-ecosystem: 'npm'
+      directory: '/'
+      schedule:
+          interval: 'weekly'
+      commit-message:
+          prefix: 'deps'
+      open-pull-requests-limit: 10

.github/workflows/deploy.yml

@@ -0,0 +1,32 @@
+name: Deploy to GitHub Pages
+
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    deploy:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v3
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '22.0.0'
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Build the project
+              run: npm run build
+
+            - name: Deploy to GitHub Pages
+              uses: peaceiris/actions-gh-pages@v3
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  publish_dir: ./dist
+                  publish_branch: gh-pages

.gitignore

@@ -0,0 +1,64 @@
+# Node modules
+node_modules/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+jspm_packages/
+
+# TypeScript compiled output
+dist/
+build/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Webpack cache
+.cache/
+.cache-loader/
+
+# 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
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# MacOS files
+.DS_Store
+
+
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# IDE specific files
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Optional stylelint cache
+.stylelintcache

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint

.prettierignore

@@ -0,0 +1 @@
+README.MD

.prettierrc

@@ -0,0 +1,14 @@
+{
+    "semi": true,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "tabWidth": 4,
+    "useTabs": false,
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "endOfLine": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "printWidth": 80,
+    "proseWrap": "preserve",
+    "plugins": ["prettier-plugin-tailwindcss"]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.associations": {
+        "*.css": "tailwindcss"
+    }
+}

README.md

@@ -0,0 +1,59 @@
+# React 18, TypeScript, Tailwind CSS, and Webpack 5 starter template
+
+Starter template using React 18, TypeScript, TailwindCSS, and Webpack 5, optimized for seamless development and efficient production builds.
+
+<a href="https://twitter.com/ivstudio"><img src="https://img.shields.io/twitter/follow/ivstudio.svg?style=social&label=Follow&maxAge=3600" height="20"></a>
+
+## Tech Stack
+
+- [React 18](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [TailwindCSS](https://tailwindcss.com/)
+- [Webpack 5](https://webpack.js.org/)
+- [ESLint](https://eslint.org/)
+- [Prettier](https://prettier.io/)
+- [Jest](https://jestjs.io/)
+- [Testing Library](https://testing-library.com/docs/react-testing-library/intro/)  
+
+### Requirements
+
+- Before starting, ensure you have [Node.js](https://nodejs.org/) v22.x or later and npm installed.
+
+## Getting Started
+
+1. Clone project or click use this template
+2. `npm install`
+3. `npm start`
+
+## Production 🚀
+
+The production build generates an optimized output in the `dist/` directory, ready for deployment. To build the project for production, run:  
+`npm run build`  
+
+## Testing
+
+- Run all the tests in the project.  
+`npm run test`
+
+- Generate a code coverage report.  
+`npm run coverage`
+
+- Analyze bundle size during the build process to identify potential optimizations.  
+`npm run analyze`
+
+## Coding Standards
+
+- Lints the code with ESLint to check for errors and enforce standards.  
+`npm run lint`
+
+- Format the code with Prettier, following specified style guidelines.  
+`npm run format`  
+
+## Pre-commit Hook
+
+Husky is used to run pre-commit hooks to ensure code quality before commits.  
+Modify the hook as needed by editing the `.husky/pre-commit` file.
+
+---
+
+<p align="center"><sup>Made with ♥ by <a href="https://ivstudio.com">ivstudio</a></sup></p>

eslint.config.mjs

@@ -0,0 +1,127 @@
+import pluginJs from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import pluginReact from 'eslint-plugin-react';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import tailwind from 'eslint-plugin-tailwindcss';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+    {
+        files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+        ignores: [
+            '.config/*',
+            'webpack/*',
+            'dist/*',
+            'coverage/*',
+            'node_modules',
+        ],
+    },
+    {
+        languageOptions: { globals: globals.browser },
+    },
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    pluginReact.configs.flat.recommended,
+    ...tailwind.configs['flat/recommended'],
+    eslintConfigPrettier,
+    {
+        plugins: {
+            'simple-import-sort': simpleImportSort,
+        },
+        settings: {
+            tailwindcss: {
+                // These are the default values but feel free to customize
+                callees: ['classnames', 'clsx', 'ctl'],
+                config: 'tailwind.config.js', // returned from `loadConfig()` utility if not provided
+                cssFiles: [
+                    '**/*.css',
+                    '!**/node_modules',
+                    '!**/.*',
+                    '!**/dist',
+                    '!**/build',
+                ],
+                cssFilesRefreshRate: 5_000,
+                removeDuplicates: true,
+                skipClassAttribute: false,
+                whitelist: [],
+                tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
+                classRegex: '^class(Name)?$', // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
+            },
+        },
+        rules: {
+            'simple-import-sort/imports': [
+                'error',
+                {
+                    groups: [
+                        ['^react'],
+                        // third-party imports
+                        ['^@?\\w'],
+                        // absolute imports
+                        ['^'],
+                        // relative imports
+                        ['^\\.'],
+                        // styles and types
+                        ['^(styles|types)(/.*|$)'],
+                        // CSS imports
+                        ['^.+\\.css$'],
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        rules: {
+            'no-duplicate-imports': 'error',
+            'no-redeclare': 'error',
+            'react/prefer-stateless-function': 'error',
+            'react/no-unused-prop-types': 'error',
+            'react/jsx-pascal-case': 'error',
+            'react/jsx-no-script-url': 'error',
+            'react/no-children-prop': 'error',
+            'react/no-danger': 'error',
+            'react/no-danger-with-children': 'error',
+            'react/no-unstable-nested-components': [
+                'error',
+                { allowAsProps: true },
+            ],
+            'react/jsx-fragments': 'error',
+            'react/destructuring-assignment': [
+                'error',
+                'always',
+                { destructureInSignature: 'always' },
+            ],
+            'react/jsx-no-leaked-render': [
+                'error',
+                { validStrategies: ['ternary'] },
+            ],
+            'react/jsx-max-depth': ['error', { max: 5 }],
+            'react/function-component-definition': [
+                'warn',
+                { namedComponents: 'arrow-function' },
+            ],
+            'react/jsx-key': [
+                'error',
+                {
+                    checkFragmentShorthand: true,
+                    checkKeyMustBeforeSpread: true,
+                    warnOnDuplicates: true,
+                },
+            ],
+            'react/jsx-no-useless-fragment': 'warn',
+            'react/jsx-curly-brace-presence': 'warn',
+            'react/no-typos': 'warn',
+            'react/display-name': 'warn',
+            'react/self-closing-comp': 'warn',
+            'react/jsx-sort-props': 'warn',
+            'react/react-in-jsx-scope': 'off',
+            'react/jsx-one-expression-per-line': 'off',
+            'react/prop-types': 'off',
+        },
+    },
+];

jest.config.ts

@@ -0,0 +1,30 @@
+export default {
+    // Enable coverage collection
+    collectCoverage: true,
+
+    // Specify the files for which coverage information should be collected
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
+
+    // Directory where Jest should output its coverage files
+    coverageDirectory: 'coverage',
+
+    // The test environment that will be used for testing
+    testEnvironment: 'jsdom',
+
+    // An array of file extensions your modules use
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+
+    // A list of paths to modules that run some code to configure or set up the testing environment before each test
+    setupFilesAfterEnv: ['<rootDir>/src/tests/setupTests.ts'],
+
+    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+    testPathIgnorePatterns: ['<rootDir>/node_modules'],
+
+    // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+    },
+
+    // Whether to use watchman for file crawling
+    watchman: false,
+};