npm - sh-ui-cli - Versions diffs - 0.76.0 → 0.78.0 - Mend

sh-ui-cli 0.76.0 → 0.78.0

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 (115) hide show

package/templates/nextjs-app/_arch/mes/src/lib/utils/getQueryClient.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { isServer } from '@tanstack/react-query';
+import {
+  getBrowserQueryClient,
+  getServerQueryClient,
+} from '@/lib/api/queryClient';
+/**
+ * RSC 와 클라이언트 양쪽에서 안전하게 호출 가능한 QueryClient 핸들.
+ * 서버에서는 React `cache()` 로 요청 단위 싱글턴, 브라우저에서는 모듈 싱글턴.
+ */
+export function getQueryClient() {
+  return isServer ? getServerQueryClient() : getBrowserQueryClient();
+}

package/templates/nextjs-app/_arch/mes/src/pages/sign-in/api.ts ADDED Viewed

@@ -0,0 +1,3 @@
+// 순수 fetch 레이어 — React 모름. hooks.ts 가 useQuery/useMutation 으로 감싼다.
+// 공용 fetcher 는 `@/lib/api/clientFetch` 등 src/lib/api/ 에서 import.
+export {};

package/templates/nextjs-app/_arch/mes/src/pages/sign-in/components/.gitkeep ADDED Viewed

File without changes

package/templates/nextjs-app/_arch/mes/src/pages/sign-in/hooks.ts ADDED Viewed

@@ -0,0 +1,3 @@
+// 페이지 전용 React 어댑터 — TanStack Query useQuery/useMutation 래퍼.
+// query key 와 invalidation 을 이 파일에 모아 다른 mutation 추가 시 빠뜨리지 않게.
+export {};

package/templates/nextjs-app/_arch/mes/src/pages/sign-in/index.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+// MES 프리셋의 페이지 본체 슬롯 예시.
+//
+// 페이지 폴더 구조 (관용):
+//   index.tsx        ─ 페이지 컴포넌트 (이 파일)
+//   components/      ─ 페이지 전용 UI (폼, 다이얼로그, 테이블 등)
+//   api.ts           ─ 순수 fetch 레이어
+//   hooks.ts         ─ TanStack Query 어댑터 (useQuery / useMutation)
+//   schema.ts        ─ zod 스키마
+//   columns.ts       ─ (옵션) 리스트 페이지의 테이블 컬럼 정의
+//
+// 새 페이지를 추가할 때 이 폴더를 복사해 이름만 바꾸세요.
+export default function SignInPage() {
+  return null;
+}

package/templates/nextjs-app/_arch/mes/src/pages/sign-in/schema.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // zod 스키마 — entity 와 form 이 다르면 두 개 (예: createXxxSchema 는 id/createdAt 제외).
2	+ export {};

