RubyGems - playbook_ui - Versions diffs - 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7372 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201 - Mend

playbook_ui 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7372 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201

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

data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts DELETED Viewed

@@ -1,53 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-const circleChartTheme = {
-  title: { text: "" },
-  chart: {
-    type: "pie",
-  },
-  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,
-    },
-  },
-  plotOptions: {
-    pie: {
-      dataLabels: {
-        enabled: false,
-      },
-      innerSize: '50%',
-      borderColor: "",
-      borderWidth: null as number | null,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-    },
-  },
-  credits: { enabled: false }
-}
-export default circleChartTheme;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx DELETED Viewed

@@ -1,38 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-const data = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-const baseOptions = {
-  series: [{ data: data }],
-}
-const CircleChartPbStyles = () => {
-  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md DELETED Viewed

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

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx DELETED Viewed

@@ -1,54 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import usePBCopy from '../../pb_copy_button/usePBCopy'
-import Body from '../../pb_body/_body'
-import Textarea from '../../pb_textarea/_textarea'
-import Tooltip from '../../pb_tooltip/_tooltip'
-const CopyButtonHook = ({...props}) => {
-  // This is how you can use the copy button hook to copy text to the clipboard
-  // eslint-disable-next-line no-unused-vars
-  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
-  // I added a tooltip so it looks better in the ui
-  const [showTooltip, setShowTooltip] = useState(false)
-  const handleCopy = () => {
-    copyToClipboard()
-    setShowTooltip(true)
-    setTimeout(() => setShowTooltip(false), 1500)
-  }
-  useEffect(() => {
-    const el = document.getElementById('hookbody')
-    if (!el) return
-    el.addEventListener('click', handleCopy)
-    return () => {
-      el.removeEventListener('click', handleCopy)
-    }
-  }, [copyToClipboard])
-  return (
-    <div>
-      <Tooltip
-          delay={{ close: 1000 }}
-          forceOpenTooltip={showTooltip}
-          placement="top"
-          showTooltip={false}
-          text="Copied!"
-      >
-        <Body
-            cursor="pointer"
-            id="hookbody"
-            text="I'm a custom copy hook! Click this body to copy this text!"
-        />
-      </Tooltip>
-      <Textarea
-          {...props}
-          placeholder="Paste here"
-      />
-    </div>
-  )
-}
-export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md DELETED Viewed

@@ -1,3 +0,0 @@
-We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
-`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts DELETED Viewed

@@ -1,45 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-type UsePBCopyProps = {
-  value?: string
-  from?: string
-  timeout?: number
-}
-export default function usePBCopy({
-  value = '',
-  from = '',
-  timeout = 0,
-}: UsePBCopyProps) {
-  const [copied, setCopied] = useState(false)
-  const timerRef = useRef<number>()
-  const copy = () => {
-    if (!value && !from) return
-    if (value) {
-      navigator.clipboard.writeText(value)
-    } else {
-      const el = document.getElementById(from)
-      let text = el?.innerText
-      if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
-        text = el.value
-      }
-      if (text) navigator.clipboard.writeText(text)
-    }
-    setCopied(true)
-    window.clearTimeout(timerRef.current)
-    timerRef.current = window.setTimeout(() => {
-      setCopied(false)
-    }, timeout)
-  }
-  useEffect(() => {
-    return () => {
-      window.clearTimeout(timerRef.current)
-    }
-  }, [])
-  return [copied, copy] as const
-}

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

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

@@ -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_event_listeners.html.erb DELETED Viewed

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

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

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

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

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

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

@@ -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_overlay/docs/_overlay_color.jsx DELETED Viewed

@@ -1,63 +0,0 @@
-import React from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-const OverlayColor = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            color="black"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="black"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md DELETED Viewed

@@ -1,3 +0,0 @@
-The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
-NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.