pixel-react 1.2.7 → 1.2.8

package/src/components/{ExcelFile → Excel}/ExcelFile.stories.tsx

@@ -75,6 +75,51 @@ export const Default: Story = {
             ],
           ],
         },
+        {
+          sheetName: "Sheet2",
+          data: [
+            [
+              {
+                value: "Thanesh",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "var(--text-bg-highlight)",
+                  backgroundColor: "var(--tooltip-bg-color)",
+                },
+              },
+              {
+                value: "waran",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "var(--text-bg-highlight)",
+                  backgroundColor: "var(--brand-color)",
+                },
+              },
+            ],
+            [
+              {
+                value: "Sheet",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "var(--drawer-footer-bg)",
+                  backgroundColor: "var(--brand-color)",
+                },
+              },
+              {
+                value: "Two",
+                style: {
+                  fontSize: "12px",
+                  fontFamily: "Arial",
+                  color: "var(--brand-color)",
+                  backgroundColor: "var(--text-bg-highlight)",
+                },
+              },
+            ],
+          ],
+        },
       ],
     },
     toolbar: 'show',

package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss

@@ -0,0 +1,36 @@
+.excel-row {
+  height: 42px;
+  align-items: center;
+
+  .excel-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    width: 100%;
+    gap: 10px;
+  }
+
+  .excel-toolbar-center {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 100%;
+    gap: 10px;
+    .menu-option {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .excel-toolbar-menu {
+    display: flex;
+    align-items: center;
+  }
+
+  .excel-toolbar-hide {
+    display: none;
+  }
+}

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -0,0 +1,346 @@
+import { useEffect, useState } from 'react';
+import './ExcelToolBar.scss';
+import MenuOption from '../../MenuOption';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Select from '../../Select';
+import { CellBase } from '../ExcelFile/ExcelFileComponents';
+import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
+import { Col, Row } from '../../GridLayout/GridLayout';
+import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
+
+interface ExcelToolBarProps {
+  toolbar?: 'show' | 'disable' | 'hide';
+  data: Matrix.Matrix<CellBase>;
+  onBold: (data: Matrix.Matrix<CellBase>) => void;
+  onItalic: (data: Matrix.Matrix<CellBase>) => void;
+  setUnderlineType: (
+    data: Matrix.Matrix<CellBase>,
+    value: string,
+    active: boolean
+  ) => void;
+  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
+  setTextAlign: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFontSize: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFontFamily: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setBorderType: (
+    data: Matrix.Matrix<CellBase>,
+    value: string,
+    color: string
+  ) => void;
+}
+
+const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
+  toolbar = 'show',
+  data,
+  onBold,
+  onItalic,
+  setUnderlineType,
+  setColor,
+  setFontSize,
+  setFontFamily,
+  setTextAlign,
+  setBackgroundColor,
+  setBorderType,
+  setFormatePainter,
+}) => {
+  const [border, setBorder] = useState<string>('border-all-sides');
+  const [underLine, setUnderLine] = useState<string>('underline');
+  const [colorContainer, setColorPicker] = useState<ColorContainer>({
+    color: 'var(--error-light)',
+    backgroundColor: 'var(--error-light)',
+    borderColor: 'var(--text-color)',
+  });
+
+  const [formatePainterState, setFormatePainterState] =
+    useState<boolean>(false);
+
+  const borderTypeIcon = [
+    { 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 underlineTypeIcon = [
+    { value: 'underline', label: 'Underline', icon: 'underline' },
+    {
+      value: 'double_border',
+      label: 'Double Underline',
+      icon: 'double_underline',
+    },
+    { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
+  ];
+
+  const fontFamily = [
+    {
+      label: 'Times New Roman',
+      value: '"Times New Roman"',
+    },
+    {
+      label: 'Arial',
+      value: 'Arial',
+    },
+    {
+      label: 'Courier New',
+      value: '"Courier New"',
+    },
+  ];
+
+  const fontSize = [
+    {
+      label: '5',
+      value: '5',
+    },
+    {
+      label: '9',
+      value: '9',
+    },
+    {
+      label: '11',
+      value: '11',
+    },
+    {
+      label: '12',
+      value: '12',
+    },
+    {
+      label: '14',
+      value: '14',
+    },
+    {
+      label: '16',
+      value: '16',
+    },
+    {
+      label: '18',
+      value: '18',
+    },
+  ];
+
+  const getTextColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, color: color }));
+  };
+
+  const getBackgroundColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
+  };
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      setColor(data, colorContainer.color);
+    }, 0);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.color]);
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      setBackgroundColor(data, colorContainer.backgroundColor);
+    }, 0);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.backgroundColor]);
+
+  return (
+    <Row className="excel-row" gap="40px">
+      <Col size={3}>
+        <div className="excel-toolbar">
+          <Select
+            className="textType"
+            onChange={(e) => {
+              setFontFamily(data, e.value as string);
+            }}
+            optionsList={fontFamily}
+            selectedOption={{
+              label: 'Times New Roman',
+              value: '"Times New Roman"',
+            }}
+          />
+          <Select
+            className="selectTag"
+            onChange={(e) => {
+              setFontSize(data, e.value as string);
+            }}
+            optionsList={fontSize}
+            selectedOption={{
+              label: '11',
+              value: '11',
+            }}
+          />
+        </div>
+      </Col>
+      <Col size={2}>
+        <div className="excel-toolbar-center">
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setTextAlign(data, 'left');
+            }}
+            name="text_align_left"
+          />
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setTextAlign(data, 'center');
+            }}
+            name="text_align_center"
+          />
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setTextAlign(data, 'right');
+            }}
+            name="text_align_right"
+          />
+        </div>
+      </Col>
+      <Col size={2}>
+        <div className="excel-toolbar-center">
+          <Tooltip placement="top" title={'Bold'}>
+            <Icon
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                onBold(data);
+              }}
+              name="bold"
+            />
+          </Tooltip>
+          <Tooltip placement="top" title={'Italic'}>
+            <Icon
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                onItalic(data);
+              }}
+              name="italic"
+            />
+          </Tooltip>
+          <Tooltip placement="top" title={'Underline'}>
+            <div className="excel-toolbar-menu">
+              <Tooltip placement="top" title={'Formate Painter'}>
+                <div
+                  className={
+                    formatePainterState ? 'formate-painter-active' : ''
+                  }
+                >
+                  <Icon
+                    hoverEffect
+                    disabled={toolbar === 'disable'}
+                    onClick={() => {
+                      setUnderlineType(data, underLine, true);
+                    }}
+                    name="underline"
+                  />
+                </div>
+              </Tooltip>
+              <MenuOption
+                iconName="arrow_down"
+                options={underlineTypeIcon}
+                tooltipTitle="Border Type"
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  setUnderlineType(data, e.value as string, true);
+                  setUnderLine(e.value as string);
+                }}
+              />
+            </div>
+          </Tooltip>
+        </div>
+      </Col>
+      <Col size={2}>
+        <div className="excel-toolbar-center">
+          <Tooltip placement="top" title={'Formate Painter'}>
+            <div
+              className={formatePainterState ? 'formate-painter-active' : ''}
+            >
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setFormatePainter(data);
+                  setFormatePainterState((prev) => !prev);
+                }}
+                name="formate_painter"
+              />
+            </div>
+          </Tooltip>
+          <div className="menu-option">
+            <Tooltip placement="top" title={'Text Color'}>
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setColor(data, colorContainer.color);
+                }}
+                name="text_color"
+              />
+              <ColorBarSelector
+                disabled={toolbar === 'disable'}
+                getColorValue={getTextColor}
+              />
+            </Tooltip>
+          </div>
+          <div className="menu-option">
+            <Tooltip placement="top" title={'Background Color'}>
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setBackgroundColor(data, colorContainer.backgroundColor);
+                }}
+                name="fill_color"
+              />
+            </Tooltip>
+            <ColorBarSelector
+              disabled={toolbar === 'disable'}
+              getColorValue={getBackgroundColor}
+            />
+          </div>
+        </div>
+      </Col>
+      <Col size={1}>
+        <div className="excel-toolbar-menu">
+          <Tooltip placement="top" title={'Formate Painter'}>
+            <div
+              className={formatePainterState ? 'formate-painter-active' : ''}
+            >
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setBorderType(data, border, 'black');
+                }}
+                name="all_borders"
+              />
+            </div>
+          </Tooltip>
+          <MenuOption
+            iconName="arrow_down"
+            options={borderTypeIcon}
+            tooltipTitle="Border Type"
+            tooltipPlacement="top"
+            variant="light"
+            onOptionClick={(e) => {
+              setBorder(e.value as string);
+              setBorderType(data, e.value as string, 'black');
+            }}
+          />
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default ExcelToolBar;

