create-react-forge 1.5.2 → 1.6.1

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

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

@@ -1,26 +1,84 @@
 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;
+
+  @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 Actions = styled.div`
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`;
+
+const HomeLink = 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;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+  }
+`;
 
 export 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">
+    <Container>
+      <Content>
+        <ErrorCode>404</ErrorCode>
+        <Title>Page not found</Title>
+        <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
-            to="/"
-            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>
+        </Description>
+        <Actions>
+          <HomeLink to="/">Go back home</HomeLink>
+        </Actions>
+      </Content>
+    </Container>
   );
 }
-

package/src/templates/overlays/runtime/vite/src/main.tsx

@@ -1,5 +1,4 @@
 import { App } from '@/app/App';
-import '@/styles/globals.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -8,4 +7,3 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <App />
   </React.StrictMode>
 );
-

package/src/templates/overlays/state/jotai/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "state-jotai",
+  "version": "1.0.0",
+  "description": "Jotai state management with primitive and flexible atoms",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {
+    "jotai": "^2.10.0"
+  },
+  "devDependencies": {},
+  "scripts": {},
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/state/jotai/src/stores/atoms.ts

@@ -0,0 +1,52 @@
+import { atom } from 'jotai';
+
+/**
+ * Auth atoms for user authentication state
+ */
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+export const userAtom = atom<User | null>(null);
+export const isAuthenticatedAtom = atom((get) => get(userAtom) !== null);
+
+/**
+ * Notification atoms for app-wide notifications
+ */
+export interface Notification {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  title?: string;
+}
+
+export const notificationsAtom = atom<Notification[]>([]);
+
+// Derived atom to add a notification
+export const addNotificationAtom = atom(
+  null,
+  (get, set, notification: Omit<Notification, 'id'>) => {
+    const id = crypto.randomUUID();
+    set(notificationsAtom, [...get(notificationsAtom), { ...notification, id }]);
+  }
+);
+
+// Derived atom to remove a notification
+export const removeNotificationAtom = atom(
+  null,
+  (get, set, id: string) => {
+    set(
+      notificationsAtom,
+      get(notificationsAtom).filter((n) => n.id !== id)
+    );
+  }
+);
+
+/**
+ * Theme atom for dark/light mode
+ */
+export type Theme = 'light' | 'dark' | 'system';
+export const themeAtom = atom<Theme>('system');
+

package/src/templates/overlays/state/jotai/src/stores/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Jotai Store Exports
+ *
+ * This file exports all atoms for easy importing throughout the application.
+ * Import atoms from this file to use Jotai state management.
+ *
+ * @example
+ * import { userAtom, notificationsAtom } from '@/stores';
+ * import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+ *
+ * // Read and write
+ * const [user, setUser] = useAtom(userAtom);
+ *
+ * // Read only
+ * const notifications = useAtomValue(notificationsAtom);
+ *
+ * // Write only
+ * const addNotification = useSetAtom(addNotificationAtom);
+ */
+
+export {
+  addNotificationAtom, isAuthenticatedAtom,
+  // Notification atoms
+  notificationsAtom, removeNotificationAtom,
+  // Theme atom
+  themeAtom,
+  // Auth atoms
+  userAtom, type Notification, type Theme, type User
+} from './atoms.js';
+

package/src/templates/overlays/styling/css/_nextjs/src/app/error.css

@@ -0,0 +1,49 @@
+.error-container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-content {
+  text-align: center;
+}
+
+.error-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-danger);
+}
+
+.error-message {
+  margin-top: 1rem;
+  color: var(--color-text-muted);
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  margin-top: 1.5rem;
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary);
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  color: white;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+
+
+

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect } from 'react';
+import './error.css';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="error-container" role="alert">
+      <div className="error-content">
+        <h1 className="error-title">Something went wrong</h1>
+        <p className="error-message">
+          {error.message || 'An unexpected error occurred'}
+        </p>
+        <button onClick={reset} className="btn btn-primary">
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
+
+
+
+

package/src/templates/overlays/styling/css/_nextjs/src/app/loading.css

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

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

@@ -0,0 +1,13 @@
+import './loading.css';
+
+export default function Loading() {
+  return (
+    <div className="spinner-container">
+      <div className="spinner" role="status" aria-label="Loading" />
+    </div>
+  );
+}
+
+
+
+

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

@@ -0,0 +1,70 @@
+.not-found-container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.not-found-content {
+  text-align: center;
+}
+
+.not-found-code {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.not-found-title {
+  margin-top: 1rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--color-text);
+}
+
+@media (min-width: 640px) {
+  .not-found-title {
+    font-size: 3rem;
+  }
+}
+
+.not-found-description {
+  margin-top: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  color: var(--color-text-muted);
+}
+
+.not-found-buttons {
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary);
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  color: white;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+
+
+

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

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

package/src/templates/overlays/styling/css/_nextjs/src/app/page.css

@@ -0,0 +1,73 @@
+.landing-container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.landing-content {
+  text-align: center;
+}
+
+.landing-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--color-text);
+}
+
+@media (min-width: 640px) {
+  .landing-title {
+    font-size: 3.75rem;
+  }
+}
+
+.landing-description {
+  margin-top: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  color: var(--color-text-muted);
+}
+
+.landing-buttons {
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary);
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  color: white;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.btn-link {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  color: var(--color-text);
+}
+
+.btn-link:hover {
+  color: var(--color-primary);
+}
+
+
+
+