pixel-react-excel-sheet 1.2.0

package/src/components/ExcelFile/ExcelFile.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+
+const meta: Meta<typeof ExcelFile> = {
+  title: 'Components/ExcelFile',
+  component: ExcelFile,
+  tags: ['autodocs'],
+  argTypes: {
+    toolbar: {
+      control: { type: 'radio' },
+      options: ['show', 'disable', 'hide'],
+      description: 'Controls whether the toolbar is shown, disabled, or hidden',
+    },
+    excelData: {
+      description: 'The Excel data containing sheets and their content',
+    },
+    contextOption: {
+      description: 'Provide context menu options for actions like right-click',
+    },
+    onSave: {
+      description: 'Callback function to save the Excel data',
+    },
+  },
+};
+
+type Story = StoryObj<typeof ExcelFile>;
+
+export const Default: Story = {
+  args: {
+    excelData: {
+      sheets: [
+        {
+          sheetName: "Sheet1",
+          data: [
+            [
+              {
+                value: "A1",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "red",
+                  backgroundColor: "white",
+                },
+              },
+              {
+                value: "B1",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "red",
+                  backgroundColor: "white",
+                },
+              },
+            ],
+            [
+              {
+                value: "A2",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "red",
+                  backgroundColor: "white",
+                },
+              },
+              {
+                value: "B2",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "red",
+                  backgroundColor: "white",
+                },
+              },
+            ],
+          ],
+        },
+      ],
+    },
+    toolbar: 'show',
+    contextOption: [
+      {
+        name: 'first option',
+        title: 'Custom Option 1: Get Data',
+        action: () => {},
+      },
+      {
+        name: 'second option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'third option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'fourth option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+      {
+        name: 'fifth option',
+        title: 'Custom Option 2',
+        action: () => {},
+      },
+    ],
+    onSave: () => {},
+  },
+};
+
+
+export default meta;

package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss

@@ -0,0 +1,16 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.sheet-bar {
+  background: $white_1;
+  // display: flex;
+  padding: 4px;
+  height: 40px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  align-items: center;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+}

package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Tabs from '../../Tabs';
+import { Col, Container, Row } from '../../GridLayout/GridLayout';
+
+interface ExcelSheetBarProps {
+  fileDetails: {
+    sheetNames: string[]; // List of sheet names
+  };
+  handleSheetChange: (name: string, index: number) => void;
+  contextMenu: (e: React.MouseEvent, name: string, index: number) => void;
+  addSheet: () => void;
+  selectedSheet: { name: string };
+  contextSelect: (e: React.MouseEvent) => void;
+}
+
+const ExcelSheetBar: React.FC<ExcelSheetBarProps> = ({
+  fileDetails,
+  handleSheetChange,
+  contextMenu,
+  addSheet,
+  selectedSheet,
+  contextSelect,
+}) => {
+  const [activeTabId, setActiveTabId] = useState<string>('0');
+
+  const tabsData = fileDetails.sheetNames.map((name, index) => ({
+    label: name,
+    components: (
+      <div
+        key={name}
+        className={`tab-request ${
+          name === selectedSheet.name ? 'active font-bold' : ''
+        }`}
+        onClick={() => handleSheetChange(name, index)}
+        onContextMenu={(e) => {
+          contextMenu(e, name, index);
+          contextSelect(e);
+        }}
+      >
+        {name}
+      </div>
+    ),
+    id: index.toString(),
+  }));
+
+  return (
+    <>
+      <Container fluid>
+        <Row>
+          <Col size={0}>
+            <Tooltip title="Add Sheet" placement="top">
+              <Icon
+                className="cursor-pointer ml-1"
+                hoverEffect={true}
+                name="plus_icon"
+                height={20}
+                width={20}
+                onClick={addSheet}
+              />
+            </Tooltip>
+          </Col>
+          <Col size={11}>
+            <Tabs
+              tabsData={tabsData}
+              activeTabId={activeTabId}
+              onTabClick={(tabId) => {
+                setActiveTabId(tabId);
+              }}
+            />
+          </Col>
+        </Row>
+      </Container>
+    </>
+  );
+};
+
+export default ExcelSheetBar;

package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss

@@ -0,0 +1,22 @@
+@import '../../../assets/styles/colors';
+@import '../../../assets/styles/fonts';
+
+.excel-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 5px 0;
+  width: 100%;
+
+  .menu-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+}
+
+.excel-toolbar-hide {
+  display: none;
+}

