create-react-forge 1.5.2 → 1.6.1

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

@@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  border-radius: 50%;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  animation: spin 1s linear infinite;
+}
+
+.sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.md {
+  width: 2rem;
+  height: 2rem;
+}
+
+.lg {
+  width: 4rem;
+  height: 4rem;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+

package/src/templates/overlays/styling/css-modules/_vite/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,23 @@
+import styles from './LoadingSpinner.module.css';
+
+type LoadingSpinnerProps = {
+  size?: 'sm' | 'md' | 'lg';
+};
+
+export function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {
+  const sizeClass = styles[size] || styles.md;
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={`${styles.spinner} ${sizeClass}`}
+        role="status"
+        aria-label="Loading"
+      />
+    </div>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/css-modules/_vite/src/features/misc/routes/Landing.module.css

@@ -0,0 +1,73 @@
+.container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  text-align: center;
+}
+
+.title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--color-text);
+}
+
+@media (min-width: 640px) {
+  .title {
+    font-size: 3.75rem;
+  }
+}
+
+.description {
+  margin-top: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  color: var(--color-text-muted);
+}
+
+.buttons {
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.primaryBtn {
+  display: inline-block;
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary);
+  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;
+}
+
+.primaryBtn:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.linkBtn {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: var(--color-text);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.linkBtn:hover {
+  color: var(--color-primary);
+}
+
+
+
+

package/src/templates/overlays/styling/css-modules/_vite/src/features/misc/routes/Landing.tsx

@@ -0,0 +1,32 @@
+import { Link } from 'react-router-dom';
+import styles from './Landing.module.css';
+
+export function Landing() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <h1 className={styles.title}>Welcome to Your App</h1>
+        <p className={styles.description}>
+          A production-ready React application scaffolded with create-react-forge.
+        </p>
+        <div className={styles.buttons}>
+          <Link to="/dashboard" className={styles.primaryBtn}>
+            Get started
+          </Link>
+          <a
+            href="https://github.com/alan2207/bulletproof-react"
+            className={styles.linkBtn}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more <span aria-hidden="true">→</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/css-modules/_vite/src/features/misc/routes/NotFound.module.css

@@ -0,0 +1,67 @@
+.container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  text-align: center;
+}
+
+.code {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.title {
+  margin-top: 1rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--color-text);
+}
+
+@media (min-width: 640px) {
+  .title {
+    font-size: 3rem;
+  }
+}
+
+.description {
+  margin-top: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  color: var(--color-text-muted);
+}
+
+.buttons {
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.primaryBtn {
+  display: inline-block;
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary);
+  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;
+}
+
+.primaryBtn:hover {
+  background-color: var(--color-primary-hover);
+}
+
+
+
+

package/src/templates/overlays/styling/css-modules/_vite/src/features/misc/routes/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import styles from './NotFound.module.css';
+
+export function NotFound() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <p className={styles.code}>404</p>
+        <h1 className={styles.title}>Page not found</h1>
+        <p className={styles.description}>
+          Sorry, we couldn't find the page you're looking for.
+        </p>
+        <div className={styles.buttons}>
+          <Link to="/" className={styles.primaryBtn}>
+            Go back home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/css-modules/manifest.json

@@ -1,14 +1,17 @@
 {
   "name": "styling-css-modules",
   "version": "1.0.0",
-  "description": "CSS Modules styling with scoped CSS",
+  "description": "CSS Modules styling solution",
   "compatibleWith": ["runtime-vite", "runtime-nextjs"],
   "dependencies": {},
   "devDependencies": {},
   "scripts": {},
   "filePatterns": {
     "include": ["**/*"],
-    "exclude": ["manifest.json"]
+    "exclude": ["manifest.json", "_vite", "_nextjs"]
+  },
+  "runtimeOverrides": {
+    "vite": "_vite",
+    "nextjs": "_nextjs"
   }
 }
-

package/src/templates/overlays/styling/css-modules/src/css.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+
+
+

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/error.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useEffect } from 'react';
+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 default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <Container role="alert">
+      <Content>
+        <Title>Something went wrong</Title>
+        <Message>{error.message || 'An unexpected error occurred'}</Message>
+        <RetryButton onClick={reset}>Try again</RetryButton>
+      </Content>
+    </Container>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { Providers } from './providers';
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'A production-ready Next.js application',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/loading.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import styled, { keyframes } from 'styled-components';
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Spinner = styled.div`
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 2px solid #d1d5db;
+  border-top-color: #4f46e5;
+  animation: ${spin} 1s linear infinite;
+`;
+
+export default function Loading() {
+  return (
+    <Container>
+      <Spinner role="status" aria-label="Loading" />
+    </Container>
+  );
+}
+
+
+
+

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

@@ -0,0 +1,91 @@
+'use client';
+
+import Link from 'next/link';
+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 default 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 href="/">Go back home</PrimaryButton>
+        </ButtonGroup>
+      </Content>
+    </Container>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/page.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import Link from 'next/link';
+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 default function HomePage() {
+  return (
+    <Container>
+      <Content>
+        <Title>Welcome to Your App</Title>
+        <Description>
+          A production-ready Next.js application scaffolded with create-react-forge.
+        </Description>
+        <ButtonGroup>
+          <PrimaryButton href="/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/_nextjs/src/app/providers.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import StyledComponentsRegistry from '@/lib/StyledComponentsRegistry';
+import { GlobalStyles } from '@/styles/globals';
+import { ReactNode } from 'react';
+
+type ProvidersProps = {
+  children: ReactNode;
+};
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <StyledComponentsRegistry>
+      <GlobalStyles />
+      {children}
+    </StyledComponentsRegistry>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/styled-components/{src → _nextjs/src}/lib/StyledComponentsRegistry.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useState } from 'react';
 import { useServerInsertedHTML } from 'next/navigation';
+import React, { useState } from 'react';
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 
 export default function StyledComponentsRegistry({
@@ -10,6 +10,7 @@ export default function StyledComponentsRegistry({
   children: React.ReactNode;
 }) {
   // Only create stylesheet once with lazy initial state
+  // useState with initializer ensures this only runs once
   const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
 
   useServerInsertedHTML(() => {
@@ -18,7 +19,11 @@ export default function StyledComponentsRegistry({
     return <>{styles}</>;
   });
 
-  if (typeof window !== 'undefined') return <>{children}</>;
+  // On the client side, styled-components automatically injects styles
+  // We only need StyleSheetManager on the server for SSR collection
+  if (typeof window !== 'undefined') {
+    return <>{children}</>;
+  }
 
   return (
     <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
@@ -27,3 +32,6 @@ export default function StyledComponentsRegistry({
   );
 }
 
+
+
+