create-react-forge 1.5.2 → 1.6.1

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

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { cn } from '@/lib/utils';
+import styled, { css } from 'styled-components';
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
@@ -7,29 +7,110 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   isLoading?: boolean;
 };
 
-const variants = {
-  primary:
-    'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline-indigo-600',
-  secondary:
-    'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:outline-gray-600',
-  outline:
-    'border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus-visible:outline-gray-600',
-  ghost:
-    'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:outline-gray-600',
-  danger:
-    'bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600',
+const variantStyles = {
+  primary: css`
+    background-color: #4f46e5;
+    color: white;
+    &:hover:not(:disabled) {
+      background-color: #6366f1;
+    }
+  `,
+  secondary: css`
+    background-color: #f3f4f6;
+    color: #111827;
+    &:hover:not(:disabled) {
+      background-color: #e5e7eb;
+    }
+  `,
+  outline: css`
+    background-color: transparent;
+    color: #374151;
+    border: 1px solid #d1d5db;
+    &:hover:not(:disabled) {
+      background-color: #f9fafb;
+    }
+  `,
+  ghost: css`
+    background-color: transparent;
+    color: #374151;
+    &:hover:not(:disabled) {
+      background-color: #f3f4f6;
+    }
+  `,
+  danger: css`
+    background-color: #dc2626;
+    color: white;
+    &:hover:not(:disabled) {
+      background-color: #ef4444;
+    }
+  `,
 };
 
-const sizes = {
-  sm: 'px-2.5 py-1.5 text-xs',
-  md: 'px-3.5 py-2.5 text-sm',
-  lg: 'px-4 py-3 text-base',
+const sizeStyles = {
+  sm: css`
+    padding: 0.375rem 0.625rem;
+    font-size: 0.75rem;
+  `,
+  md: css`
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+  `,
+  lg: css`
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+  `,
 };
 
+const StyledButton = styled.button<{
+  $variant: ButtonProps['variant'];
+  $size: ButtonProps['size'];
+}>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-weight: 600;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s, color 0.2s;
+  border: none;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+  }
+
+  ${(props) => variantStyles[props.$variant || 'primary']}
+  ${(props) => sizeStyles[props.$size || 'md']}
+`;
+
+const LoadingSpinner = styled.span`
+  margin-right: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
-      className,
       variant = 'primary',
       size = 'md',
       isLoading = false,
@@ -40,27 +121,18 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     return (
-      <button
+      <StyledButton
         ref={ref}
-        className={cn(
-          'inline-flex items-center justify-center rounded-md font-semibold shadow-sm transition-colors',
-          'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          variants[variant],
-          sizes[size],
-          className
-        )}
+        $variant={variant}
+        $size={size}
         disabled={disabled || isLoading}
         {...props}
       >
-        {isLoading && (
-          <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-        )}
+        {isLoading && <LoadingSpinner />}
         {children}
-      </button>
+      </StyledButton>
     );
   }
 );
 
 Button.displayName = 'Button';
-

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>
   );
 }
-