pixel-react 1.5.6 → 1.5.8

package/src/components/Charts/LineChart/LineChart.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { LineChartProps } from './types';
 import './LineChart.scss';
+import Typography from '../../Typography';
 
 interface HoverState {
   cursorX: number | null;
@@ -21,6 +22,9 @@ const LineChart: React.FC<LineChartProps> = ({
   xAxisColor,
   yAxisColor,
   yAxisLabelColor,
+  textSize,
+  fontWeight,
+  numberSize,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
@@ -29,29 +33,25 @@ const LineChart: React.FC<LineChartProps> = ({
   const isDefaultLineChart =
     data[0]?.data[0]?.hasOwnProperty('date') &&
     data[0]?.data[0]?.hasOwnProperty('totalMemory');
-  const xKey = isDefaultLineChart ? 'date' : 'date'; // 'date' for DefaultLineChart, 'x' for StatusLineChart
-  const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; // 'totalMemory' for DefaultLineChart, 'y' for StatusLineChart
-
-  const allZero = data.every((line) =>
-    line.data.every((d: { [key: string]: any }) => d[yKey] === 0)
-  );
-
-  const yMaxExtended = allZero
-    ? 4
-    : Math.max(
-        ...data.flatMap((line) =>
-          line.data.map((d: { [key: string]: any }) => d[yKey])
-        )
-      ) + 3;
-
+  const xKey = isDefaultLineChart ? 'date' : 'date'; 
+  const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; 
   const xScale = (x: string) => {
-    if (isDefaultLineChart) {
-      return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
-    }
-    return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
+    const date = new Date(x);
+    const time = date.getTime();
+    const minDate = new Date(
+      Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+    );
+    const maxDate = new Date(
+      Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+    );
+
+    return (
+      ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
+      xMax
+    );
   };
 
-  const yScale = (y: number) => yMax - (y * yMax) / yMaxExtended;
+  const yScale = (y: number) => yMax - (y * yMax) / 1024;
 
   const generateLinePath = (lineData: { [key: string]: any }[]) =>
     lineData.reduce((path, point, i) => {
@@ -127,11 +127,11 @@ const LineChart: React.FC<LineChartProps> = ({
       currentXValue: null,
     });
 
-  const xTickInterval = Math.floor(data[0].data.length / 6);
+  const xTickInterval = Math.floor(data[0].data.length / 4);
 
   return (
     <div className="ff-line-chart-text">
-      <p className="ff-line-chart-text1">{yAxisLabel}</p>
+      <Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
       <svg
         width={width}
         height={height}
@@ -155,6 +155,7 @@ const LineChart: React.FC<LineChartProps> = ({
             textAnchor="middle"
             fill={yAxisLabelColor}
             className="ff-line-chart-x-axis-label"
+            style={{fontSize:textSize , fontWeight:fontWeight}}
           >
             {xAxisLabel}
           </text>
@@ -185,7 +186,7 @@ const LineChart: React.FC<LineChartProps> = ({
                       r={5}
                       fill="white"
                       stroke={line.color}
-                      strokeWidth={2}
+                      strokeWidth={lineChartWidth}
                       style={{ transition: 'cx 0.1s, cy 0.1s' }}
                     />
                     <line
@@ -212,23 +213,25 @@ const LineChart: React.FC<LineChartProps> = ({
                 textAnchor="middle"
                 fill={yAxisColor}
                 className="ff--line-chart-x-line-data"
+                style={{ fontSize:numberSize}}
               >
                 {point[xKey] != null ? String(point[xKey]) : ''}
               </text>
             ))}
 
           {Array.from({ length: 6 }).map((_, i) => {
-            const yValue = (i * yMaxExtended) / 5;
+            const yValueInGB = i * 0.2; 
             return (
               <text
-                key={yValue}
+                key={yValueInGB}
                 x={-15}
-                y={yScale(yValue)}
+                y={yScale(yValueInGB * 1024)} 
                 textAnchor="middle"
                 fill={yAxisValueColor}
                 className="ff-line-chart-y-axis-text"
+                style={{ fontSize:numberSize}}
               >
-                {yValue.toFixed(1)}
+                {yValueInGB.toFixed(1)}
               </text>
             );
           })}

package/src/components/Charts/LineChart/types.ts

@@ -1,27 +1,29 @@
 export interface LineChartDataPoint {
-    point: any;
-    x: string;
-    y: number;
+  point: any;
+  x: string;
+  y: number;
 }
 
 export interface Line {
-    show: boolean;
-    color: string; 
-    data: LineChartDataPoint[]; 
+  show: boolean;
+  color: string;
+  data: LineChartDataPoint[];
 }
 
 export interface LineChartProps {
-    data: any[]; 
-    width: number; 
-    height: number; 
-    axisColor: string; 
-    isStatusVariant?: boolean;
-    lineChartWidth?:number;
-    yAxisLabel?:string;
-    xAxisLabel?:string;
-    yAxisValueColor?:string;
-    xAxisColor?:string;
-    yAxisColor?:string;
-    yAxisLabelColor?:string;
-   
-}
+  data: any[];
+  width: number;
+  height: number;
+  axisColor: string;
+  isStatusVariant?: boolean;
+  lineChartWidth?: number;
+  yAxisLabel?: string;
+  xAxisLabel?: string;
+  yAxisValueColor?: string;
+  xAxisColor?: string;
+  yAxisColor?: string;
+  yAxisLabelColor?: string;
+  textSize?: string | number;
+  fontWeight?: string | number;
+  numberSize?: string | number;
+}

package/src/components/EditTextField/EditTextField.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import EditTextField from './EditTextField';
 import '../../assets/styles/_colors.scss';
 import './EditTextField.scss';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 const meta: Meta<typeof EditTextField> = {
   title: 'Components/EditTextField',

package/src/components/Icon/iconList.ts

@@ -220,6 +220,7 @@ import AddUser from '../../assets/icons/add_user.svg?react';
 import RemoveUser from '../../assets/icons/remove_user.svg?react';
 import AddToArchive from '../../assets/icons/add_archive.svg?react';
 import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
+import InfoUser from '../../assets/icons/info_user.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -436,5 +437,6 @@ Components['add_user'] = AddUser;
 Components['add_to_archive'] = AddToArchive;
 Components['remove_user'] = RemoveUser;
 Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
+Components['info_user'] = InfoUser;
 
 export default Components;

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -47,6 +47,7 @@
     @extend .fontSm;
   }
   .ff-text-field {
+    position: relative;
     padding: 0 4px;
     border-radius: 4px;
   }

package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import LabelEditTextField from './LabelEditTextField';
 import '../../assets/styles/_colors.scss';
@@ -17,7 +18,7 @@ export const textField: Story = {
   render: () => {
     const handleConfirmAction = (inputValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-      console.log('Confirmed input value:', inputValue);
+      return inputValue;
     };
     return (
       <LabelEditTextField
@@ -31,9 +32,13 @@ export const textField: Story = {
           name: 'close',
           onClick: () => {},
         }}
-        width="300px"
         height="22px"
         confirmAction={handleConfirmAction}
+        onClick={() => {}}
+        tooltip={{
+          tooltipTitle: 'text',
+          tooltipPlacement: 'bottom',
+        }}
       />
     );
   },
@@ -42,7 +47,7 @@ export const textFieldWithOutLabel: Story = {
   render: () => {
     const handleConfirmAction = (inputValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-      console.log('Confirmed input value:', inputValue);
+      return inputValue;
     };
     return (
       <LabelEditTextField
@@ -66,7 +71,7 @@ export const openTextFieldWithOutLabel: Story = {
   render: () => {
     const handleConfirmAction = (inputValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-      console.log('Confirmed input value:', inputValue);
+      return inputValue;
     };
     return (
       <LabelEditTextField
@@ -91,11 +96,7 @@ export const textFieldWithDropdown: Story = {
   render: () => {
     const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-      console.log(
-        'Confirmed input value and dropdown value:',
-        inputValue,
-        dropdownValue
-      );
+      return { inputValue, dropdownValue };
     };
     return (
       <LabelEditTextField
@@ -125,12 +126,7 @@ export const textFieldWithHighlight: Story = {
   render: () => {
     const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-
-      console.log(
-        'Confirmed input value and dropdown value:',
-        inputValue,
-        dropdownValue
-      );
+      return { inputValue, dropdownValue };
     };
     return (
       <LabelEditTextField

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -4,6 +4,7 @@ import { LabelEditTextFieldTypes } from './types';
 import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
+import Tooltip from '../Tooltip';
 
 const getErrorMessage = (
   inputValue: string,
@@ -32,10 +33,12 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   variant = 'textField',
   dropdownData = [],
-  width = '300px',
+  width,
   height = '22px',
   isOpen = false,
   confirmAction,
+  onClick,
+  tooltip,
 }) => {
   const [isEditing, setIsEditing] = useState(isOpen ?? false);
   const [inputValue, setInputValue] = useState(text);
@@ -47,12 +50,38 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   const [isDropdownModified, setIsDropdownModified] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
-
+  const [clickTimeout, setClickTimeout] = useState<number | null>(null);
+  useEffect(() => {
+    return () => {
+      if (clickTimeout) {
+        clearTimeout(clickTimeout);
+      }
+    };
+  }, [clickTimeout]);
   const handleDoubleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
     setIsEditing(true);
     setShowError('');
   };
+  const handleSingleClick = () => {
+    if (onClick) onClick();
+  };
+  const handleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
 
+    const timeout = window.setTimeout(() => {
+      handleSingleClick();
+      setClickTimeout(null);
+    }, 1000);
+
+    setClickTimeout(timeout);
+  };
   const handleConfirm = () => {
     const errorMessage = getErrorMessage(
       inputValue,
@@ -116,11 +145,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   }, [inputValue]);
 
   return (
-    <div
-      className="ff-label-edit-text-field"
-      ref={containerRef}
-      style={{ width }}
-    >
+    <div className="ff-label-edit-text-field" ref={containerRef}>
       {isEditing ? (
         <div className="ff-label-text-field">
           {variant === 'textFieldWithDropdown' ? (
@@ -195,13 +220,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
           </div>
         </div>
       ) : (
-        <span
-          className="display-text"
-          onDoubleClick={handleDoubleClick}
-          role="button"
+        <Tooltip
+          title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
+          placement={'bottom'}
         >
-          <HighlightText text={inputValue} highlight={highlightText} />
-        </span>
+          <span
+            className="display-text"
+            onDoubleClick={handleDoubleClick}
+            role="button"
+            onClick={handleClick}
+          >
+            <HighlightText text={inputValue} highlight={highlightText} />
+          </span>
+        </Tooltip>
       )}
       {showError && isEditing && (
         <Typography as="p" fontSize={8} className="error-text">

package/src/components/LabelEditTextField/types.ts

@@ -38,4 +38,9 @@ export interface LabelEditTextFieldTypes {
   isOpen?: boolean;
   /**for conditionally handle custom error */
   customErrorCondition?: boolean;
+  onClick?: () => void;
+  tooltip?: {
+    tooltipTitle?: string;
+    tooltipPlacement?: string;
+  };
 }

package/src/components/MiniModal/MiniModal.scss

@@ -8,6 +8,12 @@
   top: $top;
   left: $left;
 }
+.ff-mini-modal-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+}
 .ff-mini-edit-modal-container {
   width: fit-content;
   padding: 0;
@@ -17,9 +23,7 @@
     visibility: visible;
   }
   &.animatedModal {
-    animation:
-      slideDown 0.5s ease,
-      opacity 0.5s ease;
+    animation: slideDown 0.5s ease, opacity 0.5s ease;
   }
 
   .popover-arrow {
@@ -91,7 +95,7 @@
     position: absolute;
     top: -34px;
     border-radius: 7px 7px 0 0;
-    box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);
+
     &::before,
     &::after {
       position: absolute;
@@ -121,7 +125,7 @@
     width: 100%;
     margin: 0 0 0 -5px;
     height: 100%;
-    box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
+
     &.mini-edit-modal-wrapper-shadow {
       box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
     }

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

@@ -51,6 +51,10 @@ const BasicModalComponent = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef="112233"
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+          }}
           modalProperties={{ width: 300, height: 180 }}
           headerProps={
             <>
@@ -263,7 +267,12 @@ export const CustomModalWithArrow = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef="1a2b"
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+          }}
           modalProperties={{ width: 300, height: 250 }}
+          arrowZIndex={1000}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -287,6 +296,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -326,6 +336,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -368,6 +379,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -408,6 +420,7 @@ export const CustomModalWithArrow = () => {
             text: 'Cancel',
             onClick: handleCancel,
           }}
+          outSideClick={handleCancel}
           proceedButtonProps={{
             text: 'Proceed',
             onClick: () => {},
@@ -451,6 +464,7 @@ export const CustomModalWithArrow = () => {
               <button onClick={handleCancel}>Cancel</button>
             </>
           }
+          outSideClick={handleCancel}
           cancelButtonProps={{
             text: 'Cancel',
             onClick: handleCancel,
@@ -492,6 +506,11 @@ export const CustomModalWithWrapper = () => {
       {currentModal === 1 && (
         <MiniModal
           anchorRef={btnRef1}
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+            backgroundColorOverlay: 'var(--pop-up-background-blur)',
+          }}
           modalProperties={{ width: 487, height: 180 }}
           headerProps={
             <>
@@ -506,6 +525,7 @@ export const CustomModalWithWrapper = () => {
               </Typography>
             </>
           }
+          outSideClick={handleCancel}
           cancelButtonProps={{
             text: 'Cancel',
             onClick: handleCancel,
@@ -551,6 +571,7 @@ export const CustomModalWithWrapper = () => {
             text: 'Export',
             onClick: () => {},
           }}
+          outSideClick={handleCancel}
           isWrapped={true}
           isAnimated={false}
           firstAnchorRef={btnRef1}
@@ -575,8 +596,9 @@ export const CustomModalWithWrapper = () => {
             height: 210,
             borderRadius: 0,
             zIndex: 3,
+            boxShadow: 'none',
           }}
-          wrapperProperties={{ width: 30, zIndex: 4 }}
+          wrapperProperties={{ width: 30, zIndex: 4, boxShadow: 'none' }}
           headerProps={
             <>
               <Typography as="p">Delete Selected Scripts</Typography>
@@ -600,6 +622,7 @@ export const CustomModalWithWrapper = () => {
           }}
           isWrapped={true}
           isAnimated={true}
+          outSideClick={handleCancel}
           firstAnchorRef={btnRef1}
           anchorRefLeftNum={225}
           anchorLeftDistanceForWrapper={170}
@@ -630,6 +653,10 @@ export const normalModalFollowedByIcon = () => {
         <MiniModal
           anchorRef={iconRef1}
           modalProperties={{ width: 168, height: 108 }}
+          overlay={{
+            isOverlay: true,
+            zIndexOverlay: 99,
+          }}
           childContent={
             <>
               <Typography as="p">