create-react-adam 0.1.0

package/template/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint:check": "eslint .",
+    "lint": "eslint . --fix",
+    "format:check": "prettier --check .",
+    "format": "prettier --write .",
+    "setFormatToPrecommitHook": "echo \"#!/bin/bash\\n\\nSTAGED_JS_FILES=\\$(git diff --cached --name-only --diff-filter=ACM | grep -E '\\\\.(tsx?|js)\\$' || true)\\n\\nif [ -n \\\"\\$STAGED_JS_FILES\\\" ]; then\\n  echo \\\"\\$STAGED_JS_FILES\\\" | xargs npx prettier --write --ignore-unknown || exit 1\\n  echo \\\"\\$STAGED_JS_FILES\\\" | xargs npx eslint --fix || exit 1\\n  echo \\\"\\$STAGED_JS_FILES\\\" | xargs git add\\nfi\" > .git/hooks/pre-commit && chmod +x .git/hooks/pre-commit",
+    "_itDoesNotWork": "echo '\\n🔍 Troubleshooting the react project...\\n' && echo '\\n📦 Step 1: Installing Node dependencies\\n' && npm install --silent && echo '✅ Node dependencies installed successfully!' && echo '\\n🔄 Step 2: Checking if Vite dev server is running\\n' && (pgrep -f \"vite\" > /dev/null && echo '✅ Vite dev server is running') || echo '❌ Vite dev server is not running. Start it with: npm run dev' && echo '\\n✅ Basic troubleshooting complete. If issues persist, please ask for help.'",
+    "itDoesNotWork": "npm run _itDoesNotWork --silent"
+  },
+  "dependencies": {
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-icons": "5.5.0",
+    "wouter": "3.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.0",
+    "@tailwindcss/vite": "4.1.16",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "eslint": "9.39.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-de-morgan": "2.0.0",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.4.24",
+    "eslint-plugin-unicorn": "62.0.0",
+    "prettier": "3.6.2",
+    "prettier-plugin-organize-imports": "4.3.0",
+    "prettier-plugin-tailwindcss": "0.7.1",
+    "tailwindcss": "4.1.16",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.46.2",
+    "vite": "7.1.12"
+  }
+}

package/template/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [["html"], ["allure-playwright"]],
+  use: {
+    baseURL: "http://localhost:5173",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/template/src/App.tsx

@@ -0,0 +1,17 @@
+import { Redirect, Route, Switch } from "wouter";
+import About from "./pages/About";
+import Home from "./pages/Home";
+import NotFound from "./pages/NotFound";
+
+const App = () => (
+  <Switch>
+    <Route path="/" component={Home} />
+    <Route path="/about" component={About} />
+    <Route path="/home">
+      <Redirect to="/" />
+    </Route>
+    <Route component={NotFound} />
+  </Switch>
+);
+
+export default App;

package/template/src/app.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", sans-serif;
+
+  --color-brand-primary: #3b82f6;
+  --color-brand-primaryHover: #2563eb;
+  --color-brand-primaryActive: #1d4ed8;
+
+  --color-brand-secondary: #8b5cf6;
+  --color-brand-secondaryHover: #7c3aed;
+  --color-brand-secondaryActive: #6d28d9;
+
+  --color-brand-success: #22c55e;
+  --color-brand-warning: #f59e0b;
+  --color-brand-danger: #ef4444;
+
+  --color-brand-black: #0f172a;
+  --color-brand-white: #ffffff;
+
+  --color-brand-gray: #64748b;
+  --color-brand-grayLight: #e2e8f0;
+  --color-brand-grayDark: #334155;
+
+  --color-brand-background: #f8fafc;
+  --color-brand-border: #cbd5e1;
+
+  --color-brand-disabled: #94a3b8;
+}

package/template/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./app.css";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Failed to find the root element");
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template/src/pages/About/index.no-utils.tsx

