pixel-react 1.10.15 → 1.10.16

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

@@ -1,169 +0,0 @@
-import React from 'react';
-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 | string>(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(event.target.value);
-
-      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

@@ -1,140 +0,0 @@
-import { forwardRef } from 'react';
-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 = forwardRef<HTMLInputElement, InputWithDropdownProps>(
-  (
-    {
-      name = '',
-      label,
-      value,
-      disabled = false,
-      required = false,
-      placeholder,
-      error,
-      helperText,
-      optionsList,
-      selectedOption = { label: '', value: '' },
-      autoComplete = 'off',
-      onDropdownChangeHandler = () => { },
-      onInputChangeHandler,
-      onInputBlurHandler,
-      onClick,
-      onKeyUp,
-      onFocus,
-      optionsRequired = true,
-      dropdownPosition = 'right',
-      type = 'text',
-      leftDropDownPositionZindex,
-      rightDropDownPositionZindex
-    },
-    ref
-  ) => {
-    const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
-
-    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,
-            [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
-          })}
-        >
-          {dropdownPosition === 'left' && (
-            <>
-              <Select
-                optionsList={optionsList}
-                selectedOption={selectedOption}
-                showLabel={false}
-                showBorder={false}
-                onChange={onDropdownChangeHandler}
-                disabled={disabled || !optionsRequired}
-                optionZIndex={leftDropDownPositionZindex}
-                optionsRequired={optionsRequired}
-                className={classNames('ff-floating-dropdown', {
-                  'ff-floating-dropdown--disabled': !!disabled,
-                  'ff-floating-dropdown--error': !!error,
-                  'ff-floating-dropdown--left': dropdownPosition === 'left',
-                })}
-                width={94}
-                height={30}
-              />
-              <div className="seperatorline" />
-            </>
-          )}
-          <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={required}
-            >
-              {label}
-            </Typography>
-            <input
-              ref={ref}
-              name={name}
-              type={type}
-              id={name}
-              value={value}
-              onChange={onInputChangeHandler}
-              onBlur={onInputBlurHandler}
-              placeholder={placeholder}
-              autoComplete={autoComplete}
-              required={required}
-              disabled={disabled}
-              onClick={onClick}
-              onKeyUp={onKeyUp}
-              onFocus={onFocus}
-              className={classNames('ff-floating-input', {
-                'ff-floating-input--filled': isValueFilled,
-                'ff-floating-input--disabled': !!disabled,
-                'ff-floating-input--error': !!error,
-                'ff-floating-input--left-dropdown': dropdownPosition === 'left',
-              })}
-            />
-          </div>
-          {dropdownPosition === 'right' && (
-            <Select
-              optionsList={optionsList}
-              selectedOption={selectedOption}
-              showLabel={false}
-              showBorder={false}
-              optionZIndex={rightDropDownPositionZindex
-              }
-              onChange={onDropdownChangeHandler}
-              disabled={disabled || !optionsRequired}
-              optionsRequired={optionsRequired}
-              className={classNames('ff-floating-dropdown', {
-                'ff-floating-dropdown--disabled': !!disabled,
-                'ff-floating-dropdown--error': !!error,
-              })}
-              width={120}
-              height={30}
-            />
-          )}
-        </fieldset>
-        {error && helperText && (
-          <span className="ff-helper-text">{helperText}</span>
-        )}
-      </div>
-    );
-  }
-);
-
-export default InputWithDropdown;

package/src/components/InputWithDropdown/index.ts

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

package/src/components/InputWithDropdown/types.ts

@@ -1,121 +0,0 @@
-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?: string | number;
-
-  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
-
-  /**
-   * 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: any) => void;
-
-  /**
-   * onInputBlurHandler action for input field
-   */
-  onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
-
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
-
-  onKeyUp?: (event: React.KeyboardEvent<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;
-
-  dropdownPosition?: 'left' | 'right';
-  leftDropDownPositionZindex?: number;
-  rightDropDownPositionZindex?: number;
-}

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

@@ -1,198 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import LabelEditTextField from './LabelEditTextField';
-import '../../assets/styles/_colors.scss';
-import './LabelEditTextField.scss';
-
-const meta: Meta<typeof LabelEditTextField> = {
-  title: 'Components/LabelEditTextField',
-  component: LabelEditTextField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof LabelEditTextField>;
-export const textField: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      return inputValue;
-    };
-    return (
-      <LabelEditTextField
-        label="Add Module"
-        text="Verify The Function Of Categories For" //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-        }}
-        height="22px"
-        confirmAction={handleConfirmAction}
-        onClick={() => {}}
-        tooltip={{
-          tooltipTitle: 'text',
-          tooltipPlacement: 'bottom',
-        }}
-      />
-    );
-  },
-};
-export const textFieldWithOutLabel: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      return inputValue;
-    };
-    return (
-      <LabelEditTextField
-        text="Verify The Function Of Categories For" //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-        }}
-        width="300px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-      />
-    );
-  },
-};
-export const openTextFieldWithOutLabel: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      return inputValue;
-    };
-    return (
-      <LabelEditTextField
-        text="Verify The Function Of Categories For" //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-        }}
-        width="300px"
-        height="22px"
-        isOpen={true}
-        confirmAction={handleConfirmAction}
-      />
-    );
-  },
-};
-export const textFieldWithDropdown: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      return { inputValue, dropdownValue };
-    };
-    return (
-      <LabelEditTextField
-        label="Add Module"
-        text="Verify The Function Of Categories For"
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-        }}
-        variant="textFieldWithDropdown"
-        dropdownData={[
-          { id: 1, value: 'web', label: 'Web & Mobile' },
-          { id: 2, value: 'desktop', label: 'Desktop' },
-        ]}
-        width="300px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-      />
-    );
-  },
-};
-export const textFieldWithHighlight: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      return { inputValue, dropdownValue };
-    };
-    return (
-      <LabelEditTextField
-        label="Add Module"
-        text="Verify The Function Of Categories For"
-        highlightText="The Function"
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-        }}
-        variant="textFieldWithDropdown"
-        dropdownData={[
-          { id: 1, value: 'web', label: 'Web & Mobile' },
-          { id: 2, value: 'desktop', label: 'Desktop' },
-        ]}
-        width="400px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-      />
-    );
-  },
-};
-export const openLabelEditTextField: Story = {
-  render: () => {
-    const [demoText, setDemoText] = useState('Verify The');
-    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      setDemoText(inputValue);
-      console.info(
-        'Confirmed input value and dropdown value:',
-        inputValue,
-        dropdownValue
-      );
-    };
-    const handleInputChange = (newInputValue: string) => {
-      setDemoText(newInputValue); // Update parent state
-    };
-    console.log('demoText: ', demoText);
-    return (
-      <LabelEditTextField
-        label="Add Module"
-        text={demoText}
-        highlightText="The Function"
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-        }}
-        width="400px"
-        height="22px"
-        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;