playbook_ui 13.30.0.pre.alpha.PBNTR353draggablev53136 → 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d681e69c84f185b628e40d1d517d5cee70c28972186ee4b47b21641a4ca4637
-  data.tar.gz: 0c5933b2d3d51c8d8c891f4604f1f11447f1edcf5227446b68db72a4b169731e
+  metadata.gz: 9bec2adcbbd24c7d8dedcfd434368fd206154d30a3f22011db8fd8c17bd2002b
+  data.tar.gz: a5afc1f25e3609873b5bb0ba02d8c796ae9060cdd6aff33fcf103ec9fe88b7de
 SHA512:
-  metadata.gz: 80a03f749ddd4bf241009567ecc83c161a4cbbefc6779d8db7c2b717242ff4ac536afb263715bae97bca4cfb73bbb2c29d11c8747592ea341bed2b4547572ae2
-  data.tar.gz: 9cdc6ecc0caeab5ee99f8846513121233f191f28c3b9dd1b9bf3c631133f707dbde9bec819db905663ca437fd2ba66a43e03a871e055e74874a61de87059ff00
+  metadata.gz: d754acdd73fd036d57ec1fcf6cd21891a5a872268448021ba01d407cdb7c60f990b1a1cfd3680cbd6801e367eb33d919a6725f2747b8f0ba10cbf6657803720f
+  data.tar.gz: 9bc1f39ec7aa9bcdf8fb27aa9ac0bb50919a4e94b1db0cae50233701639a78b9963c60b2e3c8c39363e2b9548b3909e167c7bcbd486163283f7d9fcf82b1fe18

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -20,7 +20,6 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
-  dragId?: string,
   draggableItem?: boolean,
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -86,11 +85,11 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    dragId,
     dragHandle = true,
     draggableItem = false,
     highlight = {},
     htmlOptions = {},
+    id,
     selected = false,
     tag = 'div',
   } = props
