playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb

@@ -1,117 +0,0 @@
-<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
-    <%= pb_rails("button", props: { id: "button-open-example-turbo-frames", margin_right: "md", text: "Open Dialog via Custom Event" }) %>
-    <%= pb_rails("button", props: { id: "open-dialog-button", data: { open_dialog: "dialog-confirm-turbo-frames" }, margin_right: "md", text: "Custom Event Linked to Confirm Button" }) %>
-    <%= pb_rails("button", props: { id: "button-open-multi-dialog", text: "Mutliple Events Example" }) %>
-<% end %>
-
-<!-- Example 1: Basic dialog with custom event opening -->
-<%= pb_rails("dialog", props: { 
-  id: "dialog-open-turbo-frames", 
-  title: "Click Event Simulation", 
-  text: "Demonstrating Opening the Dialog with a Custom Event.",
-  custom_event_type: "dialogOpen",
-  cancel_button: "Cancel Button",
-  confirm_button: "Okay", 
-  confirm_button_id: "confirm-button-turbo-frames"
-}) %>
-
-<script>
-    document.getElementById("button-open-example-turbo-frames").addEventListener("click", () => {
-        console.log("📣 Dispatching 'dialogOpen' custom event")
-
-        window.dispatchEvent(new CustomEvent("dialogOpen", { 
-            bubbles: true,
-            detail: { 
-                dialogId: "dialog-open-turbo-frames",
-                action: "open"
-            }
-        }))
-
-        console.log("✅ Custom event dispatched - dialog should open")
-    })
-</script>
-
-<!-- Example 2: Dialog with custom event linking confirm button to closing the dialog-->
-<%= pb_rails("dialog", props: { 
-  id: "dialog-confirm-turbo-frames", 
-  title: "Custom Event Button Action", 
-  text: "Clicking this dialog's confirm button triggers closing the dialog as well.",
-  custom_event_type: "turboResponse",
-  cancel_button: "Cancel",
-  cancel_button_id: "cancel-button-id-turbo-frames",
-  confirm_button: "Confirm Button", 
-  confirm_button_id: "confirm-button-id-turbo-frames"
-}) %>
-
-<script>
-  window.addEventListener("turboResponse", (event) => {
-    const { dialogId, action, cancelButtonId } = event.detail || {}
-    console.log("📦 turboResponse event triggered:", { dialogId, action, cancelButtonId })
-
-    if (action === "close" && cancelButtonId) {
-        const dialog = document.getElementById(dialogId)
-        if (dialog?.close) {
-          console.log("🚪 Closing dialog programmatically")
-          dialog.close()
-        }
-    }
-  })
-
-  document.getElementById("confirm-button-id-turbo-frames").addEventListener("click", function () {
-    console.log("✅ Confirm button clicked! Triggering cancel via turboResponse")
-
-    window.dispatchEvent(new CustomEvent("turboResponse", {
-      detail: {
-        dialogId: "dialog-confirm-turbo-frames",
-        action: "close", 
-        cancelButtonId: "cancel-button-id-turbo-frames"
-      }
-    }))
-  })
-</script>
-
-<!-- Example 3: Dialog with multiple custom event types -->
-<%= pb_rails("dialog", props: { 
-  id: "multi-event-dialog", 
-  title: "Multiple Event Types", 
-  text: "This dialog responds to multiple custom event types - see console logs.",
-  custom_event_type: "dialogOpenMutli,turboResponseMulti",
-  cancel_button: "Cancel",
-  cancel_button_id: "multi-event-cancel",
-  confirm_button: "Confirm", 
-  confirm_button_id: "multi-event-confirm"
-}) %>
-
-<script>
-  document.getElementById("button-open-multi-dialog").addEventListener("click", () => {
-    console.log("📣 Dispatching 'dialogOpenMutli' custom event")
-    window.dispatchEvent(new CustomEvent("dialogOpenMutli", { 
-      detail: { 
-        dialogId: "multi-event-dialog",
-        action: "open"
-      }
-    }))
-  })
-
-  document.getElementById("multi-event-confirm")?.addEventListener("click", function() {
-    console.log("✅ Confirm clicked — dispatching 'turboResponseMulti' to simulate dialog close")
-
-    window.dispatchEvent(new CustomEvent("turboResponseMulti", {
-      detail: {
-        dialogId: "multi-event-dialog",
-        action: "close",
-        cancelButtonId: "multi-event-cancel"
-      }
-    }))
-  })
-
-  window.addEventListener("turboResponseMulti", (event) => {
-    const { dialogId, action, cancelButtonId } = event.detail || {}
-  
-    if (action === "close" && dialogId) {
-      const dialog = document.getElementById(dialogId)
-      dialog.close?.()
-      console.log("🚪 Closing dialog programmatically")
-    }
-  })
-</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md

@@ -1,9 +0,0 @@
-The `custom_event_type` prop allows you to specify custom events that will trigger the dialog's initialization or control its behavior. This is especially useful when working with Turbo Frame updates where standard DOM events might not suffice.
-
-The examples demonstrate two use cases:
-1) Opening a dialog via custom event dispatch: The first example shows how to configure a dialog to listen for a specific custom event (dialogOpen). When this event is dispatched, the dialog will automatically open, making it easy to trigger the dialog from JavaScript or after Turbo Frame operations.
-2) Controlling dialog button actions with custom events: The second example demonstrates how to set up a dialog that can have its confirm button triggered through external events (turboResponse). This pattern is useful when you need to programmatically confirm a dialog after some background operation completes.
-3) Multiple custom events: The third example combines the first two to show how `custom_event_type` prop can support multiple event types separated by a comma.
-
-For Turbo integration, you can use standard Turbo events like turbo:frame-load or turbo:submit-end as your `custom_event_type` to ensure the dialog responds properly after Turbo navigation or form submissions. The dialog component will listen for these events automatically.
-The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb

