backup

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

@@ -33,7 +33,7 @@ const customTreeOptions: CustomPropsTreeOptions = {
     collapse: { type: "boolean" },
     bordered: { type: "boolean" },
     ghost: { type: "boolean" },
-    defaultActiveKey: { type: "number" },
+    defaultActiveKey: { type: "text" },
     expandIcon: { type: "static_asset" },
 
     items: {
@@ -42,6 +42,7 @@ const customTreeOptions: CustomPropsTreeOptions = {
       attributes: [
         { fieldName: "title", type: "text" },
         { fieldName: "description", type: "text" },
+        { fieldName: "key", type: "text" },
         {
           fieldName: "collapsible",
           type: "enum",
@@ -71,10 +72,12 @@ const compManifest: ReactComponentManifestSchema = {
             {
               title: `One`,
               description: `Content of Accordion 1`,
+              key: "1",
               collapsible: "header",
               showArrow: true,
             },
           ],
+          defaultActiveKey : "1",
         },
         treeOptions: customTreeOptions,
         canvasOptions: { groupByBreakpoint: false },

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode } from "react";
+import React, { forwardRef } from "react";
 import { Collapse } from "antd";
 const { Panel } = Collapse;
 
@@ -17,6 +17,7 @@ const Accordion = forwardRef<
         description?: string;
         collapsible?: CollapsibleTypes;
         showArrow?: boolean;
+        key?: string | number;
       }[];
       bordered?: boolean;
       collapse?: boolean;
@@ -44,7 +45,7 @@ const Accordion = forwardRef<
         className={props.className}
         size={props.custom?.size}
         bordered={props.custom.bordered}
-        defaultActiveKey={props.custom.defaultActiveKey}
+        defaultActiveKey={[props.custom.defaultActiveKey]}
         expandIcon={
           props.custom.expandIcon !== undefined
             ? customExpandIcon

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

@@ -0,0 +1,119 @@
+import { CSSTreeOptions } from "@atrilabs/app-design-forest/src/cssTree";
+import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest/src/customPropsTree";
+import { ReactComponentManifestSchema,AcceptsChildFunction } from "@atrilabs/react-component-manifest-schema";
+import CSSTreeId from "@atrilabs/app-design-forest/src/cssTree?id";
+import CustomTreeId from "@atrilabs/app-design-forest/src/customPropsTree?id";
+import reactSchemaId from "@atrilabs/react-component-manifest-schema?id";
+import iconSchemaId from "@atrilabs/component-icon-manifest-schema?id";
+import {
+  flexRowSort,
+  flexColSort,
+} from "@atrilabs/react-component-manifest-schema";
+
+const cssTreeOptions: CSSTreeOptions = {
+  boxShadowOptions: true,
+  flexContainerOptions: false,
+  flexChildOptions: true,
+  positionOptions: true,
+  typographyOptions: true,
+  spacingOptions: true,
+  sizeOptions: true,
+  borderOptions: true,
+  outlineOptions: true,
+  backgroundOptions: true,
+  miscellaneousOptions: true,
+};
+
+const acceptsChild: AcceptsChildFunction = (info: any) => {
+  if (info.childCoordinates.length === 0) {
+    return 0;
+  }
+  const display: "block" | "inline-block" | "table" =
+    info.props.styles["display"] || "block";
+  let index = 0;
+  // TODO: the logic is incorrect.
+  switch (display) {
+    case "inline-block":
+      index = flexRowSort(info.loc, info.childCoordinates) || 0;
+      break;
+    case "block" || "block":
+      index = flexColSort(info.loc, info.childCoordinates) || 0;
+      break;
+    default:
+      index = flexColSort(info.loc, info.childCoordinates) || 0;
+  }
+  return index;
+};
+
+const customTreeOptions: CustomPropsTreeOptions = {
+  dataTypes: {
+    title: { type: "text" },
+    count: { type: "text" },
+    countIcon: { type: "static_asset" },
+    color: { type: "color" },
+    text: { type: "text" },
+    size: { type: "enum", options: ["default", "small"] },
+    showZero: { type: "boolean" },
+    overflowCount: { type: "number" },
+    dot: { type: "boolean" },
+    status: {
+      type: "enum",
+      options: ["success", "processing", "default", "error", "warning"],
+    },
+    ribbon: { type: "boolean" },
+    ribbonText: { type: "text" },
+    ribbonPlacement: { type: "enum", options: ["start", "end"] },
+    ribbonColor: { type: "color" },
+  },
+};
+
+const compManifest: ReactComponentManifestSchema = {
+  meta: { key: "Badge", category: "Basics" },
+  dev: {
+    decorators: [],
+    attachProps: {
+      styles: {
+        treeId: CSSTreeId,
+        initialValue: {},
+        treeOptions: cssTreeOptions,
+        canvasOptions: { groupByBreakpoint: true },
+      },
+      custom: {
+        treeId: CustomTreeId,
+        initialValue: {
+          dot: false,
+          overflowCount: 99,
+          showZero: false,
+          ribbon: false,
+          ribbonPlacement:"end",
+        },
+        treeOptions: customTreeOptions,
+        canvasOptions: { groupByBreakpoint: false },
+      },
+    },
+    attachCallbacks: {
+      onClick: [{ type: "controlled", selector: ["custom", "open"] }],
+    },
+    defaultCallbackHandlers: {},
+    acceptsChild,
+  },
+};
+
+const iconManifest = {
+  panel: { comp: "CommonIcon", props: { name: "Badge" } },
+  drag: {
+    comp: "CommonIcon",
+    props: {
+      name: "Badge",
+      containerStyle: { padding: "1rem" },
+    },
+  },
+  renderSchema: compManifest,
+};
+
+export default {
+  manifests: {
+    [reactSchemaId]: compManifest,
+    [iconSchemaId]: iconManifest,
+  },
+};

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

@@ -0,0 +1,70 @@
+import React, { forwardRef } from "react";
+import { Badge as AntdBadge } from "antd";
+
+
+const Badge = forwardRef<
+  HTMLDivElement,
+  {
+    styles: React.CSSProperties;
+    className?: string;
+    children: React.ReactNode[];
+    custom?: {
+      count?: number;
+      countIcon?: string;
+      showZero?: boolean;
+      overflowCount?: number;
+      dot?: boolean;
+      status?: "success" | "processing" | "default" | "error" | "warning";
+      color?: string;
+      text?: string;
+      size?: "default" | "small";
+      title?: string;
+      ribbon?: boolean;
+      ribbonText?: string;
+      ribbonPlacement?: "start" | "end";
+      ribbonColor?: string;
+    };
+    onClick: (event: { pageX: number; pageY: number }) => void;
+  }
+>((props, ref) => {
+  const { custom, ...restProps } = props;
+
+  // moved ref to div, as the Antd Badge doesnt provide ref for Badge
+  return (
+    <div ref={ref}>
+      {props.custom?.ribbon === true ? (
+        <AntdBadge.Ribbon
+          className={props.className}
+          style={props.styles}
+          text={props.custom.ribbonText}
+          placement={props.custom.ribbonPlacement}
+          color={props.custom.ribbonColor}
+          //prefixCls="ghjfghjdfhdhfgdfghdfjg"
+        >
+          {props.children}
+        </AntdBadge.Ribbon>
+      ) : (
+        <AntdBadge
+          className={props.className}
+          style={props.styles}
+          {...custom}
+          count={
+            props.custom?.countIcon !== undefined ? (
+              <img
+                src={props.custom?.countIcon}
+                alt={props.custom?.countIcon}
+              />
+            ) : (
+              props.custom?.count
+            )
+          }
+          status={props.custom?.status}
+        >
+          {props.children}
+        </AntdBadge>
+      )}
+    </div>
+  );
+});
+
+export default Badge;

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

@@ -22,8 +22,13 @@ const cssTreeOptions: CSSTreeOptions = {
 
 const customTreeOptions: CustomPropsTreeOptions = {
   dataTypes: {
-    total: { type: "number" },
-    rating: { type: "number" },
+    allowHalf: { type: "boolean" },
+    defaultValue: { type: "number" },
+    disabled: { type: "boolean" },
+    allowClear: { type: "boolean" },
+    character: { type: "text" },
+    toolTipInfo: { type: "array" },
+    count: { type: "number" },
   },
 };
 const compManifest: ReactComponentManifestSchema = {
@@ -40,10 +45,8 @@ const compManifest: ReactComponentManifestSchema = {
       custom: {
         treeId: CustomTreeId,
         initialValue: {
-          total: 5,
-          rating: 3.5,
-          unratedColor: "#C4C4C4",
-          ratedColor: "#E5CF00",
+          defaultValue: 4,
+          count: 5,
         },
         treeOptions: customTreeOptions,
         canvasOptions: { groupByBreakpoint: false },

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

@@ -1,22 +1,39 @@
-import React, { forwardRef } from "react";
-import { RatingContainer } from "./RatingContainer";
-
+import React, { forwardRef, ReactNode, useState } from "react";
+import { Rate } from "antd";
+import Test from "./Test";
 const Rating = forwardRef<
   HTMLDivElement,
   {
     styles: React.CSSProperties;
     custom: {
-      total: number;
-      rating: number;
-      unratedColor: string;
-      ratedColor: string;
+      allowHalf?: boolean;
+      defaultValue?: number;
+      disabled?: boolean;
+      allowClear?: boolean;
+      character?: ReactNode;
+      toolTipInfo?: string[];
+      count?: number;
     };
     className?: string;
   }
 >((props, ref) => {
+  const { custom, ...restProps } = props;
+  const [value, setValue] = useState(props.custom.defaultValue);
   return (
-    <div ref={ref} className={props.className} style={props.styles}>
-      <RatingContainer {...props.custom} />
+    <div ref={ref}>
+      <Rate
+        className={props.className}
+        style={props.styles}
+        {...custom}
+        //character={<Test />}
+        character={props.custom.character}
+        tooltips={props.custom.toolTipInfo}
+        onChange={setValue}
+        value={value}
+      />
+      {props.custom?.toolTipInfo && value
+        ? props.custom?.toolTipInfo[value - 1]
+        : ""}
     </div>
   );
 });

packages/react-component-manifests/src/manifests/Rating/Test.tsx

@@ -0,0 +1,8 @@
+export default function Test () {
+  return (
+<svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-heart" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path fill="currentColor" d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
+</svg>
+  );
+}