8 Stable Components

Author: sean-mobeus

src/components/FormSections/SceneConfigurationSection.tsx

@@ -1,4 +1,5 @@
 // SceneConfigurationSection.tsx
+
 import React, { useMemo } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import {
@@ -8,6 +9,8 @@ import {
 import { Alert, AlertDescription } from '../ui/alert';
 import { Scene, ValidationError } from '../../types';
 
+// The schema for Scenes remains the same.
+// It defines Scenes as an array of scene objects, each with a Layouts array.
 const sceneConfigSchema = {
   type: 'object',
   properties: {
@@ -18,15 +21,8 @@ const sceneConfigSchema = {
         type: 'object',
         required: ['Id', 'ProjectorMode', 'Layouts'],
         properties: {
-          Id: {
-            type: 'string',
-            title: 'Scene ID',
-            description: 'Unique identifier for this scene',
-          },
-          Variant: {
-            type: 'string',
-            title: 'Scene Variant',
-          },
+          Id: { type: 'string', title: 'Scene ID' },
+          Variant: { type: 'string', title: 'Scene Variant' },
           ProjectorMode: {
             type: 'string',
             title: 'Projector Mode',
@@ -147,6 +143,7 @@ const sceneConfigSchema = {
   required: ['Scenes'],
 };
 
+// UI schema
 const sceneConfigUiSchema = {
   type: 'VerticalLayout',
   elements: [
@@ -157,7 +154,6 @@ const sceneConfigUiSchema = {
         detail: {
           type: 'VerticalLayout',
           elements: [
-            // Scene Basic Info
             {
               type: 'Group',
               label: 'Basic Scene Information',
@@ -167,11 +163,11 @@ const sceneConfigUiSchema = {
                   elements: [
                     {
                       type: 'Control',
-                      scope: '#/properties/Id',
+                      scope: '#/properties/Id', // Changed from #/items/properties/Id
                     },
                     {
                       type: 'Control',
-                      scope: '#/properties/ProjectorMode',
+                      scope: '#/properties/ProjectorMode', // Changed from #/items/properties/ProjectorMode
                     },
                   ],
                 },
@@ -190,7 +186,6 @@ const sceneConfigUiSchema = {
                 },
               ],
             },
-            // Scene Features
             {
               type: 'Group',
               label: 'Scene Features',
@@ -231,7 +226,6 @@ const sceneConfigUiSchema = {
                 },
               ],
             },
-            // Layouts
             {
               type: 'Control',
               scope: '#/properties/Layouts',
@@ -279,20 +273,22 @@ const sceneConfigUiSchema = {
 
 interface SceneConfigurationSectionProps {
   data: Scene[];
-  onChange: (event: { data: Scene[]; errors?: ValidationError[] }) => void;
+  onChange: (event: {
+    data: Scene[]; // Changed from { Scenes: Scene[] }
+    errors?: ValidationError[];
+  }) => void;
 }
 
 export const SceneConfigurationSection: React.FC<
   SceneConfigurationSectionProps
 > = ({ data, onChange }) => {
-  // Validation helper for unique IDs
+  // Validate unique IDs, root scene, layouts, etc.
   const validateUniqueIds = (scenes: Scene[]): ValidationError[] => {
     const errors: ValidationError[] = [];
     const sceneIds = new Set<string>();
     const layoutIds = new Set<string>();
 
     scenes.forEach((scene, sceneIndex) => {
-      // Check scene ID uniqueness
       if (scene.Id) {
         if (sceneIds.has(scene.Id)) {
           errors.push({
@@ -303,7 +299,6 @@ export const SceneConfigurationSection: React.FC<
         sceneIds.add(scene.Id);
       }
 
-      // Check layout ID uniqueness within scene
       scene.Layouts?.forEach((layout, layoutIndex) => {
         if (layout.Id) {
           if (layoutIds.has(layout.Id)) {
@@ -320,15 +315,12 @@ export const SceneConfigurationSection: React.FC<
     return errors;
   };
 
-  // Custom validation
-  const validate = (scenes: Scene[]): ValidationError[] => {
+  const validateScenes = (scenes: Scene[]): ValidationError[] => {
     const errors: ValidationError[] = [];
-
-    // Add unique ID validation
     errors.push(...validateUniqueIds(scenes));
 
-    // Check for root scene
-    const rootScenes = scenes.filter(scene => scene.IsRoot);
+    // Exactly one root scene required
+    const rootScenes = scenes.filter(s => s.IsRoot);
     if (rootScenes.length === 0) {
       errors.push({
         path: 'Scenes',
@@ -341,9 +333,8 @@ export const SceneConfigurationSection: React.FC<
       });
     }
 
-    // Validate each scene
+    // Each scene must have at least one layout
     scenes.forEach((scene, index) => {
-      // Validate required layouts
       if (!scene.Layouts || scene.Layouts.length === 0) {
         errors.push({
           path: `Scenes[${index}].Layouts`,
@@ -366,24 +357,16 @@ export const SceneConfigurationSection: React.FC<
     return errors;
   };
 
-  const handleChange = (event: {
-    data: { Scenes: Scene[] };
-    errors: any[];
-  }) => {
-    const customErrors = validate(event.data.Scenes);
-
+  const handleChange = (event: { data: any; errors: any[] }) => {
+    const customErrors = validateScenes(event.data.Scenes);
     onChange({
       data: event.data.Scenes,
       errors: [...(event.errors || []), ...customErrors],
     });
   };
 
-  const formData = useMemo(
-    () => ({
-      Scenes: data || [],
-    }),
-    [data],
-  );
+  // Provide the formData as { Scenes: [...] } since schema expects Scenes to be a property of an object
+  const formData = useMemo(() => ({ Scenes: data || [] }), [data]);
 
   return (
     <div className="space-y-6">
@@ -392,7 +375,6 @@ export const SceneConfigurationSection: React.FC<
           Scene Configuration
         </h2>
 
-        {/* Quick summary */}
         <Alert className="mb-4">
           <AlertDescription>
             {`Current configuration: ${data.length} scene${data.length !== 1 ? 's' : ''}`}
@@ -401,6 +383,10 @@ export const SceneConfigurationSection: React.FC<
           </AlertDescription>
         </Alert>
 
+        {/* 
+          By using the updated scopes (#/items/properties/...) in the uischema,
+          JsonForms knows how to render the Scenes array and its items properly.
+        */}
         <JsonForms
           schema={sceneConfigSchema}
           uischema={sceneConfigUiSchema}
@@ -411,7 +397,6 @@ export const SceneConfigurationSection: React.FC<
         />
       </div>
 
-      {/* Help Section */}
       <div className="bg-white rounded-lg shadow p-6">
         <h3 className="font-medium text-gray-900 mb-2">
           Configuration Guidelines
@@ -424,7 +409,7 @@ export const SceneConfigurationSection: React.FC<
           <li>Background transparency must be between 0 and 1</li>
           <li>
             ProjectorMode determines how content is displayed:
-            <ul className="ml-6 mt-1">
+            <ul className="ml-6 mt-1 list-disc">
               <li>Meet: Standard meeting view</li>
               <li>Split: Divided screen layout</li>
               <li>Focus: Emphasized content view</li>

src/components/JsonFormsDemo.tsx

@@ -127,9 +127,14 @@ function JsonFormsDemo({
         return (
           <SceneConfigurationSection
             data={data.Scenes || []}
-            onChange={event =>
-              handleSectionChange({ Scenes: event.data }, event.errors)
-            }
+            onChange={event => {
+              handleSectionChange(
+                {
+                  Scenes: event.data, // event.data is already Scene[]
+                },
+                event.errors,
+              );
+            }}
           />
         );