pixel-react 1.4.2 → 1.4.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/assets/styles/_fonts.scss

@@ -1,10 +1,40 @@
-@import url('https://fonts.cdnfonts.com/css/poppins');
-
 @mixin fontPoppins($size: 16px) {
   font-family: 'Poppins';
   font-size: $size;
 }
 
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src:
+    local('Poppins-Regular'),
+    url(../../assets/fonts/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src:
+    local('Poppins-Medium'),
+    url(../../assets/fonts/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src:
+    local('Poppins-SemiBold'),
+    url(../../assets/fonts/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src:
+    local('Poppins-Bold'),
+    url(../../assets/fonts/Poppins-Bold.ttf) format('truetype');
+}
+
 .fontXs {
   @include fontPoppins(10px);
 }

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

@@ -5,6 +5,7 @@ import Button from '../Button/Button';
 import './MiniModal.scss';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import React from 'react';
 
 const meta: Meta<typeof MiniModal> = {
   title: 'Components/MiniModal',
@@ -41,14 +42,15 @@ const BasicModalComponent = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
+        id='112233'
         ref={btnRef1}
-        label="1"
+        label="122"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
       />
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef={btnRef1}
+          anchorRef="112233"
           modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
@@ -254,14 +256,14 @@ export const CustomModalWithArrow = () => {
     <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
       <Button
         onClick={() => openModal(1)}
-        ref={btnRef1}
-        label="1"
+        label="12"
+        id="1a2b"
         variant={currentModal === 1 ? 'primary' : 'secondary'}
       />
 
       {currentModal === 1 && (
         <MiniModal
-          anchorRef={btnRef1}
+          anchorRef='1a2b'
           modalProperties={{ width: 300, height: 250 }}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -40,6 +40,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -53,7 +54,18 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
         spaceBottom: viewportHeight - bottom,
       };
     };
-    const anchorRect = anchorRef.current?.getBoundingClientRect();
+
+    // Helper function to get the anchor element
+    const getAnchorElement = () => {
+      if (typeof anchorRef === 'string') {
+        return document.getElementById(anchorRef);
+      }
+      return anchorRef?.current || null;
+    };
+
+    const anchorElement = getAnchorElement();
+    const anchorRect = anchorElement?.getBoundingClientRect();
+
     if (!isWrapped && anchorRect) {
       const availableSpace = getAvailableSpace(anchorRect);
       switch (modalPosition) {
@@ -82,7 +94,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       }
     }
 
-    //specify for the wrapper div left position
+    // Specify for the wrapper div left position
     const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
       if (anchorRefLeftNum) {
         return anchorRefLeftNum;
@@ -90,7 +102,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       return 0;
     };
 
-    //specify for the arrow position in left or top
+    // Specify for the arrow position in left or top
     const getArrowClassName = () => {
       if (leftTopArrow && modalPosition === 'right') {
         return 'left-top-arrow';
@@ -99,13 +111,13 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     };
     const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
 
-    //specifying for specific wrapper modal position
+    // Specify specific wrapper modal position
     const firstAnchor =
       firstAnchorRef?.current &&
       firstAnchorRef?.current?.getBoundingClientRect().left -
         anchorLeftDistanceForWrapper;
 
-    //specifying the modal top
+    // Specifying the modal top
     const calculateModalTop = () => {
       const safeHeight = modalProperties?.height ?? 0;
       if (modalPosition === 'bottom') {
@@ -115,24 +127,18 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       } else if (modalPosition === 'right') {
         return leftTopArrow
           ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
-          : modalPositionState?.top -
-              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
+          : modalPositionState?.top - safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
       } else if (modalPosition === 'top') {
-        return (
-          modalPositionState.top -
-          (safeHeight + (extraTopSpace?.normalModal ?? 10))
-        );
+        return modalPositionState.top - (safeHeight + (extraTopSpace?.normalModal ?? 10));
       }
       return modalPositionState.top - safeHeight / 1.5;
     };
     const calculatedModalTop = calculateModalTop();
 
-    //specifying the modal left
+    // Specifying the modal left
     const calculateModalLeft = () => {
       if (modalPosition === 'right') {
-        return (
-          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
-        );
+        return modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40);
       } else if (firstAnchorRef) {
         return firstAnchor;
       } else if (modalPosition === 'left') {
@@ -143,16 +149,16 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     };
     const calculatedModalLeft = calculateModalLeft();
 
-    //specifying the modal's escape and enter functionality
+    // Handle 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
+    // Calculate the modal position
     const calculatePosition = useCallback(() => {
-      const anchorRect = anchorRef.current?.getBoundingClientRect();
+      const anchorRect = anchorElement?.getBoundingClientRect();
       if (anchorRect) {
         const { bottom, left } = anchorRect;
         const { scrollX, scrollY } = window;
@@ -164,7 +170,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           left: leftPosition,
         });
       }
-    }, [anchorRef, modalProperties]);
+    }, [anchorElement]);
 
     useEffect(() => {
       const timeoutId = setTimeout(() => {
@@ -213,10 +219,10 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               modalPosition === 'right'
                 ? 'left'
                 : modalPosition === 'top'
-                  ? 'bottom'
-                  : modalPosition === 'left'
-                    ? 'right'
-                    : 'top'
+                ? 'bottom'
+                : modalPosition === 'left'
+                ? 'right'
+                : 'top'
             } ${getArrowClassName()}`}
           />
         )}

package/src/components/MiniModal/types.ts

@@ -9,7 +9,7 @@ export interface MiniEditModalProps {
   /**
    * A reference to the button element that triggers the modal.
    */
-  anchorRef: RefObject<HTMLButtonElement>;
+  anchorRef: RefObject<HTMLButtonElement> | string;
   /**
    * Optional properties for configuring the modal header.
    */

package/src/components/Typography/Typography.scss

@@ -1,10 +1,40 @@
-@import url('https://fonts.cdnfonts.com/css/poppins');
-
 @mixin fontPoppins($size: 16px) {
   font-family: 'Poppins';
   font-size: $size;
 }
 
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src:
+    local('Poppins-Regular'),
+    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src:
+    local('Poppins-Medium'),
+    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src:
+    local('Poppins-SemiBold'),
+    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src:
+    local('Poppins-Bold'),
+    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+}
+
 .ff-text {
   @include fontPoppins();