refactor: alert component to reduce bundle size (#6466)

refactor: alert

.changeset/new-teachers-decide.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/alert": patch
+---
+
+Refactor to reduce bundle size

.changeset/shaggy-roses-play.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/utils": patch
+---
+
+Mark isBrowser as pure to tree-shake when bundling

packages/alert/package.json

@@ -33,13 +33,13 @@
   },
   "dependencies": {
     "@chakra-ui/icon": "workspace:*",
-    "@chakra-ui/react-utils": "workspace:*",
-    "@chakra-ui/spinner": "workspace:*",
-    "@chakra-ui/utils": "workspace:*"
+    "@chakra-ui/react-context": "workspace:*",
+    "@chakra-ui/spinner": "workspace:*"
   },
   "devDependencies": {
     "@chakra-ui/system": "workspace:*",
     "@chakra-ui/layout": "workspace:*",
+    "@chakra-ui/utils": "workspace:*",
     "react": "^18.0.0"
   },
   "peerDependencies": {

packages/alert/src/alert-context.ts

@@ -1,20 +1,20 @@
 import { SystemStyleObject } from "@chakra-ui/system"
-import { Dict } from "@chakra-ui/utils"
-import { createContext } from "@chakra-ui/react-utils"
+import { createContext } from "@chakra-ui/react-context"
 import { CheckIcon, InfoIcon, WarningIcon } from "./icons"
 import { Spinner } from "@chakra-ui/spinner"
 
 export const [AlertProvider, useAlertContext] = createContext<AlertContext>({
   name: "AlertContext",
-  errorMessage:
-    "useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<Alert />`",
+  hookName: "useAlertContext",
+  providerName: "<Alert />",
 })
 
 export const [AlertStylesProvider, useAlertStyles] = createContext<
-  Dict<SystemStyleObject>
+  Record<string, SystemStyleObject>
 >({
   name: `AlertStylesContext`,
-  errorMessage: `useAlertStyles returned is 'undefined'. Seems you forgot to wrap the components in "<Alert />" `,
+  hookName: `useAlertStyles`,
+  providerName: "<Alert />",
 })
 
 const STATUSES = {

packages/alert/src/alert-description.tsx

@@ -27,3 +27,5 @@ export const AlertDescription = forwardRef<AlertDescriptionProps, "div">(
     )
   },
 )
+
+AlertDescription.displayName = "AlertDescription"

packages/alert/src/alert-icon.tsx

@@ -21,3 +21,5 @@ export function AlertIcon(props: AlertIconProps) {
     </chakra.span>
   )
 }
+
+AlertIcon.displayName = "AlertIcon"

packages/alert/src/alert-title.tsx

@@ -18,3 +18,5 @@ export const AlertTitle = forwardRef<AlertTitleProps, "div">(
     )
   },
 )
+
+AlertTitle.displayName = "AlertTitle"

packages/alert/src/alert.tsx

@@ -63,3 +63,5 @@ export const Alert = forwardRef<AlertProps, "div">(function Alert(props, ref) {
     </AlertProvider>
   )
 })
+
+Alert.displayName = "Alert"

packages/alert/src/icons.tsx

@@ -1,29 +1,34 @@
-import type { FunctionComponent } from "react"
 import { Icon, IconProps } from "@chakra-ui/icon"
 
-export const CheckIcon: FunctionComponent<IconProps> = (props) => (
-  <Icon viewBox="0 0 24 24" {...props}>
-    <path
-      fill="currentColor"
-      d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
-    />
-  </Icon>
-)
+export function CheckIcon(props: IconProps) {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+      />
+    </Icon>
+  )
+}
 
-export const InfoIcon: FunctionComponent<IconProps> = (props) => (
-  <Icon viewBox="0 0 24 24" {...props}>
-    <path
-      fill="currentColor"
-      d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"
-    />
-  </Icon>
-)
+export function InfoIcon(props: IconProps) {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"
+      />
+    </Icon>
+  )
+}
 
-export const WarningIcon: FunctionComponent<IconProps> = (props) => (
-  <Icon viewBox="0 0 24 24" {...props}>
-    <path
-      fill="currentColor"
-      d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
-    />
-  </Icon>
-)
+export function WarningIcon(props: IconProps) {
+  return (
+    <Icon viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
+      />
+    </Icon>
+  )
+}

packages/utils/src/dom.ts

@@ -40,7 +40,7 @@ export function canUseDOM(): boolean {
   )
 }
 
-export const isBrowser = canUseDOM()
+export const isBrowser = /* @__PURE__ */ canUseDOM()
 
 export const dataAttr = (condition: boolean | undefined) =>
   (condition ? "" : undefined) as Booleanish