pixel-react 1.1.7 → 1.1.9

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

@@ -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>

package/src/components/AttachmentButton/AttachmentButton.scss

@@ -0,0 +1,9 @@
+.ff-input-field {
+  display: none;
+}
+.ff-attachment-files {
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

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

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AttachmentButton from './AttachmentButton';
+
+const meta: Meta<typeof AttachmentButton> = {
+  title: 'Components/AttachmentButton',
+  component: AttachmentButton,
+  argTypes: {
+    onFilesChange: { action: 'files changed' },
+    disabled: { control: 'boolean' },
+    maxFileSizeMB: { control: 'number' },
+    maxFiles: { control: 'number' },
+  },
+};
+
+type Story = StoryObj<typeof AttachmentButton>;
+
+const defaultArgs = {
+  disabled: false,
+  maxFileSizeMB: 5,
+  maxFiles: 10,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Files',
+  },
+  render: (args) => {
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+
+    const handleFilesChange = (files: File[]) => {
+      setSelectedFiles(files);
+      args.onFilesChange(files);
+    };
+
+    return (
+      <AttachmentButton
+        {...args}
+        selectedFiles={selectedFiles}
+        onFilesChange={handleFilesChange}
+      />
+    );
+  },
+};
+
+export const SmallFileLimit: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Files (2 MB Max)',
+    maxFileSizeMB: 2,
+    maxFiles: 5,
+  },
+  render: Default.render,
+};
+
+export const LargeFileLimit: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Large Files (20 MB Max)',
+    maxFileSizeMB: 20,
+    maxFiles: 5,
+  },
+  render: Default.render,
+};
+
+export const DisabledUploader: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Disabled Uploader',
+    disabled: true,
+  },
+  render: Default.render,
+};
+
+export default meta;

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -0,0 +1,113 @@
+import React, { useRef, useState } from 'react';
+import Typography from '../Typography';
+import Button from '../Button';
+import Toaster from '../Toast';
+import Icon from '../Icon';
+import { AttachmentUploaderProps } from './types';
+import './AttachmentButton.scss';
+
+const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
+  label,
+  selectedFiles,
+  onFilesChange,
+  disabled = false,
+  maxFileSizeMB = 5, // Default to 5 MB if not provided
+  maxFiles = 10, // Default to 10 files if not provided
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [fileError, setFileError] = useState<string>('');
+  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
+
+  const handleAttachmentClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = () => {
+    setFileError('');
+    if (fileInputRef.current?.files) {
+      const files = Array.from(fileInputRef.current.files);
+      const duplicateFiles = files.filter((file) =>
+        selectedFiles.some((selectedFile) => selectedFile.name === file.name)
+      );
+      if (duplicateFiles.length > 0) {
+        setFileError('This file is already selected.');
+        fileInputRef.current.value = '';
+        return;
+      }
+      if (selectedFiles.length + files.length > maxFiles) {
+        setFileError(`You can only select up to ${maxFiles} files.`);
+        fileInputRef.current.value = '';
+        return;
+      }
+      const oversizedFiles = files.filter(
+        (file) => file.size > maxFileSizeBytes
+      );
+      if (oversizedFiles.length > 0) {
+        setFileError(`Each file must be less than ${maxFileSizeMB} MB.`);
+        fileInputRef.current.value = '';
+        return;
+      }
+      onFilesChange([...selectedFiles, ...files]);
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleDeleteFile = (index: number) => {
+    const updatedFiles = [...selectedFiles];
+    updatedFiles.splice(index, 1);
+    onFilesChange(updatedFiles);
+  };
+
+  return (
+    <div>
+      <Typography fontWeight="semi-bold">{label}</Typography>
+      {selectedFiles.length === 0 && (
+        <Button
+          variant="primary"
+          label="Select Files"
+          size="medium"
+          onClick={handleAttachmentClick}
+          disabled={disabled}
+        />
+      )}
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="ff-input-field"
+        onChange={handleFileChange}
+        multiple
+        accept="*"
+      />
+      {fileError && (
+        <Toaster
+          isOpen={!!fileError}
+          variant="info"
+          toastTitle="Error"
+          toastMessage={fileError}
+          zIndex={10000000}
+        />
+      )}
+      {selectedFiles.map((file, index) => (
+        <div key={file.name} className="ff-attachment-files">
+          <Typography color="var(--brand-color)">{file.name}</Typography>
+          <Icon
+            name="delete"
+            color="var(--ff-delete-button-attachment)"
+            onClick={() => handleDeleteFile(index)}
+          />
+          {index === selectedFiles.length - 1 &&
+            selectedFiles.length < maxFiles && (
+              <Icon
+                name="add_file"
+                height={24}
+                width={24}
+                onClick={handleAttachmentClick}
+              />
+            )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AttachmentButton;

package/src/components/AttachmentButton/index.ts

@@ -0,0 +1 @@
+export { default } from './AttachmentButton';

package/src/components/AttachmentButton/types.ts

@@ -0,0 +1,8 @@
+export interface AttachmentUploaderProps {
+  label: string; 
+  selectedFiles: File[]; 
+  onFilesChange: (files: File[]) => void;
+  disabled?: boolean;
+  maxFileSizeMB?: number;
+  maxFiles?: number;
+}

package/src/components/Drawer/Drawer.scss

@@ -11,7 +11,6 @@
   .ff-drawer {
     position: fixed;
     right: 0;
-    top: 80px;
     bottom: 0;
     min-width: 450px;
     background-color: var(--primary-button-text-color);

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;
+    }
+  }
+}

package/src/components/ExcelFile/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import './ContextMenu.scss';
+import Icon from '../../Icon';
+// import { colors } from '../../../colors/colorConstants';
+
+const ContextMenu: React.FC<ContextMenuProps> = ({
+  customContext,
+  contextAction,
+  contextData,
+  setContextData,
+}) => {
+  const contextOptions: ContextOption[] = [
+    {
+      name: 'cell',
+      value: customContext || [],
+    },
+    {
+      name: 'row',
+      value: [
+        { name: 'Add Row', title: 'Add Row', action: contextAction.addRow },
+        {
+          name: 'Delete Row',
+          title: 'Delete Row',
+          action: contextAction.deleteRow,
+        },
+      ],
+    },
+    {
+      name: 'column',
+      value: [
+        {
+          name: 'Add Column',
+          title: 'Add Column',
+          action: contextAction.addColumn,
+        },
+        {
+          name: 'Delete Column',
+          title: 'Delete Column',
+          action: contextAction.deleteColumn,
+        },
+      ],
+    },
+    {
+      name: 'sheet_options',
+      value: [
+        {
+          name: 'Add Sheet',
+          title: (
+            <span className="sheet-context-menu">
+              <Icon  name="plus_icon" /> Add
+              Sheet
+            </span>
+          ),
+          action: contextAction.addSheet,
+        },
+        {
+          name: 'Delete Sheet',
+          title: (
+            <span className="sheet-context-menu">
+              <Icon name="delete" /> Delete Sheet
+            </span>
+          ),
+          action: contextAction.deleteSheet,
+        },
+      ],
+    },
+  ];
+
+  return (
+    contextData.visible &&
+    contextOptions.some(
+      (contextType) =>
+        contextType.name === contextData.type && contextType.value.length > 0
+    ) && (
+      <div
+        className="context-menu"
+        style={{ top: contextData.y, left: contextData.x }}
+      >
+        <div className="menu-options">
+          {contextOptions
+            .filter((contextType) => contextType.name === contextData.type)
+            .map((contextType) =>
+              contextType.value.length > 0
+                ? contextType.value.map((item) => (
+                    <div
+                      className="options"
+                      key={item.name}
+                      onClick={() => {
+                        item.action();
+                        setContextData((prev) => ({ ...prev, visible: false }));
+                      }}
+                    >
+                      <label className="options-label">{item.title}</label>
+                    </div>
+                  ))
+                : null
+            )}
+        </div>
+      </div>
+    )
+  );
+};
+
+export default ContextMenu;