@pixzle/react 0.0.21

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Y.Yamamoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @pixzle/react
+
+React components for Pixzle.
+
+## Installation
+
+```bash
+npm i @pixzle/react
+```
+
+## Usage
+
+```tsx
+import { PixzleImage } from '@pixzle/react';
+
+const MyComponent = () => {
+  return (
+    <PixzleImage
+      blockSize={2}
+      seed={72411}
+      imageInfo={ w: 500, h: 500 }
+      image="path/to/shuffled/image.png"
+    />
+  );
+};
+```

package/dist/PixzleImage.d.ts

@@ -0,0 +1,9 @@
+import type { ImageInfo } from "@pixzle/core";
+import type React from "react";
+export interface PixzleImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+    blockSize: number;
+    seed: number | string;
+    imageInfo: ImageInfo;
+    image: string | Blob;
+}
+export declare const PixzleImage: React.FC<PixzleImageProps>;

package/dist/PixzleImage.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PixzleImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const browser_1 = require("@pixzle/browser");
+const react_1 = require("react");
+const PixzleImage = ({ blockSize, seed, imageInfo, image, alt = "", ...props }) => {
+    const [src, setSrc] = (0, react_1.useState)(undefined);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        const restorer = new browser_1.BrowserImageRestorer();
+        const restore = async () => {
+            try {
+                const restoredBitmap = await restorer.restoreImage(image, blockSize, seed, imageInfo);
+                if (!active)
+                    return;
+                // Convert ImageBitmap to Blob URL to display in <img>
+                const canvas = document.createElement("canvas");
+                canvas.width = restoredBitmap.width;
+                canvas.height = restoredBitmap.height;
+                const ctx = canvas.getContext("2d");
+                if (!ctx)
+                    throw new Error("Could not get 2D context");
+                ctx.drawImage(restoredBitmap, 0, 0);
+                canvas.toBlob((blob) => {
+                    if (!active)
+                        return;
+                    if (blob) {
+                        const url = URL.createObjectURL(blob);
+                        setSrc((prev) => {
+                            if (prev)
+                                URL.revokeObjectURL(prev);
+                            return url;
+                        });
+                    }
+                });
+            }
+            catch (err) {
+                if (active) {
+                    setError(err instanceof Error ? err : new Error(String(err)));
+                }
+            }
+        };
+        restore();
+        return () => {
+            active = false;
+        };
+    }, [blockSize, seed, imageInfo, image]);
+    // Cleanup URL on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (src) {
+                URL.revokeObjectURL(src);
+            }
+        };
+    }, [src]);
+    if (error) {
+        console.error("PixzleImage restoration error:", error);
+        return null;
+    }
+    if (!src) {
+        return null; // Or render a placeholder/loading state passed via props?
+    }
+    // biome-ignore lint/a11y/useAltText: alt is passed via props or defaults to empty string
+    return (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, ...props });
+};
+exports.PixzleImage = PixzleImage;
+//# sourceMappingURL=PixzleImage.js.map

package/dist/PixzleImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixzleImage.js","sourceRoot":"","sources":["../src/PixzleImage.tsx"],"names":[],"mappings":"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"}

package/dist/PixzleImage.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixzleImage } from "./PixzleImage";
+declare const meta: Meta<typeof PixzleImage>;
+export default meta;
+type Story = StoryObj<typeof PixzleImage>;
+export declare const Default: Story;
+export declare const SmallBlocks: Story;

package/dist/PixzleImage.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmallBlocks = exports.Default = void 0;
+const PixzleImage_1 = require("./PixzleImage");
+const meta = {
+    title: "Pixzle/PixzleImage",
+    component: PixzleImage_1.PixzleImage,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        blockSize: { control: "number" },
+        seed: { control: "number" },
+        imageInfo: { control: "object" },
+        image: { control: "text" },
+    },
+};
+exports.default = meta;
+// A placeholder image that is 500x500
+const PLACEHOLDER_IMAGE = "https://via.placeholder.com/500x500.png?text=Shuffled+Image";
+exports.Default = {
+    args: {
+        blockSize: 50,
+        seed: 12345,
+        imageInfo: {
+            w: 500,
+            h: 500,
+        },
+        image: PLACEHOLDER_IMAGE,
+        alt: "Restored Image Preview",
+        style: { border: "1px solid #ccc" },
+    },
+};
+exports.SmallBlocks = {
+    args: {
+        ...exports.Default.args,
+        blockSize: 10,
+        imageInfo: {
+            w: 500,
+            h: 500,
+        },
+    },
+};
+//# sourceMappingURL=PixzleImage.stories.js.map

package/dist/PixzleImage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixzleImage.stories.js","sourceRoot":"","sources":["../src/PixzleImage.stories.tsx"],"names":[],"mappings":";;;AACA,+CAA4C;AAE5C,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,yBAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGpB,sCAAsC;AACtC,MAAM,iBAAiB,GACrB,6DAA6D,CAAC;AAEnD,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,KAAK;QACX,SAAS,EAAE;YACT,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;SACP;QACD,KAAK,EAAE,iBAAiB;QACxB,GAAG,EAAE,wBAAwB;QAC7B,KAAK,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE;KACpC;CACF,CAAC;AAEW,QAAA,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,GAAG,eAAO,CAAC,IAAI;QACf,SAAS,EAAE,EAAE;QACb,SAAS,EAAE;YACT,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,GAAG;SACP;KACF;CACF,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./PixzleImage";

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PixzleImage"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@pixzle/react",
+  "version": "0.0.21",
+  "description": "React components for pixzle",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "tuki0918",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tuki0918/pixzle.git",
+    "directory": "packages/react"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pixzle/browser": "0.0.21",
+    "@pixzle/core": "0.0.21"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "happy-dom": "^20.0.11",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "build:check": "tsc -p tsconfig.build.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}