@picsart/react-photo-editor 1.0.0

package/README.md

@@ -0,0 +1,58 @@
+# @picsart/react-photo-editor
+
+React component for embedding the Picsart Photo & Video Editor (Create) SDK in web apps.
+
+## Install
+
+```bash
+npm install @picsart/react-photo-editor
+```
+
+Requires **React 17+** as a peer dependency.
+
+## Usage
+
+```tsx
+import { PhotoEditor } from '@picsart/react-photo-editor';
+
+export function Editor() {
+  return (
+    <PhotoEditor
+      apiKey={process.env.NEXT_PUBLIC_PICSART_API_KEY!}
+      customerId={process.env.NEXT_PUBLIC_PICSART_CUSTOMER_ID!}
+      propertyId={process.env.NEXT_PUBLIC_PICSART_PROPERTY_ID}
+      editorDomain={process.env.NEXT_PUBLIC_PICSART_EDITOR_DOMAIN!}
+      parentDomain={process.env.NEXT_PUBLIC_PICSART_PARENT_DOMAIN}
+      imageUrl="https://example.com/image.png"
+      onExport={(result) => console.log(result)}
+    />
+  );
+}
+```
+
+For local dev over `http://localhost`, set **`parentDomain`** (or `NEXT_PUBLIC_PICSART_PARENT_DOMAIN` / `VITE_PICSART_PARENT_DOMAIN`) to an **HTTPS** tunnel origin so the SDK can validate the parent window.
+
+## Publish to npm (Picsart org members)
+
+1. Use an npm account that is a **member of the `@picsart` organization** with publish permission.
+2. From this repository root:
+
+   ```bash
+   npm login
+   npm run build
+   npm run publish:npm
+   ```
+
+   This project includes a root **`.npmrc`** so installs and publishes target **`https://registry.npmjs.org/`** for the `@picsart` scope (and avoids accidental publishes to other registries).
+
+3. Scoped packages must be **public** (already set via `publishConfig.access`).
+
+If `npm publish` fails with **403**, your user is not on the `@picsart` org or lacks publish rights—ask your org admin on npmjs.com.
+
+## Local example
+
+See the `example/` app: copy `example/.env.example` to `example/.env`, then from repo root:
+
+```bash
+npm run dev:example
+```

package/dist/index.d.mts

