Update propertyCategories.js

New fonts added
Z-index added
initial values changed
Position fixed
New position props added
Background color changed to an input

packages/builder/src/components/userInterface/propertyCategories.js

@@ -11,9 +11,8 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -22,9 +21,8 @@ export const layout = [
     label: "Direction",
     key: "flex-direction",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Row",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
       { label: "column", value: "column" },
@@ -35,9 +33,8 @@ export const layout = [
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex Start",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -50,9 +47,8 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex Start",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -66,7 +62,6 @@ export const layout = [
     control: OptionSelect,
     initialValue: "Wrap",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Wrap", value: "wrap" },
       { label: "No Wrap", value: "nowrap" },
       { label: "Wrap Reverse", value: "wrap-reverse" },
@@ -80,8 +75,13 @@ const spacingMeta = [
   { placeholder: "R" },
   { placeholder: "T" },
 ]
+
 export const spacing = [
-  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
+  { label: "Margin", 
+    key: "margin", 
+    control: InputGroup, 
+    meta: spacingMeta 
+  },
   {
     label: "Padding",
     key: "padding",
@@ -104,14 +104,40 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
+    initialValue: "Wrap",
     options: [
-      { label: "static" },
-      { label: "relative" },
-      { label: "fixed" },
-      { label: "absolute" },
-      { label: "sticky" },
+      { label: "Static", value: "static"},
+      { label: "Relative", value: "relative"},
+      { label: "Fixed", value: "fixed"},
+      { label: "Absolute", value: "absolute"},
+      { label: "Sticky", value: "sticky"},
     ],
   },
+  {
+    label: "Top",
+    key: "top",
+    control: Input,
+  },
+  {
+    label: "Right",
+    key: "right",
+    control: Input,
+  },
+  {
+    label: "Bottom",
+    key: "bottom",
+    control: Input,
+  },
+  {
+    label: "Left",
+    key: "left",
+    control: Input,
+  },
+  {
+    label: "Z-index",
+    key: "z-index",
+    control: Input,
+  },
 ]
 
 export const typography = [
@@ -122,13 +148,21 @@ export const typography = [
     defaultValue: "initial",
     options: [
       "initial",
-      "Times New Roman",
-      "Georgia",
       "Arial",
       "Arial Black",
+      "Cursive",
+      "Courier",
       "Comic Sans MS",
+      "Helvetica",
       "Impact",
+      "Inter",
       "Lucida Sans Unicode",
+      "Open Sans",
+      "Playfair",
+      "Roboto",
+      "Roboto Mono",
+      "Times New Roman",
+      "Verdana",
     ],
     styleBindingProperty: "font-family",
   },
@@ -164,8 +198,7 @@ export const background = [
   {
     label: "Background",
     key: "background",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
   { label: "Image", key: "image", control: Input }, //custom
 ]
@@ -176,15 +209,34 @@ export const border = [
   {
     label: "Color",
     key: "border-color",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
+  },
+  { 
+    label: "Style", 
+    key: "border-style", 
+    control: OptionSelect,
+    options: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"],
    },
-  { label: "Style", key: "border-style", control: Input },
 ]
 
 export const effects = [
   { label: "Opacity", key: "opacity", control: Input },
-  { label: "Rotate", key: "transform", control: Input }, //needs special control
+  { label: "Rotate", 
+    key: "transform", 
+    control: OptionSelect,
+    options: [
+      {label: "None", value:"rotate(0deg)"}, 
+      {label: "45 degrees", value:"rotate(45deg)"}, 
+      {label: "90 degrees", value:"rotate(90deg)"}, 
+      {label: "135 degrees", value:"rotate(135deg)"}, 
+      {label: "180 degrees", value:"rotate(180deg)"}, 
+      {label: "225 degrees", value:"rotate(225deg)"}, 
+      {label: "270 degrees", value:"rotate(270deg)"}, 
+      {label: "315 degrees", value:"rotate(315deg)"}, 
+      {label: "360 degrees", value:"rotate(360deg)"}, 
+    ],
+  }
+    , //needs special control
   { label: "Shadow", key: "box-shadow", control: Input },
 ]