playbook_ui_docs 16.6.0 → 16.7.0.pre.rc.0

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

@@ -0,0 +1,130 @@
+{
+  "template": "<Link{{props}}>{{children}}</Link>",
+  "propTargets": {},
+  "defaults": {
+    "color": "default",
+    "disabled": false,
+    "tag": "a",
+    "underline": false
+  },
+  "children": {
+    "editable": true,
+    "default": "Link text",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "icon",
+        "iconRight"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "href",
+        "target",
+        "tabIndex"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
+        "underline",
+        "disabled",
+        "tag"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Link text"
+    },
+    {
+      "name": "Muted underline",
+      "props": {
+        "color": "muted",
+        "underline": true
+      },
+      "children": "Secondary link"
+    },
+    {
+      "name": "Body color",
+      "props": {
+        "color": "body"
+      },
+      "children": "Inline body link"
+    },
+    {
+      "name": "Destructive",
+      "props": {
+        "color": "destructive"
+      },
+      "children": "Delete account"
+    },
+    {
+      "name": "With icon",
+      "props": {
+        "color": "default",
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Continue"
+    },
+    {
+      "name": "Icon both sides",
+      "props": {
+        "icon": "plus",
+        "iconRight": "chevron-right"
+      },
+      "children": "Open document"
+    },
+    {
+      "name": "As heading tag",
+      "props": {
+        "tag": "span"
+      },
+      "children": "Styled as link"
+    },
+    {
+      "name": "With href",
+      "props": {
+        "href": "/dashboard",
+        "color": "default"
+      },
+      "children": "Go to dashboard"
+    },
+    {
+      "name": "External new tab",
+      "props": {
+        "href": "https://example.com",
+        "target": "_blank",
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Example.com"
+    }
+  ],
+  "conditionals": {
+    "target": {
+      "requires": "href"
+    },
+    "iconRight": {
+      "requires": "icon"
+    }
+  },
+  "hints": {
+    "target_needs_href": {
+      "when": {
+        "target": true
+      },
+      "message": "The target attribute only applies when href is set.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+{
+  "children": {
+    "default": "Link text"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "icon", "iconRight"]
+    },
+    {
+      "name": "Behavior",
+      "props": ["href", "target", "tabIndex"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["color", "underline", "disabled", "tag"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Link text"
+    },
+    {
+      "name": "Muted underline",
+      "props": { "color": "muted", "underline": true },
+      "children": "Secondary link"
+    },
+    {
+      "name": "Body color",
+      "props": { "color": "body" },
+      "children": "Inline body link"
+    },
+    {
+      "name": "Destructive",
+      "props": { "color": "destructive" },
+      "children": "Delete account"
+    },
+    {
+      "name": "With icon",
+      "props": { "color": "default", "icon": "arrow-up-right-from-square" },
+      "children": "Continue"
+    },
+    {
+      "name": "Icon both sides",
+      "props": { "icon": "plus", "iconRight": "chevron-right" },
+      "children": "Open document"
+    },
+    {
+      "name": "As heading tag",
+      "props": { "tag": "span" },
+      "children": "Styled as link"
+    },
+    {
+      "name": "With href",
+      "props": { "href": "/dashboard", "color": "default" },
+      "children": "Go to dashboard"
+    },
+    {
+      "name": "External new tab",
+      "props": {
+        "href": "https://example.com",
+        "target": "_blank",
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Example.com"
+    }
+  ],
+  "conditionals": {
+    "target": { "requires": "href" },
+    "iconRight": { "requires": "icon" }
+  },
+  "hints": {
+    "target_needs_href": {
+      "when": { "target": true },
+      "message": "The target attribute only applies when href is set.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "template": "<List{{props}}>{{children}}</List>",
+  "propTargets": {},
+  "defaults": {
+    "borderless": false,
+    "enableDrag": false,
+    "layout": "",
+    "ordered": false,
+    "xpadding": false
+  },
+  "children": {
+    "editable": true,
+    "default": "List content",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "borderless",
+        "dark",
+        "enableDrag",
+        "layout",
+        "ordered",
+        "role",
+        "tabIndex",
+        "text",
+        "size",
+        "variant",
+        "xpadding"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "List content"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,66 @@
+{
+  "template": "<LoadingInline{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "text": "Loading",
+    "variant": "dotted"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "align"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Align left",
+      "props": {
+        "align": "left"
+      }
+    },
+    {
+      "name": "Align center",
+      "props": {
+        "align": "center"
+      }
+    },
+    {
+      "name": "Align right",
+      "props": {
+        "align": "right"
+      }
+    },
+    {
+      "name": "Solid spinner",
+      "props": {
+        "align": "center",
+        "variant": "solid",
+        "text": " Loading"
+      }
+    },
+    {
+      "name": "Custom label",
+      "props": {
+        "align": "left",
+        "text": " Saving changes…"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,25 @@
+{
+  "groups": [
+    { "name": "Content", "props": ["text"] },
+    { "name": "Behavior", "props": ["align"] },
+    { "name": "Appearance", "props": ["variant"] }
+  ],
+  "presets": [
+    { "name": "Align left", "props": { "align": "left" } },
+    { "name": "Align center", "props": { "align": "center" } },
+    { "name": "Align right", "props": { "align": "right" } },
+    {
+      "name": "Solid spinner",
+      "props": { "align": "center", "variant": "solid", "text": " Loading" }
+    },
+    {
+      "name": "Custom label",
+      "props": {
+        "align": "left",
+        "text": " Saving changes…"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_map/docs/_map_default.md

@@ -2,8 +2,8 @@ This kit provides a wrapping class to place around the MapLibre library. Complet
 
 Basic setup to start using MapLibre:
 - Install the npm package using `yarn add maplibre-gl`
-- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");`
- OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
+- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css");`
+ OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css' rel='stylesheet' />`
 - You can now use MapLibre within the Map Kit as shown in this example.
 
 __Notes__ : 

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -4,6 +4,12 @@ import mapTheme from '../../pb_map/pbMapTheme'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 
+// MapLibre 3+ uses maplibregl-* classes; mapbox-gl-draw still defaults to mapboxgl-*. These overrides allow Plugin to work with MapLibre 4.7.1.
+MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl"
+MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-"
+MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group"
+MapboxDraw.constants.classes.ATTRIBUTION = "maplibregl-ctrl-attrib"
+
 const MapWithPlugin = (props) => {
     //set Map instance to access from outside useEffect
     const [mapInstance, setMapInstance] = useState(null)

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

@@ -0,0 +1,25 @@
+{
+  "template": "<Map{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "zoomBtns",
+        "flyTo",
+        "zoomInClick",
+        "zoomOutClick",
+        "flyToClick"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,39 @@
+{
+  "template": "<Message{{props}}>{{children}}</Message>",
+  "propTargets": {},
+  "defaults": {
+    "avatarGrayscale": false,
+    "timezone": "America/New_York",
+    "alignTimestamp": "right"
+  },
+  "children": {
+    "editable": true,
+    "default": "Message content"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "avatarGrayscale",
+        "avatarName",
+        "avatarStatus",
+        "avatarUrl",
+        "label",
+        "message",
+        "timestamp",
+        "timestampObject",
+        "timezone",
+        "alignTimestamp"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Message content"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,162 @@
+{
+  "template": "<MultiLevelSelect{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "disabled": false,
+    "error": "",
+    "inputDisplay": "pills",
+    "inputName": "",
+    "label": "",
+    "required": false,
+    "requiredIndicator": false,
+    "returnAllSelected": false,
+    "showCheckedChildren": true,
+    "placeholder": "Start typing...",
+    "variant": "multi",
+    "wrapped": false,
+    "treeData": [
+      {
+        "label": "Company",
+        "value": "company",
+        "id": "mls_co",
+        "expanded": true,
+        "children": [
+          {
+            "label": "Engineering",
+            "value": "engineering",
+            "id": "mls_eng",
+            "children": [
+              {
+                "label": "Frontend",
+                "value": "frontend",
+                "id": "mls_fe"
+              },
+              {
+                "label": "Backend",
+                "value": "backend",
+                "id": "mls_be"
+              }
+            ]
+          },
+          {
+            "label": "Sales",
+            "value": "sales",
+            "id": "mls_sales"
+          }
+        ]
+      }
+    ]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "placeholder",
+        "treeData",
+        "selectedIds"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inputDisplay",
+        "variant",
+        "wrapped"
+      ]
+    },
+    {
+      "name": "Selection behavior",
+      "props": [
+        "returnAllSelected",
+        "showCheckedChildren",
+        "inputName"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onChange",
+        "onSelect"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Multi (default)",
+      "props": {
+        "variant": "multi",
+        "label": "Departments",
+        "placeholder": "Search teams…",
+        "inputDisplay": "pills"
+      }
+    },
+    {
+      "name": "Single select",
+      "props": {
+        "variant": "single",
+        "label": "Pick one team",
+        "placeholder": "Choose…",
+        "inputDisplay": "pills"
+      }
+    },
+    {
+      "name": "Plain input (no pills)",
+      "props": {
+        "variant": "multi",
+        "label": "Teams",
+        "inputDisplay": "none"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "variant": "multi",
+        "label": "Locked",
+        "disabled": true
+      }
+    },
+    {
+      "name": "With error",
+      "props": {
+        "variant": "multi",
+        "label": "Required field",
+        "error": "Choose at least one option."
+      }
+    },
+    {
+      "name": "Return all selected",
+      "props": {
+        "variant": "multi",
+        "label": "Include ancestors",
+        "returnAllSelected": true
+      }
+    },
+    {
+      "name": "Hide checked in tree",
+      "props": {
+        "variant": "multi",
+        "label": "Compact tree",
+        "showCheckedChildren": false
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "tree_data": {
+      "when": {},
+      "message": "treeData is a nested list with id, label, value, and optional children; expand with expanded on nodes you want open by default.",
+      "type": "info"
+    }
+  }
+}