playbook_ui_docs 15.6.0.pre.rc.0 → 15.6.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 828fd024c2950b857d0ff61e9aced530635e804cea10943f716aae842a061588
-  data.tar.gz: 6c1b739e7cac2a08139638f8c5215a8d88f90f96179218c23d8c899a1836ae44
+  metadata.gz: 4987902f89518c468e20c702133d617e50d86901c73846e7fdea9b1f6f4f525e
+  data.tar.gz: 18eae8474a957ab83ef997c20f8a3d39ff85523aa66763c05b0cbf40b7952cbc
 SHA512:
-  metadata.gz: 505e690902c0dae8ae9fe2597ebb432daa2326010de9559048913b5714fdfdd23c1b9221a3c40cae285bd4baa675bd379850abaa2e1658a48447f29a8252feca
-  data.tar.gz: 5adae0c2447b01560e700be5cd1a3e9becea1df8faa306dd9b4c689ebafb53fd14e8f24f01bc64927085c509cd26cba562f715f6954604a1d2c46640a33e2690
+  metadata.gz: be65a3fa636a65d0fbc7b9a40833a64e1e61dbd054db607c78cd8281ef7d3eda2d8115f17e164c21f521ec3fabe74487e0d9c380f252c68fe111db83898223a9
+  data.tar.gz: 2d650e15339c3532f55c2fcbe747c0bab4082169c6cf635bf0309ffd49165156a940ab3f5da249ed5cc0f1416a7d568e5d181656e3d5a564f24d3960bc961112

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -29,167 +29,5 @@
       label: "Graduated Students",
     }
 ] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<% column_definitions_two = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        accessor: "newEnrollments",
-        label: "New Enrollments",
-      },
-      {
-        accessor: "scheduledMeetings",
-        label: "Scheduled Meetings",
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        accessor: "attendanceRate",
-        label: "Attendance Rate",
-      },
-      {
-        accessor: "completedClasses",
-        label: "Completed Classes",
-      },
-      {
-        accessor: "classCompletionRate",
-        label: "Class Completion Rate",
-      },
-      {
-        accessor: "graduatedStudents",
-        label: "Graduated Students",
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
-
-<% column_definitions_three = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
-
-<% column_definitions_four = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
-<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
-import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -41,203 +40,14 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
-  const columnDefinitionsTwo = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          accessor: "newEnrollments",
-          label: "New Enrollments",
-        },
-        {
-          accessor: "scheduledMeetings",
-          label: "Scheduled Meetings",
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          accessor: "attendanceRate",
-          label: "Attendance Rate",
-        },
-        {
-          accessor: "completedClasses",
-          label: "Completed Classes",
-        },
-        {
-          accessor: "classCompletionRate",
-          label: "Class Completion Rate",
-        },
-        {
-          accessor: "graduatedStudents",
-          label: "Graduated Students",
-        },
-      ],
-    },
-  ];
-
-  const tablePropsTwo = {
-    verticalBorder: true,
-  }
-
-  const columnDefinitionsThree = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const tablePropsThree = {
-    verticalBorder: true
-  }
-
-  const columnDefinitionsFour = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
   return (
     <div>
-      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
-      <Caption text="Advanced Table Vertical Border Multi Header" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsTwo}
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsTwo}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsThree}
-          columnGroupBorderColor="text_lt_default"
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsThree}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsFour}
-          tableData={MOCK_DATA}
-          {...props}
-      />
     </div>
   )
 }

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

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+
+// Initial groups to drag between
+const containers = ["To Do", "In Progress", "Done"];
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+];
+
+const DraggableMultipleContainersDropzone = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  const badgeProperties = (container) => {
+    switch (container) {
+      case "To Do":
+        return { text: "queue", color: "warning" };
+      case "In Progress":
+        return { text: "progress", color: "primary" };
+      default:
+        return { text: "done", color: "success" };
+    }
+  };
+
+  return (
+    <DraggableProvider 
+        dropZone={{type: "outline"}}
+        enableCrossContainerPreview
+        initialItems={data}
+        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Final Container: ${finalContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Dropped Container: ${droppedContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Dropped Item:', item);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Flex
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    gap="sm"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            dragId={id} 
+                            key={id}
+                        >
+                          <Card
+                              padding="sm"
+                              {...props}
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                      {...props}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                                  {...props}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                                {...props}
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Flex>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainersDropzone;

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

@@ -0,0 +1,22 @@
+The multiple container functionality also supports customized dropzone styling as shown here. 
+
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
+
+The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `droppedContainer` - The container where the item was dropped
+- `originalContainer` - The container where the drag started
+- `item` - The complete item object with all properties (including the updated container)
+- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
+
+The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
+- `originalContainer` - The container where the drag started
+- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

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

@@ -5,11 +5,12 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -17,8 +18,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -7,4 +7,5 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.6.0.pre.rc.0
+  version: 15.6.0.pre.rc.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-24 00:00:00.000000000 Z
+date: 2025-11-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -855,6 +855,8 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb