playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md

@@ -0,0 +1,12 @@
+The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, block-style menu, formatting actions) is rendered with Playbook Rails kits (`pb_rails`). The editor document is a vanilla TipTap `Editor` instance; HTML is synced to a hidden `<input>` so standard Rails forms can submit the value.
+
+### How TipTap is loaded (Rails)
+
+- The kit’s module script (`rich_text_editor_rails.js`) uses `import()` with **full URLs** on [esm.sh](https://esm.sh) (e.g. `@tiptap/core@2.8.0`). esm.sh resolves dependencies server-side, so **no `<script type="importmap">`** is required—this avoids conflicts when the host page already has an import map (e.g. Vite in dev, or another app map) because Firefox only applies one native map.
+- You do not need TipTap in your app’s npm dependencies or Gemfile for this kit; the browser loads modules from esm.sh when the page runs.
+- Ensure **CSP** allows loading scripts from `https://esm.sh` (and esm.sh’s redirected module URLs) if you use a strict `script-src` / `connect-src`.
+
+### Relation to the React implementation
+
+- Same core: both use TipTap v2 on top of ProseMirror; styling lives in Playbook SCSS (`_tiptap_styles.scss`) so the editor chrome lines up between platforms.
+- Different shell: Rails uses ERB + Playbook Rails components + inline module script. React uses `RichTextEditor` / `_tiptap_editor.tsx` and TipTap wired through the bundled Playbook React package—see Advanced Default for that stack and when you need TipTap installed in your JavaScript bundle.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("rich_text_editor", props: {
+  simple: true,
+  label: "Notes",
+  input_options: {
+    id: "rails_rte_simple_demo",
+    name: "content",
+  },
+  value: "<p>Use <strong>Bold</strong> and <em>Italic</em> from the toolbar.</p>",
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md

@@ -0,0 +1,8 @@
+### Simple toolbar (`simple: true`)
+
+Pass **`simple: true`** for a compact toolbar: **Bold**, **Italic**, **Undo**, and **Redo** (same history controls as the full toolbar—plain buttons, not popovers).
+
+- No block-style dropdown (no “Paragraph” / headings / lists in the menu).
+- No **`pb_popover`** on the toolbar—useful in **native `<dialog>`** modals, turbo-loaded panels, or other tight layouts where the full block menu is awkward to position.
+
+The underlying TipTap document still accepts the same HTML as the default Rails editor; `simple` only changes which **toolbar controls** are shown.

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

@@ -1,6 +1,8 @@
 examples:
 
   rails:
+  - rich_text_editor_rails_default: "Rails (TipTap)"
+  - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default

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

@@ -0,0 +1,128 @@
+{
+  "template": "<SectionSeparator{{props}}>{{children}}</SectionSeparator>",
+  "propTargets": {},
+  "defaults": {
+    "color": "default",
+    "lineStyle": "solid",
+    "orientation": "horizontal",
+    "variant": "card"
+  },
+  "groups": [
+    {
+      "name": "Orientation & variant",
+      "props": [
+        "orientation",
+        "variant"
+      ]
+    },
+    {
+      "name": "Line",
+      "props": [
+        "lineStyle",
+        "color"
+      ]
+    },
+    {
+      "name": "Label",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Horizontal line",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Vertical rule",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "With label",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "text": "Section",
+        "variant": "card"
+      },
+      "children": ""
+    },
+    {
+      "name": "Primary accent",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "primary",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed vertical",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "On background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "default"
+      }
+    },
+    {
+      "name": "Primary on background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "primary",
+        "text": "Divider"
+      },
+      "children": ""
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "vertical_height": {
+      "when": {
+        "orientation": "vertical"
+      },
+      "message": "Vertical separators often need a height (global prop) so the line is visible.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "default": "",
+    "editable": true,
+    "hideWhenPropSet": [
+      "text"
+    ]
+  }
+}

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

@@ -0,0 +1,109 @@
+{
+  "template": "<SectionSeparator{{props}}>{{children}}</SectionSeparator>",
+  "children": {
+    "default": "",
+    "editable": true,
+    "hideWhenPropSet": ["text"]
+  },
+  "groups": [
+    {
+      "name": "Orientation & variant",
+      "props": ["orientation", "variant"]
+    },
+    {
+      "name": "Line",
+      "props": ["lineStyle", "color"]
+    },
+    {
+      "name": "Label",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Horizontal line",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Vertical rule",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "With label",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "text": "Section",
+        "variant": "card"
+      },
+      "children": ""
+    },
+    {
+      "name": "Primary accent",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "primary",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed vertical",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "On background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "default"
+      }
+    },
+    {
+      "name": "Primary on background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "primary",
+        "text": "Divider"
+      },
+      "children": ""
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "vertical_height": {
+      "when": { "orientation": "vertical" },
+      "message": "Vertical separators often need a height (global prop) so the line is visible.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+{
+  "template": "<Select{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "compact": false,
+    "disabled": false,
+    "inline": false,
+    "multiple": false,
+    "required": false,
+    "requiredIndicator": false,
+    "showArrow": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "value",
+        "options",
+        "blankSelection",
+        "includeBlank"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inline",
+        "compact",
+        "showArrow",
+        "multiple"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Country",
+        "name": "country",
+        "value": "us",
+        "options": [
+          {
+            "value": "us",
+            "text": "United States"
+          },
+          {
+            "value": "ca",
+            "text": "Canada"
+          },
+          {
+            "value": "uk",
+            "text": "United Kingdom"
+          },
+          {
+            "value": "au",
+            "text": "Australia"
+          }
+        ]
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Department",
+        "name": "department",
+        "value": "",
+        "blankSelection": "Select a department",
+        "error": "Please choose a department.",
+        "options": [
+          {
+            "value": "eng",
+            "text": "Engineering"
+          },
+          {
+            "value": "design",
+            "text": "Design"
+          },
+          {
+            "value": "sales",
+            "text": "Sales"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Role",
+        "name": "role",
+        "value": "member",
+        "disabled": true,
+        "options": [
+          {
+            "value": "admin",
+            "text": "Admin"
+          },
+          {
+            "value": "member",
+            "text": "Member"
+          },
+          {
+            "value": "guest",
+            "text": "Guest"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Priority",
+        "name": "priority",
+        "value": "medium",
+        "required": true,
+        "requiredIndicator": true,
+        "options": [
+          {
+            "value": "low",
+            "text": "Low"
+          },
+          {
+            "value": "medium",
+            "text": "Medium"
+          },
+          {
+            "value": "high",
+            "text": "High"
+          }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,80 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "value", "options", "blankSelection", "includeBlank"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inline", "compact", "showArrow", "multiple"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Country",
+        "name": "country",
+        "value": "us",
+        "options": [
+          { "value": "us", "text": "United States" },
+          { "value": "ca", "text": "Canada" },
+          { "value": "uk", "text": "United Kingdom" },
+          { "value": "au", "text": "Australia" }
+        ]
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Department",
+        "name": "department",
+        "value": "",
+        "blankSelection": "Select a department",
+        "error": "Please choose a department.",
+        "options": [
+          { "value": "eng", "text": "Engineering" },
+          { "value": "design", "text": "Design" },
+          { "value": "sales", "text": "Sales" }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Role",
+        "name": "role",
+        "value": "member",
+        "disabled": true,
+        "options": [
+          { "value": "admin", "text": "Admin" },
+          { "value": "member", "text": "Member" },
+          { "value": "guest", "text": "Guest" }
+        ]
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Priority",
+        "name": "priority",
+        "value": "medium",
+        "required": true,
+        "requiredIndicator": true,
+        "options": [
+          { "value": "low", "text": "Low" },
+          { "value": "medium", "text": "Medium" },
+          { "value": "high", "text": "High" }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": { "requires": "label" }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,145 @@
+{
+  "template": "<SelectableCard{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "error": false,
+    "icon": false,
+    "multi": true,
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "value",
+        "name",
+        "inputId"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "checked",
+        "disabled",
+        "error",
+        "multi"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "icon",
+        "customIcon"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unselected",
+      "props": {
+        "checked": false,
+        "text": "Option label",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "checked": true,
+        "text": "Selected option",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "checked": false,
+        "disabled": true,
+        "text": "Unavailable",
+        "name": "selectable_card_demo",
+        "value": "opt2",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "With check icon",
+      "props": {
+        "checked": true,
+        "icon": true,
+        "text": "With icon",
+        "name": "selectable_card_demo",
+        "value": "opt3",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "checked": false,
+        "multi": false,
+        "text": "Plan A",
+        "name": "plan",
+        "value": "a",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Display input variant",
+      "props": {
+        "checked": false,
+        "variant": "displayInput",
+        "text": "Display style",
+        "name": "selectable_card_demo",
+        "value": "disp1",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Error state",
+      "props": {
+        "checked": false,
+        "error": true,
+        "text": "Invalid choice",
+        "name": "selectable_card_demo",
+        "value": "err1",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "customIcon": {
+      "requires": {
+        "icon": true
+      }
+    }
+  },
+  "hints": {
+    "onchange_note": {
+      "when": {},
+      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+      "type": "info"
+    }
+  }
+}