create-react-forge 1.6.0 → 1.6.1

package/src/templates/overlays/base/src/components/ui/Input.tsx

@@ -1,51 +1,77 @@
 import { forwardRef } from 'react';
-import { cn } from '@/lib/utils';
+import styled from 'styled-components';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
   error?: string;
 };
 
+const InputWrapper = styled.div`
+  width: 100%;
+`;
+
+const Label = styled.label`
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+`;
+
+const StyledInput = styled.input<{ $hasError?: boolean }>`
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  color: #111827;
+  background-color: white;
+  border: 1px solid ${(props) => (props.$hasError ? '#fca5a5' : '#d1d5db')};
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${(props) => (props.$hasError ? '#ef4444' : '#4f46e5')};
+    box-shadow: 0 0 0 2px ${(props) => (props.$hasError ? '#fecaca' : '#c7d2fe')};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: #f9fafb;
+    color: #6b7280;
+  }
+`;
+
+const ErrorMessage = styled.p`
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #dc2626;
+`;
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, error, id, ...props }, ref) => {
+  ({ label, error, id, ...props }, ref) => {
     const inputId = id || props.name;
 
     return (
-      <div className="w-full">
-        {label && (
-          <label
-            htmlFor={inputId}
-            className="mb-1 block text-sm font-medium text-gray-700"
-          >
-            {label}
-          </label>
-        )}
-        <input
+      <InputWrapper>
+        {label && <Label htmlFor={inputId}>{label}</Label>}
+        <StyledInput
           ref={ref}
           id={inputId}
-          className={cn(
-            'block w-full rounded-md border-0 px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset',
-            'placeholder:text-gray-400',
-            'focus:ring-2 focus:ring-inset focus:ring-indigo-600',
-            'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',
-            error
-              ? 'ring-red-300 focus:ring-red-500'
-              : 'ring-gray-300',
-            className
-          )}
+          $hasError={!!error}
           aria-invalid={error ? 'true' : 'false'}
           aria-describedby={error ? `${inputId}-error` : undefined}
           {...props}
         />
-        {error && (
-          <p id={`${inputId}-error`} className="mt-1 text-sm text-red-600">
-            {error}
-          </p>
-        )}
-      </div>
+        {error && <ErrorMessage id={`${inputId}-error`}>{error}</ErrorMessage>}
+      </InputWrapper>
     );
   }
 );
 
 Input.displayName = 'Input';
-

package/src/templates/overlays/base/src/lib/utils.ts

@@ -1,12 +1,3 @@
-import { clsx, type ClassValue } from 'clsx';
-
-/**
- * Utility function for constructing className strings conditionally
- */
-export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
-}
-
 /**
  * Format a date to a human-readable string
  */
