playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,41 +1,171 @@
 {
   "template": "<RichTextEditor{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "requiredIndicator": false,
+    "simple": false,
+    "advancedEditorToolbar": true,
+    "inputHeight": "md",
+    "inputMinHeight": "sm",
+    "label": "Description",
+    "maxWidth": "md",
+    "name": "description"
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
+      "props": [
+        "label",
+        "name"
+      ]
+    },
+    {
+      "name": "Toolbar",
       "props": [
-        "advancedEditor",
         "advancedEditorToolbar",
-        "toolbarBottom",
+        "simple",
         "focus",
-        "inputOptions",
-        "inline",
-        "label",
-        "extensions",
-        "name",
-        "onChange",
-        "placeholder",
+        "sticky"
+      ]
+    },
+    {
+      "name": "Sizing",
+      "props": [
         "inputHeight",
         "inputMinHeight",
-        "requiredIndicator",
-        "simple",
-        "sticky",
-        "template",
-        "value",
-        "maxWidth",
-        "TrixEditor",
-        "trixInstance"
+        "maxWidth"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "requiredIndicator"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Description",
+        "name": "description"
+      }
+    },
+    {
+      "name": "Simple",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Notes",
+        "name": "notes",
+        "simple": true
+      }
+    },
+    {
+      "name": "Focus Toolbar",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": false,
+        "focus": true,
+        "label": "Focus editor"
+      }
+    },
+    {
+      "name": "Tall Editor",
+      "structureMode": "advanced",
+      "props": {
+        "inputHeight": "lg",
+        "inputMinHeight": "md",
+        "label": "Tall editor"
+      }
+    },
+    {
+      "name": "Required",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "Sticky",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Sticky editor",
+        "sticky": true
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  },
+  "hints": {
+    "advanced": {
+      "presetName": "Default",
+      "message": "The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.",
+      "type": "info"
+    },
+    "focus": {
+      "when": {
+        "focus": true
+      },
+      "message": "Focus Toolbar shows the toolbar when the advanced editor receives focus.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "advanced",
+    "modes": {
+      "advanced": {
+        "label": "Advanced",
+        "template": "<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>",
+        "children": "",
+        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
+        "externalImports": [
+          "import { useEditor, EditorContent } from '@tiptap/react'",
+          "import StarterKit from '@tiptap/starter-kit'",
+          "import TipTapLink from '@tiptap/extension-link'"
+        ]
+      }
+    }
+  },
+  "hiddenProps": [
+    "advancedEditor",
+    "extensions",
+    "inputOptions",
+    "onChange",
+    "template",
+    "TrixEditor",
+    "trixInstance",
+    "value",
+    "placeholder"
+  ],
+  "propSyncOnEnable": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  }
 }

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

@@ -0,0 +1,153 @@
+{
+  "structureModes": {
+    "default": "advanced",
+    "modes": {
+      "advanced": {
+        "label": "Advanced",
+        "template": "<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>",
+        "children": "",
+        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
+        "externalImports": [
+          "import { useEditor, EditorContent } from '@tiptap/react'",
+          "import StarterKit from '@tiptap/starter-kit'",
+          "import TipTapLink from '@tiptap/extension-link'"
+        ]
+      }
+    }
+  },
+  "defaults": {
+    "advancedEditorToolbar": true,
+    "inputHeight": "md",
+    "inputMinHeight": "sm",
+    "label": "Description",
+    "maxWidth": "md",
+    "name": "description",
+    "requiredIndicator": false,
+    "simple": false
+  },
+  "hiddenProps": [
+    "advancedEditor",
+    "extensions",
+    "inputOptions",
+    "onChange",
+    "template",
+    "TrixEditor",
+    "trixInstance",
+    "value",
+    "placeholder"
+  ],
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name"]
+    },
+    {
+      "name": "Toolbar",
+      "props": ["advancedEditorToolbar", "simple", "focus", "sticky"]
+    },
+    {
+      "name": "Sizing",
+      "props": ["inputHeight", "inputMinHeight", "maxWidth"]
+    },
+    {
+      "name": "State",
+      "props": ["requiredIndicator"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Description",
+        "name": "description"
+      }
+    },
+    {
+      "name": "Simple",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": true,
+        "label": "Notes",
+        "name": "notes",
+        "simple": true
+      }
+    },
+    {
+      "name": "Focus Toolbar",
+      "structureMode": "advanced",
+      "props": {
+        "advancedEditorToolbar": false,
+        "focus": true,
+        "label": "Focus editor"
+      }
+    },
+    {
+      "name": "Tall Editor",
+      "structureMode": "advanced",
+      "props": {
+        "inputHeight": "lg",
+        "inputMinHeight": "md",
+        "label": "Tall editor"
+      }
+    },
+    {
+      "name": "Required",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "Sticky",
+      "structureMode": "advanced",
+      "props": {
+        "label": "Sticky editor",
+        "sticky": true
+      }
+    }
+  ],
+  "conditionals": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  },
+  "propSyncOnEnable": {
+    "advancedEditorToolbar": {
+      "structureMode": "advanced"
+    },
+    "inputHeight": {
+      "structureMode": "advanced"
+    },
+    "inputMinHeight": {
+      "structureMode": "advanced"
+    },
+    "sticky": {
+      "structureMode": "advanced"
+    }
+  },
+  "hints": {
+    "advanced": {
+      "presetName": "Default",
+      "message": "The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.",
+      "type": "info"
+    },
+    "focus": {
+      "when": { "focus": true },
+      "message": "Focus Toolbar shows the toolbar when the advanced editor receives focus.",
+      "type": "info"
+    }
+  }
+}

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

