Update Showcases

imgly · Jan 29, 2025 · d34a0a4 · d34a0a4
1 parent daa8ffa
commit d34a0a4
Show file tree

Hide file tree

Showing 357 changed files with 181,021 additions and 109,475 deletions.
diff --git a/showcase-3d-mockup-editor/package-lock.json b/showcase-3d-mockup-editor/package-lock.json
diff --git a/showcase-3d-mockup-editor/package.json b/showcase-3d-mockup-editor/package.json
@@ -13,23 +13,25 @@
     "@cesdk/engine": "1.43.0",
     "@google/model-viewer": "3.5.0",
     "@imgly/idml-importer": "^1.0.8",
-    "@imgly/plugin-background-removal-web": "^1.0.0",
+    "@imgly/plugin-background-removal-web": "^1.0.3",
     "@imgly/plugin-cutout-library-web": "^1.0.5",
     "@imgly/plugin-qr-code-web": "^0.1.2",
     "@imgly/plugin-vectorizer-web": "^1.0.0",
     "@imgly/psd-importer": "^0.0.5",
+    "@imgly/background-removal": "^1.5.8",
     "airtable": "^0.12.1",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
-    "next": "14.2.5",
-    "react": "^18",
+    "next": "15.1.5",
+    "onnxruntime-web": "1.21.0-dev.20250114-228dd16893",
+    "react": "^19",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18",
+    "react-dom": "^19",
     "react-draggable": "^4.4.5",
     "react-masonry-css": "^1.0.16",
     "react-slider": "^2.0.6",
-    "react-tiny-popover": "^7.2.4",
+    "react-tiny-popover": "^8.1.4",
     "three": "0.163.0",
     "unsplash-js": "^7.0.18"
   },
@@ -38,10 +40,10 @@
     "@types/chroma-js": "^2.4.0",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "15.1.5",
     "eslint-plugin-unused-imports": "^3.1.0",
     "typescript": "^5"
   }

diff --git a/showcase-3d-mockup-editor/src/app/CaseComponentNoSSR.tsx b/showcase-3d-mockup-editor/src/app/CaseComponentNoSSR.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export const CaseComponentNoSSR = dynamic(
+  () => import('../components/case/CaseComponent'),
+  {
+    ssr: false
+  }
+);
diff --git a/showcase-3d-mockup-editor/src/app/page.tsx b/showcase-3d-mockup-editor/src/app/page.tsx
@@ -1,11 +1,4 @@
-import dynamic from 'next/dynamic';
-
-const DynamicCaseComponent = dynamic(
-  () => import('../components/case/CaseComponent'),
-  {
-    ssr: false
-  }
-);
+import { CaseComponentNoSSR } from './CaseComponentNoSSR';
 
 export default function Home() {
   return (
@@ -16,7 +9,7 @@ export default function Home() {
         display: 'flex'
       }}
     >
-      <DynamicCaseComponent />
+      <CaseComponentNoSSR />
     </div>
   );
 }
diff --git a/showcase-3d-mockup-editor/src/components/ui/ColorPicker/ColorPicker.tsx b/showcase-3d-mockup-editor/src/components/ui/ColorPicker/ColorPicker.tsx
@@ -16,7 +16,7 @@ interface IColorPicker {
   size?: 'sm' | 'lg';
   positionX?: 'right' | 'left';
   positionY?: 'top' | 'bottom';
-  children?: ReactElement;
+  children?: ReactElement<any>;
   onChange: (value: string) => void;
   onChangeDebounced?: () => void;
 }
@@ -112,9 +112,11 @@ export const ColorPicker = ({
           )}
           ref={pickerRef}
         >
+          {/* @ts-ignore */}
           <HexAlphaColorPicker color={value} onChange={handleChange} />
           <div className={'flex space-x-2'}>
             <span>#</span>
+            {/* @ts-ignore */}
             <HexColorInput color={value} onChange={handleChange} />
           </div>
         </div>

diff --git a/showcase-3d-mockup-editor/src/components/ui/ColorPicker/UseDebounceCallback.ts b/showcase-3d-mockup-editor/src/components/ui/ColorPicker/UseDebounceCallback.ts
@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { useEffect, useState } from 'react';
 
 const useDebounceCallback = (callback: () => void, delay: number) => {
-  const latestCallback = useRef<() => void>();
+  const latestCallback = useRef<() => void>(undefined);
   const [callCount, setCallCount] = useState(0);
 
   useEffect(() => {

diff --git a/showcase-3d-mockup-editor/src/components/ui/StyledPopover/StyledPopover.tsx b/showcase-3d-mockup-editor/src/components/ui/StyledPopover/StyledPopover.tsx
@@ -4,8 +4,8 @@ import { ArrowContainer, Popover } from 'react-tiny-popover';
 import classes from './StyledPopover.module.css';
 
 interface Props {
-  content: ReactElement;
-  children: ReactElement;
+  content: ReactElement<any>;
+  children: ReactElement<any>;
   size?: 'sm' | 'md' | 'lg';
 }
 
@@ -22,10 +22,12 @@ const StyledPopover: React.FC<Props> = ({ content, size = 'sm', children }) => {
     return <div></div>;
   }
   return (
+    // @ts-ignore
     <Popover
       isOpen={isPopoverActive || isPopoverOpen}
       positions={['top', 'bottom', 'left', 'right']}
       content={({ position, childRect, popoverRect }) => (
+        // @ts-ignore
         <ArrowContainer
           style={{ padding: '12px' }}
           position={position}

diff --git a/showcase-3d-mockup-editor/yarn.lock b/showcase-3d-mockup-editor/yarn.lock