pixel-react 1.0.0

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -0,0 +1,475 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useRef, useState } from 'react';
+import MiniModal from './MiniModal';
+import Button from '../Button/Button';
+import './MiniModal.scss';
+import Typography from '../Typography';
+
+const meta: Meta<typeof MiniModal> = {
+  title: 'Components/MiniModal',
+  component: MiniModal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MiniModal>;
+
+const useModal = () => {
+  const [currentModal, setCurrentModal] = useState<number | null>(null);
+  const openModal = (modalId: number) => {
+    setCurrentModal((prevModal) => (prevModal === modalId ? null : modalId));
+  };
+  const closeModal = () => setCurrentModal(null);
+  return { currentModal, openModal, closeModal };
+};
+const BasicModalComponent = () => {
+  const btnRef1 = useRef<HTMLButtonElement>(null);
+  const btnRef2 = useRef<HTMLButtonElement>(null);
+  const { currentModal, openModal, closeModal } = useModal();
+
+  const handleCancel = () => {
+    closeModal();
+  };
+
+  return (
+    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
+      <Button
+        onClick={() => openModal(1)}
+        ref={btnRef1}
+        label="1"
+        variant={currentModal === 1 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 1 && (
+        <MiniModal
+          anchorRef={btnRef1}
+          headerProps={
+            <>
+              <Typography as="p">Modal 1</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some asdsadasd sa dasdadad content inside the first
+                modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          isWrapped={false}
+          isAnimated={true}
+        />
+      )}
+
+      <Button
+        onClick={() => openModal(2)}
+        ref={btnRef2}
+        label="2"
+        variant={currentModal === 2 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 2 && (
+        <MiniModal
+          anchorRef={btnRef2}
+          headerProps={
+            <>
+              <Typography as="p" fontSize={12} fontWeight="regular">
+                Modal 2
+              </Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p" fontSize={12} fontWeight="regular">
+                This is some content inside the second modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          isWrapped={false}
+          isAnimated={false}
+        />
+      )}
+    </div>
+  );
+};
+export const BasicModal: Story = {
+  render: () => <BasicModalComponent />,
+};
+export const CustomModalWithWrapper = () => {
+  const btnRef1 = useRef<HTMLButtonElement>(null);
+  const btnRef2 = useRef<HTMLButtonElement>(null);
+  const btnRef3 = useRef<HTMLButtonElement>(null);
+  const { currentModal, openModal, closeModal } = useModal();
+
+  const handleCancel = () => {
+    closeModal();
+  };
+
+  return (
+    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
+      <Button
+        onClick={() => openModal(1)}
+        ref={btnRef1}
+        label="1"
+        variant={currentModal === 1 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 1 && (
+        <MiniModal
+          anchorRef={btnRef1}
+          modalProperties={{ width: 487, height: 180 }}
+          headerProps={
+            <>
+              <Typography as="p">Update Label For Scripts</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the first modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Update',
+            onClick: () => {},
+          }}
+          isWrapped={true}
+          isAnimated={true}
+          firstAnchorRef={btnRef1}
+          anchorRefLeftNum={164}
+          anchorLeftDistanceForWrapper={170}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+
+      <Button
+        onClick={() => openModal(2)}
+        ref={btnRef2}
+        label="2"
+        variant={currentModal === 2 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 2 && (
+        <MiniModal
+          anchorRef={btnRef2}
+          modalProperties={{ width: 358, height: 135 }}
+          headerProps={
+            <>
+              <Typography as="p">Export Selected scripts</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <Typography as="p">Child content modify here</Typography>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Export',
+            onClick: () => {},
+          }}
+          isWrapped={true}
+          isAnimated={false}
+          firstAnchorRef={btnRef1}
+          anchorRefLeftNum={193}
+          anchorLeftDistanceForWrapper={170}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+
+      <Button
+        onClick={() => openModal(3)}
+        ref={btnRef3}
+        label="3"
+        variant={currentModal === 3 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 3 && (
+        <MiniModal
+          anchorRef={btnRef3}
+          modalProperties={{ width: 487, height: 210 }}
+          headerProps={
+            <>
+              <Typography as="p">Delete Selected Scripts</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Delete',
+            onClick: () => {},
+          }}
+          isWrapped={true}
+          isAnimated={true}
+          firstAnchorRef={btnRef1}
+          anchorRefLeftNum={225}
+          anchorLeftDistanceForWrapper={170}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+    </div>
+  );
+};
+export const CustomModalWithArrow = () => {
+  const btnRef1 = useRef<HTMLButtonElement>(null);
+  const btnRef2 = useRef<HTMLButtonElement>(null);
+  const btnRef3 = useRef<HTMLButtonElement>(null);
+  const btnRef4 = useRef<HTMLButtonElement>(null);
+  const btnRef5 = useRef<HTMLButtonElement>(null);
+  const { currentModal, openModal, closeModal } = useModal();
+
+  const handleCancel = () => {
+    closeModal();
+  };
+
+  return (
+    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
+      <Button
+        onClick={() => openModal(1)}
+        ref={btnRef1}
+        label="1"
+        variant={currentModal === 1 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 1 && (
+        <MiniModal
+          anchorRef={btnRef1}
+          modalProperties={{ width: 400, height: 350 }}
+          headerProps={
+            <>
+              <Typography as="p">Modal 1</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          isWrapped={false}
+          isAnimated={true}
+          isPopOver={true}
+          extraTopSpace={{ normalModal: 10 }}
+        />
+      )}
+      <Button
+        onClick={() => openModal(2)}
+        ref={btnRef2}
+        label="2"
+        variant={currentModal === 2 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 2 && (
+        <MiniModal
+          modalProperties={{ width: 400, height: 350 }}
+          anchorRef={btnRef2}
+          headerProps={
+            <>
+              <Typography as="p">Modal 2</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal. Lorem ipsum dolor
+                elit.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          isWrapped={false}
+          isAnimated={false}
+          isPopOver={true}
+          modalPosition="right"
+          extraRightSpace={{ middleLeftArrow: 4 }}
+          extraLeftSpace={{ rightAlignModal: 40 }}
+        />
+      )}
+      <Button
+        onClick={() => openModal(3)}
+        ref={btnRef3}
+        label="3"
+        variant={currentModal === 3 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 3 && (
+        <MiniModal
+          anchorRef={btnRef3}
+          headerProps={
+            <>
+              <Typography as="p">Modal 3</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal. Lorem ipsum dolor
+                sit.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          modalPosition="right"
+          isPopOver={true}
+          leftTopArrow={true}
+          extraRightSpace={{ middleLeftArrow: 30 }}
+          extraLeftSpace={{ rightAlignModal: 40 }}
+        />
+      )}
+      <Button
+        onClick={() => openModal(4)}
+        ref={btnRef4}
+        label="4"
+        variant={currentModal === 4 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 4 && (
+        <MiniModal
+          anchorRef={btnRef4}
+          modalProperties={{ height: 148 }}
+          headerProps={
+            <>
+              <Typography as="p">Modal 4</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal. Lorem ipsum dolor
+                sit.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          modalPosition="top"
+          isPopOver={true}
+          leftTopArrow={true}
+          extraTopSpace={{ normalModal: 20 }}
+          extraRightSpace={{ middleLeftArrow: 30 }}
+          extraLeftSpace={{ rightAlignModal: 40 }}
+        />
+      )}
+      <Button
+        onClick={() => openModal(5)}
+        ref={btnRef5}
+        label="5"
+        variant={currentModal === 5 ? 'primary' : 'secondary'}
+      />
+
+      {currentModal === 5 && (
+        <MiniModal
+          anchorRef={btnRef5}
+          modalProperties={{ height: 148, width: 404 }}
+          headerProps={
+            <>
+              <Typography as="p">Modal 5</Typography>
+              <hr />
+            </>
+          }
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal. Lorem ipsum dolor
+                sit.
+              </Typography>
+            </>
+          }
+          cancelButtonProps={{
+            text: 'Cancel',
+            onClick: handleCancel,
+          }}
+          proceedButtonProps={{
+            text: 'Proceed',
+            onClick: () => {},
+          }}
+          modalPosition="left"
+          isPopOver={true}
+          leftTopArrow={true}
+          extraTopSpace={{ normalModal: 20 }}
+          extraRightSpace={{ middleLeftArrow: 30 }}
+          extraLeftSpace={{ rightAlignModal: 40 }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default meta;

package/src/components/MiniModal/MiniModal.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { createPortal } from 'react-dom';
+import { MiniEditModalProps } from './types.js';
+import Button from '../Button/Button.js';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+import useClickOutside from '../../hooks/useClickOutside';
+import classNames from 'classnames';
+import './MiniModal.scss';
+import Typography from '../Typography';
+
+const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
+  (
+    {
+      anchorRef,
+      headerProps,
+      childContent,
+      cancelButtonProps,
+      proceedButtonProps,
+      footerContent,
+      isWrapped = false,
+      isAnimated = false,
+      isPopOver = false,
+      modalPosition = 'bottom',
+      leftTopArrow = false,
+      firstAnchorRef,
+      anchorRefLeftNum,
+      modalProperties,
+      anchorLeftDistanceForWrapper = 170,
+      extraTopSpace,
+      extraRightSpace,
+      extraLeftSpace,
+    },
+    ref
+  ) => {
+    const [modalPositionState, setModalPositionState] = useState({
+      top: 0,
+      left: 0,
+    });
+    const [isVisible, setIsVisible] = useState(false);
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    //specify for the wrapper div left position
+    const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
+      if (anchorRefLeftNum) {
+        return anchorRefLeftNum;
+      }
+      return 0;
+    };
+
+    //specify for the arrow position in left or top
+    const getArrowClassName = () => {
+      if (leftTopArrow && modalPosition === 'right') {
+        return 'left-top-arrow';
+      }
+      return modalPosition === 'right' ? 'left-middle-arrow' : '';
+    };
+    const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
+
+    //specifying for specific wrapper modal position
+    const firstAnchor =
+      firstAnchorRef?.current &&
+      firstAnchorRef?.current?.getBoundingClientRect().left -
+        anchorLeftDistanceForWrapper;
+
+    //specifying the modal top
+    const calculateModalTop = () => {
+      const safeHeight = modalProperties?.height ?? 0;
+      if (modalPosition === 'bottom') {
+        return isWrapped
+          ? modalPositionState.top + (extraTopSpace?.wrappedModal ?? 5)
+          : modalPositionState.top + (extraTopSpace?.normalModal ?? 10);
+      } else if (modalPosition === 'right') {
+        return leftTopArrow
+          ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
+          : modalPositionState?.top -
+              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+      } else if (modalPosition === 'top') {
+        return (
+          modalPositionState.top -
+          (safeHeight + (extraTopSpace?.normalModal ?? 10))
+        );
+      }
+      return modalPositionState.top - safeHeight / 1.5;
+    };
+    const calculatedModalTop = calculateModalTop();
+
+    //specifying the modal left
+    const calculateModalLeft = () => {
+      if (modalPosition === 'right') {
+        return (
+          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
+        );
+      } else if (firstAnchorRef) {
+        return firstAnchor;
+      } else if (modalPosition === 'left') {
+        return modalPositionState.left - (modalProperties?.width ?? 404) - 15;
+      } else {
+        return modalPositionState.left - (extraLeftSpace?.normal ?? 30);
+      }
+    };
+    const calculatedModalLeft = calculateModalLeft();
+
+    //specifying the modal's escape and enter functionality
+    const handleEsc = useEscapeKey('Escape');
+    const handleEnter = useEscapeKey('Enter');
+    handleEsc(cancelButtonProps.onClick);
+    handleEnter(proceedButtonProps.onClick);
+    useClickOutside(modalRef, cancelButtonProps.onClick);
+
+    //calculate the modal position
+    const calculatePosition = useCallback(() => {
+      const anchorRect = anchorRef.current?.getBoundingClientRect();
+      if (anchorRect) {
+        const { bottom, left } = anchorRect;
+        const { scrollX, scrollY } = window;
+        let topPosition = bottom + scrollY;
+        let leftPosition = left + scrollX;
+
+        setModalPositionState({
+          top: topPosition,
+          left: leftPosition,
+        });
+      }
+    }, [anchorRef, modalProperties]);
+
+    useEffect(() => {
+      const timeoutId = setTimeout(() => {
+        setIsVisible(true);
+        calculatePosition();
+      }, 100);
+      window.addEventListener('resize', calculatePosition);
+      window.addEventListener('scroll', calculatePosition);
+
+      return () => {
+        window.removeEventListener('resize', calculatePosition);
+        clearTimeout(timeoutId);
+        window.removeEventListener('scroll', calculatePosition);
+      };
+    }, [calculatePosition]);
+
+    if (isWrapped && isPopOver) {
+      return null;
+    }
+
+    return createPortal(
+      <div
+        ref={ref || modalRef}
+        className={classNames('ff-mini-edit-modal-container', {
+          modalVisible: isVisible,
+          animatedModal: isAnimated,
+        })}
+        style={{
+          top: `${calculatedModalTop}px`,
+          left: `${calculatedModalLeft}px`,
+        }}
+      >
+        {isPopOver && (
+          <div
+            className={`popover-arrow popover-arrow-${
+              modalPosition === 'right'
+                ? 'left'
+                : modalPosition === 'top'
+                ? 'bottom'
+                : modalPosition === 'left'
+                ? 'right'
+                : 'top'
+            } ${getArrowClassName()}`}
+          />
+        )}
+        {isWrapped && (
+          <div
+            className={'wrapped-div'}
+            style={{ left: `${calculatedAnchorRefLeft}px` }}
+          ></div>
+        )}
+        <div
+          className="mini-edit-modal"
+          style={{
+            minWidth: isWrapped ? '358px' : '',
+            width: `${modalProperties?.width}px`,
+            height: `${modalProperties?.height}px`,
+          }}
+        >
+          {headerProps ? (
+            <Typography as="p">{headerProps}</Typography>
+          ) : (
+            <Typography as="header">
+              <Typography as="h2">Header text</Typography>
+              <hr />
+            </Typography>
+          )}
+          <div className="modal-content">{childContent}</div>
+          {footerContent ? (
+            <Typography as="footer">{footerContent}</Typography>
+          ) : (
+            <footer className="modal-footer">
+              <Button
+                variant="primary"
+                className="btn-cancel"
+                onClick={cancelButtonProps.onClick}
+                label={cancelButtonProps.text}
+              />
+              <Button
+                variant="secondary"
+                className="btn-proceed"
+                label={proceedButtonProps?.text}
+                onClick={proceedButtonProps?.onClick}
+              />
+            </footer>
+          )}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+);
+
+export default MiniModal;

package/src/components/MiniModal/index.ts

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