playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,115 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "value", "name", "inputId"]
+    },
+    {
+      "name": "State",
+      "props": ["checked", "disabled", "error", "multi"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant", "icon", "customIcon"]
+    },
+    {
+      "name": "Events",
+      "props": ["onChange"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unselected",
+      "props": {
+        "checked": false,
+        "text": "Option label",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "checked": true,
+        "text": "Selected option",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "checked": false,
+        "disabled": true,
+        "text": "Unavailable",
+        "name": "selectable_card_demo",
+        "value": "opt2",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "With check icon",
+      "props": {
+        "checked": true,
+        "icon": true,
+        "text": "With icon",
+        "name": "selectable_card_demo",
+        "value": "opt3",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "checked": false,
+        "multi": false,
+        "text": "Plan A",
+        "name": "plan",
+        "value": "a",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Display input variant",
+      "props": {
+        "checked": false,
+        "variant": "displayInput",
+        "text": "Display style",
+        "name": "selectable_card_demo",
+        "value": "disp1",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Error state",
+      "props": {
+        "checked": false,
+        "error": true,
+        "text": "Invalid choice",
+        "name": "selectable_card_demo",
+        "value": "err1",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "customIcon": { "requires": { "icon": true } }
+  },
+  "hints": {
+    "onchange_note": {
+      "when": {},
+      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+{
+  "template": "<SelectableCardIcon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "checkmark": false,
+    "disabled": false,
+    "multi": true
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "checked",
+        "checkmark",
+        "customIcon",
+        "dark",
+        "disabled",
+        "icon",
+        "inputId",
+        "multi",
+        "name",
+        "titleText",
+        "bodyText",
+        "value",
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,113 @@
+{
+  "template": "<SelectableIcon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "inputs": "enabled",
+    "multi": true
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon",
+        "text",
+        "name",
+        "value",
+        "inputId"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "checked",
+        "disabled",
+        "multi",
+        "inputs"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "customIcon"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unchecked",
+      "props": {
+        "icon": "user",
+        "text": "Assignee",
+        "name": "assignee",
+        "inputId": "assignee_1",
+        "value": "user1",
+        "checked": false,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Checked",
+      "props": {
+        "icon": "check-circle",
+        "text": "Confirmed",
+        "name": "status",
+        "inputId": "status_1",
+        "value": "ok",
+        "checked": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "icon": "bell",
+        "text": "Notifications",
+        "name": "notifications",
+        "inputId": "notifications_1",
+        "value": "off",
+        "checked": false,
+        "disabled": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "icon": "circle",
+        "text": "Option A",
+        "name": "radio_demo",
+        "inputId": "radio_a",
+        "value": "a",
+        "checked": true,
+        "multi": false,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Inputs hidden",
+      "props": {
+        "icon": "star",
+        "text": "Favorite",
+        "name": "fav",
+        "inputId": "fav_1",
+        "value": "fav",
+        "checked": false,
+        "inputs": "disabled",
+        "multi": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "required_ids": {
+      "when": {},
+      "message": "icon, text, name, and inputId identify the control for forms and accessibility.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["icon", "text", "name", "value", "inputId"]
+    },
+    {
+      "name": "State",
+      "props": ["checked", "disabled", "multi", "inputs"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["customIcon"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unchecked",
+      "props": {
+        "icon": "user",
+        "text": "Assignee",
+        "name": "assignee",
+        "inputId": "assignee_1",
+        "value": "user1",
+        "checked": false,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Checked",
+      "props": {
+        "icon": "check-circle",
+        "text": "Confirmed",
+        "name": "status",
+        "inputId": "status_1",
+        "value": "ok",
+        "checked": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "icon": "bell",
+        "text": "Notifications",
+        "name": "notifications",
+        "inputId": "notifications_1",
+        "value": "off",
+        "checked": false,
+        "disabled": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "icon": "circle",
+        "text": "Option A",
+        "name": "radio_demo",
+        "inputId": "radio_a",
+        "value": "a",
+        "checked": true,
+        "multi": false,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Inputs hidden",
+      "props": {
+        "icon": "star",
+        "text": "Favorite",
+        "name": "fav",
+        "inputId": "fav_1",
+        "value": "fav",
+        "checked": false,
+        "inputs": "disabled",
+        "multi": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "required_ids": {
+      "when": {},
+      "message": "icon, text, name, and inputId identify the control for forms and accessibility.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+{
+  "template": "<SelectableList{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "enableDrag": false,
+    "variant": "checkbox"
+  },
+  "groups": [
+    {
+      "name": "State",
+      "props": [
+        "variant"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "enableDrag"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Checkbox list",
+      "props": {
+        "variant": "checkbox",
+        "enableDrag": false
+      }
+    },
+    {
+      "name": "Radio list",
+      "props": {
+        "variant": "radio",
+        "enableDrag": false
+      }
+    },
+    {
+      "name": "Checkbox + drag",
+      "props": {
+        "variant": "checkbox",
+        "enableDrag": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "items_note": {
+      "when": {},
+      "message": "Add SelectableList.Item rows as children; enableDrag defers to List for reordering.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+{
+  "groups": [
+    {
+      "name": "State",
+      "props": ["variant"]
+    },
+    {
+      "name": "Behavior",
+      "props": ["enableDrag"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Checkbox list",
+      "props": { "variant": "checkbox", "enableDrag": false }
+    },
+    {
+      "name": "Radio list",
+      "props": { "variant": "radio", "enableDrag": false }
+    },
+    {
+      "name": "Checkbox + drag",
+      "props": { "variant": "checkbox", "enableDrag": true }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "items_note": {
+      "when": {},
+      "message": "Add SelectableList.Item rows as children; enableDrag defers to List for reordering.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+{
+  "template": "<SkeletonLoading{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "stack": 1,
+    "color": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "height",
+        "width",
+        "borderRadius",
+        "gap",
+        "stack",
+        "color",
+        "dark"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,27 @@
+{
+  "template": "<Source{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "hideIcon": false,
+    "type": "inbound"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "hideIcon",
+        "source",
+        "type",
+        "user"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,128 @@
+{
+  "template": "<StarRating{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "layoutOption": "default",
+    "rating": 0,
+    "denominator": 5,
+    "colorOption": "yellow",
+    "backgroundType": "fill",
+    "size": "sm",
+    "variant": "display"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "icon"
+      ]
+    },
+    {
+      "name": "Rating",
+      "props": [
+        "rating",
+        "denominator",
+        "variant",
+        "onClick"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "layoutOption",
+        "colorOption",
+        "backgroundType",
+        "size",
+        "fixedWidth"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Empty",
+      "props": {
+        "rating": 0,
+        "denominator": 5,
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Half / partial",
+      "props": {
+        "rating": 2.5,
+        "denominator": 5,
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Full score",
+      "props": {
+        "rating": 5,
+        "denominator": 5,
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Out of 10",
+      "props": {
+        "rating": 8,
+        "denominator": 10,
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Number layout",
+      "props": {
+        "rating": 4.2,
+        "denominator": 5,
+        "layoutOption": "number",
+        "variant": "display",
+        "size": "md"
+      }
+    },
+    {
+      "name": "One star highlight",
+      "props": {
+        "rating": 1,
+        "denominator": 5,
+        "layoutOption": "onestar",
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Primary color",
+      "props": {
+        "rating": 4,
+        "denominator": 5,
+        "colorOption": "primary",
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Interactive",
+      "props": {
+        "rating": 0,
+        "denominator": 5,
+        "variant": "interactive",
+        "onClick": "(n) => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "onClick": {
+      "requires": {
+        "variant": "interactive"
+      }
+    }
+  },
+  "hints": {
+    "interactive_click": {
+      "when": {
+        "variant": "interactive"
+      },
+      "message": "Interactive mode calls onClick with the star index; rating is controlled by your handler.",
+      "type": "info"
+    }
+  }
+}