playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogLoading = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogScrollable = () => {
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -1,6 +1,8 @@
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "playbook-ui"
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -1,7 +1,10 @@
 /* eslint-disable react/jsx-handler-names */
 
 import React, { useState } from "react"
-import { Button, Dialog, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -0,0 +1,75 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
+
+export default class PbDialog extends PbEnhancedElement {
+  static get selector() {
+    return DIALOG_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
+    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+  }
+
+  setupDialog() {
+    const openTrigger = document.querySelectorAll("[data-open-dialog]");
+    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+      loadingButton.addEventListener("click", function () {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        let newClass = currentClass.replace("_enabled", "_disabled_loading");
+        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+        // Disable the buttons
+        okayLoadingButton.disabled = true;
+        if (cancelButton) cancelButton.disabled = true;
+
+        okayLoadingButton.className = newClass;
+        if (cancelButton) cancelButton.className = newCancelClass;
+      });
+    }
+
+    openTrigger.forEach((open) => {
+      open.addEventListener("click", () => {
+        var openTriggerData = open.dataset.openDialog;
+        var targetDialog = document.getElementById(openTriggerData)
+        if (targetDialog.open) return;
+        targetDialog.showModal();
+      });
+    });
+
+    closeTrigger.forEach((close) => {
+      close.addEventListener("click", () => {
+        var closeTriggerData = close.dataset.closeDialog;
+        document.getElementById(closeTriggerData).close();
+      });
+    });
+
+    // Close dialog box on outside click
+    dialogs.forEach((dialogElement) => {
+      dialogElement.addEventListener("mousedown", (event) => {
+        const dialogParentDataset = dialogElement.parentElement.dataset
+        if (dialogParentDataset.overlayClick === "overlay_close") return
+
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+
+        if (clickedOutsideDialogModal) {
+          dialogElement.close()
+          event.stopPropagation()
+        }
+      })
+    })
+  }
+}

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -60,6 +60,20 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
+        stringified_code = stringified_code.gsub(/import\s+(\w+)\s+from\s+['"]playbook-ui['"]/) do
+          "import { #{::Regexp.last_match(1)} } from 'playbook-ui'"
+        end
+        stringified_code = stringified_code.gsub("import { FormattedDate }", "import { Date as FormattedDate }")
+        # Combine separate playbook-ui import statements into one
+        imports = stringified_code.scan(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/)
+        components = imports.flatten.join(", ").split(",").map(&:strip).uniq
+        if components.any?
+          new_import_statement = "import { #{components.join(', ')} } from 'playbook-ui'"
+          stringified_code.gsub!(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/, "")
+          stringified_code = stringified_code.sub(/import\s+React[\s\S]+?\n/, "\\0\n#{new_import_statement}")
+        end
+        # Replace several empty lines with one empty line
+        stringified_code.gsub!(/\n\s*\n{2,}/, "\n\n")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -1,11 +1,195 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
+// Mixin for color variants
+@mixin drop-zone-colors($property) {
+  &.drop_zone_color_primary { #{$property}: $primary; }
+  &.drop_zone_color_secondary { #{$property}: $secondary; }
+  &.drop_zone_color_tertiary { #{$property}: $tertiary; }
+  &.drop_zone_color_success { #{$property}: $success; }
+  &.drop_zone_color_warning { #{$property}: $warning; }
+  &.drop_zone_color_error { #{$property}: $error; }
+  &.drop_zone_color_info { #{$property}: $info; }
+  &.drop_zone_color_royal { #{$property}: $royal; }
+  &.drop_zone_color_purple { #{$property}: $purple; }
+  &.drop_zone_color_teal { #{$property}: $teal; }
+  &.drop_zone_color_red { #{$property}: $red; }
+  &.drop_zone_color_yellow { #{$property}: $yellow; }
+  &.drop_zone_color_green { #{$property}: $green; }
+  &.drop_zone_color_orange { #{$property}: $orange; }
+}
+
+// Mixin for rgba color variants
+@mixin drop-zone-rgba-colors($property) {
+  &.drop_zone_color_primary { #{$property}: rgba($primary, $opacity_3); }
+  &.drop_zone_color_secondary { #{$property}: rgba($secondary, $opacity_3); }
+  &.drop_zone_color_tertiary { #{$property}: rgba($tertiary, $opacity_3); }
+  &.drop_zone_color_success { #{$property}: rgba($success, $opacity_3); }
+  &.drop_zone_color_warning { #{$property}: rgba($warning, $opacity_3); }
+  &.drop_zone_color_error { #{$property}: rgba($error, $opacity_3); }
+  &.drop_zone_color_info { #{$property}: rgba($info, $opacity_3); }
+  &.drop_zone_color_royal { #{$property}: rgba($royal, $opacity_3); }
+  &.drop_zone_color_purple { #{$property}: rgba($purple, $opacity_3); }
+  &.drop_zone_color_teal { #{$property}: rgba($teal, $opacity_3); }
+  &.drop_zone_color_red { #{$property}: rgba($red, $opacity_3); }
+  &.drop_zone_color_yellow { #{$property}: rgba($yellow, $opacity_3); }
+  &.drop_zone_color_green { #{$property}: rgba($green, $opacity_3); }
+  &.drop_zone_color_orange { #{$property}: rgba($orange, $opacity_3); }
+}
+
 .pb_draggable_container {
-  .is_dragging {
-    opacity: $opacity_4;
-  }
-  .pb_draggable_item:hover {
-    cursor: grab;
+  .pb_draggable_item {
+    &:hover {
+      cursor: grab;
+    }
+
+    &.is_dragging {
+      position: relative;
+
+      // Ghost variant - show the item at 50% opacity. Default behavior.
+      &.drop_zone_ghost {
+        opacity: $opacity_4;
+      }
+
+      // Outline variant
+      &.drop_zone_outline {
+        // Don't hide the content, only make it transparent
+        // This allows the browser to create a proper drag image
+        opacity: $opacity_5;
+
+        // Add outline
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border: 2px dashed $neutral;
+          border-radius: $border-radius-sm;
+          box-sizing: border-box;
+          z-index: 10;
+        }
+
+        // Apply color variants to the ::before element
+        &.drop_zone_color_primary::before { border-color: $primary; }
+        &.drop_zone_color_secondary::before { border-color: $secondary; }
+        &.drop_zone_color_tertiary::before { border-color: $tertiary; }
+        &.drop_zone_color_success::before { border-color: $success; }
+        &.drop_zone_color_warning::before { border-color: $warning; }
+        &.drop_zone_color_error::before { border-color: $error; }
+        &.drop_zone_color_info::before { border-color: $info; }
+        &.drop_zone_color_royal::before { border-color: $royal; }
+        &.drop_zone_color_purple::before { border-color: $purple; }
+        &.drop_zone_color_teal::before { border-color: $teal; }
+        &.drop_zone_color_red::before { border-color: $red; }
+        &.drop_zone_color_yellow::before { border-color: $yellow; }
+        &.drop_zone_color_green::before { border-color: $green; }
+        &.drop_zone_color_orange::before { border-color: $orange; }
+      }
+
+      // Shadow variant
+      &.drop_zone_shadow {
+        // Don't hide the content, only make it transparent
+        // This allows the browser to create a proper drag image
+        & > * {
+          opacity: 0;
+        }
+
+        // Add shadow background
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba($neutral, $opacity_5);
+          border-radius: $border-radius-sm;
+          z-index: 10;
+        }
+
+        // Apply rgba color variants to the ::before element
+        &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
+        &.drop_zone_color_secondary::before { background-color: rgba($secondary, $opacity_5); }
+        &.drop_zone_color_tertiary::before { background-color: rgba($tertiary, $opacity_5); }
+        &.drop_zone_color_success::before { background-color: rgba($success, $opacity_5); }
+        &.drop_zone_color_warning::before { background-color: rgba($warning, $opacity_5); }
+        &.drop_zone_color_error::before { background-color: rgba($error, $opacity_5); }
+        &.drop_zone_color_info::before { background-color: rgba($info, $opacity_5); }
+        &.drop_zone_color_royal::before { background-color: rgba($royal, $opacity_5); }
+        &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
+        &.drop_zone_color_teal::before { background-color: rgba($teal, $opacity_5); }
+        &.drop_zone_color_red::before { background-color: rgba($red, $opacity_5); }
+        &.drop_zone_color_yellow::before { background-color: rgba($yellow, $opacity_5); }
+        &.drop_zone_color_green::before { background-color: rgba($green, $opacity_5); }
+        &.drop_zone_color_orange::before { background-color: rgba($orange, $opacity_5); }
+      }
+
+      // Line variant - vertical by default (for horizontal layouts)
+      &.drop_zone_line {
+        // Keep original height but reduce width
+        width: 10% !important;
+        max-width: 10px !important;
+        position: relative;
+
+        // Hide all content
+        & > * {
+          opacity: 0;
+        }
+
+        // Add vertical line that takes the full height
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 4px;
+          height: 100%;
+          background-color: $neutral;
+          border-radius: 1000px;
+        }
+
+        // Apply color variants to the ::before element
+        &.drop_zone_color_primary::before { background-color: $primary; }
+        &.drop_zone_color_secondary::before { background-color: $secondary; }
+        &.drop_zone_color_tertiary::before { background-color: $tertiary; }
+        &.drop_zone_color_success::before { background-color: $success; }
+        &.drop_zone_color_warning::before { background-color: $warning; }
+        &.drop_zone_color_error::before { background-color: $error; }
+        &.drop_zone_color_info::before { background-color: $info; }
+        &.drop_zone_color_royal::before { background-color: $royal; }
+        &.drop_zone_color_purple::before { background-color: $purple; }
+        &.drop_zone_color_teal::before { background-color: $teal; }
+        &.drop_zone_color_red::before { background-color: $red; }
+        &.drop_zone_color_yellow::before { background-color: $yellow; }
+        &.drop_zone_color_green::before { background-color: $green; }
+        &.drop_zone_color_orange::before { background-color: $orange; }
+      }
+    }
   }
 }
+
+// Support for vertical layouts (horizontal line)
+.pb_draggable_container.vertical {
+  .pb_draggable_item {
+    &.is_dragging {
+      // Line variant for vertical layouts (horizontal line)
+      &.drop_zone_line {
+        // Keep original width but reduce height
+        width: 100% !important;
+        max-width: 200px !important;
+        height: 10% !important;
+        max-height: 10px !important;
+
+        // Add horizontal line that takes the full width
+        &::before {
+          width: 100%;
+          height: 4px;
+        }
+
+        // The color variants are already applied from above
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_draggable/_draggable.tsx

@@ -10,6 +10,8 @@ type DraggableProps = {
   className?: string;
   children?: React.ReactNode;
   data?: { [key: string]: string };
+  dropZone?: 'ghost' | 'outline' | 'shadow' | 'line';
+  dropZoneColor?: string; // This will accept color tokens like 'neutral', 'primary', etc.
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
 };
@@ -20,8 +22,10 @@ const Draggable = (props: DraggableProps) => {
     className,
     children,
     data = {},
+    dropZone = 'ghost',
+    dropZoneColor = 'neutral',
     htmlOptions = {},
-    id,
+    id
   } = props;
 
 
@@ -35,14 +39,23 @@ const Draggable = (props: DraggableProps) => {
     className
   );
 
+  // Pass down the dropZone and dropZoneColor props to children
+  const childrenWithProps = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, { dropZone, dropZoneColor });
+    }
+    return child;
+  });
+
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
+    <div
+        {...ariaProps}
+        {...dataProps}
         {...htmlProps}
-        className={classes} 
+        className={classes}
         id={id}
     >
-      {children}
+      {childrenWithProps}
     </div>
   );
 };

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -51,15 +51,18 @@ export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ 
-  children, 
-  initialItems, 
+export const DraggableProvider = ({
+  children,
+  initialItems,
   onReorder,
-  onDragStart, 
-  onDragEnter, 
-  onDragEnd, 
-  onDrop, 
-  onDragOver 
+  onDragStart,
+  onDragEnter,
+  onDragEnd,
+  onDrop,
+  onDragOver,
+  dropZone = 'ghost',
+  dropZoneColor = 'neutral',
+  dropZoneDirection = 'horizontal'
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -113,12 +116,15 @@ export const DraggableProvider = ({
     dragData: state.dragData,
     isDragging: state.isDragging,
     activeContainer: state.activeContainer,
+    dropZone,
+    dropZoneColor,
+    dropZoneDirection,
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state]);
+  }), [state, dropZone, dropZoneColor, dropZoneDirection]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -1,31 +1,34 @@
 export interface ItemType {
-    id: string;
-    container: string;
-    [key: string]: any;
-  }
-  
-  export interface InitialStateType {
-    items: ItemType[];
-    dragData: { id: string; initialGroup: string };
-    isDragging: string;
-    activeContainer: string;
-  }
-  
-  export type ActionType =
-    | { type: 'SET_ITEMS'; payload: ItemType[] }
-    | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
-    | { type: 'SET_IS_DRAGGING'; payload: string }
-    | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-    | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+  id: string;
+  container: string;
+  [key: string]: any;
+}
 
-    export interface DraggableProviderType {
-      children: React.ReactNode;
-      initialItems: ItemType[];
-      onReorder: (items: ItemType[]) => void;
-      onDragStart?: (id: string, container: string) => void; 
-      onDragEnter?: (id: string, container: string) => void;
-      onDragEnd?: () => void; 
-      onDrop?: (container: string) => void; 
-      onDragOver?: (e: Event, container: string) => void;
-    }
+export interface InitialStateType {
+  items: ItemType[];
+  dragData: { id: string; initialGroup: string };
+  isDragging: string;
+  activeContainer: string;
+}
+
+export type ActionType =
+  | { type: 'SET_ITEMS'; payload: ItemType[] }
+  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+  | { type: 'SET_IS_DRAGGING'; payload: string }
+  | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+  | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+
+  export interface DraggableProviderType {
+    children: React.ReactNode;
+    initialItems: ItemType[];
+    onReorder: (items: ItemType[]) => void;
+    onDragStart?: (id: string, container: string) => void;
+    onDragEnter?: (id: string, container: string) => void;
+    onDragEnd?: () => void;
+    onDrop?: (container: string) => void;
+    onDragOver?: (e: Event, container: string) => void;
+    dropZone?: 'ghost' | 'outline' | 'shadow' | 'line';
+    dropZoneColor?: string;
+    dropZoneDirection?: 'horizontal' | 'vertical';
+  }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
 
 // Initial items to be dragged
 const data = [