playbook_ui 13.28.0.pre.alpha.play829selectablecardalignment2978 → 13.29.0.pre.alpha.PBNTR329draggablev33059

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

@@ -0,0 +1,92 @@
+import React, { createContext, useState, useContext, useEffect } from "react";
+
+const DragContext = createContext<any>({});
+
+export const DraggableContext = () => {
+  return useContext(DragContext);
+};
+
+export const DraggableProvider = ({ children, initialItems, onReorder }: any) => {
+  const [items, setItems] = useState([]);
+  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
+  const [isDragging, setIsDragging] = useState("");
+  const [activeContainer, setActiveContainer] = useState("");
+
+  useEffect(() => {
+    setItems(initialItems);
+  }, [initialItems]);
+
+  useEffect(() => {
+    onReorder(items);
+  }, [items]);
+
+  const handleDragStart = (id: string, container: string) => {
+    setDragData({ id: id, initialGroup: container });
+    setIsDragging(id);
+  };
+
+  const handleDragEnter = (id: string, container: string) => {
+    if (dragData?.id !== id) {
+      const newItems = [...items];
+      const draggedItem = newItems.find((item) => item.id === dragData.id);
+      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetIndex = newItems.findIndex((item) => item.id === id);
+
+      newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, draggedItem);
+
+      setItems(newItems);
+      setDragData({ id: dragData.id, initialGroup: container });
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging("");
+    setActiveContainer("");
+  };
+
+  const changeCategory = (itemId: string, container: string) => {
+    const updatedItems = items.map((item) => {
+      if (item.id === itemId) {
+        return { ...item, container: container };
+      }
+      return item;
+    });
+
+    setItems(updatedItems);
+  };
+
+  const handleDrop = (container: string) => {
+    setIsDragging("");
+    setActiveContainer("");
+    const selected = dragData.id;
+    changeCategory(selected, container);
+  };
+
+  const handleDragOver = (e: Event, container: string) => {
+    e.preventDefault();
+    setActiveContainer(container);
+  };
+
+  
+
+  const contextValue = {
+    items,
+    setItems,
+    dragData,
+    setDragData,
+    isDragging,
+    setIsDragging,
+    activeContainer,
+    setActiveContainer,
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    handleDrop,
+    handleDragOver,
+  };
+
+  return (
+    <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
+  );
+};

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

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { SelectableList, Draggable, DraggableProvider } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container {...props}>
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item id={id} 
+                  key={id}
+              >
+                <SelectableList.Item
+                    label={text} 
+                    name={id} 
+                    value={id} 
+                />
+              </Draggable.Item>
+            ))}
+          </SelectableList>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableDefault;

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

