@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.e4998c8 → 2.33.0-pr.feature-robot-precondition-list.372.c924328

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.
Files changed (29) hide show
  1. package/dist/components/DataGrid.d.ts +1 -1
  2. package/dist/components/DataGrid.d.ts.map +1 -1
  3. package/dist/components/LogViewer.d.ts.map +1 -1
  4. package/dist/components/ProgramControl.d.ts +3 -2
  5. package/dist/components/ProgramControl.d.ts.map +1 -1
  6. package/dist/components/ProgramStateIndicator.d.ts.map +1 -1
  7. package/dist/components/RobotCard.d.ts +16 -0
  8. package/dist/components/RobotCard.d.ts.map +1 -1
  9. package/dist/components/robots/manufacturerHomePositions.d.ts +21 -0
  10. package/dist/components/robots/manufacturerHomePositions.d.ts.map +1 -0
  11. package/dist/index.cjs +48 -48
  12. package/dist/index.cjs.map +1 -1
  13. package/dist/index.d.ts +1 -0
  14. package/dist/index.d.ts.map +1 -1
  15. package/dist/index.js +4989 -4705
  16. package/dist/index.js.map +1 -1
  17. package/dist/themes/createDarkTheme.d.ts.map +1 -1
  18. package/package.json +1 -1
  19. package/src/components/AppHeader.tsx +2 -2
  20. package/src/components/DataGrid.tsx +167 -20
  21. package/src/components/LogViewer.tsx +16 -0
  22. package/src/components/ProgramControl.tsx +8 -3
  23. package/src/components/ProgramStateIndicator.tsx +5 -0
  24. package/src/components/RobotCard.tsx +111 -129
  25. package/src/components/robots/manufacturerHomePositions.ts +76 -0
  26. package/src/i18n/locales/de/translations.json +1 -0
  27. package/src/i18n/locales/en/translations.json +1 -0
  28. package/src/index.ts +5 -0
  29. package/src/themes/createDarkTheme.ts +75 -1
