pixedi 1.0.0 → 1.0.2

package/src/shared/features/gallery/GalleryPage.tsx

@@ -1,33 +0,0 @@
-import { imagesData } from "@/app/entries";
-import { ImageCard } from "@/shared/components/ImageCard";
-import { Preloader } from "@/shared/components/ui";
-import { useImagePreload } from "@/shared/hooks";
-
-export const GalleryPage = () => {
-  const isLoaded = useImagePreload(imagesData.map((image) => image.original));
-
-  if (!isLoaded) {
-    return (
-      <div className="w-full min-h-screen flex items-center justify-center">
-        <Preloader size={64} />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`
-        max-w-4xl mx-6 
-        my-6 
-        grid content-start gap-6 
-        grid-cols-1 
-        sm:grid-cols-2
-        md:grid-cols-3 md:mx-auto
-      `}
-    >
-      {imagesData.map((image) => (
-        <ImageCard key={image.id} image={image} />
-      ))}
-    </div>
-  );
-};

package/src/shared/features/gallery/ImageEditPage.tsx

@@ -1,37 +0,0 @@
-import { useParams, useNavigate } from "react-router";
-import { imagesData } from "@/app/entries";
-import { ImageEditor } from "@/shared/components/ImageEditor";
-
-export const ImageEditPage = () => {
-  const navigate = useNavigate();
-  const { id } = useParams<{ id: string }>();
-  const image = imagesData.find((img) => img.id === id);
-
-  if (!image) {
-    return <div>Image not found</div>;
-  }
-
-  const handleSave = async (base64: string) => {
-    return new Promise<void>((resolve) => {
-      setTimeout(() => {
-        // TODO: Save the image
-        console.log(base64);
-        resolve();
-      }, 2000);
-    });
-  };
-
-  const handleCancel = () => {
-    navigate("/");
-  };
-
-  return (
-    <div className="w-full h-screen">
-      <ImageEditor
-        image={image.original}
-        onBack={handleCancel}
-        onSave={handleSave}
-      />
-    </div>
-  );
-};

package/src/shared/features/gallery/index.ts

@@ -1,2 +0,0 @@
-export { GalleryPage } from "./GalleryPage";
-export { ImageEditPage } from "./ImageEditPage";

package/src/shared/hooks/index.ts

@@ -1 +0,0 @@
-export { useImagePreload } from "./useImagePreload";

package/src/shared/hooks/useImagePreload.tsx

@@ -1,49 +0,0 @@
-import { useState, useEffect } from "react";
-
-export function useImagePreload(
-  imageUrls: string[],
-  delay: number = 1000,
-): boolean {
-  const [loadedUrls, setLoadedUrls] = useState<string[]>([]);
-
-  const isAlreadyLoaded =
-    imageUrls.length === loadedUrls.length &&
-    imageUrls.every((url, i) => url === loadedUrls[i]);
-
-  useEffect(() => {
-    if (imageUrls.length === 0 || isAlreadyLoaded) {
-      return;
-    }
-
-    let isMounted = true;
-
-    const minimumDelayPromise = new Promise((resolve) =>
-      setTimeout(resolve, delay),
-    );
-
-    const imagePromises = imageUrls.map((src) => {
-      return new Promise<void>((resolve) => {
-        const img = new Image();
-        img.src = src;
-        img.onload = () => resolve();
-        img.onerror = () => resolve();
-      });
-    });
-
-    Promise.all([...imagePromises, minimumDelayPromise]).then(() => {
-      if (isMounted) {
-        setLoadedUrls(imageUrls);
-      }
-    });
-
-    return () => {
-      isMounted = false;
-    };
-  }, [imageUrls, isAlreadyLoaded]);
-
-  if (imageUrls.length === 0) {
-    return true;
-  }
-
-  return isAlreadyLoaded;
-}

package/src/shared/types/index.ts

@@ -1,11 +0,0 @@
-export type Image = {
-  id: string;
-  author: string;
-  title: string;
-  width: number;
-  height: number;
-  ext: string;
-  fileName: string;
-  thumbnail: string;
-  original: string;
-};

package/src/test/setup.ts

@@ -1,14 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { vi } from "vitest";
-
-vi.stubGlobal("createImageBitmap", vi.fn());
-vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
-vi.spyOn(HTMLCanvasElement.prototype, "toDataURL").mockReturnValue("");
-
-if (!globalThis.ImageBitmap) {
-  class ImageBitmapMock {
-    close() {}
-  }
-
-  vi.stubGlobal("ImageBitmap", ImageBitmapMock);
-}

package/src/virtual-css-injected-by-js.d.ts

@@ -1,8 +0,0 @@
-declare module "virtual:css-injected-by-js" {
-  interface CSSInjectionOptions {
-    target?: HTMLElement | ShadowRoot;
-  }
-
-  export function injectCSS(options?: CSSInjectionOptions): void;
-  export function removeCSS(options?: CSSInjectionOptions): void;
-}

package/src/widget.tsx

