playbook_ui 15.0.0.pre.alpha.PLAY2511playbookiconsupgrade10732 → 15.0.0.pre.alpha.PLAY198710641

data/lib/playbook/engine.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "action_view/railtie"
+require "webpacker/react"
 require "view_component"
 
 module Playbook

data/lib/playbook/kit_base.rb

@@ -122,7 +122,7 @@ module Playbook
       html_options.each do |key, value|
         if key == :style && value.is_a?(Hash)
           # Convert style hash to CSS string
-          merged[:style] = value.map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
+          merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
         else
           merged[key] = value
         end
@@ -136,27 +136,6 @@ module Playbook
       merged.deep_merge(data_attributes)
     end
 
-    # Custom react_component helper to replace Webpacker React
-    # This will render a div with data attributes for the component name and props
-    # The mounting script will look for these divs and mount the appropriate React components
-    # Sister def in app/helpers/react_helper in playbook-website. Any changes here should be reflected there.
-    def react_component(component_name, props = {}, html_options = {})
-      # Convert props to JSON for the data attribute
-      props_json = props.to_json
-
-      # Build the HTML attributes
-      html_attrs = {
-        "data-pb-react-component" => component_name,
-        "data-pb-react-props" => props_json,
-      }
-
-      # Merge with any additional HTML options
-      html_attrs.merge!(html_options)
-
-      # Return the div element
-      content_tag(:div, "", html_attrs)
-    end
-
     def global_inline_props
       {
         height: height,
@@ -193,7 +172,7 @@ module Playbook
     end
 
     def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.tr('_', '-')}: #{value}" if inline_validator(key, value) }.compact
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if inline_validator(key, value) }.compact
       styles.join("; ").presence
     end
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.0.0"
-  VERSION = "15.0.0.pre.alpha.PLAY2511playbookiconsupgrade10732"
+  VERSION = "15.0.0.pre.alpha.PLAY198710641"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.0.0.pre.alpha.PLAY2511playbookiconsupgrade10732
+  version: 15.0.0.pre.alpha.PLAY198710641
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-24 00:00:00.000000000 Z
+date: 2025-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -53,6 +53,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
+- !ruby/object:Gem::Dependency
+  name: react-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.1
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -68,19 +82,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 2.83.0
 - !ruby/object:Gem::Dependency
-  name: vite_rails
+  name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.2
 - !ruby/object:Gem::Dependency
   name: brakeman
   requirement: !ruby/object:Gem::Requirement
@@ -875,7 +889,6 @@ files:
 - app/pb_kits/playbook/pb_contact/contact.test.js
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
-- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -2757,7 +2770,6 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
-- app/pb_kits/playbook/pb_section_separator/section_separator.test.js
 - app/pb_kits/playbook/pb_select/_select.scss
 - app/pb_kits/playbook/pb_select/_select.tsx
 - app/pb_kits/playbook/pb_select/docs/_description.md
@@ -3699,13 +3711,12 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-DeH7NK-i.js
-- dist/chunks/_typeahead-CCGp0OQe.js
-- dist/chunks/_weekday_stacked-CZAWLGyu.js
-- dist/chunks/componentRegistry-DzmmLR2x.js
+- dist/chunks/_line_graph-CUfJ7E4h.js
+- dist/chunks/_typeahead-DCp1lVJx.js
+- dist/chunks/_weekday_stacked-B-e7xOfU.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-QZuu1ltS.js
-- dist/chunks/pb_form_validation-CleM960_.js
+- dist/chunks/lib-BTs5acfO.js
+- dist/chunks/pb_form_validation-CKkaQFX3.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md

@@ -1,5 +0,0 @@
-The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
-
-- Use `email` to display emails.
-- Use `international` to display International phone numbers exactly as provided (no formatting applied).
-- Use `extension` to display four digit phone extensions.

data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js

