pixel-react 1.0.4 → 1.0.6

package/src/components/DatePicker/Timepicker.tsx

@@ -0,0 +1,372 @@
+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 [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+  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);
+    if (periodRef.current) {
+      const { top, left, height } = periodRef.current.getBoundingClientRect();
+      setDropdownPosition({ top: top + height, left: left });
+    }
+  };
+
+  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"
+              style={{
+                top: `${dropdownPosition.top}px`,
+                left: `${dropdownPosition.left}px`,
+              }}
+              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

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

package/src/components/DatePicker/types.ts

@@ -0,0 +1,100 @@
+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;
+}
+
+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/Drawer/Drawer.scss

@@ -91,7 +91,6 @@
 
     .ff-drawer-body {
       background-color: var(--drawer-footer-bg);
-      padding: 8px;
       height: calc(100vh - 76px);
       overflow: hidden auto;
     }

package/src/components/Drawer/Drawer.tsx

@@ -3,10 +3,10 @@ import { DrawerProps } from './Types.js';
 import Button from '../Button/Button.js';
 import classNames from 'classnames';
 import './Drawer.scss';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import Icon from '../Icon';
 import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
-
+import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';
 const Drawer = ({
   isOpen = true,
   children = 'Drawer content area',
@@ -57,9 +57,10 @@ const Drawer = ({
   };
 
   const drawerSize = isExpanded ? 'x-large' : size;
-
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
   return createPortal(
-    <div className="ff-drawer-container">
+    <div className={classNames('ff-drawer-container', currentTheme)}>
       {overlay && <div className="ff-overlay" />}
 
       <div
@@ -102,16 +103,11 @@ const Drawer = ({
               <div className="ff-drawer-title">{title}</div>
             </div>
             {_isCloseModalButtonVisible && (
-              <div>
-                <button onClick={onClose}>
-                  <Icon
-                    name="info"
-                    height={16}
-                    width={16}
-                    hoverEffect={false}
-                  />
-                </button>
-              </div>
+              <Icon
+                name="close"
+                hoverEffect={false}
+                onClick={onClose}
+              />
             )}
           </div>
         </div>

package/src/components/Icon/iconList.ts

@@ -29,23 +29,27 @@ import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
+import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
+import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
+import ClockIcon from '../../assets/icons/clock_icon.svg?react';
 import Edit from '../../assets/icons/edit_icon.svg?react';
 import ViewIcon from '../../assets/icons/view_icon.svg?react';
-import HideIcon from '../../assets/icons/hide_icon.svg?react';
 import ExportCollection from '../../assets/icons/export_collection_icon.svg?react';
 import RunIcon from '../../assets/icons/run_icon.svg?react';
+import AddVariable from '../../assets/icons/add_variable_icon.svg?react';
 
-import ActiveLicenseIcon from '../../assets/icons/active_license_icon.svg?react';
-import ExpiredLicenseIcon from '../../assets/icons/expired_license_icon.svg?react';
-import ExpiringSoonLicenseIcon from '../../assets/icons/expiringSoon_license_icon.svg?react';
+import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
 import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import InfoIcon from '../../assets/icons/info_icon.svg?react';
+import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
+import HideIcon from '../../assets/icons/hide_icon.svg?react';
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
 Components['warning'] = WarningIcon;
-Components['info'] = ToastInfoIcon;
+Components['toast_info'] = ToastInfoIcon;
 Components['error'] = ToastErrorIcon;
 Components['close'] = ToastCloseIcon;
 Components['more'] = MoreIcon;
@@ -71,16 +75,20 @@ Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
 Components['filter'] = Filter;
+Components['right_arrow_icon'] = RightArrow;
+Components['left_arrow_icon'] = LeftArrow;
+Components['clock_icon'] = ClockIcon;
 Components['edit'] = Edit;
 Components['view_icon'] = ViewIcon;
-Components['hide_icon'] = HideIcon;
 Components['export_collection'] = ExportCollection;
 Components['run_icon'] = RunIcon;
-Components['active_license_icon'] = ActiveLicenseIcon;
-Components['expired_license_icon'] = ExpiredLicenseIcon;
-Components['expiringSoon_license_icon'] = ExpiringSoonLicenseIcon;
+Components['license'] = LicenseIcon;
 Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
+Components['add_variable'] = AddVariable;
+Components['info'] = InfoIcon;
+Components['calendar_icon'] = CalendarIcon;
+Components['hide_icon'] = HideIcon;
 
 export default Components;

package/src/components/{AddButton/AddButton.scss → IconButton/IconButton.scss}

@@ -15,7 +15,9 @@
   padding: 2px 8px 2px 2px;
   border: 1px solid transparent;
   .ff-icon-color {
-    color: var(--primary-icon-color);
+    path {
+      color: var(--primary-icon-color);
+    }
   }
   .icon-name {
     min-width: 33px;
@@ -32,7 +34,9 @@
       color: var(--secondary-icon-color);
     }
     .ff-icon-color {
-      color: var(--secondary-icon-color);
+      path {
+        color: var(--secondary-icon-color);
+      }
     }
   }
 }

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconButton>;
+
+export const PrimaryIconButton: Story = {
+  render: () => {
+    const name = 'Project';
+    const icon = 'plus_icon';
+    const onClick = () => {};
+
+    return <IconButton label={name} iconName={icon} onClick={onClick} />;
+  },
+};
+
+export default meta;

package/src/components/{AddButton/AddButton.tsx → IconButton/IconButton.tsx}

@@ -1,25 +1,28 @@
 import React from 'react';
 import Icon from '../Icon';
-import './AddButton.scss';
+import './IconButton.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
-import { AddButtonProps } from './types';
+import { IconButtonProps } from './types';
 
-const AddButton: React.FC<AddButtonProps> = ({ name, onClick }) => {
+const IconButton: React.FC<IconButtonProps> = ({
+  label,
+  iconName = 'plus_icon',
+  onClick,
+}) => {
   return (
     <button onClick={onClick} className={classNames('ff-plus-icon')}>
       <Icon
         height={20}
         width={20}
-        name={'plus_icon'}
-        color=''
+        name={iconName}
         className={'ff-icon-color'}
       />
       <Typography as="div" textAlign="center" className="icon-name">
-        {name}
+        {label}
       </Typography>
     </button>
   );
 };
 
-export default AddButton;
+export default IconButton;

package/src/components/IconButton/index.ts

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

package/src/components/{AddButton → IconButton}/types.ts

@@ -1,4 +1,5 @@
-export interface AddButtonProps {
-  name: string;
+export interface IconButtonProps {
+  label: string;
+  iconName: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }