pixel-react 1.2.1 → 1.2.2

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

@@ -6,25 +6,41 @@ import Tooltip from '../../Tooltip';
 import Icon from '../../Icon';
 import classNames from 'classnames';
 import Select from '../../Select';
+import { CellBase } from '../ExcelFile/Excel';
+import * as Matrix from '../ExcelFile/Excel/matrix';
 
-let colors={grey_dark:"#000000"}
+interface ExcelToolBarProps {
+  toolbar?: 'show' | 'disable' | 'hide';
+  data: Matrix.Matrix<CellBase>;
+  onBold: (data: Matrix.Matrix<CellBase>) => void;
+  onItalic: (data: Matrix.Matrix<CellBase>) => void;
+  onUnderline: (data: Matrix.Matrix<CellBase>) => void;
+  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
+}
 
 const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   toolbar = 'show',
-  applyStyle,
-  formatePaint,
+  data,
+  onBold,
+  onItalic,
+  onUnderline,
+  setColor,
+  setBackgroundColor,
+  setFormatePainter,
 }) => {
   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('#', ''),
+    color: 'var(--error-light)',
+    backgroundColor: 'var(--error-light)',
+    borderColor: 'var(--text-color)',
   });
-  const [formatePainter, setFormatePainter] = useState<boolean>(false);
-
-  const borderTypeIcon = () =>{
+  const [formatePainterState, setFormatePainterState] =
+    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' },
@@ -32,18 +48,26 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       { 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 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 }));
+    setColorPicker((prev) => ({ ...prev, color: color }));
   };
 
   const getBackgroundColor = (color: string) => {
@@ -52,8 +76,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
   useEffect(() => {
     let timeGap = setTimeout(() => {
-      applyStyle('color', colorContainer.color);
-    }, 800);
+      console.log(colorContainer.color);
+      
+      setColor(data, colorContainer.color);
+    }, 0);
     return () => {
       clearTimeout(timeGap);
     };
@@ -61,8 +87,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
   useEffect(() => {
     let timeGap = setTimeout(() => {
-      applyStyle('backgroundColor', colorContainer.backgroundColor);
-    }, 800);
+      setBackgroundColor(data, colorContainer.backgroundColor);
+    }, 0);
     return () => {
       clearTimeout(timeGap);
     };
@@ -78,7 +104,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Icon
           disabled={toolbar === 'disable'}
           onClick={() => {
-            applyStyle('bold', true);
+            onBold(data);
           }}
           name="bold"
         />
@@ -87,148 +113,142 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Icon
           disabled={toolbar === 'disable'}
           onClick={() => {
-            applyStyle('italic', true);
+            onItalic(data);
           }}
           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);
+        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',
         }}
       />
-      </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);
+      <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={formatePainterState ? 'formate-painter-active' : ''}>
+            <Icon
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                setFormatePainterState((prev) => !prev);
+              }}
+              name="all_borders"
+            />
+          </div>
+        </Tooltip>
+        <MenuOption
+          iconName="more"
+          options={borderTypeIcon()}
+          tooltipTitle="Border Type"
+          tooltipPlacement="top"
+          onOptionClick={() => {
+            setBorderType(borderType);
+          }}
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Tooltip placement="top" title={'Formate Painter'}>
+          <div className={formatePainterState ? 'formate-painter-active' : ''}>
+            <Icon
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                setFormatePainter(data);
+                setFormatePainterState((prev) => !prev);
+              }}
+              name="text_align_left"
+            />
+          </div>
+        </Tooltip>
+        <MenuOption
+          iconName="more"
+          options={TextAlignIcon()}
+          tooltipTitle="Text Align"
+          tooltipPlacement="top"
+          onOptionClick={() => {
+            setTextAlign(textAlign);
+          }}
+        />
       </div>
       <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+        <div className={formatePainterState ? 'formate-painter-active' : ''}>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              setFormatePainterState((prev) => !prev);
             }}
             name="formate_painter"
           />
         </div>
       </Tooltip>
       <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+        <div className={formatePainterState ? 'formate-painter-active' : ''}>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              setFormatePainterState((prev) => !prev);
