Added Antd Drawer component and refactored some components

packages/react-component-manifests/src/manifests/Accordion/Accordion.manifest.ts

@@ -67,6 +67,7 @@ const compManifest: ReactComponentManifestSchema = {
       custom: {
         treeId: CustomTreeId,
         initialValue: {
+          bordered : true,
           items: [
             {
               title: `One`,

packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx

@@ -60,7 +60,11 @@ const Accordion = forwardRef<
         {props.custom?.items?.map((item, index) => (
           <Panel
             header={item.title}
-            key={item.key}
+            key={
+              item.key !== (undefined || "")
+                ? item.key
+                : Math.floor(Math.random() * 1000 + 1)
+            }
             collapsible={item.collapsible}
             showArrow={item.showArrow}
           >

packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.manifest.ts

@@ -5,6 +5,7 @@ import CSSTreeId from "@atrilabs/app-design-forest/src/cssTree?id";
 import { CSSTreeOptions } from "@atrilabs/app-design-forest/src/cssTree";
 import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest/src/customPropsTree";
 import CustomTreeId from "@atrilabs/app-design-forest/src/customPropsTree?id";
+import Joi from "joi";
 
 const cssTreeOptions: CSSTreeOptions = {
   boxShadowOptions: true,
@@ -24,25 +25,20 @@ const customTreeOptions: CustomPropsTreeOptions = {
     separator: {
       type: "text",
     },
-
     items: {
-      type: "array_map",
-      singleObjectName: "item",
-      attributes: [
-        {
-          fieldName: "title",
-          type: "text",
-        },
-        {
-          fieldName: "href",
-          type: "text",
-        },
-        {
-          fieldName: "icon",
-          type: "static_asset",
-        },
-
-      ],
+      type: "json",
+      schema: Joi.array()
+        .unique()
+        .items(
+          Joi.object({
+            title: Joi.string().required(),
+            href: Joi.string().optional(),
+            menu: Joi.object({
+              items: Joi.link("#breadcrumbData").optional()
+            }),
+          })  
+        )
+        .id("breadcrumbData"),
     },
   },
 };
@@ -65,19 +61,20 @@ const compManifest: ReactComponentManifestSchema = {
           items: [
             {
               title: "Home",
-              href: "",
+              href: "/index",
             },
             {
               title: "Application Center",
-              href: "",
+              href: "home",
             },
             {
               title: "Application List",
-              href: "",
+              href: "a",
             },
             {
-              title: "An Application",
-              href: "",
+              title: "Menu",
+              href: "a",
+              menu: { items:  [{title: 'Sub-Menu'}], },
             },
           ],
         },

packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.tsx

@@ -1,42 +1,55 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useMemo } from "react";
 import { Breadcrumb as AntdBreadcrumb } from "antd";
 
+interface item {
+  title: string;
+  href?: string;
+  icon: string;
+  menu?: {
+    items: item[];
+  };
+}
+
 const Breadcrumb = forwardRef<
   HTMLDivElement,
   {
     styles: React.CSSProperties;
     custom: {
       separator?: string;
-      items: {
-        title?: string;
-        href?: string;
-        icon: string;
-      }[];
+      items: item[];
     };
     className?: string;
     onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   }
 >((props, ref) => {
+  const breadcrumbItems = useMemo(() => {
+    return props.custom.items.map((item) => {
+      if (item.menu) {
+        return {
+          title: <a href={item.title}>{item.title}</a>,
+          menu: {
+            items: item.menu.items.map((subItem: item) => ({
+              title: subItem.title,
+            })),
+          },
+        };
+      }
+      if (item.href) {
+        return {
+          title: <a href={item.href}> {item.title}</a>,
+        };
+      }
+      return item;
+    });
+  }, [props.custom.items]);
   return (
     <div ref={ref}>
       <AntdBreadcrumb
         className={props.className}
         style={props.styles}
         separator={props.custom.separator}
-      >
-        {props.custom.items.map((item, index: number) => (
-          <AntdBreadcrumb.Item
-            key={index}
-            href={item.href}
-            onClick={props.onClick}
-          >
-            <div style={{ display: "flex", alignItems: "center" }}>
-              {item.icon ? <img src={item.icon} alt={item.icon} /> : undefined}
-              <span>{item.title}</span>
-            </div>
-          </AntdBreadcrumb.Item>
-        ))}
-      </AntdBreadcrumb>
+        items={breadcrumbItems}
+      />
     </div>
   );
 });

packages/react-component-manifests/src/manifests/Card/Card.manifest.ts

@@ -32,6 +32,7 @@ const customTreeOptions: CustomPropsTreeOptions = {
       type: "enum",
       options: ["default", "small"],
     },
+    loading: { type: "boolean" },
     hoverable: { type: "boolean" },
     bordered: { type: "boolean" },
     cover: { type: "static_asset" },

packages/react-component-manifests/src/manifests/Card/Card.tsx

@@ -19,6 +19,7 @@ const Card = forwardRef<
       avatar: string;
       description: ReactNode;
       size?: Size;
+      loading?: boolean;
     };
     className?: string;
     onTabChange?: (key: string) => void;
@@ -34,6 +35,7 @@ const Card = forwardRef<
       size={props.custom.size}
       cover={<img src={props.custom.cover} alt={props.custom.cover} />}
       onTabChange={props.onTabChange}
+      loading={props.custom.loading}
     >
       {props.custom.type === "card" && <p> {props.custom.description}</p>}
       {props.custom.type === "meta" && (

packages/react-component-manifests/src/manifests/Carousel/Carousel.manifest.ts

@@ -26,7 +26,7 @@ const customTreeOptions: CustomPropsTreeOptions = {
     dots: { type: "boolean" },
     dotPosition: {
       type: "enum",
-      options: ["Bottom", "top", "left", "right"],
+      options: ["bottom", "top", "left", "right"],
     },
     effect: {
       type: "enum",

packages/react-component-manifests/src/manifests/Checkbox/Checkbox.dev.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from "react";
+import Checkbox from "./Checkbox";
+
+const DevCheckbox: typeof Checkbox = forwardRef((props, ref) => {
+  props.custom.disabled = true;
+  return <Checkbox ref={ref} {...props} />;
+});
+export default DevCheckbox;

packages/react-component-manifests/src/manifests/Checkbox/Checkbox.manifest.ts

@@ -22,8 +22,28 @@ const cssTreeOptions: CSSTreeOptions = {
 
 const customTreeOptions: CustomPropsTreeOptions = {
   dataTypes: {
-    checked: { type: "boolean" },
-    text:{type:"text"}
+    defaultValue: { type: "array" },
+    disabled: { type: "boolean" },
+    name: { type: "text" },
+    value: { type: "array" },
+    options: {
+      type: "array_map",
+      singleObjectName: "item",
+      attributes: [
+        {
+          fieldName: "label",
+          type: "text",
+        },
+        {
+          fieldName: "value",
+          type: "text",
+        },
+        {
+          fieldName: "disabled",
+          type: "boolean",
+        },
+      ],
+    },
   },
 };
 
@@ -41,8 +61,11 @@ const compManifest: ReactComponentManifestSchema = {
       custom: {
         treeId: CustomTreeId,
         initialValue: {
-          checked: false,
-          text:"Checkbox"
+          options: [
+            { value: "one", label: "One" },
+            { value: "two", label: "Two" },
+            { value: "three", label: "Three" },
+          ],
         },
         treeOptions: customTreeOptions,
         canvasOptions: { groupByBreakpoint: false },

packages/react-component-manifests/src/manifests/Checkbox/Checkbox.tsx

@@ -1,27 +1,38 @@
 import React, { forwardRef } from "react";
 import { Checkbox as AntdCheckbox } from "antd";
-import { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { CheckboxValueType } from "antd/es/checkbox/Group";
+
+interface Option {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
 
 const Checkbox = forwardRef<
   HTMLInputElement,
   {
     styles: React.CSSProperties;
-    custom: { checked: boolean; text: string[] };
-    onChange: (event: CheckboxChangeEvent) => void
+    custom: {
+      defaultValue: (string | number)[];
+      disabled?: boolean;
+      options: Option[];
+      name?: string;
+      value?: (string | number | boolean)[];
+    };
+    onChange?: (checkedValue: Array<CheckboxValueType>) => void;
     className?: string;
   }
 >((props, ref) => {
+  const { custom } = props;
   // moved ref to div, as the Antd Checkbox doesnt provide ref for Checkbox
   return (
-    <div ref={ref} style={{ display: "inline-block" }}>
-      <AntdCheckbox
+    <div ref={ref}>
+      <AntdCheckbox.Group
         className={props.className}
         style={props.styles}
-        checked={props.custom.checked}
+        {...custom}
         onChange={props.onChange}
-      >
-        {props.custom.text}
-      </AntdCheckbox>
+      />
     </div>
   );
 });

packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.manifest.ts

@@ -29,12 +29,14 @@ const customTreeOptions: CustomPropsTreeOptions = {
         "html",
         "java",
         "javascript",
-        "php",
         "json",
-        "rust",
+        "jsx",
+        "php",
         "python",
-        "xml",
+        "rust",
         "sql",
+        "typescript",
+        "xml",
       ],
     },
     value: { type: "large_text" },