sh-ui-cli 0.33.0 → 0.38.0

package/templates/nextjs-standalone/src/shared/ui/FallbackBoundary/index.tsx

@@ -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/src/shared/ui/PrefetchBoundary/index.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import {
+  dehydrate,
+  type FetchQueryOptions,
+  HydrationBoundary,
+} from '@tanstack/react-query';
+
+import getQueryClient from '@/src/shared/lib/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/ui-app-template/src/styles/tokens.css

@@ -42,6 +42,7 @@
   /* sh-ui:theme-radius-start */
   --radius: 0.5rem;
   /* sh-ui:theme-radius-end */
+  /* sh-ui:theme-space-start */
   --space-0: 0px;
   --space-1: 4px;
   --space-2: 8px;
@@ -53,6 +54,8 @@
   --space-10: 40px;
   --space-12: 48px;
   --space-16: 64px;
+  /* sh-ui:theme-space-end */
+  /* sh-ui:theme-text-start */
   --text-xs: 12px;
   --text-sm: 14px;
   --text-base: 16px;
@@ -61,24 +64,42 @@
   --text-2xl: 24px;
   --text-3xl: 30px;
   --text-4xl: 36px;
+  /* sh-ui:theme-text-end */
+  /* sh-ui:theme-weight-start */
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;
+  /* sh-ui:theme-weight-end */
+  /* sh-ui:theme-shadow-start */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  /* sh-ui:theme-shadow-end */
+  /* sh-ui:theme-duration-start */
   --duration-fast: 120ms;
   --duration-base: 160ms;
   --duration-slow: 200ms;
+  /* sh-ui:theme-duration-end */
+  /* sh-ui:theme-ease-start */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-ease-end */
+  /* sh-ui:theme-control-start */
   --control-sm: 32px;
   --control-md: 40px;
   --control-lg: 48px;
+  /* sh-ui:theme-control-end */
+  /* sh-ui:theme-border-width-start */
   --border-width: 1px;
   --border-width-strong: 2px;
+  /* sh-ui:theme-border-width-end */
+  /* sh-ui:theme-gradient-start */
+  --gradient-primary: linear-gradient(135deg, #171717 0%, #525252 100%);
+  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
+  --gradient-overlay: linear-gradient(180deg, #000000 0%, #1F1F1F 100%);
+  /* sh-ui:theme-gradient-end */
   --opacity-disabled: 0.5;
   --z-base: 0;
   --z-sticky: 100;