@@ -0,0 +1,4 @@
+To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
+
+The `Draggable.Container` specifies the container within which items can be dropped.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.

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

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Caption,
+  Card,
+  FlexItem,
+  Badge,
+  Avatar,
+  Title,
+  Body,
+  Draggable,
+  DraggableProvider,
+} from "../../";
+
+// 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 DraggableMultipleContainer = (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 initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Flex
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            id={id} 
+                            key={id}
+                        >
+                          <Card
+                              marginBottom="sm"
+                              padding="sm"
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Flex>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainer;

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "21",
+    text: "Joe Black",
+  },
+  {
+    id: "22",
+    text: "Nancy White",
+  },
+  {
+    id: "23",
+    text: "Bill Green",
+  },
+];
+
+const DraggableWithCards = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container  {...props}>
+          {initialState.map(({ id, text }) => (
+              <Card
+                  dragHandle
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  id={id}
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+              >
+                <Flex alignItems="stretch" 
+                    flexDirection="column"
+                >
+                  <Flex gap="xs">
+                    <Title size={4} 
+                        text={text} 
+                    />
+                    <Badge 
+                        text="35-12345" 
+                        variant="primary" 
+                    />
+                  </Flex>
+                      <Caption 
+                          size="xs" 
+                          text="8:00A • Township Name • 90210" 
+                      />
+                  <Flex gap="xxs" 
+                      spacing="between"
+                  >
+                    <Flex gap="xxs">
+                      <Caption color="error" 
+                          size="xs"
+                      >
+                        <Icon icon="house-circle-exclamation" />
+                      </Caption>
+                      <Caption color="success" 
+                          size="xs">
+                        <Icon icon="file-circle-check" />
+                      </Caption>
+                    </Flex>
+                    <Flex>
+                      <Badge rounded 
+                          text="Schedule QA" 
+                          variant="warning" 
+                       />
+                      <Badge rounded 
+                          text="Flex" 
+                          variant="primary" 
+                      />
+                      <Badge rounded 
+                          text="R99" 
+                          variant="primary" 
+                      />
+                    </Flex>
+                  </Flex>
+                </Flex>
+              </Card>
+          ))}
+        </Draggable.Container>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableWithCards;

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

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { DraggableProvider, List, ListItem } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "31",
+    text: "Philadelphia",
+  },
+  {
+    id: "32",
+    text: "New Jersey",
+  },
+  {
+    id: "33",
+    text: "Maryland",
+  },
+  {
+    id: "34",
+    text: "Connecticut",
+  },
+];
+
+const DraggableWithList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <List draggable
+            {...props}
+        >
+            {initialState.map(({ id, text }) => (
+                <ListItem id={id}
+                    key={id}
+                >
+                    {text}
+                </ListItem>
+            ))}
+        </List>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithList;

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

@@ -0,0 +1 @@
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.

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

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { SelectableList, DraggableProvider } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "41",
+    text: "Task 1",
+  },
+  {
+    id: "42",
+    text: "Task 2",
+  },
+  {
+    id: "43",
+    text: "Task 3",
+  },
+  {
+    id: "44",
+    text: "Task 4",
+  },
+];
+
+const DraggableWithSelectableList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+          <SelectableList draggable 
+              variant="checkbox"
+              {...props}
+              >
+            {initialState.map(({ id, text }) => (
+                <SelectableList.Item id={id}
+                    key={id}
+                    label={text} 
+                    name={id} 
+                    value={id}
+                />
+            ))}
+          </SelectableList>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithSelectableList

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

@@ -0,0 +1,11 @@
+examples:
+  
+  
+  react:
+  - draggable_default: Default
+  - draggable_with_list: Draggable with List Kit
+  - draggable_with_selectable_list: Draggable with SelectableList Kit
+  - draggable_with_cards: Draggable with Cards
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  
+  

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

@@ -0,0 +1,5 @@
+export { default as DraggableDefault } from './_draggable_default.jsx'
+export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
+export { default as DraggableWithList } from './_draggable_with_list.jsx'
+export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -0,0 +1,63 @@
+import React, {useState} from "react"
+import { render, screen } from "../utilities/test-utils"
+
+import { Draggable, DraggableProvider, SelectableList } from '../'
+
+const testId = 'draggable'
+
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+
+const DefaultDraggableKit = () => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Draggable
+          data={{ testid: testId }}
+      >
+        <Draggable.Container>
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item id={id} 
+                  key={id}
+              >
+                <SelectableList.Item label={text} 
+                    name={id} 
+                    value={id} 
+                />
+              </Draggable.Item>
+            ))}
+          </SelectableList>
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+test('generated default kit and classname', () => {
+render(<DefaultDraggableKit/>)
+const kit = screen.getByTestId(testId)
+expect(kit).toBeInTheDocument()
+expect(kit).toHaveClass('pb_draggable')
+})

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { DraggableContext } from "../context";
+
+type DraggableContainerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactNode;
+  className?: string;
+  container?: any;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const DraggableContainer = (props: DraggableContainerProps) => {
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
+
+  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable_container"),
+    `${activeContainer === container ? "active" : ""}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        key={container}
+        onDragOver={(e) => handleDragOver(e, container)}
+        onDrop={() => handleDrop(container)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DraggableContainer;