package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState } from 'react';
+import './ExcelToolBar.scss';
+import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
+import MenuOption from '../../MenuOption';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import classNames from 'classnames';
+import Select from '../../Select';
+
+let colors={grey_dark:"#000000"}
+
+const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
+  toolbar = 'show',
+  applyStyle,
+  formatePaint,
+}) => {
+  const [borderType, setBorderType] = useState<string>('All Border');
+  const [textAlign, setTextAlign] = useState<string>('Text Left');
+  const [colorContainer, setColorPicker] = useState<ColorContainer>({
+    color: colors.grey_dark.replace('#', ''),
+    backgroundColor: colors.grey_dark.replace('#', ''),
+    borderColor: colors.grey_dark.replace('#', ''),
+  });
+  const [formatePainter, setFormatePainter] = useState<boolean>(false);
+
+  const borderTypeIcon = () =>{
+
+    return [
+      { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
+      { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
+      { value: 'border-left', label: 'Border Left', icon: 'border_left' },
+      { value: 'border-right', label: 'Border Right', icon: 'border_right' },
+      { value: 'border-top', label: 'Border Top', icon: 'border_top' },
+      { value: 'border-none', label: 'No Border', icon: 'no_border' },
+    ]
+  }
+    const TextAlignIcon = () => {
+      return [
+        { label: 'Text Left', value: 'text-align-left', icon: 'text_align_left' },
+        { label: 'Text Center', value: 'text-align-center', icon: 'text_align_center' },
+        { label: 'Text Right', value: 'text-align-right', icon: 'text_align_right' },
+      ];
+    };
+
+  const getTextColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, color }));
+  };
+
+  const getBackgroundColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
+  };
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      applyStyle('color', colorContainer.color);
+    }, 800);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.color]);
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      applyStyle('backgroundColor', colorContainer.backgroundColor);
+    }, 800);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.backgroundColor]);
+
+  return (
+    <div
+      className={classNames('excel-toolbar', {
+        'excel-toolbar-hide': toolbar === 'hide',
+      })}
+    >
+      <Tooltip placement="top" title={'Bold'}>
+        <Icon
+          disabled={toolbar === 'disable'}
+          onClick={() => {
+            applyStyle('bold', true);
+          }}
+          name="bold"
+        />
+      </Tooltip>
+      <Tooltip placement="top" title={'Italic'}>
+        <Icon
+          disabled={toolbar === 'disable'}
+          onClick={() => {
+            applyStyle('italic', true);
+          }}
+          name="italic"
+        />
+      </Tooltip>
+
+      <Select
+      className='textType'
+  label="Text type"
+  onChange={()=>{}}
+  optionsList={[
+    {
+      label: 'Option 1',
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      value: '2'
+    },
+    {
+      label: 'Option 3',
+      value: '3'
+    }
+  ]}
+  selectedOption={{
+    label: 'Option 2',
+    value: 'Arial'
+  }}
+/>
+      <Select
+  label="Text Size"
+  onChange={()=>{}}
+  optionsList={[
+    {
+      label: 'Option 1',
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      value: '2'
+    },
+    {
+      label: 'Option 3',
+      value: '3'
+    }
+  ]}
+  selectedOption={{
+    label: 'Option 2',
+    value: '11'
+  }}
+/>
+<div style={{display:"flex",alignItems:'center'}}>
+<Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="all_borders"
+          />
+        </div>
+      </Tooltip>
+      <MenuOption
+        iconName="more"
+        options={borderTypeIcon()}
+        tooltipTitle="Border Type"
+        tooltipPlacement="top"
+        onOptionClick={(e) => {          
+          setBorderType(borderType);
+          applyStyle('border', e.label);
+        }}
+      />
+      </div>
+      <div style={{display:"flex",alignItems:'center'}}>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="text_align_left"
+          />
+        </div>
+      </Tooltip>
+      <MenuOption
+        iconName="more"
+        options={TextAlignIcon()}
+        tooltipTitle="Text Align"
+        tooltipPlacement="top"
+        onOptionClick={(e) => {
+          setTextAlign(textAlign);
+          applyStyle('alignment', e.label);
+        }}
+      />
+      </div>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="formate_painter"
+          />
+        </div>
+      </Tooltip>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="strike_through"
+          />
+        </div>
+      </Tooltip>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="underline"
+          />
+        </div>
+      </Tooltip>
+      <Tooltip placement="top" title={'Formate Painter'}>
+        <div className={formatePainter ? 'formate-painter-active' : ''}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter((prev) => !prev);
+              formatePaint();
+            }}
+            name="double_underline"
+          />
+        </div>
+      </Tooltip>
+      <div className="menu-option">
+        <Tooltip placement="top" title={'Text Color'}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              applyStyle('color', colorContainer.color);
+            }}
+            name="text_color"
+          />
+          <ColorBarSelector
+            disabled={toolbar === 'disable'}
+            getColorValue={getTextColor}
+          />
+        </Tooltip>
+      </div>
+      <div className="menu-option">
+        <Tooltip placement="top" title={'Background Color'}>
+          <Icon
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              applyStyle('backgroundColor', colorContainer.backgroundColor);
+            }}
+            name="fill_color"
+          />
+        </Tooltip>
+        <ColorBarSelector
+          disabled={toolbar === 'disable'}
+          getColorValue={getBackgroundColor}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ExcelToolBar;