package/src/components/Form/Form.scss

@@ -23,34 +23,42 @@
       padding: 10px;
       border: 1px solid var(--arrows-button-border-color);
       border-radius: 8px;
+
       &:focus {
         border-color: var(--brand-color);
       }
+
       &.ff-error {
         border-color: var(--ff-error-light);
       }
     }
+
     .ff-error {
       color: var(--error-light);
       margin-top: 4px;
     }
   }
+
   .ff-form-group {
     margin-bottom: 16px;
+
     .ff-label {
       display: block;
       margin-bottom: 4px;
       font-weight: bold;
     }
+
     input,
     select {
       width: 94%;
       padding: 10px;
       border: 1px solid var(--arrows-button-border-color);
       border-radius: 8px;
+
       &:focus {
         border-color: var(--brand-color);
       }
+
       &.ff-error {
         border-color: var(--ff-error-light); // Ensure red border color
       }
@@ -66,6 +74,7 @@
     .ff-radio-group-wrapper {
       display: flex;
     }
+
     .ff-radio-gender {
       display: flex;
       flex-direction: column;
@@ -75,17 +84,20 @@
         margin-right: 0.5rem;
       }
     }
+
     .ff-error {
       padding-left: 12px;
       color: var(--error-light);
       margin-top: 4px;
     }
   }
