fix(panel): fix circular dependency error

chanzuckerberg · Dec 18, 2024 · d818901 · d818901
1 parent 2209697
commit d818901
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 28 deletions.
diff --git a/packages/components/src/core/Panel/Panel.types.ts b/packages/components/src/core/Panel/Panel.types.ts
@@ -0,0 +1,23 @@
+import { DrawerProps } from "@mui/material";
+import { PanelHeaderCloseProps } from "./components/PanelHeaderClose";
+
+export interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
+  sdsType: "basic"; // Discriminator
+  position?: "left" | "right";
+  width?: number | string;
+}
+
+export interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
+  sdsType: "overlay"; // Discriminator
+  position?: "left" | "right" | "bottom";
+  width?: number | string;
+  HeaderComponent?: React.ReactNode;
+  closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
+  CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
+}
+
+// Discriminated Union
+export type PanelProps = BasicPanelProps | OverlayPanelProps;
+
+export const PANEL_BASIC_MIN_WIDTH_PX = 240;
+export const PANEL_OVERLAY_MIN_WIDTH_PX = 320;
diff --git a/packages/components/src/core/Panel/__storybook__/stories/default.tsx b/packages/components/src/core/Panel/__storybook__/stories/default.tsx
@@ -5,7 +5,8 @@ import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
 import ButtonToggle from "src/core/ButtonToggle";
 import Callout from "src/core/Callout";
 import CalloutTitle from "src/core/Callout/components/CalloutTitle";
-import RawPanel, { PanelProps } from "src/core/Panel";
+import RawPanel from "src/core/Panel";
+import { PanelProps } from "../../Panel.types";
 
 const InvalidBasicPanelPropsError = (
   <Callout intent="negative">

diff --git a/packages/components/src/core/Panel/index.tsx b/packages/components/src/core/Panel/index.tsx
@@ -1,37 +1,22 @@
 import React from "react";
 import { StyledDrawer, StyledHeaderComponent } from "./style";
-import { DrawerProps } from "@mui/material";
 import PanelHeader from "./components/PanelHeader";
-import PanelHeaderClose, {
-  PanelHeaderCloseProps,
-} from "./components/PanelHeaderClose";
+import PanelHeaderClose from "./components/PanelHeaderClose";
+import {
+  OverlayPanelProps,
+  BasicPanelProps,
+  PANEL_BASIC_MIN_WIDTH_PX,
+  PANEL_OVERLAY_MIN_WIDTH_PX,
+  PanelProps,
+} from "./Panel.types";
 
-export interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
-  sdsType: "basic"; // Discriminator
-  position?: "left" | "right";
-  width?: number | string;
-}
-
-export interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
-  sdsType: "overlay"; // Discriminator
-  position?: "left" | "right" | "bottom";
-  width?: number | string;
-  HeaderComponent?: React.ReactNode;
-  closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
-  CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
-}
-
-// Discriminated Union
-export type PanelProps = BasicPanelProps | OverlayPanelProps;
+export type { PanelProps, BasicPanelProps, OverlayPanelProps };
 
 // Type guard to narrow the type
 function isOverlayPanelProps(props: PanelProps): props is OverlayPanelProps {
   return props.sdsType === "overlay";
 }
 
-export const PANEL_BASIC_MIN_WIDTH_PX = 240;
-export const PANEL_OVERLAY_MIN_WIDTH_PX = 320;
-
 /**
  * @see https://mui.com/material-ui/react-drawer/
  */

diff --git a/packages/components/src/core/Panel/style.ts b/packages/components/src/core/Panel/style.ts
@@ -6,12 +6,12 @@ import {
   getShadows,
   getSpaces,
 } from "../styles";
+import { css, SerializedStyles } from "@emotion/react";
 import {
   PANEL_BASIC_MIN_WIDTH_PX,
   PANEL_OVERLAY_MIN_WIDTH_PX,
   PanelProps,
-} from ".";
-import { css, SerializedStyles } from "@emotion/react";
+} from "./Panel.types";
 
 type PanelExtraProps = PanelProps & CommonThemeProps;
 

diff --git a/packages/data-viz/src/core/HeatmapChart/index.tsx b/packages/data-viz/src/core/HeatmapChart/index.tsx
@@ -49,7 +49,7 @@ const HeatmapChart = forwardRef(
 
     // Validate width and height
     if (!width || !height) {
-      throw Error("Chart must have width and height > 0");
+      throw Error("Heatmap must have width and height bigger than Zero!");
     }
 
     // Ref for the chart container