pixel-react 1.10.15 → 1.10.16

package/src/components/DatePicker/Timepicker.tsx

@@ -1,360 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Typography from '../Typography';
-import { TimePickerProps } from './types';
-import Icon from '../Icon';
-import classNames from 'classnames';
-import { convertTo24Hour } from '../../assets/utils/functionUtils';
-import { convertTo12Hour } from '../../assets/utils/functionUtils';
-import { isValid12HourTime } from '../../assets/utils/functionUtils';
-
-const TimePicker: React.FC<TimePickerProps> = ({
-  value,
-  onChange,
-  minTime,
-  maxTime,
-  onErrorChange,
-}) => {
-  const [inputValue, setInputValue] = useState<string>('');
-  const [period, setPeriod] = useState<string | undefined>('AM');
-  const [timeFieldError, setTimeFieldError] = useState<boolean>(false);
-  const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const periodRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (value) {
-      const time12h = convertTo12Hour(value);
-      const [time, periodValue] = time12h.split(' ') as [string, 'AM' | 'PM'];
-      setInputValue(time);
-      setPeriod(periodValue);
-
-      setTimeFieldError(!isTimeWithInBounds(time12h, minTime, maxTime));
-    }
-  }, [value, minTime, maxTime]);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        isPeriodDropdownOpen &&
-        periodRef.current &&
-        !periodRef.current.contains(e.target as Node)
-      ) {
-        setIsPeriodDropdownOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isPeriodDropdownOpen]);
-
-  useEffect(() => {
-    onErrorChange(timeFieldError);
-  }, [timeFieldError]);
-
-  const generateTimeOptions = (): string[] => {
-    const options: string[] = [];
-    const start = 0;
-    const end = 23 * 60 + 45;
-    const interval = 15;
-
-    for (let i = start; i <= end; i += interval) {
-      const hours = Math.floor(i / 60);
-      const minutes = i % 60;
-      const period = hours >= 12 ? 'PM' : 'AM';
-      const displayHour = hours % 12 || 12;
-      const displayMinutes = minutes < 10 ? '0' + minutes : minutes;
-      options.push(`${displayHour}:${displayMinutes} ${period}`);
-    }
-    return options;
-  };
-
-  const timeOptions = generateTimeOptions();
-
-  const isTimeWithInBounds = (
-    time: string,
-    minTime?: string,
-    maxTime?: string
-  ): boolean => {
-    const [hours = 0, minutes = 0] = convertTo24Hour(time)
-      .split(':')
-      .map(Number);
-    const timeValue = hours * 60 + minutes;
-
-    if (minTime) {
-      const [minHours = 0, minMinutes = 0] = minTime.split(':').map(Number);
-      const minValue = minHours * 60 + minMinutes;
-      if (timeValue < minValue) return false;
-    }
-
-    if (maxTime) {
-      const [maxHours = 0, maxMinutes = 0] = maxTime.split(':').map(Number);
-      const maxValue = maxHours * 60 + maxMinutes;
-      if (timeValue > maxValue) return false;
-    }
-
-    return true;
-  };
-
-  const handleTimeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let [hourSection, minuteSection] = inputValue.split(':');
-    let [newHour, newMinute] = event.target.value.split(':');
-    const selectionStart = inputRef.current?.selectionStart ?? 0;
-
-    // Handle hour part input
-    if (selectionStart <= 2) {
-      const currentHour = parseInt(hourSection ?? '0') || 0;
-
-      if (newHour?.length === 1) {
-        hourSection = currentHour
-          ? hourSection?.slice(-1) + newHour
-          : `0${newHour}`; // Single digit input
-      } else {
-        hourSection = newHour?.padStart(2, '0'); // Two digits for hour
-      }
-
-      // Ensure hour part is valid (between 1 and 12)
-      let parsedHour = parseInt(hourSection ?? '0') || 0;
-      if (parsedHour > 12) {
-        parsedHour = parseInt(newHour ?? '0'); // Fix if hour exceeds 12
-      }
-
-      hourSection = parsedHour.toString().padStart(2, '0');
-
-      // Move to minute part if hour is greater than 1, otherwise stay on hour
-      if (parsedHour > 1) {
-        setTimeout(() => {
-          inputRef.current?.setSelectionRange(3, 5); // Move to minute part
-        }, 0);
-      } else {
-        setTimeout(() => {
-          inputRef.current?.setSelectionRange(0, 2); // Keep cursor on hour part
-        }, 0);
-      }
-    }
-
-    // Handle minute part input
-    if (selectionStart >= 3) {
-      const currentMinute = parseInt(minuteSection ?? '0') || 0;
-
-      if (newMinute?.length === 1) {
-        minuteSection = currentMinute
-          ? minuteSection?.slice(-1) + newMinute
-          : `0${newMinute}`; // Single digit input
-      } else {
-        minuteSection = newMinute?.padStart(2, '0'); // Two digits for minute
-      }
-
-      // Ensure minute part is valid (between 00 and 59)
-      let parsedMinute = parseInt(minuteSection ?? '0') || 0;
-      if (parsedMinute > 59) {
-        parsedMinute = parseInt(newMinute ?? '0'); // Fix if minute exceeds 59
-      }
-
-      minuteSection = parsedMinute.toString().padStart(2, '0');
-
-      if (parsedMinute < 6) {
-        setTimeout(() => {
-          inputRef.current?.setSelectionRange(3, 5); // Keep cursor on minute part
-        }, 0);
-      }
-    }
-
-    setInputValue(`${hourSection}:${minuteSection}`);
-    if (isValid12HourTime(`${hourSection}:${minuteSection}`)) {
-      const time24h = convertTo24Hour(
-        `${hourSection}:${minuteSection} ${period}`
-      );
-      onChange(time24h);
-      setTimeFieldError(false);
-    } else {
-      setTimeFieldError(true);
-    }
-  };
-
-  const togglePeriodDropdown = () => {
-    setIsPeriodDropdownOpen((prev) => !prev);
-  };
-
-  const handlePeriodChange = (option: string) => {
-    setPeriod(option);
-    const time24h = convertTo24Hour(`${inputValue} ${option}`);
-    onChange(time24h);
-    setIsPeriodDropdownOpen(false);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const { key } = event;
-    const selectionStart = inputRef.current?.selectionStart ?? 0;
-    const selectionEnd = inputRef.current?.selectionEnd ?? 0;
-    let [hourSection, minuteSection] = inputValue.split(':');
-
-    if (key === 'Backspace' && selectionStart <= 2) {
-      event.preventDefault();
-      hourSection = 'HH';
-      setInputValue(`${hourSection}:${minuteSection}`);
-      setTimeout(() => inputRef.current?.setSelectionRange(0, 2), 0);
-      setTimeFieldError(true);
-    }
-
-    if (key === 'Backspace' && selectionStart >= 3) {
-      event.preventDefault();
-      minuteSection = 'MM';
-      setInputValue(`${hourSection}:${minuteSection}`);
-      setTimeout(() => inputRef.current?.setSelectionRange(3, 5), 0);
-      setTimeFieldError(true);
-    }
-
-    if (key === 'ArrowRight') {
-      if (selectionEnd === 2) {
-        event.preventDefault();
-        inputRef.current?.setSelectionRange(3, 5);
-      } else if (selectionStart === 0) {
-        event.preventDefault();
-        inputRef.current?.setSelectionRange(0, 2);
-      }
-    }
-
-    if (key === 'ArrowLeft') {
-      if (selectionStart === 3) {
-        event.preventDefault();
-        inputRef.current?.setSelectionRange(0, 2);
-      } else if (selectionStart === 5) {
-        event.preventDefault();
-        inputRef.current?.setSelectionRange(3, 5);
-      }
-    }
-  };
-
-  const handleFocus = () => {
-    if (inputValue === '') {
-      setInputValue('HH:MM');
-    }
-    setTimeout(() => {
-      inputRef.current?.setSelectionRange(0, 2);
-    }, 0);
-  };
-
-  const handleBlur = () => {
-    if (inputValue === 'HH:MM') {
-      setInputValue('');
-    }
-  };
-
-  const handleClick = () => {
-    const selectionStart = inputRef.current?.selectionStart ?? 0;
-    if (selectionStart >= 3) {
-      inputRef.current?.setSelectionRange(3, 5);
-    } else {
-      inputRef.current?.setSelectionRange(0, 2);
-    }
-  };
-
-  const handleTimeOptionClick = (time: string) => {
-    const [timeValue, periodValue] = time.split(' ') as [string, 'AM' | 'PM'];
-    setInputValue(timeValue);
-    setPeriod(periodValue);
-    const time24h = convertTo24Hour(`${timeValue} ${periodValue}`);
-    onChange(time24h);
-    setTimeFieldError(false);
-  };
-
-  return (
-    <div className="ff-time-picker-container">
-      <div className="ff-time-picker-fields">
-        <div
-          className={classNames(
-            'ff-time-input-container',
-            { 'ff-time-input-container--float': !!inputValue },
-            { 'ff-time-input-container--danger': !!timeFieldError }
-          )}
-        >
-          <Typography
-            as="label"
-            htmlFor="time"
-            className={classNames('ff-time-input-label', {
-              'ff-time-input-label--danger': !!timeFieldError,
-            })}
-          >
-            Time
-          </Typography>
-          <input
-            name="time"
-            ref={inputRef}
-            type="text"
-            id="time-input"
-            value={inputValue}
-            inputMode="numeric"
-            placeholder="HH:MM"
-            onChange={handleTimeInput}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onClick={handleClick}
-            onBlur={handleBlur}
-            maxLength={5}
-            className={classNames('ff-time-input', {
-              'ff-time-input--danger': !!timeFieldError,
-            })}
-          />
-        </div>
-        <div
-          className={classNames('ff-time-period-container', {
-            'ff-time-period-container--active': !!isPeriodDropdownOpen,
-          })}
-          ref={periodRef}
-        >
-          <div
-            onClick={togglePeriodDropdown}
-            className="ff-time-period-select"
-            aria-haspopup="listbox"
-            aria-expanded={isPeriodDropdownOpen}
-          >
-            <Typography>{period}</Typography>
-            <Icon
-              name={isPeriodDropdownOpen ? 'arrow_up' : 'arrow_down'}
-              className="ff-time-period-icon"
-              height={12}
-              width={12}
-            />
-          </div>
-
-          {isPeriodDropdownOpen && (
-            <ul className="ff-time-period-options" role="listbox">
-              <Typography
-                as="li"
-                className="ff-option-item"
-                onClick={() => handlePeriodChange('AM')}
-                aria-selected={period === 'AM'}
-              >
-                AM
-              </Typography>
-              <Typography
-                as="li"
-                className="ff-option-item"
-                onClick={() => handlePeriodChange('PM')}
-                aria-selected={period === 'PM'}
-              >
-                PM
-              </Typography>
-            </ul>
-          )}
-        </div>
-      </div>
-      <div className="ff-time-picker-options">
-        {timeOptions
-          .filter((time) => isTimeWithInBounds(time, minTime, maxTime))
-          .map((time, index) => (
-            <div
-              key={index}
-              className="ff-time-option"
-              onClick={() => handleTimeOptionClick(time)}
-            >
-              <Typography lineHeight="18px" textAlign="center">
-                {time}
-              </Typography>
-            </div>
-          ))}
-      </div>
-    </div>
-  );
-};
-
-export default TimePicker;

