playbook_ui_docs 16.6.0 → 16.7.0.pre.rc.0

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

@@ -0,0 +1,60 @@
+{
+  "template": "<TitleDetail{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "title": "Revenue",
+    "detail": "$2,000 MRR · 15% vs last month"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "title",
+        "detail"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "title": "Revenue",
+        "detail": "$2,000 MRR · 15% vs last month",
+        "align": "left"
+      }
+    },
+    {
+      "name": "KPI summary",
+      "props": {
+        "title": "Pipeline",
+        "detail": "1,428 qualified leads",
+        "align": "left"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "title": "Uptime",
+        "detail": "99.95% last 30 days",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "title": "Spend",
+        "detail": "Within budget",
+        "align": "right"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,19 @@
+{
+  "defaults": {
+    "align": "left",
+    "title": "Revenue",
+    "detail": "$2,000 MRR · 15% vs last month"
+  },
+  "groups": [
+    { "name": "Content", "props": ["title", "detail"] },
+    { "name": "Appearance", "props": ["align"] }
+  ],
+  "presets": [
+    { "name": "Default", "props": { "title": "Revenue", "detail": "$2,000 MRR · 15% vs last month", "align": "left" } },
+    { "name": "KPI summary", "props": { "title": "Pipeline", "detail": "1,428 qualified leads", "align": "left" } },
+    { "name": "Centered", "props": { "title": "Uptime", "detail": "99.95% last 30 days", "align": "center" } },
+    { "name": "Right aligned", "props": { "title": "Spend", "detail": "Within budget", "align": "right" } }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,68 @@
+{
+  "template": "<Toggle{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "size": "sm"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "name",
+        "value"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "checked"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "name": "marketing_emails",
+        "value": "opt_in"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "name": "dark_mode",
+        "value": "theme",
+        "checked": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "name": "auto_save",
+        "value": "enabled",
+        "checked": true,
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "name": "notifications",
+        "value": "push",
+        "size": "md",
+        "checked": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,53 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["name", "value"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "checked"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "name": "marketing_emails",
+        "value": "opt_in"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "name": "dark_mode",
+        "value": "theme",
+        "checked": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "name": "auto_save",
+        "value": "enabled",
+        "checked": true,
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "name": "notifications",
+        "value": "push",
+        "size": "md",
+        "checked": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,91 @@
+{
+  "template": "<Tooltip{{props}}>{{children}}</Tooltip>",
+  "propTargets": {},
+  "defaults": {
+    "useClickToOpen": false,
+    "interaction": false
+  },
+  "children": {
+    "editable": true,
+    "default": "Hover me",
+    "hideWhenPropSet": []
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "icon"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "placement",
+        "useClickToOpen",
+        "interaction",
+        "delay"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "showTooltip",
+        "forceOpenTooltip"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Top",
+      "props": {
+        "placement": "top",
+        "text": "Tooltip on top"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Bottom",
+      "props": {
+        "placement": "bottom",
+        "text": "Tooltip on bottom"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Left",
+      "props": {
+        "placement": "left",
+        "text": "Tooltip on the left"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Right",
+      "props": {
+        "placement": "right",
+        "text": "Tooltip on the right"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Click to open",
+      "props": {
+        "placement": "top",
+        "useClickToOpen": true,
+        "text": "Click toggles this tooltip"
+      },
+      "children": "Click me"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "click_to_open": {
+      "when": {
+        "useClickToOpen": true
+      },
+      "message": "When click to open is on, the tooltip toggles on click instead of hover.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+{
+  "children": {
+    "default": "Hover me",
+    "hideWhenPropSet": []
+  },
+  "groups": [
+    { "name": "Content", "props": ["text", "icon"] },
+    {
+      "name": "Behavior",
+      "props": ["placement", "useClickToOpen", "interaction", "delay"]
+    },
+    { "name": "Appearance", "props": ["showTooltip", "forceOpenTooltip"] }
+  ],
+  "presets": [
+    {
+      "name": "Top",
+      "props": { "placement": "top", "text": "Tooltip on top" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Bottom",
+      "props": { "placement": "bottom", "text": "Tooltip on bottom" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Left",
+      "props": { "placement": "left", "text": "Tooltip on the left" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Right",
+      "props": { "placement": "right", "text": "Tooltip on the right" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Click to open",
+      "props": {
+        "placement": "top",
+        "useClickToOpen": true,
+        "text": "Click toggles this tooltip"
+      },
+      "children": "Click me"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "click_to_open": {
+      "when": { "useClickToOpen": true },
+      "message": "When click to open is on, the tooltip toggles on click instead of hover.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,205 @@
+{
+  "template": "<Typeahead{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "async": false,
+    "createable": false,
+    "disabled": false,
+    "error": "",
+    "inputDisplay": "pills",
+    "required": false,
+    "requiredIndicator": false,
+    "clearOnContextChange": true,
+    "preserveSearchInput": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "options"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator",
+        "validation"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inputDisplay"
+      ]
+    },
+    {
+      "name": "Async & data",
+      "props": [
+        "async",
+        "createable",
+        "loadOptions",
+        "getOptionLabel",
+        "getOptionValue",
+        "optionsByContext",
+        "searchContextSelector",
+        "clearOnContextChange",
+        "preserveSearchInput"
+      ]
+    },
+    {
+      "name": "Advanced",
+      "props": [
+        "components",
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Basic list",
+      "props": {
+        "label": "Colors",
+        "options": [
+          {
+            "label": "Orange",
+            "value": "#FFA500"
+          },
+          {
+            "label": "Red",
+            "value": "#FF0000"
+          },
+          {
+            "label": "Green",
+            "value": "#00FF00"
+          },
+          {
+            "label": "Blue",
+            "value": "#0000FF"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Pills display",
+      "props": {
+        "label": "Tags",
+        "inputDisplay": "pills",
+        "options": [
+          {
+            "label": "Design",
+            "value": "design"
+          },
+          {
+            "label": "Engineering",
+            "value": "engineering"
+          },
+          {
+            "label": "Support",
+            "value": "support"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Plain input",
+      "props": {
+        "label": "Team",
+        "inputDisplay": "none",
+        "options": [
+          {
+            "label": "North",
+            "value": "north"
+          },
+          {
+            "label": "South",
+            "value": "south"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Read only",
+        "disabled": true,
+        "options": [
+          {
+            "label": "Only option",
+            "value": "one"
+          }
+        ]
+      }
+    },
+    {
+      "name": "With error",
+      "props": {
+        "label": "Assignee",
+        "error": "Selection is required.",
+        "options": [
+          {
+            "label": "Ada",
+            "value": "ada"
+          },
+          {
+            "label": "Grace",
+            "value": "grace"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Creatable",
+      "props": {
+        "label": "Add labels",
+        "createable": true,
+        "options": [
+          {
+            "label": "Bug",
+            "value": "bug"
+          },
+          {
+            "label": "Feature",
+            "value": "feature"
+          }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "loadOptions": {
+      "requires": {
+        "async": true
+      }
+    },
+    "getOptionLabel": {
+      "requires": {
+        "async": true
+      }
+    },
+    "getOptionValue": {
+      "requires": {
+        "async": true
+      }
+    },
+    "optionsByContext": {
+      "requires": "searchContextSelector"
+    },
+    "clearOnContextChange": {
+      "requires": "searchContextSelector"
+    }
+  },
+  "hints": {
+    "async_options": {
+      "when": {
+        "async": true
+      },
+      "message": "Async mode expects loadOptions to return option objects with label and value.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "options"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator", "validation"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inputDisplay"]
+    },
+    {
+      "name": "Async & data",
+      "props": [
+        "async",
+        "createable",
+        "loadOptions",
+        "getOptionLabel",
+        "getOptionValue",
+        "optionsByContext",
+        "searchContextSelector",
+        "clearOnContextChange",
+        "preserveSearchInput"
+      ]
+    },
+    {
+      "name": "Advanced",
+      "props": ["components", "onChange"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Basic list",
+      "props": {
+        "label": "Colors",
+        "options": [
+          { "label": "Orange", "value": "#FFA500" },
+          { "label": "Red", "value": "#FF0000" },
+          { "label": "Green", "value": "#00FF00" },
+          { "label": "Blue", "value": "#0000FF" }
+        ]
+      }
+    },
+    {
+      "name": "Pills display",
+      "props": {
+        "label": "Tags",
+        "inputDisplay": "pills",
+        "options": [
+          { "label": "Design", "value": "design" },
+          { "label": "Engineering", "value": "engineering" },
+          { "label": "Support", "value": "support" }
+        ]
+      }
+    },
+    {
+      "name": "Plain input",
+      "props": {
+        "label": "Team",
+        "inputDisplay": "none",
+        "options": [
+          { "label": "North", "value": "north" },
+          { "label": "South", "value": "south" }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Read only",
+        "disabled": true,
+        "options": [{ "label": "Only option", "value": "one" }]
+      }
+    },
+    {
+      "name": "With error",
+      "props": {
+        "label": "Assignee",
+        "error": "Selection is required.",
+        "options": [
+          { "label": "Ada", "value": "ada" },
+          { "label": "Grace", "value": "grace" }
+        ]
+      }
+    },
+    {
+      "name": "Creatable",
+      "props": {
+        "label": "Add labels",
+        "createable": true,
+        "options": [
+          { "label": "Bug", "value": "bug" },
+          { "label": "Feature", "value": "feature" }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "loadOptions": { "requires": { "async": true } },
+    "getOptionLabel": { "requires": { "async": true } },
+    "getOptionValue": { "requires": { "async": true } },
+    "optionsByContext": { "requires": "searchContextSelector" },
+    "clearOnContextChange": { "requires": "searchContextSelector" }
+  },
+  "hints": {
+    "async_options": {
+      "when": { "async": true },
+      "message": "Async mode expects loadOptions to return option objects with label and value.",
+      "type": "info"
+    }
+  }
+}