chore: add configuration files for linting, formatting, and husky pre-commit hooks

.bumrc

@@ -0,0 +1 @@
+1.2.1

.husky/commit-msg

@@ -0,0 +1 @@
+commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1 @@
+lint-staged

.markdownlint.json

@@ -0,0 +1,8 @@
+{
+  "default": true,
+  "MD013": false,
+  "MD026": false,
+  "MD033": false,
+  "MD040": false,
+  "MD041": false
+}

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+.git
+dist
+build
+.react-router
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "singleAttributePerLine": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "streetsidesoftware.code-spell-checker",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "wayou.vscode-todo-highlight",
+    "vivaxy.vscode-conventional-commits",
+    "bradlc.vscode-tailwindcss",
+    "usernamehw.errorlens"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,31 @@
+{
+  "todohighlight.keywords": [
+    {
+      "text": "WARNING:",
+      "backgroundColor": "#e74c3c",
+      "color": "#fff"
+    }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "css.lint.unknownAtRules": "ignore",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.tabSize": 2,
+  "editor.renderWhitespace": "all",
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    "class:list",
+    "containerClassName",
+    "inputClassName",
+    "labelClassName",
+    "buttonClassName",
+    "leftNodeClassName",
+    "rightNodeClassName"
+  ],
+  "cSpell.words": []
+}

app/entry.client.tsx

@@ -0,0 +1,12 @@
+import { startTransition, StrictMode } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import { HydratedRouter } from 'react-router/dom'
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>,
+  )
+})

app/entry.server.tsx

@@ -0,0 +1,71 @@
+import { PassThrough } from 'node:stream'
+
+import { createReadableStreamFromReadable } from '@react-router/node'
+import { isbot } from 'isbot'
+import type { RenderToPipeableStreamOptions } from 'react-dom/server'
+import { renderToPipeableStream } from 'react-dom/server'
+import { ServerRouter } from 'react-router'
+import type { AppLoadContext, EntryContext } from 'react-router'
+
+export const streamTimeout = 5000
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false
+    const userAgent = request.headers.get('user-agent')
+
+    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    const readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
+        ? 'onAllReady'
+        : 'onShellReady'
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter
+        context={routerContext}
+        url={request.url}
+      />,
+      {
+        [readyOption]() {
+          shellRendered = true
+          const body = new PassThrough()
+          const stream = createReadableStreamFromReadable(body)
+
+          responseHeaders.set('Content-Type', 'text/html')
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          )
+
+          pipe(body)
+        },
+        onShellError(error: unknown) {
+          reject(error)
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error) // eslint-disable-line no-console
+          }
+        },
+      },
+    )
+
+    // Abort the rendering stream after the `streamTimeout` so it has time to
+    // flush down the rejected boundaries
+    setTimeout(abort, streamTimeout + 1000)
+  })
+}

app/layouts/home/welcome/index.tsx

@@ -1,10 +1,10 @@
-import logoDark from "./logo-dark.svg";
+import logoDark from './logo-dark.svg'
-import logoLight from "./logo-light.svg";
+import logoLight from './logo-light.svg'
 
 export function Welcome() {
   return (
     <main className="flex items-center justify-center pt-16 pb-4">
-      <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
+      <div className="flex min-h-0 flex-1 flex-col items-center gap-16">
         <header className="flex flex-col items-center gap-9">
           <div className="w-[500px] max-w-[100vw] p-4">
             <img
@@ -19,9 +19,9 @@ export function Welcome() {
             />
           </div>
         </header>
-        <div className="max-w-[300px] w-full space-y-6 px-4">
+        <div className="w-full max-w-[300px] space-y-6 px-4">
-          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
+          <nav className="space-y-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
-            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
+            <p className="text-center leading-6 text-gray-700 dark:text-gray-200">
               What&apos;s next?
             </p>
             <ul>
@@ -43,13 +43,13 @@ export function Welcome() {
         </div>
       </div>
     </main>
-  );
+  )
 }
 
 const resources = [
   {
-    href: "https://reactrouter.com/docs",
+    href: 'https://reactrouter.com/docs',
-    text: "React Router Docs",
+    text: 'React Router Docs',
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -68,8 +68,8 @@ const resources = [
     ),
   },
   {
-    href: "https://rmx.as/discord",
+    href: 'https://rmx.as/discord',
-    text: "Join Discord",
+    text: 'Join Discord',
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -86,4 +86,4 @@ const resources = [
       </svg>
     ),
   },
-];
+]

app/root.tsx

@@ -5,30 +5,33 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "react-router";
+} from 'react-router'
 
-import type { Route } from "./+types/root";
+import type { Route } from './+types/root'
-import "./app.css";
+import './app.css'
 
 export const links: Route.LinksFunction = () => [
-  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   {
-    rel: "preconnect",
+    rel: 'preconnect',
-    href: "https://fonts.gstatic.com",
+    href: 'https://fonts.gstatic.com',
-    crossOrigin: "anonymous",
+    crossOrigin: 'anonymous',
   },
   {
-    rel: "stylesheet",
+    rel: 'stylesheet',
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
   },
-];
+]
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
         <Meta />
         <Links />
       </head>
@@ -38,38 +41,38 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Scripts />
       </body>
     </html>