+              // formatePaint();
             }}
             name="strike_through"
           />
         </div>
       </Tooltip>
-      <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+      <Tooltip placement="top" title={'Underline'}>
+        <div>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              onUnderline(data);
             }}
             name="underline"
           />
         </div>
       </Tooltip>
       <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+        <div className={formatePainterState ? 'formate-painter-active' : ''}>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              setFormatePainterState((prev) => !prev);
             }}
             name="double_underline"
           />
@@ -239,7 +259,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              applyStyle('color', colorContainer.color);
+              setColor(data, colorContainer.color);
             }}
             name="text_color"
           />
@@ -254,7 +274,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              applyStyle('backgroundColor', colorContainer.backgroundColor);
+              setBackgroundColor(data, colorContainer.backgroundColor);
             }}
             name="fill_color"
           />

package/src/components/ExcelFile/Types.ts

@@ -31,64 +31,8 @@ interface WorkData {
   value: string;
 
   /** Styling options for the cell */
-  style: CellStyle;
-  type?:boolean;
-}
-
-interface CellStyle {
-  /** Font name for the cell text */
-  name?: string;
-
-  /** Font size of the cell text */
-  size?: number;
-
-  position?:string;
-
-  /** Whether the text is bold */
-  bold?: boolean;
-
-  fontSize?: string,
-  fontFamily?: string,
-
-
-  /** Whether the text is italicized */
-  italic?: boolean;
-
-  /** Text color in the cell (hex code) */
-  color?: string;
-
-  /** Background color of the cell (hex code) */
-  backgroundColor?: string;
-
-  /** Border color of the cell (hex code) */
-  borderColor?: string;
-
-  /** Border styles for each side of the cell */
-  border?: {
-    /** Border style for the top side of the cell */
-    top: string;
-
-    /** Border style for the bottom side of the cell */
-    bottom: string;
-
-    /** Border style for the left side of the cell */
-    left: string;
-
-    /** Border style for the right side of the cell */
-    right: string;
-  };
-
-  /** Text alignment and wrapping properties */
-  alignment?: {
-    /** Horizontal text alignment ('left', 'center', or 'right') */
-    horizontal: string;
-
-    /** Vertical text alignment ('top', 'middle', or 'bottom') */
-    vertical: string;
-
-    /** Whether the text is wrapped within the cell */
-    wrapText: boolean;
-  };
+  style: React.CSSProperties;
+  type?: boolean;
 }
 
 /** A generic type to represent a 2D matrix of any type (or undefined values) */
@@ -160,22 +104,11 @@ interface SelectedValue {
   alphaCol: string;
 
   /** The style applied to the selected cell */
-  style: CellStyle;
+  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: {

package/src/components/ExcelFile/index.ts

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

package/src/components/Form/Form.d.ts

@@ -0,0 +1,3 @@
+declare module 'Form' {
+    export * from 'react-hook-form';
+}

package/src/components/Form/Form.scss

@@ -56,19 +56,20 @@
       }
     }
   }
-  
+
   .ff-form-radio-group {
-    display: flex; 
+    display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-bottom: 16px;
-    .ff-radio-group-wrapper{
+
+    .ff-radio-group-wrapper {
       display: flex;
     }
     .ff-radio-gender {
       display: flex;
       flex-direction: column;
-      align-items: center; 
+      align-items: center;
 
       input[type="radio"] {
         margin-right: 0.5rem;
@@ -96,3 +97,29 @@
     }
   }
 }
+
+.ff-main {
+  padding: 30px;
+  border-radius: 10px;
+  background-color: var(--tree-connecting-lines-color);
+
+  .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%;
+  }
+}