@spectrabrain/eds 0.1.0 → 0.1.1

package/consumer/align/templates/src/app/providers/ErrorHandler.tsx

@@ -0,0 +1,29 @@
+import { useEffect, type ReactNode } from "react";
+import { isAxiosError } from "axios";
+import { toast } from "sonner";
+import eventBus from "@/shared/lib/eventBus";
+
+interface ErrorHandlerProviderProps {
+  children: ReactNode;
+}
+
+// Shows the 401 and 403 errors shared/api emits on the event bus as toasts. Session handling
+// (for example clearing the auth store on 401) belongs here, not in shared/api.
+export function ErrorHandlerProvider({ children }: ErrorHandlerProviderProps) {
+  useEffect(() => {
+    const handleError = (error: unknown) => {
+      const status = isAxiosError(error) ? error.response?.status : undefined;
+      if (status === 401) {
+        toast.error("로그인이 필요합니다.");
+      } else if (status === 403) {
+        toast.error("접근 권한이 없습니다.");
+      }
+    };
+    eventBus.subscribe("error", handleError);
+    return () => {
+      eventBus.unsubscribe("error", handleError);
+    };
+  }, []);
+
+  return children;
+}

package/consumer/align/templates/src/app/router/index.tsx

@@ -0,0 +1,23 @@
+import { Suspense, lazy } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { ErrorBoundary } from "@/app/providers/ErrorBoundary";
+
+// One lazy chunk per page. Replace this example with the project's routes and paths. Screens of a backend
+// resource use pages/<domain>/<action>/page.tsx; screens outside one (home, login, not-found) use pages/<name>/page.tsx.
+const HomePage = lazy(() => import("@/pages/home/page"));
+
+function Router() {
+  return (
+    <ErrorBoundary>
+      {/* Use a skeleton from widgets/layout as the fallback when the pages have one. */}
+      <Suspense fallback={null}>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+export default Router;

package/consumer/align/templates/src/app/styles/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "tw-animate-css";

package/consumer/align/templates/src/mocks/browser.ts

@@ -0,0 +1,5 @@
+import { setupWorker } from "msw/browser";
+import { handlers } from "./handlers";
+
+// The Service Worker that answers API requests in npm run dev:mock.
+export const worker = setupWorker(...handlers);

package/consumer/align/templates/src/mocks/handlers.ts

@@ -0,0 +1,4 @@
+import type { RequestHandler } from "msw";
+
+// Spread each domain's handlers from mocks/<domain>/index.ts, for example ...accountHandlers.
+export const handlers: RequestHandler[] = [];

package/consumer/align/templates/src/shared/api/index.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+import eventBus from "@/shared/lib/eventBus";
+
+// The one axios instance for backend calls. Keep the base URL, headers and credentials the
+// project already sends: the backend contract does not change.
+const axiosInstance = axios.create({
+  baseURL: window.location.origin, // Replace with the base URL the existing requests use.
+  // withCredentials: true, // Enable only when the existing requests send cookies.
+});
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const status = error.response?.status;
+    // shared/ never imports entities: app/providers/ErrorHandler reacts to these events.
+    if (status === 401 || status === 403) {
+      eventBus.emit("error", error);
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default axiosInstance;

package/consumer/align/templates/src/shared/api/queryClient.ts

@@ -0,0 +1,24 @@
+import { QueryClient } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Fresh for a short window so quick remounts and navigation do not refetch;
+      // mutations invalidate the keys they change.
+      staleTime: 1000 * 30,
+      gcTime: 1000 * 60 * 5,
+      retry: (failureCount, error) => {
+        const status = isAxiosError(error) ? error.response?.status : undefined;
+        // Client errors (4xx) do not succeed on retry.
+        if (status && status >= 400 && status < 500) {
+          return false;
+        }
+        return failureCount < 2;
+      },
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+});

package/consumer/align/templates/src/shared/lib/eventBus.ts

@@ -0,0 +1,44 @@
+type EventCallback<T> = (data: T) => void;
+
+// App-wide events (for example "error") that lower layers emit and app/providers handle.
+class EventBus {
+  private static instance: EventBus;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private eventListeners: Map<string, Set<EventCallback<any>>> = new Map();
+
+  private constructor() {}
+
+  public static getInstance(): EventBus {
+    if (!EventBus.instance) {
+      EventBus.instance = new EventBus();
+    }
+    return EventBus.instance;
+  }
+
+  public subscribe<T>(event: string, callback: EventCallback<T>): void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, new Set());
+    }
+    this.eventListeners.get(event)?.add(callback);
+  }
+
+  public unsubscribe<T>(event: string, callback: EventCallback<T>): void {
+    const callbacks = this.eventListeners.get(event);
+    if (callbacks) {
+      callbacks.delete(callback);
+      if (callbacks.size === 0) {
+        this.eventListeners.delete(event);
+      }
+    }
+  }
+
+  public emit<T>(event: string, data: T): void {
+    const callbacks = this.eventListeners.get(event);
+    if (callbacks) {
+      callbacks.forEach((callback) => callback(data));
+    }
+  }
+}
+
+export const eventBus = EventBus.getInstance();
+export default eventBus;

package/consumer/align/templates/src/shared/lib/utils/index.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/consumer/align/templates/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

package/consumer/align/templates/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./{{eds.srcDir}}/*"]
+    },
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": {{eds.strict}}
+  },
+  "include": ["{{eds.srcDir}}"]
+}

package/consumer/align/templates/vite.config.babel.ts

@@ -0,0 +1,36 @@
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
+import tailwindcss from "@tailwindcss/vite";
+
+// Vite 5–7 with @vitejs/plugin-react 4 or 5. Merge rules: PLAN.md step 3.
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [["babel-plugin-react-compiler", {}]],
+      },
+    }),
+    svgr(),
+    // The Vite plugin rebases the url() of imported package CSS, so the EDS font is emitted.
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./{{eds.srcDir}}", import.meta.url)),
+    },
+    // One React instance for the app and the pre-bundled dependencies.
+    dedupe: ["react", "react-dom"],
+  },
+  build: {
+    // Production bundles drop console.log/info/debug and debugger; console.error and warn stay.
+    minify: "terser",
+    terserOptions: {
+      compress: {
+        drop_console: ["log", "info", "debug"],
+        drop_debugger: true,
+      },
+    },
+  },
+});

package/consumer/align/templates/vite.config.rolldown.ts

@@ -0,0 +1,35 @@
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vite";
+import react, { reactCompilerPreset } from "@vitejs/plugin-react";
+import babel from "@rolldown/plugin-babel";
+import svgr from "vite-plugin-svgr";
+import tailwindcss from "@tailwindcss/vite";
+
+// Vite 8+ with @vitejs/plugin-react 6, which runs the React Compiler through @rolldown/plugin-babel.
+// Merge rules: PLAN.md step 3.
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+    svgr(),
+    // The Vite plugin rebases the url() of imported package CSS, so the EDS font is emitted.
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./{{eds.srcDir}}", import.meta.url)),
+    },
+    // One React instance for the app and the pre-bundled dependencies.
+    dedupe: ["react", "react-dom"],
+  },
+  build: {
+    // Production bundles drop console.log/info/debug and debugger; console.error and warn stay.
+    minify: "terser",
+    terserOptions: {
+      compress: {
+        drop_console: ["log", "info", "debug"],
+        drop_debugger: true,
+      },
+    },
+  },
+});