@bitrise/bitkit 12.17.2 → 12.18.0-alpha-drawer.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.17.2",
+  "version": "12.18.0-alpha-drawer.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Drawer/Drawer.theme.ts

@@ -0,0 +1,50 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+  'overlay',
+  'dialogContainer',
+  'dialog',
+  'closeButton',
+  'header',
+  'footer',
+]);
+
+const DrawerTheme = defineMultiStyleConfig({
+  baseStyle: {
+    overlay: {
+      backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      zIndex: 'dialogOverlay',
+      top: '3rem',
+    },
+    dialogContainer: {
+      zIndex: 'dialog',
+      top: '3rem',
+    },
+    dialog: {
+      top: '3rem !important',
+      background: 'neutral.100',
+      maxWidth: '20rem',
+      padding: '24',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '9',
+    },
+    closeButton: {
+      position: 'absolute',
+      top: '24',
+      right: '24',
+    },
+    header: {
+      color: 'neutral.40',
+      fontSize: '1',
+      lineHeight: '1rem',
+      textTransform: 'uppercase',
+    },
+    footer: {
+      marginTop: 'auto',
+      justifyContent: 'flex-start',
+    },
+  },
+});
+
+export default DrawerTheme;

package/src/Components/Drawer/Drawer.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import {
+  Drawer as ChakraDrawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerProps as ChakraDrawerProps,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerContentProps,
+} from '@chakra-ui/react';
+
+export interface DrawerProps
+  extends Pick<ChakraDrawerProps, 'finalFocusRef' | 'initialFocusRef' | 'isOpen' | 'onClose'> {
+  children: DrawerContentProps['children'];
+  footer?: ReactNode;
+  title: string;
+}
+
+const Drawer = (props: DrawerProps) => {
+  const { children, footer, title, ...drawerProps } = props;
+
+  return (
+    <ChakraDrawer {...drawerProps}>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader as="h3">{title}</DrawerHeader>
+        <DrawerBody>{children}</DrawerBody>
+        {footer && <DrawerFooter>{footer}</DrawerFooter>}
+      </DrawerContent>
+    </ChakraDrawer>
+  );
+};
+
+export default Drawer;

package/src/Components/Drawer/useDrawer.tsx

@@ -0,0 +1,49 @@
+import { ReactNode, useState } from 'react';
+import { DrawerProps as ChakraDrawerProps, useDisclosure } from '@chakra-ui/react';
+import Drawer from './Drawer';
+
+export type UseDrawerProps = {
+  content: Record<
+    string,
+    {
+      children: ReactNode;
+      footer?: ReactNode;
+      title: string;
+    }
+  >;
+  drawerProps?: Pick<ChakraDrawerProps, 'finalFocusRef' | 'initialFocusRef'>;
+};
+
+const useDrawer = (props: UseDrawerProps) => {
+  const { content, drawerProps } = props;
+  const [activeDrawer, setActiveDrawer] = useState<string>('');
+
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  const closeDrawer = () => {
+    onClose();
+    setActiveDrawer('');
+  };
+
+  const toggleDrawer = (contentKey: string) => {
+    if (!isOpen) {
+      onOpen();
+    } else if (activeDrawer === contentKey) {
+      closeDrawer();
+      return;
+    }
+
+    setActiveDrawer(contentKey);
+  };
+
+  const drawerComponent = <Drawer {...content[activeDrawer]} {...drawerProps} isOpen={isOpen} onClose={closeDrawer} />;
+
+  return {
+    activeDrawer,
+    drawerComponent,
+    isDrawerOpen: isOpen,
+    toggleDrawer,
+  };
+};
+
+export default useDrawer;

package/src/index.ts

@@ -272,3 +272,7 @@ export { default as ContentSwitcher } from './Components/ContentSwitcher/Content
 
 export type { ContentSwitcherItemProps } from './Components/ContentSwitcher/ContentSwitcherItem';
 export { default as ContentSwitcherItem } from './Components/ContentSwitcher/ContentSwitcherItem';
+
+export type { DrawerProps } from './Components/Drawer/Drawer';
+export { default as Drawer } from './Components/Drawer/Drawer';
+export { default as useDrawer } from './Components/Drawer/useDrawer';

package/src/theme.ts

@@ -8,6 +8,7 @@ import Checkbox from './Components/Form/Checkbox/Checkbox.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Dialog from './Components/Dialog/Dialog.theme';
 import Divider from './Components/Divider/Divider.theme';
+import Drawer from './Components/Drawer/Drawer.theme';
 import EmptyState from './Components/EmptyState/EmptyState.theme';
 import Link from './Components/Link/Link.theme';
 import List from './Components/List/List.theme';
@@ -88,6 +89,7 @@ const theme = {
     Checkbox,
     ColorButton,
     Divider,
+    Drawer,
     Dropdown,
     EmptyState,
     ...Form,