@pixeasy/customizer 0.0.0 → 0.0.2-beta.0

package/LICENSE

@@ -0,0 +1,20 @@
+Pixeasy Customizer SDK License
+
+Copyright (c) Pixeasy.
+All rights reserved.
+
+Permission is hereby granted to any person obtaining a copy of this software and
+associated documentation files (the "Software") to use the Software for internal
+evaluation and integration with authorized Pixeasy services only.
+
+Any redistribution, sublicensing, sale, modification for redistribution, or
+public hosting of the Software is prohibited unless expressly authorized in
+writing by Pixeasy.
+
+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 NON-INFRINGEMENT. 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

@@ -1,114 +1,115 @@
-# Pixeasy Customizer SDK
-
-Framework-agnostic SDK for embedding the Pixeasy customizer with npm/ESM imports.
-
-## Build package artifact (local)
-
-```bash
-npm run build:sdk
-```
-
-This generates:
-
-- `dist/pixeasy-customizer-element/pixeasy-customizer.min.js`
-- `dist/pixeasy-customizer-element/pixeasy-customizer.css`
-- `dist/npm` (installable npm package output)
-
-## Install from local file output
-
-```bash
-npm install @pixeasy/customizer@file:../customizer/dist/npm
-```
-
-## Exports
-
-- `createPixeasyBuilder()`
-- `PixeasyBuilder`
-- `definePixeasyCustomizerElement()`
-- typed events and options (`PixeasyOpenOptions`, `ManifestLoadedEventDetail`, etc.)
-- styles entry: `@pixeasy/customizer/styles.css`
-
-## Angular usage
-
-```ts
-import { createPixeasyBuilder } from '@pixeasy/customizer';
-import '@pixeasy/customizer/styles.css';
-
-const builder = createPixeasyBuilder();
-builder
-  .open({
-    container: 'pixeasyBuidler',
-    apiKey: 'dk_xxx_yyy',
-    productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
-    manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
-  })
-  .on('sdk-ready', (event) => console.log(event.productId))
-  .on('design:created', (event) => console.log(event.data.designs));
-```
-
-## React usage
-
-```tsx
-import { useEffect } from 'react';
-import { createPixeasyBuilder } from '@pixeasy/customizer';
-import '@pixeasy/customizer/styles.css';
-
-export function CustomizerHost() {
-  useEffect(() => {
-    const builder = createPixeasyBuilder();
-    builder.open({
-      container: 'pixeasyBuidler',
-      apiKey: 'dk_xxx_yyy',
-      productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
-      manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
-    });
-    return () => builder.close();
-  }, []);
-
-  return <div id="pixeasyBuidler" />;
-}
-```
-
-## Vue usage
-
-```ts
-import { onMounted, onBeforeUnmount } from 'vue';
-import { createPixeasyBuilder } from '@pixeasy/customizer';
-import '@pixeasy/customizer/styles.css';
-
-const builder = createPixeasyBuilder();
-
-onMounted(() => {
-  builder.open({
-    container: 'pixeasyBuidler',
-    apiKey: 'dk_xxx_yyy',
-    productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
-    manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
-  });
-});
-
-onBeforeUnmount(() => builder.close());
-```
-
-## Plain ESM usage
-
-```html
-<div id="pixeasyBuidler"></div>
-<script type="module">
-  import { createPixeasyBuilder } from '/node_modules/@pixeasy/customizer/pixeasy-customizer.min.js';
-
-  const builder = createPixeasyBuilder();
-  builder.open({
-    container: 'pixeasyBuidler',
-    apiKey: 'dk_xxx_yyy',
-    productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
-    manifestUrl: 'https://localhost:8000/api/products/{productId}/manifest?useCdnUrl=true',
-  });
-</script>
-```
-
-## Migration note
-
-`window.pixeasy_builder` has been removed.
-
-Use ESM import-based integration only.
+# Pixeasy Customizer SDK
+
+Framework-agnostic SDK to embed the Pixeasy customizer in Angular, React, Vue, or any ESM app.
+
+## Install
+
+```bash
+npm install @pixeasy/customizer
+```
+
+## Quick start
+
+```ts
+import { createPixeasyBuilder } from '@pixeasy/customizer';
+import '@pixeasy/customizer/styles.css';
+
+const builder = createPixeasyBuilder();
+
+builder.open({
+  container: 'pixeasyBuilder',
+  apiKey: 'dk_xxx_yyy',
+  productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+});
+```
+
+`container` can be an element id (`string`) or an `HTMLElement`.
+
+## API
+
+### `createPixeasyBuilder()`
+
+Returns an instance of `PixeasyBuilder`.
+
+### `PixeasyBuilder.open(options)`
+
+```ts
+type PixeasyOpenOptions = {
+  container: string | HTMLElement;
+  apiKey: string;
+  productId: string;
+  locale?: string;
+  theme?: string;
+  readonly?: boolean;
+};
+```
+
+### `PixeasyBuilder` events
+
+- `manifest-loaded`
+- `sdk-ready`
+- `design-change`
+- `design:created`
+- `error`
+- `closed`
+
+Usage:
+
+```ts
+builder
+  .on('sdk-ready', (event) => console.log(event.productId))
+  .on('design:created', (event) => console.log(event.data.designs))
+  .on('error', (event) => console.error(event.code, event.message));
+```
+
+## Framework examples
+
+### React
+
+```tsx
+import { useEffect } from 'react';
+import { createPixeasyBuilder } from '@pixeasy/customizer';
+import '@pixeasy/customizer/styles.css';
+
+export function CustomizerHost() {
+  useEffect(() => {
+    const builder = createPixeasyBuilder();
+    builder.open({
+      container: 'pixeasyBuilder',
+      apiKey: 'dk_xxx_yyy',
+      productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+    });
+    return () => builder.close();
+  }, []);
+
+  return <div id="pixeasyBuilder" />;
+}
+```
+
+### Vue
+
+```ts
+import { onMounted, onBeforeUnmount } from 'vue';
+import { createPixeasyBuilder } from '@pixeasy/customizer';
+import '@pixeasy/customizer/styles.css';
+
+const builder = createPixeasyBuilder();
+
+onMounted(() => {
+  builder.open({
+    container: 'pixeasyBuilder',
+    apiKey: 'dk_xxx_yyy',
+    productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+  });
+});
+
+onBeforeUnmount(() => builder.close());
+```
+
+## Exports
+
+- `createPixeasyBuilder`
+- `PixeasyBuilder`
+- `definePixeasyCustomizerElement`
+- typed options/events (`PixeasyOpenOptions`, `ManifestLoadedEventDetail`, etc.)
+- stylesheet export: `@pixeasy/customizer/styles.css`

