feat: styling group order changed

chaibuilder · May 1, 2024 · a34c138 · a34c138
1 parent 91b9424
commit a34c138
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 89 deletions.
diff --git a/src/RowCol.tsx b/src/RowCol.tsx
@@ -0,0 +1,25 @@
+import { registerChaiBlock } from "@chaibuilder/runtime";
+
+const ColComponent = () => {
+  return <div>Column</div>;
+};
+
+const RowComponent = () => {
+  return <div className={"w-full p-4 border"}>Row</div>;
+};
+
+registerChaiBlock(ColComponent, {
+  type: "Col",
+  label: "Col",
+  category: "core",
+  group: "basic",
+  props: {},
+});
+
+registerChaiBlock(RowComponent, {
+  type: "Row",
+  label: "Row",
+  category: "core",
+  group: "basic",
+  props: {},
+});
diff --git a/src/core/components/settings/BlockStyling.tsx b/src/core/components/settings/BlockStyling.tsx
@@ -70,7 +70,7 @@ export default function BlockStyling() {
         </div>
       </div>
       <ScrollArea className="no-scrollbar -mx-1 h-full overflow-x-hidden">
-        <Accordion type="multiple" className="h-full w-full">
+        <Accordion defaultValue={["Layout"]} type="multiple" className="h-full w-full">
           {flexChild && <SettingsSection section={FLEX_CHILD_SECTION} />}
           {gridChild ? <SettingsSection section={GRID_CHILD_SECTION} /> : null}
           {SETTINGS_SECTIONS.map((section) => (

diff --git a/src/core/components/settings/choices/AdvanceChoices.tsx b/src/core/components/settings/choices/AdvanceChoices.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import { get, isEmpty, isNaN, parseInt } from "lodash";
+import { first, get, isEmpty, isNaN, parseInt } from "lodash";
 import { useThrottledCallback } from "@react-hookz/web";
 import { InfoCircledIcon, RowSpacingIcon, TriangleDownIcon } from "@radix-ui/react-icons";
 import { getUserInputValues } from "../../../functions/GetUserInputValues";
@@ -86,6 +86,8 @@ const UnitSelection = ({ onSelect, current, units }: { current: string; onSelect
   </div>
 );
 
+const THROTTLE_TIME = 50; //milliseconds
+
 export const AdvanceChoices = (props: RangeOptionsType) => {
   const [showUnits, setShowUnits] = useState(false);
   const [value, setValue] = useState<number | string>("");
@@ -100,7 +102,7 @@ export const AdvanceChoices = (props: RangeOptionsType) => {
     const { value: newValue, unit: newUnit } = getClassValueAndUnit(currentClass);
     if (newUnit === "") {
       setValue(newValue);
-      setUnit(cssProperty?.toLowerCase().includes("width") ? "%" : units[0]);
+      setUnit(cssProperty?.toLowerCase().includes("width") ? "%" : first(units));
       return;
     }
     setUnit(newUnit);
@@ -111,21 +113,8 @@ export const AdvanceChoices = (props: RangeOptionsType) => {
     }
   }, [currentClass, cssProperty, units]);
 
-  const emitOnChange = useThrottledCallback(
-    (cls: string) => {
-      onChange(cls);
-    },
-    [onChange],
-    200,
-  );
-
-  const emitOnDrag = useThrottledCallback(
-    (cls: string) => {
-      onChange(cls, false);
-    },
-    [onChange],
-    200,
-  );
+  const emitOnChange = useThrottledCallback((cls: string) => onChange(cls), [onChange], THROTTLE_TIME);
+  const emitOnDrag = useThrottledCallback((cls: string) => onChange(cls, false), [onChange], THROTTLE_TIME);
 
   const setStyle = useCallback(
     (realtime = false) => {

diff --git a/src/core/components/settings/choices/BlockStyle.tsx b/src/core/components/settings/choices/BlockStyle.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { findLast, get } from "lodash";
-import { InfoCircledIcon, TrashIcon } from "@radix-ui/react-icons";
+import { CrossCircledIcon, InfoCircledIcon } from "@radix-ui/react-icons";
 import {
   useAddClassesToBlocks,
   useCanvasWidth,
@@ -247,7 +247,7 @@ export const BlockStyle = (props: EditOptionProps) => {
               ) : null
             ) : (
               <button type="button" onClick={() => removeClass()} title="Reset" className="flex px-1.5 text-xs">
-                <TrashIcon className="h-5 w-5 text-blue-500 hover:opacity-80" />
+                <CrossCircledIcon className="h-5 w-5 text-blue-500 hover:opacity-80" />
               </button>
             )}
           </div>

diff --git a/src/core/components/settings/choices/RangeChoices.tsx b/src/core/components/settings/choices/RangeChoices.tsx
@@ -27,7 +27,11 @@ export const RangeChoices = ({ property, onChange }: any) => {
             disabled={!canChange && (!canReset || index - 1 < 0)}
             onClick={() => onChange(nth(classes, index - 1), property)}>
             <span className="flex items-center justify-center">
-              <MinusIcon className={!canChange && (!canReset || index - 1 < 0) ? "text-gray-500" : "text-white/60"} />
+              <MinusIcon
+                className={
+                  !canChange && (!canReset || index - 1 < 0) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+                }
+              />
             </span>
           </button>
           <div className="w-8/12 text-center">
@@ -40,7 +44,11 @@ export const RangeChoices = ({ property, onChange }: any) => {
             onClick={() => onChange(nth(classes, index + 1), property)}>
             <span className="flex items-center justify-center">
               <PlusIcon
-                className={!canChange && (!canReset || index + 1 >= classes.length) ? "text-gray-500" : "text-white/60"}
+                className={
+                  !canChange && (!canReset || index + 1 >= classes.length)
+                    ? "text-gray-500"
+                    : "text-black/60 dark:text-white/60"
+                }
               />
             </span>
           </button>

diff --git a/src/core/constants/STYLING_GROUPS.ts b/src/core/constants/STYLING_GROUPS.ts
@@ -28,68 +28,10 @@ export const GRID_CHILD_SECTION = {
 
 export const SETTINGS_SECTIONS = [
   {
-    heading: "Display",
-    items: [
-      { type: "dropdown", label: "Display", property: "display", units: BASIC_UNITS },
-      {
-        styleType: "accordion",
-        heading: "Flex options",
-        items: [
-          { type: "dropdown", label: "Direction", property: "flexDirection" },
-          { type: "dropdown", label: "Wrap", property: "flexWrap" },
-          { type: "dropdown", label: "Justify", property: "justifyContent" },
-          { type: "dropdown", label: "Content", property: "alignContent" },
-          { type: "dropdown", label: "Items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "Gap",
-            options: [
-              { key: "gap", label: "All" },
-              { key: "gapX", label: "Left-Right" },
-              { key: "gapY", label: "Top-Bottom" },
-            ],
-          },
-        ],
-        conditions: { display: "flex" },
-      },
-      {
-        styleType: "accordion",
-        heading: "Grid options",
-        items: [
-          { type: "range", label: "Columns", property: "gridColumns" },
-          { type: "range", label: "Rows", property: "gridRows" },
-          { type: "dropdown", label: "Auto Flow", property: "gridAutoFlow" },
-          { type: "dropdown", label: "Auto Cols", property: "gridAutoColumns" },
-          { type: "dropdown", label: "Auto Rows", property: "gridAutoRows" },
-          { type: "dropdown", label: "Justify", property: "justifyContent" },
-          { type: "dropdown", label: "Content", property: "alignContent" },
-          { type: "dropdown", label: "Items", property: "alignItems" },
-          {
-            styleType: "multiple",
-            label: "Gap",
-            units: ["px", "rem"],
-            options: [
-              { key: "gap", label: "All" },
-              { key: "gapX", label: "Left-Right" },
-              { key: "gapY", label: "Top-Bottom" },
-            ],
-          },
-        ],
-        conditions: { display: "grid" },
-      },
-      {
-        styleType: "accordion",
-        heading: "Visibility & Opacity",
-        items: [
-          { type: "dropdown", label: "Visibility", property: "visibility", units: BASIC_UNITS },
-          { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] },
-        ],
-      },
-    ],
-  },
-  {
-    heading: "Spacing",
+    heading: "Layout",
     items: [
+      { type: "arbitrary", label: "Width", units: BASIC_UNITS.concat("auto"), property: "width" },
+      { type: "arbitrary", label: "Height", units: BASIC_UNITS.concat("auto"), property: "height" },
       {
         styleType: "multiple",
         label: "Margin",
@@ -120,7 +62,7 @@ export const SETTINGS_SECTIONS = [
       },
       {
         styleType: "multiple",
-        label: "Space Between",
+        label: "Space Bt.",
         options: [
           { key: "spaceX", label: "Left-Right" },
           { key: "spaceY", label: "Top-Bottom" },
@@ -131,8 +73,6 @@ export const SETTINGS_SECTIONS = [
   {
     heading: "Size",
     items: [
-      { type: "arbitrary", label: "Width", units: BASIC_UNITS.concat("auto"), property: "width" },
-      { type: "arbitrary", label: "Height", units: BASIC_UNITS.concat("auto"), property: "height" },
       {
         styleType: "accordion",
         heading: "Min width & height",
@@ -160,6 +100,66 @@ export const SETTINGS_SECTIONS = [
       },
     ],
   },
+  {
+    heading: "Display",
+    items: [
+      { type: "dropdown", label: "Display", property: "display", units: BASIC_UNITS },
+      {
+        styleType: "accordion",
+        heading: "Flex options",
+        items: [
+          { type: "dropdown", label: "Direction", property: "flexDirection" },
+          { type: "dropdown", label: "Wrap", property: "flexWrap" },
+          { type: "dropdown", label: "Justify", property: "justifyContent" },
+          { type: "dropdown", label: "Content", property: "alignContent" },
+          { type: "dropdown", label: "Items", property: "alignItems" },
+          {
+            styleType: "multiple",
+            label: "Gap",
+            options: [
+              { key: "gap", label: "All" },
+              { key: "gapX", label: "Left-Right" },
+              { key: "gapY", label: "Top-Bottom" },
+            ],
+          },
+        ],
+        conditions: { display: "flex" },
+      },
+      {
+        styleType: "accordion",
+        heading: "Grid options",
+        items: [
+          { type: "range", label: "Columns", property: "gridColumns" },
+          { type: "range", label: "Rows", property: "gridRows" },
+          { type: "dropdown", label: "Auto Flow", property: "gridAutoFlow" },
+          { type: "dropdown", label: "Auto Cols", property: "gridAutoColumns" },
+          { type: "dropdown", label: "Auto Rows", property: "gridAutoRows" },
+          { type: "dropdown", label: "Justify", property: "justifyContent" },
+          { type: "dropdown", label: "Content", property: "alignContent" },
+          { type: "dropdown", label: "Items", property: "alignItems" },
+          {
+            styleType: "multiple",
+            label: "Gap",
+            units: ["px", "rem"],
+            options: [
+              { key: "gap", label: "All" },
+              { key: "gapX", label: "Left-Right" },
+              { key: "gapY", label: "Top-Bottom" },
+            ],
+          },
+        ],
+        conditions: { display: "grid" },
+      },
+      {
+        styleType: "accordion",
+        heading: "Visibility & Opacity",
+        items: [
+          { type: "dropdown", label: "Visibility", property: "visibility", units: BASIC_UNITS },
+          { type: "arbitrary", label: "Opacity", property: "opacity", units: ["-"] },
+        ],
+      },
+    ],
+  },
   {
     heading: "Position",
     items: [

diff --git a/src/core/functions/Layers.ts b/src/core/functions/Layers.ts
@@ -66,9 +66,20 @@ export type ChaiBlock = {
  * @param type
  */
 export const canAddChildBlock = (type: string) =>
-  ["Box", "Slot", "Form", "DataProvider", "Link", "List", "ListItem", "Row", "Column", "Table", "TableCell"].includes(
-    type,
-  );
+  [
+    "Box",
+    "Slot",
+    "Form",
+    "DataProvider",
+    "Link",
+    "List",
+    "ListItem",
+    "Row",
+    "Column",
+    "Table",
+    "Row",
+    "TableCell",
+  ].includes(type);
 
 /**
  *

diff --git a/src/main.tsx b/src/main.tsx
@@ -6,6 +6,7 @@ import ChaiStudio from "./ChaiStudio";
 import Preview from "./Preview";
 import ChaiEditor from "./Editor";
 import "./blocks";
+import "./RowCol.tsx";
 import "./data-providers/data";
 import RJSF from "./RJSF.tsx";