create-react-forge 1.5.2 → 1.6.1

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

@@ -0,0 +1,27 @@
+import { ErrorFallback } from '@/components/errors/ErrorFallback';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { GlobalStyles } from '@/styles/globals';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { BrowserRouter } from 'react-router-dom';
+
+type AppProviderProps = {
+  children: React.ReactNode;
+};
+
+export function AppProvider({ children }: AppProviderProps) {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <BrowserRouter>
+          <GlobalStyles />
+          {children}
+        </BrowserRouter>
+      </ErrorBoundary>
+    </Suspense>
+  );
+}
+
+
+
+

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

@@ -0,0 +1,59 @@
+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;
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #6366f1;
+  }
+`;
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <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/styling/styled-components/_vite/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,47 @@
+import styled, { keyframes } from 'styled-components';
+
+type LoadingSpinnerProps = {
+  size?: 'sm' | 'md' | 'lg';
+};
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const sizes = {
+  sm: '1rem',
+  md: '2rem',
+  lg: '4rem',
+};
+
+const Container = 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-radius: 50%;
+  border: 2px solid #d1d5db;
+  border-top-color: #4f46e5;
+  animation: ${spin} 1s linear infinite;
+`;
+
+export function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {
+  return (
+    <Container>
+      <Spinner $size={size} role="status" aria-label="Loading" />
+    </Container>
+  );
+}
+
+
+
+

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

@@ -0,0 +1,100 @@
+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;
+  color: #111827;
+
+  @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 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;
+  }
+`;
+
+const SecondaryLink = styled.a`
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: #111827;
+  text-decoration: none;
+
+  &:hover {
+    color: #4f46e5;
+  }
+`;
+
+export function Landing() {
+  return (
+    <Container>
+      <Content>
+        <Title>Welcome to Your App</Title>
+        <Description>
+          A production-ready React application scaffolded with create-react-forge.
+        </Description>
+        <ButtonGroup>
+          <PrimaryButton to="/dashboard">Get started</PrimaryButton>
+          <SecondaryLink
+            href="https://github.com/alan2207/bulletproof-react"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more <span aria-hidden="true">→</span>
+          </SecondaryLink>
+        </ButtonGroup>
+      </Content>
+    </Container>
+  );
+}
+
+
+
+

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