Merge pull request #863 from Vidit-Kushwaha/feat/panel

[component] Added Panel component to sistent

package.json

@@ -119,6 +119,8 @@
     "billboard.js": "^3.14.3",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "re-resizable": "^6.10.3",
+    "react-draggable": "^4.4.6",
     "moment": "^2.30.1",
     "react-share": "^5.1.0"
   }

src/custom/Panel/Panel.tsx

@@ -0,0 +1,103 @@
+import { Resizable } from 're-resizable';
+import React from 'react';
+import Draggable from 'react-draggable';
+import { Box, BoxProps, IconButton, Tooltip } from '../../base';
+import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons';
+import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
+import { useTheme } from '../../theme';
+import { ErrorBoundary } from '../ErrorBoundary';
+import {
+  DragHandle,
+  DrawerHeader,
+  HeaderActionsContainer,
+  HeaderContainer,
+  PanelBody,
+  PanelContainer,
+  ResizableContent
+} from './style';
+
+export type PanelProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  areAllExpanded?: boolean;
+  toggleExpandAll?: () => void;
+  handleClose: () => void;
+  sx?: BoxProps['sx'];
+  id?: string;
+  intitialPosition?: {
+    left?: string | number;
+    right?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+  };
+};
+
+const Panel_: React.FC<PanelProps> = ({
+  isOpen,
+  id = 'panel',
+  children,
+  areAllExpanded,
+  toggleExpandAll,
+  handleClose,
+  intitialPosition,
+  sx
+}) => {
+  const theme = useTheme();
+  if (!isOpen) return null;
+  return (
+    <Draggable handle=".drag-handle">
+      <PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}>
+        <Resizable
+          defaultSize={{ width: '18rem', height: 'auto' }}
+          onResize={() => {
+            window.dispatchEvent(new Event('panel-resize'));
+          }}
+          enable={{
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            topRight: true,
+            bottomRight: true,
+            bottomLeft: true,
+            topLeft: true
+          }}
+        >
+          <ResizableContent>
+            <ErrorBoundary>
+              <div className="drag-handle">
+                <DrawerHeader>
+                  <Box display="flex" justifyContent="flex-end" padding="8px">
+                    {toggleExpandAll && (
+                      <Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}>
+                        <IconButton onClick={toggleExpandAll}>
+                          {areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />}
+                        </IconButton>
+                      </Tooltip>
+                    )}
+                  </Box>
+                  <DragHandle>
+                    <PanelDragHandleIcon />
+                  </DragHandle>
+                  <HeaderContainer>
+                    <HeaderActionsContainer
+                      id={`${id}-panel-header-actions-container`}
+                    ></HeaderActionsContainer>
+                    <IconButton onClick={handleClose}>
+                      <CloseIcon />
+                    </IconButton>
+                  </HeaderContainer>
+                </DrawerHeader>
+              </div>
+              <PanelBody className="panel-body">{children}</PanelBody>
+            </ErrorBoundary>
+          </ResizableContent>
+        </Resizable>
+      </PanelContainer>
+    </Draggable>
+  );
+};
+
+export const Panel: React.FC<PanelProps> = ({ ...props }) => {
+  return <Panel_ {...props} />;
+};

src/custom/Panel/index.tsx

@@ -0,0 +1,3 @@
+import { Panel } from './Panel';
+
+export { Panel };

src/custom/Panel/style.tsx

@@ -0,0 +1,117 @@
+import { ListItemProps } from '@mui/material';
+import { Box, ListItem } from '../../base';
+import { styled } from '../../theme';
+import { PanelProps } from './Panel';
+
+export const ListHeader = styled(ListItem)(({ theme }) => ({
+  padding: theme.spacing(0.5, 0.5),
+  marginBlock: theme.spacing(1),
+  '& .MuiListItemText-primary': {
+    fontSize: '1rem',
+    textTransform: 'capitalize',
+    fontWeight: 700
+  },
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover
+  },
+  '& .MuiSvgIcon-root': {
+    opacity: 0,
+    transition: 'opacity 0.2s'
+  },
+  '&:hover .MuiSvgIcon-root': {
+    opacity: 1
+  }
+}));
+
+interface CustomListItemProps extends ListItemProps {
+  isVisible: boolean;
+}
+
+export const StyledListItem = styled(ListItem, {
+  shouldForwardProp: (props) => props !== 'isVisible'
+})<CustomListItemProps>(({ theme, isVisible }) => ({
+  padding: theme.spacing(0.05, 0.5),
+  fontStyle: isVisible ? 'normal' : 'italic',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  '& .MuiSvgIcon-root': {
+    height: 20,
+    width: 20
+  },
+  '& .MuiListItemIcon-root': {
+    minWidth: 0,
+    opacity: isVisible ? 0.8 : 0.3
+  },
+  '& .MuiTypography-root': {
+    fontSize: '0.9rem',
+    opacity: isVisible ? 1 : 0.5
+  }
+}));
+
+export const DrawerHeader = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(4, 2),
+  alignContent: 'stretch',
+  justifyContent: 'space-between',
+  cursor: 'move',
+  background:
+    theme.palette.mode === 'light'
+      ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)'
+      : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)',
+  height: '3rem',
+  flexShrink: 0
+}));
+
+export const PanelBody = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2),
+  backgroundColor: theme.palette.background.surfaces,
+  overflow: 'auto',
+  flex: 1,
+  minHeight: 0
+}));
+
+export const ResizableContent = styled('div')({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '3rem'
+});
+
+export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intitialPosition'] }>(
+  ({ theme, intitialPosition }) => ({
+    borderRadius: '8px',
+    overflow: 'hidden',
+    flexShrink: 0,
+    zIndex: 99999,
+    position: 'absolute',
+    backgroundColor: theme.palette.background.blur?.light,
+    boxShadow: '0 4px 16px #05003812',
+    maxHeight: '80%',
+    display: 'flex',
+    boxSizing: 'border-box',
+    ...intitialPosition
+  })
+);
+
+export const DragHandle = styled('div')({
+  position: 'absolute',
+  top: '-3rem',
+  left: '50%'
+});
+
+export const HeaderActionsContainer = styled('div')({
+  display: 'flex',
+  gap: '1rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center'
+});
+
+export const HeaderContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'end',
+  alignItems: 'center',
+  flex: '1'
+});

src/custom/index.tsx

@@ -57,6 +57,7 @@ export { InputSearchField } from './InputSearchField';
 export { LearningContent } from './LearningContent';
 export { NavigationNavbar } from './NavigationNavbar';
 export { Note } from './Note';
+export { Panel } from './Panel';
 export { PerformersSection, PerformersSectionButton } from './PerformersSection';
 export { SetupPreReq } from './SetupPrerequisite';
 export { StyledChapter } from './StyledChapter';

src/icons/PanelDragHandle/PanelDragHandleIcon.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+
+export const PanelDragHandleIcon: FC<IconProps> = ({
+  height = 24,
+  width = 24,
+  fill = '#E8EFF3',
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_34897_172744)">
+        <path
+          d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_34897_172744">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default PanelDragHandleIcon;

src/icons/PanelDragHandle/index.tsx

@@ -0,0 +1 @@
+export { default as PanelDragHandleIcon } from './PanelDragHandleIcon';