+
   .ff-button-layout {
     width: 99%;
     display: flex;
     gap: 12px;
     margin-top: 24px;
+
     button {
       width: 50%;
       background-color: var(--brand-color);
@@ -98,45 +110,52 @@
   }
 }
 
-.ff-main {
-  padding: 40px;
-  border-radius: 10px;
-  background-color: var(--tree-connecting-lines-color);
+.ff-forms-container {
+  height: 450px;
+  overflow-y: scroll;
 
-  .ff-error {
-    padding-left: 12px;
-    color: var(--error-light);
-    margin-top: 4px;
-  }
+  .ff-main {
+    padding: 40px;
+    border-radius: 10px;
+    background-color: var(--tree-connecting-lines-color);
 
-  .ff-radio{
-    margin-top: 8px;
-  }
-  .ff-check{
-    display: flex;
-   }
+    .ff-error {
+      padding-left: 12px;
+      color: var(--error-light);
+      margin-top: 4px;
+    }
 
-   .ff-textarea{
-    margin-top: 8px;
-   }
-   
-  .ff-button-layout {
-    width: 99%;
-    display: flex;
-    gap: 12px;
-    margin-top: 24px;
+    .ff-radio {
+      margin-top: 8px;
+    }
 
-    button {
-      width: 50%;
-      background-color: var(--brand-color);
-      color: var(--primary-button-text-color);
-      border: none;
-      border-radius: 8px;
-      padding: 10px;
-      cursor: pointer;
+    .ff-check {
+      display: flex;
+    }
+
+    .ff-textarea {
+      margin-top: 8px;
+    }
+
+    .ff-button-layout {
+      width: 99%;
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+
+      button {
+        // width: 50%;
+        background-color: var(--brand-color);
+        color: var(--primary-button-text-color);
+        border: none;
+        border-radius: 8px;
+        padding: 10px;
+        cursor: pointer;
+      }
+    }
+
+    .ff-select {
+      width: 90%;
     }
-  }
-  .ff-select {
-    width: 90%;
   }
 }