pixel-react 1.10.15 → 1.10.16

package/src/components/Paper/Paper.tsx

@@ -1,14 +0,0 @@
-import classNames from 'classnames';
-import './Paper.scss';
-import { PaperProps } from './types';
-
-const Paper = ({ children, className = '', rounded = false }: PaperProps) => {
-  const dynamicClassName = classNames(
-    { ['ff_rounded_lg']: rounded },
-    className
-  );
-
-  return <div className={dynamicClassName}>{children}</div>;
-};
-
-export default Paper;

package/src/components/Paper/index.ts

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

package/src/components/Paper/types.ts

@@ -1,19 +0,0 @@
-export interface PaperProps {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  className?: string;
-  /**
-   * If `true`, rounded corners are Enabled.
-   * @default false
-   */
-  rounded?: boolean;
-}
-
-
-
-

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,3 +0,0 @@
-declare module 'react-phone-input-2' {
-  export * from 'react-phone-input-2';
-}

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import { PhoneInputProps } from './types';
-import PhoneInputField from './PhoneInput';
-
-export default {
-  title: 'Components/PhoneInputComponent',
-  component: PhoneInputField,
-};
-
-const Template = ({
-  value,
-  country,
-  width,
-  onChange,
-  placeholder,
-  onFocus,
-  onBlur,
-  international,
-  enableAreaCodeStretch,
-  defaultCountry,
-  disabled,
-  id,
-}: PhoneInputProps) => {
-  const [phone, setPhone] = useState<string>(value || '');
-  const [valid, setValid] = useState(true);
-
-  const handlePhoneChange = (newPhone: string) => {
-    setPhone(newPhone);
-    const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
-    const phoneIsValid = newPhone.length === validPhoneNumberLength;
-    setValid(phoneIsValid);
-    onChange(newPhone);
-  };
-
-  return (
-    <PhoneInputField
-      value={phone}
-      country={country}
-      onChange={handlePhoneChange}
-      width={width}
-      placeholder={placeholder}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      isValid={valid}
-      international={international}
-      enableAreaCodeStretch={enableAreaCodeStretch}
-      defaultCountry={defaultCountry}
-      disabled={disabled}
-      id={id}
-    />
-  );
-};
-
-// Default story
-export const Default = Template.bind({});
-Default.args = {
-  country: 'IN',
-  value: '91',
-  width: '400px',
-  placeholder: 'Enter phone number',
-  onChange: () => {},
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-  international: true,
-  enableAreaCodeStretch: true,
-  defaultCountry: 'IN',
-  disabled: false,
-  id: 'addPrimaryNumberId',
-};

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,98 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PhoneInput from 'react-phone-input-2';
-import { PhoneInputProps } from './types';
-import Typography from '../Typography';
-import './PhoneInput.scss';
-
-const PhoneInputField: React.FC<PhoneInputProps> = ({
-  country,
-  value,
-  onChange,
-  width = '100%',
-  placeholder = 'Enter phone number',
-  onFocus,
-  onBlur,
-  id,
-  dropdownStyle = {},
-  enableAreaCodeStretch = false,
-  disabled = false,
-}) => {
-  const [phone, setPhone] = useState<string>(value);
-  const [isFocused, setIsFocused] = useState(false);
-  const [error, setError] = useState<string>('');
-
-  useEffect(() => {
-    if (value !== phone) {
-      setPhone(value);
-    }
-  }, [value]);
-
-  const handlePhoneChange = (phone: string) => {
-    const numericPhone = phone.replace(/[^0-9+]/g, '');
-    const countryCode = numericPhone.startsWith('+')
-      ? numericPhone.substring(0, 3)
-      : '';
-    let phoneNumber = numericPhone.replace(countryCode, '');
-
-    let validPhoneNumberLength = 10;
-    if (country === 'IN') {
-      if (phoneNumber.length < validPhoneNumberLength) {
-        setError('Phone number should be exactly 10 digits');
-      } else {
-        setError('');
-      }
-    }
-
-    if (phoneNumber.length <= validPhoneNumberLength) {
-      setPhone(numericPhone);
-      onChange(numericPhone);
-    }
-  };
-
-  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocused(true);
-    if (onFocus) onFocus(event);
-  };
-
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocused(false);
-    if (onBlur) onBlur(event);
-  };
-
-  return (
-    <div id={id}>
-      <PhoneInput
-        specialLabel=""
-        countryCodeEditable={false}
-        country={country}
-        value={phone}
-        onChange={handlePhoneChange}
-        inputStyle={{
-          width,
-          height: '32px',
-          border: isFocused
-            ? '1px solid var(--brand-color)'
-            : error
-            ? '1px solid var(--error_light)'
-            : '1px solid var(--default-color)',
-          borderRadius: '4px',
-          fontSize: '14px',
-          transition: 'border-color 0.3s ease',
-        }}
-        placeholder={placeholder}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        dropdownStyle={dropdownStyle}
-        enableAreaCodeStretch={enableAreaCodeStretch}
-        disabled={disabled}
-      />
-      {error && !isFocused && (
-        <Typography color={'var(--error_light)'} className="error">
-          {error}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default PhoneInputField;

package/src/components/PhoneInput/index.ts

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

package/src/components/PhoneInput/types.ts

@@ -1,16 +0,0 @@
-export interface PhoneInputProps {
-  country: string;
-  value: string;
-  onChange: (phone: string) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  width?: string;
-  placeholder?: string;
-  isValid: any;
-  id: string;
-  international?: boolean;
-  dropdownStyle?: React.CSSProperties;
-  enableAreaCodeStretch?: boolean;
-  defaultCountry?: string;
-  disabled?: boolean;
-}

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -1,67 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import PopUpModal from './PopUpModal';
-import Button from '../Button';
-import Typography from '../Typography';
-
-const meta: Meta<typeof PopUpModal> = {
-  title: 'Components/PopUpModal',
-  component: PopUpModal,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof PopUpModal>;
-
-const defaultArgs = {
-    iconName:"license_warning",
-    titleMessage:"Warning!",
-    subTitleMessage:"Unsaved Changes.",
-    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
-    firstButtonLabel:"Cancel",
-    secondButtonLabel:"Continue",
-    buttonVariant:"warning",
-    border:'1px solid var(--warning-modal-border-color)',
-    colorForTitleMessage: 'var(--status-button-bg-warning)',
-    popupWidth:'420',
-    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>
-}
-
-export const DefaultModal: Story = {
-  args: {
-    isOpen: true,
-    onClose: () => alert('Closed'),
-    onContinue: () => alert('Continued'),
-    iconName: 'license_warning',
-    titleMessage: 'Warning!',
-    subTitleMessage: 'Unsaved Changes.',
-    popupWidth: "420",
-    footerContent:<Typography children='How do you want to proceed?' fontSize={16}/>,
-  },
-};
-
-export const ControlledPopUp: Story = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const handleContinue = () => {
-      alert('Continued!');
-      setIsOpen(false);
-    };
-    return (
-      <>
-        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
-        <PopUpModal
-          {...defaultArgs}
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          onContinue={handleContinue}
-          footerContent={<Typography children='How do you want to proceed?' fontSize={16}/>}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;

package/src/components/PopUpModal/PopUpModal.tsx

@@ -1,87 +0,0 @@
-import { FC } from 'react';
-import './PopUpModal.scss';
-import Modal from '../Modal';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import Button from '../Button';
-import { PopUpModalProps } from './types';
-
-const PopUpModal: FC<PopUpModalProps> = ({
-  isOpen,
-  onClose,
-  onContinue,
-  titleMessage = 'Warning!',
-  subTitleMessage = 'Unsaved Changes.',
-  iconName,
-  modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
-  firstButtonLabel = 'Cancel',
-  secondButtonLabel = 'Continue',
-  buttonVariant = 'warning',
-  border = '1px solid var(--warning-modal-border-color)',
-  popupWidth = '420',
-  colorForTitleMessage = 'var(--status-button-bg-warning)',
-  footerContent,
-}) => {
-  return (
-    <Modal
-      overlayClassName="custom-overlay"
-      isOpen={isOpen}
-      onClose={onClose}
-      isHeaderDisplayed={false}
-      children={
-        <div className={'warning_modal_container'}>
-          <div className={'warning_modal_content'}>
-            <Icon
-              name={iconName}
-              className={'warning_modal_icon'}
-              width={94}
-              height={94}
-            />
-            <div className={'warning_modal_message'}>
-              <Typography
-                fontSize={20}
-                fontWeight="semi-bold"
-                className="warning_modal_title_wrapper"
-              >
-                {' '}
-                <Typography
-                  color={`${colorForTitleMessage}`}
-                  fontSize={20}
-                  fontWeight="semi-bold"
-                >
-                  {' '}
-                  {titleMessage}{' '}
-                </Typography>{' '}
-                {subTitleMessage}
-              </Typography>
-              <div className="warning_modal_message_wrapper">
-                <Typography fontSize={16}>{modalMessage}</Typography>
-                <Typography as='div'>{footerContent}</Typography>
-              </div>
-            </div>
-          </div>
-          <div className={'warning_modal_footer_button'}>
-            <Button
-              variant="secondary"
-              label={firstButtonLabel}
-              onClick={onClose}
-            />
-            <Button
-              variant={buttonVariant || 'warning'}
-              label={secondButtonLabel}
-              onClick={onContinue}
-            />
-          </div>
-        </div>
-      }
-      ariaHideApp
-      isFooterDisplayed={false}
-      customWidth={`${popupWidth}px`}
-      customHeight="226px"
-      boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
-      border={border}
-    />
-  );
-};
-
-export default PopUpModal;

package/src/components/PopUpModal/types.ts

@@ -1,17 +0,0 @@
-export interface PopUpModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onContinue?: () => void;
-  titleMessage: string;
-  subTitleMessage?: string;
-  iconName: string;
-  modalMessage: string | React.ReactNode;
-  secondaryMessage?: string | React.ReactNode;
-  firstButtonLabel?: string;
-  secondButtonLabel: string;
-  buttonVariant: any;
-  border: string;
-  popupWidth?: string;
-  colorForTitleMessage?: string;
-  footerContent?: React.ReactNode;
-}

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import ProgressBar from './ProgressBar';
-
-const meta: Meta<typeof ProgressBar> = {
-  title: 'Components/ProgressBar',
-  component: ProgressBar,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof ProgressBar>;
-
-export const DashBoardProgressBar: Story = {
-  args: {
-    progressPercentage: 75,
-    color: 'var(--brand-color)',
-    label: '200 MB',
-  },
-};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import type { ProgressBarProps } from './types';
-import './ProgressBar.scss';
-import Typography from '../Typography';
-
-const ProgressBar: React.FC<ProgressBarProps> = ({
-  progressPercentage,
-  color = 'var(--brand-color)',
-  trackColor = '#f0f0f0',
-  height = 10,
-  label,
-  labelFontSize = 12,
-  labelTextColor = 'var(--ff-card-status-text-color)',
-  showPercentage = false,
-  percentageFontSize = 10,
-  percentageTextColor = 'var(--tooltip-text-color)',
-}) => {
-  // Ensure progress is between 0 and 100
-  const validProgress = Math.max(0, Math.min(progressPercentage, 100));
-
-  // Bar style for the filled part
-  const barStyle = {
-    width: `${validProgress}%`,
-    backgroundColor: color,
-    height: `${height}px`,
-  };
-
-  // Track style for the empty part of the progress bar
-  const trackStyle = {
-    backgroundColor: trackColor,
-    height: `${height}px`,
-  };
-
-  return (
-    <div className={`ff-progress-bar-container ${label ? 'ff-has-label' : ''}`}>
-      <div className="ff-progress-bar-track" style={trackStyle}>
-        <div className="ff-progress-bar" style={barStyle}>
-          {showPercentage && (
-            <Typography
-              className="ff-progress-bar-percentage"
-              fontSize={percentageFontSize}
-              color={percentageTextColor}
-            >{`${validProgress}%`}</Typography>
-          )}
-        </div>
-      </div>
-      {label && (
-        <Typography
-          as="div"
-          className="ff-progress-bar-label"
-          fontSize={labelFontSize}
-          color={labelTextColor}
-        >
-          {label}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default ProgressBar;

package/src/components/ProgressBar/index.ts

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

package/src/components/ProgressBar/types.ts

@@ -1,12 +0,0 @@
-export interface ProgressBarProps {
-  progressPercentage: number; // The current progress value (0-100)
-  color?: string; // Custom color of the progress bar
-  trackColor?: string; // Custom color of the track (empty part)
-  height?: number;
-  label?: string; // Optional label to display inside or outside the progress bar
-  showPercentage?: boolean; // Whether to show the percentage inside the bar
-  percentageFontSize?: number;
-  percentageTextColor?: string;
-  labelFontSize?: number; // Font size of the label
-  labelTextColor?: string;
-}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import RadioButton from './RadioButton';
-
-const meta: Meta<typeof RadioButton> = {
-  title: 'Components/RadioButton',
-  component: RadioButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof RadioButton>;
-
-export const Default: Story = {
-  args: {
-    label: 'men',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'women',
-    checked: true,
-  },
-};
-export const UncheckedDisabled: Story = {
-  args: {
-    label: 'women',
-    disabled: true,
-  },
-};
-export const CheckedDisabled: Story = {
-  args: {
-    label: 'women',
-    disabled: true,
-    checked: true,
-  },
-};
-
-export const WithoutLabel: Story = {};
-
-export default meta;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import './RadioButton.scss';
-import classNames from 'classnames';
-import Tooltip from '../Tooltip';
-import Typography from '../Typography';
-import RadioButtonProps from './radioButtonTypes';
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-  label,
-  name,
-  checked,
-  onChange,
-  value,
-  disabled = false,
-  showTooltip = false,
-  tooltipChildren = 'Custom JSX',
-  tooltipTitle = 'Custom JSX',
-}) => {
-  return (
-    <div className="ff-radio-wrapper">
-      <label
-        className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
-      >
-        <input
-          disabled={disabled}
-          type="radio"
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={onChange}
-          className="ff-radio-input"
-        />
-        <span className="ff-radio-custom" />
-        <Typography color="var(--text-color)" children={label} />
-      </label>
-      {showTooltip && (
-        <Tooltip title={tooltipTitle} placement="right">
-          {tooltipChildren}
-        </Tooltip>
-      )}
-    </div>
-  );
-};
-
-export default RadioButton;

package/src/components/RadioButton/index.ts

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

package/src/components/RadioButton/radioButtonTypes.tsx

@@ -1,62 +0,0 @@
-import { ReactElement } from 'react';
-
-/**
- * Props for the RadioButton component.
- */
-interface RadioButtonProps {
-  /**
-   * The display label for the radio button.
-   * Optional.
-   */
-  label?: string | ReactElement;
-
-  /**
-   * The name attribute for the radio button, used for grouping.
-   */
-  name: string;
-
-  /**
-   * The unique value of the radio button.
-   * Optional.
-   */
-  value?: string;
-
-  /**
-   * Indicates whether the radio button is checked.
-   * Optional.
-   */
-  checked?: boolean;
-
-  /**
-   * Callback function that is called when the radio button's value changes.
-   * Receives the change event as an argument.
-   * Optional.
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  /**
-   * Indicates whether the radio button is disabled.
-   * Optional.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicates whether the radio button show the tooltip.
-   * Optional.
-   */
-  showTooltip?: boolean;
-
-  /**
-   * The content of the tooltip.
-   * Optional.
-   */
-  tooltipChildren?: React.ReactNode;
-
-  /**
-   * The content of the tooltip.
-   * Optional.
-   */
-  tooltipTitle?: React.ReactNode;
-}
-
-export default RadioButtonProps;