pixel-react-excel-sheet 1.2.0

package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InputWithDropdown from './InputWithDropdown';
+import { ChangeEvent, useState } from 'react';
+import { Option } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const meta: Meta<typeof InputWithDropdown> = {
+  title: 'Components/InputWithDropdown',
+  component: InputWithDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof InputWithDropdown>;
+
+let optionsList = [
+  { label: 'option 1', value: 'option 1' },
+  { label: 'option 2', value: 'option 2' },
+  { label: 'option 3', value: 'option 3' },
+  { label: 'option 4', value: 'option 4' },
+];
+let selectedOption = { label: 'option 2', value: 'option 2' };
+
+const defaultArgs = {
+  label: 'Field-Name',
+  disabled: false,
+  placeholder: 'Enter your name',
+  optionsList: optionsList,
+  selectedOption: selectedOption,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    disabled: false,
+    required: false,
+  },
+};
+
+export const DisabledWithValue: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'primary',
+    value: 12345,
+    disabled: true,
+    required: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<number>(0);
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>('');
+
+    const optionsListToPass = [
+      { label: 'milliseconds', value: 'milliseconds' },
+      { label: 'seconds', value: 'seconds' },
+      { label: 'minutes', value: 'minutes' },
+      { label: 'hours', value: 'hours' },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'milliseconds',
+      value: 'milliseconds',
+    });
+
+    const onDropdownChangeHandler = (option: Option) => {
+      setSelectedOption(option);
+      setValue(0);
+    };
+
+    const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const inputValue = parseInt(event.target.value);
+      setValue(inputValue);
+
+      if (event.target) {
+        if (inputValue < 0 || checkEmpty(value)) {
+          setError(true);
+          setHelperText(`${event.target.name} is required`);
+        } else if (inputValue > 999) {
+          setError(true);
+          setHelperText(`${event.target.name} should be upto 999`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+    };
+
+    return (
+      <InputWithDropdown
+        {...defaultArgs}
+        name="ImplicitTime"
+        label="ImplicitTime"
+        placeholder={`Enter ImplicitTime here`}
+        value={value}
+        required={true}
+        error={error}
+        helperText={helperText}
+        optionsList={optionsListToPass}
+        selectedOption={selectedOption}
+        onInputChangeHandler={onInputChangeHandler}
+        onDropdownChangeHandler={onDropdownChangeHandler}
+      />
+    );
+  },
+};
+
+export const InputWithStaticLabelWithoutOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState<number>(0);
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>('');
+
+    const optionsListToPass = [{ label: 'Days', value: 'Days' }];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'Days',
+      value: 'Days',
+    });
+
+    const onDropdownChangeHandler = (option: Option) => {
+      setSelectedOption(option);
+      setValue(0);
+    };
+
+    const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const inputValue = parseInt(event.target.value);
+      setValue(inputValue);
+
+      if (event.target) {
+        if (checkEmpty(inputValue)) {
+          setError(true);
+          setHelperText(`${event.target.name} is required`);
+        } else if (inputValue >= 366) {
+          setError(true);
+          setHelperText(`${event.target.name} should be upto 365`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+    };
+
+    return (
+      <InputWithDropdown
+        {...defaultArgs}
+        name="Duration"
+        label="Duration"
+        placeholder={`Enter Duration here`}
+        value={value}
+        required={true}
+        error={error}
+        helperText={helperText}
+        optionsList={optionsListToPass}
+        selectedOption={selectedOption}
+        optionsRequired={false}
+        onInputChangeHandler={onInputChangeHandler}
+        onDropdownChangeHandler={onDropdownChangeHandler}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -0,0 +1,90 @@
+import classNames from 'classnames';
+import './InputWithDropdown.scss';
+import { InputWithDropdownProps } from './types';
+import Select from '../Select/Select';
+import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+const InputWithDropdown = ({
+  name = '',
+  label,
+  value,
+  disabled = false,
+  required = false,
+  placeholder,
+  error,
+  helperText,
+  optionsList,
+  selectedOption,
+  onDropdownChangeHandler = () => {},
+  onInputChangeHandler,
+  onInputBlurHandler,
+  optionsRequired = true,
+}: InputWithDropdownProps) => {
+  const isValueFilled = !checkEmpty(value);
+  return (
+    <div
+      className={classNames('ff-input-with-dropdown-container', {
+        'ff-input-with-dropdown-container--filled': isValueFilled,
+      })}
+    >
+      <fieldset
+        className={classNames('ff-input-with-dropdown', {
+          'ff-input-with-dropdown--filled': isValueFilled,
+          'ff-input-with-dropdown--no-hover': isValueFilled,
+          'ff-input-with-dropdown--disabled': !!disabled,
+          'ff-input-with-dropdown--error': !!error,
+        })}
+      >
+        <div className={classNames('ff-floating-label-input-container')}>
+          <Typography
+            as="label"
+            htmlFor={name}
+            className={classNames('ff-floating-label', {
+              'ff-floating-label--filled': isValueFilled,
+              'ff-floating-label--no-hover': isValueFilled,
+              'ff-floating-label--error': !!error,
+            })}
+          >
+            {required && <span className="ff-required-asterisk">*</span>}{' '}
+            {label}
+          </Typography>
+          <input
+            name={name}
+            type="number"
+            id={name}
+            value={value}
+            onChange={onInputChangeHandler}
+            onBlur={onInputBlurHandler}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            className={classNames('ff-floating-input', {
+              'ff-floating-input--filled': isValueFilled,
+              'ff-floating-input--disabled': !!disabled,
+              'ff-floating-input--error': !!error,
+            })}
+          />
+        </div>
+        <Select
+          optionsList={optionsList}
+          selectedOption={selectedOption}
+          showLabel={false}
+          showBorder={false}
+          onChange={onDropdownChangeHandler}
+          disabled={disabled || !optionsRequired}
+          optionsRequired={optionsRequired}
+          className={classNames('ff-floating-dropdown', {
+            'ff-floating-dropdown--disabled': !!disabled,
+            'ff-floating-dropdown--error': !!error,
+          })}
+        />
+      </fieldset>
+      {error && helperText && (
+        <span className="ff-helper-text">{helperText}</span>
+      )}
+    </div>
+  );
+};
+
+export default InputWithDropdown;

package/src/components/InputWithDropdown/index.ts

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

package/src/components/InputWithDropdown/types.ts

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+
+export interface Option {
+  label: string | ReactNode; // The display label for the dropdown option
+  value: string; // The value associated with the dropdown option
+}
+
+export interface InputWithDropdownProps {
+  /**
+   * Name | name of the input field
+   */
+  name: string;
+
+  /**
+   * Label | field label to be displayed
+   */
+  label?: string;
+
+  /**
+   * value | input field value
+   */
+  value?: number;
+
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+
+  /**
+   * placeholder for the input field
+   */
+  placeholder?: string;
+
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+
+  /**
+   * Options for the select dropdown
+   */
+  optionsList: Option[];
+
+  /**
+   * Selected option for the select dropdown
+   */
+  selectedOption?: Option;
+
+  /**
+   * onChange handler for input changes
+   */
+  onInputChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * onChange handler for dropdown changes
+   */
+  onDropdownChangeHandler?: (option: Option) => void;
+
+  /**
+   * onInputBlurHandler action for input field
+   */
+  onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+
+  /**
+   * minimum and maximum values for the number type input field
+   */
+  minValue?: number;
+
+  maxValue?: number;
+
+  /**
+   * background of the input field prop
+   */
+  isBackgroundTransparent?: boolean;
+  /**
+   * optionsRequired:false prop removes options from dropdown & shows static label only
+   */
+  optionsRequired?: boolean;
+}

package/src/components/LazyLoad/LazyLoad.d.ts

@@ -0,0 +1,3 @@
+declare module 'LazyLoad' {
+  export * from 'react-window';
+}

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

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LazyLoading from './LazyLoading';
+
+const meta: Meta = {
+  title: 'Components/LazyLoad',
+  component: LazyLoading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+        The \`LazyLoading\` component is designed to optimize performance by only rendering the necessary parts of a large dataset that are visible within the viewport.
+        This component is particularly useful for applications that handle a significant amount of content, such as image galleries or infinite scrolling lists.
+
+        LazyLoad works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
+
+          i) It reduces the amount of work (and time) required to render the initial view and to process updates. \n
+          ii) It reduces the memory footprint by avoiding over-allocation of DOM nodes.`,
+        story:
+          'This is a description with [library](https://www.npmjs.com/package/react-window) to an external website.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof LazyLoading>;
+
+export const Primary: Story = {
+  render: () => <LazyLoading />,
+};
+
+export default meta;

package/src/components/LazyLoad/LazyLoad.ts

@@ -0,0 +1,2 @@
+import * as LazyLoad from 'react-window';
+export default LazyLoad;

package/src/components/LazyLoad/LazyLoading.tsx

@@ -0,0 +1,19 @@
+import LazyLoad from './LazyLoad';
+const { FixedSizeList } = LazyLoad;
+const Row = ({
+  index,
+  style,
+}: {
+  index: number;
+  style: React.CSSProperties;
+}) => <div style={style}>Row {index}</div>;
+
+const LazyLoading = () => {
+  return (
+    <FixedSizeList height={300} itemCount={100000} itemSize={30} width={400}>
+      {Row}
+    </FixedSizeList>
+  );
+};
+
+export default LazyLoading;

package/src/components/LazyLoad/index.ts

@@ -0,0 +1 @@
+export * from './LazyLoad';

package/src/components/MachineInputField/MachineInputField.scss

@@ -0,0 +1,44 @@
+.ff-machine-input-field-wrapper {
+  min-width: 100px;
+  height: 32px;
+  position: relative;
+  cursor: pointer;
+
+  .ff-machine-input-field,
+  .ff-machine-input-field-reverse {
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--ff-machine-input-field-border-color);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .ff-machine-icon-text-wrapper,
+    .ff-machine-icon-text-wrapper-reverse {
+      display: flex;
+
+      .ff-machine-icon {
+        margin-right: 8px;
+      }
+    }
+    
+    .ff-machine-icon-text-wrapper-reverse {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .ff-machine-input-field-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .ff-machine-input-label {
+    position: absolute;
+    top: -6px;
+    left: 8px;
+    background-color: var(--ff-machine-input-field-border-color);
+    border-radius: 4px;
+    padding: 1px 2px;
+    height: 10px;
+  }
+}

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MachineInputField from './MachineInputField';
+import { MachineType } from './types';
+
+const meta: Meta<typeof MachineInputField> = {
+  title: 'Components/MachineInputField',
+  component: MachineInputField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MachineInputField>;
+
+// Sample data for the MachineInputField
+const sampleOptions: MachineType[] = [
+  { label: 'Local', type: 'Local' },
+  { label: '121.25.36', type: 'Google Chrome' },
+  { label: '17, iPhone 15', type: 'mac' },
+  { label: 'Samsung Galaxy S23', type: 'android' },
+];
+
+export const Primary: Story = {
+  args: {
+    width: '410px', // Example width
+    options: sampleOptions,
+    runCount: 1,
+  },
+};
+
+export default meta;

package/src/components/MachineInputField/MachineInputField.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+import './MachineInputField.scss';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import { MachineInputFieldProps, MachineType } from './types';
+import classNames from 'classnames';
+
+const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
+  (
+    {
+      width = '',
+      options = [],
+      runCount = 0,
+      className = '',
+      contentReverse = false,
+    },
+    ref
+  ) => {
+    const getIcon: Record<MachineType['type'], string> = {
+      Local: 'browser_stack_icon',
+      mac: 'mac_icon',
+      android: 'android_icon',
+      'Google Chrome': 'chrome_icon',
+    };
+
+    return (
+      <div
+        ref={ref}
+        style={{ width: width }}
+        className={classNames('ff-machine-input-field-wrapper', className)}
+      >
+        <Typography
+          as="span"
+          color="var(--ff-machine-input-field-text-color)"
+          fontSize={8}
+          textAlign="center"
+          className="ff-machine-input-label"
+        >
+          Run {runCount}
+        </Typography>
+
+        <div
+          className={classNames('ff-machine-input-field', {
+            'ff-machine-input-field-reverse': contentReverse,
+          })}
+        >
+          {options.map(({ label, type }) => (
+            <div
+              key={type}
+              className={classNames('ff-machine-icon-text-wrapper', {
+                'ff-machine-icon-text-wrapper-reverse': contentReverse,
+              })}
+            >
+              <Icon name={getIcon[type]} className="ff-machine-icon" />
+              <Typography
+                className="ff-machine-text"
+                color="var(--ff-machine-input-field-text-color)"
+              >
+                {label}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+);
+
+MachineInputField.displayName = 'MachineInputField';
+
+export default MachineInputField;

package/src/components/MachineInputField/index.ts

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

package/src/components/MachineInputField/types.ts

@@ -0,0 +1,12 @@
+export interface MachineType {
+  type: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  label: string;
+}
+
+export interface MachineInputFieldProps {
+  width: string;
+  options: MachineType[];
+  runCount: number;
+  className?: string;
+  contentReverse?: boolean;
+}

package/src/components/MenuOption/MenuOption.scss

@@ -0,0 +1,83 @@
+@use '../../assets/styles/fonts';
+
+.ff-menu-option-container {
+  cursor: pointer;
+  position: relative;
+
+  .ff-icon-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .ff-menuicon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      &.dark {
+        background-color: var(--brand-color);
+        &:hover {
+          background-color: var(--menu-variant-dark-icon-color);
+          svg {
+            path {
+              fill: var(--brand-color);
+            }
+          }
+        }
+      }
+    }
+
+    .ff-menuicon-container-clicked {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--brand-color);
+      cursor: pointer;
+      &:hover {
+        background-color: var(--brand-color);
+      }
+      &.dark {
+        background-color: var(--menu-variant-dark-icon-color);
+      }
+    }
+  }
+
+  .ff-option-card {
+    position: absolute;
+    border: 1px solid var(--option-card-border-color);
+    background: var(--option-card-bg-color);
+    border-radius: 4px;
+    margin: 2px;
+    min-height: 32px;
+    min-width: 111px;
+    z-index: 100000;
+    white-space: nowrap;
+
+    .ff-options {
+      @extend .fontSm;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      line-height: 16px;
+      gap: 8px;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      label {
+        cursor: pointer;
+      }
+    }
+
+    .ff-disable-option {
+      opacity: 0.5;
+      cursor: no-drop;
+      label {
+        cursor: no-drop;
+      }
+    }
+  }
+}