package/templates/nextjs-app/_arch/mes/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "extends": "@workspace/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/ui-app-name/*": ["../../packages/ui/ui-apps/ui-app-name/src/*"],
+      "@workspace/ui-core/*": ["../../packages/ui/ui-core/src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs-standalone/_arch/flat/app/globals.css CHANGED Viewed

@@ -35,6 +35,11 @@
   --color-warning-foreground: var(--warning-foreground);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
+  --color-sidebar-bg: var(--sidebar-bg);
+  --color-sidebar-fg: var(--sidebar-fg);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-fg: var(--sidebar-accent-fg);
   --radius-sm: calc(var(--radius) - 2px);
   --radius-md: var(--radius);
   --radius-lg: calc(var(--radius) + 2px);

package/templates/nextjs-standalone/_arch/flat/components/layouts/RootLayout.tsx CHANGED Viewed

@@ -1,10 +1,16 @@
 import { GlobalProvider } from '@/components/providers';
+/** FOUC 차단 — next-themes mount 전에 첫 paint 에 dark/light class 박기. */
+const themeInitScript = `try{var t=localStorage.getItem('theme');var c=document.documentElement.classList;if(t==='dark'||(!t&&matchMedia('(prefers-color-scheme:dark)').matches)){c.add('dark');}else if(t==='light'){c.add('light');}}catch(e){}`;
 export function RootLayout({ children }: { children: React.ReactNode }) {
   // `lang` 은 앱의 주 언어. 영어 등 다른 언어 우선이면 'en' 으로 바꾸거나
   // next-intl 플러그인을 활성화해 라우트 기반 자동 분기로 전환하세요.
   return (
     <html lang='ko' suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
       <body>
         <GlobalProvider>{children}</GlobalProvider>
       </body>

package/templates/nextjs-standalone/_arch/fsd/src/app/layouts/RootLayout.tsx CHANGED Viewed

@@ -1,10 +1,16 @@
 import { GlobalProvider } from '@/src/app/providers';
+/** FOUC 차단 — next-themes mount 전에 첫 paint 에 dark/light class 박기. */
+const themeInitScript = `try{var t=localStorage.getItem('theme');var c=document.documentElement.classList;if(t==='dark'||(!t&&matchMedia('(prefers-color-scheme:dark)').matches)){c.add('dark');}else if(t==='light'){c.add('light');}}catch(e){}`;
 export function RootLayout({ children }: { children: React.ReactNode }) {
   // `lang` 은 앱의 주 언어. 영어 등 다른 언어 우선이면 'en' 으로 바꾸거나
   // next-intl 플러그인을 활성화해 라우트 기반 자동 분기로 전환하세요.
   return (
     <html lang='ko' suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
       <body>
         <GlobalProvider>{children}</GlobalProvider>
       </body>

package/templates/nextjs-standalone/_arch/mes/app/api/proxy/[...path]/route.ts ADDED Viewed

@@ -0,0 +1,112 @@
+import { cookies } from 'next/headers';
+import { NextResponse, type NextRequest } from 'next/server';
+import {
+  captureApiError,
+  logApiError,
+} from '@/lib/api/observability';
+const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
+const ACCESS_TOKEN_COOKIE = 'accessToken';
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+const proxyRequest = async (
+  request: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+  method: string,
+) => {
+  const { path } = await ctx.params;
+  const apiPath = path.join('/');
+  const url = new URL(`${API_URL}/${apiPath}`);
+  request.nextUrl.searchParams.forEach((value, key) => {
+    url.searchParams.set(key, value);
+  });
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get(ACCESS_TOKEN_COOKIE)?.value;
+  const locale =
+    cookieStore.get(LOCALE_COOKIE)?.value ??
+    request.headers.get('Accept-Language') ??
+    undefined;
+  const headers: Record<string, string> = {};
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  if (locale) headers['Accept-Language'] = locale;
+  let body: BodyInit | undefined;
+  if (method !== 'GET' && method !== 'HEAD') {
+    const contentType = request.headers.get('Content-Type');
+    if (contentType?.includes('multipart/form-data')) {
+      body = await request.formData();
+    } else {
+      headers['Content-Type'] = 'application/json';
+      body = await request.text();
+    }
+  }
+  let response: Response;
+  try {
+    response = await fetch(url.toString(), { method, headers, body });
+  } catch (error) {
+    console.error(`[PROXY] ${method} ${url.toString()} —`, error);
+    return NextResponse.json(
+      {
+        result: 'ERROR',
+        data: null,
+        error: {
+          code: 'NETWORK_ERROR',
+          message: 'Failed to reach upstream server.',
+        },
+      },
+      { status: 502 },
+    );
+  }
+  const data = await response.json();
+  if (!response.ok) {
+    logApiError('PROXY', {
+      url: url.toString(),
+      method,
+      status: response.status,
+      requestBody: typeof body === 'string' ? body : undefined,
+      responseBody: data,
+    });
+    captureApiError({
+      url: url.toString(),
+      apiPath,
+      method,
+      status: response.status,
+      responseBody: data,
+    });
+  }
+  return NextResponse.json(data, { status: response.status });
+};
+export const GET = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'GET');
+export const POST = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'POST');
+export const PUT = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'PUT');
+export const PATCH = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'PATCH');
+export const DELETE = (
+  req: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+) => proxyRequest(req, ctx, 'DELETE');

package/templates/nextjs-standalone/_arch/mes/app/globals.css ADDED Viewed

@@ -0,0 +1,54 @@
+@import 'tailwindcss';
+@import '../src/lib/styles/tokens.css';
+@custom-variant dark (&:is(.dark *));
+/* Tailwind v4 — 토큰 CSS 변수를 utility 클래스로 노출.
+ * `bg-primary` / `text-foreground` 같은 클래스가 토큰을 따라가도록 매핑.
+ * 옵셔널 색(success/warning/info)은 토큰에 없으면 변수가 undefined 라 browsers 가 단순 무시 — 안전.
+ *
+ * mes overlay — 베이스(`app/globals.css`)는 fsd 경로로 토큰을 import 하므로
+ * mes arch 에서는 이 파일이 베이스를 덮어 `src/lib/styles/tokens.css` 로 보낸다.
+ * 베이스 globals.css 내용 변경 시 이 파일도 동일하게 동기화할 것.
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-muted: var(--background-muted);
+  --color-background-inverse: var(--background-inverse);
+  --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
+  --color-foreground-inverse: var(--foreground-inverse);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-ring: var(--ring);
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-sidebar-bg: var(--sidebar-bg);
+  --color-sidebar-fg: var(--sidebar-fg);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-fg: var(--sidebar-accent-fg);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+@layer base {
+  body {
+    background: var(--background);
+    color: var(--foreground);
+  }
+}

package/templates/nextjs-standalone/_arch/mes/app/layout.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+import { RootLayout } from '@/components/layouts/RootLayout';
+import './globals.css';
+export const metadata: Metadata = {
+  title: 'sh-ui app',
+  description: 'sh-ui 기반 앱 — metadata 를 변경하세요.',
+};
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <RootLayout>{children}</RootLayout>;
+}

package/templates/nextjs-standalone/_arch/mes/app/sign-in/page.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from '@/pages/sign-in';

package/templates/nextjs-standalone/_arch/mes/eslint.config.js ADDED Viewed

@@ -0,0 +1,137 @@
+import js from "@eslint/js"
+import pluginNext from "@next/eslint-plugin-next"
+import eslintConfigPrettier from "eslint-config-prettier"
+import boundaries from "eslint-plugin-boundaries"
+import checkFile from "eslint-plugin-check-file"
+import onlyWarn from "eslint-plugin-only-warn"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+export default [
+  {
+    ignores: [".next/**", "dist/**", "node_modules/**"],
+  },
+  // ── Base ──
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: { onlyWarn },
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+    },
+  },
+  // ── React + Next.js ──
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+      },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "react/function-component-definition": [
+        "warn",
+        {
+          namedComponents: "function-declaration",
+          unnamedComponents: "arrow-function",
+        },
+      ],
+    },
+  },
+  // ── MES-arch boundaries ──
+  // 페이지 격리 + 단방향 의존:
+  //   - 각 `src/pages/<name>/` 는 자기완결 — 다른 페이지 import 금지
+  //   - 페이지/공용 컴포넌트는 hooks/lib 사용 OK, 반대 방향은 X
+  //   - app 라우트는 페이지/공용 모두 import 가능 (한 줄 위임)
+  {
+    plugins: { boundaries },
+    settings: {
+      "boundaries/elements": [
+        { type: "lib", pattern: ["src/lib/*"], mode: "folder" },
+        { type: "hooks", pattern: ["src/hooks"], mode: "folder" },
+        { type: "components", pattern: ["src/components/*"], mode: "folder" },
+        { type: "pages", pattern: ["src/pages/*"], mode: "folder" },
+        { type: "app", pattern: ["app"], mode: "folder" },
+      ],
+      "boundaries/ignore": ["**/*.test.*", "**/*.spec.*"],
+    },
+    rules: {
+      "boundaries/element-types": [
+        "warn",
+        {
+          default: "disallow",
+          rules: [
+            { from: "app", allow: ["pages", "components", "hooks", "lib"] },
+            // pages 끼리는 import 금지 — 페이지 격리 원칙
+            { from: "pages", allow: ["components", "hooks", "lib"] },
+            { from: "components", allow: ["components", "hooks", "lib"] },
+            { from: "hooks", allow: ["hooks", "lib"] },
+            { from: "lib", allow: ["lib"] },
+          ],
+        },
+      ],
+    },
+  },
+  // ── File naming ──
+  // .tsx = PASCAL_CASE (컴포넌트), .ts = CAMEL_CASE (유틸/스키마/훅)
+  {
+    plugins: { "check-file": checkFile },
+    rules: {
+      "check-file/filename-naming-convention": [
+        "error",
+        {
+          "**/components/**/*.tsx": "PASCAL_CASE",
+          "**/pages/**/components/**/*.tsx": "PASCAL_CASE",
+          "**/lib/**/*.ts": "CAMEL_CASE",
+          "**/hooks/**/*.ts": "CAMEL_CASE",
+        },
+        { ignoreMiddleExtensions: true },
+      ],
+    },
+  },
+  {
+    files: [
+      "**/index.tsx", "**/index.ts",
+      "**/layout.tsx", "**/page.tsx",
+      "**/error.tsx", "**/not-found.tsx",
+      "**/routing.ts", "**/navigation.ts", "**/request.ts",
+      // MES 페이지 concern 파일들
+      "**/pages/**/api.ts", "**/pages/**/schema.ts",
+      "**/pages/**/columns.ts", "**/pages/**/hooks.ts",
+    ],
+    rules: {
+      "check-file/filename-naming-convention": "off",
+    },
+  },
+]

