From 7f35c0df7d9c376e69d4a58ef73e949645dfe6e2 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 22 Oct 2022 14:26:07 +0200
Subject: [PATCH 1/2] make controls automatically map from exports

---
 .../image-control.tsx}                        |  2 +-
 .../features/style-panel/controls/index.ts    |  1 +
 .../features/style-panel/shared/configs.ts    | 20 +++++++++----------
 .../features/style-panel/style-sections.tsx   | 20 +------------------
 4 files changed, 13 insertions(+), 30 deletions(-)
 rename apps/designer/app/designer/features/style-panel/controls/{background-image/background-image-control.tsx => image/image-control.tsx} (96%)

diff --git a/apps/designer/app/designer/features/style-panel/controls/background-image/background-image-control.tsx b/apps/designer/app/designer/features/style-panel/controls/image/image-control.tsx
similarity index 96%
rename from apps/designer/app/designer/features/style-panel/controls/background-image/background-image-control.tsx
rename to apps/designer/app/designer/features/style-panel/controls/image/image-control.tsx
index d213201d2c..49daf2d4b3 100644
--- a/apps/designer/app/designer/features/style-panel/controls/background-image/background-image-control.tsx
+++ b/apps/designer/app/designer/features/style-panel/controls/image/image-control.tsx
@@ -5,7 +5,7 @@ import { ValuePickerPopover } from "../../shared/value-picker-popover";
 import { ImageManager } from "~/designer/shared/image-manager";
 import { useAssets } from "~/designer/shared/assets";
 
