create-react-forge 1.0.2 → 1.0.3

package/src/templates/overlays/runtime/vite/src/app/provider.tsx

@@ -0,0 +1,20 @@
+import { ErrorFallback } from '@/components/errors/ErrorFallback';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+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>{children}</BrowserRouter>
+      </ErrorBoundary>
+    </Suspense>
+  );
+}
+

package/src/templates/overlays/runtime/vite/src/app/router.tsx

@@ -0,0 +1,19 @@
+import { Landing } from '@/features/misc/routes/Landing';
+import { NotFound } from '@/features/misc/routes/NotFound';
+import { useRoutes } from 'react-router-dom';
+
+export function AppRouter() {
+  const routes = useRoutes([
+    {
+      path: '/',
+      element: <Landing />,
+    },
+    {
+      path: '*',
+      element: <NotFound />,
+    },
+  ]);
+
+  return routes;
+}
+

package/src/templates/overlays/runtime/vite/src/components/errors/ErrorFallback.tsx

@@ -0,0 +1,21 @@
+import { FallbackProps } from 'react-error-boundary';
+
+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>
+  );
+}
+

package/src/templates/overlays/runtime/vite/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,23 @@
+type LoadingSpinnerProps = {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+};
+
+const sizes = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-16 w-16',
+};
+
+export function LoadingSpinner({ size = 'md', className = '' }: 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>
+  );
+}
+

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

@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom';
+
+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">
+          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
+            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/runtime/vite/src/features/misc/routes/NotFound.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+
+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">
+          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>
+  );
+}
+

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

@@ -0,0 +1,11 @@
+import { App } from '@/app/App';
+import '@/styles/globals.css';
+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/runtime/vite/src/styles/globals.css

@@ -0,0 +1,55 @@
+/* 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/runtime/vite/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+

package/src/templates/overlays/runtime/vite/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
+

package/src/templates/overlays/runtime/vite/vite.config.ts

@@ -0,0 +1,22 @@
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});
+

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

@@ -0,0 +1,17 @@
+{
+  "name": "state-redux",
+  "version": "1.0.0",
+  "description": "Redux Toolkit state management with typed hooks",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.2.0",
+    "react-redux": "^9.1.0"
+  },
+  "devDependencies": {},
+  "scripts": {},
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/state/redux/src/stores/Provider.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Provider } from 'react-redux';
+import { store } from './store';
+
+type StoreProviderProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * Redux Provider component
+ * Wrap your app with this to enable Redux state management
+ */
+export function StoreProvider({ children }: StoreProviderProps) {
+  return <Provider store={store}>{children}</Provider>;
+}
+

package/src/templates/overlays/state/redux/src/stores/hooks.ts

@@ -0,0 +1,11 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+/**
+ * Typed hooks for Redux following bulletproof-react patterns
+ * Use these instead of plain `useDispatch` and `useSelector`
+ */
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+

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

@@ -0,0 +1,17 @@
+export { useAppDispatch, useAppSelector } from './hooks';
+export { store, type AppDispatch, type RootState } from './store';
+
+// Notifications
+export {
+    addNotification, clearNotifications, removeNotification, selectNotifications,
+    type Notification,
+    type NotificationType
+} from './slices/notifications';
+
+// Auth
+export {
+    logout, selectCurrentUser,
+    selectIsAuthenticated,
+    selectToken, setCredentials, updateUser
+} from './slices/auth';
+

package/src/templates/overlays/state/redux/src/stores/slices/auth.ts

@@ -0,0 +1,54 @@
+import type { User } from '@/types/api';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+/**
+ * Auth slice following bulletproof-react patterns
+ */
+
+type AuthState = {
+  user: User | null;
+  token: string | null;
+  isAuthenticated: boolean;
+};
+
+const initialState: AuthState = {
+  user: null,
+  token: null,
+  isAuthenticated: false,
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    setCredentials: (
+      state,
+      action: PayloadAction<{ user: User; token: string }>
+    ) => {
+      state.user = action.payload.user;
+      state.token = action.payload.token;
+      state.isAuthenticated = true;
+    },
+    logout: (state) => {
+      state.user = null;
+      state.token = null;
+      state.isAuthenticated = false;
+    },
+    updateUser: (state, action: PayloadAction<Partial<User>>) => {
+      if (state.user) {
+        state.user = { ...state.user, ...action.payload };
+      }
+    },
+  },
+});
+
+export const { setCredentials, logout, updateUser } = authSlice.actions;
+
+export const authReducer = authSlice.reducer;
+
+// Selectors
+export const selectCurrentUser = (state: { auth: AuthState }) => state.auth.user;
+export const selectIsAuthenticated = (state: { auth: AuthState }) =>
+  state.auth.isAuthenticated;
+export const selectToken = (state: { auth: AuthState }) => state.auth.token;
+

