npm - create-react-forge - Versions diffs - 1.0.2 → 1.0.4 - Mend

create-react-forge 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/src/templates/overlays/runtime/nextjs/tsconfig.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/src/templates/overlays/runtime/vite/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/templates/overlays/runtime/vite/manifest.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "runtime-vite",
+  "version": "1.0.0",
+  "description": "Vite runtime with React SPA setup following bulletproof-react patterns",
+  "compatibleWith": ["base"],
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "react-error-boundary": "^4.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.4.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}

package/src/templates/overlays/runtime/vite/public/vite.svg ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
2	+

package/src/templates/overlays/runtime/vite/src/app/App.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { AppProvider } from '@/app/provider';
+import { AppRouter } from '@/app/router';
+export function App() {
+  return (
+    <AppProvider>
+      <AppRouter />
+    </AppProvider>
+  );
+}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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