pixel-react 1.1.8 → 1.2.0

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -28,79 +28,79 @@ const defaultArgs = {
 };
 
 const headerMenuItems = [
-  { menuLabel: 'Dashboard', menuName: 'Dashboard', subMenuItems: [] },
+  { label: 'Dashboard', path: 'Dashboard', subMenuItems: [] },
   {
-    menuLabel: 'Repo',
-    menuName: 'Repo',
+    label: 'Repo',
+    path: 'Repo',
     subMenuItems: [
       {
-        subMenuLabel: 'Elements',
-        subMenuName: 'Elements',
+        label: 'Elements',
+        path: 'Elements',
         quickMenuItems: [],
       },
       {
-        subMenuLabel: 'Program Elements',
-        subMenuName: 'Program Elements',
+        label: 'Program Elements',
+        path: 'Program Elements',
         quickMenuItems: [],
       },
       {
-        subMenuLabel: 'Step Groups',
-        subMenuName: 'Step Groups',
+        label: 'Step Groups',
+        path: 'Step Groups',
         quickMenuItems: [
           {
             quickMenuName: 'Success Icon',
-            quickMenuIconName: 'success',
+            iconName: 'success',
           },
           {
             quickMenuName: 'Warning Icon',
-            quickMenuIconName: 'warning',
+            iconName: 'warning',
           },
           {
             quickMenuName: 'Info Icon',
-            quickMenuIconName: 'info',
+            iconName: 'info',
           },
         ],
       },
     ],
   },
   {
-    menuLabel: 'Test Data',
-    menuName: 'Test Data',
+    label: 'Test Data',
+    path: 'Test Data',
     subMenuItems: [],
   },
   {
-    menuLabel: 'Test Dev',
-    menuName: 'Test Dev',
+    label: 'Test Dev',
+    path: 'Test Dev',
     subMenuItems: [
       {
-        subMenuLabel: 'Scripts',
-        subMenuName: 'Scripts',
+        label: 'Scripts',
+        path: 'Scripts',
         quickMenuItems: [
           {
             quickMenuName: 'Delete Icon',
-            quickMenuIconName: 'delete',
+            iconName: 'delete',
           },
           {
             quickMenuName: 'Details Icon',
-            quickMenuIconName: 'details',
+            iconName: 'details',
           },
           {
             quickMenuName: 'Sun Icon',
-            quickMenuIconName: 'sun_icon',
+            iconName: 'sun_icon',
           },
           {
             quickMenuName: 'Moon Stars Icon',
-            quickMenuIconName: 'moon_stars_icon',
+            iconName: 'moon_stars_icon',
           },
           {
             quickMenuName: 'Impact List Icon',
-            quickMenuIconName: 'impactList',
+            iconName: 'impactList',
           },
         ],
       },
       {
-        subMenuLabel: 'Executions',
-        subMenuName: 'Executions',
+        label: 'Executions',
+        path: 'Executions',
         quickMenuItems: [],
       },
     ],
@@ -132,13 +132,13 @@ export const Controlled: Story = {
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
     const handleMenuClick = (item: appHeaderMenuItemProps) => {
-      setSelectedMenuItem(item.menuLabel);
+      setSelectedMenuItem(item.label);
     };
     const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
-      setSelectedSubMenuItem(item.subMenuLabel);
+      setSelectedSubMenuItem(item.label);
     };
     const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
-      setSelectedQuickMenuItem(item.quickMenuIconName);
+      setSelectedQuickMenuItem(item.iconName);
     };
 
     return (
@@ -146,6 +146,7 @@ export const Controlled: Story = {
         <div>
           <AppHeader
             logoIconName="fireflink_icon"
+            leftContent={headerRightSideContent}
             rightContent={headerRightSideContent}
             appHeaderMenuItems={headerMenuItems}
             appHeaderHiddenMenuItems={headerHiddenMenuItems}

package/src/components/AppHeader/AppHeader.tsx

@@ -22,12 +22,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   return (
     <>
       <div className="ff-app-header">
-        <div className="ff-app-header-logo-icon">
-          <Icon color="" name={logoIconName} height={24} width={21} />
+        <div className='ff-app-header-left-container'>
+          <div className="ff-app-header-logo-icon">
+            <Icon color="" name={logoIconName} height={24} width={21} />
+          </div>
+          {leftContent && (
+            <div className="ff-app-header-left-content">{leftContent}</div>
+          )}
         </div>
-        {leftContent && (
-          <div className="ff-app-header-left-content">{leftContent}</div>
-        )}
         <div className="ff-app-header-nav-bar">
           {checkEmpty(projectsList) && (
             <div>{/* <AllProjectsDropdown /> */}</div>
@@ -38,9 +40,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                 <div
                   className={classNames('ff-app-header-nav-bar-item', {
                     ['ff-app-header-nav-bar-item--selected']:
-                      menuItem.menuLabel === selectedMenu,
+                      menuItem.label === selectedMenu,
                   })}
-                  key={menuItem.menuLabel}
+                  key={menuItem.label}
                   onClick={() => onMenuClick(menuItem)}
                 >
                   <Typography
@@ -48,14 +50,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                     className="ff-app-header-nav-bar-item-label"
                     lineHeight="18px"
                   >
-                    {menuItem.menuLabel}
+                    {menuItem.label}
                   </Typography>
-                  {menuItem.menuLabel === selectedMenu &&
+                  {menuItem.label === selectedMenu &&
                     menuItem?.subMenuItems &&
                     menuItem.subMenuItems.map((subMenuItem) => {
                       return (
                         <div
-                          key={subMenuItem.subMenuLabel}
+                          key={subMenuItem.label}
                           onClick={() => onSubMenuClick(subMenuItem)}
                           className="ff-app-header-submenu-container"
                         >
@@ -65,14 +67,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                               'ff-app-header-nav-bar-submenu-item',
                               {
                                 ['ff-app-header-nav-bar-submenu-item--selected']:
-                                  subMenuItem.subMenuLabel === selectedSubMenu,
+                                  subMenuItem.label === selectedSubMenu,
                               }
                             )}
                             lineHeight="18px"
                           >
-                            {subMenuItem.subMenuLabel}
+                            {subMenuItem.label}
                           </Typography>
-                          {subMenuItem.subMenuLabel === selectedSubMenu &&
+                          {subMenuItem.label === selectedSubMenu &&
                             subMenuItem?.quickMenuItems && (
                               <div className="ff-app-header-quickmenu-container">
                                 <div>
@@ -83,7 +85,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                     return (
                                       <>
                                         <div
-                                          key={quickMenuItem.quickMenuIconName}
+                                          key={quickMenuItem.iconName}
                                           onClick={() =>
                                             onQuickMenuClick(quickMenuItem)
                                           }
@@ -91,14 +93,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                             'ff-app-header-nav-bar-quickmenu-item',
                                             {
                                               ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                quickMenuItem.quickMenuName ===
+                                                quickMenuItem.path ===
                                                 selectedQuickMenu,
                                             }
                                           )}
                                         >
                                           <Icon
                                             name={
-                                              quickMenuItem.quickMenuIconName
+                                              quickMenuItem.iconName
                                             }
                                             height={24}
                                             width={24}

package/src/components/AppHeader/types.ts

@@ -15,17 +15,17 @@ export interface AppHeaderProps {
   onQuickMenuClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {
-  menuLabel: string;
-  menuName?: string;
+  label: string;
+  path?: string;
   subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
-  subMenuLabel: string;
-  subMenuName?: string;
+  label: string;
+  path?: string;
   quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
-  quickMenuLabel?: string;
-  quickMenuName?: string;
-  quickMenuIconName: string;
+  label?: string;
+  path?: string;
+  iconName: string;
 }

package/src/components/Button/Button.scss

@@ -125,6 +125,7 @@
     @extend .fontXs;
     font-weight: 500;
     padding: 4.5px 8px;
+    line-height: 15px;
   }
 
   &--medium {

package/src/components/Checkbox/Checkbox.tsx

@@ -53,7 +53,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
           />
         )}
       </span>
-      <Typography as="label">{label}</Typography>
+      <Typography as="span">{label}</Typography>
     </label>
   );
 };

package/src/components/Drawer/Drawer.scss

@@ -12,6 +12,7 @@
     position: fixed;
     right: 0;
     bottom: 0;
+    top: 80px;
     min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
@@ -94,23 +95,21 @@
             justify-content: center;
             border-radius: 8px;
           }
+          .ff-custom-header {
+            background-color: var(--drawer-footer-bg);
+            padding: 4px 8px;
+          }
         }
       }
     }
 
     .ff-drawer-body {
       background-color: var(--drawer-footer-bg);
-      height: calc(100vh - 76px);
-      overflow: hidden auto;
-    }
-
-    .no-footer {
-      height: 100vh;
+      overflow-y: auto;
     }
 
     .ff-drawer-footer {
-      height: 24px;
-      position: absolute;
+      position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
@@ -118,11 +117,16 @@
       display: flex;
       justify-content: space-between;
       border-top: 1px solid var(--drawer-footer-border);
+      z-index: 1000;
 
       .button-container {
         display: flex;
         justify-content: flex-end;
-        gap: 10px;
+        gap: 8px;
+      }
+      .ff-custom-footer {
+        background-color: var(--drawer-footer-bg);
+        padding: 4px 8px;
       }
     }
   }

package/src/components/Drawer/Drawer.stories.tsx

@@ -98,6 +98,34 @@ export const WithCustomFooter: Story = {
     docs: { disable: true },
   },
 };
+export const WithTertiaryButtons: Story = {
+  args: {
+    ...defaultArgs,
+    tertiaryButtonProps: {
+      left: {
+        label: 'Help',
+        onClick: () => {},
+      },
+      right: {
+        label: 'More Info',
+        onClick: () => {},
+      },
+    },
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+
+export const WithCustomZIndex: Story = {
+  args: {
+    ...defaultArgs,
+    zIndex: 1050,
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
 
 export const Controlled: Story = {
   render: () => {

package/src/components/Drawer/Drawer.tsx

@@ -30,6 +30,8 @@ const Drawer: FC<DrawerProps> = ({
   onCloseIconClick,
   customHeader,
   customFooter,
+  tertiaryButtonProps = { left: {}, right: {} },
+  zIndex = 999,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
 
@@ -72,11 +74,16 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
+        style={{ zIndex }}
       >
         {showHeader && (
-          <div className="ff-drawer-header">
+          <div
+            className={classNames('ff-drawer-header', {
+              'ff-custom-header': customHeader,
+            })}
+          >
             {customHeader ? (
-              customHeader
+              <div className="ff-custom-header">{customHeader}</div>
             ) : (
               <div className="ff-drawer-action-section">
                 <div className="ff-action-button">
@@ -106,9 +113,7 @@ const Drawer: FC<DrawerProps> = ({
                       className="ff-expand-collapse-button"
                       onClick={onClose}
                     >
-                      {backButtonIcon ? (
-                        backButtonIcon
-                      ) : (
+                      {backButtonIcon || (
                         <Icon
                           name="error"
                           height={16}
@@ -146,7 +151,11 @@ const Drawer: FC<DrawerProps> = ({
         </div>
 
         {isFooterRequired && (
-          <div className="ff-drawer-footer">
+          <div
+            className={classNames('ff-drawer-footer', {
+              'ff-custom-footer': customFooter,
+            })}
+          >
             {customFooter || footerContent || (
               <>
                 <div className="button-container">
@@ -166,8 +175,22 @@ const Drawer: FC<DrawerProps> = ({
                       transparentBackground={true}
                     />
                   )}
+                  {tertiaryButtonProps.left?.label && (
+                    <Button
+                      {...tertiaryButtonProps.left}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
                 </div>
                 <div className="button-container">
+                  {tertiaryButtonProps.right?.label && (
+                    <Button
+                      {...tertiaryButtonProps.right}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
                   {secondaryButtonProps.label && (
                     <Button
                       {...secondaryButtonProps}

package/src/components/Drawer/Types.ts

@@ -109,4 +109,15 @@ export interface DrawerProps {
    * If provided, this will render in place of the default footer.
    */
   customFooter?: ReactNode;
+  /**
+   * Tertiary button properties (optional)
+   */
+  tertiaryButtonProps?: {
+    left?: BtnPropsCommon;   
+    right?: BtnPropsCommon;
+  };
+  /**
+   * Custom z-index for the drawer
+   */
+  zIndex?: number;
 }

package/src/components/ExcelFile/ChangeExcelStyles.tsx

@@ -0,0 +1,78 @@
+import { CellBase } from "./ExcelFile/Excel";
+
+interface ChangeExcelStylesOptions {
+  sheetName: string;
+  styleType: string;
+  value: string;  
+  selectedCell: { row: number; column: number }[];
+}
+
+export default function ChangeExcelStyles(
+  setWorksheetsData: React.Dispatch<React.SetStateAction<{ [key: string]: Matrix<CellBase>; }>>,
+  options: ChangeExcelStylesOptions
+) {
+  const { sheetName, styleType, value, selectedCell } = options;
+
+  setWorksheetsData((prev) => {
+    if (!prev[sheetName]) {
+      return prev;
+    }
+
+    const sheetData = prev[sheetName]!;
+    const selectedCells = new Set(
+      selectedCell.map(({ row, column }) => `${row}-${column}`)
+    );
+
+    const updatedSheetData: Matrix<CellBase> = sheetData.map((row, rowIndex) =>
+      row.map((cell, columnIndex) => {
+        const isSelected = selectedCells.has(`${rowIndex}-${columnIndex}`);
+        if (isSelected&&cell!==undefined) {
+          let newStyle = { ...cell.style };
+    
+          switch (styleType) {
+            // case 'border':
+            //   newStyle = handleBorderChange(newStyle, value);
+            //   break;
+            // case 'alignment':
+            //   newStyle = handleAlignmentChange(newStyle, value);
+            //   break;
+            // case 'bold':
+            //   newStyle = handleBoldChange(newStyle);
+            //   break;
+            // case 'italic':
+            //   newStyle = handleItalicChange(newStyle);
+            //   break;
+            case 'color':
+              newStyle = handleColorChange(newStyle, value);              
+              break;
+            case 'backgroundColor':
+              newStyle = handleBackgroundColorChange(newStyle, value);
+              break;
+            default:
+              break;
+          }
+    
+          const newValue = cell.value ?? "";
+          
+          return { ...cell, style: newStyle, value: newValue };
+        }
+        return cell;
+      })
+    );
+    
+    
+
+    return { ...prev, [sheetName]: updatedSheetData };
+  });
+}
+
+function handleColorChange(style: CellStyle, value: string): CellStyle {
+  return { ...style, color: `#${value}` };
+}
+
+function handleBackgroundColorChange(
+  style: CellStyle,
+  value: string
+): CellStyle {
+  return { ...style, backgroundColor: `#${value}` };
+}

package/src/components/ExcelFile/ColorBarselector/ColorBarSelector.scss

@@ -0,0 +1,13 @@
+@use '../../../assets/styles/colors';
+
+.color-bar {
+  background-color: var(--error_light);
+  width: 100%;
+  height: 4px;
+  .colorPicker {
+    width: 100%;
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+  }
+}

package/src/components/ExcelFile/ColorBarselector/ColorBarSelector.tsx

@@ -0,0 +1,43 @@
+import React, { useRef, useState } from 'react';
+import './ColorBarSelector.scss';
+
+interface ColorBarSelectorProps {
+  getColorValue: (color: string) => void;
+  disabled: boolean;
+}
+const ColorBarSelector: React.FC<ColorBarSelectorProps> = ({
+  getColorValue,
+  disabled,
+}) => {
+  const colorInputRef = useRef<HTMLInputElement | null>(null);
+  const [color, setColor] = useState<string>('var(--error-light)');
+
+  const handleColorClick = () => {
+    if (colorInputRef.current) {
+      colorInputRef.current.click();
+    }
+  };
+
+  return (
+    <div
+      className="color-bar"
+      style={{
+        backgroundColor: `${color}`,
+      }}
+      onClick={handleColorClick}
+    >
+      <input
+        type="color"
+        disabled={disabled}
+        className="colorPicker"
+        ref={colorInputRef}
+        onChange={(e) => {
+          setColor(e.target.value);
+          getColorValue(e.target.value.replace('#', ''));
+        }}
+      />
+    </div>
+  );
+};
+
+export default ColorBarSelector;

package/src/components/ExcelFile/ContextMenu/ContextMenu.scss

@@ -0,0 +1,102 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.context-menu {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  background-color: var(--brand-color);
+  // box-shadow: 0px 0px 6px $shadow;
+  border-radius: 5px;
+  opacity: 1;
+  padding: 16px 0;
+  .menu-options {
+    overflow: auto;
+    min-height: 20px;
+    max-height: 175px;
+    min-width: 250px;
+    opacity: 1;
+    .options {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      line-height: 35px;
+      gap: 16px;
+      .sheet-context-menu {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &:hover {
+        // background-color: $primary;
+        .options-label {
+          background: var(--option-card-bg-color);
+        }
+      }
+    }
+  }
+}
+
+.ff-icon-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  .ff-menuicon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--brand-color);
+    }
+  }
+
+  .ff-menuicon-container-clicked {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--brand-color);
+    cursor: pointer;
+    &:hover {
+      background-color: var(--brand-color);
+    }
+  }
+}
+
+.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;
+  z-index: 100000;
+  white-space: nowrap;
+
+  .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;
+    }
+  }
+}