pixel-react 1.4.3 → 1.4.4

package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import FormulaParser from 'fast-formula-parser';
 import { Point } from './point';
 import { Selection } from './selection';
 import { Model } from './engine';
 import { PointRange } from './point-range';
 import { Matrix } from './matrix';
+import * as MatrixValue from './matrix';
 
 /** The base type of cell data in Spreadsheet */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -65,6 +65,8 @@ export type StoreState<Cell extends CellBase = CellBase> = {
   dragging: boolean;
   lastChanged: Point | null;
   lastCommit: null | CellChange<Cell>[];
+  selectedRow: null | number;
+  selectedColumn: null | number;
 };
 
 export type CellChange<Cell extends CellBase = CellBase> = {
@@ -102,6 +104,8 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
   setCellDimensions: (point: Point, dimensions: Dimensions) => void;
   /** Set data of the cell */
   setCellData: (cell: Cell) => void;
+
+  setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
 };
 
 /** Type of the Spreadsheet Cell component */
@@ -174,6 +178,30 @@ export type RowIndicatorProps = {
   selected: boolean;
   /** Callback to be called when the row is selected */
   onSelect: (row: number, extend: boolean) => void;
+
+  setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+
+  deleteRow: (data: MatrixValue.Matrix<CellBase>) => void;
+
+  addRowTop: (data: MatrixValue.Matrix<CellBase>) => void;
+
+  data: MatrixValue.Matrix<CellBase>;
+};
+
+export type ContextMenuState = {
+  open: boolean;
+  position: {
+    x: number;
+    y: number;
+  };
+  options: optionsType[];
+};
+
+type optionsType = {
+  label: string;
+  value: string;
+  iconName: string;
+  action: () => void;
 };
 
 /** Type of the RowIndicator component */
@@ -191,6 +219,14 @@ export type ColumnIndicatorProps = {
   fixed?: boolean;
   /** Callback to be called when the column is selected */
   onSelect: (column: number, extend: boolean) => void;
+
+  setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+
+  deleteColumn: (data: MatrixValue.Matrix<CellBase>) => void;
+
+  addColumnLeft: (data: MatrixValue.Matrix<CellBase>) => void;
+
+  data: MatrixValue.Matrix<CellBase>;
 };
 
 /** Type of the ColumnIndicator component */
@@ -214,4 +250,4 @@ export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
   nextCell: Cell | null;
 }>;
 
-export type CreateFormulaParser = (data: Matrix<CellBase>) => FormulaParser;
+export type CreateFormulaParser = (data: Matrix<CellBase>) =>void;

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

@@ -169,10 +169,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               setFontSize(data, e.value as string);
             }}
             optionsList={fontSize}
-            selectedOption={{
-              label: '11',
-              value: '11',
-            }}
           />
         </div>
       </Col>

package/src/components/FileDropzone/FileDropzone.scss

@@ -29,8 +29,9 @@
     flex-direction: column;
     text-align: center;
     gap: 8px;
