create-react-adam 0.2.1 → 0.3.0

package/template/src/components/Button.tsx

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef } from "react";
+import { ButtonVariant } from "../types/ui";
+
+interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  variant?: ButtonVariant;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: "bg-brand-primary hover:bg-brand-primaryHover",
+  success: "bg-brand-success hover:bg-brand-success/90",
+  danger: "bg-brand-danger hover:bg-brand-danger/90",
+};
+
+const Button = ({ variant = "primary", className, ...props }: ButtonProps) => (
+  <button
+    className={[
+      "text-brand-white rounded-lg px-4 py-2 transition-colors",
+      variantClasses[variant],
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ")}
+    {...props}
+  />
+);
+
+export default Button;

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

@@ -1,6 +1,11 @@
+import { useEffect } from "react";
 import { Link } from "wouter";
 
 const About = () => {
+  useEffect(() => {
+    document.title = "About | __PROJECT_NAME__";
+  }, []);
+
   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">

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

@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import { Link } from "wouter";
+import Button from "../../components/Button";
 import { useReactPersist } from "../../utils/Storage";
 import { useUrlState } from "../../utils/useUrlState";
 
@@ -6,6 +8,10 @@ const About = () => {
   const [sharedCount, setSharedCount] = useReactPersist("sharedCounter", 0);
   const [urlCount, setUrlCount] = useUrlState("counter", 0);
 
+  useEffect(() => {
+    document.title = "About | __PROJECT_NAME__";
+  }, []);
+
   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">
@@ -26,21 +32,23 @@ const About = () => {
               This counter is shared between Home and About pages
             </p>
             <div className="flex items-center justify-center gap-4">
-              <button
+              <Button
+                variant="danger"
+                aria-label="Decrease shared counter"
                 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>
+              </Button>
               <span className="text-brand-black text-3xl font-bold">
                 {sharedCount}
               </span>
-              <button
+              <Button
+                variant="success"
+                aria-label="Increase shared counter"
                 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>
+              </Button>
             </div>
           </div>
 
@@ -52,21 +60,23 @@ const About = () => {
               This counter syncs with URL parameters
             </p>
             <div className="flex items-center justify-center gap-4">
-              <button
+              <Button
+                variant="danger"
+                aria-label="Decrease URL counter"
                 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>
+              </Button>
               <span className="text-brand-black text-3xl font-bold">
                 {urlCount}
               </span>
-              <button
+              <Button
+                variant="success"
+                aria-label="Increase URL counter"
                 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>
+              </Button>
             </div>
           </div>
         </div>

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

@@ -1,6 +1,14 @@
+import { useEffect, useState } from "react";
 import { Link } from "wouter";
+import Button from "../../components/Button";
 
 const Home = () => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    document.title = "__PROJECT_NAME__";
+  }, []);
+
   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">
@@ -11,7 +19,7 @@ const Home = () => {
           Built with React, TypeScript, Vite, Wouter, and Tailwind CSS
         </p>
 
-        <div className="mb-8">
+        <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">
               Get Started
@@ -27,6 +35,34 @@ const Home = () => {
               This is a clean starting point for your React application.
             </p>
           </div>
+
+          <div className="bg-brand-white rounded-lg p-6 shadow-md">
+            <h2 className="text-brand-black mb-4 text-2xl font-semibold">
+              Counter
+            </h2>
+            <p className="text-brand-gray mb-4">
+              A simple counter using the shared Button component
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <Button
+                variant="danger"
+                aria-label="Decrease counter"
+                onClick={() => setCount(count - 1)}
+              >
+                -
+              </Button>
+              <span className="text-brand-black text-3xl font-bold">
+                {count}
+              </span>
+              <Button
+                variant="success"
+                aria-label="Increase counter"
+                onClick={() => setCount(count + 1)}
+              >
+                +
+              </Button>
+            </div>
+          </div>
         </div>
 
         <div className="flex justify-center gap-4">

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

@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import { Link } from "wouter";
+import Button from "../../components/Button";
 import { useReactPersist } from "../../utils/Storage";
 import { useUrlState } from "../../utils/useUrlState";
 
@@ -6,6 +8,10 @@ const Home = () => {
   const [sharedCount, setSharedCount] = useReactPersist("sharedCounter", 0);
   const [urlCount, setUrlCount] = useUrlState("counter", 0);
 
+  useEffect(() => {
+    document.title = "__PROJECT_NAME__";
+  }, []);
+
   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">
@@ -25,21 +31,23 @@ const Home = () => {
               This counter is shared between Home and About pages
             </p>
             <div className="flex items-center justify-center gap-4">
-              <button
+              <Button
+                variant="danger"
+                aria-label="Decrease shared counter"
                 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>
+              </Button>
               <span className="text-brand-black text-3xl font-bold">
                 {sharedCount}
               </span>
-              <button
+              <Button
+                variant="success"
+                aria-label="Increase shared counter"
                 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>
+              </Button>
             </div>
           </div>
 
@@ -51,21 +59,23 @@ const Home = () => {
               This counter syncs with URL parameters
             </p>
             <div className="flex items-center justify-center gap-4">
-              <button
+              <Button
+                variant="danger"
+                aria-label="Decrease URL counter"
                 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>
+              </Button>
               <span className="text-brand-black text-3xl font-bold">
                 {urlCount}
               </span>
-              <button
+              <Button
+                variant="success"
+                aria-label="Increase URL counter"
                 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>
+              </Button>
             </div>
           </div>
         </div>

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

@@ -1,23 +1,30 @@
+import { useEffect } from "react";
 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>
+const NotFound = () => {
+  useEffect(() => {
+    document.title = "Page Not Found | __PROJECT_NAME__";
+  }, []);
+
+  return (
+    <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>
-  </div>
-);
+  );
+};
 
 export default NotFound;

package/template/src/types/ui.ts

@@ -0,0 +1 @@
+export type ButtonVariant = "primary" | "success" | "danger";

package/template/src/utils/classNames.ts

@@ -1,3 +1,24 @@
-export default function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
+type ClassValue = string | false | null | undefined | Record<string, boolean>;
+
+export default function classNames(...classes: ClassValue[]): string {
+  const result: string[] = [];
+
+  for (const entry of classes) {
+    if (!entry) {
+      continue;
+    }
+
+    if (typeof entry === "string") {
+      result.push(entry);
+      continue;
+    }
+
+    for (const [name, isEnabled] of Object.entries(entry)) {
+      if (isEnabled) {
+        result.push(name);
+      }
+    }
+  }
+
+  return result.join(" ");
 }

package/template/src/utils/helpers.ts

@@ -0,0 +1,22 @@
+// Browsers store setTimeout delays as a 32-bit signed integer, so any delay
+// above 2^31 - 1 ms (~24.8 days) overflows and fires immediately.
+const MAX_TIMEOUT_MS = 2_147_483_647;
+
+/**
+ * Drop-in replacement for setTimeout that clamps delays larger than the
+ * maximum 32-bit signed integer (2,147,483,647 ms / ~24.8 days) instead of
+ * letting them overflow and fire immediately.
+ */
+export function safeTimeout<TArgs extends unknown[]>(
+  callback: (...callbackArgs: TArgs) => void,
+  delay: number,
+  ...args: TArgs
+): ReturnType<typeof globalThis.setTimeout> {
+  if (delay > MAX_TIMEOUT_MS) {
+    console.error(
+      `safeTimeout: delay ${delay} exceeds the maximum of ${MAX_TIMEOUT_MS} ms (~24.8 days). Using the maximum value.`,
+    );
+    delay = MAX_TIMEOUT_MS;
+  }
+  return globalThis.setTimeout(callback, delay, ...args);
+}

package/template/src/utils/useUrlState.ts

@@ -4,16 +4,28 @@ import { useLocation, useSearch } from "wouter";
 export function useUrlState(
   key: string,
   defaultValue: number,
-): [number, (value: number) => void] {
+): [number, (value: number) => void];
+export function useUrlState(
+  key: string,
+  defaultValue: string,
+): [string, (value: string) => void];
+export function useUrlState(
+  key: string,
+  defaultValue: string | number,
+): [string, (value: string) => void] | [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 value = urlValue
+    ? typeof defaultValue === "number"
+      ? Number.parseInt(urlValue, 10)
+      : urlValue
+    : defaultValue;
 
   const setValue = useCallback(
-    (newValue: number) => {
+    (newValue: string | number) => {
       const currentParams = new URLSearchParams(globalThis.location.search);
       currentParams.set(key, newValue.toString());
       setLocation(
@@ -23,5 +35,6 @@ export function useUrlState(
     [key, setLocation],
   );
 
-  return [value, setValue];
+  // The overloads guarantee value/setValue agree with the default's type.
+  return [value, setValue] as [string, (value: string) => void];
 }