Changes forNew Antd Components and Refactor Ones (#727)

* changes for the new and antd components refactor * Added CountDown and Statistics antd component * fix: removed comments and linting * fix: removed console and linting issues
Atri-Labs · Mar 16, 2023 · 11405fe · 11405fe
1 parent e93cec5
commit 11405fe
Show file tree

Hide file tree

Showing 52 changed files with 2,747 additions and 5,856 deletions.
diff --git a/packages/app-design-forest/src/cssTree.ts b/packages/app-design-forest/src/cssTree.ts
@@ -16,6 +16,8 @@ export type CSSTreeOptions = {
   gridDisplayOptions?: boolean;
   // display values like inline, inline-block, content etc.
   css2DisplayOptions?: boolean;
+  //listStyle
+  listStyleOptions?:boolean;
 };
 
 export default function () {

diff --git a/packages/component-style-layer/src/TabBody.tsx b/packages/component-style-layer/src/TabBody.tsx
@@ -24,6 +24,7 @@ import { getAliasList } from "./utils";
 import { CssSummary } from "./components/cssSummary/CssSummary";
 import { Tree } from "@atrilabs/forest";
 import { BoxShadow } from "./components/box-shadow/BoxShadow";
+import { ListStyle } from "./components/list-style/ListStyle";
 
 export type TabBodyProps = {
   alias: string;
@@ -197,6 +198,19 @@ export const TabBody: React.FC<TabBodyProps> = (props) => {
           colorValueArraySetter={props.colorValueArraySetter}
         />
       ) : null}
+      {props.treeOptions && props.treeOptions.listStyleOptions ? (
+        <ListStyle
+          styles={props.styles}
+          patchCb={props.patchCb}
+          openAssetManager={props.openAssetManager}
+          openPalette={props.openPalette}
+          openPaletteWithoutEffect={props.openPaletteWithoutEffect}
+          compId={props.compId}
+          colorValue={props.colorValue}
+          setColorValue={props.setColorValue}
+          colorValueArraySetter={props.colorValueArraySetter}
+        />
+      ) : null}
       {props.treeOptions && props.treeOptions.boxShadowOptions ? (
         <BoxShadow
           styles={props.styles}

diff --git a/packages/component-style-layer/src/components/list-style/ListStyle.tsx b/packages/component-style-layer/src/components/list-style/ListStyle.tsx
@@ -0,0 +1,157 @@
+import {
+  gray200,
+  gray100,
+  gray800,
+  h5Heading,
+  smallText,
+} from "@atrilabs/design-system";
+import React, { useState } from "react";
+import { ReactComponent as DropDownArrow } from "../../assets/layout-parent/dropdown-icon.svg";
+import { CssProprtyComponentType } from "../../types";
+
+//import { StaticAsset } from "../../../../custom-props-layer/src/components/static-asset/StaticAsset";
+
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    paddingLeft: "0.5rem",
+    paddingRight: "0.5rem",
+    paddingTop: "1.2rem",
+    paddingBottom: "1.8rem",
+    borderBottom: `1px solid ${gray800}`,
+    rowGap: "1.2rem",
+  },
+  header: {
+    ...h5Heading,
+    color: gray200,
+    display: "flex",
+    paddingLeft: "0.5rem",
+    userSelect: "none",
+  },
+  drop: {
+    display: "flex",
+    alignItems: "baseline",
+    cursor: "pointer",
+  },
+  inputBox: {
+    ...smallText,
+    outline: "none",
+    color: gray100,
+    backgroundColor: gray800,
+    width: "77px",
+    height: "26px",
+    border: "none",
+    borderRadius: "2px",
+  },
+  select: {
+    textAlign: "left",
+  },
+  optionName: {
+    ...smallText,
+    width: "4rem",
+    color: "white",
+    height: "26px",
+    display: "flex",
+    alignItems: "center",
+  },
+};
+
+export const ListStyle: React.FC<CssProprtyComponentType> = (props) => {
+  const [showProperties, setShowProperties] = useState(true);
+  const handlelistStyleChange = (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLSelectElement>,
+    styleItem: keyof React.CSSProperties
+  ) => {
+    props.patchCb({
+      property: {
+        styles: {
+          [styleItem]: e.target.value,
+        },
+      },
+    });
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.drop}>
+        <DropDownArrow
+          onClick={() => setShowProperties(!showProperties)}
+          style={
+            !showProperties
+              ? { transform: "rotate(-90deg)" }
+              : { transform: "rotate(0deg)" }
+          }
+        />
+        <div style={styles.header}>List Style</div>
+      </div>
+      <div
+        style={
+          showProperties
+            ? { display: "flex", rowGap: "1rem", flexDirection: "column" }
+            : { display: "none" }
+        }
+      >
+        <div style={{ display: "flex" }}>
+          <div style={styles.optionName}>Position</div>
+          <div>
+            <select
+              name="listStylePosition"
+              onChange={(e) => handlelistStyleChange(e, "listStylePosition")}
+              style={styles.inputBox}
+              value={props.styles.listStylePosition || undefined}
+            >
+              <option style={styles.select} value="outside">
+                outside
+              </option>
+              <option style={styles.select} value="inside">
+                inside
+              </option>
+            </select>
+          </div>
+        </div>
+        <div style={{ display: "flex" }}>
+          <div style={styles.optionName}>Type</div>
+          <div>
+            <select
+              name="listStyleType"
+              onChange={(e) => handlelistStyleChange(e, "listStyleType")}
+              style={styles.inputBox}
+              value={props.styles.listStyleType || undefined}
+            >
+              <option style={styles.select} value="disc">
+                disc
+              </option>
+              <option style={styles.select} value="circle">
+                circle
+              </option>
+              <option style={styles.select} value="square">
+                square
+              </option>
+              <option style={styles.select} value="decimal">
+                decimal
+              </option>
+              <option style={styles.select} value="decimal-leading-zero">
+                decimal-leading-zero
+              </option>
+              <option style={styles.select} value="lower-roman">
+                lower-roman
+              </option>
+              <option style={styles.select} value="upper-roman">
+                upper-roman
+              </option>
+              <option style={styles.select} value="lower-alpha">
+                lower-alpha
+              </option>
+              <option style={styles.select} value="upper-alpha">
+                upper-alpha
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/custom-props-layer/src/components/large-text/ControlledInput.tsx b/packages/custom-props-layer/src/components/large-text/ControlledInput.tsx
@@ -5,6 +5,19 @@ export type ControlledInputProps = {
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 };
 
+const styles: { [key: string]: React.CSSProperties } = {
+  inputBox: {
+    width: "100%",
+    resize: "vertical",
+    fontFamily: "Inter, sans-serif",
+    fontStyle: "normal",
+    fontWeight: "normal",
+    fontSize: "14px",
+    lineHeight: "16px",
+    marginTop: "5px",
+  },
+};
+
 const ControlledInput: React.FC<ControlledInputProps> = ({
   value,
   onChange,
@@ -32,6 +45,7 @@ const ControlledInput: React.FC<ControlledInputProps> = ({
       value={value}
       onChange={(e) => handleChange(e)}
       rows={5}
+      style={styles.inputBox}
     />
   );
 };

diff --git a/packages/react-component-manifests/src/manifests/Accordion/Accordion.dev.tsx b/packages/react-component-manifests/src/manifests/Accordion/Accordion.dev.tsx
@@ -0,0 +1,17 @@
+import { forwardRef, useMemo } from "react";
+import Accordion, { CollapsibleTypes } from "./Accordion";
+
+const DevAccordion: typeof Accordion = forwardRef((props, ref) => {
+  const items = useMemo(() => {
+    return props.custom?.items?.map((item) => {
+      return {
+        ...item,
+        collapsible: CollapsibleTypes.DISABLED,
+      };
+    });
+  }, [props.custom?.items]);
+
+  return <Accordion {...props} custom={{ ...props.custom, items }} ref={ref} />;
+});
+
+export default DevAccordion;
diff --git a/packages/react-component-manifests/src/manifests/Accordion/Accordion.manifest.ts b/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: "array_number" },
     expandIcon: { type: "static_asset" },
 
     items: {

diff --git a/packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx b/packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx
@@ -2,22 +2,29 @@ import React, { forwardRef, useCallback } from "react";
 import { Collapse } from "antd";
 const { Panel } = Collapse;
 
-export type CollapsibleTypes = "header" | "icon" | "disabled";
+export enum CollapsibleTypes {
+  HEADER = "header",
+  ICON = "icon",
+  DISABLED = "disabled",
+}
 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: {
-        title: string;
-        description?: string;
-        collapsible?: CollapsibleTypes;
-        showArrow?: boolean;
-      }[];
+      items: AccordionItem[];
       bordered?: boolean;
       collapse?: boolean;
       defaultActiveKey?: string[] | string | number[] | number;

diff --git a/packages/react-component-manifests/src/manifests/Alert/Alert.dev.tsx b/packages/react-component-manifests/src/manifests/Alert/Alert.dev.tsx
@@ -0,0 +1,9 @@
+import { forwardRef } from "react";
+import Alert from "./Alert";
+
+const DevAlert: typeof Alert = forwardRef((props, ref) => {
+  props.custom.isClosable = false;
+  return <Alert ref={ref} {...props} />;
+});
+
+export default DevAlert;
diff --git a/packages/react-component-manifests/src/manifests/Alert/Alert.manifest.ts b/packages/react-component-manifests/src/manifests/Alert/Alert.manifest.ts
@@ -32,12 +32,8 @@ const customTreeOptions: CustomPropsTreeOptions = {
     icon: { type: "static_asset" },
     isClosable: { type: "boolean" },
     closeText: { type: "text" },
-    closeIcon: {type: "static_asset"},
-    banner: { type: "boolean" },  
-    successIcon: { type: "static_asset" },
-    infoIcon: { type: "static_asset" },
-    warningIcon: { type: "static_asset" },
-    errorIcon: { type: "static_asset" },  
+    closeIcon: { type: "static_asset" },
+    banner: { type: "boolean" },
   },
 };
 
@@ -68,7 +64,7 @@ const compManifest: ReactComponentManifestSchema = {
           text: "Alert Title",
           description: "Alert Description",
           isClosable: true,
-          showIcon:true,
+          showIcon: true,
         },
         treeOptions: customTreeOptions,
         canvasOptions: { groupByBreakpoint: false },

diff --git a/packages/react-component-manifests/src/manifests/Alert/Alert.tsx b/packages/react-component-manifests/src/manifests/Alert/Alert.tsx
@@ -1,5 +1,4 @@
-import React, { forwardRef, useCallback, useMemo } from "react";
-import AlertStyles from "./AlertStyles";
+import React, { forwardRef, useCallback } from "react";
 import { Alert as AntdAlert } from "antd";
 
 const enum AlertType {
@@ -18,10 +17,6 @@ const Alert = forwardRef<
       text: string;
       description?: string;
       icon?: string;
-      successIcon?: string;
-      infoIcon?: string;
-      warningIcon?: string;
-      errorIcon?: string;
       isClosable: boolean;
       showIcon?: boolean;
       closeText?: string;
@@ -40,59 +35,13 @@ const Alert = forwardRef<
     [props]
   );
 
-  const alertStyle = useMemo(() => {
-    const alertType = AlertStyles[props.custom.alertType];
-    if (alertType === undefined)
-      return {
-        backgroundColor: AlertStyles["success"].backgroundColor,
-        border: `1px solid ${AlertStyles["success"].borderColor}`,
-        color: "#000000d9",
-      };
-    return {
-      backgroundColor: alertType.backgroundColor,
-      border: `1px solid ${alertType.borderColor}`,
-      color: "#000000d9",
-    };
-  }, [props.custom.alertType]);
-
   // moved ref to div, as the Alert select doesnt provide ref for Alert
   return (
     <>
-      <style>
-        {`#icon {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-          }
-
-          #icon-logo {
-            max-width: 1rem;
-          }
-
-          #information {
-            row-gap: 1rem;
-          }
-
-          #information {
-            font-size: 1rem;
-            font-weight: 700;
-          }
-
-          #description {
-            font-size: 0.8rem;
-            font-weight: 300;
-          }
-
-          #close-button {
-            border: none;
-            background-color: #00000000;
-          }
-        `}
-      </style>
       <div ref={ref}>
         <AntdAlert
           className={props.className}
-          style={{ ...alertStyle, ...props.styles }}
+          style={props.styles}
           {...restProps}
           onClick={onClick}
           type={props.custom.alertType || AlertType.SUCEESS}