playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,113 @@
+{
+  "template": "<CircleIconButton{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "disabled": false,
+    "loading": false,
+    "newWindow": false,
+    "type": "button",
+    "variant": "primary",
+    "size": "default"
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "size",
+        "disabled",
+        "loading"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Link",
+      "props": [
+        "link",
+        "target",
+        "newWindow"
+      ]
+    },
+    {
+      "name": "Form",
+      "props": [
+        "type",
+        "onClick"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "icon": "plus",
+        "variant": "primary"
+      }
+    },
+    {
+      "name": "Secondary",
+      "props": {
+        "icon": "pen",
+        "variant": "secondary"
+      }
+    },
+    {
+      "name": "Link style",
+      "props": {
+        "icon": "arrow-right",
+        "variant": "link"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "icon": "times",
+        "variant": "primary",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "icon": "lock",
+        "variant": "primary",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Loading",
+      "props": {
+        "icon": "refresh",
+        "variant": "primary",
+        "loading": true
+      }
+    }
+  ],
+  "conditionals": {
+    "target": {
+      "requires": "link"
+    },
+    "newWindow": {
+      "requires": "link"
+    }
+  },
+  "hints": {
+    "icon_required": {
+      "when": {},
+      "message": "The icon prop is required for CircleIconButton.",
+      "type": "info"
+    },
+    "link_mode": {
+      "when": {
+        "link": true
+      },
+      "message": "When link is set, the button renders as an anchor tag.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+{
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["variant", "size", "disabled", "loading"]
+    },
+    {
+      "name": "Content",
+      "props": ["icon"]
+    },
+    {
+      "name": "Link",
+      "props": ["link", "target", "newWindow"]
+    },
+    {
+      "name": "Form",
+      "props": ["type", "onClick"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": { "icon": "plus", "variant": "primary" }
+    },
+    {
+      "name": "Secondary",
+      "props": { "icon": "pen", "variant": "secondary" }
+    },
+    {
+      "name": "Link style",
+      "props": { "icon": "arrow-right", "variant": "link" }
+    },
+    {
+      "name": "Small",
+      "props": { "icon": "times", "variant": "primary", "size": "sm" }
+    },
+    {
+      "name": "Disabled",
+      "props": { "icon": "lock", "variant": "primary", "disabled": true }
+    },
+    {
+      "name": "Loading",
+      "props": { "icon": "refresh", "variant": "primary", "loading": true }
+    }
+  ],
+  "conditionals": {
+    "target": { "requires": "link" },
+    "newWindow": { "requires": "link" }
+  },
+  "hints": {
+    "icon_required": {
+      "when": {},
+      "message": "The icon prop is required for CircleIconButton.",
+      "type": "info"
+    },
+    "link_mode": {
+      "when": { "link": true },
+      "message": "When link is set, the button renders as an anchor tag.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+{
+  "template": "<Collapsible{{props}}>{{children}}</Collapsible>",
+  "propTargets": {},
+  "defaults": {
+    "tag": "div"
+  },
+  "children": {
+    "editable": true,
+    "default": "Expandable content goes here. This section is hidden when collapsed."
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "icon",
+        "iconColor",
+        "iconSize"
+      ]
+    },
+    {
+      "name": "Layout",
+      "props": [
+        "tag"
+      ]
+    },
+    {
+      "name": "Callbacks",
+      "props": [
+        "onClick",
+        "onIconClick"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "collapsed"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Expandable content goes here."
+    },
+    {
+      "name": "Expanded",
+      "props": {
+        "collapsed": false
+      },
+      "children": "This content is visible initially."
+    },
+    {
+      "name": "Custom icon",
+      "props": {
+        "icon": "plus",
+        "iconColor": "link"
+      },
+      "children": "Custom icon and color."
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "expanded_state": {
+      "when": {
+        "collapsed": false
+      },
+      "message": "Set collapsed to false to render as open on first render. Use useCollapsible hook or state to control this for complex UI.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "subcomponents",
+    "modes": {
+      "subcomponents": {
+        "label": "With Subcomponents",
+        "template": "<Collapsible{{props}}>\n  <Collapsible.Main>\n    Main Section\n  </Collapsible.Main>\n  <Collapsible.Content>\n    {{children}}\n  </Collapsible.Content>\n</Collapsible>",
+        "children": "Expandable content goes here."
+      },
+      "with_hook": {
+        "label": "With useCollapsible Hook",
+        "template": "<Collapsible collapsed={collapsed}{{props}}>\n  <Collapsible.Main>\n    Main Section\n  </Collapsible.Main>\n  <Collapsible.Content>\n    {{children}}\n  </Collapsible.Content>\n</Collapsible>",
+        "children": "Content controlled by the useCollapsible hook.",
+        "imports": [
+          "useCollapsible"
+        ],
+        "wrapper": "const CollapsibleExample = () => {\n  const [collapsed, toggle] = useCollapsible(true)\n\n  return (\n    <>\n      <Button onClick={toggle} marginBottom=\"sm\">\n        {collapsed ? 'Expand' : 'Collapse'}\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<CollapsibleExample />"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+{
+  "children": {
+    "default": "Expandable content goes here. This section is hidden when collapsed."
+  },
+  "structureModes": {
+    "default": "subcomponents",
+    "modes": {
+      "subcomponents": {
+        "label": "With Subcomponents",
+        "template": "<Collapsible{{props}}>\n  <Collapsible.Main>\n    Main Section\n  </Collapsible.Main>\n  <Collapsible.Content>\n    {{children}}\n  </Collapsible.Content>\n</Collapsible>",
+        "children": "Expandable content goes here."
+      },
+      "with_hook": {
+        "label": "With useCollapsible Hook",
+        "template": "<Collapsible collapsed={collapsed}{{props}}>\n  <Collapsible.Main>\n    Main Section\n  </Collapsible.Main>\n  <Collapsible.Content>\n    {{children}}\n  </Collapsible.Content>\n</Collapsible>",
+        "children": "Content controlled by the useCollapsible hook.",
+        "imports": ["useCollapsible"],
+        "wrapper": "const CollapsibleExample = () => {\n  const [collapsed, toggle] = useCollapsible(true)\n\n  return (\n    <>\n      <Button onClick={toggle} marginBottom=\"sm\">\n        {collapsed ? 'Expand' : 'Collapse'}\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<CollapsibleExample />"
+      }
+    }
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["icon", "iconColor", "iconSize"]
+    },
+    {
+      "name": "Layout",
+      "props": ["tag"]
+    },
+    {
+      "name": "Callbacks",
+      "props": ["onClick", "onIconClick"]
+    },
+    {
+      "name": "State",
+      "props": ["collapsed"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Expandable content goes here."
+    },
+    {
+      "name": "Expanded",
+      "props": { "collapsed": false },
+      "children": "This content is visible initially."
+    },
+    {
+      "name": "Custom icon",
+      "props": { "icon": "plus", "iconColor": "link" },
+      "children": "Custom icon and color."
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "expanded_state": {
+      "when": { "collapsed": false },
+      "message": "Set collapsed to false to render as open on first render. Use useCollapsible hook or state to control this for complex UI.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+{
+  "template": "<Contact{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "iconEnabled": true,
+    "unstyled": false,
+    "contactType": "email",
+    "contactValue": "anna.black@example.com"
+  },
+  "groups": [
+    {
+      "name": "Contact Info",
+      "props": [
+        "contactType",
+        "contactValue",
+        "contactDetail"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "iconEnabled",
+        "unstyled"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Email",
+      "props": {
+        "contactType": "email",
+        "contactValue": "anna.black@example.com"
+      }
+    },
+    {
+      "name": "Cell with detail",
+      "props": {
+        "contactType": "cell",
+        "contactValue": "2155550100",
+        "contactDetail": "mobile"
+      }
+    },
+    {
+      "name": "Work phone",
+      "props": {
+        "contactType": "work",
+        "contactValue": "2155550199"
+      }
+    },
+    {
+      "name": "Unstyled",
+      "props": {
+        "contactType": "email",
+        "contactValue": "anna.black@example.com",
+        "unstyled": true
+      }
+    },
+    {
+      "name": "No icon",
+      "props": {
+        "contactType": "cell",
+        "contactValue": "2155550100",
+        "iconEnabled": false
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,60 @@
+{
+  "defaults": {
+    "contactType": "email",
+    "contactValue": "anna.black@example.com",
+    "iconEnabled": true,
+    "unstyled": false
+  },
+  "groups": [
+    {
+      "name": "Contact Info",
+      "props": ["contactType", "contactValue", "contactDetail"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["iconEnabled", "unstyled"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Email",
+      "props": {
+        "contactType": "email",
+        "contactValue": "anna.black@example.com"
+      }
+    },
+    {
+      "name": "Cell with detail",
+      "props": {
+        "contactType": "cell",
+        "contactValue": "2155550100",
+        "contactDetail": "mobile"
+      }
+    },
+    {
+      "name": "Work phone",
+      "props": {
+        "contactType": "work",
+        "contactValue": "2155550199"
+      }
+    },
+    {
+      "name": "Unstyled",
+      "props": {
+        "contactType": "email",
+        "contactValue": "anna.black@example.com",
+        "unstyled": true
+      }
+    },
+    {
+      "name": "No icon",
+      "props": {
+        "contactType": "cell",
+        "contactValue": "2155550100",
+        "iconEnabled": false
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,120 @@
+{
+  "template": "<CopyButton{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "tooltipText": "Copied!",
+    "variant": "icon",
+    "value": "Boo from Ghost Crew!"
+  },
+  "groups": [
+    {
+      "name": "Tooltip",
+      "props": [
+        "tooltipPlacement",
+        "tooltipText"
+      ]
+    },
+    {
+      "name": "Copy configs",
+      "props": [
+        "value",
+        "from"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "timeout"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "tooltipText": "Copied!",
+        "value": "Boo from Ghost Crew!"
+      }
+    },
+    {
+      "name": "Button variant",
+      "structureMode": "with_textarea",
+      "props": {
+        "variant": "button"
+      }
+    },
+    {
+      "name": "Copy from body",
+      "structureMode": "copy_from_body",
+      "props": {
+        "from": "body",
+        "marginBottom": "sm",
+        "text": "Copy Body text",
+        "tooltipPlacement": "right",
+        "tooltipText": "Body text copied!",
+        "variant": "button",
+        "value": ""
+      }
+    },
+    {
+      "name": "With Hook",
+      "props": {},
+      "structureMode": "use_pbcopy_hook"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default_preset_info": {
+      "presetName": "Default",
+      "message": "Use CopyButton + paste area for the kit. Switch structure to usePBCopy hook for the docs example (Body + Tooltip + Textarea, copy via from: hookbody).",
+      "type": "info"
+    },
+    "copy_configs_info": {
+      "presetName": "Copy from body",
+      "message": "Body has id=\"body\"; CopyButton uses from=\"body\" to copy that element’s text (value is cleared so from is used).",
+      "type": "info"
+    },
+    "hook_info": {
+      "presetName": "With Hook",
+      "message": "Use the usePBCopy hook to copy text to the clipboard. This is a headless hook that you can use to copy text to the clipboard. It returns a boolean value that indicates if the text has been copied and a function to copy the text.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "with_textarea",
+    "modes": {
+      "with_textarea": {
+        "label": "CopyButton + paste area",
+        "template": "<Flex flexDirection=\"column\" gap=\"sm\"><CopyButton{{props}} /><Textarea marginTop=\"sm\" placeholder=\"Paste copied text here\" rows={3} /></Flex>",
+        "children": "",
+        "imports": [
+          "Flex",
+          "Textarea"
+        ]
+      },
+      "copy_from_body": {
+        "label": "Copy from element (from)",
+        "template": "<Flex flexDirection=\"column\" gap=\"sm\"><Body id=\"body\">Copy this body text!</Body><CopyButton{{props}} /><Textarea marginTop=\"sm\" placeholder=\"Paste copied text here\" rows={3} /></Flex>",
+        "children": "",
+        "imports": [
+          "Flex",
+          "Body",
+          "Textarea"
+        ]
+      },
+      "use_pbcopy_hook": {
+        "label": "usePBCopy hook",
+        "template": "<></>",
+        "children": "",
+        "imports": [
+          "usePBCopy",
+          "Tooltip",
+          "Body",
+          "Textarea"
+        ],
+        "wrapper": "const CopyButtonHook = ({...props}) => {\n  // This is how you can use the copy button hook to copy text to the clipboard\n  // eslint-disable-next-line no-unused-vars\n  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })\n  // I added a tooltip so it looks better in the ui\n  const [showTooltip, setShowTooltip] = useState(false)\n\n  const handleCopy = () => {\n    copyToClipboard()\n    setShowTooltip(true)\n    setTimeout(() => setShowTooltip(false), 1500)\n  }\n\n  useEffect(() => {\n    const el = document.getElementById('hookbody')\n    if (!el) return\n\n    el.addEventListener('click', handleCopy)\n    return () => {\n      el.removeEventListener('click', handleCopy)\n    }\n  }, [copyToClipboard])\n\n  return (\n    <div>\n      <Tooltip\n          delay={{ close: 1000 }}\n          forceOpenTooltip={showTooltip}\n          placement=\"top\"\n          showTooltip={false}\n          text=\"Copied!\"\n      >\n        <Body\n            cursor=\"pointer\"\n            id=\"hookbody\"\n            text=\"I'm a custom copy hook! Click this body to copy this text!\"\n        />\n      </Tooltip>\n\n      <Textarea\n          placeholder=\"Paste here\"\n      />\n    </div>\n  )\n}"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+{
+  "structureModes": {
+    "default": "with_textarea",
+    "modes": {
+      "with_textarea": {
+        "label": "CopyButton + paste area",
+        "template": "<Flex flexDirection=\"column\" gap=\"sm\"><CopyButton{{props}} /><Textarea marginTop=\"sm\" placeholder=\"Paste copied text here\" rows={3} /></Flex>",
+        "children": "",
+        "imports": ["Flex", "Textarea"]
+      },
+      "copy_from_body": {
+        "label": "Copy from element (from)",
+        "template": "<Flex flexDirection=\"column\" gap=\"sm\"><Body id=\"body\">Copy this body text!</Body><CopyButton{{props}} /><Textarea marginTop=\"sm\" placeholder=\"Paste copied text here\" rows={3} /></Flex>",
+        "children": "",
+        "imports": ["Flex", "Body", "Textarea"]
+      },
+      "use_pbcopy_hook": {
+        "label": "usePBCopy hook",
+        "template": "<></>",
+        "children": "",
+        "imports": ["usePBCopy", "Tooltip", "Body", "Textarea"],
+        "wrapper": "const CopyButtonHook = ({...props}) => {\n  // This is how you can use the copy button hook to copy text to the clipboard\n  // eslint-disable-next-line no-unused-vars\n  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })\n  // I added a tooltip so it looks better in the ui\n  const [showTooltip, setShowTooltip] = useState(false)\n\n  const handleCopy = () => {\n    copyToClipboard()\n    setShowTooltip(true)\n    setTimeout(() => setShowTooltip(false), 1500)\n  }\n\n  useEffect(() => {\n    const el = document.getElementById('hookbody')\n    if (!el) return\n\n    el.addEventListener('click', handleCopy)\n    return () => {\n      el.removeEventListener('click', handleCopy)\n    }\n  }, [copyToClipboard])\n\n  return (\n    <div>\n      <Tooltip\n          delay={{ close: 1000 }}\n          forceOpenTooltip={showTooltip}\n          placement=\"top\"\n          showTooltip={false}\n          text=\"Copied!\"\n      >\n        <Body\n            cursor=\"pointer\"\n            id=\"hookbody\"\n            text=\"I'm a custom copy hook! Click this body to copy this text!\"\n        />\n      </Tooltip>\n\n      <Textarea\n          placeholder=\"Paste here\"\n      />\n    </div>\n  )\n}"
+      }
+    }
+  },
+  "defaults": {
+    "tooltipText": "Copied!",
+    "value": "Boo from Ghost Crew!"
+  },
+  "groups": [
+    {
+      "name": "Tooltip",
+      "props": ["tooltipPlacement", "tooltipText"]
+    },
+    {
+      "name": "Copy configs",
+      "props": ["value", "from"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant", "timeout"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "tooltipText": "Copied!",
+        "value": "Boo from Ghost Crew!"
+      }
+    },
+    {
+      "name": "Button variant",
+      "structureMode": "with_textarea",
+      "props": {
+        "variant": "button"
+      }
+    },
+    {
+      "name": "Copy from body",
+      "structureMode": "copy_from_body",
+      "props": {
+        "from": "body",
+        "marginBottom": "sm",
+        "text": "Copy Body text",
+        "tooltipPlacement": "right",
+        "tooltipText": "Body text copied!",
+        "variant": "button",
+        "value": ""
+      }
+    },
+    {
+      "name": "With Hook",
+      "props": {},
+      "structureMode": "use_pbcopy_hook"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default_preset_info": {
+      "presetName": "Default",
+      "message": "Use CopyButton + paste area for the kit. Switch structure to usePBCopy hook for the docs example (Body + Tooltip + Textarea, copy via from: hookbody).",
+      "type": "info"
+    },
+    "copy_configs_info": {
+      "presetName": "Copy from body",
+      "message": "Body has id=\"body\"; CopyButton uses from=\"body\" to copy that element’s text (value is cleared so from is used).",
+      "type": "info"
+    },
+    "hook_info": {
+      "presetName": "With Hook",
+      "message": "Use the usePBCopy hook to copy text to the clipboard. This is a headless hook that you can use to copy text to the clipboard. It returns a boolean value that indicates if the text has been copied and a function to copy the text.",
+      "type": "info"
+    }
+  }
+}