added more sample schema

apps/design-system/src/components/visualeditor.stories.tsx

@@ -1,83 +1,248 @@
+// visualeditor.stories.tsx
 import React, { useState } from 'react';
-import { VisualEditor, CodeEditor, Examples } from '@asyncapi/studio-ui';
+import { VisualEditor, CodeEditor} from '@asyncapi/studio-ui';
+import { Examples } from '@asyncapi/studio-ui';
 
-const meta = {
+export default {
+  title: 'SchemaEditor/VisualEditor',
   component: VisualEditor,
   parameters: {
     layout: 'fullscreen',
-    backgrounds: {
-      default: 'light'
-    }
   },
 };
 
-export default meta;
-
-const EditorToggle: React.FC<{ schema: string; onSchemaChange: (schema: string) => void }> = ({ schema, onSchemaChange }) => {
-  const [activeSystem, setActiveSystem] = useState('vis');
-
-  const handleSystemClick = (systemKey: string) => {
-    setActiveSystem(systemKey);
-  };  
+const Template = ({ initialSchema }) => {
+  const [schema, setSchema] = useState(initialSchema);
+  const [editorType, setEditorType] = useState('visual');
 
   return (
-    <div className="flex flex-col mx-auto p-4">
-      <div className="flex justify-between mb-4">
-        <button className={`p-2 rounded-md border border-gray-300 ${activeSystem === 'vis' ? 'bg-gray-200' : ''}`} onClick={() => handleSystemClick('vis')}>
-          Visual
-        </button>
-        <button className={`p-2 rounded-md border border-gray-300 ${activeSystem === 'code' ? 'bg-gray-200' : ''}`} onClick={() => handleSystemClick('code')}>
-          Code
-        </button>
-        <button className={`p-2 rounded-md border border-gray-300 ${activeSystem === 'ex' ? 'bg-gray-200' : ''}`} onClick={() => handleSystemClick('ex')}>
-          Examples
-        </button>
+    <div>
+      <div style={{ marginBottom: 10 }}>
+        <button onClick={() => setEditorType('visual')}>Visual Editor </button>
+        <button onClick={() => setEditorType('code')}>Code Editor </button>
+        <button onClick={() => setEditorType('examples')}>Examples </button>
+      </div>
+      <div>
+        {editorType === 'visual' && (
+          <VisualEditor schema={schema} onSchemaChange={setSchema} />
+        )}
+        {editorType === 'code' && (
+          <CodeEditor schema={schema} onSchemaChange={setSchema} />
+        )}
+        {editorType === 'examples' && (
+          <Examples schema={schema} onSchemaChange={setSchema} />
+        )}
       </div>
-      {activeSystem === 'vis' && <VisualEditor schema={schema} onSchemaChange={onSchemaChange} />}
-      {activeSystem === 'code' && <CodeEditor schema={schema} onSchemaChange={onSchemaChange} />}
-      {activeSystem === 'ex' && <Examples />}
     </div>
   );
 };
 
-export const DefaultSchema = () => {
-  const [schema, setSchema] = useState('{}');
-
-  return <EditorToggle schema={schema} onSchemaChange={setSchema} />;
-};
+export const DefaultView = () => <Template initialSchema="{}" />;
 
-export const WithCustomSchema = () => {
-  const customSchema = JSON.stringify({
-    type: "object",
-    properties: {
-      firstName: {
-        type: "string"
-      },
-      lastName: {
-        type: "string"
-      },
-      age: {
-        type: "boolean"
-      },
-      height: {
-        type: ["integer", "null"]
-      },
-      friends: {
-        type: "array",
-        items: {
+export const WithSampleSchema = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      type: "object",
+      properties: {
+        firstName: { type: "string" },
+        lastName: { type: "string" },
+        age: { type: "integer" },
+        address: {
           type: "object",
           properties: {
-            firstName: {
-              type: "string"
+            street: { type: "string" },
+            city: { type: "string" }
+          },
+          required: ["street", "city"]
+        }
+      },
+      required: ["firstName", "lastName"]
+    }, null, 2)}
+  />
+);
+
+export const SingleProperty = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "string"
+  }, null, 2)}
+  />
+);
+
+export const WithObject = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "firstName": {
+          "type": "string"
+        },
+        "lastName": {
+          "type": "string"
+        },
+        "age": {
+          "type": "integer"
+        },
+        "address": {
+          "type": "object",
+          "properties": {
+            "street": {
+              "type": "string"
+            },
+            "city": {
+              "type": "string"
+            },
+            "new": {
+              "type": "string"
             }
+          },
+
+          "required": [
+            "street",
+            "city"
+          ]
+        }
+      },
+      "required": [
+        "firstName",
+        "lastName"
+      ]
+    }, null, 2)}
+  />
+);
+
+
+
+
+
+export const WithArray_obj_and_obj = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "books": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string"
+              },
+              "author": {
+                "type": "string"
+              }
+            },
+
+            "required": [ "title"]
+          }
+        },
+        "list": {
+              "type": "object",
+              "properties": {
+                  "hii": {
+                    "type": "string"
+                  }
+              }
+          }
+      }
+    }, null, 2)}
+  />
+);
+
+
+
+export const Array_of_string = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "numbers": {
+          "type": "array",
+          "items": {
+            "type": "number"
           }
+        },
+        "aString": {
+          "type": "string"
+        },
+        "aNumber": {
+          "type": "number"
         }
+      },
+      "required": ["numbers", "aString", "aNumber"]
+    }, null, 2)}
+  />
+);
+
+export const Root_Array_of_Object = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "integer"
+          },
+          "name": {
+            "type": "string"
+          },
+          "isActive": {
+            "type": "boolean"
+          }
+        },
+        "required": ["id", "name"]
       }
-    },
-    required: ["firstName", "lastName"]
-  }, null, 2);
+    }, null, 2)}
+  />
+);
 
-  const [schema, setSchema] = useState(customSchema);
+export const property_having_more_than_one_datatype = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "mixedTypeProperty": {
+          "type": ["boolean", "integer"]
+        }
+      },
+      "required": ["mixedTypeProperty"]
+    }, null, 2)}
+  />
+);
 
-  return <EditorToggle schema={schema} onSchemaChange={setSchema} />;
-};
+export const two_property_having_same_name = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "name": { "type": "string" },
+        "child1": {
+          "type": "object",
+          "properties": {
+            "name": { "type": "string" },
+            "grandchild1": {
+              "type": "object",
+              "properties": {
+                "name": { "type": "string" }
+              }
+            }
+          }
+        },
+        "child2": {
+          "type": "object",
+          "properties": {
+            "name": { "type": "string" },
+            "grandchild2": {
+              "type": "object",
+              "properties": {
+                "name": { "type": "string" }
+              }
+            }
+          }
+        }
+      }
+    }
+    , null, 2)}
+  />
+);