playbook_ui 14.11.1.pre.alpha.PBNTR440enableglobalpropspbformwith5624 → 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json

@@ -1,299 +0,0 @@
-[
-  {
-    "year": "2021",
-    "id": "1",
-    "quarter": null,
-    "month": null,
-    "day": null,
-    "newEnrollments": "20",
-    "scheduledMeetings": "10",
-    "attendanceRate": "51%",
-    "completedClasses": "3",
-    "classCompletionRate": "33%",
-    "graduatedStudents": "19",
-    "children": [
-      {
-        "year": "2021",
-        "id": "2",
-        "quarter": "Q1",
-        "month": null,
-        "day": null,
-        "newEnrollments": "2",
-        "scheduledMeetings": "35",
-        "attendanceRate": "32%",
-        "completedClasses": "15",
-        "classCompletionRate": "52%",
-        "graduatedStudents": "36",
-        "children": [
-          {
-            "year": "2021",
-            "id": "3",
-            "quarter": "Q1",
-            "month": "January",
-            "day": null,
-            "newEnrollments": "16",
-            "scheduledMeetings": "20",
-            "attendanceRate": "11%",
-            "completedClasses": "13",
-            "classCompletionRate": "47%",
-            "graduatedStudents": "28",
-            "children": [
-              {
-                "year": "2021",
-                "id": "4",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "10",
-                "newEnrollments": "34",
-                "scheduledMeetings": "28",
-                "attendanceRate": "97%",
-                "completedClasses": "20",
-                "classCompletionRate": "15%",
-                "graduatedStudents": "17"
-              },
-              {
-                "year": "2021",
-                "id": "5",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "20",
-                "newEnrollments": "43",
-                "scheduledMeetings": "23",
-                "attendanceRate": "66%",
-                "completedClasses": "26",
-                "classCompletionRate": "47%",
-                "graduatedStudents": "9"
-              }
-            ]
-          },
-          {
-            "year": "2021",
-            "id": "6",
-            "quarter": "Q1",
-            "month": "February",
-            "day": null,
-            "newEnrollments": "20",
-            "scheduledMeetings": "41",
-            "attendanceRate": "95%",
-            "completedClasses": "26",
-            "classCompletionRate": "83%",
-            "graduatedStudents": "43",
-            "children": [
-              {
-                "year": "2021",
-                "id": "7",
-                "quarter": "Q1",
-                "month": "February",
-                "day": "15",
-                "newEnrollments": "19",
-                "scheduledMeetings": "35",
-                "attendanceRate": "69%",
-                "completedClasses": "8",
-                "classCompletionRate": "75%",
-                "graduatedStudents": "23"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "year": "2022",
-    "id": "8",
-    "quarter": null,
-    "month": null,
-    "day": null,
-    "newEnrollments": "25",
-    "scheduledMeetings": "17",
-    "attendanceRate": "75%",
-    "completedClasses": "5",
-    "classCompletionRate": "45%",
-    "graduatedStudents": "32",
-    "children": [
-      {
-        "year": "2022",
-        "id": "9",
-        "quarter": "Q1",
-        "month": null,
-        "day": null,
-        "newEnrollments": "2",
-        "scheduledMeetings": "35",
-        "attendanceRate": "32%",
-        "completedClasses": "15",
-        "classCompletionRate": "52%",
-        "graduatedStudents": "36",
-        "children": [
-          {
-            "year": "2022",
-            "id": "10",
-            "quarter": "Q1",
-            "month": "January",
-            "day": null,
-            "newEnrollments": "16",
-            "scheduledMeetings": "20",
-            "attendanceRate": "11%",
-            "completedClasses": "13",
-            "classCompletionRate": "47%",
-            "graduatedStudents": "28",
-            "children": [
-              {
-                "year": "2022",
-                "id": "11",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "15",
-                "newEnrollments": "34",
-                "scheduledMeetings": "28",
-                "attendanceRate": "97%",
-                "completedClasses": "20",
-                "classCompletionRate": "15%",
-                "graduatedStudents": "17"
-              },
-              {
-                "year": "2022",
-                "id": "12",
-                "quarter": "Q1",
-                "month": "January",
-                "day": "25",
-                "newEnrollments": "43",
-                "scheduledMeetings": "23",
-                "attendanceRate": "66%",
-                "completedClasses": "26",
-                "classCompletionRate": "47%",
-                "graduatedStudents": "9"
-              }
-            ]
-          },
-          {
-            "year": "2022",
-            "id": "13",
-            "quarter": "Q1",
-            "month": "May",
-            "day": null,
-            "newEnrollments": "20",
-            "scheduledMeetings": "41",
-            "attendanceRate": "95%",
-            "completedClasses": "26",
-            "classCompletionRate": "83%",
-            "graduatedStudents": "43",
-            "children": [
-              {
-                "year": "2022",
-                "id": "14",
-                "quarter": "Q1",
-                "month": "May",
-                "day": "2",
-                "newEnrollments": "19",
-                "scheduledMeetings": "35",
-                "attendanceRate": "69%",
-                "completedClasses": "8",
-                "classCompletionRate": "75%",
-                "graduatedStudents": "23"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "year": "2023",
-    "id": "15",
-    "quarter": null,
-    "month": null,
-    "day": null,
-    "newEnrollments": "10",
-    "scheduledMeetings": "15",
-    "attendanceRate": "65%",
-    "completedClasses": "4",
-    "classCompletionRate": "49%",
-    "graduatedStudents": "29",
-    "children": [
-      {
-        "year": "2023",
-        "id": "16",
-        "quarter": "Q1",
-        "month": null,
-        "day": null,
-        "newEnrollments": "2",
-        "scheduledMeetings": "35",
-        "attendanceRate": "32%",
-        "completedClasses": "15",
-        "classCompletionRate": "52%",
-        "graduatedStudents": "36",
-        "children": [
-          {
-            "year": "2023",
-            "id": "17",
-            "quarter": "Q1",
-            "month": "March",
-            "day": null,
-            "newEnrollments": "16",
-            "scheduledMeetings": "20",
-            "attendanceRate": "11%",
-            "completedClasses": "13",
-            "classCompletionRate": "47%",
-            "graduatedStudents": "28",
-            "children": [
-              {
-                "year": "2023",
-                "id": "18",
-                "quarter": "Q1",
-                "month": "March",
-                "day": "10",
-                "newEnrollments": "34",
-                "scheduledMeetings": "28",
-                "attendanceRate": "97%",
-                "completedClasses": "20",
-                "classCompletionRate": "15%",
-                "graduatedStudents": "17"
-              },
-              {
-                "year": "2023",
-                "id": "19",
-                "quarter": "Q1",
-                "month": "March",
-                "day": "11",
-                "newEnrollments": "43",
-                "scheduledMeetings": "23",
-                "attendanceRate": "66%",
-                "completedClasses": "26",
-                "classCompletionRate": "47%",
-                "graduatedStudents": "9"
-              }
-            ]
-          },
-          {
-            "year": "2023",
-            "id": "20",
-            "quarter": "Q1",
-            "month": "April",
-            "day": null,
-            "newEnrollments": "20",
-            "scheduledMeetings": "41",
-            "attendanceRate": "95%",
-            "completedClasses": "26",
-            "classCompletionRate": "83%",
-            "graduatedStudents": "43",
-            "children": [
-              {
-                "year": "2023",
-                "id": "21",
-                "quarter": "Q1",
-                "month": "April",
-                "day": "15",
-                "newEnrollments": "19",
-                "scheduledMeetings": "35",
-                "attendanceRate": "69%",
-                "completedClasses": "8",
-                "classCompletionRate": "75%",
-                "graduatedStudents": "23"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-]

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb

@@ -1,13 +0,0 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-turbo-frames", custom_event_type: "datePickerLoader" }) %>
-<%= pb_rails("button", props: { id: "date-picker-loader", text: "Click Event Simulation" }) %>
-
-<script>
-    document.getElementById("date-picker-loader").addEventListener("click", () => {
-        window.document.dispatchEvent(
-            new CustomEvent("datePickerLoader", {
-                bubbles: true,
-            })
-        )
-        console.log("Event 'datePickerLoader' dispatched - in a real implementation, this event would trigger the date picker's reinitialization through the custom_event_type prop connection")
-    })
-</script>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md

@@ -1,3 +0,0 @@
-The `custom_event_type` prop allows you to specify a custom event that will trigger the date picker's initialization, in addition to the default initialization on `DOMContentLoaded`. This is particularly useful in dynamic contexts like Turbo Frame updates where you need to reinitialize the date picker after new content loads. For Turbo integration, use `custom_event_type: "turbo:before-render"` to ensure the date picker properly reinitializes after Turbo navigation events. 
-
-In this example, we demonstrate the setup pattern by connecting a button to dispatch a "datePickerLoader" event - while the date picker's event listener is properly configured through the `custom_event_type` prop, this demo only logs the event dispatch to the console to illustrate the connection structure.

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

@@ -1,5 +0,0 @@
-For a simplified version of the Draggable API for the List kit, you can do the following:
-
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
-
-An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.

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

@@ -1,38 +0,0 @@
-<%= pb_rails("selectable_list",
-        props: {
-          enable_drag: true,
-          variant: "radio",
-          items: [
-            { drag_id: "41",
-              text: "Task 1",
-              input_options: {
-                value: "1",
-                name: "radio-name",
-              }
-            },
-            { drag_id: "42",
-              text: "Task 2",
-              checked: true,
-              input_options: {
-                value: "2",
-                name: "radio-name",
-              }
-            },
-            { drag_id: "43",
-              text: "Task 3",
-              input_options: {
-                value: "3",
-                name: "radio-name",
-              }
-            },
-            { drag_id: "44",
-              text: "Task 4",
-              input_options: {
-                value: "4",
-                name: "radio-name",
-              }
-            }
-          ]
-        }
-    )
-%>

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

@@ -1,3 +0,0 @@
-For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
-
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_drawer/context.ts

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const noop = (): void => void 0
-
-type DrawerContextType = {
-  onClose: () => void
-}
-
-export const DrawerContext = React.createContext<DrawerContextType>({
-  onClose: noop,
-})

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -1,38 +0,0 @@
-import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-
-  return [opened, toggle]
-}
-
-const DrawerBehavior = () => {
-  const [drawerOpen, toggleDrawerOpen] = useDrawer()
-
-  return (
-    <>
-      <Flex wrap>
-        <Button id='sm'
-            marginRight='md'
-            onClick={toggleDrawerOpen}
-        >
-          {"Push Behavior"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}      
-            onClose={toggleDrawerOpen}
-            opened={drawerOpen}
-            size={"lg"}
-        >
-          Test me (Push Behavior)
-        </Drawer>
-      </Flex>
-    </>
-  )
-}
-
-export default DrawerBehavior

data/app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx

@@ -1,60 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const breakpointValues = {
-  none: 0,
-  xs: 575,
-  sm: 768,
-  md: 992,
-  lg: 1200,
-  xl: 1400,
-} as const
-
-type BreakpointSize = keyof typeof breakpointValues
-
-interface UseBreakpointProps {
-  breakpoint?: BreakpointSize
-  triggerId?: string
-}
-
-export const useBreakpoint = ({ 
-  breakpoint = 'none',
-  triggerId 
-}: UseBreakpointProps) => {
-  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false)
-  const [isUserClosed, setIsUserClosed] = useState(false)
-
-  useEffect(() => {
-    if (breakpoint === 'none') return
-
-    const handleResize = () => {
-      const width = window.innerWidth
-      
-        const openBreakpointWidth = breakpointValues[breakpoint]
-        if (width >= openBreakpointWidth) {
-          setIsOpenBreakpointOpen(true)
-        } else {
-          setIsOpenBreakpointOpen(false)
-          setIsUserClosed(false)
-        }
-
-      // Handle menu button visibility
-      if (triggerId) {
-        const menuButton = document.getElementById(triggerId)
-        if (menuButton) {
-          menuButton.style.display = isOpenBreakpointOpen ? 'none' : ''
-        }
-      }
-    }
-
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [breakpoint, triggerId, isOpenBreakpointOpen])
-
-  return {
-    isOpenBreakpointOpen,
-    isUserClosed,
-    setIsUserClosed
-  }
-} 

data/app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx

@@ -1,21 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const useDrawerAnimation = (isOpen: boolean) => {
-  const [animationState, setAnimationState] = useState('')
-
-  useEffect(() => {
-    if (isOpen) {
-      setAnimationState('afterOpen')
-    } else if (!isOpen && animationState === 'afterOpen') {
-      setAnimationState('beforeClose')
-      setTimeout(() => {
-        setAnimationState('')
-      }, 200)
-    }
-  }, [isOpen])
-
-  return {
-    animationState,
-    isVisible: isOpen || animationState === 'beforeClose'
-  }
-} 

data/app/pb_kits/playbook/pb_icon_button/_icon_button.scss

@@ -1,78 +0,0 @@
-$icon_colors: (
-  default: $text_lt_default,
-  link:   $primary_action
-);
-
-@mixin icon_button_variant($variant) {
-  .icon_button_icon {
-    color: map-get($icon_colors, $variant);
-  }
-}
-
-.pb_icon_button_kit_default,
-.pb_icon_button_kit_link {
-  width: fit-content;
-  height: fit-content;
-
-  &:hover {
-    [class*="pb_button_kit"] {
-      background-color: $bg_light;
-    }
-    .icon_button_icon {
-      color: $primary_action;
-    }
-  }
-
-  &:active {
-    [class*="pb_button_kit"] {
-      background-color: $bg_light;
-    }
-    .icon_button_icon {
-      color: $primary_action;
-    }
-  }
-
-  &:hover:active {
-    [class*="pb_button_kit"] {
-      background-color: $bg_light;
-    }
-    .icon_button_icon {
-      color: $text_lt_default;
-    }
-  }
-
-  &:focus {
-    outline: 2px solid $primary_action;
-    border-radius: 8px;
-  }
-
-  [class*="pb_button_kit"] {
-    min-height: 0;
-    background: none;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    flex-grow: 0;
-    width: fit-content;
-    height: fit-content;
-    line-height: normal;
-    flex-basis: auto;
-    min-width: 0;
-    padding: 0;
-
-    .icon_button_icon {
-      display: block;
-      vertical-align: middle;
-    }
-  }
-}
-
-.pb_icon_button_kit_default {
-  @include icon_button_variant(default);
-}
-
-.pb_icon_button_kit_link {
-  @include icon_button_variant(link);
-}

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("icon_button") %>
-</br>
-<%= pb_rails("icon_button", props: {variant: "link"}) %>

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

@@ -1,7 +0,0 @@
-examples:
-  
-  rails:
-  - icon_button_default: Default
-  
-  
-  

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -1,16 +0,0 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("button", props: { type: object.type,
-                                  link: object.link,
-                                  new_window:object.new_window,
-                                  target: object.target,
-                                  dark: object.dark,
-                                  border_radius: "lg" }) do %>
-  <%= pb_rails("icon", props: { icon: object.icon,
-                                fixed_width: true,
-                                dark: object.dark,
-                                size: "2x",
-                                color: "text_lt_default",
-                                classname: "icon_button_icon",
-                                padding_x: "xxs", padding_y: "xs" }) %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbIconButton
-    class IconButton < ::Playbook::KitBase
-      prop :type, type: Playbook::Props::Enum,
-                  values: %w[button submit reset],
-                  default: "button"
-      prop :icon, required: false, default: "bars"
-      prop :link
-      prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
-      prop :target
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default link],
-                     default: "default"
-      def classname
-        generate_classname("pb_icon_button_kit", variant)
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    id: "phone_number_input",
-    format_as_you_type: true
-}) %>
-
-<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
-
-<%= javascript_tag do %>
-    document.querySelector('#clickable').addEventListener('click', () => {
-        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
-        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
-
-        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
-    })
-<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -1,24 +0,0 @@
-import React, { useState } from "react";
-import { PhoneNumberInput, Body } from "playbook-ui";
-
-const PhoneNumberInputFormat = (props) => {
-    const [phoneNumber, setPhoneNumber] = useState("");
-
-    const handleOnChange = ({ number }) => {
-        setPhoneNumber(number);
-    };
-
-    return (
-        <>
-            <PhoneNumberInput
-                formatAsYouType
-                id="format"
-                onChange={handleOnChange}
-                {...props}
-            />
-            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
-        </>
-    );
-};
-
-export default PhoneNumberInputFormat;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md

@@ -1 +0,0 @@
-NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually.