pixel-react 1.10.15 → 1.10.16

package/src/components/IconButton/IconButton.tsx

@@ -1,33 +0,0 @@
-import { forwardRef } from 'react';
-import Icon from '../Icon';
-import './IconButton.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import { IconButtonProps } from './types';
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
-  label,
-  iconName = 'plus_user_icon',
-  onClick,
-}, ref) => {
-  return (
-    <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
-      <div className={classNames('button-icon')}>
-        <Icon
-          height={12}
-          width={12}
-          name={iconName}
-          className={'ff-icon-color'}
-        />
-      </div>
-      <Typography
-        as="div"
-        textAlign="center"
-        className="icon-name"
-        fontWeight="semi-bold"
-      >
-        {label}
-      </Typography>
-    </button>
-  );
-});
-export default IconButton;

package/src/components/IconButton/index.ts

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

package/src/components/IconButton/types.ts

@@ -1,6 +0,0 @@
-export interface IconButtonProps {
-  label: string;
-  iconName: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  ref?: React.Ref<HTMLButtonElement>;
-}

package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx

@@ -1,108 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadioGroup from './IconRadioGroup';
-import { useState } from 'react';
-
-const meta: Meta<typeof IconRadioGroup> = {
-  title: 'Components/IconRadioGroup',
-  component: IconRadioGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof IconRadioGroup>;
-
-export const Default: Story = {
-  render: () => {
-    const radioOptions = [
-      {
-        iconName: 'no_access_icon',
-        iconLabel: 'No Access',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'view_access_icon',
-        iconLabel: 'View Access',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'edit',
-        iconLabel: 'Edit Access',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'full_access_icon',
-        iconLabel: 'Full Access',
-        disabled: false,
-        disableMessage: '',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<string | null>(null);
-
-    const handleOptionChange = (selected: string | null) => {
-      setSelectedOption(selected);
-    };
-
-    return (
-      <IconRadioGroup
-        items={radioOptions}
-        onButtonClick={(selectedItem) => console.log('Selected:', selectedItem)}
-        onChange={handleOptionChange}
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithDisabledOption: Story = {
-  render: () => {
-    const radioOptions = [
-      {
-        iconName: 'no_access_icon',
-        iconLabel: 'No Access',
-        disabled: true,
-        disableMessage: 'user dont have access',
-      },
-      {
-        iconName: 'view_access_icon',
-        iconLabel: 'View',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'edit',
-        iconLabel: 'Edit',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'full_access_icon',
-        iconLabel: 'Full Access',
-        disabled: false,
-        disableMessage: '',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<string | null>(null);
-
-    const handleOptionChange = (selected: string | null) => {
-      setSelectedOption(selected);
-    };
-
-    return (
-      <IconRadioGroup
-        items={radioOptions}
-        onButtonClick={() => {}}
-        onChange={handleOptionChange}
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/IconRadioGroup/IconRadioGroup.tsx

@@ -1,73 +0,0 @@
-import React, { useState, useEffect } from 'react';
-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,
-  onButtonClick,
-  selectedValue: initialSelectedValue = null,
-  onChange,
-  className = '',
-}) => {
-  const [selectedValue, setSelectedValue] = useState<string | null>(
-    initialSelectedValue
-  );
-
-  useEffect(() => {
-    if (initialSelectedValue !== selectedValue) {
-      setSelectedValue(initialSelectedValue);
-    }
-  }, [initialSelectedValue, selectedValue]);
-
-  const handleButtonClick = (item: IconRadioItem) => {
-    if (item.disabled) return;
-
-    const newSelectedValue = item.iconName;
-    setSelectedValue(newSelectedValue);
-
-    if (onChange) {
-      onChange(newSelectedValue);
-    }
-
-    onButtonClick(item);
-  };
-
-  return (
-    <div className={classNames('ff-icon-radio-group', className)}>
-      {items.map((item) => (
-        <div
-          key={item.iconName}
-          className={classNames('ff-icon-radio-button', {
-            selected: selectedValue === item.iconName,
-            disabled: item.disabled,
-          })}
-          onClick={() => handleButtonClick(item)}
-        >
-          <Tooltip title={item.iconLabel}>
-            <div
-              className={classNames('icon-container', {
-                selected: selectedValue === item.iconName,
-              })}
-            >
-              <Icon
-                name={item.iconName}
-                hoverEffect={false}
-                color={
-                  selectedValue === item.iconName
-                    ? 'var(--drawer-footer-bg)'
-                    : 'var(--brand-color)'
-                }
-              />
-            </div>
-          </Tooltip>
-        </div>
-      ))}
-      <div className="line-connector"></div>
-    </div>
-  );
-};
-
-export default IconRadioGroup;

package/src/components/IconRadioGroup/index.ts

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

package/src/components/IconRadioGroup/type.ts

@@ -1,50 +0,0 @@
-export interface IconRadioItem {
-    /**
-     * The unique name for the icon, used to load the corresponding icon.
-     */
-    iconName: string;
-  
-    /**
-     * The display label for the icon. This can be used for accessibility purposes.
-     */
-    iconLabel: string;
-  
-    /**
-     * Flag to determine if the icon option is disabled.
-     */
-    disabled?: boolean;
-  
-    /**
-     * Message to display when the option is disabled.
-     */
-    disableMessage?: string;
-  }
-  
-  export interface IconRadioGroupProps {
-    /**
-     * Array of icon items that make up the radio button group.
-     */
-    items: IconRadioItem[];
-  
-    /**
-     * Callback function called when a button/icon is clicked. 
-     * It returns the selected item.
-     */
-    onButtonClick: (selectedItem: IconRadioItem) => void;
-  
-    /**
-     * The currently selected icon value
-     */
-    selectedValue?: string | null;
-  
-    /**
-     * Callback function to notify parent of selection change.
-     */
-    onChange?: (selected: string | null) => void;
-  
-    /**
-     * Optional className for custom styling
-     */
-    className?: string;
-  }
-  

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

@@ -1,153 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Input from './Input';
-import { ChangeEvent, useState } from 'react';
-
-const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Input>;
-
-const defaultArgs = {
-  name: 'input',
-  label: '',
-  disabled: false,
-  placeholder: 'Enter your name',
-  value: '',
-  type: 'text',
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Name',
-    variant: 'default',
-    type: 'text',
-  },
-};
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Name',
-    variant: 'primary',
-    type: 'text',
-  },
-};
-export const DisabledWithValue: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Name',
-    variant: 'primary',
-    type: 'text',
-    value: 'Disabled',
-    disabled: true,
-    required: true,
-  },
-};
-
-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('');
-    const [error, setError] = useState<boolean>(false);
-    const [helperText, setHelperText] = useState<string>();
-
-    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-      if (event.target) {
-        if (value.length <= 0) {
-          setError(true);
-          setHelperText(`${event?.target?.name} is required`);
-        } else if (value.length >= 10) {
-          setError(true);
-          setHelperText(`Name should be within 10 characters`);
-        } else {
-          setError(false);
-          setHelperText('');
-        }
-      }
-      setValue(value);
-    };
-    return (
-      <>
-        <Input
-          {...defaultArgs}
-          type="text"
-          onChange={onChangeHandler}
-          disabled={false}
-          value={value}
-          name="Name"
-          label="Name"
-          placeholder="Enter name here"
-          variant="primary"
-          required={true}
-          error={error}
-          helperText={helperText}
-          isLabelRequired={false}
-        />
-      </>
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    const [error, setError] = useState<boolean>(false);
-    const [helperText, setHelperText] = useState<string>();
-
-    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.target.value;
-      if (event.target) {
-        if (value.length <= 0) {
-          setError(true);
-          setHelperText(`${event?.target?.name} is required`);
-        } else if (value.length >= 10) {
-          setError(true);
-          setHelperText(`Name should be within 10 characters`);
-        } else {
-          setError(false);
-          setHelperText('');
-        }
-      }
-      setValue(value);
-    };
-    return (
-      <>
-        <Input
-          {...defaultArgs}
-          type="text"
-          onChange={onChangeHandler}
-          disabled={false}
-          value={value}
-          name="Name"
-          label="Name"
-          placeholder="Enter name here"
-          variant="primary"
-          required={true}
-          error={error}
-          helperText={helperText}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;

package/src/components/Input/Input.tsx

@@ -1,126 +0,0 @@
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import './Input.scss';
-import { InputProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      type = 'text',
-      variant = 'primary',
-      name = '',
-      label,
-      disabled = false,
-      required = false,
-      placeholder = 'Enter input',
-      value = '',
-      helperText = '',
-      error,
-      noBorder,
-      className = '',
-      onChange,
-      onBlur,
-      onFocus,
-      autoComplete = 'off',
-      autoFocus = false,
-      minValue = -Infinity,
-      maxValue = Infinity,
-      transparentBackground = false,
-      size = 'small',
-      isLabelRequired = true,
-      onClick,
-      onKeyUp,
-      ...props
-    },
-    ref
-  ) => {
-    const isValueFilled = !checkEmpty(value);
-
-    return (
-      <fieldset
-        className={classNames('ff-input-fieldset', {
-          'ff-input-fieldset--disabled': disabled,
-        })}
-      >
-        <div
-          className={classNames('ff-input-container', {
-            'ff-input-container--float': isValueFilled,
-            'ff-input-container--disabled': !!disabled,
-          })}
-        >
-          {isLabelRequired && (
-            <label
-              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
-                className={classNames(
-                  `ff-input-label ff-input-label--${variant}`,
-                  {
-                    'ff-input-label--no-hover': !!value,
-                    'ff-input-label--disabled': !!disabled,
-                    'ff-input-label--danger': !!error,
-                  }
-                )}
-              >
-                {label}
-              </span>
-            </label>
-          )}
-
-          <input
-            ref={ref} // Forward the ref here
-            name={name}
-            value={value}
-            type={type}
-            spellCheck={false}
-            id={name}
-            className={classNames(
-              `ff-input ff-input-${variant} default-input ff-input--${size}`,
-              {
-                ['ff-input--transparentBackground']: !!transparentBackground,
-                'ff-input--no-hover': !!value,
-                'ff-input--disabled': !!disabled,
-                'ff-input--danger': !!error,
-                'ff-input--no-border': !!noBorder,
-                'ff-input--placeholder': !isLabelRequired,
-              },
-              `${className}`
-            )}
-            placeholder={placeholder}
-            disabled={disabled}
-            onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            autoComplete={autoComplete}
-            autoFocus={autoFocus}
-            min={minValue}
-            max={maxValue}
-            onClick={onClick}
-            onKeyUp={onKeyUp}
-            {...props}
-          />
-
-          {helperText && error && (
-            <span
-              className={classNames('ff-input-message', {
-                'ff-input-message--danger': !!error,
-              })}
-            >
-              {helperText}
-            </span>
-          )}
-        </div>
-      </fieldset>
-    );
-  }
-);
-
-export default Input;

package/src/components/Input/index.ts

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

package/src/components/Input/types.ts

@@ -1,94 +0,0 @@
-export interface InputProps {
-  /**
-   * Name | name of the input field
-   */
-  name: string;
-  /**
-   * Label | field label to be displayed
-   */
-  label?: string;
-  /**
-   * value | input field value
-   */
-  value: string | number;
-  /**
-   * variants to set color/style of the input field
-   */
-  variant?: 'default' | 'primary';
-  /**
-   * type to set color/style of the input field
-   */
-  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
-  /**
-   * 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;
-  /**
-   * noBorder prop 'true' removes border of input
-   */
-  noBorder?: boolean;
-  /**
-   * onChange, onKeyDown, onBlur, onFocus actions
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
-  onBlur?: (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';
-  /**
-   * if true, input field is in autofocus state
-   */
-  autoFocus?: boolean;
-  /**
-   *  minimum and maximum values for the number type input field and their functions
-   */
-  minValue?: number;
-  maxValue?: number;
-  /**
-   * background of the input field prop
-   */
-  transparentBackground?: boolean;
-  /**
-   * size for the input field
-   */
-  size?: 'small' | 'medium';
-  /**
-   * isLabelRequired for the input field without label,showing placeholder
-   */
-  isLabelRequired?: boolean;
-}