package/dist/themes/createDarkTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CAgSvC"}
1
+ {"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CA0WvC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wandelbots/wandelbots-js-react-components",
3
- "version": "2.33.0-pr.feature-robot-precondition-list.372.e4998c8",
3
+ "version": "2.33.0-pr.feature-robot-precondition-list.372.c924328",
4
4
  "description": "React UI toolkit for building applications on top of the Wandelbots platform",
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/src/components/AppHeader.tsx CHANGED
@@ -73,8 +73,8 @@ export const AppHeader = externalizeComponent(
73
73
 
74
74
  return (
75
75
  <>
76
- <AppBar
77
- position="static"
76
+ <AppBar
77
+ position="static"
78
78
  sx={{
79
79
  boxShadow: "none",
80
80
  backgroundImage: "none",
package/src/components/DataGrid.tsx CHANGED
@@ -65,7 +65,7 @@ export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
65
65
 
66
66
  /**
67
67
  * Placeholder text for the search input
68
- * @default "Search"
68
+ * @default "Search programs"
69
69
  */
70
70
  searchPlaceholder?: string
71
71
 
@@ -102,7 +102,7 @@ export const WandelbotsDataGrid = externalizeComponent(
102
102
  getItemId,
103
103
  title,
104
104
  showCount = true,
105
- searchPlaceholder = "Search",
105
+ searchPlaceholder = "Search programs",
106
106
  dataGridProps,
107
107
  CustomToolbar,
108
108
  selectFirstByDefault = false,
@@ -185,7 +185,7 @@ export const WandelbotsDataGrid = externalizeComponent(
185
185
  display: "flex",
186
186
  width: "100%",
187
187
  gap: 1,
188
- p: 1,
188
+ p: 0.5,
189
189
  alignItems: "center",
190
190
  }}
191
191
  >
@@ -205,8 +205,9 @@ export const WandelbotsDataGrid = externalizeComponent(
205
205
  sx={{
206
206
  ml: "auto",
207
207
  display: "flex",
208
- gap: 1,
208
+ gap: 0.5,
209
209
  alignItems: "center",
210
+ pr: 1,
210
211
  }}
211
212
  >
212
213
  <FilterPanelTrigger
@@ -233,12 +234,7 @@ export const WandelbotsDataGrid = externalizeComponent(
233
234
  overflow: "hidden",
234
235
  }}
235
236
  >
236
- <Box
237
- sx={{
238
- borderRadius: state.expanded ? "4px 0 0 4px" : "4px",
239
- borderRight: state.expanded ? "none" : undefined,
240
- }}
241
- >
237
+ {!state.expanded && (
242
238
  <QuickFilterTrigger
243
239
  render={
244
240
  <ToolbarButton aria-label="Search">
@@ -246,36 +242,147 @@ export const WandelbotsDataGrid = externalizeComponent(
246
242
  </ToolbarButton>
247
243
  }
248
244
  />
249
- </Box>
245
+ )}
250
246
  <Box
251
247
  sx={{
252
248
  display: "flex",
253
249
  overflow: "hidden",
254
250
  transition: "all 0.3s ease-in-out",
255
- width: state.expanded ? "192px" : "0px",
251
+ width: state.expanded ? "200px" : "0px",
252
+ position: "relative",
256
253
  }}
257
254
  >
258
255
  <Box
259
256
  sx={{
260
257
  flex: 1,
258
+ position: "relative",
261
259
  "& .MuiInputBase-root": {
262
260
  height: "32px",
263
- borderRadius:
261
+ borderRadius: "16px",
262
+ backgroundColor: "#171927",
263
+ paddingLeft: "40px",
264
+ paddingRight:
264
265
  state.expanded && state.value !== ""
265
- ? "0"
266
- : "0 4px 4px 0",
266
+ ? "40px"
267
+ : "12px",
268
+ color: "white",
269
+ fontSize: "14px",
270
+ border: "none !important",
271
+ outline: "none !important",
272
+ boxShadow: "none !important",
273
+ "&::before": {
274
+ display: "none !important",
275
+ border: "none !important",
276
+ },
277
+ "&::after": {
278
+ display: "none !important",
279
+ border: "none !important",
280
+ },
281
+ "&:hover": {
282
+ "&::before": {
283
+ display: "none !important",
284
+ border: "none !important",
285
+ },
286
+ "&::after": {
287
+ display: "none !important",
288
+ border: "none !important",
289
+ },
290
+ },
291
+ "&:focus-within": {
292
+ outline: "none !important",
293
+ boxShadow: "none !important",
294
+ "&::before": {
295
+ display: "none !important",
296
+ border: "none !important",
297
+ },
298
+ "&::after": {
299
+ display: "none !important",
300
+ border: "none !important",
301
+ },
302
+ },
303
+ "&.Mui-focused": {
304
+ outline: "none !important",
305
+ boxShadow: "none !important",
306
+ "&::before": {
307
+ display: "none !important",
308
+ border: "none !important",
309
+ },
310
+ "&::after": {
311
+ display: "none !important",
312
+ border: "none !important",
313
+ },
314
+ },
315
+ "& .MuiInputBase-input": {
316
+ padding: "8px 0",
317
+ border: "none !important",
318
+ outline: "none !important",
319
+ boxShadow: "none !important",
320
+ "&:focus": {
321
+ outline: "none !important",
322
+ boxShadow: "none !important",
323
+ border: "none !important",
324
+ },
325
+ "&::placeholder": {
326
+ color: "rgba(255, 255, 255, 0.3)",
327
+ opacity: 1,
328
+ },
329
+ },
330
+ "& fieldset": {
331
+ border: "none !important",
332
+ display: "none !important",
333
+ },
334
+ "& .MuiOutlinedInput-notchedOutline": {
335
+ border: "none !important",
336
+ display: "none !important",
337
+ },
267
338
  },
268
339
  }}
269
340
  >
341
+ {state.expanded && (
342
+ <SearchIcon
343
+ fontSize="small"
344
+ sx={{
345
+ position: "absolute",
346
+ left: "12px",
347
+ top: "50%",
348
+ transform: "translateY(-50%)",
349
+ color: "rgba(255, 255, 255, 0.6)",
350
+ zIndex: 1,
351
+ pointerEvents: "none",
352
+ }}
353
+ />
354
+ )}
270
355
  <QuickFilterControl placeholder={searchPlaceholder} />
271
356
  </Box>
272
357
  {state.expanded && state.value !== "" && (
273
358
  <QuickFilterClear
274
359
  render={
275
- <Box sx={{ borderRadius: "0 4px 4px 0" }}>
276
- <ToolbarButton aria-label="Clear">
277
- <ClearIcon fontSize="small" />
278
- </ToolbarButton>
360
+ <Box
361
+ sx={{
362
+ position: "absolute",
363
+ right: "8px",
364
+ top: "50%",
365
+ transform: "translateY(-50%)",
366
+ zIndex: 1,
367
+ }}
368
+ >
369
+ <Box
370
+ sx={{
371
+ minWidth: "24px",
372
+ width: "24px",
373
+ height: "24px",
374
+ padding: 0,
375
+ color: "rgba(255, 255, 255, 0.6)",
376
+ "&:hover": {
377
+ backgroundColor:
378
+ "rgba(255, 255, 255, 0.1)",
379
+ },
380
+ }}
381
+ >
382
+ <ToolbarButton aria-label="Clear">
383
+ <ClearIcon fontSize="small" />
384
+ </ToolbarButton>
385
+ </Box>
279
386
  </Box>
280
387
  }
281
388
  />
@@ -298,6 +405,33 @@ export const WandelbotsDataGrid = externalizeComponent(
298
405
  height: "100%",
299
406
  display: "flex",
300
407
  flexDirection: "column",
408
+ // Apply scrollbar styling like in the theme
409
+ "& *": {
410
+ scrollbarWidth: "none",
411
+ msOverflowStyle: "none",
412
+ "&::-webkit-scrollbar": {
413
+ display: "none",
414
+ },
415
+ },
416
+ "&:hover *": {
417
+ scrollbarWidth: "thin",
418
+ scrollbarColor: `${theme.palette.divider} transparent`,
419
+ "&::-webkit-scrollbar": {
420
+ display: "block",
421
+ width: "8px",
422
+ height: "8px",
423
+ },
424
+ "&::-webkit-scrollbar-track": {
425
+ background: "transparent",
426
+ },
427
+ "&::-webkit-scrollbar-thumb": {
428
+ background: theme.palette.divider,
429
+ borderRadius: "4px",
430
+ },
431
+ "&::-webkit-scrollbar-thumb:hover": {
432
+ background: theme.palette.action.hover,
433
+ },
434
+ },
301
435
  ...sx,
302
436
  }}
303
437
  >
@@ -371,7 +505,10 @@ export const WandelbotsDataGrid = externalizeComponent(
371
505
  border: "none",
372
506
  margin: "1px 0",
373
507
  position: "relative",
508
+ // Disable all default MUI hover effects
509
+ backgroundColor: "transparent !important",
374
510
  "&:hover": {
511
+ backgroundColor: "transparent !important",
375
512
  "&::before": {
376
513
  content: '""',
377
514
  position: "absolute",
@@ -386,11 +523,15 @@ export const WandelbotsDataGrid = externalizeComponent(
386
523
  },
387
524
  // Disable MUI's built-in selection styling completely
388
525
  "&.Mui-selected": {
389
- "&:hover": {},
526
+ backgroundColor: "transparent !important",
527
+ "&:hover": {
528
+ backgroundColor: "transparent !important",
529
+ },
390
530
  },
391
531
  // Highlight selected row with a distinct color using data attribute
392
532
  ...(selectedRowId !== null && {
393
533
  [`&[data-id="${selectedRowId}"]`]: {
534
+ backgroundColor: "transparent !important",
394
535
  "&::before": {
395
536
  content: '""',
396
537
  position: "absolute",
@@ -402,6 +543,9 @@ export const WandelbotsDataGrid = externalizeComponent(
402
543
  borderRadius: "16px",
403
544
  zIndex: 0,
404
545
  },
546
+ "&:hover": {
547
+ backgroundColor: "transparent !important",
548
+ },
405
549
  "&:hover::before": {
406
550
  backgroundColor: "rgba(255, 255, 255, 0.12) !important",
407
551
  },
@@ -421,6 +565,9 @@ export const WandelbotsDataGrid = externalizeComponent(
421
565
  "&:focus-within": {
422
566
  outline: "none",
423
567
  },
568
+ "&:hover": {
569
+ backgroundColor: "transparent !important",
570
+ },
424
571
  },
425
572
  "& .MuiDataGrid-columnHeader": {
426
573
  border: "none",
package/src/components/LogViewer.tsx CHANGED
@@ -328,6 +328,22 @@ export const LogViewer = externalizeComponent(
328
328
  display: "flex",
329
329
  flexDirection: "column",
330
330
  gap: "2px",
331
+ // Custom scrollbar styling to keep it consistently dark
332
+ scrollbarWidth: "thin",
333
+ scrollbarColor: `${theme.palette.divider} transparent`,
334
+ "&::-webkit-scrollbar": {
335
+ width: "6px",
336
+ },
337
+ "&::-webkit-scrollbar-track": {
338
+ background: "transparent",
339
+ },
340
+ "&::-webkit-scrollbar-thumb": {
341
+ backgroundColor: theme.palette.divider,
342
+ borderRadius: "3px",
343
+ "&:hover": {
344
+ backgroundColor: theme.palette.divider,
345
+ },
346
+ },
331
347
  }}
332
348
  >
333
349
  {messages.length === 0 ? (
package/src/components/ProgramControl.tsx CHANGED
@@ -9,6 +9,7 @@ export enum ProgramState {
9
9
  RUNNING = "running",
10
10
  PAUSED = "paused",
11
11
  STOPPING = "stopping",
12
+ ERROR = "error",
12
13
  }
13
14
 
14
15
  export interface ProgramControlProps {
@@ -51,7 +52,7 @@ interface ButtonConfig {
51
52
  * A control component for program execution with run, pause, and stop functionality.
52
53
  *
53
54
  * Features:
54
- * - State machine with idle, running, paused, and stopping states
55
+ * - State machine with idle, running, paused, stopping, and error states
55
56
  * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
56
57
  * - Optional manual reset functionality
57
58
  * - Responsive design with 110px circular buttons
@@ -76,11 +77,15 @@ export const ProgramControl = externalizeComponent(
76
77
  const baseConfigs: Record<string, ButtonConfig> = {
77
78
  run: {
78
79
  enabled:
79
- state === ProgramState.IDLE || state === ProgramState.PAUSED,
80
+ state === ProgramState.IDLE ||
81
+ state === ProgramState.PAUSED ||
82
+ state === ProgramState.ERROR,
80
83
  label:
81
84
  state === ProgramState.PAUSED
82
85
  ? t("ProgramControl.Resume.bt")
83
- : t("ProgramControl.Start.bt"),
86
+ : state === ProgramState.ERROR
87
+ ? t("ProgramControl.Retry.bt")
88
+ : t("ProgramControl.Start.bt"),
84
89
  color: theme.palette.success.main,
85
90
  onClick: onRun,
86
91
  },
package/src/components/ProgramStateIndicator.tsx CHANGED
@@ -92,6 +92,11 @@ export const ProgramStateIndicator = externalizeComponent(
92
92
  label: t("ProgramStateIndicator.Stopped.lb"),
93
93
  color: theme.palette.error.main,
94
94
  }
95
+ case ProgramState.ERROR:
96
+ return {
97
+ label: t("ProgramStateIndicator.Error.lb"),
98
+ color: theme.palette.error.main,
99
+ }
95
100
  case ProgramState.IDLE:
96
101
  default:
97
102
  return {