@@ -1,165 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import SectionSeparator from './_section_separator'
-
-const testId = "section-separator-kit"
-
-describe("Section Separator Kit", () => {
-    test("renders basic section separator with default props", () => {
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
-    })
-
-    test("renders with text prop", () => {
-        const text = "Section Title"
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-                text={text}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        const textElement = screen.getByText(text)
-        
-        expect(kit).toHaveClass("pb_section_separator_kit")
-        expect(textElement).toBeInTheDocument()
-    })
-
-    test("renders with children", () => {
-        const childText = "Custom Content"
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-            >
-                <span>{childText}</span>
-            </SectionSeparator>
-        )
-
-        const kit = screen.getByTestId(testId)
-        const childElement = screen.getByText(childText)
-        
-        expect(kit).toHaveClass("pb_section_separator_kit")
-        expect(childElement).toBeInTheDocument()
-    })
-
-    test("renders vertical orientation", () => {
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-                orientation="vertical"
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
-    })
-
-    test("renders background variant", () => {
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-                variant="background"
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
-    })
-
-    test("renders dashed line style", () => {
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-                lineStyle="dashed"
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_dashed pb_section_separator_color_default")
-    })
-
-    test("renders primary color", () => {
-        render(
-            <SectionSeparator
-                color="primary"
-                data={{ testid: testId }}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_primary")
-    })
-
-    test("renders dark mode", () => {
-        render(
-            <SectionSeparator
-                dark
-                data={{ testid: testId }}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
-    })
-
-    test("renders with custom className", () => {
-        const customClass = "custom-class"
-        render(
-            <SectionSeparator
-                className={customClass}
-                data={{ testid: testId }}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default custom-class")
-    })
-
-    test("renders vertical with children", () => {
-        const childText = "Vertical Content"
-        render(
-            <SectionSeparator
-                data={{ testid: testId }}
-                orientation="vertical"
-            >
-                <span>{childText}</span>
-            </SectionSeparator>
-        )
-
-        const kit = screen.getByTestId(testId)
-        const childElement = screen.getByText(childText)
-        
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
-        expect(childElement).toBeInTheDocument()
-    })
-
-    test("renders all props combined", () => {
-        const text = "Combined Props"
-        render(
-            <SectionSeparator
-                color="primary"
-                dark
-                data={{ testid: testId }}
-                lineStyle="dashed"
-                orientation="vertical"
-                variant="background"
-            >
-                <span>{text}</span>
-            </SectionSeparator>
-        )
-
-        const kit = screen.getByTestId(testId)
-        const childElement = screen.getByText(text)
-        
-        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_vertical pb_section_separator_dashed pb_section_separator_color_primary")
-        expect(childElement).toBeInTheDocument()
-    })
-})

data/dist/chunks/componentRegistry-DzmmLR2x.js

@@ -1 +0,0 @@
-import React__default from"react";import ReactDOM__default from"react-dom";class ComponentRegistry{constructor(){this.components=new Map;this.mountedComponents=new Set;this._mountQueue=new WeakMap}register(name,component){this.components.set(name,component);const kebab=this.toKebabCase(name);if(kebab!==name)this.components.set(kebab,component)}registerComponents(components){Object.entries(components).forEach((([name,comp])=>this.register(name,comp)))}get(name){return this.components.get(name)}mountComponents(root=document){const nodes=root.querySelectorAll("[data-pb-react-component]");nodes.forEach((el=>{if(this.mountedComponents.has(el))return;const name=el.getAttribute("data-pb-react-component");if(!name)return;const Comp=this.get(name);if(!Comp)return;this._scheduleMount(el,Comp)}))}_scheduleMount(el,Comp,immediate=false){let entry=this._mountQueue.get(el);if(!entry){entry={scheduled:false,retries:0};this._mountQueue.set(el,entry)}if(entry.scheduled&&!immediate)return;const run=()=>{entry.scheduled=false;this._tryRender(el,Comp,entry)};entry.scheduled=true;if(immediate){run()}else{requestAnimationFrame(run)}}_tryRender(el,Comp,entry){if(!el.isConnected)return;try{const props=this.extractProps(el);ReactDOM__default.render(React__default.createElement(Comp,props),el);this.mountedComponents.add(el);entry.retries=0}catch(err){entry.retries=(entry.retries||0)+1;if(entry.retries<=3){this._scheduleMount(el,Comp,false)}else{console.warn("[PB] Mount failed after retries:",err)}}}unmountComponents(){this.mountedComponents.forEach((el=>{this._safeUnmount(el)}));this.mountedComponents.clear()}unmountWithin(rootEl){if(!rootEl)return;const toUnmount=[];this.mountedComponents.forEach((el=>{if(rootEl.contains(el))toUnmount.push(el)}));toUnmount.forEach((el=>this._safeUnmount(el)))}_safeUnmount(el){if(!el||!el.isConnected){this.mountedComponents.delete(el);return}try{ReactDOM__default.unmountComponentAtNode(el)}catch(err){console.warn("[PB] Unmount warning:",err)}this.mountedComponents.delete(el)}extractProps(el){const props={};const blob=el.getAttribute("data-pb-react-props");if(blob){try{Object.assign(props,JSON.parse(blob))}catch(e){console.warn("[PB] Failed to parse data-pb-react-props JSON:",e)}}Array.from(el.attributes).forEach((attr=>{const name=attr.name;if(!name.startsWith("data-pb-"))return;if(name==="data-pb-react-component"||name==="data-pb-react-props")return;const key=name.replace("data-pb-","");if(props[key]===void 0)props[key]=attr.value}));return props}toKebabCase(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/([a-zA-Z])([0-9])/g,"$1-$2").replace(/([0-9])([a-zA-Z])/g,"$1-$2").toLowerCase()}}window.ComponentRegistry=window.ComponentRegistry||new ComponentRegistry;const ComponentRegistry$1=window.ComponentRegistry;export{ComponentRegistry$1 as C};