Fix issues.

Closes #151
Closes #152
Closes #153

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

@@ -7,8 +7,8 @@ import {
 import { Control } from "~/designer/features/props-panel/control";
 import { CollapsibleSection, ComponentInfo } from "~/designer/shared/inspector";
 import type { SelectedInstanceData } from "~/shared/canvas-components";
-import { Box, Button, Grid, TextField } from "~/shared/design-system";
-import { PlusIcon, TrashIcon } from "~/shared/icons";
+import { Box, Button, Grid, TextField, Tooltip } from "~/shared/design-system";
+import { PlusIcon, TrashIcon, ExclamationTriangleIcon } from "~/shared/icons";
 import { handleChangePropType, usePropsLogic } from "./use-props-logic";
 
 type PropertyProps = UserProp & {
@@ -27,12 +27,22 @@ const Property = ({
   onDelete,
 }: PropertyProps) => {
   const meta = componentsMeta[component];
-  const argType = meta?.argTypes?.[prop as keyof typeof meta.argTypes];
-  const type = argType?.control.type;
+  if (!meta) {
+    return "Unknown component";
+  }
+  const argType = meta.argTypes?.[prop as keyof typeof meta.argTypes];
+  const isInvalidProp =
+    prop.length > 0 &&
+    typeof argType === "undefined" &&
+    !prop.match(/^data-(.)+/);
+  const type = argType?.control.type || "text";
   const defaultValue = argType?.control.defaultValue;
   const options = argType?.options;
   return (
-    <Grid gap="1" css={{ gridTemplateColumns: "auto 1fr auto" }}>
+    <Grid
+      gap="1"
+      css={{ gridTemplateColumns: "1fr 1fr auto", alignItems: "center" }}
+    >
       <TextField
         readOnly={required}
         variant="ghost"
@@ -43,14 +53,20 @@ const Property = ({
           onChange(id, "prop", event.target.value);
         }}
       />
-      <Control
-        type={type}
-        required={required}
-        defaultValue={defaultValue}
-        options={options}
-        value={value}
-        onChange={(value: UserProp["value"]) => onChange(id, "value", value)}
-      />
+      {!isInvalidProp ? (
+        <Control
+          type={type}
+          required={required}
+          defaultValue={defaultValue}
+          options={options}
+          value={value}
+          onChange={(value: UserProp["value"]) => onChange(id, "value", value)}
+        />
+      ) : (
+        <Tooltip content={`Invalid property name: ${prop}`}>
+          <ExclamationTriangleIcon width={12} height={12} />
+        </Tooltip>
+      )}
       <Button
         ghost
         disabled={required}