@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/Combobox/Combobox.js.flow

@@ -1,287 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {Dropdown} from '../Dropdown';
-import type {IconType} from '../Icon';
-import type {InputOnChangeParamsType} from '../Input';
-import {Input} from '../Input';
-import type {MenuOption, MenuProps} from '../Menu';
-import {BodySmall, FormLabelSmall} from '../Text';
-
-import css from './Combobox.module.css';
-
-
-type InputClassNames = $ReadOnly<{
-  box?: string,
-  iconLeft?: string,
-  iconRight?: string,
-  wrapper?: string,
-}>;
-
-type DropdownClassNames = $ReadOnly<{
-  wrapper?: string,
-  box?: string,
-  iconRight?: string,
-}>;
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  box?: string,
-  input?: InputClassNames,
-  dropdown?: DropdownClassNames,
-}>;
-
-export type ComboboxProps = {
-  /* Combobox props */
-  classNames?: ClassNames,
-  disabled?: boolean,
-  type?: 'text' | 'tel',
-  label?: string | React.Node,
-  size?: 'medium' | 'small',
-  onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  locked?: boolean,
-  error?: boolean,
-  errorText?: string,
-  helperText?: string | React.Node,
-  required?: boolean,
-  readOnly?: boolean,
-  boxRef?: (?HTMLElement) => mixed,
-  value: {dropdown?: string, input?: string},
-  onChange: ({
-    input: string,
-    dropdown: string,
-    inputChange?: InputOnChangeParamsType,
-    dropdownOption?: MenuOption,
-  }) => mixed,
-
-  /* Input props */
-  inputPlaceholder?: string,
-  onInputFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onInputBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onInputKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  onInputContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  inputName?: string,
-  iconLeftName?: string,
-  iconLeftType?: IconType,
-  iconRightName?: string,
-  iconRightType?: IconType,
-  onIconRightClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  inputBoxRef?: (?HTMLElement) => mixed,
-  minLength?: string,
-  maxLength?: string,
-  pattern?: string,
-  min?: string,
-  max?: string,
-
-  /* Dropdown props */
-  menu?: MenuProps,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-  scrollMenuToBottom?: boolean,
-  onDropdownFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onDropdownBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onDropdownKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  onDropdownContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  dropdownName?: string,
-  dropdownPlaceholder?: string,
-  dropdownBoxRef?: (?HTMLElement) => mixed,
-  ...
-};
-
-export const Combobox: React$AbstractComponent<ComboboxProps, HTMLDivElement> =
-  React.forwardRef<ComboboxProps, HTMLDivElement>(
-    (props: ComboboxProps, ref) => {
-      const {
-        value,
-        onChange,
-        classNames,
-        disabled,
-        type = 'text',
-        label,
-        inputPlaceholder,
-        size = 'medium',
-        onContainerClick,
-        onInputFocus,
-        onInputBlur,
-        onInputKeyDown,
-        onInputContainerClick,
-        inputName,
-        locked,
-        error,
-        errorText,
-        helperText,
-        required,
-        iconLeftName,
-        iconLeftType,
-        iconRightName,
-        iconRightType,
-        onIconRightClick,
-        readOnly,
-        boxRef,
-        inputBoxRef,
-        minLength,
-        maxLength,
-        pattern,
-        min,
-        max,
-        menu,
-        onMenuOpen,
-        onMenuClose,
-        scrollMenuToBottom,
-        onDropdownFocus,
-        onDropdownBlur,
-        onDropdownKeyDown,
-        onDropdownContainerClick,
-        dropdownName,
-        dropdownPlaceholder,
-        dropdownBoxRef,
-      } = props;
-
-      const inputRef = React.useRef();
-      const dropdownRef = React.useRef();
-
-      const {input: inputValue, dropdown: dropdownInputText} = value;
-
-      const handleInputChange = (evt, isEnter) => {
-        onChange({
-          dropdown: dropdownInputText || '',
-          input: evt.target.value,
-          inputChange: {evt, isEnter},
-        });
-      };
-
-      const handleDropdownChange = (option) => {
-        onChange({
-          dropdown: option.label || '',
-          input: inputValue || '',
-          dropdownOption: option,
-        });
-      };
-
-      /* Handling locked functionality at Combobox level */
-      React.useEffect(() => {
-        if (locked) {
-          inputRef.current && (inputRef.current.disabled = true);
-          dropdownRef.current && (dropdownRef.current.disabled = true);
-        } else {
-          inputRef.current && (inputRef.current.disabled = false);
-          dropdownRef.current && (dropdownRef.current.disabled = false);
-        }
-      }, [locked]);
-
-      return (
-        <div ref={ref} className={classify(css.wrapper, classNames?.wrapper)}>
-          {Boolean(label) && (
-            <div className={css.info}>
-              <div className={css.infoContent}>
-                <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
-                &nbsp;
-                {required && <FormLabelSmall color="danger">*</FormLabelSmall>}
-              </div>
-            </div>
-          )}
-          <div
-            className={classify(
-              css.box,
-              {
-                [css.withError]: error ?? false,
-              },
-              classNames?.box,
-            )}
-            onClick={!(disabled || locked) ? onContainerClick : null}
-            ref={boxRef}
-          >
-            <Dropdown
-              ref={dropdownRef}
-              menu={menu}
-              boxRef={dropdownBoxRef}
-              placeholder={dropdownPlaceholder}
-              readOnly={readOnly}
-              classNames={{
-                wrapper: classify(
-                  css.dropdownWrapper,
-                  classNames?.dropdown?.wrapper,
-                ),
-                box: classify(
-                  css.dropdownBox,
-                  {
-                    [css.disabled]: disabled ?? null,
-                    [css.locked]: locked ?? null,
-                  },
-                  classNames?.dropdown?.box,
-                ),
-                iconRight: css.chevron,
-              }}
-              disabled={disabled}
-              size={size}
-              onMenuOpen={onMenuOpen}
-              onMenuClose={onMenuClose}
-              onChange={handleDropdownChange}
-              scrollMenuToBottom={scrollMenuToBottom}
-              dropdownInputText={dropdownInputText}
-              onFocus={onDropdownFocus}
-              onBlur={onDropdownBlur}
-              onKeyDown={onDropdownKeyDown}
-              onContainerClick={onDropdownContainerClick}
-              name={dropdownName}
-            />
-            <Input
-              ref={inputRef}
-              boxRef={inputBoxRef}
-              name={inputName}
-              placeholder={inputPlaceholder}
-              onFocus={onInputFocus}
-              onBlur={onInputBlur}
-              onChange={handleInputChange}
-              onKeyDown={onInputKeyDown}
-              onContainerClick={onInputContainerClick}
-              value={inputValue}
-              type={type}
-              error={error}
-              disabled={disabled}
-              readOnly={readOnly}
-              classNames={{
-                wrapper: classify(css.inputWrapper, classNames?.input?.wrapper),
-                box: classify(
-                  css.inputBox,
-                  {
-                    [css.disabled]: disabled ?? null,
-                    [css.locked]: locked ?? null,
-                  },
-                  classNames?.input?.box,
-                ),
-                iconLeft: classNames?.input?.iconLeft,
-                iconRight: classNames?.input?.iconRight,
-              }}
-              size={size}
-              iconLeftName={iconLeftName}
-              iconLeftType={iconLeftType}
-              iconRightName={iconRightName}
-              iconRightType={iconRightType}
-              onIconRightClick={onIconRightClick}
-              minLength={minLength}
-              maxLength={maxLength}
-              pattern={pattern}
-              min={min}
-              max={max}
-            />
-          </div>
-          {(Boolean(helperText) || error) && (
-            <div className={css.info}>
-              {error && errorText ? (
-                <BodySmall color="danger">{errorText}</BodySmall>
-              ) : typeof helperText === 'string' ? (
-                <BodySmall color={disabled ? 'disabled' : 'secondary'}>
-                  {helperText}
-                </BodySmall>
-              ) : (
-                helperText
-              )}
-            </div>
-          )}
-        </div>
-      );
-    },
-  );

