@magiclabs.ai/magicbook-client 0.6.6 → 0.6.8-canary

package/example/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/example/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/example/src/App.tsx

@@ -0,0 +1,172 @@
+import {
+  DesignRequest,
+  DesignRequestEvent,
+  DesignRequestEventDetail,
+  Image,
+  MagicBookClient
+} from '@magiclabs.ai/magicbook-client'
+import {Layout} from './components/layout'
+import {faker} from '@faker-js/faker'
+import {useEffect, useState} from 'react'
+
+function App() {
+  const client = new MagicBookClient(import.meta.env.VITE_MB_CLIENT_API_KEY as string)
+  const [isCreatingDesignRequest, setIsCreatingDesignRequest] = useState<boolean>(false) 
+  const [designRequestEventDetail, setDesignRequestEventDetail] = useState<DesignRequestEventDetail | null>()
+  const [currentDesignRequest, setDesignRequest] = useState<DesignRequest | null>()
+  
+  function handleDesignRequestUpdated(designRequestEvent: DesignRequestEvent) {
+    console.log('MagicBook.designRequestUpdated', designRequestEvent.detail)
+    setDesignRequestEventDetail(designRequestEvent.detail)
+  }
+
+  function addMagicBookEventListener() {
+    window.addEventListener('MagicBook.designRequestUpdated', handleDesignRequestUpdated as EventListener)
+  }
+
+  function removeMagicBookEventListener() {
+    window.removeEventListener('MagicBook.designRequestUpdated', handleDesignRequestUpdated as EventListener)
+  }
+
+  useEffect(() => {
+    if (designRequestEventDetail?.slug === 'ready' && currentDesignRequest) {
+      currentDesignRequest.getJSON().then((res) => {
+        console.log('designRequest.getJSON:', res)
+      })
+    }
+    return () => {
+      removeMagicBookEventListener()
+    }  
+  }, [designRequestEventDetail])
+  
+  useEffect(() => {
+    if (isCreatingDesignRequest) {
+      addMagicBookEventListener()
+    } else {
+      setDesignRequestEventDetail(null)
+      removeMagicBookEventListener()
+    }
+    return () => {
+      removeMagicBookEventListener()
+    }
+  }, [isCreatingDesignRequest])
+
+  async function createDesignRequest() {
+    setIsCreatingDesignRequest(true)
+    const designRequest = await client.createDesignRequest({
+      occasion: 'default',
+      style: 5144,
+      bookSize: '10x10',
+      coverType: 'hc',
+      pageType: 'sp'
+    })
+    designRequest.title = 'My Book'
+    console.log('designRequest:', designRequest)
+    const imagesLength = 25
+    await Promise.all(Array.from(Array(imagesLength).keys()).map(async () => {
+      const width = 1000
+      const height = faker.number.int({min: 200, max: 500})
+      const image: Image = {
+        handle: faker.string.uuid(),
+        url: faker.image.url({width, height}),
+        width,
+        height,
+        rotation: 0,
+        captureTime: faker.date.past().toISOString(),
+        cameraMake: '',
+        cameraModel: 'Sony A7R IV',
+        filename: faker.system.commonFileName('jpg')
+      }
+      await designRequest.images.add(image)
+      console.log('designRequest.images.add:', image)
+    }))
+    console.log('designRequest.images.length:', designRequest.images.length)
+    console.log('designRequest.getOptions:', await designRequest.getOptions())
+    console.log('designRequest.submit:', await designRequest.submit({
+      imageDensity: 'high',
+      embellishmentLevel: 'few',
+      textStickerLevel: 'none'
+    }))
+    console.log('designRequest.setGuid:', await designRequest.setGuid(faker.string.uuid()))
+    setDesignRequest(designRequest)
+  }
+
+  async function cancelDesignRequest() {
+    if (currentDesignRequest) {
+      console.log('designRequest.cancel:', await currentDesignRequest.cancel())
+    }
+    // setDesignRequest(null)
+    // setIsCreatingDesignRequest(false)
+  }
+
+  return (
+    <Layout>
+      <div className='flex justify-center h-8 mb-8'>
+        {designRequestEventDetail &&
+          <div className='relative w-auto px-3 py-1 text-sm leading-6 text-gray-600 rounded-full ring-1 \
+          ring-gray-900/10 hover:ring-gray-900/20'>
+            <span className='flex items-center justify-center space-x-2'>
+              <span className='font-semibold'>Design request</span>
+              <div className="w-px h-5 bg-gray-900/10" aria-hidden />
+              <span>{designRequestEventDetail.message}</span>
+            </span>
+            {designRequestEventDetail.slug !== 'ready' &&
+              <span className='absolute -right-1 -top-1'>
+                <span className='relative flex w-3 h-3'>
+                  <span className='absolute inline-flex w-full h-full bg-indigo-400 rounded-full opacity-75 \
+                    animate-ping'></span>
+                  <span className='relative inline-flex w-3 h-3 bg-indigo-500 rounded-full'></span>
+                </span>
+              </span>
+            }
+          </div>
+        }
+      </div>
+      <div className='text-center'>
+        <h1 className='text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl'>
+          MagicBook Client Example
+        </h1>
+        <p className='mt-6 text-lg leading-8 text-gray-600'>
+          This is an example of a MagicBook client. It is a simple HTML page that imports the magicbook-client module
+          and uses it to connect to the MagicBook server.
+        </p>
+        <div className='flex items-center justify-center mt-10 gap-x-6'>
+          <button
+            onClick={createDesignRequest}
+            disabled={isCreatingDesignRequest}
+            className='rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm
+              hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+              focus-visible:outline-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed'
+          >
+              Create design request
+          </button>
+          <a 
+            href='https://www.npmjs.com/package/@magiclabs.ai/magicbook-client'
+            target='_blank'
+            className='text-sm font-semibold leading-6 text-gray-900'>
+            Learn more <span aria-hidden='true'>→</span>
+          </a>
+        </div>
+        <div className='mt-2'>
+          {currentDesignRequest &&
+            <button
+              onClick={cancelDesignRequest}
+              className='rounded-md bg-red-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm
+                hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                focus-visible:outline-red-600'
+            >
+              Cancel design request
+            </button>
+          }
+        </div>
+        <div className='fixed bottom-0 left-0 w-full backdrop-blur-sm'>
+          <p className='flex items-center justify-center m-4 font-mono text-xs leading-8 text-gray-600 rounded-full'>
+            💡 Open your browser's developer console to see the client in action.
+          </p>
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export default App

package/example/src/components/layout.tsx

@@ -0,0 +1,36 @@
+export function Layout({children}: {children: React.ReactNode}) {
+  return (
+    <div className='bg-white'>
+      <div className='relative'>
+        <div
+          className='fixed inset-x-0 overflow-hidden -top-40 -z-10 transform-gpu blur-3xl sm:-top-80'
+          aria-hidden='true'
+        >
+          <div
+            className='relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] 
+            bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]'
+            // eslint-disable-next-line max-len
+            style={{clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)'}}
+          />
+        </div>
+        <div className='absolute w-full px-6 pt-14 lg:px-8'>
+          <div className='max-w-2xl py-32 mx-auto sm:py-48 lg:py-56'>
+            {children}
+          </div>
+        </div>
+        <div
+          className='fixed inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl
+           sm:top-[calc(100%-30rem)]'
+          aria-hidden='true'
+        >
+          <div
+            className='relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr
+            from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]'
+            // eslint-disable-next-line max-len
+            style={{clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)'}}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/example/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/example/src/main.tsx

@@ -0,0 +1,10 @@
+import './index.css'
+import App from './App'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/example/src/vite-env.d.ts

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

package/example/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}
+

package/example/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/example/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/example/vite.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs.ai/magicbook-client",
-  "version": "0.6.6",
+  "version": "0.6.8-canary",
   "private": false,
   "description": "TypeScript package to create photo books with the Magicbook API.",
   "repository": {
@@ -10,12 +10,12 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "require": "./index.cjs"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "./index.cjs",
-  "module": "./index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./src/index.d.ts",
   "dependencies": {
     "dotenv": "^16.3.1",

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from '@/core/models/client'
+export * from '@/core/models/design-request/image'
+export * from '@/core/models/design-request/design-options'
+export * from '@/core/models/design-request'

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@/client/*": [
+        "./*"
+      ],
+      "@/core/*": [
+        "../../core/*"
+      ]
+    }
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,20 @@
+import * as dotenv from 'dotenv'
+import {defineConfig} from 'tsup'
+
+dotenv.config({path: '../../.env'})
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  sourcemap: true,
+  env: {
+    API_HOST: process.env.API_HOST || '',
+    WEBSOCKET_HOST: process.env.WEBSOCKET_HOST || '',
+    DESIGN_REQUEST_TIMEOUT: process.env.DESIGN_REQUEST_TIMEOUT || ''
+  },
+  target: 'esnext',
+  outDir: 'dist'
+})
+