@@ -0,0 +1,180 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+declare class Picsart {
+    constructor(settings: any);
+    settings: any;
+    provideShapesData: {
+        data: ({
+            id: number;
+            shapeURL: string;
+            previewURL: string;
+            shapeData: {};
+            height: number;
+            width: number;
+            meta_data?: undefined;
+        } | {
+            id: number;
+            shapeURL: string;
+            previewURL: string;
+            meta_data: {};
+            height: number;
+            width: number;
+            shapeData?: undefined;
+        })[];
+    };
+    isEditorReady: boolean;
+    onExportCb: () => void;
+    messageListener: ({ data, origin }: {
+        data: any;
+        origin: any;
+    }) => void;
+    isMessageListenerAttached: boolean;
+    log(...args: any[]): void;
+    onOpen(callback: any): this;
+    openCallBack: any;
+    renderNew(src: any): void;
+    iframe: HTMLIFrameElement | null | undefined;
+    render(src: any): void;
+    close(): this;
+    hide(): void;
+    callCloseHandlers(): void;
+    resetTempData(): void;
+    tempOnClose: any;
+    tempOnExport: any;
+    tempExportType: any;
+    tempExportSettings: any;
+    onClose(cb?: () => void): this;
+    cbClose: (() => void) | undefined;
+    /**
+     * @param {(payload: any) => void} [cb]
+     */
+    onError(cb?: (payload: any) => void): this;
+    cbError: ((payload: any) => void) | undefined;
+    clear(): this;
+    applySettings(settings: any): void;
+    isIframeLoaded(): boolean | null | undefined;
+    onReady(cb?: () => void): this;
+    exportData(payload: any, cb: any): Promise<void>;
+    handleUpload(data: any): void;
+    onUpload(handler: any): void;
+    /**
+     * @param {(result: any) => void} [cb]
+     */
+    onExport(cb?: (result: any) => void): this;
+    export(): void;
+    getEditorSettings(params: any): any;
+    open(params?: {}): this;
+    openOld(params?: {}): this;
+    sendMessage(type: any, data: any): void;
+    attachMessageListener(): void;
+    detachMessageListener(): void;
+    handleMessage({ data, origin }: {
+        data: any;
+        origin: any;
+    }): void;
+    handleEditorReady(): void;
+    flushPendingData(): void;
+    getFetch(url: any): Promise<any>;
+    getCategoriesData(data: any): Promise<any[]>;
+    provideTemplates({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideTemplatesData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideShapes({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideStickerShapes(): Promise<this>;
+    provideTexts({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideTextsData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideColors(data: any): this | undefined;
+    provideColorsData: any;
+    providePhotos({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    providePhotosData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideStickers({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideStickersData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideFonts({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideFontsData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideCanvasSizes({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideCanvasSizesData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideLabels(data: any): this | undefined;
+    provideLabelsData: any;
+    provideExportSettings(): void;
+}
+
+type PhotoEditorOpenParams = Record<string, unknown>;
+type PhotoEditorProps = {
+    apiKey: string;
+    customerId: string;
+    propertyId?: string;
+    /**
+     * Full editor entry URL used as the iframe `src` origin (before `?query`).
+     * Use the value from your Picsart onboarding / docs for your SDK version.
+     */
+    editorDomain?: string;
+    /**
+     * Origin the editor uses as the embedding parent (query `parentDomain`).
+     * **Important:** `http://localhost` often fails SDK origin / postMessage checks.
+     * For local dev use an HTTPS tunnel (ngrok, etc.) and set this to that `https://…` origin,
+     * or set env `NEXT_PUBLIC_PICSART_PARENT_DOMAIN` / `VITE_PICSART_PARENT_DOMAIN`.
+     */
+    parentDomain?: string;
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+    imageUrl?: string;
+    /** When true (default), merges the bundled CMS-style defaults from `cmsSettings`. */
+    cms?: boolean;
+    debug?: boolean;
+    onExport?: (result: unknown) => void;
+    onError?: (payload: unknown) => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    /** Merged into the Picsart constructor (advanced). */
+    picsartSettings?: Record<string, unknown>;
+    /** Merged into the `.open()` call after mount. */
+    openParams?: PhotoEditorOpenParams;
+};
+type PhotoEditorHandle = {
+    picsart: InstanceType<typeof Picsart> | null;
+    open: (params?: PhotoEditorOpenParams) => InstanceType<typeof Picsart>;
+    close: () => InstanceType<typeof Picsart>;
+};
+declare const PhotoEditor: react.ForwardRefExoticComponent<PhotoEditorProps & react.RefAttributes<PhotoEditorHandle>>;
+
+export { PhotoEditor, type PhotoEditorHandle, type PhotoEditorOpenParams, type PhotoEditorProps, Picsart };

package/dist/index.d.ts

@@ -0,0 +1,180 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+declare class Picsart {
+    constructor(settings: any);
+    settings: any;
+    provideShapesData: {
+        data: ({
+            id: number;
+            shapeURL: string;
+            previewURL: string;
+            shapeData: {};
+            height: number;
+            width: number;
+            meta_data?: undefined;
+        } | {
+            id: number;
+            shapeURL: string;
+            previewURL: string;
+            meta_data: {};
+            height: number;
+            width: number;
+            shapeData?: undefined;
+        })[];
+    };
+    isEditorReady: boolean;
+    onExportCb: () => void;
+    messageListener: ({ data, origin }: {
+        data: any;
+        origin: any;
+    }) => void;
+    isMessageListenerAttached: boolean;
+    log(...args: any[]): void;
+    onOpen(callback: any): this;
+    openCallBack: any;
+    renderNew(src: any): void;
+    iframe: HTMLIFrameElement | null | undefined;
+    render(src: any): void;
+    close(): this;
+    hide(): void;
+    callCloseHandlers(): void;
+    resetTempData(): void;
+    tempOnClose: any;
+    tempOnExport: any;
+    tempExportType: any;
+    tempExportSettings: any;
+    onClose(cb?: () => void): this;
+    cbClose: (() => void) | undefined;
+    /**
+     * @param {(payload: any) => void} [cb]
+     */
+    onError(cb?: (payload: any) => void): this;
+    cbError: ((payload: any) => void) | undefined;
+    clear(): this;
+    applySettings(settings: any): void;
+    isIframeLoaded(): boolean | null | undefined;
+    onReady(cb?: () => void): this;
+    exportData(payload: any, cb: any): Promise<void>;
+    handleUpload(data: any): void;
+    onUpload(handler: any): void;
+    /**
+     * @param {(result: any) => void} [cb]
+     */
+    onExport(cb?: (result: any) => void): this;
+    export(): void;
+    getEditorSettings(params: any): any;
+    open(params?: {}): this;
+    openOld(params?: {}): this;
+    sendMessage(type: any, data: any): void;
+    attachMessageListener(): void;
+    detachMessageListener(): void;
+    handleMessage({ data, origin }: {
+        data: any;
+        origin: any;
+    }): void;
+    handleEditorReady(): void;
+    flushPendingData(): void;
+    getFetch(url: any): Promise<any>;
+    getCategoriesData(data: any): Promise<any[]>;
+    provideTemplates({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideTemplatesData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideShapes({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideStickerShapes(): Promise<this>;
+    provideTexts({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideTextsData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideColors(data: any): this | undefined;
+    provideColorsData: any;
+    providePhotos({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    providePhotosData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideStickers({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideStickersData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideFonts({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideFontsData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideCanvasSizes({ data, dataURL }: {
+        data: any;
+        dataURL: any;
+    }): Promise<this | undefined>;
+    provideCanvasSizesData: {
+        data: any;
+        dataURL: any;
+    } | undefined;
+    provideLabels(data: any): this | undefined;
+    provideLabelsData: any;
+    provideExportSettings(): void;
+}
+
+type PhotoEditorOpenParams = Record<string, unknown>;
+type PhotoEditorProps = {
+    apiKey: string;
+    customerId: string;
+    propertyId?: string;
+    /**
+     * Full editor entry URL used as the iframe `src` origin (before `?query`).
+     * Use the value from your Picsart onboarding / docs for your SDK version.
+     */
+    editorDomain?: string;
+    /**
+     * Origin the editor uses as the embedding parent (query `parentDomain`).
+     * **Important:** `http://localhost` often fails SDK origin / postMessage checks.
+     * For local dev use an HTTPS tunnel (ngrok, etc.) and set this to that `https://…` origin,
+     * or set env `NEXT_PUBLIC_PICSART_PARENT_DOMAIN` / `VITE_PICSART_PARENT_DOMAIN`.
+     */
+    parentDomain?: string;
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+    imageUrl?: string;
+    /** When true (default), merges the bundled CMS-style defaults from `cmsSettings`. */
+    cms?: boolean;
+    debug?: boolean;
+    onExport?: (result: unknown) => void;
+    onError?: (payload: unknown) => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    /** Merged into the Picsart constructor (advanced). */
+    picsartSettings?: Record<string, unknown>;
+    /** Merged into the `.open()` call after mount. */
+    openParams?: PhotoEditorOpenParams;
+};
+type PhotoEditorHandle = {
+    picsart: InstanceType<typeof Picsart> | null;
+    open: (params?: PhotoEditorOpenParams) => InstanceType<typeof Picsart>;
+    close: () => InstanceType<typeof Picsart>;
+};
+declare const PhotoEditor: react.ForwardRefExoticComponent<PhotoEditorProps & react.RefAttributes<PhotoEditorHandle>>;
+
+export { PhotoEditor, type PhotoEditorHandle, type PhotoEditorOpenParams, type PhotoEditorProps, Picsart };