package/lib/components/Combobox/helper.js.flow

@@ -1,204 +0,0 @@
-// @flow strict
-import type {MenuOption} from '../Menu';
-
-
-export const defaultOptions: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label: 'Option three',
-    iconLeft: 'face-party',
-  },
-  {
-    key: '5',
-    label: 'Option five(disabled)',
-    disabled: true,
-    iconLeft: 'flag',
-  },
-  {
-    key: '6',
-    label: 'Option six(disabled) very long option that would truncate',
-    disabled: true,
-    iconLeft: 'camera',
-  },
-  {
-    key: '7',
-    label: 'Option seven',
-    iconLeft: 'coffee',
-  },
-  {key: '8', label: 'Option eight', iconLeft: 'user'},
-  {
-    key: '9',
-    label: 'Option nine',
-    iconLeft: 'face-party',
-  },
-];
-
-export const currencyOptions: MenuOption[] = [
-  {
-    key: 'USD',
-    label: 'USD',
-    iconLeft: 'dollar-sign',
-  },
-  {
-    key: 'JPY',
-    label: 'JPY',
-    iconLeft: 'yen-sign',
-  },
-  {
-    key: 'KRW',
-    label: 'KRW',
-    iconLeft: 'won-sign',
-  },
-  {
-    key: 'KRW',
-    label: 'KRW',
-    iconLeft: 'won-sign',
-  },
-  {
-    key: 'GBP',
-    label: 'GBP',
-    iconLeft: 'sterling-sign',
-  },
-  {
-    key: 'INR',
-    label: 'INR',
-    iconLeft: 'indian-rupee-sign',
-  },
-  {
-    key: 'EUR',
-    label: 'EUR',
-    iconLeft: 'euro-sign',
-  },
-  {
-    key: 'CHF',
-    label: 'CHF',
-    iconLeft: 'franc-sign',
-  },
-];
-
-export const phoneNumberOptions: MenuOption[] = [
-  {
-    key: 'US',
-    label: '+1 (United States)',
-  },
-  {
-    key: 'GB',
-    label: '+44 (United Kingdom)',
-  },
-  {
-    key: 'JP',
-    label: '+81 (Japan)',
-  },
-  {
-    key: 'KR',
-    label: '+82 (South Korea)',
-  },
-  {
-    key: 'IN',
-    label: '+91 (India)',
-  },
-  {
-    key: 'FR',
-    label: '+33 (France)',
-  },
-  {
-    key: 'DE',
-    label: '+49 (Germany)',
-  },
-];
-
-/**
- * Format phone numbers according to country-specific patterns
- * @param {string} phoneNumber - The phone number to format
- * @param {string} locale - The locale/country code (e.g., 'US', 'GB', 'JP')
- * @returns {string} - Formatted phone number
- */
-export const formatPhoneNumber = (
-  phoneNumber: string,
-  locale: string = 'US',
-): string => {
-  // Remove all non-numeric characters
-  const cleaned = phoneNumber.replace(/\D/g, '');
-
-  // Format patterns for different locales
-  const patterns = {
-    // North America
-    US: {
-      // United States
-      pattern: /(\d{3})(\d{3})(\d{4})/,
-      format: '($1) $2-$3',
-      countryCode: '+1',
-    },
-    CA: {
-      // Canada
-      pattern: /(\d{3})(\d{3})(\d{4})/,
-      format: '($1) $2-$3',
-      countryCode: '+1',
-    },
-    // Europe
-    GB: {
-      // United Kingdom
-      pattern: /(\d{2})(\d{4})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+44',
-    },
-    DE: {
-      // Germany
-      pattern: /(\d{3})(\d{4})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+49',
-    },
-    FR: {
-      // France
-      pattern: /(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/,
-      format: '$1 $2 $3 $4 $5',
-      countryCode: '+33',
-    },
-    // Asia
-    JP: {
-      // Japan
-      pattern: /(\d{2})(\d{4})(\d{4})/,
-      format: '$1-$2-$3',
-      countryCode: '+81',
-    },
-    KR: {
-      // South Korea
-      pattern: /(\d{3})(\d{4})(\d{4})/,
-      format: '$1-$2-$3',
-      countryCode: '+82',
-    },
-    CN: {
-      // China
-      pattern: /(\d{3})(\d{4})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+86',
-    },
-    IN: {
-      // India
-      pattern: /(\d{3})(\d{3})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+91',
-    },
-  };
-
-  // Get the formatting rule for the locale
-  const rule = patterns[locale] || patterns.US; // Default to US formatting
-
-  // If number starts with country code, remove it for formatting
-  let numberToFormat = cleaned;
-  const countryCode = rule.countryCode.replace('+', '');
-  if (cleaned.startsWith(countryCode)) {
-    numberToFormat = cleaned.slice(countryCode.length);
-  }
-
-  // Format the number according to the pattern
-  const formatted = numberToFormat.replace(rule.pattern, rule.format);
-
-  return formatted;
-};

package/lib/components/Combobox/index.js.flow

@@ -1,3 +0,0 @@
-// @flow strict
-
-export * from './Combobox';

package/lib/components/ConditionalWrapper/ConditionalWrapper.js.flow

@@ -1,16 +0,0 @@
-// @flow strict
-import * as React from 'react';
-
-
-export type ConditionalWrapperProps = {
-  condition?: boolean,
-  wrapper?: (children: React.Node) => React.Node,
-  children?: React.Node,
-};
-
-export const ConditionalWrapper = ({
-  condition,
-  wrapper,
-  children,
-}: ConditionalWrapperProps): React.Node =>
-  condition ? wrapper?.(children) : children;

package/lib/components/ConditionalWrapper/index.js.flow

@@ -1,3 +0,0 @@
-// @flow strict
-
-export {ConditionalWrapper} from './ConditionalWrapper';

package/lib/components/DateRangePicker/Calendar.js.flow

@@ -1,112 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-// $FlowFixMe[untyped-import]
-import moment from 'moment';
-
-import type {DateRange} from '../../types';
-import {
-  formatIsoDate,
-  getDaysInMonth,
-  inDateRange,
-  isEndOfRange,
-  isStartDateEndDateSame,
-  isStartOfRange,
-  MARKERS,
-  NAVIGATION_ACTION,
-  WEEKDAYS,
-} from '../../utils';
-import {
-  getTranslation,
-  isAfter,
-  isBefore,
-  isSame,
-} from '../../utils/date-range-picker';
-import {BodySmall, TEXT_COLORS} from '../Text';
-
-import {Day} from './Day';
-
-import css from './Calendar.module.css';
-
-
-type CalendarProps = {
-  value: string,
-  marker: $Values<typeof MARKERS>,
-  minDate?: string,
-  maxDate?: string,
-  hoverDay: string,
-  dateRange: DateRange,
-  inHoverRange: (day: string) => boolean,
-  handlers: {
-    onDayClick: (day: string) => void,
-    onDayHover: (day: string) => void,
-    onMonthNavigate: (
-      marker: $Values<typeof MARKERS>,
-      action: $Values<typeof NAVIGATION_ACTION>,
-    ) => void,
-  },
-  today: string,
-  t: ?(key: string, fallback: string) => string,
-};
-
-export const Calendar = ({
-  value,
-  marker,
-  minDate,
-  maxDate = formatIsoDate(),
-  handlers,
-  hoverDay,
-  dateRange,
-  inHoverRange,
-  today,
-  t,
-}: CalendarProps): React.Node => (
-  <div className={css.calendar}>
-    <div className={css.calendarRow}>
-      {WEEKDAYS.map((day) => (
-        <BodySmall
-          key={day}
-          className={css.calendarRowItem}
-          color={TEXT_COLORS.tertiary}
-        >
-          {getTranslation(t, day)}
-        </BodySmall>
-      ))}
-    </div>
-
-    {getDaysInMonth(value).map((week, index) => (
-      <div key={week[index]} className={css.calendarRow}>
-        {week.map((date: string) => {
-          const isRangeValid = isStartDateEndDateSame(dateRange);
-          const isStart = isStartOfRange(dateRange, date);
-          const isEnd = isEndOfRange(dateRange, date);
-          const highlighted =
-            inDateRange(dateRange, date) || inHoverRange(date);
-          const {onDayClick, onDayHover} = handlers;
-          const dateValue = moment.utc(date);
-
-          return (
-            <Day
-              key={date}
-              date={date}
-              filled={isStart || isEnd}
-              onClick={() => onDayClick(date)}
-              onHover={() => onDayHover(date)}
-              outlined={isSame(date, today, 'd')}
-              disabled={
-                (minDate && isBefore(date, minDate)) ||
-                isAfter(date, maxDate) ||
-                !isSame(date, value, 'month')
-              }
-              endOfRange={isEnd && !isRangeValid}
-              highlighted={highlighted && !isRangeValid}
-              startOfRange={isStart && !isRangeValid}
-              value={dateValue.date()}
-              hoverDay={hoverDay}
-            />
-          );
-        })}
-      </div>
-    ))}
-  </div>
-);