@@ -0,0 +1,39 @@
+import { Link } from "wouter";
+
+const About = () => {
+  return (
+    <div className="bg-brand-background flex min-h-screen flex-col items-center justify-center">
+      <div className="mx-auto max-w-2xl px-4 text-center">
+        <h1 className="text-brand-black mb-6 text-5xl font-bold">
+          About This Project
+        </h1>
+        <p className="text-brand-gray mb-8 text-xl">
+          This is a starter template created with create-react-adam. It includes
+          everything you need to build modern React applications.
+        </p>
+
+        <div className="mb-8 text-left">
+          <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+            Included Tools:
+          </h2>
+          <ul className="text-brand-gray space-y-2">
+            <li>⚛️ React 19 with TypeScript</li>
+            <li>⚡ Vite for fast development</li>
+            <li>🎨 Tailwind CSS for styling</li>
+            <li>🛣️ Wouter for lightweight routing</li>
+            <li>✨ ESLint & Prettier configured</li>
+          </ul>
+        </div>
+
+        <Link
+          href="/"
+          className="bg-brand-primary text-brand-white hover:bg-brand-primaryHover rounded-lg px-6 py-3 transition-colors"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default About;

package/template/src/pages/About/index.tsx

@@ -0,0 +1,97 @@
+import { Link } from "wouter";
+import { useReactPersist } from "../../utils/Storage";
+import { useUrlState } from "../../utils/useUrlState";
+
+const About = () => {
+  const [sharedCount, setSharedCount] = useReactPersist("sharedCounter", 0);
+  const [urlCount, setUrlCount] = useUrlState("counter", 0);
+
+  return (
+    <div className="bg-brand-background flex min-h-screen flex-col items-center justify-center">
+      <div className="mx-auto max-w-2xl px-4 text-center">
+        <h1 className="text-brand-black mb-6 text-5xl font-bold">
+          About This Project
+        </h1>
+        <p className="text-brand-gray mb-8 text-xl">
+          This is a starter template created with create-react-adam. It includes
+          everything you need to build modern React applications.
+        </p>
+
+        <div className="mb-8 space-y-6">
+          <div className="bg-brand-white rounded-lg p-6 shadow-md">
+            <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+              Shared Counter (localStorage)
+            </h2>
+            <p className="text-brand-gray mb-4">
+              This counter is shared between Home and About pages
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <button
+                onClick={() => setSharedCount(sharedCount - 1)}
+                className="bg-brand-danger text-brand-white hover:bg-brand-danger/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                -
+              </button>
+              <span className="text-brand-black text-3xl font-bold">
+                {sharedCount}
+              </span>
+              <button
+                onClick={() => setSharedCount(sharedCount + 1)}
+                className="bg-brand-success text-brand-white hover:bg-brand-success/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                +
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-brand-white rounded-lg p-6 shadow-md">
+            <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+              URL Counter
+            </h2>
+            <p className="text-brand-gray mb-4">
+              This counter syncs with URL parameters
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <button
+                onClick={() => setUrlCount(urlCount - 1)}
+                className="bg-brand-danger text-brand-white hover:bg-brand-danger/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                -
+              </button>
+              <span className="text-brand-black text-3xl font-bold">
+                {urlCount}
+              </span>
+              <button
+                onClick={() => setUrlCount(urlCount + 1)}
+                className="bg-brand-success text-brand-white hover:bg-brand-success/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                +
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-8 text-left">
+          <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+            Included Tools:
+          </h2>
+          <ul className="text-brand-gray space-y-2">
+            <li>⚛️ React 19 with TypeScript</li>
+            <li>⚡ Vite for fast development</li>
+            <li>🎨 Tailwind CSS for styling</li>
+            <li>🛣️ Wouter for lightweight routing</li>
+            <li>✨ ESLint & Prettier configured</li>
+          </ul>
+        </div>
+        <Link
+          href="/"
+          className="bg-brand-primary text-brand-white hover:bg-brand-primaryHover rounded-lg px-6 py-3 transition-colors"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default About;

package/template/src/pages/Home/index.no-utils.tsx

@@ -0,0 +1,53 @@
+import { Link } from "wouter";
+
+const Home = () => {
+  return (
+    <div className="bg-brand-background flex min-h-screen flex-col items-center justify-center">
+      <div className="mx-auto max-w-2xl px-4 text-center">
+        <h1 className="text-brand-black mb-6 text-5xl font-bold">
+          Welcome to Your React App
+        </h1>
+        <p className="text-brand-gray mb-8 text-xl">
+          Built with React, TypeScript, Vite, Wouter, and Tailwind CSS
+        </p>
+
+        <div className="mb-8">
+          <div className="bg-brand-white rounded-lg p-6 shadow-md">
+            <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+              Get Started
+            </h2>
+            <p className="text-brand-gray mb-4">
+              Edit{" "}
+              <code className="bg-brand-grayLight rounded px-2 py-1">
+                src/pages/Home/index.tsx
+              </code>{" "}
+              to customize this page.
+            </p>
+            <p className="text-brand-gray">
+              This is a clean starting point for your React application.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-center gap-4">
+          <Link
+            href="/about"
+            className="bg-brand-primary text-brand-white hover:bg-brand-primaryHover rounded-lg px-6 py-3 transition-colors"
+          >
+            About Page
+          </Link>
+          <a
+            href="https://react.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border-brand-border bg-brand-white text-brand-gray hover:bg-brand-grayLight rounded-lg border px-6 py-3 transition-colors"
+          >
+            Learn React
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

package/template/src/pages/Home/index.tsx

@@ -0,0 +1,94 @@
+import { Link } from "wouter";
+import { useReactPersist } from "../../utils/Storage";
+import { useUrlState } from "../../utils/useUrlState";
+
+const Home = () => {
+  const [sharedCount, setSharedCount] = useReactPersist("sharedCounter", 0);
+  const [urlCount, setUrlCount] = useUrlState("counter", 0);
+
+  return (
+    <div className="bg-brand-background flex min-h-screen flex-col items-center justify-center">
+      <div className="mx-auto max-w-2xl px-4 text-center">
+        <h1 className="text-brand-black mb-6 text-5xl font-bold">
+          Welcome to Your React App
+        </h1>
+        <p className="text-brand-gray mb-8 text-xl">
+          Built with React, TypeScript, Vite, Wouter, and Tailwind CSS
+        </p>
+
+        <div className="mb-8 space-y-6">
+          <div className="bg-brand-white rounded-lg p-6 shadow-md">
+            <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+              Shared Counter (localStorage)
+            </h2>
+            <p className="text-brand-gray mb-4">
+              This counter is shared between Home and About pages
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <button
+                onClick={() => setSharedCount(sharedCount - 1)}
+                className="bg-brand-danger text-brand-white hover:bg-brand-danger/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                -
+              </button>
+              <span className="text-brand-black text-3xl font-bold">
+                {sharedCount}
+              </span>
+              <button
+                onClick={() => setSharedCount(sharedCount + 1)}
+                className="bg-brand-success text-brand-white hover:bg-brand-success/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                +
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-brand-white rounded-lg p-6 shadow-md">
+            <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+              URL Counter
+            </h2>
+            <p className="text-brand-gray mb-4">
+              This counter syncs with URL parameters
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <button
+                onClick={() => setUrlCount(urlCount - 1)}
+                className="bg-brand-danger text-brand-white hover:bg-brand-danger/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                -
+              </button>
+              <span className="text-brand-black text-3xl font-bold">
+                {urlCount}
+              </span>
+              <button
+                onClick={() => setUrlCount(urlCount + 1)}
+                className="bg-brand-success text-brand-white hover:bg-brand-success/90 rounded-lg px-4 py-2 transition-colors"
+              >
+                +
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-center gap-4">
+          <Link
+            href="/about"
+            className="bg-brand-primary text-brand-white hover:bg-brand-primaryHover rounded-lg px-6 py-3 transition-colors"
+          >
+            About Page
+          </Link>
+          <a
+            href="https://react.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border-brand-border bg-brand-white text-brand-gray hover:bg-brand-grayLight rounded-lg border px-6 py-3 transition-colors"
+          >
+            Learn React
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

package/template/src/pages/NotFound/index.tsx

@@ -0,0 +1,23 @@
+import { Link } from "wouter";
+
+const NotFound = () => (
+  <div className="bg-brand-background flex min-h-screen flex-col items-center justify-center">
+    <div className="text-center">
+      <h1 className="text-brand-black text-9xl font-bold">404</h1>
+      <p className="text-brand-black mt-4 text-2xl font-semibold">
+        Page Not Found
+      </p>
+      <p className="text-brand-gray mt-2">
+        The page you're looking for doesn't exist.
+      </p>
+      <Link
+        href="/"
+        className="bg-brand-primary text-brand-white hover:bg-brand-primaryHover mt-6 inline-block rounded-lg px-6 py-3 transition-colors"
+      >
+        Go Home
+      </Link>
+    </div>
+  </div>
+);
+
+export default NotFound;

package/template/src/utils/Internet.ts

@@ -0,0 +1,22 @@
+import { DependencyList, useEffect } from "react";
+
+export function useInternetConnected(
+  callback: () => void,
+  dependencies: DependencyList = [],
+) {
+  useEffect(() => {
+    if (navigator.onLine) {
+      callback();
+    }
+    const handleOnline = () => {
+      callback();
+    };
+
+    globalThis.addEventListener("online", handleOnline);
+
+    return () => {
+      globalThis.removeEventListener("online", handleOnline);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+}

package/template/src/utils/Storage.ts

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useState } from "react";
+
+interface StorageOptions {
+  secondsTillExpiry?: number;
+}
+
+interface StorageValue<T> {
+  value: T;
+  expiry?: number;
+}
+
+class Storage {
+  load<T>(key: string, defaultValue: T): T {
+    try {
+      const item = localStorage.getItem(key);
+      if (!item) {
+        return defaultValue;
+      }
+
+      const parsed = JSON.parse(item) as StorageValue<T>;
+
+      if (parsed.expiry && Date.now() > parsed.expiry) {
+        localStorage.removeItem(key);
+        return defaultValue;
+      }
+
+      return parsed.value;
+    } catch {
+      return defaultValue;
+    }
+  }
+
+  loadAsString(key: string): string | null {
+    return localStorage.getItem(key);
+  }
+
+  save<T>(key: string, value: T, options?: StorageOptions): void {
+    try {
+      const storageValue: StorageValue<T> = {
+        value,
+        ...(options?.secondsTillExpiry && {
+          expiry: Date.now() + options.secondsTillExpiry * 1000,
+        }),
+      };
+      localStorage.setItem(key, JSON.stringify(storageValue));
+    } catch (error) {
+      console.error("Failed to save to localStorage:", error);
+    }
+  }
+
+  remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
+  clear(): void {
+    localStorage.clear();
+  }
+}
+
+const storage = new Storage();
+
+export function useReactPersist<T>(
+  key: string,
+  defaultValue: T,
+  options?: StorageOptions,
+): [T, (value: T | ((prev: T) => T)) => void] {
+  const [state, setState] = useState<T>(() => storage.load(key, defaultValue));
+
+  useEffect(() => {
+    storage.save(key, state, options);
+  }, [key, state, options]);
+
+  const setPersistedState = useCallback((value: T | ((prev: T) => T)) => {
+    setState((prevState) => {
+      const newState =
+        typeof value === "function"
+          ? (value as (prev: T) => T)(prevState)
+          : value;
+      return newState;
+    });
+  }, []);
+
+  return [state, setPersistedState];
+}
+
+export default storage;

package/template/src/utils/classNames.ts

@@ -0,0 +1,3 @@
+export default function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}

package/template/src/utils/useUrlState.ts

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+import { useLocation, useSearch } from "wouter";
+
+export function useUrlState(
+  key: string,
+  defaultValue: number,
+): [number, (value: number) => void] {
+  const [, setLocation] = useLocation();
+  const searchParams = useSearch();
+
+  const params = new URLSearchParams(searchParams);
+  const urlValue = params.get(key);
+  const value = urlValue ? Number.parseInt(urlValue, 10) : defaultValue;
+
+  const setValue = useCallback(
+    (newValue: number) => {
+      const currentParams = new URLSearchParams(globalThis.location.search);
+      currentParams.set(key, newValue.toString());
+      setLocation(
+        `${globalThis.location.pathname}?${currentParams.toString()}`,
+      );
+    },
+    [key, setLocation],
+  );
+
+  return [value, setValue];
+}

package/template/src/vite-env.d.ts

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

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-unresolved
+import tailwindcss from "@tailwindcss/vite";
+// eslint-disable-next-line import/no-unresolved
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});