@bitrise/bitkit 12.17.1 → 12.18.0-alpha-drawer.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.17.1",
+  "version": "12.18.0-alpha-drawer.1",
   "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 [activeContent, setActiveContent] = useState<string>('');
+
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  const closeDrawer = () => {
+    onClose();
+    setActiveContent('');
+  };
+
+  const openDrawer = (contentKey: string) => {
+    if (!isOpen) {
+      onOpen();
+    } else if (activeContent === contentKey) {
+      closeDrawer();
+      return;
+    }
+
+    setActiveContent(contentKey);
+  };
+
+  const DrawerComponent = <Drawer {...content[activeContent]} {...drawerProps} isOpen={isOpen} onClose={closeDrawer} />;
+
+  return {
+    activeContent,
+    DrawerComponent,
+    isDrawerOpen: isOpen,
+    openDrawer,
+  };
+};
+
+export default useDrawer;

package/src/Components/Icons/16x16/{Unlock.tsx → LockOpen.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
+const LockOpen = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 20" {...props}>
     <path d="M7 15V12H9V15H7Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default Unlock;
+export default LockOpen;

package/src/Components/Icons/16x16/index.ts

@@ -104,6 +104,7 @@ export { default as Laptop } from './Laptop';
 export { default as Lightbulb } from './Lightbulb';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
+export { default as LockOpen } from './LockOpen';
 export { default as Login } from './Login';
 export { default as Logout } from './Logout';
 export { default as Macos } from './Macos';
@@ -187,7 +188,6 @@ export { default as Trace } from './Trace';
 export { default as Trash } from './Trash';
 export { default as Trigger } from './Trigger';
 export { default as Twitter } from './Twitter';
-export { default as Unlock } from './Unlock';
 export { default as ValidateShield } from './ValidateShield';
 export { default as Video } from './Video';
 export { default as Warning } from './Warning';

package/src/Components/Icons/24x24/{Unlock.tsx → LockOpen.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
+const LockOpen = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path d="M7 15V12H9V15H7Z" fill="currentColor" />
     <path
@@ -12,4 +12,4 @@ const Unlock = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default Unlock;
+export default LockOpen;

package/src/Components/Icons/24x24/index.ts

@@ -104,6 +104,7 @@ export { default as Laptop } from './Laptop';
 export { default as Lightbulb } from './Lightbulb';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
+export { default as LockOpen } from './LockOpen';
 export { default as Login } from './Login';
 export { default as Logout } from './Logout';
 export { default as Macos } from './Macos';
@@ -187,7 +188,6 @@ export { default as Trace } from './Trace';
 export { default as Trash } from './Trash';
 export { default as Trigger } from './Trigger';
 export { default as Twitter } from './Twitter';
-export { default as Unlock } from './Unlock';
 export { default as ValidateShield } from './ValidateShield';
 export { default as Video } from './Video';
 export { default as Warning } from './Warning';

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,