fix typescript

packages/codac-ui/src/3d-libraries/particles/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ParticlesComp: ({ type }: {
+    type: string;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

packages/codac-ui/src/3d-libraries/particles/index.jsx

@@ -0,0 +1,42 @@
+"use client";
+import { Suspense, useCallback } from "react";
+import Particles from "react-particles";
+import { loadFull } from "tsparticles";
+import { confetti } from "./options/confetti";
+import { snow } from "./options/snow";
+import { triangles } from "./options/tiangles";
+var ParticulesOptions;
+(function (ParticulesOptions) {
+    ParticulesOptions[ParticulesOptions["snow"] = 0] = "snow";
+    ParticulesOptions[ParticulesOptions["confetti"] = 1] = "confetti";
+    ParticulesOptions[ParticulesOptions["triangles"] = 2] = "triangles";
+})(ParticulesOptions || (ParticulesOptions = {}));
+const getOptions = (type) => {
+    switch (type) {
+        case "snow":
+            return snow;
+        case "confetti":
+            return confetti;
+        case "triangles":
+            return triangles;
+        default:
+            return triangles;
+    }
+};
+export const ParticlesComp = ({ type }) => {
+    const particlesInit = useCallback(async (engine) => {
+        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
+        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+        // starting from v2 you can add only the features you need reducing the bundle size
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        await loadFull(engine);
+        // await loadConfig(config)
+    }, []);
+    const particlesLoaded = useCallback(async (container) => {
+        // await console.log(container);
+    }, []);
+    return (<Suspense fallback={<div>Loading...</div>}>
+      {/* @ts-expect-error Async Server Component */}
+      <Particles init={particlesInit} loaded={particlesLoaded} options={getOptions(type)}/>
+    </Suspense>);
+};

packages/codac-ui/src/3d-libraries/particles/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback } from "react";
+import { Suspense, useCallback } from "react";
 import Particles from "react-particles";
 import { loadFull } from "tsparticles";
 import { IOptions, type ISourceOptions, MoveDirection, OutMode } from "tsparticles-engine";
@@ -40,6 +40,10 @@ export const ParticlesComp = ({ type }: { type: string }) => {
   const particlesLoaded = useCallback(async (container: any) => {
     // await console.log(container);
   }, []);
-
-  return <Particles init={particlesInit} loaded={particlesLoaded} options={getOptions(type)} />;
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      {/* @ts-expect-error Async Server Component */}
+      <Particles init={particlesInit} loaded={particlesLoaded} options={getOptions(type)} />
+    </Suspense>
+  );
 };

packages/codac-ui/src/3d-libraries/particles/options/confetti.d.ts

@@ -0,0 +1,3 @@
+import type { ISourceOptions } from "tsparticles-engine";
+export declare const confetti: ISourceOptions;
+//# sourceMappingURL=confetti.d.ts.map

packages/codac-ui/src/3d-libraries/particles/options/confetti.js

@@ -0,0 +1,131 @@
+export const confetti = {
+    // "background": {
+    //     "color": {
+    //         "value": "#000000"
+    //     }
+    // },
+    fullScreen: {
+        enable: true,
+        zIndex: 999,
+    },
+    particles: {
+        color: {
+            value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"],
+            animation: {
+                enable: true,
+                speed: 30,
+            },
+        },
+        move: {
+            decay: 0.1,
+            direction: "top",
+            enable: true,
+            gravity: {
+                acceleration: 9.81,
+                enable: true,
+                maxSpeed: 200,
+            },
+            outModes: {
+                top: "none",
+                default: "destroy",
+            },
+            speed: {
+                min: 50,
+                max: 150,
+            },
+        },
+        number: {
+            value: 0,
+            limit: 300,
+        },
+        opacity: {
+            value: 1,
+            animation: {
+                enable: false,
+                startValue: "max",
+                destroy: "min",
+                speed: 0.3,
+                sync: true,
+            },
+        },
+        rotate: {
+            value: {
+                min: 0,
+                max: 360,
+            },
+            direction: "random",
+            move: true,
+            animation: {
+                enable: true,
+                speed: 60,
+            },
+        },
+        tilt: {
+            direction: "random",
+            enable: true,
+            move: true,
+            value: {
+                min: 0,
+                max: 360,
+            },
+            animation: {
+                enable: true,
+                speed: 60,
+            },
+        },
+        shape: {
+            type: ["circle", "square", "polygon"],
+            options: {
+                polygon: [
+                    {
+                        sides: 5,
+                    },
+                    {
+                        sides: 6,
+                    },
+                ],
+            },
+        },
+        size: {
+            value: 3,
+        },
+        roll: {
+            darken: {
+                enable: true,
+                value: 30,
+            },
+            enlighten: {
+                enable: true,
+                value: 30,
+            },
+            enable: true,
+            speed: {
+                min: 15,
+                max: 25,
+            },
+        },
+        wobble: {
+            distance: 30,
+            enable: true,
+            move: true,
+            speed: {
+                min: -15,
+                max: 15,
+            },
+        },
+    },
+    emitters: {
+        position: {
+            x: 50,
+            y: 100,
+        },
+        size: {
+            width: 0,
+            height: 0,
+        },
+        rate: {
+            quantity: 10,
+            delay: 0.1,
+        },
+    },
+};

