Transform style with matrix, Fixed Carousel styles issue and Anchor t…

…ag 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
Atri-Labs · May 9, 2023 · d0cd9db · d0cd9db
1 parent 836273a
commit d0cd9db
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 169 deletions.
diff --git 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
@@ -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
@@ -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",