@@ -1,43 +0,0 @@
-<% data_shadow = [
-  { id: "51", text: "Task 1" },
-  { id: "52", text: "Task 2" },
-  { id: "53", text: "Task 3" }
-] %>
-
-<% data_outline = [
-  { id: "61", text: "Task 1" },
-  { id: "62", text: "Task 2" },
-  { id: "63", text: "Task 3" }
-] %>
-
-<%= pb_rails("flex", props: { justify: "around" }) do %>
-  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
-    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
-      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
-      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
-        <% data_shadow.each do |item| %>
-          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
-            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
-              <%= pb_rails("body", props: { text: item[:text] }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
-    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
-      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
-      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
-        <% data_outline.each do |item| %>
-          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
-            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
-              <%= pb_rails("body", props: { text: item[:text] }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb

@@ -1,55 +0,0 @@
-<% initial_items = [
-  {
-    id: "141",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "142",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "143",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<% next_init_items = [
-  {
-    id: "151",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "152",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "153",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex", props: { gap: "sm" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<br/>
-
-<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex", props: { gap: "sm" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md

@@ -1 +0,0 @@
-  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb

@@ -1,42 +0,0 @@
-<% initial_items = [
-  {
-    id: "100",
-    url: "https://unsplash.it/500/400/?image=638",
-  },
-  {
-    id: "200",
-    url: "https://unsplash.it/500/400/?image=639",
-  },
-  {
-    id: "300",
-    url: "https://unsplash.it/500/400/?image=640",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex") do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<script>
-  const itemIds = ["item_100", "item_200", "item_300"];
-
-  itemIds.forEach((id) => {
-    const element = document.getElementById(id);
-    if (element) {
-      element.addEventListener("dragstart", (event) => {
-        console.log(`${id} drag start!`);
-      });
-      element.addEventListener("dragend", (event) => {
-        console.log(`${id} drag end!`);
-      });
-    }
-  });
-</script>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md

@@ -1 +0,0 @@
-You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb

@@ -1,41 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    id: "filter_within_trubo_frames",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-    popover_props: { append_to: "parent"  },
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -1 +0,0 @@
-By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 45 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugePbStyles = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -1,85 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const gaugeTheme = {
-  title: { text: "" },
-  chart: {
-    type: "solidgauge",
-    events: {
-      render() {
-        this.container
-          const arc = this.container.querySelector('path.gauge-pane');
-          if (arc) arc.setAttribute('stroke-linejoin', 'round');
-      }
-    }
-  },
-  pane: {
-    size: "90%",
-    startAngle: -100,
-    endAngle: 100,
-    background: [
-      {
-        borderWidth: 20,
-        innerRadius: "90%",
-        outerRadius: "90%",
-        shape: "arc",
-        className: "gauge-pane",
-        borderColor: colors.border_light,
-        borderRadius: '50%',
-      },
-    ],
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    pointFormat:
-      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      "<b>{point.y}</b>",
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  yAxis: {
-    min: 0,
-    max: 100,
-    lineWidth: 0,
-    tickPositions: [] as number[],
-  },
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_1,
-      borderWidth: 20,
-      color: colors.data_1,
-      radius: 90,
-      innerRadius: "90%",
-      y: -26,
-      dataLabels: {
-        borderWidth: 0,
-        color: colors.text_lt_default,
-        enabled: true,
-        format: '<span class="fix">{y:,f}</span>',
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_2,
-        },
-        y: -26,
-      },
-    },
-  },
-  credits: { enabled: false }
-}
-
-export default gaugeTheme;

data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import { buildCss } from '../../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
-
-import Avatar from "../../pb_avatar/_avatar";
-import Body from "../../pb_body/_body";
-import Flex from "../../pb_flex/_flex";
-import Badge from "../../pb_badge/_badge";
-import Detail from "../../pb_detail/_detail";
-import Background from "../../pb_background/_background";
-
-type LayoutParticipantProps = {
-  className?: string,
-  name?: string,
-  territory?: string,
-  points?: string,
-  rank?: string,
-  avatar?: string,
-  winner?: boolean,
-  self?: boolean,
-} & GlobalProps
-
-export const Participant = (props: LayoutParticipantProps) => {
-  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self, hasLastWinnerAndSelf } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  const isLastWinnerAndSelf = hasLastWinnerAndSelf && self && winner
-  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : '', isLastWinnerAndSelf ? 'last' : ''), globalProps(props), className)
-  return (
-    <Background
-        backgroundColor={winner ? "success_subtle" : "white"}
-        className={classes}
-        padding="xs"
-        style={dynamicInlineProps}
-    >
-      <Flex justify="between">
-        <Avatar
-            imageUrl={avatar}
-            marginRight="sm"
-            name={name}
-            size="sm"
-        />
-        <Body flexGrow={1}>
-          <Flex justify="between">
-            <Body
-                color={winner && !isLastWinnerAndSelf ? "success" : "default"}
-                truncate={1}
-            >
-              {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
-            </Body>
-            <Body
-                color={winner && !isLastWinnerAndSelf ? "success" : "light"}
-                display="flex"
-            >
-              {points && (<>
-                <strong>{points}</strong>
-                <Detail
-                    color={winner && !isLastWinnerAndSelf ? "success" : "light"}
-                    text="pts"
-                />
-              </>)}
-            </Body>
-          </Flex>
-          <Body color="light">
-            {territory}
-            &nbsp;
-            <Badge
-                text={rank}
-                variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
-            />
-          </Body>
-        </Body>
-      </Flex>
-    </Background>
-  )
-}
-
-export default Participant

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-}, {
-  name: 'Project Development',
-  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const baseOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.