Imagine Curator SDK (csdk-test)

Version: 1.0.29

A comprehensive SDK for integrating Imagine Curator into your React application with full Unity 3D support.

Features

• 🔐 JWT Authentication - Secure token-based authentication
• 🎨 Multiple Curator Types - Support for room, project, render, automation, and builder types
• 🎮 Unity 3D Integration - Built-in Unity WebGL support
• ⚛️ React Components - Ready-to-use React components
• 🎯 Type Safety - PropTypes validation for all components
• 📦 Complete Package - Includes all necessary Unity build files

Installation

npm install csdk-test

or

yarn add csdk-test

Quick Start

import React from 'react';
import { ImagineSDKWrapper, ImagineSDK } from 'csdk-test';

function App() {
  const handleAuthSuccess = (userDetails) => {
    console.log('User authenticated:', userDetails);
  };

  const handleAuthError = (error) => {
    console.error('Authentication failed:', error);
  };

  const handleCuratorLoad = ({ id, type }) => {
    console.log(`Curator loaded: ${type} with id ${id}`);
  };

  return (
    <ImagineSDKWrapper
      token="your-jwt-token"
      refreshToken="your-refresh-token"
      onAuthSuccess={handleAuthSuccess}
      onAuthError={handleAuthError}>
      <ImagineSDK id="room-123" type="room" onLoad={handleCuratorLoad} />
    </ImagineSDKWrapper>
  );
}

export default App;

Components

ImagineSDKWrapper

Main wrapper component that handles authentication and provides necessary context providers.

Props

| Prop | Type | Required | Description | | --------------- | --------- | -------- | -------------------------------------- | | token | string | Yes | JWT token for authentication | | refreshToken | string | No | Refresh token for token renewal | | children | ReactNode | Yes | Child components | | onAuthError | function | No | Callback for authentication errors | | onAuthSuccess | function | No | Callback for successful authentication |

Example

<ImagineSDKWrapper
  token="eyJhbGciOiJIUzI1NiIs..."
  refreshToken="refresh_token_here"
  onAuthSuccess={(user) => console.log('Authenticated:', user)}
  onAuthError={(error) => console.error('Auth failed:', error)}>
  {/* Your components */}
</ImagineSDKWrapper>

ImagineSDK

Main component for loading and displaying the curator.

Props

| Prop | Type | Required | Description | | ---------------------------- | ------------- | -------- | ---------------------------------------------------------- | | id | string/number | Yes* | ID of the curator entity | | type | string | Yes | Type: 'room', 'project', 'render', 'automation', 'builder' | | cameraName | string | No | Camera name for render type | | zipUuid | string | No | UUID for project zip files | | isOnboarding | boolean | No | Flag for onboarding flow | | originalTemplateId | string/number | No | Original template ID | | combinedWithConfiguratorId | string/number | No | Combined configurator ID | | lightingRoomId | string/number | No | Lighting room ID | | lightingBaseRoomId | string/number | No | Base lighting room ID | | lightroomContentType | string | No | Content type for lightroom | | openImages | boolean | No | Flag to open images panel | | onLoad | function | No | Callback when curator loads | | onError | function | No | Callback when error occurs |

*Either id, zipUuid, or combinedWithConfiguratorId is required

Usage Examples

Loading a Room

<ImagineSDK id="room-456" type="room" onLoad={({ id, type }) => console.log(`Room ${id} loaded`)} />

Loading a Project

<ImagineSDK
  id="project-789"
  type="project"
  zipUuid="uuid-string"
  onLoad={({ id, type }) => console.log(`Project ${id} loaded`)}
/>

Loading a Render

<ImagineSDK
  id="render-123"
  type="render"
  cameraName="Camera1"
  originalTemplateId="template-456"
  onLoad={({ id, type }) => console.log(`Render ${id} loaded`)}
/>

Loading Automation

<ImagineSDK
  id="automation-789"
  type="automation"
  onLoad={({ id, type }) => console.log(`Automation ${id} loaded`)}
/>

Loading Builder

<ImagineSDK type="builder" onLoad={({ type }) => console.log('Builder loaded')} />

Complete Example

import React, { useState } from 'react';
import { ImagineSDKWrapper, ImagineSDK } from 'csdk-test';

function MyApp() {
  const [curatorType, setCuratorType] = useState('room');
  const [curatorId, setCuratorId] = useState('room-123');
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const token = 'your-jwt-token';
  const refreshToken = 'your-refresh-token';

  const handleAuthSuccess = (userDetails) => {
    console.log('User authenticated successfully');
    setIsAuthenticated(true);
  };

  const handleAuthError = (error) => {
    console.error('Authentication failed:', error);
    setIsAuthenticated(false);
  };

  const handleCuratorLoad = ({ id, type }) => {
    console.log(`Curator loaded successfully: ${type} (${id})`);
  };

  const handleCuratorError = (error) => {
    console.error('Curator error:', error);
  };

  return (
    <ImagineSDKWrapper
      token={token}
      refreshToken={refreshToken}
      onAuthSuccess={handleAuthSuccess}
      onAuthError={handleAuthError}>
      <div style={{ width: '100%', height: '100vh' }}>
        {isAuthenticated && (
          <ImagineSDK
            id={curatorId}
            type={curatorType}
            onLoad={handleCuratorLoad}
            onError={handleCuratorError}
          />
        )}
      </div>
    </ImagineSDKWrapper>
  );
}

export default MyApp;

Unity Build Files

The SDK includes all necessary Unity build files:

• /Build - Unity WebGL build files
• /draco - Draco compression library
• /envmap - Environment maps for 3D rendering

These files are automatically included when you install the SDK.

API Reference

Exported Utilities

import {
  errorToast,
  successToast,
  warningToast,
  infoToast,
  SDK_VERSION,
  SDK_NAME,
} from 'csdk-test';

Toast Notifications

import { errorToast, successToast } from 'csdk-test';

// Show success message
successToast('Operation completed successfully');

// Show error message
errorToast('An error occurred');

// Show warning message
warningToast('Warning: Check your input');

// Show info message
infoToast('Information message');

TypeScript Support

TypeScript definitions are included in the package. Import types:

import { ImagineSDKWrapper, ImagineSDK } from 'csdk-test';

Browser Compatibility

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Requirements

• React ^18.2.0
• React DOM ^18.2.0
• React Redux ^7.2.6
• React Router DOM ^6.2.1

Troubleshooting

Authentication Issues

If you're experiencing authentication issues:

1. Verify your JWT token is valid
2. Check token expiration
3. Ensure the token has proper permissions

Unity Loading Issues

If Unity doesn't load:

1. Check browser console for errors
2. Ensure Unity build files are accessible
3. Verify browser WebGL support

Import Errors

If you get import errors:

1. Ensure all peer dependencies are installed
2. Clear node_modules and reinstall
3. Check for version conflicts

Support

For issues and questions:

• GitHub Issues: [Link to issues]
• Email: [email protected]
• Documentation: [Link to docs]

License

MIT

Changelog

Version 1.0.29

• Initial release
• JWT authentication support
• Multiple curator types (room, project, render, automation, builder)
• Unity 3D integration
• Complete Unity build files included