RubyGems - playbook_ui - Versions diffs - 14.14.0 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 - Mend

playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (537) hide show

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx ADDED Viewed

@@ -0,0 +1,182 @@
+import React, { useState } from "react";
+import { Body, Flex, FlexItem, Card, Caption, Draggable, DraggableProvider } from "playbook-ui";
+// Initial items to be dragged
+const dataShadow = [
+  {
+    id: "51",
+    text: "Task 1",
+  },
+  {
+    id: "52",
+    text: "Task 2",
+  },
+  {
+    id: "53",
+    text: "Task 3",
+  },
+];
+const dataOutline = [
+  {
+    id: "61",
+    text: "Task 1",
+  },
+  {
+    id: "62",
+    text: "Task 2",
+  },
+  {
+    id: "63",
+    text: "Task 3",
+  },
+];
+const dataLine = [
+  {
+    id: "71",
+    text: "Task 1",
+  },
+  {
+    id: "72",
+    text: "Task 2",
+  },
+  {
+    id: "73",
+    text: "Task 3",
+  },
+];
+const DraggableDropZones = (props) => {
+  const [initialShadowState, setInitialShadowState] = useState(dataShadow);
+  const [initialOutlineState, setInitialOutlineState] = useState(dataOutline);
+  const [initialLineState, setInitialLineState] = useState(dataLine);
+  return (
+    <>
+    <Flex justify="between"
+        justifyContent="center"
+        {...props}
+    >
+      <FlexItem marginRight="lg">
+        <DraggableProvider
+            dropZone="shadow"
+            dropZoneDirection="vertical"
+            initialItems={dataShadow}
+            onReorder={(items) => setInitialShadowState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Shadow"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialShadowState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem marginRight="lg">
+        <DraggableProvider
+            dropZone="outline"
+            dropZoneDirection="vertical"
+            initialItems={dataOutline}
+            onReorder={(items) => setInitialOutlineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Outline"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialOutlineState.map(({ id, text }) => (
+              <Card
+                  dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex
+                    alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem>
+        <DraggableProvider
+            dropZone="line"
+            dropZoneDirection="vertical"
+            initialItems={dataLine}
+            onReorder={(items) => setInitialLineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Line"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialLineState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+    </Flex>
+    </>
+  );
+};
+export default DraggableDropZones;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md ADDED Viewed

@@ -0,0 +1,5 @@
+The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
+By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
+When changing the styling of your drop zones in a vertical view, please be sure to set the `dropZoneDirection` prop to "vertical". By default, it is set to "horizontal".

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx ADDED Viewed

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Flex, Image, Caption, Draggable, DraggableProvider } from "playbook-ui";
+// Initial items to be dragged
+const dataPrimary = [
+  {
+    id: "81",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "82",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "83",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+const dataPurple = [
+  {
+    id: "91",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "92",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "93",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+const DraggableDropZoneColors = (props) => {
+  const [initialPrimaryState, setInitialPrimaryState] = useState(dataPrimary);
+  const [initialPurpleState, setInitialPurpleState] = useState(dataPurple);
+  return (
+    <>
+    <Caption marginBottom="xs">
+      Primary
+    </Caption>
+    <DraggableProvider
+        dropZone="shadow"
+        dropZoneColor="primary"
+        initialItems={dataPrimary}
+        onReorder={(items) => setInitialPrimaryState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPrimaryState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    <Caption marginBottom="xs">
+      Purple
+    </Caption>
+    <DraggableProvider
+        dropZone="outline"
+        dropZoneColor="purple"
+        initialItems={dataPurple}
+        onReorder={(items) => setInitialPurpleState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPurpleState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+  );
+};
+export default DraggableDropZoneColors;

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

@@ -1,16 +1,15 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Caption,
-  Card,
-  FlexItem,
-  Badge,
-  Avatar,
-  Title,
-  Body,
-  Draggable,
-  DraggableProvider,
-} from "playbook-ui";
+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"];

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

@@ -1,14 +1,13 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Badge,
-  Title,
-  Icon,
-  Draggable,
-  DraggableProvider,
-  Card,
-  Caption,
-} from "playbook-ui";
+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 Icon from '../../pb_icon/_icon'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
 // Initial items to be dragged
 const data = [

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

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "playbook-ui";
+import { DraggableProvider } from '../../pb_draggable/context'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 // Initial items to be dragged
 const data = [

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "playbook-ui";
+import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { DraggableProvider } from '../../pb_draggable/context'
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx CHANGED Viewed

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+import Flex from '../../pb_flex/_flex'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Table from '../../pb_table/_table'
 // Initial items to be dragged
 const data = [

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

@@ -5,6 +5,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table_react: Draggable with Table
+  - draggable_drop_zones: Drop Zone
+  - draggable_drop_zone_colors: Drop Zone Colors
   - draggable_multiple_containers: Dragging Across Multiple Containers
   rails:

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

@@ -3,4 +3,6 @@ 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'
+export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
+export { default as DraggableDropZoneColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

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

@@ -22,18 +22,17 @@ type DraggableContainerProps = {
 const DraggableContainer = (props: DraggableContainerProps) => {
   const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
-  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
+  const { handleDragOver, handleDrop, activeContainer, dropZoneDirection = 'horizontal' } = DraggableContext();
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
   const Tag: React.ReactElement | any = `${tag}`;
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
+    dropZoneDirection === 'vertical' ? 'vertical' : '',
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx CHANGED Viewed

@@ -22,24 +22,52 @@ type DraggableItemProps = {
 };
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
+  const {
+    aria = {},
+    children,
+    className,
+    container,
+    data = {},
+    htmlOptions = {},
+    id,
+    dragId,
+    tag="div"
+  } = props;
-  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
-    DraggableContext();
+  const {
+    isDragging,
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    dropZone = 'ghost',
+    dropZoneColor = 'neutral'
+  } = DraggableContext();
+  const itemRef = React.useRef<HTMLElement>(null);
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
   const Tag: React.ReactElement | any = `${tag}`;
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
+    isDragging === dragId ? `drop_zone_${dropZone}` : "",
+    isDragging === dragId && dropZone !== 'ghost' ? `drop_zone_color_${dropZoneColor}` : '',
     globalProps(props),
     className
   );
+  // Custom drag start handler
+  const onDragStart = (e: React.DragEvent) => {
+    // Call the original handler
+    handleDragStart(dragId, container);
+    // For dropZone="ghost", we don't need to do anything special
+    // For other variants, we'll let the CSS handle it
+  };
   return (
     <Tag
         {...ariaProps}
@@ -51,7 +79,8 @@ const DraggableItem = (props: DraggableItemProps) => {
         key={dragId}
         onDragEnd={() => handleDragEnd()}
         onDragEnter={() => handleDragEnter(dragId, container)}
-        onDragStart={() => handleDragStart(dragId, container)}
+        onDragStart={onDragStart}
+        ref={itemRef}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_drawer/_drawer.scss CHANGED Viewed

@@ -134,11 +134,11 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
-.pb_drawer_lg_left.pb_drawer {
+.pb_drawer_lg_left .pb_drawer {
   transform: translateX(-100%);
 }
-.pb_drawer_lg_right.pb_drawer {
+.pb_drawer_lg_right .pb_drawer {
   transform: translateX(100%);
 }
@@ -157,6 +157,34 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
+ &.pb_drawer_within_element_rails {
+    position: relative;
+    width: 100%;
+    display: block;
+    background-color: $white;
+    overflow: hidden;
+    // Use max-height for a smooth accordion-like animation
+    max-height: 0;
+    transition: max-height $animation-duration ease-in-out;
+    z-index: 1;
+    &.open {
+      max-height: 1000px;
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: inherit;
+      z-index: -1;
+    }
+  }
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -297,7 +325,6 @@ body.PBDrawer__Body--close {
     display: flex;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
-    opacity: 0;
     animation: overlayFade $animation-duration ease-in-out forwards;
     &[class*="_left"]{
@@ -325,10 +352,23 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
+    display: flex;
     z-index: $z-index;
     opacity: 1;
     pointer-events: none;
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
+    &[class*="_center"]{
+      justify-content: center;
+    }
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb ADDED Viewed

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+<%= pb_rails("drawer", props: {
+    id:"drawer-3",
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>

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

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb ADDED Viewed

@@ -0,0 +1,33 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-12",
+        overlay: false,
+        border: "right"
+    }) do  %>
+        Test me (Border Right)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-13",
+        overlay: false,
+        border: "left"
+    }) do  %>
+        Test me (Border Left)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-14",
+        overlay: false,
+        border: "full"
+    }) do  %>
+        Test me (Border Full)
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx CHANGED Viewed

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 const DrawerBorders = () => {
   // Individual state variables for each drawer size
@@ -41,7 +44,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border right
@@ -52,7 +55,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +66,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border full

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb ADDED Viewed

File without changes