package/templates/nextjs-standalone/_arch/mes/sh-ui.config.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://raw.githubusercontent.com/sanghyeonKim0201/sh-ui/live/packages/cli/sh-ui.schema.json",
+  "platform": "react",
+  "cssFramework": "plain",
+  "theme": {
+    "base": "neutral",
+    "radius": "md",
+    "mode": "light-dark"
+  },
+  "paths": {
+    "tokens": "src/lib/styles/tokens.css",
+    "cssEntry": "app/globals.css",
+    "styles": "src/lib/styles",
+    "components": "src/components/common",
+    "utils": "src/lib/utils/utils.ts"
+  },
+  "aliases": {
+    "components": "@/components/common",
+    "utils": "@/lib/utils/utils",
+    "ui": "@/components/common"
+  }
+}

package/templates/nextjs-standalone/_arch/mes/src/components/common/.gitkeep ADDED Viewed

File without changes

package/templates/nextjs-standalone/_arch/mes/src/components/common/FallbackBoundary/index.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+'use client';
+import {
+  Component,
+  type ComponentType,
+  type ErrorInfo,
+  type ReactNode,
+  Suspense,
+} from 'react';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+export type ErrorFallbackProps = {
+  error: Error | null;
+  resetErrorBoundary: () => void;
+};
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  fallback?: ComponentType<ErrorFallbackProps>;
+  onReset: () => void;
+  onError?: (error: Error, info: ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | null;
+};
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    this.props.onError?.(error, info);
+  }
+  resetErrorBoundary = () => {
+    this.props.onReset();
+    this.setState({ hasError: false, error: null });
+  };
+  render() {
+    const { hasError, error } = this.state;
+    const { children, fallback: Fallback } = this.props;
+    if (hasError && Fallback) {
+      return (
+        <Fallback error={error} resetErrorBoundary={this.resetErrorBoundary} />
+      );
+    }
+    return children;
+  }
+}
+type FallbackBoundaryProps = {
+  children: ReactNode;
+  errorFallback?: ComponentType<ErrorFallbackProps>;
+  suspenseFallback?: ReactNode;
+  onError?: (error: Error, info: ErrorInfo) => void;
+};
+/**
+ * Suspense + ErrorBoundary 합성. React Query 의 reset 신호에 맞춰
+ * `errorFallback` 의 `resetErrorBoundary` 가 쿼리까지 함께 리셋한다.
+ */
+export function FallbackBoundary({
+  children,
+  errorFallback,
+  suspenseFallback,
+  onError,
+}: FallbackBoundaryProps) {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallback={errorFallback}
+          onError={onError}
+        >
+          <Suspense fallback={suspenseFallback}>{children}</Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}

