pixel-react-excel-sheet 1.0.38 → 1.0.40

package/src/components/Excel/Types.ts

@@ -31,7 +31,7 @@ interface WorkData {
   value: string;
 
   /** Styling options for the cell */
-  style: BackendStyle;
+  styles: BackendStyle; //TODO remove 's' for Style
   type?: boolean;
 }
 
@@ -43,7 +43,7 @@ type BackendStyle = {
   color: string;
   backgroundColor: string;
   borderColor: string;
-  underline:string;
+  underline: string;
   border: {
     top: string;
     bottom: string;
@@ -79,20 +79,6 @@ interface ContextOption {
   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;
@@ -112,6 +98,22 @@ interface ColorContainer {
   borderColor: string;
 }
 
+interface ContextMenuState {
+  open: boolean;
+  position: {
+    x: number;
+    y: number;
+  };
+  options: optionsType[];
+}
+
+interface optionsType {
+  label: string;
+  value: string;
+  iconName: string;
+  action: () => void;
+}
+
 interface SelectedValue {
   /** The value inside the selected cell */
   value: string;

package/src/components/FF_Captcha/Recaptcha.tsx

@@ -1,14 +1,27 @@
-import { useState, forwardRef } from 'react';
+import React, { useState, forwardRef, ComponentType, Ref } from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { RecaptchaProps } from './types';
 import './Recaptcha.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
-
+// Extend the props to include React.RefAttributes
+const FixedReCAPTCHA = ReCAPTCHA as unknown as ComponentType<
+  {
+    sitekey: string;
+    onChange: (token: string | null) => void;
+    className?: string;
+    theme?: 'light' | 'dark';
+    size?: 'compact' | 'normal' | 'invisible';
+    tabindex?: number;
+    badge?: 'bottomright' | 'bottomleft' | 'inline';
+  } & React.RefAttributes<ReCAPTCHA>
+>;
 const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
-  ({ onVerify, className = '', error: externalError, sitekey, ...props }, ref) => {
+  (
+    { onVerify, className = '', error: externalError, sitekey, ...props },
+    ref: Ref<ReCAPTCHA>
+  ) => {
     const [internalError, setInternalError] = useState<string | null>(null);
-    
     const handleChange = (token: string | null) => {
       if (token) {
         setInternalError(null);
@@ -17,12 +30,10 @@ const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
         setInternalError('Please complete the CAPTCHA');
       }
     };
-
     const error = externalError || internalError;
-
     return (
       <div className={classNames('ff-recaptcha-wrapper', className)}>
-        <ReCAPTCHA
+        <FixedReCAPTCHA
           ref={ref}
           sitekey={sitekey}
           onChange={handleChange}
@@ -37,5 +48,4 @@ const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
     );
   }
 );
-
-export default Recaptcha;
+export default Recaptcha;

package/src/components/FF_Captcha/types.ts

@@ -1,7 +1,16 @@
 import { ComponentProps } from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-
-export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+// Fix ReCAPTCHA type by casting to a compatible type
+type FixedReCAPTCHA = React.ComponentType<{
+  sitekey: string;
+  onChange: (token: string | null) => void;
+  className?: string;
+  theme?: 'light' | 'dark';
+  size?: 'compact' | 'normal' | 'invisible';
+  tabindex?: number;
+  badge?: 'bottomright' | 'bottomleft' | 'inline';
+}>;
+export interface RecaptchaProps
+  extends Omit<ComponentProps<FixedReCAPTCHA>, 'onChange'> {
   /**
    * Callback function that receives the verification token
    */
@@ -19,4 +28,3 @@ export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, '
    */
   sitekey: string;
 }
-

package/src/components/Icon/Icon.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Icon from './Icon';
 import Components from './iconList';
+import React, { useState } from 'react';
 
 const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
@@ -25,16 +26,63 @@ export const Icons: Story = {
 
 export const AllIcons: Story = {
   render: () => {
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const filteredIcons = Object.keys(Components).filter((iconName) =>
+      iconName.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
     return (
-      <div className="group-icons">
-        {Object.keys(Components).map((iconName) => {
-          return (
-            <div key={iconName}>
+      <div>
+        <input
+          type="text"
+          placeholder="Search icons..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          style={{
+            marginBottom: '16px',
+            padding: '8px',
+            width: '100%',
+            boxSizing: 'border-box',
+          }}
+        />
+        <div
+          className="group-icons"
+          style={{
+            display: 'flex',
+            gap: 8,
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {filteredIcons.map((iconName) => (
+            <div
+              key={iconName}
+              style={{
+                border: '1px solid var(--brand-color)',
+                width: '30%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+              }}
+            >
               <Icon name={iconName} height={40} width={40} />
-              <center title={iconName}>{iconName}</center>
+              <p
+                style={{
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  width: '160px',
+                }}
+                title={iconName}
+              >
+                {iconName}
+              </p>
             </div>
-          );
-        })}
+          ))}
+        </div>
       </div>
     );
   },
@@ -62,4 +110,4 @@ export const DarkVariantIcons: Story = {
   },
 };
 
-export default meta;
+export default meta;

package/src/components/Icon/iconList.ts

@@ -127,6 +127,7 @@ import LabelPlusIcon from '../../assets/icons/label_plus.svg?react';
 import Drag from '../../assets/icons/drag_icon.svg?react';
 import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
 import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
+import ClearCache from '../../assets/icons/clear_cache.svg?react';
 import Reload from '../../assets/icons/reload.svg?react';
 import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
 import WindowRestore from '../../assets/icons/window_restore.svg?react';
@@ -253,6 +254,11 @@ import suitesIcon from '../../assets/icons/suites_icon.svg?react';
 import executionsIcon from '../../assets/icons/executions_icon.svg?react';
 import ImportIcon from '../../assets/icons/import_icon.svg?react';
 import Settings from '../../assets/icons/settings.svg?react';
+import UnfollowIcon from '../../assets/icons/unfollow_icon.svg?react';
+import ExternalUser from '../../assets/icons/external_user.svg?react';
+import SingleUser from '../../assets/icons/single_user.svg?react';
+import GroupUser from '../../assets/icons/group_user.svg?react';
+import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -379,6 +385,7 @@ Components['browser_stack_icon'] = BrowserStack;
 Components['run_icon'] = Run;
 Components['backward_icon'] = BackwardIcon;
 Components['forward_icon'] = ForwardIcon;
+Components['clear_cache'] = ClearCache;
 Components['reload'] = Reload;
 Components['window_maximize'] = WindowMaximize;
 Components['window_restore'] = WindowRestore;
@@ -500,6 +507,11 @@ Components['machine_disable_icon'] = machineDisableIcon;
 Components['executions_icon'] = executionsIcon;
 Components['suites_icon'] = suitesIcon;
 Components['import_icon'] = ImportIcon;
-Components['settings'] = Settings
+Components['settings'] = Settings;
+Components['test_freshers_logo']=TestFreshersLogo;
+Components['unfollow_icon']=UnfollowIcon
+Components['external_user'] = ExternalUser;
+Components['single_user'] = SingleUser;
+Components['group_user'] = GroupUser;
 
 export default Components;

package/src/components/Input/Input.stories.tsx

@@ -51,6 +51,18 @@ export const DisabledWithValue: Story = {
   },
 };
 
+export const AutoFocusInput: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'primary',
+    type: 'text',
+    value: '',
+    required: true,
+    autoFocus: true,
+  },
+};
+
 export const WithoutLabel: Story = {
   render: () => {
     const [value, setValue] = useState('');

package/src/components/Input/Input.tsx

@@ -23,6 +23,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       onBlur,
       onFocus,
       autoComplete = 'off',
+      autoFocus = false,
       minValue = -Infinity,
       maxValue = Infinity,
       transparentBackground = false,
@@ -48,13 +49,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         >
           {isLabelRequired && (
             <label
-              htmlFor={name}
               className={classNames(
                 `ff-input-label-container ff-input-label-container--${size}`,
                 {
                   'ff-input-label-container--danger': !!error,
                 }
               )}
+              htmlFor={name}
             >
               {required && <span className="required-asterisk">*</span>}
               <span
@@ -97,6 +98,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             autoComplete={autoComplete}
+            autoFocus={autoFocus}
             min={minValue}
             max={maxValue}
             {...props}

package/src/components/Input/types.ts

@@ -65,6 +65,10 @@ export interface InputProps {
    * if on, suggestion popup will be displayed
    */
   autoComplete?: 'on' | 'off';
+  /**
+   * if true, input field is in autofocus state
+   */
+  autoFocus?: boolean;
   /**
    *  minimum and maximum values for the number type input field and their functions
    */

package/src/components/InputWithDropdown/types.ts

@@ -15,7 +15,7 @@ export interface InputWithDropdownProps {
    * Label | field label to be displayed
    */
   label?: string;
-
+  
   /**
    * value | input field value
    */

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -88,3 +88,7 @@
     color: var(--label-edit-error-text);
   }
 }
+.custom-edit-text-field {
+  height: 10px;
+  width: 100px;
+}

package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx

@@ -187,11 +187,12 @@ export const openLabelEditTextField: Story = {
         confirmAction={handleConfirmAction}
         onInputChange={handleInputChange}
         isOpen={true}
+        className="custom-edit-text-field"
+        showText={false}
         customError="text is too long"
         customErrorCondition={demoText?.length > 10}
       />
     );
   },
 };
-
 export default meta;

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -30,6 +30,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   label,
   placeholder,
   text,
+  showText = true,
   highlightText,
   customError,
   confirmIcon,
@@ -39,6 +40,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   onInputChange,
   dropdownData = [],
   // width,
+  className,
   height,
   isOpen = false,
   confirmAction,
@@ -182,7 +184,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
                 placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`
+                className={`${className} 
                 
                ${isTextFieldModified ? 'modified' : ''}`}
               />
@@ -203,7 +205,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
                 placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`
+                className={`${className} 
                
                ${isTextFieldModified ? 'modified' : ''}`}
               />
@@ -241,14 +243,16 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
           title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
           placement={'bottom'}
         >
-          <span
-            className="display-text"
-            onDoubleClick={handleDoubleClick}
-            role="button"
-            onClick={handleClick}
-          >
-            <HighlightText text={inputValue} highlight={highlightText} />
-          </span>
+          {showText && (
+            <span
+              className="display-text"
+              onDoubleClick={handleDoubleClick}
+              role="button"
+              onClick={handleClick}
+            >
+              <HighlightText text={inputValue} highlight={highlightText} />
+            </span>
+          )}
         </Tooltip>
       )}
       {showError && isEditing && (

package/src/components/LabelEditTextField/types.ts

@@ -17,6 +17,7 @@ export interface LabelEditTextFieldTypes {
   label?: string;
   /** Initial text displayed in the input field. */
   text?: string;
+  showText?: boolean;
   /** Text to be highlighted within the displayed text, if provided. */
   highlightText?: string;
   /** Custom error message to be displayed, if applicable. */
@@ -42,6 +43,7 @@ export interface LabelEditTextFieldTypes {
   onClick?: () => void;
   /** Function called when every input character got changed */
   onInputChange?: (newInputValue: string) => void;
+  className?: string;
   tooltip?: {
     tooltipTitle?: string;
     tooltipPlacement?: string;

package/src/components/LazyLoad/LazyLoad.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import LazyLoading from './LazyLoading';
 

package/src/components/LazyLoad/LazyLoading.tsx

@@ -1,5 +1,14 @@
+import React, { ComponentType } from 'react';
 import LazyLoad from './LazyLoad';
-const { FixedSizeList } = LazyLoad;
+const { FixedSizeList: _FixedSizeList } = LazyLoad;
+
+const FixedSizeList = _FixedSizeList as unknown as ComponentType<{
+  height: number;
+  itemCount: number;
+  itemSize: number;
+  width: number;
+  children: (props: { index: number; style: React.CSSProperties }) => JSX.Element;
+}>;
 const Row = ({
   index,
   style,

package/src/components/MachineInputField/MachineInputField.scss

@@ -15,6 +15,10 @@
     align-items: center;
     justify-content: space-between;
 
+    &:hover {
+      border-color: var(--ff-connecting-branch-color);
+    }
+
     .ff-machine-icon-text-wrapper,
     .ff-machine-icon-text-wrapper-reverse {
       display: flex;
@@ -47,7 +51,7 @@
     position: absolute;
     top: -6px;
     left: 8px;
-    background-color: var(--ff-machine-input-field-border-color);
+    background-color: var(--ff-machine-input-field-label-color);
     border-radius: 4px;
     padding: 1px 2px;
     height: 12px;

package/src/components/MachineInputField/MachineInputField.tsx

@@ -20,6 +20,7 @@ const MachineInputField = ({
     sauceLabs: 'sause_lab',
     lambdaTest: 'lambda_icon',
     mac: 'mac_icon',
+    mac_icon: 'mac_icon',
     android: 'android_icon',
     linux: 'linux',
     'google chrome': 'chrome_icon',

package/src/components/MobileSkin/MobileSkin.scss

@@ -0,0 +1,67 @@
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins' as *;
+
+.ff-mobileskin-wrapper {
+  @include center-content;
+  flex-direction: column;
+
+  &.portrait {
+    gap: 30px;
+  }
+
+  &.landscape {
+    gap: 38px;
+  }
+
+  .ff-mobileskin-container {
+    @extend .ff-mobileskin-wrapper;
+    .ff-mobile-container {
+      @include center-content;
+      border: 8px solid var(--text-color);
+      border-radius: 30px;
+      position: relative;
+      overflow: hidden;
+
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+      }
+      .ff-mobile-image-container {
+        @include center-content;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .ff-notch {
+    background-color: var(--text-color);
+    border-radius: 24px;
+    position: absolute;
+    &.android-notch {
+      border-radius: 50%;
+    }
+  }
+  .ff-nav-bar {
+    height: 32px;
+    padding: 8px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border: 1px solid var(--brand-color);
+    border-radius: 24px;
+  }
+  .ff-nav-bar-icon {
+    height: 16px;
+    padding: 8px;
+    border-right: 1px solid var(--brand-color);
+    @include center-content;
+
+    &.last-icon {
+      border-right: none;
+    }
+  }
+}

package/src/components/MobileSkin/MobileSkin.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MobileSkin from './MobileSkin';
+
+const meta: Meta<typeof MobileSkin> = {
+  title: 'Components/MobileSkin',
+  component: MobileSkin,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+const navBarIcons = [
+  {
+    title: 'Forward',
+    name: 'right_arrow_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Backward',
+    name: 'left_arrow_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Refresh',
+    name: 'refresh_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Capture',
+    name: 'minimize_script',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+  {
+    title: 'Rotate',
+    name: 'replace_icon',
+    onClick: () => {},
+    height: 16,
+    width: 16,
+  },
+];
+const randomImage: string =
+  'https://plus.unsplash.com/premium_photo-1664303228186-a61e7dc91597?q=80&w=1384&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+type Story = StoryObj<typeof MobileSkin>;
+
+const defaultArgs = {
+  navBarIcons: navBarIcons,
+  mobileWidth: 220,
+  mobileHeight: 448,
+  children: randomImage,
+};
+
+export const iosPortraitView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'portrait',
+    type: 'ios',
+  },
+};
+
+export const iosLandscapeView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'landscape',
+    type: 'ios',
+  },
+};
+
+export const androidPortraitView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'portrait',
+    type: 'android',
+  },
+};
+
+export const androidLandscapeView: Story = {
+  args: {
+    ...defaultArgs,
+    orientation: 'landscape',
+    type: 'android',
+  },
+};
+export default meta;