package/src/components/DatePicker/index.ts

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

package/src/components/DatePicker/types.ts

@@ -1,109 +0,0 @@
-export interface DatePickerProps {
-  /**
-   * The minimum selectable date.
-   */
-  minDate?: DateValue;
-
-  /**
-   * The maximum selectable date.
-   */
-  maxDate?: DateValue;
-
-  /**
-   * Selected date value.
-   */
-  value?: DateValue;
-
-  /**
-   * Function to handle date selection.
-   */
-  onChange: (value: DateValue) => void;
-
-  /**
-   * Placeholder text for the input field.
-   */
-  placeholder?: string;
-
-  /**
-   * Disables the date picker.
-   */
-  disabled?: boolean;
-
-  /**
-   * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
-   */
-  dateFormat?: string;
-
-  /**
-   * Format for displaying the selected time. Default is 'hh:mm a'.
-   */
-  timeFormat?: string;
-
-  /**
-   * Timezone for the date picker.
-   */
-  timezone?: string;
-
-  /**
-   * Custom width for the calendar. This will override the default width of the calendar.
-   */
-  calendarWidth?: number;
-
-  /**
-   * When true, displays the input field error.
-   */
-  error?: boolean;
-
-  /**
-   * Helper text to display below the input field, used for error messages or instructions.
-   */
-  helperText?: string | undefined;
-
-  /**
-   * Select only date .
-   */
-  dateOnly?: boolean;
-
-  className?: string;
-
-  zIndex?: number; 
-}
-
-export type DateValue = Date | undefined;
-
-export interface CustomCaptionProps {
-  children?: React.ReactNode; // You can use ReactNode as a fallback for dynamic content
-}
-
-export interface CustomCalenderButtonProps {
-  className?: string;
-  disabled?: boolean | undefined;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export interface TimePickerProps {
-  /**
-   * The current time value, in string format (e.g., '14:30').
-   */
-  value: string;
-
-  /**
-   * Function to handle time selection changes, receiving the selected time as a string.
-   */
-  onChange: (time: string) => void;
-
-  /**
-   * The minimum selectable time, used to restrict the earliest selectable time.
-   */
-  minTime?: string;
-
-  /**
-   * The maximum selectable time, used to restrict the latest selectable time.
-   */
-  maxTime?: string;
-
-  /**
-   * Function to handle error state changes, receiving a boolean indicating the presence of an error.
-   */
-  onErrorChange: (error: boolean) => void;
-}

package/src/components/DownloadClient/DownloadClient.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DownloadClient from './DownloadClient';
-import './DownloadClient.scss';
-
-const meta: Meta<typeof DownloadClient> = {
-  title: 'Components/DownloadClient',
-  component: DownloadClient,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof DownloadClient>;
-
-export const Default: Story = {
-  args: {
-    onClose: () => {},
-    top: '50%',
-    left: '50%',
-    className: 'ff-download-client-stories',
-    onClick: () => {},
-  },
-};
-
-export default meta;

package/src/components/DownloadClient/DownloadClient.tsx

@@ -1,90 +0,0 @@
-import { useEffect } from 'react';
-import './DownloadClient.scss';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import { DownloadClientProps } from './type';
-
-const DownloadClient: React.FC<DownloadClientProps> = ({
-  onClose,
-  top = '100px',
-  left = '0px',
-  className,
-  description = 'Download and Install the fireflink client to run the script',
-  onClick = () => {},
-  optionZIndex = 10000001,
-}) => {
-  useEffect(() => {
-    const handleCloseDownloadClient = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose?.();
-      }
-    };
-    document.addEventListener('keydown', handleCloseDownloadClient);
-    return () => {
-      document.removeEventListener('keydown', handleCloseDownloadClient);
-    };
-  }, [onClose]);
-
-  const osVersion = ['windows', 'mac_icon', 'linux'];
-
-  return (
-    <div
-      className={`ff-download-client-wrapper ${className}`}
-      style={{ top: top, left: left, zIndex: optionZIndex }}
-    >
-      <div className="ff-download-client-header-wrapper">
-        <div className="ff-download-client-hollow-triangle"></div>
-        <Typography
-          fontWeight="semi-bold"
-          lineHeight="32px"
-          className="ff-download-client-header-text"
-        >
-          Download client
-        </Typography>
-        <Icon
-          name="close"
-          color="var(--brand-color)"
-          className="ff-download-client-close-icon"
-          height={12}
-          width={12}
-        />
-      </div>
-
-      <div className="ff-download-client-content-text">
-        <Typography
-          as="div"
-          color="var(--download-client-content-text-color)"
-          fontWeight="semi-bold"
-          textAlign="center"
-          lineHeight="26px"
-        >
-          {description}
-        </Typography>
-        <Typography
-          as="div"
-          className="ff-download-client-description-text"
-          textAlign="center"
-          fontWeight="medium"
-          lineHeight='26px'
-        >
-          Choose OS to Download
-        </Typography>
-
-        <div className="ff-download-client-os-wrapper">
-          {osVersion.map((os) => (
-            <div
-              className="ff-os-version-wrapper"
-              onClick={() => {
-                onClick(os === 'mac_icon' ? 'mac' : os);
-              }}
-            >
-              <Icon name={os} height={36} width={36} />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DownloadClient;

package/src/components/DownloadClient/index.ts

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

package/src/components/DownloadClient/type.ts

@@ -1,33 +0,0 @@
-export interface DownloadClientProps {
-  /**
-   * Close dialog function to close the modal dialog
-   **/
-  onClose: () => void;
-
-  /**
-   * distance between modal dialog and parent from top
-   **/
-  top?: string;
-
-  /**
-   * distance between modal dialog and parent from left
-   **/
-  left?: string;
-
-  /**
-   * To be used custom properties for the modal dialog through className
-   **/
-  className?: string;
-
-  /**
-   * Description of the dialog box
-   **/
-  description?: string;
-
-  /**
-   * Download button function
-   **/
-  onClick?: (os: string) => void;
-
-  optionZIndex?: number;
-}

package/src/components/DragAndDrop/DragAndDrop.d.ts

@@ -1,5 +0,0 @@
-declare module 'DragAndDrop' {
-  export * from '@dnd-kit/core';
-  export * from '@dnd-kit/sortable';
-  export * from '@dnd-kit/utilities';
-}

package/src/components/DragAndDrop/DragAndDrop.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DragAndDropList from './DragAndDropList';
-
-const meta: Meta<typeof DragAndDropList> = {
-  title: 'Components/DragAndDrop',
-  component: DragAndDropList,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `It is a drag and drop list component that allows users to reorder items by dragging and dropping them. Library used is dnd-kit/core, dnd-kit/sortable, dnd-kit/utilities`,
-        story:
-          'This is a link of [dnd-kit library](https://www.npmjs.com/package/@dnd-kit/core) for reference to an external website.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof DragAndDropList>;
-
-export const Primary: Story = {
-  render: () => <DragAndDropList />,
-};
-export default meta;

package/src/components/DragAndDrop/DragAndDrop.ts

@@ -1,7 +0,0 @@
-import * as DNDCore from '@dnd-kit/core';
-import * as DNDSortable from '@dnd-kit/sortable';
-import * as DNDUtilities from '@dnd-kit/utilities';
-
-const DragAndDrop = { DNDCore, DNDSortable, DNDUtilities };
-
-export default DragAndDrop;