@@ -127,8 +126,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     <>
     {
       draggableItem ? (
-        <Draggable.Item dragId={dragId} 
-            key={dragId}
+        <Draggable.Item id={id} 
+            key={id}
         >
         <Tag
             {...ariaProps}

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

@@ -1,9 +1,11 @@
 @import "../tokens/colors";
-@import "../tokens/opacity";
 
 .pb_draggable_container {
   .is_dragging {
-    opacity: $opacity_4;
+    opacity: 40%;
+  }
+  .active {
+    opacity: 60%;
   }
   .pb_draggable_item:hover {
     cursor: grab;

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

@@ -1,110 +1,90 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
-import { InitialStateType, ActionType, DraggableProviderType } from "./types";
-
-const initialState: InitialStateType = {
-  items: [],
-  dragData: { id: "", initialGroup: "" },
-  isDragging: "",
-  activeContainer: ""
-};
-
-const reducer = (state: InitialStateType, action: ActionType) => {
-  switch (action.type) {
-    case 'SET_ITEMS':
-      return { ...state, items: action.payload };
-    case 'SET_DRAG_DATA':
-      return { ...state, dragData: action.payload };
-    case 'SET_IS_DRAGGING':
-      return { ...state, isDragging: action.payload };
-    case 'SET_ACTIVE_CONTAINER':
-      return { ...state, activeContainer: action.payload };
-    case 'CHANGE_CATEGORY':
-      return {
-        ...state,
-        items: state.items.map(item =>
-          item.id === action.payload.itemId
-            ? { ...item, container: action.payload.container }
-            : item
-        )
-      };
-    case 'REORDER_ITEMS': {
-      const { dragId, targetId } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item.id === dragId);
-      const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(item => item.id === targetId);
-
-      newItems.splice(draggedIndex, 1);
-      newItems.splice(targetIndex, 0, draggedItem);
+import React, { createContext, useState, useContext, useEffect } from "react";
 
-      return { ...state, items: newItems };
-    }
-    default:
-      return state;
-  }
-};
-
-// Context and Provider
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ children, initialItems, onReorder }: DraggableProviderType) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+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(() => {
-    dispatch({ type: 'SET_ITEMS', payload: initialItems });
+    setItems(initialItems);
   }, [initialItems]);
 
   useEffect(() => {
-    onReorder(state.items);
-  }, [state.items]);
+    onReorder(items);
+  }, [items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
-    dispatch({ type: 'SET_IS_DRAGGING', payload: id });
+    setDragData({ id: id, initialGroup: container });
+    setIsDragging(id);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (state.dragData.id !== id) {
-      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
+    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 = () => {
-    dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    setIsDragging("");
+    setActiveContainer("");
   };
 
   const changeCategory = (itemId: string, container: string) => {
-    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
+    const updatedItems = items.map((item) => {
+      if (item.id === itemId) {
+        return { ...item, container: container };
+      }
+      return item;
+    });
+
+    setItems(updatedItems);
   };
 
   const handleDrop = (container: string) => {
-    dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    changeCategory(state.dragData.id, container);
+    setIsDragging("");
+    setActiveContainer("");
+    const selected = dragData.id;
+    changeCategory(selected, container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
-    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+    setActiveContainer(container);
   };
 
-  const contextValue = useMemo(() => ({
-    items: state.items,
-    dragData: state.dragData,
-    isDragging: state.isDragging,
-    activeContainer: state.activeContainer,
+  
+
+  const contextValue = {
+    items,
+    setItems,
+    dragData,
+    setDragData,
+    isDragging,
+    setIsDragging,
+    activeContainer,
+    setActiveContainer,
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
-    handleDragOver
-  }), [state]);
+    handleDragOver,
+  };
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

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

@@ -32,14 +32,13 @@ const DraggableDefault = (props) => {
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item dragId={id} 
+              <Draggable.Item id={id} 
                   key={id}
               >
                 <SelectableList.Item
                     label={text} 
                     name={id} 
                     value={id} 
-                    {...props}
                 />
               </Draggable.Item>
             ))}

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

@@ -1,4 +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. `dragId` is a REQUIRED prop for Draggable.Item.
+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

@@ -113,13 +113,12 @@ const DraggableMultipleContainer = (props) => {
                       }) => (
                         <Draggable.Item 
                             container={container}
-                            dragId={id} 
+                            id={id} 
                             key={id}
                         >
                           <Card
                               marginBottom="sm"
                               padding="sm"
-                              {...props}
                           >
                             <Flex justify="between">
                               <FlexItem>
@@ -132,7 +131,6 @@ const DraggableMultipleContainer = (props) => {
                                   <Title paddingLeft="xs" 
                                       size={4}
                                       text={title}
-                                      {...props}
                                   />
                                 </Flex>
                               </FlexItem>
@@ -141,12 +139,10 @@ const DraggableMultipleContainer = (props) => {
                                   rounded
                                   text={badgeProperties(container).text}
                                   variant={badgeProperties(container).color}
-                                  {...props}
                               />
                             </Flex>
                             <Body paddingTop="xs"
                                 text={description} 
-                                {...props}
                             />
                           </Card>
                         </Draggable.Item>

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

@@ -36,32 +36,29 @@ const DraggableWithCards = (props) => {
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
-              <Card dragId={id}
+              <Card
                   draggableItem
                   highlight={{ color: "primary", position: "side" }}
+                  id={id}
                   key={id}
                   marginBottom="xs"
                   padding="xs"
-                  {...props}
               >
                 <Flex alignItems="stretch" 
                     flexDirection="column"
                 >
                   <Flex gap="xs">
                     <Title size={4} 
-                        text={text}
-                        {...props} 
+                        text={text} 
                     />
                     <Badge 
                         text="35-12345" 
                         variant="primary" 
-                        {...props}
                     />
                   </Flex>
                       <Caption 
                           size="xs" 
                           text="8:00A • Township Name • 90210" 
-                          {...props}
                       />
                   <Flex gap="xxs" 
                       spacing="between"
@@ -69,7 +66,6 @@ const DraggableWithCards = (props) => {
                     <Flex gap="xxs">
                       <Caption color="error" 
                           size="xs"
-                          {...props}
                       >
                         <Icon icon="house-circle-exclamation" />
                       </Caption>
@@ -82,17 +78,14 @@ const DraggableWithCards = (props) => {
                       <Badge rounded 
                           text="Schedule QA" 
                           variant="warning" 
-                          {...props}
                        />
                       <Badge rounded 
                           text="Flex" 
-                          variant="primary"
-                          {...props} 
+                          variant="primary" 
                       />
                       <Badge rounded 
                           text="R99" 
                           variant="primary" 
-                          {...props}
                       />
                     </Flex>
                   </Flex>

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

@@ -1,5 +1,3 @@
-For a simplified version of the Draggable API for the Card kit, You can use the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
+For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit. 
 
-In addition to the above, `dragId` is a REQUIRED prop to be passed to the Card kit when implementing dragging.
-
-The dev must manage state as shown.
+The dev must manage state as shown and pass in id to the Card for dragging to work.

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

@@ -30,11 +30,11 @@ const DraggableWithList = (props) => {
     <DraggableProvider initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-        <List enableDrag
+        <List draggable
             {...props}
         >
             {initialState.map(({ id, text }) => (
-                <ListItem dragId={id}
+                <ListItem id={id}
                     key={id}
                 >
                     {text}

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

@@ -1,7 +1 @@
-For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop. 
-
-In addition to the above, `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
-
-The dev must manage state as shown.
-
-The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.
+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 for dragging to work.

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

@@ -29,18 +29,16 @@ const DraggableWithSelectableList = (props) => {
     <DraggableProvider initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-          <SelectableList enableDrag
-              variant="radio"
+          <SelectableList draggable 
+              variant="checkbox"
               {...props}
               >
             {initialState.map(({ id, text }) => (
-                <SelectableList.Item 
-                    dragId={id}
+                <SelectableList.Item id={id}
                     key={id}
                     label={text} 
-                    name="radio-test" 
+                    name={id} 
                     value={id}
-                    {...props}
                 />
             ))}
           </SelectableList>

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

@@ -1,16 +1,9 @@
-import React, { useState } from "react";
-import { render, screen } from "../utilities/test-utils";
+import React, {useState} from "react"
+import { render, screen } from "../utilities/test-utils"
 
-import {
-  Draggable,
-  DraggableProvider,
-  SelectableList,
-  List,
-  ListItem,
-  Card,
-} from "../";
+import { Draggable, DraggableProvider, SelectableList } from '../'
 
-const testId = "draggable";
+const testId = 'draggable'
 
 const data = [
   {
@@ -31,6 +24,7 @@ const data = [
   },
 ];
 
+
 const DefaultDraggableKit = () => {
   const [initialState, setInitialState] = useState(data);
 
@@ -39,11 +33,13 @@ const DefaultDraggableKit = () => {
         initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-      <Draggable data={{ testid: testId }}>
+      <Draggable
+          data={{ testid: testId }}
+      >
         <Draggable.Container>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item dragId={id} 
+              <Draggable.Item id={id} 
                   key={id}
               >
                 <SelectableList.Item label={text} 
@@ -59,132 +55,9 @@ const DefaultDraggableKit = () => {
   );
 };
 
-const DraggableKitWithList = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid="draggable">
-      <DraggableProvider
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <List enableDrag>
-          {initialState.map(({ id, text }) => (
-            <ListItem dragId={id} 
-                key={id}
-            >
-              {text}
-            </ListItem>
-          ))}
-        </List>
-      </DraggableProvider>
-    </div>
-  );
-};
-
-const DraggableKitWithSelectableList = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid="draggable">
-      <DraggableProvider
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <SelectableList enableDrag>
-          {initialState.map(({ id, text }) => (
-            <SelectableList.Item
-                dragId={id}
-                key={id}
-                label={text}
-                name={id}
-                value={id}
-            />
-          ))}
-        </SelectableList>
-      </DraggableProvider>
-    </div>
-  );
-};
-
-const DraggableKitWithCard = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid="draggable">
-      <DraggableProvider
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable.Container>
-          {initialState.map(({ id, text }) => (
-            <Card dragId={id} 
-                draggableItem 
-                key={id}
-            >
-              {text}
-            </Card>
-          ))}
-        </Draggable.Container>
-      </DraggableProvider>
-    </div>
-  );
-};
-
-test("generated default kit and classname", () => {
-  render(<DefaultDraggableKit />);
-  const kit = screen.getByTestId(testId);
-  expect(kit).toBeInTheDocument();
-  expect(kit).toHaveClass("pb_draggable");
-});
-
-test("generated Draggable Container", () => {
-  render(<DefaultDraggableKit />);
-  const kit = screen.getByTestId(testId);
-
-  const container = kit.querySelector(".pb_draggable_container");
-  expect(container).toBeInTheDocument();
-});
-
-test("generated Draggable Item", () => {
-  render(<DefaultDraggableKit />);
-  const kit = screen.getByTestId(testId);
-
-  const item = kit.querySelector(".pb_draggable_item");
-  expect(item).toBeInTheDocument();
-});
-
-test("Attached draggable HTML attributes", () => {
-  render(<DefaultDraggableKit />);
-  const kit = screen.getByTestId(testId);
-
-  const item = kit.querySelector(".pb_draggable_item");
-  expect(item).toHaveAttribute("draggable");
-});
-
-test("generated dragHandle with List", () => {
-  render(<DraggableKitWithList />);
-  const kit = screen.getByTestId(testId);
-
-  const list = kit.querySelector(".pb_list_kit");
-  expect(list).toBeInTheDocument();
-  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
-  expect(dragHandle).toBeInTheDocument();
-});
-
-test("generated dragHandle with SelectableList", () => {
-  render(<DraggableKitWithSelectableList />);
-  const kit = screen.getByTestId(testId);
-
-  const selectabellist = kit.querySelector(".pb_selectable_list_kit");
-  expect(selectabellist).toBeInTheDocument();
-  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
-  expect(dragHandle).toBeInTheDocument();
-});
-
-test("generated dragHandle with Card", () => {
-  render(<DraggableKitWithCard />);
-  const kit = screen.getByTestId(testId);
-
-  const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
-  expect(card).toBeInTheDocument();
-  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
-  expect(dragHandle).toBeInTheDocument();
-});
+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/DraggableItem.tsx

@@ -17,11 +17,10 @@ type DraggableItemProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  dragId?: string;
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -32,7 +31,7 @@ const DraggableItem = (props: DraggableItemProps) => {
 
   const classes = classnames(
     buildCss("pb_draggable_item"),
-    `${isDragging === dragId ? "is_dragging" : ""}`,
+    `${isDragging === id ? "is_dragging" : ""}`,
     globalProps(props),
     className
   );
@@ -45,10 +44,10 @@ const DraggableItem = (props: DraggableItemProps) => {
         className={classes}
         draggable
         id={id}
-        key={dragId}
+        key={id}
         onDragEnd={() => handleDragEnd()}
-        onDragEnter={() => handleDragEnter(dragId, container)}
-        onDragStart={() => handleDragStart(dragId, container)}
+        onDragEnter={() => handleDragEnter(id, container)}
+        onDragStart={() => handleDragStart(id, container)}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -10,7 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  enableDrag?: boolean;
+  draggable?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -32,7 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
-    enableDrag = false,
+    draggable = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -54,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant, enableDrag });
+      return React.cloneElement(child, { text, variant, draggable });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -74,7 +74,7 @@ const List = (props: ListProps) => {
   return (
     <>
     {
-      enableDrag ? (
+      draggable ? (
         <Draggable.Container>
      <div className={classes}>
       {ordered ? (