experimental: migrate style section to style object model (#4065)

Ref #1536
#3399

Power style section and its colorful dots with new style engine.

Can be tested

- size section
- background section
- transforms section
- advanced section

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -1,5 +1,13 @@
-import { useMemo, useRef, useState } from "react";
-import { Box, Flex, Text } from "@webstudio-is/design-system";
+import { useMemo, useRef, useState, type ReactNode } from "react";
+import { PlusIcon } from "@webstudio-is/icons";
+import {
+  Box,
+  Flex,
+  SectionTitle,
+  SectionTitleButton,
+  SectionTitleLabel,
+  Text,
+} from "@webstudio-is/design-system";
 import { properties as propertiesData } from "@webstudio-is/css-data";
 import { useStore } from "@nanostores/react";
 import type { StyleProperty } from "@webstudio-is/css-engine";
@@ -17,10 +25,15 @@ import {
   type StyleInfo,
 } from "../../shared/style-info";
 import { Add } from "./add";
-import { CollapsibleSection } from "../../shared/collapsible-section";
 import { sections } from "../sections";
 import { toKebabCase } from "../../shared/keyword-utils";
 import type { DeleteProperty } from "../../shared/use-style-data";
+import {
+  CollapsibleSectionRoot,
+  useOpenState,
+} from "~/builder/shared/collapsible-section";
+import { useComputedStyles } from "../../shared/model";
+import { getDots } from "../../shared/style-section";
 
 const allPropertyNames = Object.keys(propertiesData).sort(
   Intl.Collator().compare
@@ -82,6 +95,42 @@ const usePropertyNames = (currentStyle: StyleInfo) => {
 // Only here to keep the same section module interface
 export const properties = [];
 
+const AdvancedStyleSection = (props: {
+  label: string;
+  properties: StyleProperty[];
+  onAdd: () => void;
+  children: ReactNode;
+}) => {
+  const { label, children, properties, onAdd } = props;
+  const [isOpen, setIsOpen] = useOpenState(props);
+  const styles = useComputedStyles(properties);
+  return (
+    <CollapsibleSectionRoot
+      label={label}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      trigger={
+        <SectionTitle
+          dots={getDots(styles)}
+          suffix={
+            <SectionTitleButton
+              prefix={<PlusIcon />}
+              onClick={() => {
+                setIsOpen(true);
+                onAdd();
+              }}
+            />
+          }
+        >
+          <SectionTitleLabel>{label}</SectionTitleLabel>
+        </SectionTitle>
+      }
+    >
+      {children}
+    </CollapsibleSectionRoot>
+  );
+};
+
 export const Section = ({
   currentStyle,
   setProperty,
@@ -97,13 +146,10 @@ export const Section = ({
   };
 
   return (
-    <CollapsibleSection
+    <AdvancedStyleSection
       label="Advanced"
-      currentStyle={currentStyle}
       properties={propertyNames}
-      onAdd={() => {
-        setAddingProp("");
-      }}
+      onAdd={() => setAddingProp("")}
     >
       {addingProp !== undefined && (
         <Add
@@ -171,6 +217,6 @@ export const Section = ({
           );
         })}
       </Box>
-    </CollapsibleSection>
+    </AdvancedStyleSection>
   );
 };

apps/builder/app/builder/features/style-panel/sections/backdrop-filter/backdrop-filter.tsx

@@ -1,21 +1,12 @@
-import { CollapsibleSectionRoot } from "~/builder/shared/collapsible-section";
 import type { SectionProps } from "../shared/section";
 import type { LayersValue, StyleProperty } from "@webstudio-is/css-engine";
-import { useState } from "react";
-import {
-  SectionTitle,
-  SectionTitleButton,
-  Tooltip,
-  Flex,
-  Text,
-} from "@webstudio-is/design-system";
+import { Tooltip, Flex, Text } from "@webstudio-is/design-system";
 import { parseCssValue } from "@webstudio-is/css-data";
-import { getDots } from "../../shared/collapsible-section";
-import { InfoCircleIcon, PlusIcon } from "@webstudio-is/icons";
+import { RepeatedStyleSection } from "../../shared/style-section";
+import { InfoCircleIcon } from "@webstudio-is/icons";
 import { addLayer } from "../../style-layer-utils";
 import { LayersList } from "../../style-layers-list";
 import { FilterSectionContent } from "../../shared/filter-content";
-import { PropertySectionLabel } from "../../property-label";
 
 export const properties = ["backdropFilter"] satisfies [
   StyleProperty,
@@ -28,45 +19,21 @@ const initialBackdropFilter = "blur(0px)";
 
 export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
-  const [isOpen, setIsOpen] = useState(true);
   const value = currentStyle[property]?.value;
 
   return (
-    <CollapsibleSectionRoot
-      fullWidth
+    <RepeatedStyleSection
       label={label}
-      isOpen={isOpen}
-      onOpenChange={setIsOpen}
-      trigger={
-        <SectionTitle
-          dots={getDots(currentStyle, properties)}
-          suffix={
-            <Tooltip content={"Add a backdrop-filter"}>
-              <SectionTitleButton
-                prefix={<PlusIcon />}
-                onClick={() => {
-                  addLayer(
-                    property,
-                    parseCssValue(
-                      property,
-                      initialBackdropFilter
-                    ) as LayersValue,
-                    currentStyle,
-                    props.createBatchUpdate
-                  );
-                  setIsOpen(true);
-                }}
-              />
-            </Tooltip>
-          }
-        >
-          <PropertySectionLabel
-            label={label}
-            description="Backdrop filters are similar to filters, but are applied to the area behind an element. This can be useful for creating frosted glass effects."
-            properties={properties}
-          />
-        </SectionTitle>
-      }
+      description="Backdrop filters are similar to filters, but are applied to the area behind an element. This can be useful for creating frosted glass effects."
+      properties={properties}
+      onAdd={() => {
+        addLayer(
+          property,
+          parseCssValue(property, initialBackdropFilter) as LayersValue,
+          currentStyle,
+          props.createBatchUpdate
+        );
+      }}
     >
       {value?.type === "tuple" && value.value.length > 0 && (
         <LayersList
@@ -109,6 +76,6 @@ export const Section = (props: SectionProps) => {
           }}
         />
       )}
-    </CollapsibleSectionRoot>
+    </RepeatedStyleSection>
   );
 };

apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx

@@ -1,14 +1,13 @@
 import { useStore } from "@nanostores/react";
-import type { SectionProps } from "../shared/section";
-import { FloatingPanel } from "~/builder/shared/floating-panel";
+import { useMemo } from "react";
+import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import { propertyDescriptions } from "@webstudio-is/css-data";
 import {
   CssValueListItem,
   CssValueListArrowFocus,
   Flex,
   Grid,
   Label,
-  SectionTitle,
-  SectionTitleButton,
   SmallIconButton,
   SmallToggleButton,
   theme,
@@ -18,8 +17,9 @@ import {
   EyeconOpenIcon,
   EyeconClosedIcon,
   SubtractIcon,
-  PlusIcon,
 } from "@webstudio-is/icons";
+import type { SectionProps } from "../shared/section";
+import { FloatingPanel } from "~/builder/shared/floating-panel";
 import { $assets } from "~/shared/nano-states";
 import type { StyleInfo } from "../../shared/style-info";
 import { ColorControl } from "../../controls/color/color-control";
@@ -37,15 +37,8 @@ import {
 } from "./background-layers";
 import { BackgroundContent } from "./background-content";
 import { getLayerName, LayerThumbnail } from "./background-thumbnail";
-import { useMemo } from "react";
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
-import {
-  CollapsibleSectionRoot,
-  useOpenState,
-} from "~/builder/shared/collapsible-section";
-import { getDots } from "../../shared/collapsible-section";
-import { PropertyLabel, PropertySectionLabel } from "../../property-label";
-import { propertyDescriptions } from "@webstudio-is/css-data";
+import { RepeatedStyleSection } from "../../shared/style-section";
+import { PropertyLabel } from "../../property-label";
 
 const Layer = (props: {
   id: string;
@@ -149,48 +142,6 @@ export const properties = [
   "backgroundBlendMode",
 ] satisfies Array<StyleProperty>;
 
-const BackgroundsCollapsibleSection = ({
-  children,
-  currentStyle,
-  createBatchUpdate,
-}: SectionProps & { children: React.ReactNode }) => {
-  const label = "Backgrounds";
-  const [isOpen, setIsOpen] = useOpenState({ label });
-
-  return (
-    <CollapsibleSectionRoot
-      label={label}
-      fullWidth
-      isOpen={isOpen}
-      onOpenChange={(nextIsOpen) => {
-        setIsOpen(nextIsOpen);
-      }}
-      trigger={
-        <SectionTitle
-          dots={getDots(currentStyle, properties)}
-          suffix={
-            <SectionTitleButton
-              prefix={<PlusIcon />}
-              onClick={() => {
-                addLayer(currentStyle, createBatchUpdate);
-                setIsOpen(true);
-              }}
-            />
-          }
-        >
-          <PropertySectionLabel
-            label="Backgrounds"
-            description="Add one or more backgrounds to the instance such as a color, image, or gradient."
-            properties={layeredBackgroundProps}
-          />
-        </SectionTitle>
-      }
-    >
-      {children}
-    </CollapsibleSectionRoot>
-  );
-};
-
 export const Section = (props: SectionProps) => {
   const { setProperty, deleteProperty, currentStyle, createBatchUpdate } =
     props;
@@ -213,11 +164,13 @@ export const Section = (props: SectionProps) => {
   });
 
   return (
-    <BackgroundsCollapsibleSection
-      setProperty={setProperty}
-      deleteProperty={deleteProperty}
-      createBatchUpdate={createBatchUpdate}
-      currentStyle={currentStyle}
+    <RepeatedStyleSection
+      label="Backgrounds"
+      description="Add one or more backgrounds to the instance such as a color, image, or gradient."
+      properties={layeredBackgroundProps}
+      onAdd={() => {
+        addLayer(currentStyle, createBatchUpdate);
+      }}
     >
       <Flex gap={1} direction="column">
         <CssValueListArrowFocus dragItemId={dragItemId}>
@@ -270,6 +223,6 @@ export const Section = (props: SectionProps) => {
           <ColorControl property="backgroundColor" />
         </Grid>
       </Flex>
-    </BackgroundsCollapsibleSection>
+    </RepeatedStyleSection>
   );
 };

apps/builder/app/builder/features/style-panel/sections/borders/borders.tsx

@@ -1,7 +1,7 @@
 import { Flex } from "@webstudio-is/design-system";
 import type { StyleProperty } from "@webstudio-is/css-engine";
 import type { SectionProps } from "../shared/section";
-import { CollapsibleSection } from "../../shared/collapsible-section";
+import { StyleSection } from "../../shared/style-section";
 import {
   BorderRadius,
   properties as borderRadiusProperties,
@@ -28,17 +28,13 @@ export const properties = [
 
 export const Section = (props: SectionProps) => {
   return (
-    <CollapsibleSection
-      label="Borders"
-      currentStyle={props.currentStyle}
-      properties={properties}
-    >
+    <StyleSection label="Borders" properties={properties}>
       <Flex direction="column" gap={2}>
         <BorderStyle />
         <BorderColor />
         <BorderWidth {...props} />
         <BorderRadius {...props} />
       </Flex>
-    </CollapsibleSection>
+    </StyleSection>
   );
 };