playbook_ui 14.4.0.pre.alpha.stephenagreerpatch13910 → 14.4.0.pre.rc.0

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -1,195 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-import Modal from "react-modal";
-
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-
-import { DialogContext } from "../pb_dialog/_dialog_context";
-
-type DrawerProps = {
-  aria?: { [key: string]: string };
-  behavior?: "floating" | "push";
-  border?: "full" | "none" | "right" | "left";
-  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-  children: React.ReactNode | React.ReactNode[] | string;
-  className?: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  fullHeight?: boolean;
-  onClose?: () => void;
-  opened: boolean;
-  overlay: boolean;
-  placement?: "left" | "right";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  text?: string;
-  trigger?: string;
-};
-
-const Drawer = (props: DrawerProps): React.ReactElement => {
-  const {
-    aria = {},
-    behavior = "floating",
-    border = "none",
-    breakpoint = "none",
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    size = "md",
-    children,
-    fullHeight = false,
-    opened,
-    onClose,
-    overlay = true,
-    placement = "left",
-    trigger,
-  } = props;
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  let globalPropsString: string = globalProps(props);
-
-  // Check if the string contains any of the prefixes
-  const containsPrefix = ['p_', 'pb_', 'pt_', 'pl_', 'pr_', 'px_', 'py_'].some((prefix) =>
-    globalPropsString.includes(prefix)
-  );
-
-  // If none of the prefixes are found, append 'p_sm' to the string
-  if (!containsPrefix) {
-    globalPropsString += ' p_sm';
-  }
-
-  const drawerClassNames = {
-    base: `${classnames(
-      "pb_drawer",
-      buildCss("pb_drawer", size, placement),
-      {
-        "drawer_border_full": border === "full",
-        "drawer_border_right": border === "right",
-        "drawer_border_left": border === "left",
-      }
-    )} ${globalPropsString}`,
-    afterOpen: "pb_drawer_after_open",
-    beforeClose: "pb_drawer_before_close",
-  };
-
-  const fullHeightClassNames = () => {
-    if (!fullHeight) return null;
-    return `full_height_${placement}`;
-  };
-
-  const overlayClassNames = {
-    base: `pb_drawer${overlay ? '_overlay' : '_no_overlay'} ${fullHeight !== null && fullHeightClassNames()} ${!overlay ? 'no-background' : ''}`,
-    afterOpen: "pb_drawer_overlay_after_open",
-    beforeClose: "pb_drawer_overlay_before_close",
-  };
-
-  const classes = classnames(
-    buildCss("pb_drawer_wrapper"),
-    className
-  );
-
-  const [triggerOpened, setTriggerOpened] = useState(false);
-
-  const breakpointWidths: Record<DrawerProps['breakpoint'], number> = {
-    none: 0,
-    xs: 575,
-    sm: 768,
-    md: 992,
-    lg: 1200,
-    xl: 1400,
-  };
-
-  // State to manage opening the drawer based on breakpoint
-  const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
-
-  useEffect(() => {
-    if (breakpoint === 'none') return;
-
-    const handleResize = () => {
-      const width = window.innerWidth;
-      const breakpointWidth = breakpointWidths[breakpoint];
-
-      if (width <= breakpointWidth) {
-        setIsBreakpointOpen(true);
-      } else {
-        setIsBreakpointOpen(false);
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    // Call handler once on mount to set initial state
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [breakpoint]);
-
-  const modalIsOpened = trigger ? triggerOpened : (opened || isBreakpointOpen);
-
-  useEffect(() => {
-    const sizeMap: Record<DrawerProps['size'], string> = {
-      xl: '365px',
-      lg: '300px',
-      md: '250px',
-      sm: '200px',
-      xs: '64px',
-    };
-    const body = document.querySelector('body');
-
-    if (modalIsOpened && behavior === 'push' && body) {
-      if (placement === 'left') {
-        body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
-      } else if (placement === 'right') {
-        body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`;
-      }
-
-      body.classList.add('ReactModal__Body--open');
-    } else if (body) {
-      body.style.cssText = ''; // Clear the styles when modal is closed or behavior is not 'push'
-      body.classList.remove('ReactModal__Body--open');
-    }
-  }, [modalIsOpened, behavior, placement, size]);
-
-  const api = {
-    onClose: trigger
-      ? function () {
-          setTriggerOpened(false);
-        }
-      : onClose,
-  };
-
-  return (
-    <DialogContext.Provider value={api}>
-      <div
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-      >
-        <Modal
-            ariaHideApp={false}
-            className={drawerClassNames}
-            closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
-            id={id}
-            isOpen={modalIsOpened}
-            onRequestClose={onClose}
-            overlayClassName={overlayClassNames}
-            shouldCloseOnOverlayClick={overlay}
-        >
-          <>
-            {children}
-          </>
-        </Modal>
-      </div>
-    </DialogContext.Provider>
-  );
-};
-
-export default Drawer;

data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const DrawerContext = React.createContext(null);

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

@@ -1,117 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const DrawerBorders = () => {
-  // Individual state variables for each drawer size
-  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
-  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
-  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
-  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
-  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
-  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
-  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
-  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
-  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
-
-  return (
-    <>
-      <Flex padding="md"
-          wrap
-      >
-        <Button marginRight="md"
-            onClick={toggleBRightDrawer}
-        >
-         Drawer with border right
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBLeftDrawer}
-        >
-         Drawer with border left
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBFullDrawer}
-        >
-          Drawer with border full
-        </Button>
-        <Button marginRight="md"    
-            onClick={toggleBDefaultDrawer}
-        >
-          Default Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBRoundedDrawer}
-        > 
-          Rounded Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="float"
-          border="right"
-          fullHeight
-          onClose={toggleBRightDrawer}
-          opened={openedBRightDrawer}
-          overlay={false}
-          placement="left"
-          size="lg"
-      >
-        This is a Drawer with border right  
-      </Drawer>
-      <Drawer
-          behavior="float"
-          border="left"
-          fullHeight
-          onClose={toggleBLeftDrawer}
-          opened={openedBLeftDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border left
-      </Drawer>
-      <Drawer
-          behavior="float"
-          border="full"
-          fullHeight
-          onClose={toggleBFullDrawer}
-          opened={openedBFullDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border full
-      </Drawer>
-      <Drawer
-          behavior="float"
-          fullHeight
-          onClose={toggleBDefaultDrawer}
-          opened={openedBDefaultDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >   
-        This is a Default Drawer
-      </Drawer>
-      <Drawer
-          behavior="float"
-          borderRadius="rounded"
-          fullHeight
-          onClose={toggleBRoundedDrawer}
-          opened={openedBRoundedDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
-        This is a Rounded Drawer
-      </div>
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerBorders;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,43 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
-
-  return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            fullHeight
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
-
-export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("drawer") %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,63 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerDefault = () => {
-  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
-  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
-
-  return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleHeaderSeparatorDrawer}
-        >
-          {"Left Drawer"}
-        </Button>
-        <Button
-            marginRight="xl"
-            onClick={toggleBothSeparatorsDrawer}
-        >
-          {"Right Drawer"}
-        </Button>
-      </Flex>
-      <Flex>
-        {/* Left Drawer */}
-        <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleHeaderSeparatorDrawer}
-            opened={headerSeparatorDrawerOpened}
-            overlay
-            placement={"left"}
-            size={"lg"}
-        >
-          Test me (Left Drawer)
-        </Drawer>
-
-        {/* Right Drawer */}
-        <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleBothSeparatorsDrawer}
-            opened={bothSeparatorsDrawerOpened}
-            overlay
-            placement={"right"}
-            size={"lg"}
-        >
-          Test me (Right Drawer)
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
-
-export default DrawerDefault;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const DrawerSizes = () => {
-  // Individual state variables for each drawer size
-  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
-  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
-  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
-
-  return (
-    <>
-      <Flex wrap>
-        <Button marginRight="md"
-            onClick={toggleNoOverlayDrawer}
-        >
-          No Overlay Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleOverlayDrawer}
-        >
-          Overlay Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleNoOverlayDrawer}
-          opened={openedNoOverlayDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with no overlay
-      </Drawer>
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleOverlayDrawer}
-          opened={openedOverlayDrawer}
-          overlay
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with an overlay 
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerSizes;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -1,113 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const DrawerSizes = () => {
-  // Individual state variables for each drawer size
-  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
-  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
-  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
-  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
-  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
-  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
-  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
-  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
-  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
-
-  return (
-    <>
-      <Flex wrap>
-        <Button marginRight="md"
-            onClick={toggleXsDrawer}
-        >
-          XS Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleSmDrawer}
-        >
-          SM Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleMdDrawer}
-        >
-          MD Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleLgDrawer}
-        >
-          LG Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleXlDrawer}
-        >
-          XL Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleXsDrawer}
-          opened={openedXsDrawer}
-          overlay
-          placement="right"
-          size="xs"
-      >
-        XS 
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleSmDrawer}
-          opened={openedSmDrawer}
-          overlay
-          placement="right"
-          size="sm"
-      >
-        This is an SM Drawer
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleMdDrawer}
-          opened={openedMdDrawer}
-          overlay
-          placement="right"
-          size="md"
-      >
-        This is an MD Drawer
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleLgDrawer}
-          opened={openedLgDrawer}
-          overlay
-          placement="right"
-          size="lg"
-      >
-        This is an LG Drawer
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleXlDrawer}
-          opened={openedXlDrawer}
-          overlay
-          placement="right"
-          size="xl"
-      >
-        This is an XL Drawer
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerSizes;

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

@@ -1,12 +0,0 @@
-examples:
-  
-  rails:
-  - drawer_default: Default
-  
-  
-  react:
-  - drawer_default: Default
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
-  - drawer_breakpoints: Open on Breakpoints 

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

@@ -1,5 +0,0 @@
-export { default as DrawerDefault } from './_drawer_default.jsx'
-export { default as DrawerSizes } from './_drawer_sizes.jsx'
-export { default as DrawerOverlay } from './_drawer_overlay.jsx'
-export { default as DrawerBorders } from './_drawer_borders.jsx'
-export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb

@@ -1,12 +0,0 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>DRAWER CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDrawer
-    class Drawer < ::Playbook::KitBase
-    end
-  end
-end