feat: add clipped box component

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
     "editor.codeActionsOnSave": {
-        "source.organizeImports": false,
-        "source.fixAll.eslint": true,
+        "source.organizeImports": "never",
+        "source.fixAll.eslint": "always"
     },
     "editor.formatOnSave": false,
     "eslint.format.enable": false,

packages/react-components-lab/src/components/ClippedBox/ClippedBox.stories.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/destructuring-assignment */
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+import { Box } from '@mui/material';
+import ClippedBox from './ClippedBox';
+import { ClippedBoxProps } from './types';
+import getDhiPalette from '../ThemeProvider/getDhiPalette';
+
+const dhiPalette = getDhiPalette('light');
+
+const Template: Story<ClippedBoxProps> = (args) => (
+  <ClippedBox
+    {...args}
+    base={
+      <Box
+        sx={{
+          height: args.height,
+          width: '100%',
+          backgroundColor: dhiPalette.primary.main,
+        }}
+      />
+    }
+    overlay={
+      <Box
+        sx={{
+          height: args.height,
+          width: '100%',
+          backgroundColor: dhiPalette.secondary.main,
+        }}
+      />
+    }
+  />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  direction: 'horizontal',
+  height: 100,
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  direction: 'vertical',
+  height: 400,
+};
+
+export default {
+  title: 'Components/ClippedBox',
+  component: ClippedBox,
+} as Meta;

packages/react-components-lab/src/components/ClippedBox/ClippedBox.tsx

@@ -0,0 +1,143 @@
+import { UnfoldMore } from '@mui/icons-material';
+import { Box, Stack } from '@mui/material';
+import React, { FC, ReactNode, useEffect, useRef, useState } from 'react';
+import { ClippedBoxProps } from './types';
+
+const ClippedBox: FC<ClippedBoxProps> = ({
+  height,
+  base,
+  overlay,
+  direction = 'horizontal',
+}) => {
+  const horizontal = direction === 'horizontal';
+
+  const [handlePosition, setHandlePosition] = useState(50);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const startDrag = (e: MouseEvent) => {
+    setIsDragging(true);
+    e.preventDefault();
+  };
+
+  const onDrag = (e: MouseEvent) => {
+    if (!isDragging || !containerRef.current) {
+      return;
+    }
+
+    const bounds = containerRef.current.getBoundingClientRect();
+    const newPosition = horizontal
+      ? ((e.clientX - bounds.left) / bounds.width) * 100
+      : ((e.clientY - bounds.top) / bounds.height) * 100;
+    setHandlePosition(Math.min(Math.max(newPosition, 0), 100));
+  };
+
+  const stopDrag = () => {
+    setIsDragging(false);
+  };
+
+  useEffect(() => {
+    if (!isDragging) {
+      return () => {};
+    }
+
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', stopDrag);
+
+    return () => {
+      document.removeEventListener('mousemove', onDrag);
+      document.removeEventListener('mouseup', stopDrag);
+    };
+  }, [isDragging]);
+
+  const clipPathValue = horizontal
+    ? `polygon(0 0, ${handlePosition}% 0, ${handlePosition}% 100%, 0 100%)`
+    : `polygon(0 0, 100% 0, 100% ${handlePosition}%, 0 ${handlePosition}%)`;
+
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        position: 'relative',
+        width: '100%',
+        height,
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          width: '100%',
+          height: 'fit-content',
+          left: 0,
+          top: 0,
+        }}
+      >
+        {base}
+      </Box>
+
+      <Box
+        sx={{
+          position: 'absolute',
+          width: '100%',
+          height: 'fit-content',
+          left: 0,
+          top: 0,
+          clipPath: clipPathValue,
+        }}
+      >
+        {overlay}
+      </Box>
+
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          position: 'absolute',
+          top: horizontal ? '0px' : `${handlePosition}%`,
+          left: horizontal ? `${handlePosition}%` : '0px',
+          transform: horizontal ? 'translateX(-50%)' : 'translateY(-50%)',
+          width: horizontal ? 'auto' : '100%',
+          height: horizontal ? height : 'auto',
+        }}
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            width: horizontal ? '5px' : 'calc(50% - 27px)',
+            height: horizontal ? 'calc(50% - 27px)' : '5px',
+            backgroundColor: 'white',
+            top: horizontal ? 0 : undefined,
+            left: horizontal ? undefined : 0,
+            zIndex: 1,
+          }}
+        />
+
+        <Box
+          sx={{
+            position: 'absolute',
+            width: horizontal ? '5px' : 'calc(50% - 27px)',
+            height: horizontal ? 'calc(50% - 27px)' : '5px',
+            backgroundColor: 'white',
+            bottom: horizontal ? 0 : undefined,
+            right: horizontal ? undefined : 0,
+          }}
+        />
+
+        <UnfoldMore
+          sx={{
+            color: 'white',
+            fontSize: '54px',
+            border: '5px solid white',
+            borderRadius: '50%',
+            zIndex: 1,
+            transform: horizontal ? 'rotate(90deg)' : 'none',
+            cursor: horizontal ? 'ew-resize' : 'ns-resize',
+          }}
+          onMouseDown={startDrag as any}
+        />
+      </Stack>
+    </Box>
+  );
+};
+
+export default ClippedBox;

packages/react-components-lab/src/components/ClippedBox/types.ts

@@ -0,0 +1,6 @@
+export interface ClippedBoxProps {
+    height: number | string
+    base: ReactNode
+    overlay: ReactNode
+    direction?: 'horizontal' | 'vertical'
+}