playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -21,5 +21,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "align_left": {
+      "presetName": "Align left",
+      "message": "Align left uses the default left-aligned inline loading treatment.",
+      "type": "info"
+    },
+    "align_center": {
+      "presetName": "Align center",
+      "message": "Align center centers the spinner and loading text in the available width.",
+      "type": "info"
+    },
+    "align_right": {
+      "presetName": "Align right",
+      "message": "Align right pushes the inline loading indicator to the right edge.",
+      "type": "info"
+    },
+    "solid_spinner": {
+      "presetName": "Solid spinner",
+      "message": "Solid spinner switches the icon from the dotted spinner to the solid circle-notch variant.",
+      "type": "info"
+    },
+    "custom_label": {
+      "presetName": "Custom label",
+      "message": "Custom label changes the text displayed next to the loading icon.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -4,6 +4,7 @@ examples:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
   - loading_inline_variant: Variant
+  - loading_inline_color: Color
 
   
   
@@ -11,3 +12,4 @@ examples:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
   - loading_inline_variant: Variant
+  - loading_inline_color: Color

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1,3 +1,4 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
 export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'
+export { default as LoadingInlineColor } from './_loading_inline_color.jsx'

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

@@ -1,13 +1,31 @@
 {
   "template": "<Map{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "zoomBtns": true,
+    "flyTo": false,
+    "zoomInClick": "() => handleZoomIn(mapInstance)",
+    "zoomOutClick": "() => handleZoomOut(mapInstance)",
+    "flyToClick": "() => handleFlyTo(mapInstance)",
+    "htmlOptions": {
+      "style": {
+        "height": "320px",
+        "position": "relative",
+        "width": "100%"
+      }
+    }
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Controls",
       "props": [
         "zoomBtns",
-        "flyTo",
+        "flyTo"
+      ]
+    },
+    {
+      "name": "Callbacks",
+      "props": [
         "zoomInClick",
         "zoomOutClick",
         "flyToClick"
@@ -16,10 +34,149 @@
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Zoom Controls",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)"
+      }
+    },
+    {
+      "name": "Zoom and Fly To",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": true,
+        "flyTo": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)",
+        "flyToClick": "() => handleFlyTo(mapInstance)"
+      }
+    },
+    {
+      "name": "No Controls",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": false,
+        "flyTo": false
+      }
+    },
+    {
+      "name": "Custom Buttons",
+      "structureMode": "custom_controls",
+      "props": {
+        "zoomBtns": true,
+        "flyTo": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)",
+        "flyToClick": "() => handleFlyTo(mapInstance)"
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "flyTo": {
+      "requires": "zoomBtns"
+    },
+    "zoomInClick": {
+      "requires": "zoomBtns"
+    },
+    "zoomOutClick": {
+      "requires": "zoomBtns"
+    },
+    "flyToClick": {
+      "requires": {
+        "flyTo": true
+      }
+    }
+  },
+  "hints": {
+    "maplibre_setup": {
+      "when": {},
+      "message": "Map uses MapLibre: import maplibregl from 'maplibre-gl', include the MapLibre CSS, use mapTheme, and give .pb_map a relative container with explicit height and width.",
+      "type": "info"
+    },
+    "zoom_controls": {
+      "presetName": "Zoom Controls",
+      "message": "zoomBtns renders Playbook Map.Controls and the callbacks call MapLibre zoomIn and zoomOut on the loaded map instance.",
+      "type": "info"
+    },
+    "zoom_and_fly_to": {
+      "presetName": "Zoom and Fly To",
+      "message": "flyTo adds the extra control button; flyToClick calls map.flyTo with the default marker position and mapTheme.flyToConfig.",
+      "type": "info"
+    },
+    "no_controls": {
+      "presetName": "No Controls",
+      "message": "With zoomBtns false, Map still wraps the MapLibre container but does not render Playbook map controls.",
+      "type": "info"
+    },
+    "custom_buttons": {
+      "presetName": "Custom Buttons",
+      "message": "Custom Buttons composes Map.Controls and MapCustomButton children; control props move onto Map.Controls in this structure.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "maplibre",
+    "modes": {
+      "maplibre": {
+        "label": "MapLibre",
+        "template": "<Map{{props}}>\n  <div\n      ref={mapContainerRef}\n      style={mapContainerStyle}\n  />\n</Map>",
+        "props": {
+          "htmlOptions": {
+            "style": {
+              "height": "320px",
+              "position": "relative",
+              "width": "100%"
+            }
+          }
+        },
+        "imports": [
+          "mapTheme"
+        ],
+        "externalImports": [
+          "import React, { useEffect, useRef, useState } from 'react'",
+          "import maplibregl from 'maplibre-gl'"
+        ],
+        "wrapper": "const defaultPosition = [-75.379143, 39.831200]\nconst mapContainerStyle = {\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n}\n\nconst MapPlaygroundExample = () => {\n  const [mapInstance, setMapInstance] = useState(null)\n  const mapContainerRef = useRef(null)\n\n  const handleZoomIn = (map) => map?.zoomIn({ ...mapTheme.zoomConfig })\n  const handleZoomOut = (map) => map?.zoomOut({ ...mapTheme.zoomConfig })\n  const handleFlyTo = (map) => map?.flyTo({\n    center: defaultPosition,\n    ...mapTheme.flyToConfig,\n  })\n\n  useEffect(() => {\n    if (!mapContainerRef.current) return undefined\n\n    const map = new maplibregl.Map({\n      container: mapContainerRef.current,\n      center: defaultPosition,\n      ...mapTheme.mapConfig,\n    })\n\n    map.on('load', ({ target }) => {\n      new maplibregl.Marker({ color: mapTheme.marker })\n        .setLngLat(defaultPosition)\n        .setPopup(\n          new maplibregl.Popup({ closeButton: false }).setHTML(\n            '<h4 class=\"pb_title_kit pb_title_4\">Hello World!</h4>'\n          )\n        )\n        .addTo(target)\n\n      target.scrollZoom.disable()\n      target.addControl(new maplibregl.AttributionControl({ compact: true }))\n      setMapInstance(target)\n    })\n\n    return () => map.remove()\n  }, [])\n\n  return {{component}}\n}\n\n<MapPlaygroundExample />"
+      },
+      "custom_controls": {
+        "label": "Custom Controls",
+        "template": "<Map{{props}}>\n  <Map.Controls{{Controls.props}}>\n    <MapCustomButton\n        icon=\"home\"\n        onClick={() => console.log('home clicked')}\n    />\n    <MapCustomButton\n        icon=\"search\"\n        onClick={() => console.log('search clicked')}\n    />\n  </Map.Controls>\n  <div\n      ref={mapContainerRef}\n      style={mapContainerStyle}\n  />\n</Map>",
+        "props": {
+          "htmlOptions": {
+            "style": {
+              "height": "320px",
+              "position": "relative",
+              "width": "100%"
+            }
+          },
+          "zoomBtns": true,
+          "flyTo": true,
+          "zoomInClick": "() => handleZoomIn(mapInstance)",
+          "zoomOutClick": "() => handleZoomOut(mapInstance)",
+          "flyToClick": "() => handleFlyTo(mapInstance)"
+        },
+        "propTargets": {
+          "zoomBtns": "Controls.props",
+          "flyTo": "Controls.props",
+          "zoomInClick": "Controls.props",
+          "zoomOutClick": "Controls.props",
+          "flyToClick": "Controls.props"
+        },
+        "imports": [
+          "mapTheme"
+        ],
+        "externalImports": [
+          "import React, { useEffect, useRef, useState } from 'react'",
+          "import maplibregl from 'maplibre-gl'"
+        ],
+        "wrapper": "const defaultPosition = [-75.379143, 39.831200]\nconst mapContainerStyle = {\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n}\n\nconst MapPlaygroundExample = () => {\n  const [mapInstance, setMapInstance] = useState(null)\n  const mapContainerRef = useRef(null)\n\n  const handleZoomIn = (map) => map?.zoomIn({ ...mapTheme.zoomConfig })\n  const handleZoomOut = (map) => map?.zoomOut({ ...mapTheme.zoomConfig })\n  const handleFlyTo = (map) => map?.flyTo({\n    center: defaultPosition,\n    ...mapTheme.flyToConfig,\n  })\n\n  useEffect(() => {\n    if (!mapContainerRef.current) return undefined\n\n    const map = new maplibregl.Map({\n      container: mapContainerRef.current,\n      center: defaultPosition,\n      ...mapTheme.mapConfig,\n    })\n\n    map.on('load', ({ target }) => {\n      new maplibregl.Marker({ color: mapTheme.marker })\n        .setLngLat(defaultPosition)\n        .setPopup(\n          new maplibregl.Popup({ closeButton: false }).setHTML(\n            '<h4 class=\"pb_title_kit pb_title_4\">Hello World!</h4>'\n          )\n        )\n        .addTo(target)\n\n      target.scrollZoom.disable()\n      target.addControl(new maplibregl.AttributionControl({ compact: true }))\n      setMapInstance(target)\n    })\n\n    return () => map.remove()\n  }, [])\n\n  return {{component}}\n}\n\n<MapPlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  }
 }

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

@@ -0,0 +1,180 @@
+{
+  "structureModes": {
+    "default": "maplibre",
+    "modes": {
+      "maplibre": {
+        "label": "MapLibre",
+        "template": "<Map{{props}}>\n  <div\n      ref={mapContainerRef}\n      style={mapContainerStyle}\n  />\n</Map>",
+        "props": {
+          "htmlOptions": {
+            "style": {
+              "height": "320px",
+              "position": "relative",
+              "width": "100%"
+            }
+          }
+        },
+        "imports": [
+          "mapTheme"
+        ],
+        "externalImports": [
+          "import React, { useEffect, useRef, useState } from 'react'",
+          "import maplibregl from 'maplibre-gl'"
+        ],
+        "wrapper": "const defaultPosition = [-75.379143, 39.831200]\nconst mapContainerStyle = {\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n}\n\nconst MapPlaygroundExample = () => {\n  const [mapInstance, setMapInstance] = useState(null)\n  const mapContainerRef = useRef(null)\n\n  const handleZoomIn = (map) => map?.zoomIn({ ...mapTheme.zoomConfig })\n  const handleZoomOut = (map) => map?.zoomOut({ ...mapTheme.zoomConfig })\n  const handleFlyTo = (map) => map?.flyTo({\n    center: defaultPosition,\n    ...mapTheme.flyToConfig,\n  })\n\n  useEffect(() => {\n    if (!mapContainerRef.current) return undefined\n\n    const map = new maplibregl.Map({\n      container: mapContainerRef.current,\n      center: defaultPosition,\n      ...mapTheme.mapConfig,\n    })\n\n    map.on('load', ({ target }) => {\n      new maplibregl.Marker({ color: mapTheme.marker })\n        .setLngLat(defaultPosition)\n        .setPopup(\n          new maplibregl.Popup({ closeButton: false }).setHTML(\n            '<h4 class=\"pb_title_kit pb_title_4\">Hello World!</h4>'\n          )\n        )\n        .addTo(target)\n\n      target.scrollZoom.disable()\n      target.addControl(new maplibregl.AttributionControl({ compact: true }))\n      setMapInstance(target)\n    })\n\n    return () => map.remove()\n  }, [])\n\n  return {{component}}\n}\n\n<MapPlaygroundExample />"
+      },
+      "custom_controls": {
+        "label": "Custom Controls",
+        "template": "<Map{{props}}>\n  <Map.Controls{{Controls.props}}>\n    <MapCustomButton\n        icon=\"home\"\n        onClick={() => console.log('home clicked')}\n    />\n    <MapCustomButton\n        icon=\"search\"\n        onClick={() => console.log('search clicked')}\n    />\n  </Map.Controls>\n  <div\n      ref={mapContainerRef}\n      style={mapContainerStyle}\n  />\n</Map>",
+        "props": {
+          "htmlOptions": {
+            "style": {
+              "height": "320px",
+              "position": "relative",
+              "width": "100%"
+            }
+          },
+          "zoomBtns": true,
+          "flyTo": true,
+          "zoomInClick": "() => handleZoomIn(mapInstance)",
+          "zoomOutClick": "() => handleZoomOut(mapInstance)",
+          "flyToClick": "() => handleFlyTo(mapInstance)"
+        },
+        "propTargets": {
+          "zoomBtns": "Controls.props",
+          "flyTo": "Controls.props",
+          "zoomInClick": "Controls.props",
+          "zoomOutClick": "Controls.props",
+          "flyToClick": "Controls.props"
+        },
+        "imports": [
+          "mapTheme"
+        ],
+        "externalImports": [
+          "import React, { useEffect, useRef, useState } from 'react'",
+          "import maplibregl from 'maplibre-gl'"
+        ],
+        "wrapper": "const defaultPosition = [-75.379143, 39.831200]\nconst mapContainerStyle = {\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n}\n\nconst MapPlaygroundExample = () => {\n  const [mapInstance, setMapInstance] = useState(null)\n  const mapContainerRef = useRef(null)\n\n  const handleZoomIn = (map) => map?.zoomIn({ ...mapTheme.zoomConfig })\n  const handleZoomOut = (map) => map?.zoomOut({ ...mapTheme.zoomConfig })\n  const handleFlyTo = (map) => map?.flyTo({\n    center: defaultPosition,\n    ...mapTheme.flyToConfig,\n  })\n\n  useEffect(() => {\n    if (!mapContainerRef.current) return undefined\n\n    const map = new maplibregl.Map({\n      container: mapContainerRef.current,\n      center: defaultPosition,\n      ...mapTheme.mapConfig,\n    })\n\n    map.on('load', ({ target }) => {\n      new maplibregl.Marker({ color: mapTheme.marker })\n        .setLngLat(defaultPosition)\n        .setPopup(\n          new maplibregl.Popup({ closeButton: false }).setHTML(\n            '<h4 class=\"pb_title_kit pb_title_4\">Hello World!</h4>'\n          )\n        )\n        .addTo(target)\n\n      target.scrollZoom.disable()\n      target.addControl(new maplibregl.AttributionControl({ compact: true }))\n      setMapInstance(target)\n    })\n\n    return () => map.remove()\n  }, [])\n\n  return {{component}}\n}\n\n<MapPlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "defaults": {
+    "zoomBtns": true,
+    "flyTo": false,
+    "zoomInClick": "() => handleZoomIn(mapInstance)",
+    "zoomOutClick": "() => handleZoomOut(mapInstance)",
+    "flyToClick": "() => handleFlyTo(mapInstance)",
+    "htmlOptions": {
+      "style": {
+        "height": "320px",
+        "position": "relative",
+        "width": "100%"
+      }
+    }
+  },
+  "groups": [
+    {
+      "name": "Controls",
+      "props": [
+        "zoomBtns",
+        "flyTo"
+      ]
+    },
+    {
+      "name": "Callbacks",
+      "props": [
+        "zoomInClick",
+        "zoomOutClick",
+        "flyToClick"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Zoom Controls",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)"
+      }
+    },
+    {
+      "name": "Zoom and Fly To",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": true,
+        "flyTo": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)",
+        "flyToClick": "() => handleFlyTo(mapInstance)"
+      }
+    },
+    {
+      "name": "No Controls",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": false,
+        "flyTo": false
+      }
+    },
+    {
+      "name": "Custom Buttons",
+      "structureMode": "custom_controls",
+      "props": {
+        "zoomBtns": true,
+        "flyTo": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)",
+        "flyToClick": "() => handleFlyTo(mapInstance)"
+      }
+    }
+  ],
+  "conditionals": {
+    "flyTo": {
+      "requires": "zoomBtns"
+    },
+    "zoomInClick": {
+      "requires": "zoomBtns"
+    },
+    "zoomOutClick": {
+      "requires": "zoomBtns"
+    },
+    "flyToClick": {
+      "requires": {
+        "flyTo": true
+      }
+    }
+  },
+  "hints": {
+    "maplibre_setup": {
+      "when": {},
+      "message": "Map uses MapLibre: import maplibregl from 'maplibre-gl', include the MapLibre CSS, use mapTheme, and give .pb_map a relative container with explicit height and width.",
+      "type": "info"
+    },
+    "zoom_controls": {
+      "presetName": "Zoom Controls",
+      "message": "zoomBtns renders Playbook Map.Controls and the callbacks call MapLibre zoomIn and zoomOut on the loaded map instance.",
+      "type": "info"
+    },
+    "zoom_and_fly_to": {
+      "presetName": "Zoom and Fly To",
+      "message": "flyTo adds the extra control button; flyToClick calls map.flyTo with the default marker position and mapTheme.flyToConfig.",
+      "type": "info"
+    },
+    "no_controls": {
+      "presetName": "No Controls",
+      "message": "With zoomBtns false, Map still wraps the MapLibre container but does not render Playbook map controls.",
+      "type": "info"
+    },
+    "custom_buttons": {
+      "presetName": "Custom Buttons",
+      "message": "Custom Buttons composes Map.Controls and MapCustomButton children; control props move onto Map.Controls in this structure.",
+      "type": "info"
+    }
+  }
+}

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

@@ -8,18 +8,31 @@
   },
   "children": {
     "editable": true,
-    "default": "Message content"
+    "default": "",
+    "hideWhenPropSet": [
+      "message"
+    ]
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Avatar",
       "props": [
-        "avatarGrayscale",
         "avatarName",
-        "avatarStatus",
         "avatarUrl",
+        "avatarStatus",
+        "avatarGrayscale"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
         "label",
-        "message",
+        "message"
+      ]
+    },
+    {
+      "name": "Time",
+      "props": [
         "timestamp",
         "timestampObject",
         "timezone",
@@ -30,10 +43,103 @@
   "presets": [
     {
       "name": "Default",
-      "props": {},
-      "children": "Message content"
+      "props": {
+        "avatarName": "Mike Bishop",
+        "avatarStatus": "online",
+        "avatarUrl": "https://randomuser.me/api/portraits/men/50.jpg",
+        "label": "Anna Black",
+        "message": "How can we assist you today?",
+        "timestamp": "20 seconds ago"
+      }
+    },
+    {
+      "name": "No Avatar",
+      "props": {
+        "label": "Keith Craig",
+        "message": "Please hold for one moment, I will check with my manager.",
+        "timestamp": "2 days ago"
+      }
+    },
+    {
+      "name": "Grayscale",
+      "props": {
+        "avatarGrayscale": true,
+        "avatarName": "Mike Bishop",
+        "avatarStatus": "offline",
+        "avatarUrl": "https://randomuser.me/api/portraits/men/50.jpg",
+        "label": "Mike Bishop",
+        "message": "So long, and thanks for all the fish!",
+        "timestamp": "3 months ago"
+      }
+    },
+    {
+      "name": "Timestamp Object",
+      "props": {
+        "alignTimestamp": "left",
+        "avatarName": "Wade Winningham",
+        "avatarUrl": "https://randomuser.me/api/portraits/men/14.jpg",
+        "label": "Becca Jacobs",
+        "message": "Application for Kate Smith is waiting for your approval.",
+        "timestamp": "12:20p",
+        "timestampObject": "2026-06-12T12:20:00-04:00"
+      }
+    },
+    {
+      "name": "Hover",
+      "props": {
+        "avatarName": "Mike Bishop",
+        "avatarStatus": "online",
+        "avatarUrl": "https://randomuser.me/api/portraits/men/50.jpg",
+        "borderRadius": "rounded",
+        "hover": {
+          "background": "success_subtle"
+        },
+        "label": "Anna Black",
+        "message": "How can we assist you today?",
+        "padding": "xs"
+      }
+    },
+    {
+      "name": "Mentions",
+      "props": {
+        "avatarName": "Keith Craig",
+        "label": "Keith Craig",
+        "timestamp": "2 days ago"
+      },
+      "children": "<Message.Mention variant=\"user\">@all</Message.Mention>{' please welcome '}<Message.Mention variant=\"self\">@Lucille Sanchez</Message.Mention>{' to the team this week!'}"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders an avatar, label, message body, and relative timestamp.",
+      "type": "info"
+    },
+    "no_avatar": {
+      "presetName": "No Avatar",
+      "message": "When avatarName and avatarUrl are omitted, Message uses the compact non-avatar layout.",
+      "type": "info"
+    },
+    "grayscale": {
+      "presetName": "Grayscale",
+      "message": "avatarGrayscale desaturates the avatar while keeping avatar status visible.",
+      "type": "info"
+    },
+    "timestamp_object": {
+      "presetName": "Timestamp Object",
+      "message": "timestampObject emits a Date instance in generated JSX for humanized timestamp behavior.",
+      "type": "info"
+    },
+    "hover": {
+      "presetName": "Hover",
+      "message": "Hover uses global hover and spacing props alongside the Message-specific props.",
+      "type": "info"
+    },
+    "mentions": {
+      "presetName": "Mentions",
+      "message": "Mentions are composed as Message.Mention children with user and self variants.",
+      "type": "info"
+    }
+  }
 }