wip csf

app/designer/features/props-panel/index.ts

@@ -1 +1 @@
-export * from "./settings-panel";
+export * from "./props-panel";

app/designer/features/props-panel/props-panel.tsx

@@ -1,14 +1,104 @@
-import { type UserProp, type Publish } from "@webstudio-is/sdk";
+import {
+  type UserProp,
+  type Publish,
+  components,
+  componentsMeta,
+  type Instance,
+} from "@webstudio-is/sdk";
 import { CollapsibleSection, ComponentInfo } from "~/designer/shared/inspector";
-import { TextField, Flex, Button, Box } from "~/shared/design-system";
+import {
+  TextField,
+  Flex,
+  Label,
+  Button,
+  Box,
+  Radio,
+  RadioGroup,
+} from "~/shared/design-system";
 import { PlusIcon, TrashIcon } from "~/shared/icons";
 import type { SelectedInstanceData } from "~/shared/component";
 import { usePropsLogic } from "./use-props-logic";
+//console.log(componentsMeta, components);
+
+type ControlProps = {
+  defaultValue?: UserProp["value"];
+  value: UserProp["value"];
+  onChangeValue: any; // (value: string) => void;
+};
+
+const TextControl = ({ value, defaultValue, onChangeValue }: ControlProps) => (
+  <TextField
+    variant="ghost"
+    placeholder="Value"
+    name="value"
+    value={value || defaultValue}
+    onChange={(event) => {
+      onChangeValue(event.target.value);
+    }}
+  />
+);
+
+const RadioControl = ({
+  value,
+  options,
+  defaultValue,
+  onChangeValue,
+}: ControlProps & { options: Array<string> }) => (
+  <RadioGroup
+    css={{ flexDirection: "column" }}
+    name="value"
+    value={value || defaultValue}
+    onChangeValue={onChangeValue}
+  >
+    {options.map((value) => (
+      <Flex align="center" gap="1">
+        <Radio value={value} />
+        <Label>{value}</Label>
+      </Flex>
+    ))}
+  </RadioGroup>
+);
+
+const controls = {
+  text: TextControl,
+  radio: RadioControl,
+};
+
+const renderControl = ({
+  component,
+  prop,
+  ...props
+}: ControlProps & {
+  component: Instance["component"];
+  prop: UserProp["prop"];
+}) => {
+  const meta = componentsMeta[component];
+  const argType = meta?.argTypes[prop];
+  console.log(prop, meta, argType);
+
+  switch (argType?.control) {
+    case "text": {
+      return <TextControl {...props} defaultValue={argType.defaultValue} />;
+    }
+    case "radio": {
+      return (
+        <RadioControl
+          {...props}
+          defaultValue={argType.defaultValue}
+          options={argType.options}
+        />
+      );
+    }
+  }
+
+  return <TextControl {...props} />;
+};
 
 type PropertyProps = {
   id: UserProp["id"];
   prop: UserProp["prop"];
   value: UserProp["value"];
+  component: Instance["component"];
   onChange: (
     id: UserProp["id"],
     field: keyof UserProp,
@@ -17,7 +107,14 @@ type PropertyProps = {
   onDelete: (id: UserProp["id"]) => void;
 };
 
-const Property = ({ id, prop, value, onChange, onDelete }: PropertyProps) => {
+const Property = ({
+  id,
+  prop,
+  value,
+  component,
+  onChange,
+  onDelete,
+}: PropertyProps) => {
   return (
     <Flex gap="1">
       <TextField
@@ -29,15 +126,14 @@ const Property = ({ id, prop, value, onChange, onDelete }: PropertyProps) => {
           onChange(id, "prop", event.target.value);
         }}
       />
-      <TextField
-        variant="ghost"
-        placeholder="Value"
-        name="value"
-        value={value}
-        onChange={(event) => {
-          onChange(id, "value", event.target.value);
-        }}
-      />
+      {renderControl({
+        prop,
+        component,
+        value,
+        onChangeValue(value: string) {
+          onChange(id, "value", value);
+        },
+      })}
       <Button
         ghost
         onClick={() => {
@@ -50,15 +146,15 @@ const Property = ({ id, prop, value, onChange, onDelete }: PropertyProps) => {
   );
 };
 
-type StylePanelProps = {
+type PropsPanelProps = {
   publish: Publish;
   selectedInstanceData?: SelectedInstanceData;
 };
 
-export const SettingsPanel = ({
+export const PropsPanel = ({
   selectedInstanceData,
   publish,
-}: StylePanelProps) => {
+}: PropsPanelProps) => {
   const { userProps, addEmptyProp, handleChangeProp, handleDeleteProp } =
     usePropsLogic({ selectedInstanceData, publish });
 
@@ -93,6 +189,7 @@ export const SettingsPanel = ({
               id={id}
               prop={prop}
               value={value}
+              component={selectedInstanceData.component}
               onChange={handleChangeProp}
               onDelete={handleDeleteProp}
             />

app/shared/design-system/index.ts

@@ -53,3 +53,4 @@ export { Switch } from "./components/switch";
 export { Panel } from "./components/panel";
 export * from "./components/slider";
 export * from "./components/control-group";
+export * from "./components/radio";

app/shared/string-utils/index.ts

@@ -0,0 +1,6 @@
+import snakeCase from "lodash.snakecase";
+import capitalize from "lodash.capitalize";
+
+export const humanizeString = (string: string): string => {
+  return snakeCase(string).split("_").map(capitalize).join(" ");
+};

app/shared/style-panel-configs/configs.ts

@@ -1,5 +1,3 @@
-import snakeCase from "lodash.snakecase";
-import capitalize from "lodash.capitalize";
 import {
   properties,
   categories,
@@ -8,10 +6,7 @@ import {
   type StyleProperty,
 } from "@webstudio-is/sdk";
 import type { StyleConfig, Control } from "./types";
-
-const humanizeString = (string: string): string => {
-  return snakeCase(string).split("_").map(capitalize).join(" ");
-};
+import { humanizeString } from "../string-utils";
 
 type Property = keyof typeof keywordValues;