create-react-forge 1.6.0 → 1.6.1

package/src/templates/overlays/styling/styled-components/_vite/src/features/misc/routes/NotFound.tsx

@@ -0,0 +1,89 @@
+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 ErrorCode = styled.p`
+  font-size: 1rem;
+  font-weight: 600;
+  color: #4f46e5;
+`;
+
+const Title = styled.h1`
+  margin-top: 1rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+
+  @media (min-width: 640px) {
+    font-size: 3rem;
+  }
+`;
+
+const Description = styled.p`
+  margin-top: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  color: #4b5563;
+`;
+
+const ButtonGroup = styled.div`
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`;
+
+const PrimaryButton = styled(Link)`
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  text-decoration: none;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #6366f1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+  }
+`;
+
+export function NotFound() {
+  return (
+    <Container>
+      <Content>
+        <ErrorCode>404</ErrorCode>
+        <Title>Page not found</Title>
+        <Description>
+          Sorry, we couldn't find the page you're looking for.
+        </Description>
+        <ButtonGroup>
+          <PrimaryButton to="/">Go back home</PrimaryButton>
+        </ButtonGroup>
+      </Content>
+    </Container>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/styled-components/_vite/src/main.tsx

@@ -0,0 +1,13 @@
+import { App } from '@/app/App';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+
+
+

package/src/templates/overlays/styling/styled-components/manifest.json

@@ -13,7 +13,11 @@
   "scripts": {},
   "filePatterns": {
     "include": ["**/*"],
-    "exclude": ["manifest.json"]
+    "exclude": ["manifest.json", "_vite", "_nextjs"]
+  },
+  "runtimeOverrides": {
+    "vite": "_vite",
+    "nextjs": "_nextjs"
   }
 }
 

package/src/templates/overlays/styling/tailwind/_nextjs/src/app/error.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    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">
+          {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"
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
+

package/src/templates/overlays/styling/tailwind/_nextjs/src/app/loading.tsx

@@ -0,0 +1,12 @@
+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>
+  );
+}
+

package/src/templates/overlays/styling/tailwind/_nextjs/src/app/not-found.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+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">
+          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"
+          >
+            Go back home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/templates/overlays/styling/tailwind/_nextjs/src/app/page.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+
+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">
+          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"
+          >
+            Get started
+          </Link>
+          <a
+            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>
+  );
+}
+

package/src/templates/overlays/styling/tailwind/manifest.json

@@ -2,7 +2,7 @@
   "name": "styling-tailwind",
   "version": "1.0.0",
   "description": "Tailwind CSS styling setup with modern configuration",
-  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "compatibleWith": ["runtime-nextjs"],
   "dependencies": {},
   "devDependencies": {
     "tailwindcss": "^4.0.0",
@@ -13,7 +13,9 @@
   "scripts": {},
   "filePatterns": {
     "include": ["**/*"],
-    "exclude": ["manifest.json"]
+    "exclude": ["manifest.json", "_nextjs"]
+  },
+  "runtimeOverrides": {
+    "nextjs": "_nextjs"
   }
 }
-

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

@@ -1,55 +0,0 @@
-/* Base styles - will be enhanced by styling overlay (tailwind/css-modules) */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-#root {
-  isolation: isolate;
-  height: 100%;
-}
-

package/src/templates/overlays/styling/css-modules/src/components/ui/Button.module.css

@@ -1,87 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-md);
-  font-weight: 600;
-  transition: all 0.15s ease;
-  cursor: pointer;
-  border: none;
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Variants */
-.primary {
-  background-color: var(--color-primary-600);
-  color: white;
-}
-
-.primary:hover:not(:disabled) {
-  background-color: var(--color-primary-500);
-}
-
-.secondary {
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
-}
-
-.secondary:hover:not(:disabled) {
-  background-color: var(--color-gray-200);
-}
-
-.outline {
-  background-color: transparent;
-  border: 1px solid var(--color-gray-300);
-  color: var(--color-gray-700);
-}
-
-.outline:hover:not(:disabled) {
-  background-color: var(--color-gray-50);
-}
-
-.danger {
-  background-color: var(--color-red-600);
-  color: white;
-}
-
-.danger:hover:not(:disabled) {
-  background-color: var(--color-red-500);
-}
-
-/* Sizes */
-.sm {
-  padding: var(--spacing-1) var(--spacing-2);
-  font-size: 0.75rem;
-}
-
-.md {
-  padding: var(--spacing-2) var(--spacing-4);
-  font-size: 0.875rem;
-}
-
-.lg {
-  padding: var(--spacing-3) var(--spacing-4);
-  font-size: 1rem;
-}
-
-/* Loading spinner */
-.spinner {
-  width: 1rem;
-  height: 1rem;
-  margin-right: var(--spacing-2);
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: var(--radius-full);
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-

package/src/templates/overlays/styling/css-modules/src/styles/globals.css

@@ -1,91 +0,0 @@
-/* CSS Custom Properties (Design Tokens) */
-:root {
-  /* Colors */
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #dbeafe;
-  --color-primary-500: #3b82f6;
-  --color-primary-600: #2563eb;
-  --color-primary-700: #1d4ed8;
-
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-
-  /* Typography */
-  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    monospace;
-
-  /* Spacing */
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-
-  /* Border Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-full: 9999px;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-/* Reset */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-family-sans);
-  line-height: 1.5;
-  color: var(--color-gray-900);
-  background-color: white;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Focus styles */
-:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
-}
-