From c13292528b7c98a98743813a2a7b92aa6d50b3f1 Mon Sep 17 00:00:00 2001 From: devjiwonchoi Date: Wed, 8 Jan 2025 21:09:31 +0900 Subject: [PATCH] decouple --- .../dialog/{dialog-body.tsx => body.tsx} | 9 +------- .../components/Errors/dialog/dialog.tsx | 2 +- .../dialog/{dialog-header.tsx => header.tsx} | 2 +- .../error-overlay-layout.tsx | 22 +++++++++++-------- 4 files changed, 16 insertions(+), 19 deletions(-) rename packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/{dialog-body.tsx => body.tsx} (63%) rename packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/{dialog-header.tsx => header.tsx} (96%) diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-body.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/body.tsx similarity index 63% rename from packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-body.tsx rename to packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/body.tsx index e6793e266c9c1..2a9e7209ac7da 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-body.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/body.tsx @@ -14,11 +14,4 @@ export function ErrorOverlayDialogBody({ ) } -export const styles = css` - .error-overlay-dialog { - background: var(--color-background-100); - border: 1px solid var(--color-gray-400); - border-radius: var(--rounded-xl); - box-shadow: var(--shadow-md); - } -` +export const DIALOG_BODY_STYLES = css`` diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx index 79c6840352ebd..df8ec7e3b9c07 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx @@ -23,7 +23,7 @@ export function ErrorOverlayDialog({ ) } -export const styles = css` +export const DIALOG_STYLES = css` .error-overlay-dialog { background: var(--color-background-100); border: 1px solid var(--color-gray-400); diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx similarity index 96% rename from packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-header.tsx rename to packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx index 3b53eed54b981..121bca96ee219 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-header.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx @@ -15,7 +15,7 @@ export function ErrorOverlayDialogHeader({ ) } -export const styles = css` +export const DIALOG_HEADER_STYLES = css` .nextjs-container-errors-header { position: relative; } diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx index 305138d9dad50..c7f4ff9a96f9e 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx @@ -4,7 +4,7 @@ import type { VersionInfo } from '../../../../../../../../server/dev/parse-versi import type { ErrorMessageType } from '../error-message/error-message' import type { ErrorType } from '../error-type-label/error-type-label' -import { DialogBody, DialogContent, DialogFooter } from '../../Dialog' +import { DialogContent, DialogFooter } from '../../Dialog' import { Overlay } from '../../Overlay' import { ErrorOverlayToolbar, @@ -25,11 +25,13 @@ import { ErrorOverlayFloatingHeader, styles as floatingHeaderStyles, } from '../error-overlay-floating-header/error-overlay-floating-header' -import { ErrorOverlayDialog, styles as dialogStyles } from '../dialog/dialog' + +import { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog' import { ErrorOverlayDialogHeader, - styles as dialogHeaderStyles, -} from '../dialog/dialog-header' + DIALOG_HEADER_STYLES, +} from '../dialog/header' +import { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body' type ErrorOverlayLayoutProps = { errorMessage: ErrorMessageType @@ -85,9 +87,9 @@ export function ErrorOverlayLayout({ - - {children} - + + {children} + {/* TODO: errorCode should not be undefined whatsoever */}