-
-    &--active {
+    transition: background-color 0.2s ease;
+    
+     &:hover, &--active {
       background-color: var(--file-dropzone-selected-color);
     }
 
@@ -121,6 +122,7 @@
         .ff-file-actions {
           display: flex;
           align-items: center;
+          gap: 8px;
           &__icon-replace,
           &__icon-remove {
             @include icon-container;

package/src/components/FileDropzone/FileDropzone.tsx

@@ -8,7 +8,7 @@ import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
 
 const FileDropzone: React.FC<FileDropzoneProps> = ({
-  icon = <Icon name="dropzone_icon" height={80} width={80} />,
+  icon = <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />,
   primaryLabel = 'Drag & drop your file to upload',
   secondaryLabel = 'Or',
   buttonLabel = 'Choose File to upload',

package/src/components/FileDropzone/FilePreview.tsx

@@ -52,6 +52,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
               color={'var(--icons-default-color)'}
               height={16}
               width={16}
+              hoverEffect
               onClick={() => onReplaceClick(file)}
             />
           </Tooltip>
@@ -59,9 +60,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         <div className="ff-file-actions__icon-remove">
           <Tooltip title="Remove">
             <Icon
-              name="remove"
+              name="close"
               height={16}
               width={16}
+              hoverEffect
               color={'var(--default-icon-color)'}
               onClick={() => onRemoveClick(file)}
             />

package/src/components/Form/Form.scss

@@ -8,6 +8,8 @@
   padding: 20px;
   width: 400px;
   margin: 0 auto;
+  display: grid;
+  gap: 8px;
 
   .ff-form-group {
     margin-bottom: 16px;

package/src/components/Form/Form.stories.tsx

@@ -1,8 +1,9 @@
+import React, { useRef } from 'react';
 import Forms from './Forms';
 import Input from '../Input';
 import RadioGroup from '../RadioGroup';
 import Select from '../Select';
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import Typography from '../Typography';
 import './Form.scss';
 import Checkbox from '../Checkbox';
@@ -10,6 +11,7 @@ import TextArea from '../TextArea';
 import Drawer from '../Drawer';
 import { useState } from 'react';
 import { Container } from '../GridLayout/GridLayout';
+import Button from '../Button/Button';
 
 type FormValues = {
   username: string;
@@ -73,7 +75,7 @@ export const WithDefaultValues: Story = {
         primaryButtonProps={pageDrawerPrimaryButton}
         secondaryButtonProps={pageDrawerSecondaryButton}
       >
-        <Container fluid className='ff-forms-container'>
+        <Container fluid className="ff-forms-container">
           <Forms<FormValues>
             onSubmit={onSubmit}
             id="element"
@@ -91,9 +93,9 @@ export const WithDefaultValues: Story = {
                 <div className="ff-main">
                   {/* Username Field */}
                   <div>
-                    <Typography as="label">username</Typography>
                     <Input
                       type="text"
+                      label='Username'
                       disabled={false}
                       {...register('username', {
                         required: {
@@ -125,10 +127,9 @@ export const WithDefaultValues: Story = {
 
                   {/* Email Field */}
                   <div>
-                    <Typography as="label">Email</Typography>
-
                     <Input
                       type="email"
+                      label="Email"
                       disabled={false}
                       {...register('email', {
                         required: { value: true, message: 'Email is required' },
@@ -153,8 +154,8 @@ export const WithDefaultValues: Story = {
 
                   {/* Password Field */}
                   <div>
-                    <Typography as="label">Password</Typography>
                     <Input
+                      label="Password"
                       disabled={false}
                       type="password"
                       {...register('password', {
@@ -320,4 +321,192 @@ export const WithDefaultValues: Story = {
   },
 };
 
+export const WithSubmissionOutside: Story = {
+  render: () => {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+    type FormValues = {
+      username: string;
+      email: string;
+      password: string;
+      check: boolean;
+    };
+
+    const initialFormState: FormValues = {
+      username: '',
+      email: '',
+      password: '',
+      check: false,
+    };
+
+    const formRef = useRef<any>(null);
+
+    const handleSubmit = (data: FormValues) => {
+      alert('Form submitted with: ' + JSON.stringify(data));
+    };
+
+    const submitForm = () => {
+      formRef.current.submit();
+    };
+
+    const handleCreateAndContinue = () => {
+      formRef.current.submit();
+      formRef.current.reset();
+      formRef.current.clearErrors();
+    };
+
+    const handleReset = () => { 
+      formRef.current.reset();
+      formRef.current.clearErrors();
+    }
+
+    const footerContent = (
+      <>
+        <Checkbox
+          label="Copy to shared"
+          disabled={false}
+          checked={formRef.current?.watch('check')}
+          {...formRef.current?.register('check', {
+            required: {
+              value: true,
+              message: 'Please select the checkbox',
+            },
+          })}
+          onChange={(e) => {
+            formRef.current?.setValue('check', e.target.checked, {
+              shouldValidate: true,
+            });
+          }}
+        />
+        <Button
+          variant="secondary"
+          onClick={() => setIsDrawerOpen(false)}
+          label="Cancel"
+        />
+        <Button
+          variant="secondary"
+          onClick={handleReset}
+          label="Reset"
+        />
+        <Button
+          variant="secondary"
+          onClick={handleCreateAndContinue}
+          label="Create and continue"
+        />
+        <Button variant="primary" onClick={submitForm} label="Submit" />
+      </>
+    );
+
+    return (
+      <div>
+        <Drawer
+          overlay
+          isOpen={isDrawerOpen}
+          title="Select Page"
+          onClose={() => setIsDrawerOpen(false)}
+          footerContent={footerContent}
+        >
+          <Forms
+            ref={formRef}
+            onSubmit={handleSubmit}
+            defaultValues={initialFormState}
+          >
+            {({
+              watch,
+              register,
+              setValue,
+              trigger,
+              formState: { errors },
+            }) => (
+              <div className="ff-form-container">
+                <div>
+                  <Input
+                    type="text"
+                    label="Username"
+                    value={watch('username')}
+                    {...register('username', {
+                      required: 'Username is required',
+                      minLength: {
+                        value: 3,
+                        message: 'Username must be at least 3 characters',
+                      },
+                    })}
+                    onChange={(e) =>
+                      setValue('username', e.target.value, {
+                        shouldValidate: true,
+                      })
+                    }
+                    onBlur={() => {
+                      trigger('username');
+                    }}
+                    error={!!errors.username}
+                    helperText={errors.username?.message}
+                  />
+                </div>
+
+                {/* Email Field */}
+                <div>
+                  <Input
+                    type="email"
+                    label="Email"
+                    value={watch('email')}
+                    {...register('email', {
+                      required: 'Email is required',
+                      pattern: {
+                        value: /^\S+@\S+\.\S+$/,
+                        message: 'Please enter a valid email',
+                      },
+                    })}
+                    onChange={(e) =>
+                      setValue('email', e.target.value, {
+                        shouldValidate: true,
+                      })
+                    }
+                    onBlur={() => {
+                      trigger('email');
+                    }}
+                    error={!!errors.email}
+                    helperText={errors.email?.message}
+                  />
+                </div>
+
+                {/* Password Field */}
+                <div>
+                  <Input
+                    label="Password"
+                    value={watch('password')}
+                    {...register('password', {
+                      required: 'Password is required',
+                      minLength: {
+                        value: 6,
+                        message: 'Password must be at least 6 characters',
+                      },
+                    })}
+                    onChange={(e) =>
+                      setValue('password', e.target.value, {
+                        shouldValidate: true,
+                      })
+                    }
+                    onBlur={() => {
+                      trigger('password');
+                    }}
+                    placeholder="Enter your password"
+                    type="password"
+                    error={!!errors.password}
+                    helperText={errors.password?.message}
+                  />
+                </div>
+              </div>
+            )}
+          </Forms>
+        </Drawer>
+
+        {/* Submit Button Outside the Form */}
+        <Button onClick={submitForm} variant="primary">
+          Submit Form
+        </Button>
+      </div>
+    );
+  },
+};
+
 export default meta;

package/src/components/Form/Forms.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import Form from './Form';
 
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
@@ -7,16 +7,19 @@ interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
   children: (methods: ReturnType<typeof Form.useForm<T>>) => React.ReactNode;
 }
 
-const Forms = <T extends Form.FieldValues>({
-  onSubmit,
-  children,
-  id,
-  ...rest
-}: FormProps<T>) => {
+const Forms = <T extends Form.FieldValues>(
+  { onSubmit, children, id, ...rest }: FormProps<T>,
+  ref: React.Ref<any>
+) => {
   const methods = Form.useForm<T>(rest);
 
   const { handleSubmit } = methods;
 
+  useImperativeHandle(ref, () => ({
+    submit: handleSubmit(onSubmit),
+    ...methods,
+  }));
+
   return (
     <form id={id} onSubmit={handleSubmit(onSubmit)}>
       {children(methods)}
@@ -24,4 +27,8 @@ const Forms = <T extends Form.FieldValues>({
   );
 };
 
-export default Forms;
+const ForwardedForms = forwardRef(Forms) as <T extends Form.FieldValues>(
+  props: FormProps<T> & { ref?: React.Ref<any> }
+) => JSX.Element;
+
+export default ForwardedForms;

package/src/components/Icon/iconList.ts

@@ -44,6 +44,7 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
 import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+
 import FormatePainter from '../../assets/icons/formate_painter.svg?react';
 import Bold from '../../assets/icons/bold.svg?react';
 import Italic from '../../assets/icons/italic.svg?react';
@@ -61,6 +62,24 @@ import TextAlignLeft from '../../assets/icons/text_align_left.svg?react';
 import TextAlignRight from '../../assets/icons/text_align_right.svg?react';
 import TextColor from '../../assets/icons/text_color.svg?react';
 import FillColor from '../../assets/icons/fill_color.svg?react';
+import FormulaIcon from '../../assets/icons/formula_icon.svg?react';
+import ExcelCornerMenu from '../../assets/icons/excel_corner_menu.svg?react';
+
+import ApkFileType from '../../assets/icons/apk_file_type.svg?react';
+import CsvFileType from '../../assets/icons/csv_file_type.svg?react';
+import CompressedFileType from '../../assets/icons/compressed_file_type.svg?react';
+import HtmlFileType from '../../assets/icons/html_file_type.svg?react';
+import JsonFileType from '../../assets/icons/json_file_type.svg?react';
+import PdfFileType from '../../assets/icons/pdf_file_type.svg?react';
+import PngFileType from '../../assets/icons/png_file_type.svg?react';
+import XlsxFileType from '../../assets/icons/xlsx_file_type.svg?react';
+import XmlFileType from '../../assets/icons/xml_file_type.svg?react';
+import XlsFileType from '../../assets/icons/xls_file_type.svg?react';
+import IpkFileType from '../../assets/icons/ipk_file_type.svg?react';
+import TxtFileType from '../../assets/icons/txt_file_type.svg?react';
+import GifFileType from '../../assets/icons/gif_file_type.svg?react';
+import JpgFileType from '../../assets/icons/jpg_file_type.svg?react';
+
 import InfoIcon from '../../assets/icons/info_icon.svg?react';
 import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
 import HideIcon from '../../assets/icons/hide_icon.svg?react';
@@ -180,6 +199,9 @@ import MinimizeScript from '../../assets/icons/minimize_script.svg?react';
 import MaximizeTree from '../../assets/icons/maximize_tree.svg?react';
 import LabelIcon from '../../assets/icons/label_icon.svg?react';
 import AddLabelIcon from '../../assets/icons/add_label_icon.svg?react';
+import QuickRunSettingIcon from '../../assets/icons/quick_run_setting_icon.svg?react';
+import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.svg?react';
+import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -224,6 +246,8 @@ Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable'] = AddVariable;
+
+
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
 Components['italic'] = Italic;
@@ -241,6 +265,24 @@ Components['text_align_left'] = TextAlignLeft;
 Components['text_align_right'] = TextAlignRight;
 Components['text_color'] = TextColor;
 Components['fill_color'] = FillColor;
+Components['formula_icon'] = FormulaIcon;
+Components['excel_corner_menu'] = ExcelCornerMenu;
+
+Components['apk_file_type'] = ApkFileType;
+Components['csv_file_type'] = CsvFileType;
+Components['compressed_file_type'] = CompressedFileType;
+Components['html_file_type'] = HtmlFileType;
+Components['json_file_type'] = JsonFileType;
+Components['pdf_file_type'] = PdfFileType;
+Components['png_file_type'] = PngFileType;
+Components['xlsx_file_type'] = XlsxFileType;
+Components['xml_file_type'] = XmlFileType;
+Components['xls_file_type'] = XlsFileType;
+Components['ipk_file_type'] = IpkFileType;
+Components['txt_file_type'] = TxtFileType;
+Components['gif_file_type'] = GifFileType;
+Components['jpg_file_type'] = JpgFileType;
+
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
@@ -357,5 +399,9 @@ Components['minimize_script'] = MinimizeScript;
 Components['maximize_tree'] = MaximizeTree;
 Components['label_icon'] = LabelIcon;
 Components['add_label_icon'] = AddLabelIcon;
+Components['quick_run_setting'] = QuickRunSettingIcon;
+Components['run_manual_testcase'] = RunManualTestcaseIcon;
+Components['run_automation_scripts'] = RunAutomationScriptsIcon;
+
 
 export default Components;

package/src/components/IconRadioGroup/IconRadioGroup.scss

@@ -35,6 +35,9 @@
     align-items: center;
     border: 1px solid var(--border-color);
     background: var(--drawer-footer-bg);
+    &:hover {
+      background: var(--border-color);
+    }
 
     &.selected {
       background-color: var(--brand-color);

package/src/components/IconRadioGroup/IconRadioGroup.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import './IconRadioGroup.scss';
 import Icon from '../Icon/Icon';
 import { IconRadioItem, IconRadioGroupProps } from './type';
+import Tooltip from '../Tooltip';
 
 const IconRadioGroup: React.FC<IconRadioGroupProps> = ({
   items,
@@ -45,23 +46,25 @@ const IconRadioGroup: React.FC<IconRadioGroupProps> = ({
           })}
           onClick={() => handleButtonClick(item)}
         >
-          <div
-            className={classNames('icon-container', {
-              selected: selectedValue === item.iconName,
-            })}
-          >
-            <Icon
-              name={item.iconName}
-              height={14}
-              width={14}
-              hoverEffect={false}
-              color={
-                selectedValue === item.iconName
-                  ? 'var(--drawer-footer-bg)'
-                  : 'var(--brand-color)'
-              }
-            />
-          </div>
+          <Tooltip title={item.iconLabel}>
+            <div
+              className={classNames('icon-container', {
+                selected: selectedValue === item.iconName,
+              })}
+            >
+              <Icon
+                name={item.iconName}
+                height={14}
+                width={14}
+                hoverEffect={false}
+                color={
+                  selectedValue === item.iconName
+                    ? 'var(--drawer-footer-bg)'
+                    : 'var(--brand-color)'
+                }
+              />
+            </div>
+          </Tooltip>
         </div>
       ))}
       <div className="line-connector"></div>

package/src/components/Input/Input.scss

@@ -11,16 +11,17 @@
     border-radius: 4px;
     outline: none;
     line-height: 18px;
+    @extend .fontSm;
     &--medium {
       padding: 10px 9px;
     }
-    @extend .fontSm;
     &:disabled {
       cursor: not-allowed;
     }
     &::placeholder {
       opacity: 0;
-      line-height: 18px;
+      @extend .fontXs;
+      line-height: 15px;
     }
     &--disabled {
       background: transparent;
@@ -67,7 +68,7 @@
   }
   &:hover {
     .ff-input-label {
-      color: var(--input-hover-border-color);
+      color: var(--input-default-label-color);
       &--no-hover {
         color: var(--input-default-label-color);
       }
@@ -94,10 +95,10 @@
   }
   &:focus-within {
     .ff-input-label-container {
-      top: -6px;
-      @extend .font-size-8;
+      top: -9px;
+      @extend .fontXs;
       background-color: var(--input-label-bg-color);
-      line-height: 12px;
+      line-height: 15px;
       padding: 0px 2px;
       margin-left: 10px;
     }
@@ -110,9 +111,8 @@
       }
     }
     .ff-input {
-      &--primary {
-        border-color: var(--brand-color);
-      }
+      border-color: var(--brand-color);
+
       &--danger {
         border-color: var(--input-error-text-color);
       }
@@ -120,16 +120,15 @@
       &::placeholder {
         opacity: 1;
         margin-bottom: 1px;
-        @extend .font-size-8;
       }
     }
   }
 
   .ff-input-message {
-    @extend .font-size-8;
+    @extend .fontXs;
     padding: 0px 4px;
     margin-left: 8px;
-    line-height: 12px;
+    line-height: 15px;
     &--danger {
       color: var(--input-error-text-color);
     }
@@ -138,10 +137,10 @@
   &--float {
     .ff-input-label-container {
       //re-written label container code to place it at on border
-      top: -6px;
-      @extend .font-size-8;
+      top: -9px;
+      font-size: 10px;
       background-color: var(--input-label-bg-color);
-      line-height: 12px;
+      line-height: 15px;
       padding: 0px 2px;
       margin-left: 10px;
     }