@@ -31,4 +22,3 @@ export function sleep(ms: number): Promise<void> {
 export function generateId(): string {
   return Math.random().toString(36).substring(2, 9);
 }
-

package/src/templates/overlays/runtime/nextjs/src/app/error.tsx

@@ -2,6 +2,40 @@
 
 import { useEffect } from 'react';
 
+const styles = {
+  container: {
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    textAlign: 'center' as const,
+  },
+  title: {
+    fontSize: '1.5rem',
+    fontWeight: 700,
+    color: '#dc2626',
+  },
+  message: {
+    marginTop: '1rem',
+    color: '#4b5563',
+  },
+  retryButton: {
+    marginTop: '1.5rem',
+    padding: '0.625rem 0.875rem',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    color: 'white',
+    backgroundColor: '#4f46e5',
+    border: 'none',
+    borderRadius: '0.375rem',
+    boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    cursor: 'pointer',
+  },
+};
+
 export default function Error({
   error,
   reset,
@@ -10,25 +44,20 @@ export default function Error({
   reset: () => void;
 }) {
   useEffect(() => {
-    // Log the error to an error reporting service
     console.error(error);
   }, [error]);
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center" role="alert">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-red-600">Something went wrong</h1>
-        <p className="mt-4 text-gray-600">
+    <div style={styles.container} role="alert">
+      <div style={styles.content}>
+        <h1 style={styles.title}>Something went wrong</h1>
+        <p style={styles.message}>
           {error.message || 'An unexpected error occurred'}
         </p>
-        <button
-          onClick={reset}
-          className="mt-6 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
-        >
+        <button onClick={reset} style={styles.retryButton}>
           Try again
         </button>
       </div>
     </div>
   );
 }
-

package/src/templates/overlays/runtime/nextjs/src/app/loading.tsx

@@ -1,12 +1,30 @@
+const styles = {
+  container: {
+    display: 'flex',
+    minHeight: '100vh',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  spinner: {
+    width: '2rem',
+    height: '2rem',
+    border: '2px solid #d1d5db',
+    borderTopColor: '#4f46e5',
+    borderRadius: '50%',
+    animation: 'spin 1s linear infinite',
+  },
+};
+
 export default function Loading() {
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div
-        className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-indigo-600"
-        role="status"
-        aria-label="Loading"
-      />
+    <div style={styles.container}>
+      <style>{`
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+      <div style={styles.spinner} role="status" aria-label="Loading" />
     </div>
   );
 }
-

package/src/templates/overlays/runtime/nextjs/src/app/not-found.tsx

@@ -1,21 +1,63 @@
 import Link from 'next/link';
 
+const styles = {
+  container: {
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    textAlign: 'center' as const,
+  },
+  errorCode: {
+    fontSize: '1rem',
+    fontWeight: 600,
+    color: '#4f46e5',
+  },
+  title: {
+    marginTop: '1rem',
+    fontSize: '1.875rem',
+    fontWeight: 700,
+    letterSpacing: '-0.025em',
+  },
+  description: {
+    marginTop: '1.5rem',
+    fontSize: '1rem',
+    lineHeight: '1.75rem',
+    color: '#4b5563',
+  },
+  actions: {
+    marginTop: '2.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '1.5rem',
+  },
+  homeLink: {
+    padding: '0.625rem 0.875rem',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    color: 'white',
+    backgroundColor: '#4f46e5',
+    borderRadius: '0.375rem',
+    textDecoration: 'none',
+    boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  },
+};
+
 export default function NotFound() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center">
-      <div className="text-center">
-        <p className="text-base font-semibold text-indigo-600">404</p>
-        <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
-          Page not found
-        </h1>
-        <p className="mt-6 text-base leading-7 text-gray-600">
+    <div style={styles.container}>
+      <div style={styles.content}>
+        <p style={styles.errorCode}>404</p>
+        <h1 style={styles.title}>Page not found</h1>
+        <p style={styles.description}>
           Sorry, we couldn't find the page you're looking for.
         </p>
-        <div className="mt-10 flex items-center justify-center gap-x-6">
-          <Link
-            href="/"
-            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
+        <div style={styles.actions}>
+          <Link href="/" style={styles.homeLink}>
             Go back home
           </Link>
         </div>
@@ -23,4 +65,3 @@ export default function NotFound() {
     </div>
   );
 }
-

package/src/templates/overlays/runtime/nextjs/src/app/page.tsx

@@ -1,25 +1,68 @@
 import Link from 'next/link';
 
+const styles = {
+  container: {
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    textAlign: 'center' as const,
+  },
+  title: {
+    fontSize: '2.25rem',
+    fontWeight: 700,
+    letterSpacing: '-0.025em',
+  },
+  description: {
+    marginTop: '1.5rem',
+    fontSize: '1.125rem',
+    lineHeight: '2rem',
+    color: '#4b5563',
+  },
+  actions: {
+    marginTop: '2.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '1.5rem',
+  },
+  primaryLink: {
+    padding: '0.625rem 0.875rem',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    color: 'white',
+    backgroundColor: '#4f46e5',
+    borderRadius: '0.375rem',
+    textDecoration: 'none',
+    boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  },
+  secondaryLink: {
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    lineHeight: '1.5rem',
+    color: 'inherit',
+    textDecoration: 'none',
+  },
+};
+
 export default function HomePage() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
-          Welcome to Your App
-        </h1>
-        <p className="mt-6 text-lg leading-8 text-gray-600">
+    <div style={styles.container}>
+      <div style={styles.content}>
+        <h1 style={styles.title}>Welcome to Your App</h1>
+        <p style={styles.description}>
           A production-ready Next.js application scaffolded with create-react-forge.
         </p>
-        <div className="mt-10 flex items-center justify-center gap-x-6">
-          <Link
-            href="/dashboard"
-            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
+        <div style={styles.actions}>
+          <Link href="/dashboard" style={styles.primaryLink}>
             Get started
           </Link>
           <a
             href="https://github.com/alan2207/bulletproof-react"
-            className="text-sm font-semibold leading-6"
+            style={styles.secondaryLink}
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -30,4 +73,3 @@ export default function HomePage() {
     </div>
   );
 }
-

package/src/templates/overlays/runtime/nextjs/src/styles/globals.css

@@ -1,4 +1,4 @@
-/* Base styles - will be enhanced by styling overlay (tailwind/css-modules) */
+/* Base styles - will be enhanced by styling overlay (tailwind) if selected */
 
 *,
 *::before,

package/src/templates/overlays/runtime/vite/src/components/errors/ErrorFallback.tsx

@@ -1,21 +1,55 @@
 import { FallbackProps } from 'react-error-boundary';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Content = styled.div`
+  text-align: center;
+`;
+
+const Title = styled.h1`
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #dc2626;
+`;
+
+const Message = styled.p`
+  margin-top: 1rem;
+  color: #4b5563;
+`;
+
+const RetryButton = styled.button`
+  margin-top: 1.5rem;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  background-color: #4f46e5;
+  border: none;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #6366f1;
+  }
+`;
 
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center" role="alert">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-red-600">Something went wrong</h1>
-        <p className="mt-4 text-gray-600">
-          {error.message || 'An unexpected error occurred'}
-        </p>
-        <button
-          onClick={resetErrorBoundary}
-          className="mt-6 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
-        >
-          Try again
-        </button>
-      </div>
-    </div>
+    <Container role="alert">
+      <Content>
+        <Title>Something went wrong</Title>
+        <Message>{error.message || 'An unexpected error occurred'}</Message>
+        <RetryButton onClick={resetErrorBoundary}>Try again</RetryButton>
+      </Content>
+    </Container>
   );
 }
-

package/src/templates/overlays/runtime/vite/src/components/ui/LoadingSpinner.tsx

@@ -1,23 +1,43 @@
+import styled, { keyframes } from 'styled-components';
+
 type LoadingSpinnerProps = {
   size?: 'sm' | 'md' | 'lg';
-  className?: string;
 };
 
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
 const sizes = {
-  sm: 'h-4 w-4',
-  md: 'h-8 w-8',
-  lg: 'h-16 w-16',
+  sm: '1rem',
+  md: '2rem',
+  lg: '4rem',
 };
 
-export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+const SpinnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Spinner = styled.div<{ $size: 'sm' | 'md' | 'lg' }>`
+  width: ${(props) => sizes[props.$size]};
+  height: ${(props) => sizes[props.$size]};
+  border: 2px solid #d1d5db;
+  border-top-color: #4f46e5;
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+
+export function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {
   return (
-    <div className="flex items-center justify-center">
-      <div
-        className={`animate-spin rounded-full border-2 border-gray-300 border-t-indigo-600 ${sizes[size]} ${className}`}
-        role="status"
-        aria-label="Loading"
-      />
-    </div>
+    <SpinnerContainer>
+      <Spinner $size={size} role="status" aria-label="Loading" />
+    </SpinnerContainer>
   );
 }
-

package/src/templates/overlays/runtime/vite/src/features/misc/routes/Landing.tsx

@@ -1,33 +1,90 @@
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Content = styled.div`
+  text-align: center;
+`;
+
+const Title = styled.h1`
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+
+  @media (min-width: 640px) {
+    font-size: 3.75rem;
+  }
+`;
+
+const Description = styled.p`
+  margin-top: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  color: #4b5563;
+`;
+
+const Actions = styled.div`
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`;
+
+const PrimaryLink = styled(Link)`
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  background-color: #4f46e5;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  text-decoration: none;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #6366f1;
+  }
+`;
+
+const SecondaryLink = styled.a`
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
 
 export function Landing() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
-          Welcome to Your App
-        </h1>
-        <p className="mt-6 text-lg leading-8 text-gray-600">
+    <Container>
+      <Content>
+        <Title>Welcome to Your App</Title>
+        <Description>
           A production-ready React application scaffolded with create-react-forge.
-        </p>
-        <div className="mt-10 flex items-center justify-center gap-x-6">
-          <Link
-            to="/dashboard"
-            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
-            Get started
-          </Link>
-          <a
+        </Description>
+        <Actions>
+          <PrimaryLink to="/dashboard">Get started</PrimaryLink>
+          <SecondaryLink
             href="https://github.com/alan2207/bulletproof-react"
-            className="text-sm font-semibold leading-6"
             target="_blank"
             rel="noopener noreferrer"
           >
             Learn more <span aria-hidden="true">→</span>
-          </a>
-        </div>
-      </div>
-    </div>
+          </SecondaryLink>
+        </Actions>
+      </Content>
+    </Container>
   );
 }
-