@spaced-out/ui-design-system 0.4.14 → 0.4.15-beta.0

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

@@ -1,4 +0,0 @@
-// @flow strict
-
-export type {ChipProps, ChipSemanticType} from './Chip';
-export {Chip, CHIP_SEMANTIC} from './Chip';

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -1,58 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-
-import css from './CircularLoader.module.css';
-
-
-export type CircularLoaderProps = {
-  size?: 'large' | 'medium' | 'small',
-  className?: string,
-  ariaLabel?: string,
-  // TODO: update it to permissible colors
-  colorToken?: $Keys<typeof COLORS>,
-};
-
-export const CircularLoader: React$AbstractComponent<
-  CircularLoaderProps,
-  HTMLDivElement,
-> = React.forwardRef<CircularLoaderProps, HTMLDivElement>(
-  (
-    {
-      size = 'medium',
-      className,
-      colorToken = 'colorTextClickable',
-      ariaLabel = 'Loading',
-    }: CircularLoaderProps,
-    ref,
-  ): React.Node => (
-    <div
-      className={classify(
-        css.container,
-        {
-          [css.mediumContainer]: size === 'medium',
-          [css.smallContainer]: size === 'small',
-        },
-        className,
-      )}
-      ref={ref}
-      aria-label={ariaLabel}
-      role="alert"
-      aria-busy="true"
-    >
-      <div className={css.spinLoader} aria-hidden="true">
-        <div
-          className={css.outerCircle}
-          style={{'--color': COLORS[colorToken]}}
-        ></div>
-        <div
-          className={css.ellipse}
-          style={{'--color': COLORS[colorToken]}}
-        ></div>
-      </div>
-    </div>
-  ),
-);

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

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

package/lib/components/CollapsibleCard/CollapsibleCard.js.flow

@@ -1,146 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {Truncate} from '../Truncate';
-
-import css from './CollapsibleCard.module.css';
-
-
-export const COLLAPSIBLE_CARD_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-});
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  title?: string,
-  content?: string,
-}>;
-
-export type CollapsibleCardSemanticType = $Values<
-  typeof COLLAPSIBLE_CARD_SEMANTIC,
->;
-
-export type CollapsibleCardProps = {
-  id?: string,
-  title: React.Node,
-  children: React.Node,
-  classNames?: ClassNames,
-  isOpen?: boolean,
-  headerIconName?: string,
-  headerIconType?: IconType,
-  semantic?: CollapsibleCardSemanticType,
-  onChange?: ?(
-    e: SyntheticEvent<HTMLElement>,
-    isOpen: boolean,
-    id?: string,
-  ) => mixed,
-};
-
-export type CollapsibleCardActionProps = {
-  children: React.Node,
-  className?: string,
-};
-
-export const CollapsibleCardAction = ({
-  children,
-  className,
-}: CollapsibleCardActionProps): React.Node => (
-  <div className={classify(css.actionContainer, className)}>{children}</div>
-);
-
-export type CollapsibleCardContentProps = {
-  children: React.Node,
-  className?: string,
-};
-
-export const CollapsibleCardContent = ({
-  children,
-  className,
-}: CollapsibleCardActionProps): React.Node => (
-  <div className={classify(css.contentContainer, className)}>{children}</div>
-);
-
-export const CollapsibleCard: React$AbstractComponent<
-  CollapsibleCardProps,
-  HTMLDivElement,
-> = React.forwardRef<CollapsibleCardProps, HTMLDivElement>(
-  (
-    {
-      id,
-      isOpen,
-      onChange,
-      classNames,
-      title,
-      children,
-      semantic = 'neutral',
-      headerIconName,
-      headerIconType = 'solid',
-    }: CollapsibleCardProps,
-    ref,
-  ): React.Node => {
-    const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(
-      Boolean(isOpen),
-    );
-
-    React.useEffect(() => {
-      setCollapsibleCardIsOpen(Boolean(isOpen));
-    }, [isOpen]);
-
-    return (
-      <div
-        data-testid="CollapsibleCard"
-        className={classify(css.wrapper, classNames?.wrapper)}
-        ref={ref}
-      >
-        <UnstyledButton
-          className={classify(
-            css.header,
-            {
-              [css.isOpen]: collapsibleCardIsOpen,
-            },
-            classNames?.title,
-          )}
-          onClick={(e) => {
-            onChange?.(e, !collapsibleCardIsOpen, id);
-            setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
-          }}
-        >
-          <div className={css.headerContent}>
-            {!!headerIconName && (
-              <div className={classify(css.iconContainer, css[semantic])}>
-                <Icon
-                  name={headerIconName}
-                  type={headerIconType}
-                  size="small"
-                  className={css[semantic]}
-                />
-              </div>
-            )}
-
-            <Truncate>{title}</Truncate>
-          </div>
-
-          {collapsibleCardIsOpen ? (
-            <Icon name="chevron-up" color="secondary" size="small" />
-          ) : (
-            <Icon name="chevron-down" color="secondary" size="small" />
-          )}
-        </UnstyledButton>
-        {collapsibleCardIsOpen && (
-          <div className={classify(css.content, classNames?.content)}>
-            {children}
-          </div>
-        )}
-      </div>
-    );
-  },
-);

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

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

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';