package/src/components/ExcelFile/Types.ts

@@ -0,0 +1,185 @@
+interface ExcelFileProps {
+  /** The Excel data containing sheets and their content */
+  excelData: {
+    sheets: WorkSheet[];
+  };
+
+  /** Optional: Provide context menu options for actions like right-click */
+  contextOption?: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Controls whether the toolbar is shown, disabled, or hidden */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** Callback function to save the Excel data */
+  onSave?: (excelData?: any) => void;
+}
+
+interface WorkSheet {
+  /** The name of the worksheet */
+  sheetName: string;
+
+  /** 2D array of worksheet data (cells) */
+  data: WorkData[][];
+}
+
+interface WorkData {
+  /** Value of the cell */
+  value: string;
+
+  /** Styling options for the cell */
+  style: React.CSSProperties;
+  type?: boolean;
+}
+
+/** A generic type to represent a 2D matrix of any type (or undefined values) */
+type Matrix<T> = (T | undefined)[][];
+
+interface ContextAction {
+  /** Name of the right-click option */
+  name: string;
+
+  /** Display title of the right-click menu option */
+  title: React.ReactNode;
+
+  /** The action that occurs when the right-click menu option is selected */
+  action: () => void;
+}
+
+interface ContextOption {
+  /** Type of the context option ('cell', 'row', 'column') */
+  name: string;
+
+  /** Array of context menu actions for right-click options */
+  value: ContextAction[];
+}
+
+interface ContextMenuState {
+  /** Whether the context menu is visible */
+  visible: boolean;
+
+  /** X-coordinate position for the context menu */
+  x: number;
+
+  /** Y-coordinate position for the context menu */
+  y: number;
+
+  /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
+  type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
+}
+
+interface SelectedCell {
+  /** The row index of the selected cell */
+  row: number;
+
+  /** The column index of the selected cell */
+  column: number;
+}
+
+interface ColorContainer {
+  /** The color used for the text (hex code) */
+  color: string;
+
+  /** The background color used for the cell (hex code) */
+  backgroundColor: string;
+
+  /** The border color used for the cell (hex code) */
+  borderColor: string;
+}
+
+interface SelectedValue {
+  /** The value inside the selected cell */
+  value: string;
+
+  /** The row index of the selected cell */
+  row: number;
+
+  /** The column index of the selected cell */
+  column: number;
+
+  /** The column represented as an alphabetical string ('A', 'B') */
+  alphaCol: string;
+
+  /** The style applied to the selected cell */
+  style: React.CSSProperties;
+
+  /** The sheet name where the cell is located */
+  sheet: string;
+}
+interface ExcelToolBarProps {
+  /** use this to hide/show/disable the toolbar */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** function to apply styles */
+  applyStyle: (styleType: string, value: any) => void;
+
+  /** function to trigger format painter */
+  formatePaint: () => void;
+}
+
+interface ExcelSheetBarProps {
+  /** Object containing details about the file, including sheet names */
+  fileDetails: {
+    sheetNames: string[];
+  };
+
+  /** Function to handle sheet change events */
+  handleSheetChange: (name: string, index: number) => void;
+
+  /** Function to open the context menu on a sheet */
+  contextMenu: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    name: string,
+    index: number
+  ) => void;
+
+  /** Function to add a new sheet */
+  addSheet: () => void;
+
+  /** Object representing the currently selected sheet */
+  selectedSheet: {
+    name: string;
+    index: number;
+  };
+  /** Function to update the context Type */
+  contextSelect: (event: React.MouseEvent) => void;
+}
+
+interface ContextMenuProps {
+  /** Custom context menu options */
+  customContext: {
+    name: string;
+    title: React.ReactNode;
+    action: () => void;
+  }[];
+
+  /** Object that holds different context actions based on the type (cell, row, column, sheet_options) */
+  contextAction: {
+    /** Function to add a row */
+    addRow: () => void;
+
+    /** Function to delete a row */
+    deleteRow: () => void;
+
+    /** Function to add a column */
+    addColumn: () => void;
+
+    /** Function to delete a column */
+    deleteColumn: () => void;
+
+    /** Function to add a new sheet */
+    addSheet: () => void;
+
+    /** Function to delete a sheet */
+    deleteSheet: () => void;
+  };
+
+  /** The state of the context menu, controlling its visibility and position */
+  contextData: ContextMenuState;
+
+  /** Function to update the context menu state */
+  setContextData: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+}

package/src/components/ExcelFile/index.ts

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