chore: update example project to make sure it runs with the latest package changes

Author: hrhv

examples/react-example/package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "1.1.1",
+    "@chakra-ui/react": "~1.8.9",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@imagekit/editor": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
+    "framer-motion": "6.5.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-select": "^5.2.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.5.2",

examples/react-example/src/index.tsx

@@ -1,15 +1,117 @@
-import { Icon } from "@chakra-ui/react"
 import {
-  createLocalStorageProvider,
   ImageKitEditor,
   type ImageKitEditorProps,
   type ImageKitEditorRef,
+  type TemplateStorageProvider,
   TRANSFORMATION_STATE_VERSION,
+  type Transformation,
 } from "@imagekit/editor"
-import { PiDownload } from "@react-icons/all-files/pi/PiDownload"
 import React, { useCallback, useEffect } from "react"
 import ReactDOM from "react-dom"
 
+const TEMPLATE_STORAGE_KEY = "ik-editor:templates:v1"
+
+type StoredTemplateRecord = {
+  id: string
+  clientNumber: string
+  isPrivate: boolean
+  isPinned: boolean
+  name: string
+  transformations: Omit<Transformation, "id">[]
+  createdBy: { userId: string; name: string; email: string }
+  updatedBy: { userId: string; name: string; email: string }
+  createdAt: number
+  updatedAt: number
+  lastUsedAt?: number
+}
+
+function readAllTemplates(): StoredTemplateRecord[] {
+  const raw = localStorage.getItem(TEMPLATE_STORAGE_KEY)
+  if (!raw) return []
+  try {
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? (parsed as StoredTemplateRecord[]) : []
+  } catch {
+    return []
+  }
+}
+
+function writeAllTemplates(records: StoredTemplateRecord[]) {
+  localStorage.setItem(TEMPLATE_STORAGE_KEY, JSON.stringify(records))
+}
+
+function createLocalTemplateStorage(): TemplateStorageProvider {
+  const session = {
+    userId: "demo-user",
+    name: "Demo User",
+    email: "demo@example.com",
+    clientNumber: "demo-client",
+  }
+
+  return {
+    async listTemplates() {
+      return readAllTemplates().sort((a, b) => b.updatedAt - a.updatedAt)
+    },
+    async getTemplate(id: string) {
+      return readAllTemplates().find((t) => t.id === id) ?? null
+    },
+    async saveTemplate(input) {
+      const now = Date.now()
+      const all = readAllTemplates()
+      const existing = input.id
+        ? (all.find((t) => t.id === input.id) ?? null)
+        : null
+
+      const id = existing?.id ?? crypto.randomUUID?.() ?? String(now)
+      const record: StoredTemplateRecord = {
+        id,
+        clientNumber: input.clientNumber ?? existing?.clientNumber ?? "demo",
+        isPrivate: input.isPrivate ?? existing?.isPrivate ?? false,
+        isPinned: input.isPinned ?? existing?.isPinned ?? false,
+        name: input.name,
+        transformations: input.transformations,
+        createdBy: input.createdBy ??
+          existing?.createdBy ?? {
+            userId: session.userId,
+            name: session.name,
+            email: session.email,
+          },
+        updatedBy: input.updatedBy ?? {
+          userId: session.userId,
+          name: session.name,
+          email: session.email,
+        },
+        createdAt: input.createdAt ?? existing?.createdAt ?? now,
+        updatedAt: input.updatedAt ?? now,
+        lastUsedAt: existing?.lastUsedAt,
+      }
+
+      const next = [record, ...all.filter((t) => t.id !== id)]
+      writeAllTemplates(next)
+      return record
+    },
+    async deleteTemplate(id: string) {
+      writeAllTemplates(readAllTemplates().filter((t) => t.id !== id))
+    },
+    async setTemplatePinned(id: string, isPinned: boolean) {
+      const all = readAllTemplates()
+      const existing = all.find((t) => t.id === id)
+      if (!existing) {
+        throw new Error("Template not found")
+      }
+      const updated = { ...existing, isPinned, updatedAt: Date.now() }
+      writeAllTemplates([updated, ...all.filter((t) => t.id !== id)])
+      return updated
+    },
+    getProviderName() {
+      return "localStorage"
+    },
+    getCurrentUserSession() {
+      return session
+    },
+  }
+}
+
 function App() {
   const [open, setOpen] = React.useState(true)
   const [editorProps, setEditorProps] =
@@ -115,12 +217,14 @@ function App() {
         // })),
       ],
       onAddImage: handleAddImage,
-      onClose: () => setOpen(false),
+      onClose: ({ destroy }) => {
+        destroy()
+        setOpen(false)
+      },
       exportOptions: [
         {
           type: "button",
           label: "Export",
-          icon: <Icon boxSize={"5"} as={PiDownload} />,
           isVisible: true,
           onClick: (images, currentImage) => {
             console.log("Export images:", images, currentImage)
@@ -149,7 +253,7 @@ function App() {
         console.log("Signed URL", request.url)
         return Promise.resolve(request.url)
       },
-      templateStorage: createLocalStorageProvider(),
+      templateStorage: createLocalTemplateStorage(),
     })
   }, [handleAddImage])
 

yarn.lock

@@ -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":
   version: 1.8.9
   resolution: "@chakra-ui/react@npm:1.8.9"
   dependencies:
@@ -6266,13 +6266,19 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
+    "@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"
     "@imagekit/editor": "workspace:*"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"
     "@types/react-dom": "npm:^17.0.2"
     "@vitejs/plugin-react": "npm:^4.5.2"
+    framer-motion: "npm:6.5.1"
     react: "npm:^17.0.2"
     react-dom: "npm:^17.0.2"
+    react-select: "npm:^5.2.1"
     typescript: "npm:4.9.3"
     vite: "npm:^6.3.5"
   languageName: unknown