Refactor actionBottomSheet and Create modal v2

Refactored the actionBottomSheet component to improve code readability and maintainability.
Created a new modal v2 component with enhanced features and better performance.
Updated relevant tests and documentation to reflect the changes.

Author: Kubit

src/components/actionBottomSheet/actionBottomSheet.styled.ts

@@ -25,6 +25,14 @@ export const ActionBottomSheetHeaderStyled = styled.div<IActionBottomSheetStyles
   ${props => getStyles(props.styles)}
 `;
 
+export const ActionBottomSheetControlStyled = styled.div<IActionBottomSheetStyles>`
+  ${props => getStyles(props.styles)}
+`;
+
+export const ActionBottomSheetActionStyled = styled.div<IActionBottomSheetStyles>`
+  ${props => getStyles(props.styles)}
+`;
+
 export const ActionBottomSheetIconSyled = styled.div<IActionBottomSheetStyles>`
   display: flex;
   ${props => getStyles(props.styles)}

src/components/actionBottomSheet/actionBottomSheetControlled.tsx

@@ -30,17 +30,17 @@ const ActionBottomSheetControlledStructureComponent = React.forwardRef(
     );
     const device = useMediaDevice();
 
-    const condition = React.useMemo(
+    const conditional = React.useMemo(
       () =>
         device !== DeviceBreakpointsType.DESKTOP && device !== DeviceBreakpointsType.LARGE_DESKTOP,
       [device]
     );
 
-    const { scrollableRef, shadowRef } = useScrollEffect(
-      condition,
-      styles.header?.[device]?.box_shadow,
-      SCROLL_DISTANCE
-    );
+    const { scrollableRef, shadowRef } = useScrollEffect({
+      conditional,
+      shadowStyles: styles.controlContainer?.[device]?.box_shadow,
+      shadowVisible: SCROLL_DISTANCE,
+    });
 
     return (
       <ActionBottomSheetStandAlone

src/components/actionBottomSheet/actionBottomSheetStandAlone.tsx

@@ -4,8 +4,11 @@ import { ElementOrIcon } from '@/components/elementOrIcon';
 import { Text } from '@/components/text/text';
 import { TextComponentType } from '@/components/text/types/component';
 
+import { Link } from '../link';
 import {
+  ActionBottomSheetActionStyled,
   ActionBottomSheetContentStyled,
+  ActionBottomSheetControlStyled,
   ActionBottomSheetHeaderContentStyled,
   ActionBottomSheetHeaderStyled,
   ActionBottomSheetIconSyled,
@@ -18,40 +21,60 @@ const ActionBottomSheetStandAloneComponent = (
   { hasHeader = true, scrollableRef, shadowRef, ...props }: IActionBottomSheetStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
+  // Parent container Ref
+  const actionBottomRef = React.useRef<HTMLDivElement | null>(null);
+
+  // Expose the ref to the parent component
+  React.useImperativeHandle(ref, () => {
+    return actionBottomRef.current as HTMLDivElement;
+  }, []);
+
+  // Set the parent componente ref for the scrollableRef function
+  React.useEffect(() => {
+    scrollableRef(actionBottomRef.current);
+  }, []);
+
   return (
     <ActionBottomSheetStyled
-      ref={ref}
+      ref={actionBottomRef}
       $height={props.height}
       data-testid={`${props.dataTestId}Container`}
       styles={props.styles.container}
     >
       {hasHeader && (
-        <ActionBottomSheetHeaderStyled ref={shadowRef} styles={props.styles.header}>
-          <ActionBottomSheetIconSyled styles={props.styles.closeIconContainer}>
-            <ElementOrIcon
-              customIconStyles={props.styles.closeIcon}
-              dataTestId={`${props.dataTestId}Icon`}
-              {...props.closeIcon}
-            />
-          </ActionBottomSheetIconSyled>
-          <ActionBottomSheetTitleSyled styles={props.styles}>
-            <Text
-              component={TextComponentType.H5}
-              customTypography={props.styles.title}
-              dataTestId={`${props.dataTestId}Title`}
-              {...props.title}
-            >
-              {props.title?.content}
-            </Text>
-          </ActionBottomSheetTitleSyled>
-          {props.headerContent && (
-            <ActionBottomSheetHeaderContentStyled styles={props.styles}>
-              {props.headerContent}
-            </ActionBottomSheetHeaderContentStyled>
-          )}
-        </ActionBottomSheetHeaderStyled>
+        <>
+          <ActionBottomSheetControlStyled ref={shadowRef} styles={props.styles.controlContainer}>
+            <ActionBottomSheetActionStyled styles={props.styles.actionLinkContainer}>
+              {props.actionLink && <Link {...props.actionLink} />}
+            </ActionBottomSheetActionStyled>
+            <ActionBottomSheetIconSyled styles={props.styles.closeIconContainer}>
+              <ElementOrIcon
+                customIconStyles={props.styles.closeIcon}
+                dataTestId={`${props.dataTestId}Icon`}
+                {...props.closeIcon}
+              />
+            </ActionBottomSheetIconSyled>
+          </ActionBottomSheetControlStyled>
+          <ActionBottomSheetHeaderStyled styles={props.styles.header}>
+            <ActionBottomSheetTitleSyled styles={props.styles}>
+              <Text
+                component={TextComponentType.H5}
+                customTypography={props.styles.title}
+                dataTestId={`${props.dataTestId}Title`}
+                {...props.title}
+              >
+                {props.title?.content}
+              </Text>
+            </ActionBottomSheetTitleSyled>
+            {props.headerContent && (
+              <ActionBottomSheetHeaderContentStyled styles={props.styles}>
+                {props.headerContent}
+              </ActionBottomSheetHeaderContentStyled>
+            )}
+          </ActionBottomSheetHeaderStyled>
+        </>
       )}
-      <ActionBottomSheetContentStyled ref={scrollableRef} styles={props.styles.content}>
+      <ActionBottomSheetContentStyled styles={props.styles.content}>
         {props.children}
       </ActionBottomSheetContentStyled>
     </ActionBottomSheetStyled>

src/components/actionBottomSheet/stories/actionBottomSheet.stories.tsx

@@ -41,7 +41,16 @@ export const ActionBottomSheet: Story = {
       ['aria-label']: 'ariaLabelButton',
     },
     headerContent: <ReplaceContent />,
-    children: <ReplaceContent />,
+    children: (
+      <>
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+      </>
+    ),
     open: true,
     themeArgs: themesObject[themeSelected][STYLES_NAME.ACTION_BOTTOM_SHEET],
   },

src/components/actionBottomSheet/types/actionBottomSheet.ts

@@ -1,4 +1,5 @@
 import { IElementOrIcon } from '@/components/elementOrIcon';
+import { ILink } from '@/components/link';
 import { IPopoverControlled } from '@/components/popover';
 import { IText } from '@/components/text';
 import { CustomTokenTypes, DeviceBreakpointsType } from '@/types';
@@ -21,6 +22,7 @@ export interface IActionBottomSheetStandAlone {
   children: React.ReactNode;
   styles: ActionBottomSheetVariantStylesType;
   closeIcon?: IElementOrIcon;
+  actionLink?: ILink;
   title?: ActionBottomSheetTextType;
   hasHeader?: boolean;
   dataTestId?: string;

src/components/actionBottomSheet/types/actionBottomSheetTheme.ts

@@ -9,6 +9,8 @@ import { CommonStyleType, IconTypes, TypographyTypes } from '@/types';
 export type ActionBottomSheetVariantStylesType = {
   container?: CommonStyleType;
   header?: CommonStyleType;
+  controlContainer?: CommonStyleType;
+  actionLinkContainer?: CommonStyleType;
   closeIconContainer?: CommonStyleType;
   closeIcon?: IconTypes;
   titleContainer?: CommonStyleType;

src/components/index.ts

@@ -34,6 +34,7 @@ export * from './breadcrumbs';
 export * from './drawer';
 export * from './message';
 export * from './modal';
+export * from './modalV2';
 export * from './oliveMenu';
 export * from './pillSelector';
 export * from './pillSelectorV2';

src/components/modal/modalControlled.tsx

@@ -27,15 +27,15 @@ const ModalControlledComponent = React.forwardRef(
     const styles = useStyles<ModalBaseStylesType, V>(STYLES_NAME.MODAL, variant, ctv);
     const device = useMediaDevice();
 
-    const condition = React.useMemo(
+    const conditional = React.useMemo(
       () =>
         device !== DeviceBreakpointsType.DESKTOP && device !== DeviceBreakpointsType.LARGE_DESKTOP,
       [device]
     );
-    const { scrollableRef, resizeRef, shadowRef } = useScrollEffect(
-      condition,
-      styles.headerContainer?.box_shadow
-    );
+    const { scrollableRef, resizeRef, shadowRef } = useScrollEffect({
+      conditional,
+      shadowStyles: styles.headerContainer?.box_shadow,
+    });
 
     const zoomRef = useZoomEffect(CONTAINER_STYLES_EDIT, MAX_ZOOM);
     const zoomRefChild = useZoomEffect(CONTENT_STYLES_EDIT, MAX_ZOOM);

src/components/modal/stories/modal.stories.tsx

@@ -24,12 +24,31 @@ const meta = {
     figmaUrl:
       'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-22906&mode=dev',
   },
+  render: ({ ...args }) => <StoryWithHooks {...args} />,
 } satisfies Meta<typeof Story>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
+const StoryWithHooks = args => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div style={{ width: 'fit-content' }}>
+      <button onClick={handleOpen}>Open Modal</button>
+      <Story {...args} closeIcon={{ ...args.closeIcon, onClick: handleClose }} open={open} />
+    </div>
+  );
+};
+
 export const Modal: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].ModalVariantType || {})[0] as string,