@sangwonl/pocato-react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { PocaCardOptions } from '@sangwonl/pocato-core';
+
+interface PocaCardHandle {
+    flip(): void;
+    wiggle(): void;
+    reset(): void;
+}
+interface PocaCardProps {
+    type: PocaCardOptions['type'];
+    baseImage: string;
+    popupImage?: string;
+    maskImage?: string;
+    backImage?: string;
+    flippable?: boolean;
+    initialFlipped?: boolean;
+    customShader?: string;
+    children?: ReactNode;
+    backContent?: ReactNode;
+    onFlip?: (flipped: boolean) => void;
+    onReady?: () => void;
+    onError?: (error: Error) => void;
+    style?: CSSProperties;
+    className?: string;
+}
+declare const PocaCard: react.ForwardRefExoticComponent<PocaCardProps & react.RefAttributes<PocaCardHandle>>;
+
+export { PocaCard, type PocaCardHandle, type PocaCardProps };

package/dist/index.js

@@ -0,0 +1,90 @@
+// src/PocaCard.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { PocaCard as CorePocaCard } from "@sangwonl/pocato-core";
+import { jsxs } from "react/jsx-runtime";
+var PocaCard = forwardRef(
+  (props, ref) => {
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const [portalTargets, setPortalTargets] = useState({ front: null, back: null });
+    useEffect(() => {
+      if (!containerRef.current) return;
+      const card = new CorePocaCard(containerRef.current, {
+        type: props.type,
+        baseImage: props.baseImage,
+        popupImage: props.popupImage,
+        maskImage: props.maskImage,
+        backImage: props.backImage,
+        flippable: props.flippable,
+        initialFlipped: props.initialFlipped,
+        customShader: props.customShader
+      });
+      cardRef.current = card;
+      setPortalTargets({
+        front: card.getFrontContentEl(),
+        back: card.getBackContentEl()
+      });
+      return () => {
+        card.destroy();
+        cardRef.current = null;
+        setPortalTargets({ front: null, back: null });
+      };
+    }, [props.type]);
+    useEffect(() => {
+      cardRef.current?.updateOptions({
+        baseImage: props.baseImage,
+        popupImage: props.popupImage,
+        maskImage: props.maskImage
+      });
+    }, [props.baseImage, props.popupImage, props.maskImage]);
+    useEffect(() => {
+      if (props.customShader) {
+        cardRef.current?.updateOptions({ customShader: props.customShader });
+      }
+    }, [props.customShader]);
+    useEffect(() => {
+      const card = cardRef.current;
+      if (!card) return;
+      const onFlip = props.onFlip;
+      const onReady = props.onReady;
+      const onError = props.onError;
+      if (onFlip) card.on("flip", onFlip);
+      if (onReady) card.on("ready", onReady);
+      if (onError) card.on("error", onError);
+      return () => {
+        if (onFlip) card.off("flip", onFlip);
+        if (onReady) card.off("ready", onReady);
+        if (onError) card.off("error", onError);
+      };
+    }, [props.onFlip, props.onReady, props.onError]);
+    useImperativeHandle(ref, () => ({
+      flip: () => cardRef.current?.flip(),
+      wiggle: () => cardRef.current?.wiggle(),
+      reset: () => cardRef.current?.reset()
+    }));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        style: props.style,
+        className: props.className,
+        children: [
+          portalTargets.front && props.children && createPortal(props.children, portalTargets.front),
+          portalTargets.back && props.backContent && createPortal(props.backContent, portalTargets.back)
+        ]
+      }
+    );
+  }
+);
+PocaCard.displayName = "PocaCard";
+export {
+  PocaCard
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PocaCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { PocaCard as CorePocaCard, type PocaCardOptions } from '@sangwonl/pocato-core'\n\nexport interface PocaCardHandle {\n  flip(): void\n  wiggle(): void\n  reset(): void\n}\n\nexport interface PocaCardProps {\n  type: PocaCardOptions['type']\n  baseImage: string\n  popupImage?: string\n  maskImage?: string\n  backImage?: string\n  flippable?: boolean\n  initialFlipped?: boolean\n  customShader?: string\n  children?: ReactNode\n  backContent?: ReactNode\n  onFlip?: (flipped: boolean) => void\n  onReady?: () => void\n  onError?: (error: Error) => void\n  style?: CSSProperties\n  className?: string\n}\n\nexport const PocaCard = forwardRef<PocaCardHandle, PocaCardProps>(\n  (props, ref) => {\n    const containerRef = useRef<HTMLDivElement>(null)\n    const cardRef = useRef<CorePocaCard | null>(null)\n    const [portalTargets, setPortalTargets] = useState<{\n      front: HTMLElement | null\n      back: HTMLElement | null\n    }>({ front: null, back: null })\n\n    // Create/destroy core instance\n    useEffect(() => {\n      if (!containerRef.current) return\n\n      const card = new CorePocaCard(containerRef.current, {\n        type: props.type,\n        baseImage: props.baseImage,\n        popupImage: props.popupImage,\n        maskImage: props.maskImage,\n        backImage: props.backImage,\n        flippable: props.flippable,\n        initialFlipped: props.initialFlipped,\n        customShader: props.customShader,\n      })\n\n      cardRef.current = card\n      setPortalTargets({\n        front: card.getFrontContentEl(),\n        back: card.getBackContentEl(),\n      })\n\n      return () => {\n        card.destroy()\n        cardRef.current = null\n        setPortalTargets({ front: null, back: null })\n      }\n    // Re-create only when type changes (major config change)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [props.type])\n\n    // Sync image options\n    useEffect(() => {\n      cardRef.current?.updateOptions({\n        baseImage: props.baseImage,\n        popupImage: props.popupImage,\n        maskImage: props.maskImage,\n      })\n    }, [props.baseImage, props.popupImage, props.maskImage])\n\n    // Sync custom shader\n    useEffect(() => {\n      if (props.customShader) {\n        cardRef.current?.updateOptions({ customShader: props.customShader })\n      }\n    }, [props.customShader])\n\n    // Bind events\n    useEffect(() => {\n      const card = cardRef.current\n      if (!card) return\n\n      const onFlip = props.onFlip\n      const onReady = props.onReady\n      const onError = props.onError\n\n      if (onFlip) card.on('flip', onFlip)\n      if (onReady) card.on('ready', onReady)\n      if (onError) card.on('error', onError)\n\n      return () => {\n        if (onFlip) card.off('flip', onFlip)\n        if (onReady) card.off('ready', onReady)\n        if (onError) card.off('error', onError)\n      }\n    }, [props.onFlip, props.onReady, props.onError])\n\n    // Expose imperative handle\n    useImperativeHandle(ref, () => ({\n      flip: () => cardRef.current?.flip(),\n      wiggle: () => cardRef.current?.wiggle(),\n      reset: () => cardRef.current?.reset(),\n    }))\n\n    return (\n      <div\n        ref={containerRef}\n        style={props.style}\n        className={props.className}\n      >\n        {portalTargets.front && props.children && createPortal(props.children, portalTargets.front)}\n        {portalTargets.back && props.backContent && createPortal(props.backContent, portalTargets.back)}\n      </div>\n    )\n  },\n)\n\nPocaCard.displayName = 'PocaCard'\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAC7B,SAAS,YAAY,oBAA0C;AA6GzD;AAnFC,IAAM,WAAW;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,UAAU,OAA4B,IAAI;AAChD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAGvC,EAAE,OAAO,MAAM,MAAM,KAAK,CAAC;AAG9B,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,QAAS;AAE3B,YAAM,OAAO,IAAI,aAAa,aAAa,SAAS;AAAA,QAClD,MAAM,MAAM;AAAA,QACZ,WAAW,MAAM;AAAA,QACjB,YAAY,MAAM;AAAA,QAClB,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QACjB,gBAAgB,MAAM;AAAA,QACtB,cAAc,MAAM;AAAA,MACtB,CAAC;AAED,cAAQ,UAAU;AAClB,uBAAiB;AAAA,QACf,OAAO,KAAK,kBAAkB;AAAA,QAC9B,MAAM,KAAK,iBAAiB;AAAA,MAC9B,CAAC;AAED,aAAO,MAAM;AACX,aAAK,QAAQ;AACb,gBAAQ,UAAU;AAClB,yBAAiB,EAAE,OAAO,MAAM,MAAM,KAAK,CAAC;AAAA,MAC9C;AAAA,IAGF,GAAG,CAAC,MAAM,IAAI,CAAC;AAGf,cAAU,MAAM;AACd,cAAQ,SAAS,cAAc;AAAA,QAC7B,WAAW,MAAM;AAAA,QACjB,YAAY,MAAM;AAAA,QAClB,WAAW,MAAM;AAAA,MACnB,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,WAAW,MAAM,YAAY,MAAM,SAAS,CAAC;AAGvD,cAAU,MAAM;AACd,UAAI,MAAM,cAAc;AACtB,gBAAQ,SAAS,cAAc,EAAE,cAAc,MAAM,aAAa,CAAC;AAAA,MACrE;AAAA,IACF,GAAG,CAAC,MAAM,YAAY,CAAC;AAGvB,cAAU,MAAM;AACd,YAAM,OAAO,QAAQ;AACrB,UAAI,CAAC,KAAM;AAEX,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,MAAM;AACtB,YAAM,UAAU,MAAM;AAEtB,UAAI,OAAQ,MAAK,GAAG,QAAQ,MAAM;AAClC,UAAI,QAAS,MAAK,GAAG,SAAS,OAAO;AACrC,UAAI,QAAS,MAAK,GAAG,SAAS,OAAO;AAErC,aAAO,MAAM;AACX,YAAI,OAAQ,MAAK,IAAI,QAAQ,MAAM;AACnC,YAAI,QAAS,MAAK,IAAI,SAAS,OAAO;AACtC,YAAI,QAAS,MAAK,IAAI,SAAS,OAAO;AAAA,MACxC;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,MAAM,SAAS,MAAM,OAAO,CAAC;AAG/C,wBAAoB,KAAK,OAAO;AAAA,MAC9B,MAAM,MAAM,QAAQ,SAAS,KAAK;AAAA,MAClC,QAAQ,MAAM,QAAQ,SAAS,OAAO;AAAA,MACtC,OAAO,MAAM,QAAQ,SAAS,MAAM;AAAA,IACtC,EAAE;AAEF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,MAAM;AAAA,QACb,WAAW,MAAM;AAAA,QAEhB;AAAA,wBAAc,SAAS,MAAM,YAAY,aAAa,MAAM,UAAU,cAAc,KAAK;AAAA,UACzF,cAAc,QAAQ,MAAM,eAAe,aAAa,MAAM,aAAa,cAAc,IAAI;AAAA;AAAA;AAAA,IAChG;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":[]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sangwonl/pocato-react",
+  "version": "0.1.0",
+  "author": "Sangwon Lee <gamzabaw@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sangwonl/pocato"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@sangwonl/pocato-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.8.0",
+    "react": "^19.0.0",
+    "@types/react": "^19.0.0"
+  }
+}