Added antd components Accordion. menu, modal, slider and Rating

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

@@ -33,15 +33,15 @@ const customTreeOptions: CustomPropsTreeOptions = {
     collapse: { type: "boolean" },
     bordered: { type: "boolean" },
     ghost: { type: "boolean" },
-    defaultActiveKey: { type: "array_number" },
+    defaultActiveKey: { type: "array" },
     expandIcon: { type: "static_asset" },
-
     items: {
       type: "array_map",
       singleObjectName: "item",
       attributes: [
         { fieldName: "title", type: "text" },
         { fieldName: "description", type: "text" },
+        { fieldName: "key", type: "text" },
         {
           fieldName: "collapsible",
           type: "enum",
@@ -71,6 +71,7 @@ const compManifest: ReactComponentManifestSchema = {
             {
               title: `One`,
               description: `Content of Accordion 1`,
+              key: "1",
               collapsible: "header",
               showArrow: true,
             },

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

@@ -11,23 +11,21 @@ export type ExpandIconPosition = "start" | "end";
 
 export type Size = "large" | "middle" | "small";
 
-export type AccordionItem = {
-  title: string;
-  description?: string;
-  key: string | number;
-  collapsible?: CollapsibleTypes;
-  showArrow?: boolean;
-};
-
 const Accordion = forwardRef<
   HTMLDivElement,
   {
     styles: React.CSSProperties;
     custom: {
-      items: AccordionItem[];
+      items: {
+        title: string;
+        description?: string;
+        collapsible?: CollapsibleTypes;
+        showArrow?: boolean;
+        key: string | number;
+      }[];
       bordered?: boolean;
       collapse?: boolean;
-      defaultActiveKey?: string[] | string | number[] | number;
+      defaultActiveKey: string[] | string | number[] | number;
       expandIcon?: string;
       expandIconPosition?: ExpandIconPosition;
       ghost?: boolean;
@@ -62,7 +60,7 @@ const Accordion = forwardRef<
         {props.custom?.items?.map((item, index) => (
           <Panel
             header={item.title}
-            key={index}
+            key={item.key}
             collapsible={item.collapsible}
             showArrow={item.showArrow}
           >

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

@@ -0,0 +1,10 @@
+import { forwardRef } from "react";
+import Menu from "./Menu";
+
+const DevMenu: typeof Menu = forwardRef((props, ref) => {
+  props.custom.items.forEach((item) => {
+    item.disabled = true;
+  });
+  return <Menu ref={ref} {...props} />;
+});
+export default DevMenu;

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

@@ -9,6 +9,7 @@ import CSSTreeId from "@atrilabs/app-design-forest/src/cssTree?id";
 import CustomTreeId from "@atrilabs/app-design-forest/src/customPropsTree?id";
 import { CSSTreeOptions } from "@atrilabs/app-design-forest";
 import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest";
+import Joi from "joi";
 
 const acceptsChild: AcceptsChildFunction = (info: any) => {
   if (info.childCoordinates.length === 0) {
@@ -33,13 +34,37 @@ const cssTreeOptions: CSSTreeOptions = {
 
 const customTreeOptions: CustomPropsTreeOptions = {
   dataTypes: {
-    open: { type: "boolean" },
-    src: { type: "static_asset" },
-    iconHeight: { type: "number" },
-    iconWidth: { type: "number" },
-    strokeColor: { type: "color" },
-    gap: { type: "number" },
-    alignRight: { type: "boolean" },
+    mode: {
+      type: "enum",
+      options: ["vertical", "horizontal", "inline"],
+    },
+    theme: {
+      type: "enum",
+      options: ["light", "dark"],
+    },
+    multiple: { type: "boolean" },
+    selectable: { type: "boolean" },
+    selectedKeys: { type: "array" },
+    defaultOpenKeys: { type: "array" },
+    defaultSelectedKeys: { type: "array" },
+    expandIcon: { type: "static_asset" },
+    openKeys: { type: "array" },
+    items: {
+      type: "json",
+      schema: Joi.array()
+        .unique()
+        .items(
+          Joi.object({
+            key: Joi.string(),
+            label: Joi.string().required(),
+            disabled: Joi.boolean(),
+            icon: Joi.string(),
+            type: Joi.string(),
+            children: Joi.link("#menuData"),
+          })
+        )
+        .id("menuData"),
+    },
   },
 };
 
@@ -57,16 +82,63 @@ const compManifest: ReactComponentManifestSchema = {
       custom: {
         treeId: CustomTreeId,
         initialValue: {
-          open: true,
-          iconHeight: 24,
-          iconWidth: 24,
+          items: [
+            {
+              label: "Navigation One",
+              key: "mail",
+              icon: "",
+            },
+            {
+              label: "Navigation Two",
+              key: "app",
+              icon: "",
+              disabled: true,
+            },
+            {
+              label: "Navigation Three - Submenu",
+              key: "SubMenu",
+              icon: "",
+              children: [
+                {
+                  type: "group",
+                  label: "Item 1",
+                  children: [
+                    {
+                      label: "Option 1",
+                      key: "setting:1",
+                    },
+                    {
+                      label: "Option 2",
+                      key: "setting:2",
+                    },
+                  ],
+                },
+                {
+                  type: "group",
+                  label: "Item 2",
+                  children: [
+                    {
+                      label: "Option 3",
+                      key: "setting:3",
+                    },
+                    {
+                      label: "Option 4",
+                      key: "setting:4",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
         },
         treeOptions: customTreeOptions,
         canvasOptions: { groupByBreakpoint: false },
       },
     },
     attachCallbacks: {
       onClick: [{ type: "controlled", selector: ["custom", "open"] }],
+      onOpenChange: [{ type: "controlled", selector: ["custom", "open"] }],
+      onSelect: [{ type: "controlled", selector: ["custom", "open"] }],
     },
     defaultCallbackHandlers: {},
     acceptsChild,

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

@@ -1,65 +1,75 @@
-import React, { forwardRef, useCallback } from "react";
-import { ReactComponent as MenuIcon } from "./menu.svg";
+import React, { forwardRef, useMemo } from "react";
+import type { MenuProps } from "antd";
+import { Menu as AntdMenu } from "antd";
+import { ItemType } from "antd/es/menu/hooks/useItems";
+
+interface Item {
+  key?: number;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  children?: ItemType[];
+  type?: string;
+}
 
 const Menu = forwardRef<
   HTMLDivElement,
   {
     styles: React.CSSProperties;
     children: React.ReactNode[];
     custom: {
-      open: boolean;
-      iconHeight: number;
-      iconWidth: number;
-      src?: string;
-      strokeColor?: string;
-      gap?: number;
-      alignRight?: boolean;
+      items: Item[];
+      mode: "vertical" | "horizontal" | "inline";
+      theme: "light" | "dark";
+      multiple?: boolean;
+      defaultOpenKeys?: string[];
+      defaultSelectedKeys?: string[];
+      expandIcon?: string;
+      openKeys?: string[];
+      selectable?: boolean;
+      selectedKeys: string[];
     };
-    onClick: (open: boolean) => void;
+    onClick: Function;
+    onOpenChange: Function;
+    onSelect: Function;
     className?: string;
-  }
+  } & MenuProps
 >((props, ref) => {
-  const onClick = useCallback(() => {
-    props.onClick(!props.custom.open);
-  }, [props]);
-  const gap = typeof props.custom.gap === "number" ? props.custom.gap : 0;
+  const { custom } = props;
+  const { items } = custom;
+
+  const menuItems = useMemo(() => {
+    return items.map((item: Item) => {
+      return {
+        ...item,
+        icon: <img src={item?.icon} alt={item?.icon} />,
+      } as ItemType;
+    });
+  }, [items]);
+
   return (
-    <div
-      ref={ref}
-      style={{ ...props.styles, position: "relative" }}
-      className={props.className}
-    >
-      <div
-        style={{
-          height: `${props.custom.iconHeight}px`,
-          width: `${props.custom.iconWidth}px`,
-        }}
-        onClick={onClick}
-      >
-        {props.custom.src ? (
-          <img src={props.custom.src} alt="menu icon" />
-        ) : (
-          <MenuIcon
-            style={{
-              stroke: props.custom.strokeColor
-                ? props.custom.strokeColor
-                : "black",
-            }}
-          />
-        )}
-      </div>
-      <div
-        style={{
-          display: props.custom.open ? "flex" : "none",
-          flexDirection: "column",
-          position: "absolute",
-          top: "100%",
-          right: props.custom.alignRight ? gap : "",
-          left: !props.custom.alignRight ? gap : "",
-        }}
-      >
-        {props.children}
-      </div>
+    <div ref={ref}>
+      <AntdMenu
+        style={props.styles}
+        className={props.className}
+        mode={props.custom.mode}
+        items={menuItems}
+        multiple={props.custom.multiple}
+        defaultOpenKeys={props.custom.defaultOpenKeys}
+        defaultSelectedKeys={props.custom.defaultSelectedKeys}
+        expandIcon={
+          props.custom.expandIcon && (
+            <img src={props.custom.expandIcon} alt={props.custom.expandIcon} />
+          )
+        }
+        openKeys={props.custom.openKeys}
+        selectable={props.custom.selectable}
+        selectedKeys={props.custom.selectedKeys}
+        onClick={props.onClick}
+        onOpenChange={props.onOpenChange}
+        onSelect={props.onSelect}
+        theme={props.custom.theme}
+      />
     </div>
   );
 });

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

@@ -0,0 +1,35 @@
+import Modal from "./Modal";
+import React, { useState } from "react";
+import { Button } from "antd";
+
+const DevModal: typeof Modal = React.forwardRef((props, ref) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div ref={ref}>
+      <Button type="primary" onClick={showModal}>
+        Open Modal
+      </Button>
+      <Modal
+        {...props}
+        custom={{ ...props.custom, open: isModalOpen }}
+        onCancel={handleCancel}
+        onOk={handleOk}
+      />
+    </div>
+  );
+});
+
+export default DevModal;