@@ -8,7 +8,29 @@
     "multiple": false,
     "required": false,
     "requiredIndicator": false,
-    "showArrow": false
+    "showArrow": false,
+    "blankSelection": "Select an option",
+    "label": "Country",
+    "name": "country",
+    "options": [
+      {
+        "value": "us",
+        "text": "United States"
+      },
+      {
+        "value": "ca",
+        "text": "Canada"
+      },
+      {
+        "value": "uk",
+        "text": "United Kingdom"
+      },
+      {
+        "value": "au",
+        "text": "Australia"
+      }
+    ],
+    "value": "us"
   },
   "groups": [
     {
@@ -18,8 +40,7 @@
         "name",
         "value",
         "options",
-        "blankSelection",
-        "includeBlank"
+        "blankSelection"
       ]
     },
     {
@@ -28,7 +49,8 @@
         "disabled",
         "error",
         "required",
-        "requiredIndicator"
+        "requiredIndicator",
+        "onChange"
       ]
     },
     {
@@ -93,36 +115,35 @@
       }
     },
     {
-      "name": "Disabled",
+      "name": "Multiple",
       "props": {
-        "label": "Role",
-        "name": "role",
-        "value": "member",
-        "disabled": true,
+        "label": "Teams",
+        "name": "teams",
+        "multiple": true,
         "options": [
           {
-            "value": "admin",
-            "text": "Admin"
+            "value": "eng",
+            "text": "Engineering"
           },
           {
-            "value": "member",
-            "text": "Member"
+            "value": "design",
+            "text": "Design"
           },
           {
-            "value": "guest",
-            "text": "Guest"
+            "value": "ops",
+            "text": "Operations"
           }
         ]
       }
     },
     {
-      "name": "Required",
+      "name": "Inline Compact",
       "props": {
         "label": "Priority",
         "name": "priority",
         "value": "medium",
-        "required": true,
-        "requiredIndicator": true,
+        "inline": true,
+        "compact": true,
         "options": [
           {
             "value": "low",
@@ -145,5 +166,30 @@
       "requires": "label"
     }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled select with a selected value and a simple options array.",
+      "type": "info"
+    },
+    "error": {
+      "presetName": "With Error",
+      "message": "With Error passes an error message and blank selection for validation states.",
+      "type": "info"
+    },
+    "multiple": {
+      "presetName": "Multiple",
+      "message": "Multiple switches the native select into multi-select mode using the same options shape.",
+      "type": "info"
+    },
+    "inline_compact": {
+      "presetName": "Inline Compact",
+      "message": "Inline Compact combines inline and compact for dense form layouts.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": [
+    "inputOptions",
+    "includeBlank"
+  ]
 }

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

@@ -1,12 +1,32 @@
 {
+  "defaults": {
+    "blankSelection": "Select an option",
+    "compact": false,
+    "disabled": false,
+    "inline": false,
+    "label": "Country",
+    "multiple": false,
+    "name": "country",
+    "options": [
+      { "value": "us", "text": "United States" },
+      { "value": "ca", "text": "Canada" },
+      { "value": "uk", "text": "United Kingdom" },
+      { "value": "au", "text": "Australia" }
+    ],
+    "required": false,
+    "requiredIndicator": false,
+    "showArrow": false,
+    "value": "us"
+  },
+  "hiddenProps": ["inputOptions", "includeBlank"],
   "groups": [
     {
       "name": "Content",
-      "props": ["label", "name", "value", "options", "blankSelection", "includeBlank"]
+      "props": ["label", "name", "value", "options", "blankSelection"]
     },
     {
       "name": "State",
-      "props": ["disabled", "error", "required", "requiredIndicator"]
+      "props": ["disabled", "error", "required", "requiredIndicator", "onChange"]
     },
     {
       "name": "Appearance",
@@ -44,27 +64,26 @@
       }
     },
     {
-      "name": "Disabled",
+      "name": "Multiple",
       "props": {
-        "label": "Role",
-        "name": "role",
-        "value": "member",
-        "disabled": true,
+        "label": "Teams",
+        "name": "teams",
+        "multiple": true,
         "options": [
-          { "value": "admin", "text": "Admin" },
-          { "value": "member", "text": "Member" },
-          { "value": "guest", "text": "Guest" }
+          { "value": "eng", "text": "Engineering" },
+          { "value": "design", "text": "Design" },
+          { "value": "ops", "text": "Operations" }
         ]
       }
     },
     {
-      "name": "Required",
+      "name": "Inline Compact",
       "props": {
         "label": "Priority",
         "name": "priority",
         "value": "medium",
-        "required": true,
-        "requiredIndicator": true,
+        "inline": true,
+        "compact": true,
         "options": [
           { "value": "low", "text": "Low" },
           { "value": "medium", "text": "Medium" },
@@ -76,5 +95,26 @@
   "conditionals": {
     "requiredIndicator": { "requires": "label" }
   },
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows a labeled select with a selected value and a simple options array.",
+      "type": "info"
+    },
+    "error": {
+      "presetName": "With Error",
+      "message": "With Error passes an error message and blank selection for validation states.",
+      "type": "info"
+    },
+    "multiple": {
+      "presetName": "Multiple",
+      "message": "Multiple switches the native select into multi-select mode using the same options shape.",
+      "type": "info"
+    },
+    "inline_compact": {
+      "presetName": "Inline Compact",
+      "message": "Inline Compact combines inline and compact for dense form layouts.",
+      "type": "info"
+    }
+  }
 }