package/src/templates/overlays/state/redux/src/stores/slices/notifications.ts

@@ -0,0 +1,58 @@
+import { generateId } from '@/lib/utils';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+/**
+ * Notifications slice following bulletproof-react patterns
+ */
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+
+export type Notification = {
+  id: string;
+  type: NotificationType;
+  title: string;
+  message?: string;
+};
+
+type NotificationsState = {
+  notifications: Notification[];
+};
+
+const initialState: NotificationsState = {
+  notifications: [],
+};
+
+const notificationsSlice = createSlice({
+  name: 'notifications',
+  initialState,
+  reducers: {
+    addNotification: (
+      state,
+      action: PayloadAction<Omit<Notification, 'id'>>
+    ) => {
+      const notification = {
+        ...action.payload,
+        id: generateId(),
+      };
+      state.notifications.push(notification);
+    },
+    removeNotification: (state, action: PayloadAction<string>) => {
+      state.notifications = state.notifications.filter(
+        (n) => n.id !== action.payload
+      );
+    },
+    clearNotifications: (state) => {
+      state.notifications = [];
+    },
+  },
+});
+
+export const { addNotification, removeNotification, clearNotifications } =
+  notificationsSlice.actions;
+
+export const notificationsReducer = notificationsSlice.reducer;
+
+// Selectors
+export const selectNotifications = (state: { notifications: NotificationsState }) =>
+  state.notifications.notifications;
+

package/src/templates/overlays/state/redux/src/stores/store.ts

@@ -0,0 +1,27 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { authReducer } from './slices/auth';
+import { notificationsReducer } from './slices/notifications';
+
+/**
+ * Redux store configuration following bulletproof-react patterns
+ */
+
+export const store = configureStore({
+  reducer: {
+    notifications: notificationsReducer,
+    auth: authReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        // Ignore these action types for serialization check
+        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
+      },
+    }),
+  devTools: process.env.NODE_ENV !== 'production',
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+

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

@@ -0,0 +1,16 @@
+{
+  "name": "state-zustand",
+  "version": "1.0.0",
+  "description": "Zustand state management following bulletproof-react patterns",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {},
+  "scripts": {},
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/state/zustand/src/stores/auth.ts

@@ -0,0 +1,48 @@
+import type { User } from '@/types/api';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+/**
+ * Auth store with persistence following bulletproof-react patterns
+ */
+
+type AuthState = {
+  user: User | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  setAuth: (user: User, token: string) => void;
+  logout: () => void;
+};
+
+export const useAuth = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+
+      setAuth: (user, token) =>
+        set({
+          user,
+          token,
+          isAuthenticated: true,
+        }),
+
+      logout: () =>
+        set({
+          user: null,
+          token: null,
+          isAuthenticated: false,
+        }),
+    }),
+    {
+      name: 'auth-storage',
+      partialize: (state) => ({
+        user: state.user,
+        token: state.token,
+        isAuthenticated: state.isAuthenticated,
+      }),
+    }
+  )
+);
+

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

@@ -0,0 +1,3 @@
+export { useAuth } from './auth';
+export { useNotifications, type Notification, type NotificationType } from './notifications';
+

package/src/templates/overlays/state/zustand/src/stores/notifications.ts

@@ -0,0 +1,54 @@
+import { generateId } from '@/lib/utils';
+import { create } from 'zustand';
+
+/**
+ * Notification store following bulletproof-react patterns
+ */
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+
+export type Notification = {
+  id: string;
+  type: NotificationType;
+  title: string;
+  message?: string;
+  duration?: number;
+};
+
+type NotificationsState = {
+  notifications: Notification[];
+  addNotification: (notification: Omit<Notification, 'id'>) => void;
+  removeNotification: (id: string) => void;
+  clearNotifications: () => void;
+};
+
+export const useNotifications = create<NotificationsState>((set) => ({
+  notifications: [],
+
+  addNotification: (notification) => {
+    const id = generateId();
+    const newNotification = { ...notification, id };
+
+    set((state) => ({
+      notifications: [...state.notifications, newNotification],
+    }));
+
+    // Auto-remove after duration (default 5 seconds)
+    const duration = notification.duration ?? 5000;
+    if (duration > 0) {
+      setTimeout(() => {
+        set((state) => ({
+          notifications: state.notifications.filter((n) => n.id !== id),
+        }));
+      }, duration);
+    }
+  },
+
+  removeNotification: (id) =>
+    set((state) => ({
+      notifications: state.notifications.filter((n) => n.id !== id),
+    })),
+
+  clearNotifications: () => set({ notifications: [] }),
+}));
+

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

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