pixel-react 1.6.9 → 1.7.1

package/src/components/DownloadClient/DownloadClient.scss

@@ -1,80 +1,67 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts';
 @use '../../assets/styles/mixins' as *;
 
-.ff-download-client-overlay {
-  width: 378px;
-  height: 217px;  
+.ff-download-client-wrapper {
   position: absolute;
-  @include center-content;
-  z-index: 9999;
+  height: 181px;
+  width: 368px;
+  border: 1px solid var(--download-client-border-color);
+  border-radius: 4px;
+  box-shadow: 0px 0px 8px 0px
+    var(--download-client-icon-container-box-shadow-color);
 
-  .ff-download-client-container {
-    width: 370px;
+  .ff-download-client-header-wrapper {
+    position: relative;
     @include center-content;
-    flex-direction: column;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--download-client-border-color);
-    margin-left: 5px;
+    justify-content: space-between;
+    background-color: var(--download-client-header-bg-color);
 
-    .ff-download-client-header {
-      width: 100%;
-      @include center-content;
-      justify-content: space-between;
-      padding: 7px 4px;
-      margin-bottom: 8px;
-      border-radius: 4px 4px 0 0;
-      background-color: var(--download-client-header-bg-color);
-      box-sizing: border-box;
+    .ff-download-client-hollow-triangle {
+      position: absolute;
+      height: 8px;
+      width: 8px;
+      border: 1px solid var(--download-client-border-color);
+      top: -6px;
+      right: 64px;
+      z-index: -1;
+      border-radius: 2px;
+      transform: rotate(45deg);
+    }
 
-      .ff-header-arrow {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 10px;
-        right: 70px;
-        width: 10px;
-        height: 10px;
-        background-color: var(--download-client-icon-container-bg-color) ;
-        transform: translateY(-50%) rotate(-45deg);
-        z-index: -999;
-        border: 1px solid var(--download-client-header-bg-color); 
-      }
+    .ff-download-client-header-text {
+      margin-left: 4px;
+    }
 
+    .ff-download-client-close-icon {
+      cursor: pointer;
+      margin-right: 10px;
     }
+  }
 
-    .ff-download-client-content {
-      width: 100%;
-      @include center-content;
-      flex-direction: column;
-      padding-left: 8px;
-      padding-right: 24px;
-      gap: 8px;
-      margin-bottom: 8px;
-      color: var(--popup-text-color);
-      .ff-download-install,
-      .ff-choose-os {
-        padding: 4px 0;
-      }
+  .ff-download-client-content-text {
+    width: calc(100% - 16px);
+    height: 132px;
+    background-color: #fff;
+    padding: 8px;
+
+    .ff-download-client-description-text {
+      margin-bottom: 8px
     }
 
-    .ff-download-client-actions {
-      width: 240px;
+  }
+
+  .ff-download-client-os-wrapper {
+    @include center-content;
+    gap: 24px;
+
+    .ff-os-version-wrapper {
       @include center-content;
-      gap: 12px;
-      margin-bottom: 17px;
-      .ff-icons-container {
-        @include center-content;
-        width: 64px;
-        height: 64px;
-        border-radius: 8px;
-        border: 1px solid var(--download-client-icon-container-border-color);
-        background-color: var(--download-client-icon-container-bg-color);
-        cursor: pointer;
-        box-shadow: 0px 0px 10px 0px
-          var(--download-client-icon-container-box-shadow-color);
-      }
+      height: 64px;
+      width: 64px;
+      cursor: pointer;
+      border-radius: 8px;
+      border: 1px solid var(--download-client-icon-container-border-color);
+      box-shadow: 0px 0px 10px 0px
+        var(--download-client-icon-container-box-shadow-color);
     }
   }
 }

package/src/components/DownloadClient/DownloadClient.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import DownloadClient from './DownloadClient';
+import './DownloadClient.scss';
 
 const meta: Meta<typeof DownloadClient> = {
   title: 'Components/DownloadClient',
@@ -14,12 +15,11 @@ type Story = StoryObj<typeof DownloadClient>;
 
 export const Default: Story = {
   args: {
-    onClose: () =>{},
-    onClickWindows: () =>{},
-    onClickLinux: () =>{},
-    onClickMac: () =>{},
-    top: '100px',  
-    left: '50px',
+    onClose: () => {},
+    top: '50%',
+    left: '50%',
+    className: 'ff-download-client-stories',
+    onClick: () => {},
   },
 };
 

package/src/components/DownloadClient/DownloadClient.tsx

@@ -6,17 +6,13 @@ import { DownloadClientProps } from './type';
 
 const DownloadClient: React.FC<DownloadClientProps> = ({
   onClose,
-  onClickWindows,
-  onClickLinux,
-  onClickMac,
-  top = '10px',
-  left = '10px',
+  top = '100px',
+  left = '0px',
+  className,
+  description = 'Download and Install the fireflink client to run the script',
+  onClick = () => {},
+  optionZIndex = 10000001,
 }) => {
-  const title = 'Download Client';
-  const description =
-    'Download and Install the fireflink client to run the script';
-  const chooseOSText = 'Choose OS';
-
   useEffect(() => {
     const handleCloseDownloadClient = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -29,49 +25,62 @@ const DownloadClient: React.FC<DownloadClientProps> = ({
     };
   }, [onClose]);
 
+  const osVersion = ['windows', 'mac_icon', 'linux'];
+
   return (
-    <div className="ff-download-client-overlay" style={{ top, left }}>
-      <div className="ff-download-client-container">
-        <div className="ff-download-client-header">
-          <div className="ff-header-arrow"></div>
-          <Typography
-            color="var(--table-header-text-color)"
-            fontWeight="semi-bold"
-          >
-            {title}
-          </Typography>
-          <div onClick={onClose}>
-            <Icon name="close" width={12} height={12} />
-          </div>
-        </div>
-        <div className="ff-download-client-content">
-          <div className="ff-download-install">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-content-text-color)"
-            >
-              {description}
-            </Typography>
-          </div>
-          <div className="ff-choose-os">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-choose-os-text-color)"
+    <div
+      className={`ff-download-client-wrapper ${className}`}
+      style={{ top: top, left: left, zIndex: optionZIndex }}
+    >
+      <div className="ff-download-client-header-wrapper">
+        <div className="ff-download-client-hollow-triangle"></div>
+        <Typography
+          fontWeight="semi-bold"
+          lineHeight="32px"
+          className="ff-download-client-header-text"
+        >
+          Download client
+        </Typography>
+        <Icon
+          name="close"
+          color="var(--brand-color)"
+          className="ff-download-client-close-icon"
+          height={12}
+          width={12}
+        />
+      </div>
+
+      <div className="ff-download-client-content-text">
+        <Typography
+          as="div"
+          color="var(--download-client-content-text-color)"
+          fontWeight="semi-bold"
+          textAlign="center"
+          lineHeight="26px"
+        >
+          {description}
+        </Typography>
+        <Typography
+          as="div"
+          className="ff-download-client-description-text"
+          textAlign="center"
+          fontWeight="medium"
+          lineHeight='26px'
+        >
+          Choose OS to Download
+        </Typography>
+
+        <div className="ff-download-client-os-wrapper">
+          {osVersion.map((os) => (
+            <div
+              className="ff-os-version-wrapper"
+              onClick={() => {
+                onClick(os === 'mac_icon' ? 'mac' : os);
+              }}
             >
-              {chooseOSText}
-            </Typography>
-          </div>
-        </div>
-        <div className="ff-download-client-actions">
-          <div className="ff-icons-container" onClick={onClickWindows}>
-            <Icon name="windows" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickLinux}>
-            <Icon name="linux" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickMac}>
-            <Icon name="mac_icon" width={32} height={38} />
-          </div>
+              <Icon name={os} height={36} width={36} />
+            </div>
+          ))}
         </div>
       </div>
     </div>

package/src/components/DownloadClient/type.ts

@@ -1,41 +1,33 @@
 export interface DownloadClientProps {
-    /**
-     * Title of the popup.
-     */
-    title: string;
-  
-    /**
-     * Description or body text of the popup.
-     */
-    description: string;
-  
-    /**
-     * Callback for when the "Cancel" icon is clicked.
-     */
-    onCancel: () => void;
-  
-    /**
-     * Callback for when the "Download for Windows" icon is clicked.
-     */
-    onDownloadWindows: () => void;
-  
-    /**
-     * Callback for when the "Download for macOS" icon is clicked.
-     */
-    onDownloadMac: () => void;
-  
-    /**
-     * Optional flag to control whether to display icons for download actions instead of buttons.
-     * Defaults to `false` for buttons.
-     */
-    showIcons?: boolean;
-  }
-  
-export interface DownloadClientProps {
-    onClose?: () => void;
-    onClickWindows: () => void;
-    onClickLinux: () => void;
-    onClickMac: () => void;
-    top?: string;
-    left?: string;
-  }  
+  /**
+   * Close dialog function to close the modal dialog
+   **/
+  onClose: () => void;
+
+  /**
+   * distance between modal dialog and parent from top
+   **/
+  top?: string;
+
+  /**
+   * distance between modal dialog and parent from left
+   **/
+  left?: string;
+
+  /**
+   * To be used custom properties for the modal dialog through className
+   **/
+  className?: string;
+
+  /**
+   * Description of the dialog box
+   **/
+  description?: string;
+
+  /**
+   * Download button function
+   **/
+  onClick?: (os: string) => void;
+
+  optionZIndex?: number;
+}

package/src/components/EditTextField/EditTextField.scss

@@ -9,7 +9,7 @@
   .display-text-container {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 5px;
 
     .edit-button {
       padding: 4px 8px;

package/src/components/EditTextField/EditTextField.tsx

@@ -6,6 +6,7 @@ import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import { capitalize } from '../../utils/capitalize/capitalize';
+import Input from '../Input/Input';
 
 const getErrorMessage = (
   inputValue: string,
@@ -38,8 +39,8 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   editIcon,
   dropdownData = [],
-  width = '300px',
-  height = '22px',
+  // width = '',
+  // height = '',
   isOpen = false,
   confirmAction,
   onClick,
@@ -52,6 +53,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null);
 
@@ -96,27 +98,19 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
       {isEditing ? (
         <div className="ff-label-text-field">
           <div className="ff-label-text-field-without-dropdown">
-            <input
-              type="text"
+            <Input
+              name="input"
+              label={label ? label : ''}
+              disabled={false}
+              error={isThrowingError}
+              placeholder="Enter your name"
               value={inputValue}
               onChange={handleTextFieldChange}
-              className={`ff-text-field ${
-                showError && isEditing
-                  ? 'ff-text-field-error-border'
-                  : 'ff-text-field-border'
-              } ${isTextFieldModified ? 'modified' : ''}`}
-              placeholder=" "
-              style={{ width, height }}
+              className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              type="text"
             />
-            <label
-              className={`ff-textfield-label  ${
-                showError && isEditing
-                  ? 'ff-text-field-error-text'
-                  : 'ff-text-field-text'
-              }`}
-            >
-              {label}
-            </label>
           </div>
           <div className="ff-icon-container">
             {confirmIcon && (

package/src/components/Excel/ExcelFile/ExcelFile.scss

@@ -18,7 +18,7 @@
     // }
 
     .ff-excel-sheet-bar {
-      margin-left: 60px;
+      margin-left: 48px;
       display: flex;
       height: 36px;
       align-items: center;
@@ -27,7 +27,8 @@
       box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
 
       .ff-excel-add-sheet-icon {
-        padding: 4px 6px;
+        margin-top: 4px;
+        padding: 0px 6px;
       }
       .ff-excel-tab-container {
         height: 36px;

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -9,7 +9,10 @@ import { toast } from '../../Toastify/Toastify';
 import { ContextMenuState } from './ExcelFileComponents/types';
 import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
 import Typography from '../../Typography';
-import { convertStyleToBackend, convertStyleToFrontend } from '../dataConversion';
+import {
+  convertStyleToBackend,
+  convertStyleToFrontend,
+} from '../dataConversion';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
@@ -34,7 +37,9 @@ interface ExcelFileProps {
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  onSave = (saveData) => {saveData()},
+  onSave = (saveData) => {
+    saveData();
+  },
 }) => {
   const [sheetNames, setSheetNames] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
@@ -46,11 +51,19 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   const EmptyRow: CellBase = {
     value: '',
     style: {
-      color: 'var(--text-color)',
+      color: 'var(--input-hover-border-color)',
       backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-      textDecoration: 'none',
-      textDecorationStyle: 'solid',
+      borderColor: 'var(--excel-sheet-border)',
+      textDecoration: 'none solid',
+      borderRight: `1px solid var(--excel-sheet-border)`,
+      borderLeft: `1px solid var(--excel-sheet-border)`,
+      borderTop: `1px solid var(--excel-sheet-border)`,
+      borderBottom: `1px solid var(--excel-sheet-border)`,
+      fontSize: '15px',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontFamily: 'Times New Roman',
+      textAlign: 'center',
     },
   };
 
@@ -128,7 +141,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style) ,
+              style: convertStyleToFrontend(cell?.style),
               type: true,
             };
           }
@@ -153,7 +166,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     },
     [onSave]
   );
-  
+
   React.useEffect(() => {
     document.addEventListener('keydown', handleSave);
     return () => {
@@ -176,18 +189,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }, -1);
 
             const filteredRow = row
-            .map((cell, index) => {
-              if (cell && cell.value !== null) {
-                return {
-                  value: cell.value,
-                  styles: convertStyleToBackend(cell.style ?? {}),
-                };
-              } else if (cell && cell.type || index <= lastIndex) {
-                return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
-              }
-              return null;
-            })
-            .filter((cell) => cell !== null);
+              .map((cell, index) => {
+                if (cell && cell.value !== null) {
+                  return {
+                    value: cell.value,
+                    styles: convertStyleToBackend(cell.style ?? {}),
+                  };
+                } else if ((cell && cell.type) || index <= lastIndex) {
+                  return {
+                    value: '',
+                    styles: convertStyleToBackend(cell?.style ?? {}),
+                  };
+                }
+                return null;
+              })
+              .filter((cell) => cell !== null);
 
             return filteredRow.length > 0 ? filteredRow : [];
           }) || [];
@@ -208,7 +224,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     onSave(savedData);
     toast.success('File saved successfully!');
   };
-  
+
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
     onSaveWorksheetData();

package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx

@@ -21,6 +21,10 @@ const ActiveCell: React.FC<Props> = (props) => {
     [dispatch]
   );
   const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
+  const autoFill = React.useCallback(
+    (value: boolean) => dispatch(Actions.autoFill(value)),
+    [dispatch]
+  );
   const commit = React.useCallback(
     (changes: Types.CommitChanges<Types.CellBase>) =>
       dispatch(Actions.commit(changes)),
@@ -103,6 +107,10 @@ const ActiveCell: React.FC<Props> = (props) => {
   const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
   const readOnly = cell && cell.readOnly;
 
+  const handleMouseDown = React.useCallback(() => {
+    mode === 'view' ? autoFill(true) : autoFill(false);
+  }, [mode, autoFill]);
+
   return hidden ? null : (
     <div
       ref={rootRef}
@@ -124,6 +132,10 @@ const ActiveCell: React.FC<Props> = (props) => {
           exitEditMode={view}
         />
       )}
+      <div
+        onMouseDown={handleMouseDown}
+        className="select_dot"
+      ></div>
     </div>
   );
 };

package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx

@@ -24,8 +24,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   setCellData,
   setContextMenu,
 }): React.ReactElement => {
-  const [isDotDragging, setIsDotDragging] = React.useState(false);
-  const [first, setFirst] = React.useState(true);
   const rootRef = React.useRef<HTMLTableCellElement | null>(null);
   const point = React.useMemo(
     (): Point.Point => ({
@@ -69,37 +67,12 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
 
   const handleMouseOver = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (dragging && first && !isDotDragging) {
+      if (dragging) {
         setCellDimensions(point, getOffsetRect(event.currentTarget));
         select(point);
       }
     },
-    [setCellDimensions, select, dragging, point, first, isDotDragging]
-  );
-
-  const handleDotDown = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      setIsDotDragging(true);
-      setCellDimensions(point, getOffsetRect(event.currentTarget));
-
-      if (event.shiftKey) {
-        select(point);
-      } else {
-        activate(point);
-      }
-    },
-    [setCellDimensions, point, select, activate]
-  );
-
-  const handleDotOver = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      setFirst(false);
-      if (dragging && isDotDragging) {
-        setCellDimensions(point, getOffsetRect(event.currentTarget));
-        select(point);
-      }
-    },
-    [setCellDimensions, select, dragging, point, isDotDragging]
+    [setCellDimensions, select, dragging, point]
   );
 
   const contextClick = React.useCallback(
@@ -153,11 +126,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
         evaluatedCell={evaluatedData}
         setCellData={setCellData}
       />
-      <div
-        // className="Selection_dot" TODO
-        onMouseOver={handleDotOver}
-        onMouseDown={handleDotDown}
-      ></div>
     </td>
   );
 };