package/templates/nextjs-standalone/_arch/mes/src/components/common/PrefetchBoundary/index.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import {
+  dehydrate,
+  type FetchQueryOptions,
+  HydrationBoundary,
+} from '@tanstack/react-query';
+import { getQueryClient } from '@/lib/utils/getQueryClient';
+export type FetchOptions = Pick<FetchQueryOptions, 'queryKey' | 'queryFn'>;
+type Props = {
+  fetchOptions?: FetchOptions[] | FetchOptions | null;
+  children: ReactNode;
+};
+/**
+ * RSC 에서 prefetch 를 끝낸 뒤 dehydrated state 로 클라이언트에 hydrate.
+ * 단일/배열 둘 다 받는다.
+ */
+export async function PrefetchBoundary({ fetchOptions, children }: Props) {
+  const queryClient = getQueryClient();
+  if (fetchOptions) {
+    const list = Array.isArray(fetchOptions) ? fetchOptions : [fetchOptions];
+    await Promise.all(list.map((opt) => queryClient.prefetchQuery(opt)));
+  }
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      {children}
+    </HydrationBoundary>
+  );
+}

package/templates/nextjs-standalone/_arch/mes/src/components/layouts/RootLayout.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import { GlobalProvider } from '@/components/providers';
+/** FOUC 차단 — next-themes mount 전에 첫 paint 에 dark/light class 박기. */
+const themeInitScript = `try{var t=localStorage.getItem('theme');var c=document.documentElement.classList;if(t==='dark'||(!t&&matchMedia('(prefers-color-scheme:dark)').matches)){c.add('dark');}else if(t==='light'){c.add('light');}}catch(e){}`;
+export function RootLayout({ children }: { children: React.ReactNode }) {
+  // `lang` 은 앱의 주 언어. 영어 등 다른 언어 우선이면 'en' 으로 바꾸거나
+  // next-intl 플러그인을 활성화해 라우트 기반 자동 분기로 전환하세요.
+  return (
+    <html lang='ko' suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
+      <body>
+        <GlobalProvider>{children}</GlobalProvider>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs-standalone/_arch/mes/src/components/providers/GlobalProvider/index.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Toaster } from 'sonner';
+import { QueryClientProvider } from '../tanstack/QueryClientProvider';
+import { TanstackDevtoolsProvider } from '../tanstack/TanstackDevtoolsProvider';
+import { ThemeProvider } from '../theme/ThemeProvider';
+interface GlobalProviderProps {
+  children: ReactNode;
+}
+export function GlobalProvider({ children }: GlobalProviderProps) {
+  return (
+    <ThemeProvider>
+      <QueryClientProvider>
+        <TanstackDevtoolsProvider>
+          <Toaster />
+          {children}
+        </TanstackDevtoolsProvider>
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}

package/templates/nextjs-standalone/_arch/mes/src/components/providers/index.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { GlobalProvider } from './GlobalProvider';

package/templates/nextjs-standalone/_arch/mes/src/components/providers/tanstack/QueryClientProvider.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+'use client';
+import { QueryClientProvider as TanstackQueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { getBrowserQueryClient } from '@/lib/api/queryClient';
+export function QueryClientProvider({ children }: { children: ReactNode }) {
+  return (
+    <TanstackQueryClientProvider client={getBrowserQueryClient()}>
+      {children}
+    </TanstackQueryClientProvider>
+  );
+}

package/templates/nextjs-standalone/_arch/mes/src/components/providers/tanstack/TanstackDevtoolsProvider.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+'use client';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { ReactNode } from 'react';
+export function TanstackDevtoolsProvider({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </>
+  );
+}