Add collapse and resize

Author: jackcloudquery

src/components/controls/collapseToggle.tsx

@@ -0,0 +1,38 @@
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+
+import IconButton from '@mui/material/IconButton';
+import useTheme from '@mui/material/styles/useTheme';
+
+interface Props {
+  collapsed: boolean;
+  onClick: () => void;
+}
+
+export function CollapseToggle({ collapsed, onClick }: Props) {
+  const { transitions } = useTheme();
+
+  return (
+    <IconButton
+      className={CollapseToggle.className}
+      onClick={onClick}
+      sx={{
+        '&:hover': {
+          bgcolor: 'nav.evidentBg',
+        },
+        bgcolor: 'nav.evidentBg',
+        border: '1px solid',
+        borderColor: 'nav.evidentDivider',
+        position: 'absolute',
+        right: 0,
+        top: '50%',
+        transform: collapsed ? 'translate(50%, -50%) rotate(180deg)' : 'translate(50%, -50%)',
+        transition: `opacity 150ms ${transitions.easing.easeInOut}, transform 150ms ${transitions.easing.easeInOut}`,
+        zIndex: 999,
+      }}
+    >
+      <ChevronLeft />
+    </IconButton>
+  );
+}
+
+CollapseToggle.className = 'shared-collapse-toggle';

src/components/controls/collapsibleResizableContainer.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import React, { TransitionEvent, useEffect, useRef, useState } from 'react';
+
+import Box, { BoxProps } from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+
+import { duration } from '@mui/material/styles/createTransitions';
+
+import useTheme from '@mui/material/styles/useTheme';
+
+import { CollapseToggle } from './collapseToggle';
+
+interface Props extends Omit<BoxProps, 'width' | 'minWidth'> {
+  collapsible?: boolean;
+  minWidth?: number;
+  resizable?: boolean;
+  width?: number;
+}
+
+export function CollapsibleResizableContainer({
+  children,
+  collapsible,
+  resizable,
+  ...props
+}: Props) {
+  const { transitions } = useTheme();
+  const [width, setWidth] = useState<number | undefined>(undefined); // Initial width of the container
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [applyMinWidth, setApplyMinWidth] = useState(false);
+  const disableTransition = useRef(false);
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const startX = e.clientX;
+    const startWidth = width ?? containerRef.current?.clientWidth;
+    disableTransition.current = true;
+
+    const onMouseMove = (e: MouseEvent) => {
+      setWidth(startWidth + (e.clientX - startX));
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.userSelect = '';
+      disableTransition.current = false;
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.body.style.userSelect = 'none';
+  };
+
+  const handleTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {
+    if (event.propertyName !== 'width') {
+      return;
+    }
+
+    if (!isCollapsed) {
+      setApplyMinWidth(true);
+    }
+  };
+
+  useEffect(() => {
+    if (isCollapsed) {
+      setApplyMinWidth(false);
+    }
+  }, [isCollapsed]);
+
+  const parsedWidth = Math.max(width ?? props.width ?? 0, props.minWidth ?? 0);
+
+  return (
+    <Box
+      ref={containerRef}
+      position="relative"
+      {...props}
+      minWidth={applyMinWidth ? (isCollapsed ? 24 : props.minWidth) : undefined}
+      onTransitionEnd={handleTransitionEnd}
+      sx={{
+        ...props.sx,
+        transition: disableTransition.current
+          ? undefined
+          : `width ${duration.standard}ms ${transitions.easing.easeInOut}`,
+        [`.${CollapseToggle.className}`]: {
+          opacity: 0,
+        },
+        [`&:hover .${CollapseToggle.className}`]: {
+          opacity: 1,
+        },
+      }}
+      width={isCollapsed ? 24 : parsedWidth}
+    >
+      <Stack flex="1 1 auto" minHeight={0} overflow="hidden">
+        <Stack flex="1 1 auto" minHeight={0} overflow="visible" width={parsedWidth}>
+          {children}
+        </Stack>
+      </Stack>
+      {resizable && (
+        <Box
+          bottom={0}
+          height="100%"
+          onMouseDown={handleMouseDown}
+          position="absolute"
+          right={-5}
+          sx={{ cursor: 'ew-resize' }}
+          title="Resize"
+          top={0}
+          width={10}
+          zIndex={1}
+        />
+      )}
+      {collapsible && (
+        <CollapseToggle collapsed={isCollapsed} onClick={() => setIsCollapsed(!isCollapsed)} />
+      )}
+    </Box>
+  );
+}

src/components/form/configUIForm.tsx

@@ -28,6 +28,7 @@ import { FormFooter, FormWrapper, GuideComponent } from '../display';
 import { PluginTable } from '../inputs';
 import { Sections } from './sections/sections';
 import { PluginConfig } from '../../types';
+import { CollapsibleResizableContainer } from '../controls/collapsibleResizableContainer';
 
 const FormStepper = React.lazy(() =>
   import('../display/formStepper').then((module) => ({
@@ -189,13 +190,7 @@ export function ConfigUIForm({ prepareSubmitValues }: ConfigUIFormProps) {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <FormProvider {...form}>
-        <Stack
-          direction="row"
-          sx={{
-            gap: 3,
-            flexWrap: 'wrap',
-          }}
-        >
+        <Stack direction="row" spacing={3}>
           <Box
             sx={{
               flex: '1 1 0',
@@ -251,9 +246,9 @@ export function ConfigUIForm({ prepareSubmitValues }: ConfigUIFormProps) {
               </Stack>
             </form>
           </Box>
-          <Box sx={{ width: 500, minWidth: 360 }}>
+          <CollapsibleResizableContainer collapsible={true} minWidth={360} width={500}>
             <GuideComponent pluginUiMessageHandler={pluginUiMessageHandler} />
-          </Box>
+          </CollapsibleResizableContainer>
         </Stack>
       </FormProvider>
     </ThemeProvider>