package/package.json

@@ -1,23 +1,33 @@
-{
-  "name": "@pixeasy/customizer",
-  "version": "0.0.0",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./pixeasy-customizer.min.js",
-  "module": "./pixeasy-customizer.min.js",
-  "types": "./index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./pixeasy-customizer.min.js",
-      "default": "./pixeasy-customizer.min.js"
-    },
-    "./styles.css": "./pixeasy-customizer.css"
-  },
-  "sideEffects": [
-    "./pixeasy-customizer.min.js",
-    "./pixeasy-customizer.css"
-  ]
+{
+  "name": "@pixeasy/customizer",
+  "version": "0.0.2-beta.0",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./pixeasy-customizer.min.js",
+  "module": "./pixeasy-customizer.min.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./pixeasy-customizer.min.js",
+      "default": "./pixeasy-customizer.min.js"
+    },
+    "./styles.css": "./pixeasy-customizer.css"
+  },
+  "sideEffects": [
+    "./pixeasy-customizer.min.js",
+    "./pixeasy-customizer.css"
+  ],
+  "files": [
+    "pixeasy-customizer.min.js",
+    "pixeasy-customizer.css",
+    "index.d.ts",
+    "README.md",
+    "LICENSE",
+    "assets",
+    "media"
+  ]
 }