Merge branch 'main' into chore/switch-lost-pixel-to-legacy

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

@@ -183,10 +183,12 @@ export function Control({
   onChangePropValue,
 }: ControlProps) {
   const meta = getComponentMetaProps(component);
-  const argType = meta[userProp.prop as keyof typeof meta];
 
-  const defaultValue = argType.defaultValue;
-  const type = argType.type;
+  const argType = meta[userProp.prop];
+
+  // argType can be undefined in case of new property created
+  const defaultValue = argType?.defaultValue ?? "";
+  const type = argType?.type ?? "text";
 
   if (type == null) {
     warnOnce(
@@ -239,12 +241,12 @@ export function Control({
   }
 
   if (
-    argType.type === "radio" ||
-    argType.type === "inline-radio" ||
-    argType.type === "check" ||
-    argType.type === "inline-check" ||
-    argType.type === "multi-select" ||
-    argType.type === "select"
+    argType?.type === "radio" ||
+    argType?.type === "inline-radio" ||
+    argType?.type === "check" ||
+    argType?.type === "inline-check" ||
+    argType?.type === "multi-select" ||
+    argType?.type === "select"
   ) {
     const options = argType.options;
 

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

@@ -81,7 +81,7 @@ export const AllProps: ComponentStoryObj<typeof PropsPanel> = {
           return {
             id: prop,
             prop,
-            value: value.defaultValue,
+            value: value?.defaultValue ?? "",
           } as UserProp;
         }),
       },

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

@@ -142,7 +142,8 @@ const Property = ({
             const argType = meta[name as keyof typeof meta];
 
             const defaultValue =
-              argType?.defaultValue ?? argType?.type === "boolean" ? false : "";
+              argType?.defaultValue ??
+              (argType?.type === "boolean" ? false : "");
 
             onChangePropName(name, defaultValue);
           }
@@ -151,7 +152,7 @@ const Property = ({
           const argType = meta[name as keyof typeof meta];
 
           const defaultValue =
-            argType?.defaultValue ?? argType?.type === "boolean" ? false : "";
+            argType?.defaultValue ?? (argType?.type === "boolean" ? false : "");
 
           onChangePropName(name, defaultValue);
         }}

apps/designer/app/designer/features/props-panel/use-props-logic.ts

@@ -39,7 +39,7 @@ const getRequiredProps = (
   const { component } = selectedInstanceData;
   const meta = getComponentMetaProps(component);
   return Object.entries(meta)
-    .filter(([_, value]) => value.required)
+    .filter(([_, value]) => value?.required)
     .map(([prop, _]) => ({
       id: ObjectId().toString(),
       prop,
@@ -56,10 +56,9 @@ const getPropsWithDefaultValue = (
   const { component } = selectedInstanceData;
   const meta = getComponentMetaProps(component);
   return Object.entries(meta)
-    .filter(([_, value]) => value.defaultValue != null)
+    .filter(([_, value]) => value?.defaultValue != null)
     .map(([prop, propObj]) => {
-      const { defaultValue } = propObj;
-      const value = defaultValue ?? "";
+      const value = propObj?.defaultValue ?? "";
       return {
         id: ObjectId().toString(),
         prop,

packages/react-sdk/src/components/meta.ts

@@ -58,7 +58,7 @@ type MetaProp =
       options: string[];
     };
 
-type MetaProps = Record<string, MetaProp>;
+type MetaProps = { [p in string]?: MetaProp };
 
 export const getComponentMetaProps = (name: keyof typeof meta): MetaProps => {
   return meta[name] as MetaProps;