RubyGems - playbook_ui_docs - Versions diffs - 16.6.0.pre.alpha.PLAY2941iconbuttonsfontawesomeicons16097 → 16.6.0.pre.alpha.RTEPOC15801 - Mend

playbook_ui_docs 16.6.0.pre.alpha.PLAY2941iconbuttonsfontawesomeicons16097 → 16.6.0.pre.alpha.RTEPOC15801

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 (203) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c73d7e39ee2d54ad79690085c70d2a9c10526aa131ee62ffd93f704760f5f7e6
-  data.tar.gz: cd77236d355c932aa891b1399b454457d3b747af42e24b3340fb3950e861d5ca
+  metadata.gz: d14ea2a71d5d146173907999dea08fb898f880c1b5761fbe6f1c6ca1a9d7533b
+  data.tar.gz: 5293a0f97723a83ac0d989e578fd96363ab587c86f543b2704a9d912530bb0f6
 SHA512:
-  metadata.gz: 59d420775a3433a84a5b5ad352c5f42a5ce152be31c437a9a44d74df0b5f5c54a532361f9d4b11e7751498eb4fee670afa948d75ce9d9f6b05a25bfc555b7534
-  data.tar.gz: 9b28a722fb5484d7018c68f555444049bb4adf31af8e546ca65498e67e29e4d0a7ada965e4db83c33d694db1103742fad8119e6ffbb7997f6fb04ec20b508557
+  metadata.gz: 119cc36000b349187af3d486eb28e5b1156054a56cddfbf2b55fc1167ef5d76c4082e24c472f65be6a9767285d96bb1f180344259d4077699b7ab37f86d38913
+  data.tar.gz: 41a756a6db3f323db459a31bd632e93352561d11284510d568dc3added1fd238e561935466cf8d60862451c3ccf79269fe9c04307e30f41e0864d45bc8f79f68

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@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' />`
+- 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' />`
 - 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,12 +4,6 @@ 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_pagination/docs/_pagination_default.html.erb CHANGED Viewed

@@ -1,2 +1,2 @@
-<%= pb_rails("pagination", props: { model: @extra_users, view: self }) %>
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>

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

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ships an `importmap` in the ERB template that maps `@tiptap/*` and ProseMirror packages to ES module URLs on a CDN (see `rich_text_editor.html.erb`). A small `type="module"` script `import()`s `@tiptap/core`, `@tiptap/starter-kit`, `@tiptap/extension-link`, and related modules at runtime.
+- You do not need to add TipTap to your app’s npm dependencies or Gemfile for this kit to work out of the box—the browser loads those modules from the CDN when the page runs.
+- Your app must support import maps and ES modules in the browser (modern browsers; ensure CSP allows the CDN if you lock scripts down).
+### 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 ADDED Viewed

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

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

@@ -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_select/docs/_select_error.jsx CHANGED Viewed

@@ -28,7 +28,7 @@ const SelectError = (props) => {
       <Select
           error={error}
           label="Favorite Food"
-          name="food-error"
+          name="food"
           options={options}
           value="2"
           {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx CHANGED Viewed

@@ -23,7 +23,7 @@ const SelectInline = (props) => {
       <Select
           inline
           label="Favorite Food"
-          name="food-inline"
+          name="food"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx CHANGED Viewed

@@ -24,7 +24,7 @@ const SelectInlineCompact = (props) => {
           compact
           inline
           label="Favorite Food"
-          name="food-inline-compact"
+          name="food"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx CHANGED Viewed

@@ -23,7 +23,7 @@ const SelectInlineShowArrow = (props) => {
       <Select
           inline
           label="Favorite Food"
-          name="food-inline-show-arrow"
+          name="food"
           options={options}
           showArrow
           {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb CHANGED Viewed

@@ -22,15 +22,15 @@
       value_text: "BBQ",
     },
     {
-      value: "5",
+      value: "4",
       value_text: "Sushi",
     },
     {
-      value: "6",
+      value: "4",
       value_text: "Chinese",
     },
     {
-      value: "7",
+      value: "4",
       value_text: "Hot Dogs",
     },
   ]

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx CHANGED Viewed

@@ -17,19 +17,19 @@ const SelectMultiple = (props) => {
       text: 'Tacos',
     },
     {
-      value: '4',
+      value: '3',
       text: 'BBQ',
     },
     {
-      value: '5',
+      value: '3',
       text: 'Sushi',
     },
     {
-      value: '6',
+      value: '3',
       text: 'Chinese',
     },
     {
-      value: '7',
+      value: '3',
       text: 'Hot Dogs',
     },
   ]
@@ -39,7 +39,7 @@ const SelectMultiple = (props) => {
       <Select
           label="Favorite Food"
           multiple
-          name="food-multiple"
+          name="food"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx CHANGED Viewed

@@ -7,12 +7,12 @@ import Button from "../../pb_button/_button"
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({
     defaultValues: {
-      "food-react-hook": '',
+      food: '',
     },
   })
   const [submittedData, setSubmittedData] = useState({
-    "food-react-hook": '',
+    food: '',
   })
   const onSubmit = (data) => {
@@ -39,8 +39,8 @@ const SelectReactHook = (props) => {
       <form onSubmit={handleSubmit(onSubmit)}>
         <Select
             {...props}
-            {...register("food-react-hook", { required: true })}
-            error={errors["food-react-hook"] ? "Please select a food." : null}
+            {...register("food", { required: true })}
+            error={errors.food ? "Please select a food." : null}
             label="Favorite Food"
             options={options}
         />
@@ -51,7 +51,7 @@ const SelectReactHook = (props) => {
           />
       </form>
       <Body padding="xs"
-          text={`Food: ${submittedData["food-react-hook"]}`}
+          text={`Food: ${submittedData.food}`}
       />
     </>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx CHANGED Viewed

@@ -22,7 +22,7 @@ const SelectRequiredIndicator = () => {
     <div>
       <Select
           label="Favorite Snack"
-          name="food-required-indicator"
+          name="food"
           options={options}
           requiredIndicator
       />