csdk-test 1.0.28 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.txt +1 -0
- package/README.md +326 -0
- package/package.json +45 -33
- package/dist/index.esm.js +0 -227
- package/dist/index.js +0 -232
package/LICENSE.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Apache License Version 2.0, January 2004, http://www.apache.org/licenses/
|
package/README.md
ADDED
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
# Imagine Curator SDK (csdk-test)
|
|
2
|
+
|
|
3
|
+
Version: 1.0.29
|
|
4
|
+
|
|
5
|
+
A comprehensive SDK for integrating Imagine Curator into your React application with full Unity 3D support.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- 🔐 **JWT Authentication** - Secure token-based authentication
|
|
10
|
+
- 🎨 **Multiple Curator Types** - Support for room, project, render, automation, and builder types
|
|
11
|
+
- 🎮 **Unity 3D Integration** - Built-in Unity WebGL support
|
|
12
|
+
- ⚛️ **React Components** - Ready-to-use React components
|
|
13
|
+
- 🎯 **Type Safety** - PropTypes validation for all components
|
|
14
|
+
- 📦 **Complete Package** - Includes all necessary Unity build files
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install csdk-test
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
or
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
yarn add csdk-test
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Quick Start
|
|
29
|
+
|
|
30
|
+
```jsx
|
|
31
|
+
import React from 'react';
|
|
32
|
+
import { ImagineSDKWrapper, ImagineSDK } from 'csdk-test';
|
|
33
|
+
|
|
34
|
+
function App() {
|
|
35
|
+
const handleAuthSuccess = (userDetails) => {
|
|
36
|
+
console.log('User authenticated:', userDetails);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const handleAuthError = (error) => {
|
|
40
|
+
console.error('Authentication failed:', error);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const handleCuratorLoad = ({ id, type }) => {
|
|
44
|
+
console.log(`Curator loaded: ${type} with id ${id}`);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<ImagineSDKWrapper
|
|
49
|
+
token="your-jwt-token"
|
|
50
|
+
refreshToken="your-refresh-token"
|
|
51
|
+
onAuthSuccess={handleAuthSuccess}
|
|
52
|
+
onAuthError={handleAuthError}>
|
|
53
|
+
<ImagineSDK id="room-123" type="room" onLoad={handleCuratorLoad} />
|
|
54
|
+
</ImagineSDKWrapper>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export default App;
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Components
|
|
62
|
+
|
|
63
|
+
### ImagineSDKWrapper
|
|
64
|
+
|
|
65
|
+
Main wrapper component that handles authentication and provides necessary context providers.
|
|
66
|
+
|
|
67
|
+
#### Props
|
|
68
|
+
|
|
69
|
+
| Prop | Type | Required | Description |
|
|
70
|
+
| --------------- | --------- | -------- | -------------------------------------- |
|
|
71
|
+
| `token` | string | Yes | JWT token for authentication |
|
|
72
|
+
| `refreshToken` | string | No | Refresh token for token renewal |
|
|
73
|
+
| `children` | ReactNode | Yes | Child components |
|
|
74
|
+
| `onAuthError` | function | No | Callback for authentication errors |
|
|
75
|
+
| `onAuthSuccess` | function | No | Callback for successful authentication |
|
|
76
|
+
|
|
77
|
+
#### Example
|
|
78
|
+
|
|
79
|
+
```jsx
|
|
80
|
+
<ImagineSDKWrapper
|
|
81
|
+
token="eyJhbGciOiJIUzI1NiIs..."
|
|
82
|
+
refreshToken="refresh_token_here"
|
|
83
|
+
onAuthSuccess={(user) => console.log('Authenticated:', user)}
|
|
84
|
+
onAuthError={(error) => console.error('Auth failed:', error)}>
|
|
85
|
+
{/* Your components */}
|
|
86
|
+
</ImagineSDKWrapper>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### ImagineSDK
|
|
90
|
+
|
|
91
|
+
Main component for loading and displaying the curator.
|
|
92
|
+
|
|
93
|
+
#### Props
|
|
94
|
+
|
|
95
|
+
| Prop | Type | Required | Description |
|
|
96
|
+
| ---------------------------- | ------------- | -------- | ---------------------------------------------------------- |
|
|
97
|
+
| `id` | string/number | Yes\* | ID of the curator entity |
|
|
98
|
+
| `type` | string | Yes | Type: 'room', 'project', 'render', 'automation', 'builder' |
|
|
99
|
+
| `cameraName` | string | No | Camera name for render type |
|
|
100
|
+
| `zipUuid` | string | No | UUID for project zip files |
|
|
101
|
+
| `isOnboarding` | boolean | No | Flag for onboarding flow |
|
|
102
|
+
| `originalTemplateId` | string/number | No | Original template ID |
|
|
103
|
+
| `combinedWithConfiguratorId` | string/number | No | Combined configurator ID |
|
|
104
|
+
| `lightingRoomId` | string/number | No | Lighting room ID |
|
|
105
|
+
| `lightingBaseRoomId` | string/number | No | Base lighting room ID |
|
|
106
|
+
| `lightroomContentType` | string | No | Content type for lightroom |
|
|
107
|
+
| `openImages` | boolean | No | Flag to open images panel |
|
|
108
|
+
| `onLoad` | function | No | Callback when curator loads |
|
|
109
|
+
| `onError` | function | No | Callback when error occurs |
|
|
110
|
+
|
|
111
|
+
\*Either `id`, `zipUuid`, or `combinedWithConfiguratorId` is required
|
|
112
|
+
|
|
113
|
+
## Usage Examples
|
|
114
|
+
|
|
115
|
+
### Loading a Room
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
<ImagineSDK id="room-456" type="room" onLoad={({ id, type }) => console.log(`Room ${id} loaded`)} />
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Loading a Project
|
|
122
|
+
|
|
123
|
+
```jsx
|
|
124
|
+
<ImagineSDK
|
|
125
|
+
id="project-789"
|
|
126
|
+
type="project"
|
|
127
|
+
zipUuid="uuid-string"
|
|
128
|
+
onLoad={({ id, type }) => console.log(`Project ${id} loaded`)}
|
|
129
|
+
/>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Loading a Render
|
|
133
|
+
|
|
134
|
+
```jsx
|
|
135
|
+
<ImagineSDK
|
|
136
|
+
id="render-123"
|
|
137
|
+
type="render"
|
|
138
|
+
cameraName="Camera1"
|
|
139
|
+
originalTemplateId="template-456"
|
|
140
|
+
onLoad={({ id, type }) => console.log(`Render ${id} loaded`)}
|
|
141
|
+
/>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Loading Automation
|
|
145
|
+
|
|
146
|
+
```jsx
|
|
147
|
+
<ImagineSDK
|
|
148
|
+
id="automation-789"
|
|
149
|
+
type="automation"
|
|
150
|
+
onLoad={({ id, type }) => console.log(`Automation ${id} loaded`)}
|
|
151
|
+
/>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Loading Builder
|
|
155
|
+
|
|
156
|
+
```jsx
|
|
157
|
+
<ImagineSDK type="builder" onLoad={({ type }) => console.log('Builder loaded')} />
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Complete Example
|
|
161
|
+
|
|
162
|
+
```jsx
|
|
163
|
+
import React, { useState } from 'react';
|
|
164
|
+
import { ImagineSDKWrapper, ImagineSDK } from 'csdk-test';
|
|
165
|
+
|
|
166
|
+
function MyApp() {
|
|
167
|
+
const [curatorType, setCuratorType] = useState('room');
|
|
168
|
+
const [curatorId, setCuratorId] = useState('room-123');
|
|
169
|
+
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
170
|
+
|
|
171
|
+
const token = 'your-jwt-token';
|
|
172
|
+
const refreshToken = 'your-refresh-token';
|
|
173
|
+
|
|
174
|
+
const handleAuthSuccess = (userDetails) => {
|
|
175
|
+
console.log('User authenticated successfully');
|
|
176
|
+
setIsAuthenticated(true);
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
const handleAuthError = (error) => {
|
|
180
|
+
console.error('Authentication failed:', error);
|
|
181
|
+
setIsAuthenticated(false);
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
const handleCuratorLoad = ({ id, type }) => {
|
|
185
|
+
console.log(`Curator loaded successfully: ${type} (${id})`);
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
const handleCuratorError = (error) => {
|
|
189
|
+
console.error('Curator error:', error);
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
return (
|
|
193
|
+
<ImagineSDKWrapper
|
|
194
|
+
token={token}
|
|
195
|
+
refreshToken={refreshToken}
|
|
196
|
+
onAuthSuccess={handleAuthSuccess}
|
|
197
|
+
onAuthError={handleAuthError}>
|
|
198
|
+
<div style={{ width: '100%', height: '100vh' }}>
|
|
199
|
+
{isAuthenticated && (
|
|
200
|
+
<ImagineSDK
|
|
201
|
+
id={curatorId}
|
|
202
|
+
type={curatorType}
|
|
203
|
+
onLoad={handleCuratorLoad}
|
|
204
|
+
onError={handleCuratorError}
|
|
205
|
+
/>
|
|
206
|
+
)}
|
|
207
|
+
</div>
|
|
208
|
+
</ImagineSDKWrapper>
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
export default MyApp;
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## Unity Build Files
|
|
216
|
+
|
|
217
|
+
The SDK includes all necessary Unity build files:
|
|
218
|
+
|
|
219
|
+
- `/Build` - Unity WebGL build files
|
|
220
|
+
- `/draco` - Draco compression library
|
|
221
|
+
- `/envmap` - Environment maps for 3D rendering
|
|
222
|
+
|
|
223
|
+
These files are automatically included when you install the SDK.
|
|
224
|
+
|
|
225
|
+
## API Reference
|
|
226
|
+
|
|
227
|
+
### Exported Utilities
|
|
228
|
+
|
|
229
|
+
```jsx
|
|
230
|
+
import {
|
|
231
|
+
errorToast,
|
|
232
|
+
successToast,
|
|
233
|
+
warningToast,
|
|
234
|
+
infoToast,
|
|
235
|
+
SDK_VERSION,
|
|
236
|
+
SDK_NAME,
|
|
237
|
+
} from 'csdk-test';
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### Toast Notifications
|
|
241
|
+
|
|
242
|
+
```jsx
|
|
243
|
+
import { errorToast, successToast } from 'csdk-test';
|
|
244
|
+
|
|
245
|
+
// Show success message
|
|
246
|
+
successToast('Operation completed successfully');
|
|
247
|
+
|
|
248
|
+
// Show error message
|
|
249
|
+
errorToast('An error occurred');
|
|
250
|
+
|
|
251
|
+
// Show warning message
|
|
252
|
+
warningToast('Warning: Check your input');
|
|
253
|
+
|
|
254
|
+
// Show info message
|
|
255
|
+
infoToast('Information message');
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
## TypeScript Support
|
|
259
|
+
|
|
260
|
+
TypeScript definitions are included in the package. Import types:
|
|
261
|
+
|
|
262
|
+
```typescript
|
|
263
|
+
import { ImagineSDKWrapper, ImagineSDK } from 'csdk-test';
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
## Browser Compatibility
|
|
267
|
+
|
|
268
|
+
- Chrome (latest)
|
|
269
|
+
- Firefox (latest)
|
|
270
|
+
- Safari (latest)
|
|
271
|
+
- Edge (latest)
|
|
272
|
+
|
|
273
|
+
## Requirements
|
|
274
|
+
|
|
275
|
+
- React ^18.2.0
|
|
276
|
+
- React DOM ^18.2.0
|
|
277
|
+
- React Redux ^7.2.6
|
|
278
|
+
- React Router DOM ^6.2.1
|
|
279
|
+
|
|
280
|
+
## Troubleshooting
|
|
281
|
+
|
|
282
|
+
### Authentication Issues
|
|
283
|
+
|
|
284
|
+
If you're experiencing authentication issues:
|
|
285
|
+
|
|
286
|
+
1. Verify your JWT token is valid
|
|
287
|
+
2. Check token expiration
|
|
288
|
+
3. Ensure the token has proper permissions
|
|
289
|
+
|
|
290
|
+
### Unity Loading Issues
|
|
291
|
+
|
|
292
|
+
If Unity doesn't load:
|
|
293
|
+
|
|
294
|
+
1. Check browser console for errors
|
|
295
|
+
2. Ensure Unity build files are accessible
|
|
296
|
+
3. Verify browser WebGL support
|
|
297
|
+
|
|
298
|
+
### Import Errors
|
|
299
|
+
|
|
300
|
+
If you get import errors:
|
|
301
|
+
|
|
302
|
+
1. Ensure all peer dependencies are installed
|
|
303
|
+
2. Clear node_modules and reinstall
|
|
304
|
+
3. Check for version conflicts
|
|
305
|
+
|
|
306
|
+
## Support
|
|
307
|
+
|
|
308
|
+
For issues and questions:
|
|
309
|
+
|
|
310
|
+
- GitHub Issues: [Link to issues]
|
|
311
|
+
- Email: support@imagine.com
|
|
312
|
+
- Documentation: [Link to docs]
|
|
313
|
+
|
|
314
|
+
## License
|
|
315
|
+
|
|
316
|
+
MIT
|
|
317
|
+
|
|
318
|
+
## Changelog
|
|
319
|
+
|
|
320
|
+
### Version 1.0.29
|
|
321
|
+
|
|
322
|
+
- Initial release
|
|
323
|
+
- JWT authentication support
|
|
324
|
+
- Multiple curator types (room, project, render, automation, builder)
|
|
325
|
+
- Unity 3D integration
|
|
326
|
+
- Complete Unity build files included
|
package/package.json
CHANGED
|
@@ -1,35 +1,47 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
2
|
+
"name": "csdk-test",
|
|
3
|
+
"version": "1.0.29",
|
|
4
|
+
"description": "Imagine Curator SDK - A comprehensive SDK for integrating Imagine Curator with Unity 3D support",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"public/Build",
|
|
11
|
+
"public/draco",
|
|
12
|
+
"public/envmap",
|
|
13
|
+
"README.md",
|
|
14
|
+
"LICENSE.txt"
|
|
15
|
+
],
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "https://github.com/your-org/imagine-curator-sdk.git"
|
|
19
|
+
},
|
|
20
|
+
"keywords": [
|
|
21
|
+
"curator",
|
|
22
|
+
"unity",
|
|
23
|
+
"3d",
|
|
24
|
+
"sdk",
|
|
25
|
+
"react",
|
|
26
|
+
"imagine"
|
|
27
|
+
],
|
|
28
|
+
"author": "Imagine Team",
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": "^18.2.0",
|
|
32
|
+
"react-dom": "^18.2.0",
|
|
33
|
+
"react-redux": "^7.2.6",
|
|
34
|
+
"react-router-dom": "^6.2.1"
|
|
35
|
+
},
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"@reduxjs/toolkit": "^1.7.2",
|
|
38
|
+
"axios": "^0.25.0",
|
|
39
|
+
"jwt-decode": "^3.1.2",
|
|
40
|
+
"lodash": "^4.17.21",
|
|
41
|
+
"react-unity-webgl": "^8.7.4",
|
|
42
|
+
"react-toastify": "^8.1.1"
|
|
43
|
+
},
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public"
|
|
46
|
+
}
|
|
35
47
|
}
|
package/dist/index.esm.js
DELETED
|
@@ -1,227 +0,0 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
const API_BASE_URL = 'https://staging.imagine.io';
|
|
4
|
-
const styles = {
|
|
5
|
-
container: {
|
|
6
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
7
|
-
padding: '24px',
|
|
8
|
-
maxWidth: '500px',
|
|
9
|
-
margin: '0 auto'
|
|
10
|
-
},
|
|
11
|
-
card: {
|
|
12
|
-
backgroundColor: '#fff',
|
|
13
|
-
borderRadius: '12px',
|
|
14
|
-
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
15
|
-
padding: '24px'
|
|
16
|
-
},
|
|
17
|
-
header: {
|
|
18
|
-
display: 'flex',
|
|
19
|
-
alignItems: 'center',
|
|
20
|
-
marginBottom: '20px',
|
|
21
|
-
gap: '16px'
|
|
22
|
-
},
|
|
23
|
-
avatar: {
|
|
24
|
-
width: '64px',
|
|
25
|
-
height: '64px',
|
|
26
|
-
borderRadius: '50%',
|
|
27
|
-
backgroundColor: '#e0e0e0',
|
|
28
|
-
display: 'flex',
|
|
29
|
-
alignItems: 'center',
|
|
30
|
-
justifyContent: 'center',
|
|
31
|
-
fontSize: '24px',
|
|
32
|
-
color: '#666',
|
|
33
|
-
overflow: 'hidden'
|
|
34
|
-
},
|
|
35
|
-
avatarImage: {
|
|
36
|
-
width: '100%',
|
|
37
|
-
height: '100%',
|
|
38
|
-
objectFit: 'cover'
|
|
39
|
-
},
|
|
40
|
-
name: {
|
|
41
|
-
fontSize: '20px',
|
|
42
|
-
fontWeight: '600',
|
|
43
|
-
color: '#1a1a1a',
|
|
44
|
-
margin: 0
|
|
45
|
-
},
|
|
46
|
-
email: {
|
|
47
|
-
fontSize: '14px',
|
|
48
|
-
color: '#666',
|
|
49
|
-
margin: '4px 0 0 0'
|
|
50
|
-
},
|
|
51
|
-
detailsGrid: {
|
|
52
|
-
display: 'grid',
|
|
53
|
-
gap: '12px'
|
|
54
|
-
},
|
|
55
|
-
detailRow: {
|
|
56
|
-
display: 'flex',
|
|
57
|
-
justifyContent: 'space-between',
|
|
58
|
-
padding: '8px 0',
|
|
59
|
-
borderBottom: '1px solid #f0f0f0'
|
|
60
|
-
},
|
|
61
|
-
label: {
|
|
62
|
-
fontSize: '14px',
|
|
63
|
-
color: '#666'
|
|
64
|
-
},
|
|
65
|
-
value: {
|
|
66
|
-
fontSize: '14px',
|
|
67
|
-
color: '#1a1a1a',
|
|
68
|
-
fontWeight: '500'
|
|
69
|
-
},
|
|
70
|
-
loading: {
|
|
71
|
-
display: 'flex',
|
|
72
|
-
alignItems: 'center',
|
|
73
|
-
justifyContent: 'center',
|
|
74
|
-
padding: '40px',
|
|
75
|
-
color: '#666'
|
|
76
|
-
},
|
|
77
|
-
error: {
|
|
78
|
-
backgroundColor: '#fee',
|
|
79
|
-
color: '#c00',
|
|
80
|
-
padding: '16px',
|
|
81
|
-
borderRadius: '8px',
|
|
82
|
-
textAlign: 'center'
|
|
83
|
-
},
|
|
84
|
-
spinner: {
|
|
85
|
-
width: '24px',
|
|
86
|
-
height: '24px',
|
|
87
|
-
border: '3px solid #f0f0f0',
|
|
88
|
-
borderTop: '3px solid #666',
|
|
89
|
-
borderRadius: '50%',
|
|
90
|
-
animation: 'spin 1s linear infinite'
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
const UserDetails = _ref => {
|
|
94
|
-
let {
|
|
95
|
-
token,
|
|
96
|
-
apiBaseUrl,
|
|
97
|
-
onUserLoaded,
|
|
98
|
-
onError
|
|
99
|
-
} = _ref;
|
|
100
|
-
const [user, setUser] = useState(null);
|
|
101
|
-
const [loading, setLoading] = useState(true);
|
|
102
|
-
const [error, setError] = useState(null);
|
|
103
|
-
const baseUrl = apiBaseUrl || API_BASE_URL;
|
|
104
|
-
useEffect(() => {
|
|
105
|
-
if (!token) {
|
|
106
|
-
setError('Token is required');
|
|
107
|
-
setLoading(false);
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
const fetchUserDetails = async () => {
|
|
111
|
-
try {
|
|
112
|
-
setLoading(true);
|
|
113
|
-
setError(null);
|
|
114
|
-
const response = await fetch("".concat(baseUrl, "/users/api/v3/user-details/"), {
|
|
115
|
-
method: 'GET',
|
|
116
|
-
headers: {
|
|
117
|
-
'Authorization': "Bearer ".concat(token),
|
|
118
|
-
'Content-Type': 'application/json'
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
if (!response.ok) {
|
|
122
|
-
throw new Error("Failed to fetch user details: ".concat(response.status));
|
|
123
|
-
}
|
|
124
|
-
const data = await response.json();
|
|
125
|
-
setUser(data);
|
|
126
|
-
if (onUserLoaded) {
|
|
127
|
-
onUserLoaded(data);
|
|
128
|
-
}
|
|
129
|
-
} catch (err) {
|
|
130
|
-
const errorMessage = err.message || 'Failed to fetch user details';
|
|
131
|
-
setError(errorMessage);
|
|
132
|
-
if (onError) {
|
|
133
|
-
onError(err);
|
|
134
|
-
}
|
|
135
|
-
} finally {
|
|
136
|
-
setLoading(false);
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
fetchUserDetails();
|
|
140
|
-
}, [token, baseUrl, onUserLoaded, onError]);
|
|
141
|
-
if (loading) {
|
|
142
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
143
|
-
style: styles.container
|
|
144
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
145
|
-
style: styles.card
|
|
146
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
147
|
-
style: styles.loading
|
|
148
|
-
}, /*#__PURE__*/React.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"), /*#__PURE__*/React.createElement("div", {
|
|
149
|
-
style: styles.spinner
|
|
150
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
151
|
-
style: {
|
|
152
|
-
marginLeft: '12px'
|
|
153
|
-
}
|
|
154
|
-
}, "Loading user details..."))));
|
|
155
|
-
}
|
|
156
|
-
if (error) {
|
|
157
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
158
|
-
style: styles.container
|
|
159
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
160
|
-
style: styles.error
|
|
161
|
-
}, /*#__PURE__*/React.createElement("strong", null, "Error:"), " ", error));
|
|
162
|
-
}
|
|
163
|
-
if (!user) {
|
|
164
|
-
return null;
|
|
165
|
-
}
|
|
166
|
-
const getInitials = name => {
|
|
167
|
-
if (!name) return '?';
|
|
168
|
-
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
|
169
|
-
};
|
|
170
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
style: styles.container
|
|
172
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
173
|
-
style: styles.card
|
|
174
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
175
|
-
style: styles.header
|
|
176
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
177
|
-
style: styles.avatar
|
|
178
|
-
}, user.profile_pic ? /*#__PURE__*/React.createElement("img", {
|
|
179
|
-
src: user.profile_pic,
|
|
180
|
-
alt: user.name,
|
|
181
|
-
style: styles.avatarImage
|
|
182
|
-
}) : getInitials(user.name || user.first_name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
|
|
183
|
-
style: styles.name
|
|
184
|
-
}, user.name || "".concat(user.first_name || '', " ").concat(user.last_name || '').trim() || 'Unknown User'), /*#__PURE__*/React.createElement("p", {
|
|
185
|
-
style: styles.email
|
|
186
|
-
}, user.email))), /*#__PURE__*/React.createElement("div", {
|
|
187
|
-
style: styles.detailsGrid
|
|
188
|
-
}, user.id && /*#__PURE__*/React.createElement("div", {
|
|
189
|
-
style: styles.detailRow
|
|
190
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
191
|
-
style: styles.label
|
|
192
|
-
}, "User ID"), /*#__PURE__*/React.createElement("span", {
|
|
193
|
-
style: styles.value
|
|
194
|
-
}, user.id)), user.organization && /*#__PURE__*/React.createElement("div", {
|
|
195
|
-
style: styles.detailRow
|
|
196
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
197
|
-
style: styles.label
|
|
198
|
-
}, "Organization"), /*#__PURE__*/React.createElement("span", {
|
|
199
|
-
style: styles.value
|
|
200
|
-
}, user.organization.name || user.organization)), user.role && /*#__PURE__*/React.createElement("div", {
|
|
201
|
-
style: styles.detailRow
|
|
202
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
203
|
-
style: styles.label
|
|
204
|
-
}, "Role"), /*#__PURE__*/React.createElement("span", {
|
|
205
|
-
style: styles.value
|
|
206
|
-
}, user.role)), user.phone && /*#__PURE__*/React.createElement("div", {
|
|
207
|
-
style: styles.detailRow
|
|
208
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
209
|
-
style: styles.label
|
|
210
|
-
}, "Phone"), /*#__PURE__*/React.createElement("span", {
|
|
211
|
-
style: styles.value
|
|
212
|
-
}, user.phone)), user.created_at && /*#__PURE__*/React.createElement("div", {
|
|
213
|
-
style: styles.detailRow
|
|
214
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
215
|
-
style: styles.label
|
|
216
|
-
}, "Member Since"), /*#__PURE__*/React.createElement("span", {
|
|
217
|
-
style: styles.value
|
|
218
|
-
}, new Date(user.created_at).toLocaleDateString())), typeof user.is_verified !== 'undefined' && /*#__PURE__*/React.createElement("div", {
|
|
219
|
-
style: styles.detailRow
|
|
220
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
221
|
-
style: styles.label
|
|
222
|
-
}, "Verified"), /*#__PURE__*/React.createElement("span", {
|
|
223
|
-
style: styles.value
|
|
224
|
-
}, user.is_verified ? 'Yes' : 'No')))));
|
|
225
|
-
};
|
|
226
|
-
|
|
227
|
-
export { UserDetails, UserDetails as default };
|
package/dist/index.js
DELETED
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
const API_BASE_URL = 'https://staging.imagine.io';
|
|
8
|
-
const styles = {
|
|
9
|
-
container: {
|
|
10
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
11
|
-
padding: '24px',
|
|
12
|
-
maxWidth: '500px',
|
|
13
|
-
margin: '0 auto'
|
|
14
|
-
},
|
|
15
|
-
card: {
|
|
16
|
-
backgroundColor: '#fff',
|
|
17
|
-
borderRadius: '12px',
|
|
18
|
-
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
19
|
-
padding: '24px'
|
|
20
|
-
},
|
|
21
|
-
header: {
|
|
22
|
-
display: 'flex',
|
|
23
|
-
alignItems: 'center',
|
|
24
|
-
marginBottom: '20px',
|
|
25
|
-
gap: '16px'
|
|
26
|
-
},
|
|
27
|
-
avatar: {
|
|
28
|
-
width: '64px',
|
|
29
|
-
height: '64px',
|
|
30
|
-
borderRadius: '50%',
|
|
31
|
-
backgroundColor: '#e0e0e0',
|
|
32
|
-
display: 'flex',
|
|
33
|
-
alignItems: 'center',
|
|
34
|
-
justifyContent: 'center',
|
|
35
|
-
fontSize: '24px',
|
|
36
|
-
color: '#666',
|
|
37
|
-
overflow: 'hidden'
|
|
38
|
-
},
|
|
39
|
-
avatarImage: {
|
|
40
|
-
width: '100%',
|
|
41
|
-
height: '100%',
|
|
42
|
-
objectFit: 'cover'
|
|
43
|
-
},
|
|
44
|
-
name: {
|
|
45
|
-
fontSize: '20px',
|
|
46
|
-
fontWeight: '600',
|
|
47
|
-
color: '#1a1a1a',
|
|
48
|
-
margin: 0
|
|
49
|
-
},
|
|
50
|
-
email: {
|
|
51
|
-
fontSize: '14px',
|
|
52
|
-
color: '#666',
|
|
53
|
-
margin: '4px 0 0 0'
|
|
54
|
-
},
|
|
55
|
-
detailsGrid: {
|
|
56
|
-
display: 'grid',
|
|
57
|
-
gap: '12px'
|
|
58
|
-
},
|
|
59
|
-
detailRow: {
|
|
60
|
-
display: 'flex',
|
|
61
|
-
justifyContent: 'space-between',
|
|
62
|
-
padding: '8px 0',
|
|
63
|
-
borderBottom: '1px solid #f0f0f0'
|
|
64
|
-
},
|
|
65
|
-
label: {
|
|
66
|
-
fontSize: '14px',
|
|
67
|
-
color: '#666'
|
|
68
|
-
},
|
|
69
|
-
value: {
|
|
70
|
-
fontSize: '14px',
|
|
71
|
-
color: '#1a1a1a',
|
|
72
|
-
fontWeight: '500'
|
|
73
|
-
},
|
|
74
|
-
loading: {
|
|
75
|
-
display: 'flex',
|
|
76
|
-
alignItems: 'center',
|
|
77
|
-
justifyContent: 'center',
|
|
78
|
-
padding: '40px',
|
|
79
|
-
color: '#666'
|
|
80
|
-
},
|
|
81
|
-
error: {
|
|
82
|
-
backgroundColor: '#fee',
|
|
83
|
-
color: '#c00',
|
|
84
|
-
padding: '16px',
|
|
85
|
-
borderRadius: '8px',
|
|
86
|
-
textAlign: 'center'
|
|
87
|
-
},
|
|
88
|
-
spinner: {
|
|
89
|
-
width: '24px',
|
|
90
|
-
height: '24px',
|
|
91
|
-
border: '3px solid #f0f0f0',
|
|
92
|
-
borderTop: '3px solid #666',
|
|
93
|
-
borderRadius: '50%',
|
|
94
|
-
animation: 'spin 1s linear infinite'
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
const UserDetails = _ref => {
|
|
98
|
-
let {
|
|
99
|
-
token,
|
|
100
|
-
apiBaseUrl,
|
|
101
|
-
onUserLoaded,
|
|
102
|
-
onError
|
|
103
|
-
} = _ref;
|
|
104
|
-
const [user, setUser] = React.useState(null);
|
|
105
|
-
const [loading, setLoading] = React.useState(true);
|
|
106
|
-
const [error, setError] = React.useState(null);
|
|
107
|
-
const baseUrl = apiBaseUrl || API_BASE_URL;
|
|
108
|
-
React.useEffect(() => {
|
|
109
|
-
if (!token) {
|
|
110
|
-
setError('Token is required');
|
|
111
|
-
setLoading(false);
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
const fetchUserDetails = async () => {
|
|
115
|
-
try {
|
|
116
|
-
setLoading(true);
|
|
117
|
-
setError(null);
|
|
118
|
-
const response = await fetch("".concat(baseUrl, "/users/api/v3/user-details/"), {
|
|
119
|
-
method: 'GET',
|
|
120
|
-
headers: {
|
|
121
|
-
'Authorization': "Bearer ".concat(token),
|
|
122
|
-
'Content-Type': 'application/json'
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
if (!response.ok) {
|
|
126
|
-
throw new Error("Failed to fetch user details: ".concat(response.status));
|
|
127
|
-
}
|
|
128
|
-
const data = await response.json();
|
|
129
|
-
setUser(data);
|
|
130
|
-
if (onUserLoaded) {
|
|
131
|
-
onUserLoaded(data);
|
|
132
|
-
}
|
|
133
|
-
} catch (err) {
|
|
134
|
-
const errorMessage = err.message || 'Failed to fetch user details';
|
|
135
|
-
setError(errorMessage);
|
|
136
|
-
if (onError) {
|
|
137
|
-
onError(err);
|
|
138
|
-
}
|
|
139
|
-
} finally {
|
|
140
|
-
setLoading(false);
|
|
141
|
-
}
|
|
142
|
-
};
|
|
143
|
-
fetchUserDetails();
|
|
144
|
-
}, [token, baseUrl, onUserLoaded, onError]);
|
|
145
|
-
if (loading) {
|
|
146
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
147
|
-
style: styles.container
|
|
148
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
149
|
-
style: styles.card
|
|
150
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
151
|
-
style: styles.loading
|
|
152
|
-
}, /*#__PURE__*/React.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"), /*#__PURE__*/React.createElement("div", {
|
|
153
|
-
style: styles.spinner
|
|
154
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
155
|
-
style: {
|
|
156
|
-
marginLeft: '12px'
|
|
157
|
-
}
|
|
158
|
-
}, "Loading user details..."))));
|
|
159
|
-
}
|
|
160
|
-
if (error) {
|
|
161
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
162
|
-
style: styles.container
|
|
163
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
164
|
-
style: styles.error
|
|
165
|
-
}, /*#__PURE__*/React.createElement("strong", null, "Error:"), " ", error));
|
|
166
|
-
}
|
|
167
|
-
if (!user) {
|
|
168
|
-
return null;
|
|
169
|
-
}
|
|
170
|
-
const getInitials = name => {
|
|
171
|
-
if (!name) return '?';
|
|
172
|
-
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
|
173
|
-
};
|
|
174
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
175
|
-
style: styles.container
|
|
176
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
177
|
-
style: styles.card
|
|
178
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
179
|
-
style: styles.header
|
|
180
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
181
|
-
style: styles.avatar
|
|
182
|
-
}, user.profile_pic ? /*#__PURE__*/React.createElement("img", {
|
|
183
|
-
src: user.profile_pic,
|
|
184
|
-
alt: user.name,
|
|
185
|
-
style: styles.avatarImage
|
|
186
|
-
}) : getInitials(user.name || user.first_name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
|
|
187
|
-
style: styles.name
|
|
188
|
-
}, user.name || "".concat(user.first_name || '', " ").concat(user.last_name || '').trim() || 'Unknown User'), /*#__PURE__*/React.createElement("p", {
|
|
189
|
-
style: styles.email
|
|
190
|
-
}, user.email))), /*#__PURE__*/React.createElement("div", {
|
|
191
|
-
style: styles.detailsGrid
|
|
192
|
-
}, user.id && /*#__PURE__*/React.createElement("div", {
|
|
193
|
-
style: styles.detailRow
|
|
194
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
195
|
-
style: styles.label
|
|
196
|
-
}, "User ID"), /*#__PURE__*/React.createElement("span", {
|
|
197
|
-
style: styles.value
|
|
198
|
-
}, user.id)), user.organization && /*#__PURE__*/React.createElement("div", {
|
|
199
|
-
style: styles.detailRow
|
|
200
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
201
|
-
style: styles.label
|
|
202
|
-
}, "Organization"), /*#__PURE__*/React.createElement("span", {
|
|
203
|
-
style: styles.value
|
|
204
|
-
}, user.organization.name || user.organization)), user.role && /*#__PURE__*/React.createElement("div", {
|
|
205
|
-
style: styles.detailRow
|
|
206
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
207
|
-
style: styles.label
|
|
208
|
-
}, "Role"), /*#__PURE__*/React.createElement("span", {
|
|
209
|
-
style: styles.value
|
|
210
|
-
}, user.role)), user.phone && /*#__PURE__*/React.createElement("div", {
|
|
211
|
-
style: styles.detailRow
|
|
212
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
213
|
-
style: styles.label
|
|
214
|
-
}, "Phone"), /*#__PURE__*/React.createElement("span", {
|
|
215
|
-
style: styles.value
|
|
216
|
-
}, user.phone)), user.created_at && /*#__PURE__*/React.createElement("div", {
|
|
217
|
-
style: styles.detailRow
|
|
218
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
219
|
-
style: styles.label
|
|
220
|
-
}, "Member Since"), /*#__PURE__*/React.createElement("span", {
|
|
221
|
-
style: styles.value
|
|
222
|
-
}, new Date(user.created_at).toLocaleDateString())), typeof user.is_verified !== 'undefined' && /*#__PURE__*/React.createElement("div", {
|
|
223
|
-
style: styles.detailRow
|
|
224
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
225
|
-
style: styles.label
|
|
226
|
-
}, "Verified"), /*#__PURE__*/React.createElement("span", {
|
|
227
|
-
style: styles.value
|
|
228
|
-
}, user.is_verified ? 'Yes' : 'No')))));
|
|
229
|
-
};
|
|
230
|
-
|
|
231
|
-
exports.UserDetails = UserDetails;
|
|
232
|
-
exports.default = UserDetails;
|