-  );
+  )
 }
 
 export default function App() {
-  return <Outlet />;
+  return <Outlet />
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = "Oops!";
+  let message = 'Oops!'
-  let details = "An unexpected error occurred.";
+  let details = 'An unexpected error occurred.'
-  let stack: string | undefined;
+  let stack: string | undefined
 
   if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
+    message = error.status === 404 ? '404' : 'Error'
     details =
       error.status === 404
-        ? "The requested page could not be found."
+        ? 'The requested page could not be found.'
-        : error.statusText || details;
+        : error.statusText || details
   } else if (import.meta.env.DEV && error && error instanceof Error) {
-    details = error.message;
+    details = error.message
-    stack = error.stack;
+    stack = error.stack
   }
 
   return (
-    <main className="pt-16 p-4 container mx-auto">
+    <main className="container mx-auto p-4 pt-16">
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
+        <pre className="w-full overflow-x-auto p-4">
           <code>{stack}</code>
         </pre>
       )}
     </main>
-  );
+  )
 }

app/routes/home.tsx

@@ -1,13 +1,14 @@
-import type { Route } from "./+types/home";
+import { Welcome } from '~/layouts/home/welcome'
-import { Welcome } from "../welcome/welcome";
+
+import type { Route } from './+types/home'
 
 export function meta({}: Route.MetaArgs) {
   return [
-    { title: "New React Router App" },
+    { title: 'New React Router App' },
-    { name: "description", content: "Welcome to React Router!" },
+    { name: 'description', content: 'Welcome to React Router!' },
-  ];
+  ]
 }
 
 export default function Home() {
-  return <Welcome />;
+  return <Welcome />
 }

commitlint.config.js

@@ -0,0 +1,15 @@
+import isIgnored from '@commitlint/is-ignored'
+
+// commitlint.config.js
+const Configuration = {
+  extends: ['@commitlint/config-conventional'],
+  formatter: '@commitlint/format',
+  ignores: [(commit) => isIgnored(commit)],
+  plugins: [
+    {
+      rules: {},
+    },
+  ],
+}
+
+export default Configuration

eslint.config.mjs

@@ -0,0 +1,123 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import importPlugin from 'eslint-plugin-import'
+import tseslint from 'typescript-eslint'
+import tsEslintParser from '@typescript-eslint/parser'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules', '.react-router'] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      jsxA11y.flatConfigs.recommended,
+      importPlugin.flatConfigs.recommended,
+      eslintPluginUnicorn.configs['flat/recommended'],
+    ],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    languageOptions: {
+      parser: tsEslintParser,
+    },
+    settings: {
+      'import/internal-regex': '^~/',
+      'import/resolver': {
+        typescript: {
+          project: './tsconfig.json',
+        },
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      'unicorn/filename-case': [
+        'error',
+        {
+          case: 'kebabCase',
+          ignore: ['App'],
+        },
+      ],
+      'unicorn/consistent-function-scoping': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'no-console': 'error',
+      'no-empty-pattern': 'off',
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: [
+                '../*',
+                '../',
+                '..',
+                '~/apis/*/*/*',
+                '~/configs/*/*',
+                '~/components/*/*/*',
+                '~/contexts/*/*',
+                '~/factories/*/*',
+                '~/pages/*/*',
+                '~/hooks/*/*',
+                '~/layouts/*/*/*',
+                '~/schemas/*/*/*',
+                '~/types/*/*',
+                '~/utils/*/**',
+              ],
+            },
+          ],
+        },
+      ],
+      'linebreak-style': ['error', 'unix'],
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            'parent',
+            'sibling',
+            'index',
+            'object',
+          ],
+          'newlines-between': 'always',
+          alphabetize: { order: 'asc', caseInsensitive: true },
+        },
+      ],
+      'import/default': 'off',
+      'import/no-named-as-default-member': 'off',
+      'import/no-named-as-default': 'off',
+      'import/no-unresolved': [
+        'error',
+        {
+          ignore: [
+            '\\.(png|svg|jpg|jpeg|gif|webp|ico|bmp|tiff|mp4|mp3|woff|woff2|eot|ttf|otf)$',
+          ],
+        },
+      ],
+    },
+  },
+)

knip.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "entry": [
+    "react-router.config.ts",
+    "app/root.tsx",
+    "app/entry.{client,server}.{js,jsx,ts,tsx}",
+    "app/routes/**/*.{js,ts,tsx}",
+    "app/routes.ts",
+    "server.{js,ts}"
+  ],
+  "project": ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
+  "ignore": ["app/components/icons/*.tsx"],
+  "ignoreDependencies": ["tailwindcss", "react-router-devtools"]
+}

lint-staged.config.js

@@ -0,0 +1,6 @@
+const Configuration = {
+  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
+  '*.{css,scss}': 'prettier --write',
+}
+
+export default Configuration

package.json

@@ -6,7 +6,12 @@
     "build": "react-router build",
     "dev": "react-router dev",
     "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "react-router typegen && tsc"
+    "typecheck": "react-router typegen && tsc",
+    "knip": "knip",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "prepare": "husky",
+    "validate": "pnpm lint && pnpm typecheck && pnpm knip"
   },
   "dependencies": {
     "@react-router/node": "^7.1.3",
@@ -17,14 +22,32 @@
     "react-router": "^7.1.3"
   },
   "devDependencies": {
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@commitlint/format": "^19.5.0",
+    "@commitlint/is-ignored": "^19.6.0",
+    "@eslint/js": "^9.19.0",
     "@react-router/dev": "^7.1.3",
     "@tailwindcss/vite": "^4.0.0",
-    "@types/node": "^20",
+    "@types/node": "^20.17.16",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
+    "@typescript-eslint/parser": "^8.22.0",
+    "eslint": "^8.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "knip": "^5.43.6",
+    "lint-staged": "^15.4.3",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react-router-devtools": "^1.1.0",
     "tailwindcss": "^4.0.0",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
     "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.1.4"
   }