playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_flex/docs/_playground.overrides.json

@@ -1,105 +1,365 @@
 {
+  "structureModes": {
+    "default": "basic",
+    "modes": {
+      "basic": {
+        "label": "Basic",
+        "template": "<div className=\"flex-doc-example\">\n  <Flex{{props}}>\n    {{children}}\n  </Flex>\n</div>",
+        "children": "<Caption text=\"A\" />\n<Caption text=\"B\" />\n<Caption text=\"C\" />"
+      },
+      "flex_items": {
+        "label": "FlexItem Children",
+        "template": "<div className=\"flex-doc-example\">\n  <Flex{{props}}>\n    {{children}}\n  </Flex>\n</div>",
+        "children": "<FlexItem>\n  {'1'}\n</FlexItem>\n<FlexItem>\n  {'2'}\n</FlexItem>\n<FlexItem>\n  {'3'}\n</FlexItem>\n<FlexItem>\n  {'4'}\n</FlexItem>",
+        "props": {
+          "gap": "xs"
+        }
+      },
+      "controlled_flex_item": {
+        "label": "FlexItem Props",
+        "template": "<div className=\"flex-doc-example\">\n  <Flex{{props}}>\n    <FlexItem{{FlexItem.props}}>\n      {{children}}\n    </FlexItem>\n    <FlexItem>\n      {'2'}\n    </FlexItem>\n    <FlexItem>\n      {'3'}\n    </FlexItem>\n  </Flex>\n</div>",
+        "children": "{'1'}",
+        "props": {
+          "gap": "xs"
+        }
+      }
+    }
+  },
   "children": {
-    "default": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+    "editable": true,
+    "default": "<Caption text=\"A\" />\n<Caption text=\"B\" />\n<Caption text=\"C\" />"
+  },
+  "customProps": {
+    "flexItemFixedSize": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "flexItemGrow": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "flexItemShrink": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "flexItemFlex": {
+      "type": "number",
+      "platforms": ["react"]
+    },
+    "flexItemOrder": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "first",
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12"
+      ]
+    },
+    "flexItemAlignSelf": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "start",
+        "end",
+        "center",
+        "stretch"
+      ]
+    },
+    "flexItemDisplayFlex": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    }
+  },
+  "propTargets": {
+    "flexItemFixedSize": "FlexItem.props",
+    "flexItemGrow": "FlexItem.props",
+    "flexItemShrink": "FlexItem.props",
+    "flexItemFlex": "FlexItem.props",
+    "flexItemOrder": "FlexItem.props",
+    "flexItemAlignSelf": "FlexItem.props",
+    "flexItemDisplayFlex": "FlexItem.props"
+  },
+  "propAliases": {
+    "flexItemFixedSize": "fixedSize",
+    "flexItemGrow": "grow",
+    "flexItemShrink": "shrink",
+    "flexItemFlex": "flex",
+    "flexItemOrder": "order",
+    "flexItemAlignSelf": "alignSelf",
+    "flexItemDisplayFlex": "displayFlex"
   },
   "groups": [
     {
-      "name": "Direction & flow",
-      "props": ["orientation", "reverse", "wrap", "inline"]
+      "name": "Direction & Flow",
+      "props": [
+        "orientation",
+        "reverse",
+        "wrap",
+        "inline"
+      ]
+    },
+    {
+      "name": "Primary Axis",
+      "props": [
+        "horizontal",
+        "justify",
+        "spacing"
+      ]
+    },
+    {
+      "name": "Cross Axis",
+      "props": [
+        "vertical",
+        "align",
+        "alignSelf"
+      ]
     },
     {
-      "name": "Primary axis",
-      "props": ["horizontal", "justify", "spacing"]
+      "name": "Gap",
+      "props": [
+        "gap",
+        "rowGap",
+        "columnGap"
+      ]
     },
     {
-      "name": "Cross axis",
-      "props": ["vertical", "align", "alignSelf"]
+      "name": "FlexItem Props",
+      "props": [
+        "flexItemFixedSize",
+        "flexItemGrow",
+        "flexItemShrink",
+        "flexItemFlex",
+        "flexItemOrder",
+        "flexItemAlignSelf",
+        "flexItemDisplayFlex"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Row (start)",
+      "name": "Row",
+      "structureMode": "basic",
       "props": {
-        "orientation": "row",
-        "justify": "none",
         "horizontal": "left",
+        "justify": "none",
+        "orientation": "row",
         "vertical": "top"
       },
-      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+      "children": "<Caption text=\"A\" />\n<Caption text=\"B\" />\n<Caption text=\"C\" />"
     },
     {
       "name": "Column",
+      "structureMode": "basic",
       "props": {
-        "orientation": "column",
-        "justify": "none",
         "horizontal": "left",
+        "justify": "none",
+        "orientation": "column",
         "vertical": "top"
       },
-      "children": "<Caption text=\"One\" /><Caption text=\"Two\" /><Caption text=\"Three\" />"
+      "children": "<Caption text=\"One\" />\n<Caption text=\"Two\" />\n<Caption text=\"Three\" />"
     },
     {
       "name": "Centered",
+      "structureMode": "basic",
       "props": {
-        "orientation": "row",
         "justify": "center",
+        "orientation": "row",
         "vertical": "center"
       },
       "children": "<Caption text=\"Centered\" />"
     },
     {
-      "name": "Space between",
+      "name": "Space Between",
+      "structureMode": "basic",
       "props": {
-        "orientation": "row",
         "justify": "between",
+        "orientation": "row",
         "vertical": "center"
       },
-      "children": "<Caption text=\"Left\" /><Caption text=\"Right\" />"
+      "children": "<Caption text=\"Left\" />\n<Caption text=\"Right\" />"
     },
     {
-      "name": "Space around",
+      "name": "Wrap",
+      "structureMode": "flex_items",
       "props": {
+        "gap": "xs",
+        "justify": "start",
         "orientation": "row",
-        "justify": "around",
-        "vertical": "center"
+        "wrap": true
       },
-      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+      "children": "<FlexItem fixedSize=\"160px\">\n  {'Item 1'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 2'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 3'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 4'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 5'}\n</FlexItem>"
     },
     {
-      "name": "End aligned",
+      "name": "Gap",
+      "structureMode": "flex_items",
       "props": {
+        "gap": "sm",
         "orientation": "row",
-        "justify": "end",
-        "vertical": "center"
+        "wrap": true
       },
-      "children": "<Caption text=\"Trailing\" />"
+      "children": "<FlexItem>{'1'}</FlexItem>\n<FlexItem>{'2'}</FlexItem>\n<FlexItem>{'3'}</FlexItem>\n<FlexItem>{'4'}</FlexItem>"
     },
     {
-      "name": "Wrap",
+      "name": "Responsive Gap",
+      "structureMode": "flex_items",
       "props": {
+        "gap": {
+          "xs": "none",
+          "sm": "sm",
+          "md": "md",
+          "lg": "lg",
+          "xl": "xl"
+        },
         "orientation": "row",
-        "wrap": true,
-        "justify": "start"
+        "wrap": true
       },
-      "children": "<Caption text=\"Item 1\" /><Caption text=\"Item 2\" /><Caption text=\"Item 3\" /><Caption text=\"Item 4\" />"
+      "children": "<FlexItem fixedSize=\"96px\">{'1'}</FlexItem>\n<FlexItem fixedSize=\"96px\">{'2'}</FlexItem>\n<FlexItem fixedSize=\"96px\">{'3'}</FlexItem>\n<FlexItem fixedSize=\"96px\">{'4'}</FlexItem>"
     },
     {
-      "name": "Inline flex",
+      "name": "FlexItem Grow",
+      "structureMode": "controlled_flex_item",
       "props": {
-        "inline": true,
-        "orientation": "row",
-        "vertical": "center"
+        "flexItemGrow": true,
+        "gap": "xs"
       },
-      "children": "<Caption text=\"Inline\" /> <Caption text=\"chips\" />"
+      "children": "{'I grow'}"
     },
     {
-      "name": "Column (center items)",
+      "name": "FlexItem Fixed Size",
+      "structureMode": "controlled_flex_item",
       "props": {
-        "orientation": "column",
-        "align": "center"
+        "flexItemFixedSize": "240px",
+        "gap": "xs"
       },
-      "children": "<Caption text=\"Stacked\" /><Caption text=\"centered\" />"
+      "children": "{'240px'}"
+    },
+    {
+      "name": "FlexItem Order",
+      "structureMode": "controlled_flex_item",
+      "props": {
+        "flexItemOrder": "4",
+        "gap": "xs"
+      },
+      "children": "{'1'}"
+    },
+    {
+      "name": "FlexItem Align Self",
+      "structureMode": "controlled_flex_item",
+      "props": {
+        "flexItemAlignSelf": "center",
+        "gap": "xs",
+        "vertical": "stretch"
+      },
+      "children": "{'center'}"
+    },
+    {
+      "name": "Display FlexItem",
+      "structureMode": "controlled_flex_item",
+      "props": {
+        "flexItemDisplayFlex": true,
+        "gap": "xs"
+      },
+      "children": "<FlexItem>\n  {'We'}\n</FlexItem>\n<FlexItem>\n  {'Are'}\n</FlexItem>\n<FlexItem>\n  {'Being'}\n</FlexItem>\n<FlexItem>\n  {'Flexed'}\n</FlexItem>"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "propSyncOnEnable": {
+    "flexItemFixedSize": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemGrow": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemShrink": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemFlex": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemOrder": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemAlignSelf": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemDisplayFlex": {
+      "structureMode": "controlled_flex_item"
+    }
+  },
+  "hints": {
+    "row": {
+      "presetName": "Row",
+      "message": "Row is the default Flex direction and keeps editable children as direct children of Flex.",
+      "type": "info"
+    },
+    "column": {
+      "presetName": "Column",
+      "message": "Column stacks the same editable children vertically.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Centered combines justify=\"center\" with vertical=\"center\" for centered row content.",
+      "type": "info"
+    },
+    "space_between": {
+      "presetName": "Space Between",
+      "message": "Space Between spreads the first and last children across the primary axis.",
+      "type": "info"
+    },
+    "wrap": {
+      "presetName": "Wrap",
+      "message": "Wrap uses fixed-size FlexItem children so wrapping behavior is visible as the preview width changes.",
+      "type": "info"
+    },
+    "gap": {
+      "presetName": "Gap",
+      "message": "Gap applies spacing between FlexItem children without adding margins to the child content.",
+      "type": "info"
+    },
+    "responsive_gap": {
+      "presetName": "Responsive Gap",
+      "message": "Responsive Gap passes a breakpoint object to gap for different spacing at different viewport widths.",
+      "type": "info"
+    },
+    "flexitem_grow": {
+      "presetName": "FlexItem Grow",
+      "message": "FlexItem Grow toggles the first FlexItem's grow prop through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "flexitem_fixed_size": {
+      "presetName": "FlexItem Fixed Size",
+      "message": "FlexItem Fixed Size applies fixedSize to the first FlexItem through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "flexitem_order": {
+      "presetName": "FlexItem Order",
+      "message": "FlexItem Order applies visual ordering to the first FlexItem through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "flexitem_align_self": {
+      "presetName": "FlexItem Align Self",
+      "message": "FlexItem Align Self applies cross-axis alignment to the first FlexItem through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "display_flexitem": {
+      "presetName": "Display FlexItem",
+      "message": "Display FlexItem makes the first FlexItem act as a flex container for its editable children.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -131,23 +131,24 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
-  <%# form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
-  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
+  <%= form.typeahead :example_typeahead_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_required_indicator_custom, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.email_field :example_email_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.number_field :example_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.search_field :example_search_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.password_field :example_password_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.url_field :example_url_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_required_indicator_custom, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.dropdown_field :example_dropdown_required_indicator, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
+  <%= form.dropdown_field :example_dropdown_required_indicator_multi, props: { label: "Dropdown Custom Label", options: example_dropdown_options, multi_select: true, required: true, required_indicator: true } %>
   <%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
-  <%= form.select :example_select_required_indicator_2, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
+  <%= form.select :example_select_required_indicator_custom, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
+  <%# form.check_box :example_checkbox_required_indicator, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
+  <%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Date Picker Custom Label", required: true, required_indicator: true } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
     label: true,
     margin_y: 'sm',
@@ -156,14 +157,14 @@
     tree_data: tree_data
   } %>
   <%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
-    label: "Custom Multi Level Select Label",
+    label: "Multi Level Select Custom Label",
     margin_y: 'sm',
     required: true,
     required_indicator: true,
     tree_data: tree_data
   } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
-  <%= form.dropdown_field :example_dropdown_2, props: { label: "Dropdown Custom Label", options: example_dropdown_options, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator_custom, props: { label: "Time Picker Custom Label", required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_playground.json

@@ -1,13 +1 @@
-{
-  "template": "<Form{{props}} />",
-  "propTargets": {},
-  "defaults": {},
-  "presets": [
-    {
-      "name": "Default",
-      "props": {}
-    }
-  ],
-  "conditionals": {},
-  "hints": {}
-}
+null

data/app/pb_kits/playbook/pb_form_group/docs/_playground.json

@@ -1,12 +1,12 @@
 {
-  "template": "<FormGroup{{props}} />",
+  "template": "<FormGroup{{props}}>\n{{children}}\n</FormGroup>",
   "propTargets": {},
   "defaults": {
     "fullWidth": false
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Layout",
       "props": [
         "fullWidth"
       ]
@@ -14,10 +14,87 @@
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Text Inputs",
+      "props": {},
+      "children": "<TextInput\n    id=\"first-name\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+    },
+    {
+      "name": "Full Width",
+      "props": {
+        "fullWidth": true
+      },
+      "children": "<TextInput\n    id=\"first-name-full-width\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial-full-width\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name-full-width\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+    },
+    {
+      "name": "Search Button",
+      "props": {},
+      "children": "<TextInput\n    id=\"search-with-action\"\n    label=\"Search\"\n    name=\"search\"\n    onChange={handleFieldChange}\n    placeholder=\"Search\"\n    value={formFields.search}\n/>\n<Button\n    onClick={() => alert(\"Button clicked!\")}\n    text=\"Submit\"\n    variant=\"secondary\"\n/>"
+    },
+    {
+      "name": "Select",
+      "props": {},
+      "children": "<TextInput\n    id=\"artist-name\"\n    name=\"artistName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter Artist Name\"\n    value={formFields.artistName || \"\"}\n/>\n<Select\n    blankSelection=\"Genre\"\n    name=\"genre\"\n    options={[\n      { value: \"Country\" },\n      { value: \"Pop\" },\n      { value: \"Rock\" },\n      { value: \"Hip-Hop/Rap\" }\n    ]}\n/>"
+    },
+    {
+      "name": "Date Picker",
+      "props": {},
+      "children": "<TextInput\n    id=\"event-name\"\n    label=\"Event\"\n    name=\"eventName\"\n    onChange={handleFieldChange}\n    placeholder=\"Event Name\"\n    value={formFields.eventName}\n/>\n<DatePicker\n    label=\"Event Date\"\n    pickerId=\"form-group-event-date\"\n/>"
+    },
+    {
+      "name": "Typeahead Action",
+      "props": {},
+      "children": "<Typeahead\n    id=\"products\"\n    label=\"Products\"\n    options={[\n      { label: \"Windows\", value: \"windows\" },\n      { label: \"Roof\", value: \"roof\" },\n      { label: \"Siding\", value: \"siding\" },\n      { label: \"Doors\", value: \"doors\" }\n    ]}\n/>\n<Button\n    onClick={() => alert(\"Product added!\")}\n    text=\"Add\"\n    variant=\"secondary\"\n/>"
+    },
+    {
+      "name": "Selectable Cards",
+      "props": {},
+      "children": "<SelectableCard\n    checked={formFields.animal === \"cat\"}\n    inputId=\"cat-option\"\n    multi={false}\n    name=\"animal\"\n    onChange={handleAnimalChange}\n    value=\"cat\"\n>\n  Cat\n</SelectableCard>\n<SelectableCard\n    checked={formFields.animal === \"dog\"}\n    inputId=\"dog-option\"\n    multi={false}\n    name=\"animal\"\n    onChange={handleAnimalChange}\n    value=\"dog\"\n>\n  Dog\n</SelectableCard>"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "text_inputs": {
+      "presetName": "Text Inputs",
+      "message": "Text Inputs uses state-backed child inputs so the playground fields stay editable.",
+      "type": "info"
+    },
+    "full_width": {
+      "presetName": "Full Width",
+      "message": "Full Width applies fullWidth to the FormGroup while leaving each child input editable.",
+      "type": "info"
+    },
+    "search_button": {
+      "presetName": "Search Button",
+      "message": "Search Button pairs a controlled text field with an action button in the same group.",
+      "type": "info"
+    },
+    "select": {
+      "presetName": "Select",
+      "message": "Select shows mixed children inside the group, with the options array kept directly in editable children.",
+      "type": "info"
+    },
+    "date_picker": {
+      "presetName": "Date Picker",
+      "message": "Date Picker combines a text input with a picker child, including the pickerId required by the kit.",
+      "type": "info"
+    },
+    "typeahead_action": {
+      "presetName": "Typeahead Action",
+      "message": "Typeahead Action mirrors the docs pattern of a searchable Typeahead plus an adjacent button.",
+      "type": "info"
+    },
+    "selectable_cards": {
+      "presetName": "Selectable Cards",
+      "message": "Selectable Cards keeps both card options in children so each option can be edited together.",
+      "type": "info"
+    }
+  },
+  "wrapper": "const FormGroupPlayground = () => {\n  const [formFields, setFormFields] = useState({\n    firstName: \"Jane\",\n    middleInitial: \"Q\",\n    lastName: \"Doe\",\n    search: \"\",\n    eventName: \"Planning session\",\n    animal: \"cat\"\n  })\n\n  const handleFieldChange = ({ target }) => {\n    setFormFields({ ...formFields, [target.name]: target.value })\n  }\n\n  const handleAnimalChange = ({ target }) => {\n    setFormFields({ ...formFields, animal: target.value })\n  }\n\n  return {{component}}\n}\n\n<FormGroupPlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "children": {
+    "editable": true,
+    "default": "<TextInput\n    id=\"first-name\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+  }
 }