pixel-react 1.4.2 → 1.4.4

package/src/assets/icons/xml_file_type.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59742 9.91949L4.35242 11.0945H5.15742L4.04242 9.35949L5.13742 7.60449H4.34742L3.66742 8.77449L2.91242 7.60449H2.10742L3.22242 9.33449L2.12242 11.0945H2.91242L3.59742 9.91949ZM9.49516 11.0945V7.60449H8.70516L7.59516 10.1995L6.48516 7.60449H5.69016V11.0945H6.39016V8.82449L7.33016 11.0945H7.86016L8.79516 8.82449V11.0945H9.49516ZM12.0372 10.5395H10.8872V7.60449H10.1872V11.0945H12.0372V10.5395Z" fill="white"/>
+</svg>

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/AddResourceButton/AddButton.tsx

@@ -102,13 +102,13 @@ const AddButton = ({
             {directionalArrow.map(
               ({ direction, menuOptions }: DirectionalArrow, index: number) => (
                 <ArrowsButton
-                  key={index}
-                  direction={direction}
-                  onArrowClick={() => handleArrowClick(direction)}
-                  menuOptions={menuOptions}
-                  isActive={activeArrow === direction}
-                  variant={variant}
-                />
+                key={index}
+                direction={direction as 'top' | 'right' | 'down'}
+                onArrowClick={() => handleArrowClick(direction)}
+                menuOptions={menuOptions}
+                isActive={activeArrow === direction}
+                variant={variant}
+              />
               )
             )}
           </div>,

package/src/components/AddResourceButton/type.ts

@@ -53,7 +53,7 @@ export interface AddResourceButtonProps {
  * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
  */
 export interface DirectionalArrowButtonProps {
-  direction: string | 'top' | 'right' | 'down';
+  direction: 'top' | 'right' | 'down';
   menuOptions: {
     label: string;
     value: string | string[];

package/src/components/AttachmentButton/AttachmentButton.scss

@@ -2,8 +2,8 @@
   display: none;
 }
 .ff-attachment-files {
-  padding: 9px;
   display: flex;
   align-items: center;
   gap: 4px;
+  line-height: 15px;
 }

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import AttachmentButton from './AttachmentButton';
+import React from 'react';
 
 const meta: Meta<typeof AttachmentButton> = {
   title: 'Components/AttachmentButton',

package/src/components/Button/Button.scss

@@ -3,7 +3,7 @@
 
 .ff-button {
   width: auto;
-  background-color: $primary-button-text-color;
+  background-color: var(--primary-button-text-color);
   border-radius: 4px;
   padding: 4px 8px;
   text-align: center;
@@ -37,18 +37,20 @@
       border-radius: 4px;
       padding: 0.6px;
 
-      background: $primary-button-border;
-      mask: linear-gradient($primary-button-text-color 0 0) content-box,
-        linear-gradient($primary-button-text-color 0 0);
+      background: var(--primary-button-border);
+      mask:
+        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
+        linear-gradient(var(--primary-button-text-color) 0 0);
       mask-composite: exclude;
-      -webkit-mask: linear-gradient($primary-button-text-color 0 0) content-box,
-        linear-gradient($primary-button-text-color 0 0);
+      -webkit-mask:
+        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
+        linear-gradient(var(--primary-button-text-color) 0 0);
       -webkit-mask-composite: destination-out;
       z-index: -1;
     }
 
     &:hover {
-      background: $primary-button-hover;
+      background: var(--primary-button-hover);
     }
 
     &:disabled {
@@ -69,27 +71,27 @@
   }
 
   &--primary {
-    background: $primary-button-color;
+    background: var(--primary-button-color);
 
     &:before {
-      background: $primary-button-border;
+      background: var(--primary-button-border);
     }
 
     &:hover {
-      background: $primary-button-hover;
+      background: var(--primary-button-hover);
     }
   }
 
   &--delete {
-    background: $delete-button-color;
-    color: $primary-button-text-color;
+    background: var(--delete-button-color);
+    color: var(--primary-button-text-color);
 
     &:before {
-      background: $delete-button-border;
+      background: var(--delete-button-border);
     }
 
     &:hover {
-      background: $delete-button-hover;
+      background: var(--delete-button-hover);
     }
   }
   &--warning {
@@ -99,20 +101,20 @@
 
   &--secondary {
     &:before {
-      background: $primary-button-border;
+      background: var(--primary-button-border);
     }
 
     &:hover {
-      background: $secondary-button-hover;
+      background: var(--secondary-button-hover);
     }
   }
 
   &--tertiary {
     border: none;
-    background: $tertiary-button-color;
+    background: var(--tertiary-button-color);
 
     &:hover {
-      background: $tertiary-button-hover;
+      background: var(--tertiary-button-hover);
     }
 
     &:disabled {
@@ -140,12 +142,12 @@
   }
 
   &-primary--text {
-    color: $primary-button-text-color;
+    color: var(--primary-button-text-color);
   }
 
   &-secondary--text,
   &-tertiary--text {
-    background: $secondary-button-color-text;
+    background: var(--secondary-button-color-text);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;

package/src/components/Button/Button.tsx

@@ -4,6 +4,7 @@ import '../../assets/styles/_colors.scss';
 import Icon from '../Icon';
 import { ButtonProps } from './types';
 import classNames from 'classnames';
+import Typography from '../Typography';
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -56,7 +57,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {iconPosition === 'left' && renderIcon()}
-        <div className={classNames(`ff-button-${variant}--text`)}>{label}</div>
+        <Typography
+          fontSize={10}
+          fontWeight="semi-bold"
+          className={classNames(`ff-button-${variant}--text`)}
+        >
+          {label}
+        </Typography>
         {iconPosition === 'right' && renderIcon()}
         {children}
       </button>

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -141,7 +141,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={22}
+                  fontSize={20}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -152,7 +152,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
-                <Typography fontSize={12} className="ff-legend-key">
+                <Typography fontSize={10} className="ff-legend-key">
                   {item.key}
                 </Typography>
               </div>

package/src/components/Drawer/Drawer.scss

@@ -6,6 +6,7 @@
     inset: 0;
     background-color: var(--drawer-title-color);
     opacity: 0.5;
+    z-index: 999;
   }
 
   .child-drawer-overlay {
@@ -17,7 +18,7 @@
     position: fixed;
     right: 0;
     bottom: 0;
-    top: 80px;
+    top: 87px;
     min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
@@ -87,8 +88,6 @@
 
           .ff-expand-collapse-button {
             cursor: pointer;
-            height: 24px;
-            width: 24px;
             background-color: var(--button-bg-color);
             outline: none;
             border: none;
@@ -122,6 +121,8 @@
       justify-content: space-between;
       border-top: 1px solid var(--drawer-footer-border);
       z-index: 1000;
+      background-color: var(--base-bg-color);
+      transform: translateY(3px);
 
       .button-container {
         display: flex;

package/src/components/Drawer/Drawer.tsx

@@ -35,8 +35,9 @@ const Drawer: FC<DrawerProps> = ({
   rightTertiaryButtonProps = {},
   zIndex = 999,
   secondLayerZIndex = false,
+  top,
 }: DrawerProps) => {
-  const [isExpanded, setIsExpanded] = useState(_isExpanded);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const handleEsc = useEscapeKey('Escape');
 
@@ -84,7 +85,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex }}
+        style={{ zIndex, top }}
       >
         {showHeader && (
           <div
@@ -112,27 +113,22 @@ const Drawer: FC<DrawerProps> = ({
                       onClick={toggleExpand}
                     >
                       <Icon
-                        name={isExpanded ? 'logo' : 'logo'}
+                        name={isExpanded ? 'maximize_icon' : 'minimize_script'}
                         height={16}
                         width={16}
                       />
                     </button>
                   )}
-                  {isBackButtonVisible && (
-                    <button
-                      className="ff-expand-collapse-button"
-                      onClick={onClose}
-                    >
-                      {backButtonIcon || (
-                        <Icon
-                          name="error"
-                          height={16}
-                          width={16}
-                          hoverEffect={false}
-                        />
-                      )}
-                    </button>
-                  )}
+                  {isBackButtonVisible &&
+                    (backButtonIcon || (
+                      <Icon
+                        name="back_icon"
+                        height={16}
+                        width={16}
+                        hoverEffect
+                        onClick={onClose}
+                      />
+                    ))}
                   {title && <div className="ff-drawer-title">{title}</div>}
                 </div>
                 {_isCloseModalButtonVisible && (

package/src/components/Drawer/Types.ts

@@ -137,4 +137,8 @@ export interface DrawerProps {
    * Custom z-index for the secondary drawer
    */
   secondLayerZIndex?: boolean;
+  /**
+   * Custom top for the drawer
+   */
+  top?: string;
 }

package/src/components/Editor/Editor.tsx

@@ -41,16 +41,6 @@ const Editor: React.FC<EditorProps> = ({
   const [dropdownPosition, setDropdownPosition] =
     useState<dropdownPositionType>({ top: 0, left: 0 });
 
-  const editorOptions = {
-    lineNumbers: 'on',
-    wordWrap: 'on',
-    autoClosingBrackets: 'always',
-    scrollBeyondLastLine: false,
-    readOnly,
-    fontFamily: 'font-poppins',
-    theme,
-  };
-
   const handleEditorDidMount: OnMount = (editor: any) => {
     editorRef.current = editor;
 
@@ -187,7 +177,15 @@ const Editor: React.FC<EditorProps> = ({
         width="100%"
         language={contentType}
         value={value}
-        options={editorOptions}
+        options={{
+          lineNumbers: 'on',
+          wordWrap: 'on',
+          autoClosingBrackets: 'always',
+          scrollBeyondLastLine: false,
+          readOnly,
+          fontFamily: 'font-poppins',
+          theme,
+        }}
         onMount={handleEditorDidMount}
         onChange={(newValue, event) => handleChange(newValue, event)}
       />

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss

@@ -0,0 +1,39 @@
+@use '../../../assets/styles/fonts';
+
+
+.ff-option-card {
+    position: absolute;
+    border: 1px solid var(--option-card-border-color);
+    background: var(--option-card-bg-color);
+    border-radius: 4px;
+    margin: 2px;
+    min-height: 32px;
+    min-width: 111px;
+    white-space: nowrap;
+    z-index: 100;
+
+    .ff-options {
+      @extend .fontSm;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      line-height: 16px;
+      gap: 8px;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      label {
+        cursor: pointer;
+      }
+    }
+
+    .ff-disable-option {
+      opacity: 0.5;
+      cursor: no-drop;
+      label {
+        cursor: no-drop;
+      }
+    }
+  }

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx

@@ -0,0 +1,51 @@
+import Icon from '../../Icon';
+import './ExcelContextMenu.scss';
+import Typography from '../../Typography';
+import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
+import {
+  CellBase,
+  ContextMenuState,
+} from '../ExcelFile/ExcelFileComponents/types';
+
+type ExcelContextMenuProps = {
+  data: Matrix.Matrix<CellBase>;
+  contextMenu: ContextMenuState;
+  addRowTop: (data: Matrix.Matrix<CellBase>) => void;
+  addColumnLeft: (data: Matrix.Matrix<CellBase>) => void;
+  deleteRow: (data: Matrix.Matrix<CellBase>) => void;
+  deleteColumn: (data: Matrix.Matrix<CellBase>) => void;
+};
+
+const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu }) => {
+  return (
+    <div
+      className="ff-option-card"
+      style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
+    >
+      {contextMenu.options.map((option) => (
+        <div
+          className={'ff-options'}
+          onClick={() => {
+            option.action();
+          }}
+        >
+          {option.iconName && (
+            <Icon
+              name={option.iconName}
+              height={16}
+              width={16}
+              color={
+                option.label.includes('Delete')
+                  ? 'var(--label-edit-error-text)'
+                  : 'var(--brand-color)'
+              }
+            />
+          )}
+          <Typography as="label">{option.label}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ExcelContextMenu;

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { CellBase } from './ExcelFileComponents/index';
+import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
 import * as Matrix from './ExcelFileComponents/matrix';
 import './ExcelFile.scss';
 import { Col, Row } from '../../GridLayout/GridLayout';
@@ -71,7 +71,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       pageRef.current = sheetNames[0] ? sheetNames[0] : '';
       setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
     }
-    onSave()
     const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
     payload.sheets.forEach((sheet) => {
       const sheetName = sheet.sheetName;
@@ -110,10 +109,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     }
   }, []);
 
-  // const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
-  //   setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-  //   onSave()
-  // };
+  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
+    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
+    onSave()
+  };
 
   const [editingSheet, setEditingSheet] = useState<number | null>(null);
 
@@ -245,10 +244,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       {sheetNames.length > 0 && (
         <div className="excel-book">
           <div ref={sheetRef} className="excel-sheet">
-            {/* <Spreadsheet
+            <Spreadsheet
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
-            /> */}
+            />
           </div>
           <Row className="sheet-bar">
             <Col size={0} className="add-sheet-icon">

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

@@ -22,6 +22,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   activate,
   setCellDimensions,
   setCellData,
+  setContextMenu,
 }): React.ReactElement => {
   const [isDotDragging, setIsDotDragging] = React.useState(false);
   const [first, setFirst] = React.useState(true);
@@ -34,6 +35,23 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [row, column]
   );
 
+  let options = [
+    {
+      label: 'Get data from Header',
+      value: 'Get data from Header',
+      iconName: 'success',
+      disable: false,
+      action: () => {},
+    },
+    {
+      label: 'Get Cell Value',
+      value: 'Get Cell Value',
+      iconName: 'success',
+      disable: false,
+      action: () => {},
+    },
+  ];
+
   const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
       if (mode === 'view') {
@@ -84,6 +102,22 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [setCellDimensions, select, dragging, point, isDotDragging]
   );
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      select(point);
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY - 50,
+        },
+        options: options,
+      });
+    },
+    [setContextMenu]
+  );
+
   React.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {
@@ -108,6 +142,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       })}
       onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
+      onContextMenu={contextClick}
       tabIndex={0}
     >
       <DataViewer