playbook_ui 14.4.0 → 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3931

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

@@ -0,0 +1,195 @@
+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

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

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,43 @@
+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

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

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,12 @@
+<!-- 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

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