RubyGems - playbook_ui_docs - Versions diffs - 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805 - Mend

playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (208) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.overrides.json ADDED Viewed

@@ -0,0 +1,126 @@
+{
+  "defaults": {
+    "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"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_multiple_users/docs/_playground.json ADDED Viewed

@@ -0,0 +1,182 @@
+{
+  "template": "<MultipleUsers{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "reverse": false,
+    "size": "sm",
+    "withTooltip": false,
+    "maxDisplayedUsers": 4,
+    "users": [
+      {
+        "name": "Anna Black",
+        "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "tooltip": "Anna Black · Engineer"
+      },
+      {
+        "name": "Jordan Lee",
+        "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg",
+        "tooltip": "Jordan Lee · Designer"
+      },
+      {
+        "name": "Sam Rivera",
+        "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg",
+        "tooltip": "Sam Rivera · PM"
+      },
+      {
+        "name": "Chris Patel",
+        "imageUrl": "https://randomuser.me/api/portraits/men/75.jpg",
+        "tooltip": "Chris Patel · Engineer"
+      }
+    ]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "users",
+        "maxDisplayedUsers",
+        "withTooltip"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "reverse"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Team · sm",
+      "props": {
+        "size": "sm",
+        "users": [
+          {
+            "name": "Anna Black",
+            "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+          },
+          {
+            "name": "Jordan Lee",
+            "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg"
+          },
+          {
+            "name": "Sam Rivera",
+            "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg"
+          },
+          {
+            "name": "Chris Patel",
+            "imageUrl": "https://randomuser.me/api/portraits/men/75.jpg"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Team · lg",
+      "props": {
+        "size": "lg",
+        "users": [
+          {
+            "name": "Anna Black",
+            "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+          },
+          {
+            "name": "Jordan Lee",
+            "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg"
+          },
+          {
+            "name": "Sam Rivera",
+            "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Initials only",
+      "props": {
+        "size": "md",
+        "users": [
+          {
+            "name": "Anna Black"
+          },
+          {
+            "name": "Jordan Lee"
+          },
+          {
+            "name": "Sam Rivera"
+          }
+        ]
+      }
+    },
+    {
+      "name": "With tooltips",
+      "props": {
+        "withTooltip": true,
+        "users": [
+          {
+            "name": "Anna Black",
+            "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+            "tooltip": "Anna Black · Engineer"
+          },
+          {
+            "name": "Jordan Lee",
+            "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg",
+            "tooltip": "Jordan Lee · Designer"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Reverse order",
+      "props": {
+        "reverse": true,
+        "size": "xs",
+        "users": [
+          {
+            "name": "Anna Black",
+            "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+          },
+          {
+            "name": "Jordan Lee",
+            "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg"
+          },
+          {
+            "name": "Sam Rivera",
+            "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Overflow (+more)",
+      "props": {
+        "maxDisplayedUsers": 3,
+        "size": "sm",
+        "users": [
+          {
+            "name": "Anna Black",
+            "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+          },
+          {
+            "name": "Jordan Lee",
+            "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg"
+          },
+          {
+            "name": "Sam Rivera",
+            "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg"
+          },
+          {
+            "name": "Chris Patel",
+            "imageUrl": "https://randomuser.me/api/portraits/men/75.jpg"
+          },
+          {
+            "name": "Morgan Quinn",
+            "imageUrl": "https://randomuser.me/api/portraits/women/12.jpg"
+          }
+        ]
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}