feat: updated example project to match the consuming project's dom structure and theme settings

Author: hrhv

examples/react-example/package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/hooks": "^1.7.1",
     "@chakra-ui/icons": "1.1.1",
-    "@chakra-ui/react": "~1.8.9",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
+    "@chakra-ui/react": "^1.6.7",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@imagekit/editor": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/react": "^17.0.2",

examples/react-example/src/index.tsx

@@ -1,3 +1,4 @@
+import { Box, ChakraProvider, Portal } from "@chakra-ui/react"
 import {
   ImageKitEditor,
   type ImageKitEditorProps,
@@ -8,6 +9,7 @@ import {
 } from "@imagekit/editor"
 import React, { useCallback, useEffect } from "react"
 import ReactDOM from "react-dom"
+import { hostTheme } from "./theme/hostTheme"
 
 const TEMPLATE_STORAGE_KEY = "ik-editor:templates:v1"
 
@@ -422,15 +424,23 @@ function App() {
         </div>
       </div>
 
-      {open && editorProps && <ImageKitEditor {...editorProps} ref={ref} />}
+      {open && editorProps && (
+        <Portal>
+          <Box zIndex="modal" position="relative">
+            <ImageKitEditor {...editorProps} ref={ref} />
+          </Box>
+        </Portal>
+      )}
     </>
   )
 }
 
 const root = document.getElementById("root")
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ChakraProvider theme={hostTheme}>
+      <App />
+    </ChakraProvider>
   </React.StrictMode>,
   root,
 )

examples/react-example/src/theme/hostTheme.ts

@@ -0,0 +1,57 @@
+import { extendTheme } from "@chakra-ui/react"
+
+/**
+ * Mirrors consuming project's theme's z-index.ts
+ * and the component overrides that reference those tokens (tooltip, modal, popover).
+ */
+const zIndices = {
+  hide: -1,
+  auto: "auto" as const,
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 2100,
+  popover: 2000,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 2200,
+}
+
+export const hostTheme = extendTheme({
+  zIndices,
+  styles: {
+    global: {
+      html: { overflow: "hidden" },
+    },
+  },
+  components: {
+    Tooltip: {
+      baseStyle: {
+        zIndex: "tooltip",
+      },
+    },
+    Popover: {
+      baseStyle: {
+        popper: {
+          zIndex: "popover",
+        },
+      },
+    },
+    Modal: {
+      baseStyle: {
+        overlay: {
+          zIndex: "modal",
+        },
+        dialogContainer: {
+          zIndex: "modal",
+        },
+        dialog: {
+          zIndex: "modal",
+        },
+      },
+    },
+  },
+})

yarn.lock

@@ -683,7 +683,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/hooks@npm:1.9.1":
+"@chakra-ui/hooks@npm:1.9.1, @chakra-ui/hooks@npm:^1.7.1":
   version: 1.9.1
   resolution: "@chakra-ui/hooks@npm:1.9.1"
   dependencies:
@@ -986,7 +986,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chakra-ui/react@npm:1.8.9, @chakra-ui/react@npm:~1.8.9":
+"@chakra-ui/react@npm:1.8.9, @chakra-ui/react@npm:^1.6.7":
   version: 1.8.9
   resolution: "@chakra-ui/react@npm:1.8.9"
   dependencies:
@@ -1505,7 +1505,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.14.0, @emotion/react@npm:^11.8.1":
+"@emotion/react@npm:^11, @emotion/react@npm:^11.14.0, @emotion/react@npm:^11.8.1":
   version: 11.14.0
   resolution: "@emotion/react@npm:11.14.0"
   dependencies:
@@ -1546,7 +1546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^11.14.1":
+"@emotion/styled@npm:^11, @emotion/styled@npm:^11.14.1":
   version: 11.14.1
   resolution: "@emotion/styled@npm:11.14.1"
   dependencies:
@@ -6420,10 +6420,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
+    "@chakra-ui/hooks": "npm:^1.7.1"
     "@chakra-ui/icons": "npm:1.1.1"
-    "@chakra-ui/react": "npm:~1.8.9"
-    "@emotion/react": "npm:^11.14.0"
-    "@emotion/styled": "npm:^11.14.1"
+    "@chakra-ui/react": "npm:^1.6.7"
+    "@emotion/react": "npm:^11"
+    "@emotion/styled": "npm:^11"
     "@imagekit/editor": "workspace:*"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"