@@ -1,119 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { injectCSS, removeCSS } from "virtual:css-injected-by-js";
-import type { FuncSaveArgs } from "@/shared/components/ImageEditor/types";
-import { ImageEditor } from "@/shared/components/ImageEditor";
-
-type WidgetTheme = "light" | "dark";
-
-interface WidgetOptions {
-  containerId: string;
-  image: string;
-  onSave: FuncSaveArgs;
-  onBack: () => void;
-  theme?: WidgetTheme;
-}
-
-interface ImageEditorWidgetInstance {
-  destroy: () => void;
-}
-
-interface ImageEditorWidget {
-  init: (options: WidgetOptions) => ImageEditorWidgetInstance | undefined;
-}
-
-interface ActiveWidget {
-  root: ReactDOM.Root;
-  shadowRoot: ShadowRoot;
-  mountElement: HTMLDivElement;
-  container: HTMLElement;
-  previousTheme: string | null;
-}
-
-declare global {
-  interface Window {
-    ImageEditorWidget?: ImageEditorWidget;
-  }
-}
-
-let activeWidget: ActiveWidget | null = null;
-
-const destroyActiveWidget = () => {
-  if (!activeWidget) {
-    return;
-  }
-
-  activeWidget.root.unmount();
-  removeCSS({ target: activeWidget.shadowRoot });
-  activeWidget.mountElement.remove();
-
-  if (activeWidget.previousTheme === null) {
-    activeWidget.container.removeAttribute("data-theme");
-  } else {
-    activeWidget.container.setAttribute(
-      "data-theme",
-      activeWidget.previousTheme,
-    );
-  }
-
-  activeWidget = null;
-};
-
-const ImageEditorWidget: ImageEditorWidget = {
-  init: (options) => {
-    const container = document.getElementById(options.containerId);
-    if (!container) return;
-
-    destroyActiveWidget();
-
-    let shadowRoot = container.shadowRoot;
-    if (!shadowRoot) {
-      try {
-        shadowRoot = container.attachShadow({ mode: "open" });
-      } catch {
-        return;
-      }
-    }
-
-    const previousTheme = container.getAttribute("data-theme");
-    container.setAttribute("data-theme", options.theme ?? "light");
-
-    injectCSS({ target: shadowRoot });
-
-    const mountElement = document.createElement("div");
-    shadowRoot.append(mountElement);
-
-    const root = ReactDOM.createRoot(mountElement);
-    activeWidget = {
-      root,
-      shadowRoot,
-      mountElement,
-      container,
-      previousTheme,
-    };
-
-    root.render(
-      <React.StrictMode>
-        <ImageEditor
-          image={options.image}
-          onSave={options.onSave}
-          onBack={options.onBack}
-        />
-      </React.StrictMode>,
-    );
-
-    return {
-      destroy: () => {
-        if (activeWidget?.root === root) {
-          destroyActiveWidget();
-        }
-      },
-    };
-  },
-};
-
-if (typeof window !== "undefined") {
-  window.ImageEditorWidget = ImageEditorWidget;
-}
-
-export default ImageEditorWidget;

package/tsconfig.app.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023", "DOM"],
-    "module": "esnext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/tsconfig.lib.json

@@ -1,18 +0,0 @@
-{
-  "extends": "./tsconfig.app.json",
-  "compilerOptions": {
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "./dist/lib",
-    "rootDir": "."
-  },
-  "include": ["src/shared/components/ImageEditor/**/*"],
-  "exclude": [
-    "src/shared/components/ImageEditor/**/*.stories.tsx",
-    "src/shared/components/ImageEditor/**/*.stories.ts",
-    "src/shared/components/ImageEditor/**/*.test.tsx",
-    "src/shared/components/ImageEditor/**/*.test.ts",
-    "src/shared/components/ImageEditor/**/*.spec.tsx",
-    "src/shared/components/ImageEditor/**/*.spec.ts"
-  ]
-}

package/tsconfig.node.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "es2023",
-    "lib": ["ES2023"],
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "module": "nodenext",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/vite.config.ts

@@ -1,24 +0,0 @@
-import path from "path";
-import { defineConfig } from "vitest/config";
-import react from "@vitejs/plugin-react";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  build: {
-    outDir: "dist/app",
-    minify: true,
-  },
-  test: {
-    environment: "jsdom",
-    setupFiles: ["./src/test/setup.ts"],
-  },
-});

package/vite.lib.config.ts

@@ -1,33 +0,0 @@
-import path from "path";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
-
-export default defineConfig({
-  plugins: [react(), cssInjectedByJsPlugin()],
-  publicDir: false,
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  build: {
-    outDir: "dist/lib",
-    emptyOutDir: false,
-    lib: {
-      entry: "src/shared/components/ImageEditor/ImageEditor.tsx",
-      name: "Pixedi",
-      fileName: (format) => `index.${format === "es" ? "js" : "umd.js"}`,
-      formats: ["es", "umd"],
-    },
-    rollupOptions: {
-      external: ["react", "react-dom"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
-  },
-});

package/vite.widget.config.ts

@@ -1,39 +0,0 @@
-import path from "path";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
-
-export default defineConfig({
-  plugins: [
-    react(),
-    cssInjectedByJsPlugin({
-      attributes: { "data-image-editor-widget": "" },
-    }),
-  ],
-  publicDir: false,
-  define: {
-    "process.env.NODE_ENV": '"production"',
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  build: {
-    outDir: "dist/widget",
-    emptyOutDir: false,
-    minify: "oxc",
-    lib: {
-      entry: "src/widget.tsx",
-      name: "ImageEditorWidget",
-      formats: ["umd"],
-    },
-    rolldownOptions: {
-      output: {
-        comments: { legal: false },
-        entryFileNames: "pixedi-widget.js",
-        assetFileNames: "[name].[ext]",
-      },
-    },
-  },
-});

package/wrangler.json

@@ -1,5 +0,0 @@
-{
-  "$schema": "node_modules/wrangler/config-schema.json",
-  "name": "pixedi",
-  "pages_build_output_dir": "dist"
-}