packages/codac-ui/src/3d-libraries/particles/options/snow.d.ts

@@ -0,0 +1,3 @@
+import { type ISourceOptions } from "tsparticles-engine";
+export declare const snow: ISourceOptions;
+//# sourceMappingURL=snow.d.ts.map

packages/codac-ui/src/3d-libraries/particles/options/snow.js

@@ -0,0 +1,27 @@
+export const snow = {
+    background: {
+    // color: "#333",
+    },
+    particles: {
+        move: {
+            direction: "bottom",
+            enable: true,
+            random: false,
+            straight: false,
+        },
+        opacity: {
+            value: { min: 0.1, max: 0.5 },
+        },
+        size: {
+            value: { min: 1, max: 10 },
+        },
+        wobble: {
+            distance: 20,
+            enable: true,
+            speed: {
+                min: -5,
+                max: 5,
+            },
+        },
+    },
+};

packages/codac-ui/src/3d-libraries/particles/options/tiangles.d.ts

@@ -0,0 +1,3 @@
+import type { ISourceOptions } from "tsparticles-engine";
+export declare const triangles: ISourceOptions;
+//# sourceMappingURL=tiangles.d.ts.map

packages/codac-ui/src/3d-libraries/particles/options/tiangles.js

@@ -0,0 +1,32 @@
+export const triangles = {
+    background: {
+    // color: "#000000",
+    },
+    fullScreen: {
+        enable: true,
+        zIndex: -1,
+    },
+    particles: {
+        color: {
+            value: "#00897D",
+        },
+        links: {
+            distance: 125,
+            enable: true,
+            triangles: {
+                enable: true,
+                opacity: 0.01,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 1,
+        },
+        size: {
+            value: 1,
+        },
+        shape: {
+            type: "triangles",
+        },
+    },
+};

packages/codac-ui/src/3d-libraries/three/effect/EffectScene.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const EffectScene: () => import("react").JSX.Element;
+//# sourceMappingURL=EffectScene.d.ts.map

packages/codac-ui/src/3d-libraries/three/effect/EffectScene.jsx

@@ -0,0 +1,21 @@
+import { OrbitControls } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+// import { Bloom, EffectComposer, Grid, Noise } from "@react-three/postprocessing";
+export const EffectScene = () => {
+    return (<Canvas className="h-screen w-screen" gl={{ alpha: false }}>
+      <OrbitControls></OrbitControls>
+      <mesh>
+        <torusBufferGeometry></torusBufferGeometry>
+        <meshStandardMaterial></meshStandardMaterial>
+      </mesh>
+
+      <spotLight></spotLight>
+      <ambientLight></ambientLight>
+
+      {/* <EffectComposer>
+          <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
+          <Noise opacity={0.02} />
+          <Grid scale={0.8}></Grid>
+        </EffectComposer> */}
+    </Canvas>);
+};

packages/codac-ui/src/3d-libraries/three/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./effect/EffectScene";
+export * from "./khmer-blood";
+//# sourceMappingURL=index.d.ts.map

packages/codac-ui/src/3d-libraries/three/index.js

@@ -0,0 +1,3 @@
+"use client";
+export * from "./effect/EffectScene";
+export * from "./khmer-blood";

packages/codac-ui/src/3d-libraries/three/khmer-blood/Spaceship.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Spaceship: () => import("react").JSX.Element;
+export { Spaceship };
+//# sourceMappingURL=Spaceship.d.ts.map