-export const BackgroundImageControl = ({
+export const ImageControl = ({
   currentStyle,
   inheritedStyle,
   setProperty,
diff --git a/apps/designer/app/designer/features/style-panel/controls/index.ts b/apps/designer/app/designer/features/style-panel/controls/index.ts
index 23066cea02..f6e4b98bb3 100644
--- a/apps/designer/app/designer/features/style-panel/controls/index.ts
+++ b/apps/designer/app/designer/features/style-panel/controls/index.ts
@@ -3,3 +3,4 @@ export * from "./color/color-control";
 export * from "./select/select-control";
 export * from "./menu/menu-control";
 export * from "./font-family/font-family-control";
+export * from "./image/image-control";
diff --git a/apps/designer/app/designer/features/style-panel/shared/configs.ts b/apps/designer/app/designer/features/style-panel/shared/configs.ts
index ca8fcfa658..503142a654 100644
--- a/apps/designer/app/designer/features/style-panel/shared/configs.ts
+++ b/apps/designer/app/designer/features/style-panel/shared/configs.ts
@@ -48,12 +48,12 @@ type BaseStyleConfig = {
 
 // @todo make it use actual list of controls
 export type Control =
-  | "Text"
-  | "Color"
-  | "Menu"
-  | "Select"
-  | "FontFamily"
-  | "Image";
+  | "TextControl"
+  | "ColorControl"
+  | "MenuControl"
+  | "SelectControl"
+  | "FontFamilyControl"
+  | "ImageControl";
 
 export type StyleConfig = BaseStyleConfig & {
   control: Control;
@@ -64,19 +64,19 @@ type Property = keyof typeof keywordValues;
 
 const getControl = (property: StyleProperty): Control => {
   if (property.toLocaleLowerCase().includes("color")) {
-    return "Color";
+    return "ColorControl";
   }
 
   switch (property) {
     case "fontFamily": {
-      return isFeatureEnabled("fonts") ? "FontFamily" : "Text";
+      return isFeatureEnabled("fonts") ? "FontFamilyControl" : "TextControl";
     }
     case "backgroundImage": {
-      return isFeatureEnabled("assets") ? "Image" : "Text";
+      return isFeatureEnabled("assets") ? "ImageControl" : "TextControl";
     }
   }
 
-  return "Text";
+  return "TextControl";
 };
 
 const createStyleConfigs = () => {
diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx
index 265a52184d..bed67a15b8 100644
--- a/apps/designer/app/designer/features/style-panel/style-sections.tsx
+++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx
@@ -8,16 +8,9 @@ import {
 } from "@webstudio-is/react-sdk";
 import type { SetProperty, CreateBatchUpdate } from "./shared/use-style-data";
 import type { InheritedStyle } from "./shared/get-inherited-style";
-import {
-  ColorControl,
-  TextControl,
-  SelectControl,
-  MenuControl,
-  FontFamilyControl,
-} from "./controls";
+import * as controls from "./controls";
 import { ShowMore } from "./shared/show-more";
 import { LayoutSection, SpacingSection } from "./sections";
-import { BackgroundImageControl } from "./controls/background-image/background-image-control";
 import { PropertyName } from "./shared/property-name";
 
 export type PropertyProps = {
@@ -138,14 +131,3 @@ const sections: {
   layout: LayoutSection,
   spacing: SpacingSection,
 };
-
-const controls: {
-  [key: string]: (props: ControlProps) => JSX.Element | null;
-} = {
-  Menu: MenuControl,
-  Text: TextControl,
-  Color: ColorControl,
-  Select: SelectControl,
-  FontFamily: FontFamilyControl,
-  Image: BackgroundImageControl,
-};

From 1c28b2ac864e021e24bdbc569c89e4c38e9da3f5 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 22 Oct 2022 14:54:57 +0200
Subject: [PATCH 2/2] fix search in style panel

during search some properties are not provided, so we need
1. make sure we don't break
2. hide appropriately the ui elements that can't be shown
---
 .../style-panel/sections/layout/layout.tsx    | 141 +++++++++++-------
 .../features/style-panel/style-sections.tsx   |   2 +-
 2 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
index ee75ef1c87..7529e48ee3 100644
--- a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
@@ -23,56 +23,77 @@ const LayoutSectionFlex = ({
     rowGap,
   } = sectionStyle;
   const batchUpdate = createBatchUpdate();
+  const hasMenuItems = [
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignContent,
+  ].some((config) => config !== undefined);
+
   return (
     <Flex css={{ flexDirection: "column", gap: "$2" }}>
-      <Grid
-        css={{
-          gridArea: "display",
-          gridTemplateColumns: "auto 1fr",
-          gap: "$space$2",
-          width: "fit-content",
-          fontWeight: "500",
-        }}
-      >
-        <PropertyName
-          property={display.styleConfig.property}
-          label={display.styleConfig.label}
-        />
-        <SelectControl {...display} />
-      </Grid>
-      <Grid
-        css={{
-          gap: "$2",
-          gridTemplateColumns: "repeat(2, $6) repeat(3, $6)",
-          gridTemplateRows: "repeat(2, $6)",
-          gridTemplateAreas: `
+      {display?.styleConfig && (
+        <Grid
+          css={{
+            gridArea: "display",
+            gridTemplateColumns: "auto 1fr",
+            gap: "$space$2",
+            width: "fit-content",
+            fontWeight: "500",
+          }}
+        >
+          <PropertyName
+            property={display.styleConfig.property}
+            label={display.styleConfig.label}
+          />
+          <SelectControl {...display} />
+        </Grid>
+      )}
+      {hasMenuItems && (
+        <Grid
+          css={{
+            gap: "$2",
+            gridTemplateColumns: "repeat(2, $6) repeat(3, $6)",
+            gridTemplateRows: "repeat(2, $6)",
+            gridTemplateAreas: `
             "grid grid flexDirection flexWrap ."
             "grid grid alignItems justifyContent alignContent"
           `,
-          alignItems: "center",
-        }}
-      >
-        <Box css={{ gridArea: "grid" }}>
-          <FlexGrid currentStyle={currentStyle} batchUpdate={batchUpdate} />
-        </Box>
-        <Box css={{ gridArea: "flexDirection" }}>
-          <MenuControl {...flexDirection} />
-        </Box>
-        <Box css={{ gridArea: "flexWrap" }}>
-          <MenuControl {...flexWrap} />
-        </Box>
-        <Box css={{ gridArea: "alignItems" }}>
-          <MenuControl {...alignItems} />
-        </Box>
-        <Box css={{ gridArea: "justifyContent" }}>
-          <MenuControl {...justifyContent} />
-        </Box>
-        {alignContent && (
-          <Box css={{ gridArea: "alignContent" }}>
-            <MenuControl {...alignContent} />
+            alignItems: "center",
+          }}
+        >
+          <Box css={{ gridArea: "grid" }}>
+            <FlexGrid currentStyle={currentStyle} batchUpdate={batchUpdate} />
           </Box>
-        )}
-      </Grid>
+          {flexDirection?.styleConfig && (
+            <Box css={{ gridArea: "flexDirection" }}>
+              <MenuControl {...flexDirection} />
+            </Box>
+          )}
+          {flexWrap?.styleConfig && (
+            <Box css={{ gridArea: "flexWrap" }}>
+              <MenuControl {...flexWrap} />
+            </Box>
+          )}
+          {alignItems?.styleConfig && (
+            <Box css={{ gridArea: "alignItems" }}>
+              <MenuControl {...alignItems} />
+            </Box>
+          )}
+          {justifyContent?.styleConfig && (
+            <Box css={{ gridArea: "justifyContent" }}>
+              <MenuControl {...justifyContent} />
+            </Box>
+          )}
+          {alignContent && (
+            <Box css={{ gridArea: "alignContent" }}>
+              <MenuControl {...alignContent} />
+            </Box>
+          )}
+        </Grid>
+      )}
+
       <Grid
         css={{
           gridTemplateColumns: "4fr 1fr 4fr",
@@ -83,19 +104,25 @@ const LayoutSectionFlex = ({
           alignItems: "center",
         }}
       >
-        <Box css={{ gridArea: "columnGap" }}>
-          <TextControl {...columnGap} />
-        </Box>
-        <Box css={{ gridArea: "lock", px: "$1" }}>
-          <Lock
-            pairedKeys={["columnGap", "rowGap"]}
-            currentStyle={currentStyle}
-            batchUpdate={batchUpdate}
-          />
-        </Box>
-        <Box css={{ gridArea: "rowGap" }}>
-          <TextControl {...rowGap} />
-        </Box>
+        {columnGap?.styleConfig && (
+          <Box css={{ gridArea: "columnGap" }}>
+            <TextControl {...columnGap} />
+          </Box>
+        )}
+        {rowGap?.styleConfig && columnGap?.styleConfig && (
+          <Box css={{ gridArea: "lock", px: "$1" }}>
+            <Lock
+              pairedKeys={["columnGap", "rowGap"]}
+              currentStyle={currentStyle}
+              batchUpdate={batchUpdate}
+            />
+          </Box>
+        )}
+        {rowGap?.styleConfig && (
+          <Box css={{ gridArea: "rowGap" }}>
+            <TextControl {...rowGap} />
+          </Box>
+        )}
       </Grid>
     </Flex>
   );
diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx
index bed67a15b8..7501ca59fe 100644
--- a/apps/designer/app/designer/features/style-panel/style-sections.tsx
+++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx
@@ -32,7 +32,7 @@ export type RenderCategoryProps = {
   createBatchUpdate: CreateBatchUpdate;
   currentStyle: Style;
   sectionStyle: {
-    [Property in keyof Style]-?: RenderPropertyProps;
+    [Property in keyof Style]: RenderPropertyProps;
   };
   inheritedStyle: InheritedStyle;
   category: Category;