docs: use clearer example for dynamic fields

measuredco · Jun 4, 2024 · 9b20506 · 9b20506
1 parent b0469a1
commit 9b20506
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 63 deletions.
diff --git a/apps/docs/pages/docs/api-reference/configuration/component-config.mdx b/apps/docs/pages/docs/api-reference/configuration/component-config.mdx
@@ -318,49 +318,79 @@ Dynamically set the fields for this component. Can be used to make asynchronous
 
 This function is triggered when the component data changes.
 
-```tsx {4-15} copy filename="Example changing one field based on another"
+```tsx {4-25} copy filename="Example changing one field based on another"
 const config = {
   components: {
     MyComponent: {
-      resolveFields: (data) => ({
-        fieldType: {
-          type: "radio",
-          options: [
-            { label: "Text", value: "text" },
-            { label: "Textarea", value: "textarea" },
-          ],
-        },
-        title: {
-          type: data.props.fieldType,
-        },
-      }),
-      render: ({ title }) => <h1>{title}</h1>,
+      resolveFields: (data) => {
+        const fields = {
+          drink: {
+            type: "radio",
+            options: [
+              { label: "Water", value: "water" },
+              { label: "Orange juice", value: "orange-juice" },
+            ],
+          },
+        };
+
+        if (data.props.drink === "water") {
+          return {
+            ...fields,
+            waterType: {
+              // ... Define field
+            },
+          };
+        }
+
+        return fields;
+      },
+      // ...
     },
   },
 };
 ```
 
 <ConfigPreview
-  label='Try changing the "title" field'
+  label='Try changing the "drink" field'
   componentConfig={{
-    resolveFields: (data) => ({
-      fieldType: {
-        type: "radio",
-        options: [
-          { label: "Text", value: "text" },
-          { label: "Textarea", value: "textarea" },
-        ],
-      },
-      title: {
-        type: data.props.fieldType,
-      },
-    }),
+    resolveFields: (data) => {
+      const fields = {
+        drink: {
+          type: "radio",
+          options: [
+            { label: "Water", value: "water" },
+            { label: "Orange juice", value: "orange-juice" },
+          ],
+        },
+      };
+
+      if (data.props.drink === "water") {
+        return {
+          ...fields,
+          waterType: {
+            type: "radio",
+            options: [
+              { label: "Still", value: "still" },
+              { label: "Sparkling", value: "sparkling" },
+            ],
+          },
+        };
+      }
+
+      return fields;
+    },
     defaultProps: {
-      fieldType: "text",
-      title: "Hello, world",
+      drink: "water",
+      waterType: "still",
     },
-    render: ({ title }) => <p>{title}</p>,
-  }}
+    render: ({ drink, waterType }) => (
+      <p>
+        {drink}
+        {drink === "water" ? ` (${waterType})` : ""}
+      </p>
+    ),
+
+}}
 />
 
 #### Args

diff --git a/apps/docs/pages/docs/integrating-puck/dynamic-fields.mdx b/apps/docs/pages/docs/integrating-puck/dynamic-fields.mdx
@@ -10,49 +10,79 @@ The [`resolveFields` function](/docs/api-reference/configuration/component-confi
 
 For example, we can set the configuration of one field based on the prop value of another:
 
-```tsx {4-15} showLineNumbers copy
+```tsx {4-25} showLineNumbers copy
 const config = {
   components: {
     MyComponent: {
-      resolveFields: (data) => ({
-        fieldType: {
-          type: "radio",
-          options: [
-            { label: "Text", value: "text" },
-            { label: "Textarea", value: "textarea" },
-          ],
-        },
-        value: {
-          type: data.props.fieldType,
-        },
-      }),
-      render: ({ value }) => <h1>{value}</h1>,
+      resolveFields: (data) => {
+        const fields = {
+          drink: {
+            type: "radio",
+            options: [
+              { label: "Water", value: "water" },
+              { label: "Orange juice", value: "orange-juice" },
+            ],
+          },
+        };
+
+        if (data.props.drink === "water") {
+          return {
+            ...fields,
+            waterType: {
+              // ... Define field
+            },
+          };
+        }
+
+        return fields;
+      },
+      // ...
     },
   },
 };
 ```
 
 <ConfigPreview
-  label='Try changing the "title" field'
+  label='Try changing the "drink" field'
   componentConfig={{
-    resolveFields: (data) => ({
-      fieldType: {
-        type: "radio",
-        options: [
-          { label: "Text", value: "text" },
-          { label: "Textarea", value: "textarea" },
-        ],
-      },
-      title: {
-        type: data.props.fieldType,
-      },
-    }),
+    resolveFields: (data) => {
+      const fields = {
+        drink: {
+          type: "radio",
+          options: [
+            { label: "Water", value: "water" },
+            { label: "Orange juice", value: "orange-juice" },
+          ],
+        },
+      };
+
+      if (data.props.drink === "water") {
+        return {
+          ...fields,
+          waterType: {
+            type: "radio",
+            options: [
+              { label: "Still", value: "still" },
+              { label: "Sparkling", value: "sparkling" },
+            ],
+          },
+        };
+      }
+
+      return fields;
+    },
     defaultProps: {
-      fieldType: "text",
-      title: "Hello, world",
+      drink: "water",
+      waterType: "still",
     },
-    render: ({ title }) => <p>{title}</p>,
-  }}
+    render: ({ drink, waterType }) => (
+      <p>
+        {drink}
+        {drink === "water" ? ` (${waterType})` : ""}
+      </p>
+    ),
+
+}}
 />
 
 ### Making asynchronous calls
@@ -86,7 +116,7 @@ const config = {
           },
         };
       },
-      render: ({ value }) => <h1>{value}</h1>,
+      render: ({ item }) => <h1>{item}</h1>,
     },
   },
 };