From d0cd9db9e731ffcd83621e1587d4540466cb6b48 Mon Sep 17 00:00:00 2001
From: diptitiwari2917 <86102496+diptitiwari2917@users.noreply.github.com>
Date: Tue, 9 May 2023 18:31:32 +0530
Subject: [PATCH] Transform style with matrix, Fixed Carousel styles issue and
 Anchor tag class name (#782)

* WIP for transform style property

* working Changes

* WIP transform

* Added styles and fix to various styling catergory

* comments changes

* text-editor Type added

* matrix transform type

* Fixed Carousel and Anchor tag

* removed console and minor fix

* removed comments and rebase with upstream
---
 .../app-design-forest/src/customPropsTree.ts  |   2 +-
 .../src/components/number-list/NumberList.tsx |  28 ++-
 .../src/components/position/Position.tsx      |  33 ---
 .../components/position/TransformSelector.tsx | 207 +++++++-----------
 .../src/manifests/Anchor/Anchor.tsx           |   7 +-
 .../src/manifests/Carousel/Carousel.tsx       |   7 +-
 6 files changed, 115 insertions(+), 169 deletions(-)

diff --git a/packages/app-design-forest/src/customPropsTree.ts b/packages/app-design-forest/src/customPropsTree.ts
index c8650bd2..9fb99a67 100644
--- a/packages/app-design-forest/src/customPropsTree.ts
+++ b/packages/app-design-forest/src/customPropsTree.ts
@@ -2,7 +2,7 @@ import Joi from "joi";
 
 const JoiTypes = Joi.types();
 type JoiSchema<K = keyof typeof JoiTypes> = K extends keyof typeof JoiTypes
-  ? typeof JoiTypes[K]
+  ? (typeof JoiTypes)[K]
   : never;
 
 export type SimpleCustomProp = {
diff --git a/packages/component-style-layer/src/components/number-list/NumberList.tsx b/packages/component-style-layer/src/components/number-list/NumberList.tsx
index 3a9de239..aadb44eb 100644
--- a/packages/component-style-layer/src/components/number-list/NumberList.tsx
+++ b/packages/component-style-layer/src/components/number-list/NumberList.tsx
@@ -1,8 +1,9 @@
-import { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { ComponentProps } from "../../types";
 import { ReactComponent as MinusIcon } from "../../assets/minus.svg";
 import { ArrayLabel } from "../commons/ArrayLabel";
 import { ArrayPropertyContainer } from "../commons/ArrayPropertyContainer";
+import { gray100, gray800, smallText } from "@atrilabs/design-system";
 
 export const NumberList: React.FC<ComponentProps> = (props) => {
   const insertValueCb = useCallback(() => {
@@ -37,14 +38,35 @@ export const NumberList: React.FC<ComponentProps> = (props) => {
             return (
               <div
                 key={index}
-                style={{ display: "flex", justifyContent: "space-between" }}
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  paddingLeft: "1em",
+                  paddingRight: "1em",
+                  paddingTop: "5px",
+                }}
               >
                 <input
+                  style={{
+                    ...smallText,
+                    outline: "none",
+                    color: gray100,
+                    backgroundColor: gray800,
+                    height: "26px",
+                    width: "75%",
+                    border: "none",
+                    borderRadius: "2px 0 0 2px",
+                    paddingLeft: "6px",
+                    paddingRight: "6px",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                  type="number"
                   value={value}
                   onChange={(e) => {
                     editValueCb(index, e.target.value);
                   }}
-                  type="number"
                 />
                 <div
                   style={{ display: "flex", alignItems: "center" }}
diff --git a/packages/component-style-layer/src/components/position/Position.tsx b/packages/component-style-layer/src/components/position/Position.tsx
index ed2fc6bf..37f17586 100644
--- a/packages/component-style-layer/src/components/position/Position.tsx
+++ b/packages/component-style-layer/src/components/position/Position.tsx
@@ -455,7 +455,6 @@ const Position: React.FC<CssProprtyComponentType> = (props) => {
     [props]
   );
 
-  //////////
   const closeTransform = useCallback(() => {
     setTransform(undefined);
   }, []);
@@ -506,7 +505,6 @@ const Position: React.FC<CssProprtyComponentType> = (props) => {
     [applyTransform, transforms]
   );
 
-  //////
   return (
     <>
       <style>
@@ -664,37 +662,6 @@ const Position: React.FC<CssProprtyComponentType> = (props) => {
             </PropertyRender>
           </div>
 
-          {/*<div style={styles.optionSelect}>*/}
-          {/*  <div style={styles.optionNameSelect}>Transform</div>*/}
-          {/*  <div>*/}
-          {/*    <select*/}
-          {/*      name="transform"*/}
-          {/*      onChange={(e) => handleTransformChange(e, "transform")}*/}
-          {/*      style={{...styles.inputBox, width: "80px"}}*/}
-          {/*      value={props.styles.transform || "none"}*/}
-          {/*      className="scroll"*/}
-          {/*    >*/}
-          {/*      <option style={styles.select} value="none">*/}
-          {/*        none*/}
-          {/*      </option>*/}
-          {/*      <option style={styles.select} value="inherit">*/}
-          {/*        inherit*/}
-          {/*      </option>*/}
-          {/*      <option style={styles.select} value="initial">*/}
-          {/*        initial*/}
-          {/*      </option>*/}
-          {/*      <option style={styles.select} value="revert">*/}
-          {/*        revert*/}
-          {/*      </option>*/}
-          {/*      <option style={styles.select} value="revert-layer">*/}
-          {/*        revert-layer*/}
-          {/*      </option>*/}
-          {/*      <option style={styles.select} value="unset">*/}
-          {/*        unset*/}
-          {/*      </option>*/}
-          {/*    </select>*/}
-          {/*  </div>*/}
-          {/*</div>*/}
           <div
             style={{
               display: "flex",
diff --git a/packages/component-style-layer/src/components/position/TransformSelector.tsx b/packages/component-style-layer/src/components/position/TransformSelector.tsx
index f8e9f572..326faa74 100644
--- a/packages/component-style-layer/src/components/position/TransformSelector.tsx
+++ b/packages/component-style-layer/src/components/position/TransformSelector.tsx
@@ -1,7 +1,7 @@
-import { smallText, gray100, gray800 } from "@atrilabs/design-system";
+import { gray100, gray800, smallText } from "@atrilabs/design-system";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Cross } from "../../icons/Cross";
-//import { NumberList } from "../number-list/NumberList";
+import { NumberList } from "../number-list/NumberList";
 
 type GradientSelectorType = {
   transform: string;
@@ -58,6 +58,7 @@ const AngleSelector: React.FC<{
           position: "relative",
           width: "5px",
           height: "18px",
+          transform: `translateZ(0px) rotate(${props.angle}deg)`,
         }}
       >
         <div
@@ -76,20 +77,15 @@ const AngleSelector: React.FC<{
 };
 
 function createTransformObject(transformStr: string): TransformType {
-  const transformObject: TransformType = {
+  return {
     transformType: "",
     transformAngle: 0,
     transformAngle2: 0,
     number: 1,
     number2: 1,
     number3: 1,
-    matrix: [1, 1, 1, 1, 1, 1],
+    matrix: [1, 1, 1, 1],
   };
-
-  // transformStr = transformStr.replace("(", ",");
-  // transformStr = transformStr.replace(")", "");
-
-  return transformObject;
 }
 
 function createTransformString(transformObject: TransformType): string {
@@ -126,22 +122,57 @@ function createTransformString(transformObject: TransformType): string {
     transformStr += `scale(${number}, ${number2}`;
   else if (transformType === "scale3d")
     transformStr += `scale3d(${number}, ${number2}, ${number3}`;
+  else if (transformType === "translateX")
+    transformStr += `translateX(${number}px`;
+  else if (transformType === "translateY")
+    transformStr += `translateY(${number}px`;
+  else if (transformType === "translateZ")
+    transformStr += `translateZ(${number}px`;
+  else if (transformType === "translate3d")
+    transformStr += `translate3d(${number}px, ${number2}px, ${number3}px`;
+  else if (transformType === "translate")
+    transformStr += `translate(${number}px, ${number2}px`;
+  else if (["matrix", "matrix3d"].includes(transformType))
+    transformStr += `${transformType}(${matrix.join(",")}`;
   else if (transformType === "none") transformStr += `(none`;
   else if (transformType === "initial") transformStr += `(initial`;
   else if (transformType === "inherit") transformStr += `(inherit`;
   transformStr += ")";
-  console.log("transform string...", transformStr);
   return transformStr || "";
 }
 
+const transformTypes: string[] = [
+  "none",
+  "matrix",
+  "matrix3d",
+  "translate",
+  "translate3d",
+  "translateX",
+  "translateY",
+  "translateZ",
+  "scale",
+  "scale3d",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+  "rotate",
+  "rotate3d",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skew",
+  "skewX",
+  "skewY",
+  "perspective",
+  "initial",
+  "inherit",
+];
+
 export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
-  // Use gradientProperty only in UI, not for update
   const transformProperty = useMemo(() => {
     return createTransformObject(props.transform);
   }, [props.transform]);
 
-  const [scale, setScale] = useState<string>("");
-
   const updateTransformCb = useCallback(
     (update: Partial<TransformType>) => {
       const transformProperty: TransformType = {
@@ -174,48 +205,25 @@ export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
 
   const setTransformAttribute = useCallback(
     (
-      attribute: "transformType" | "number" | "number2" | "number3",
-      value: string
+      attribute: "transformType" | "number" | "number2" | "number3" | "matrix",
+      value: string | number[]
     ) => {
-      const prevGradientProperty = transformProperty;
+      const prevTransformProperty = transformProperty;
       if (
-        attribute === "number" ||
-        attribute === "number2" ||
-        attribute === "number3"
+        typeof value === "string" &&
+        ["number", "number2", "number3"].includes(attribute)
       ) {
-        prevGradientProperty[attribute] = parseInt(value);
+        // @ts-ignore
+        prevTransformProperty[attribute] = parseInt(value);
       } else {
-        prevGradientProperty[attribute] = value;
+        // @ts-ignore
+        prevTransformProperty[attribute] = value;
       }
-      updateTransformCb(prevGradientProperty);
+      updateTransformCb(prevTransformProperty);
     },
     [transformProperty, updateTransformCb]
   );
 
-  // const setTransformAttribute = useCallback(
-  //   (
-  //     attribute: "transformType" | "number" | "number2" | "number3" | "matrix",
-  //     value: string | number[]
-  //   ) => {
-  //     const prevTransformProperty = transformProperty;
-  //     if (typeof value === "string") {
-  //       if (
-  //         attribute === "number" ||
-  //         attribute === "number2" ||
-  //         attribute === "number3"
-  //       ) {
-  //         prevTransformProperty[attribute] = parseInt(value);
-  //       }
-  //     } else if (attribute === "matrix" && Array.isArray(value)) {
-  //       //prevTransformProperty[attribute] = value.join(",");
-  //     } else {
-  //       prevTransformProperty[attribute] = value;
-  //     }
-  //     updateTransformCb(prevTransformProperty);
-  //   },
-  //   [transformProperty, updateTransformCb]
-  // );
-
   return (
     <>
       <style>
@@ -258,30 +266,11 @@ export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
               }}
               value={transformProperty.transformType}
             >
-              <option value="none">none</option>
-              <option value="matrix">matrix</option>
-              <option value="matrix3d">matrix3d</option>
-              <option value="translate">translate</option>
-              <option value="translate3d">translate3d</option>
-              <option value="translateX">translateX</option>
-              <option value="translateY">translateY</option>
-              <option value="translateZ">translateZ</option>
-              <option value="scale">scale</option>
-              <option value="scale3d">scale3d</option>
-              <option value="scaleX">scaleX</option>
-              <option value="scaleY">scaleY</option>
-              <option value="scaleZ">scaleZ</option>
-              <option value="rotate">rotate</option>
-              <option value="rotate3d">rotate3d</option>
-              <option value="rotateX">rotateX</option>
-              <option value="rotateY">rotateY</option>
-              <option value="rotateZ">rotateZ</option>
-              <option value="skew">skew</option>
-              <option value="skewX">skewX</option>
-              <option value="skewY">skewY</option>
-              <option value="perspective">perspective</option>
-              <option value="initial">initial</option>
-              <option value="inherit">inherit</option>
+              {transformTypes.map((type) => (
+                <option value={type} key={type}>
+                  {type}
+                </option>
+              ))}
             </select>
           </div>
           <div
@@ -293,9 +282,14 @@ export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
           </div>
         </div>
 
-        {["scaleX", "scaleY", "scaleZ"].includes(
-          transformProperty.transformType
-        ) && (
+        {[
+          "scaleX",
+          "scaleY",
+          "scaleZ",
+          "translateX",
+          "translateY",
+          "translateZ",
+        ].includes(transformProperty.transformType) && (
           <div
             style={{
               display: "flex",
@@ -339,7 +333,7 @@ export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
           </div>
         )}
 
-        {["scale"].includes(transformProperty.transformType) && (
+        {["scale", "translate"].includes(transformProperty.transformType) && (
           <>
             <div
               style={{
@@ -426,7 +420,9 @@ export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
           </>
         )}
 
-        {["scale3d"].includes(transformProperty.transformType) && (
+        {["scale3d", "translate3d"].includes(
+          transformProperty.transformType
+        ) && (
           <>
             <div
               style={{
@@ -860,59 +856,16 @@ export const TransformSelector: React.FC<GradientSelectorType> = (props) => {
           </>
         )}
 
-        {/*{(scale === "scale" || scale === "scale3d") && (*/}
-        {/*<ArrayPropertyContainer>*/}
-        {/*  <ArrayLabel onAddClick={() => {}} name={scale} />*/}
-        {/*  <div*/}
-        {/*    style={{*/}
-        {/*      display: "flex",*/}
-        {/*      justifyContent: "space-between",*/}
-        {/*      alignItems: "center",*/}
-        {/*      paddingLeft: "1em",*/}
-        {/*      paddingRight: "1em",*/}
-        {/*    }}*/}
-        {/*  >*/}
-        {/*    <input*/}
-        {/*      //  value={props.styles[scale] || ""}*/}
-        {/*      // value={scale}*/}
-        {/*      // onChange={(e) => {*/}
-        {/*      //   editValueCb(index, e.target.value);*/}
-        {/*      // }}*/}
-        {/*      type="number"*/}
-        {/*      style={{*/}
-        {/*        ...smallText,*/}
-        {/*        outline: "none",*/}
-        {/*        color: gray100,*/}
-        {/*        backgroundColor: gray800,*/}
-        {/*        height: "26px",*/}
-        {/*        width: "45px",*/}
-        {/*        border: "none",*/}
-        {/*        borderRadius: "2px 0 0 2px",*/}
-        {/*        paddingLeft: "6px",*/}
-        {/*        paddingRight: "6px",*/}
-        {/*        display: "flex",*/}
-        {/*        alignItems: "center",*/}
-        {/*      }}*/}
-        {/*    />*/}
-        {/*    <div*/}
-        {/*      style={{ display: "flex", alignItems: "center" }}*/}
-        {/*      // onClick={() => {*/}
-        {/*      //   deleteValueCb(index);*/}
-        {/*      // }}*/}
-        {/*    >*/}
-        {/*      <MinusIcon />*/}
-        {/*    </div>*/}
-        {/*  </div>*/}
-        {/*</ArrayPropertyContainer>*/}
-        {/*)}*/}
+        {["matrix", "matrix3d"].includes(transformProperty.transformType) && (
+          <NumberList
+            values={transformProperty.matrix}
+            updateValueCb={(values) => {
+              setTransformAttribute("matrix", values);
+            }}
+            name={"matrix"}
+          />
+        )}
       </div>
-      {/*<NumberList*/}
-      {/*  values={transformProperty.matrix}*/}
-      {/*  updateValueCb={(values) => {*/}
-      {/*    setTransformAttribute("matrix", values);*/}
-      {/*  }}*/}
-      {/*  name={"matrix"}*/}
-      {/*/>*/}
     </>
   );
 };
diff --git a/packages/react-component-manifests/src/manifests/Anchor/Anchor.tsx b/packages/react-component-manifests/src/manifests/Anchor/Anchor.tsx
index 9a4f38c1..06796e57 100644
--- a/packages/react-component-manifests/src/manifests/Anchor/Anchor.tsx
+++ b/packages/react-component-manifests/src/manifests/Anchor/Anchor.tsx
@@ -7,6 +7,7 @@ export const Anchor = forwardRef<
     attrs: {
       class: string;
     };
+    className: string;
     children: React.ReactNode[];
     onClick: (event: {
       eventX: number;
@@ -79,9 +80,9 @@ export const Anchor = forwardRef<
       id={props.id}
       ref={ref}
       style={props.styles}
-      className={
-        props.custom.disabled === true ? "disabled" : props.attrs?.class
-      }
+      className={`${props.className} ${props.attrs?.class} ${
+        props.custom.disabled ? "disabled" : ""
+      }`}
       {...custom}
       onClick={onClickCb}
     >
diff --git a/packages/react-component-manifests/src/manifests/Carousel/Carousel.tsx b/packages/react-component-manifests/src/manifests/Carousel/Carousel.tsx
index fd51ae06..6ff6330a 100644
--- a/packages/react-component-manifests/src/manifests/Carousel/Carousel.tsx
+++ b/packages/react-component-manifests/src/manifests/Carousel/Carousel.tsx
@@ -13,6 +13,7 @@ const Carousel = forwardRef<
     };
     custom: {
       items: { text: string; image?: string }[];
+      autoplay?: boolean;
       effect?: CarouselEffect;
       dotPosition?: DotPosition;
       dots?:
@@ -28,12 +29,14 @@ const Carousel = forwardRef<
     className?: string;
   }
 >((props, ref) => {
-  const { custom } = props;
   return (
     <div ref={ref} id={props.id}>
       <AntdCarousel
         className={`${props.className} ${props.attrs?.class}`}
-        {...custom}
+        autoplay={props.custom.autoplay}
+        dots={props.custom.dots}
+        dotPosition={props.custom.dotPosition}
+        effect={props.custom.effect}
       >
         {props.custom.items.map((item, index) => (
           <div key={index}>