@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

package/lib/components/CircularLoader/CircularLoader.d.ts

@@ -0,0 +1,56 @@
+import {$Keys} from 'utility-types';
+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.ReactNode => (
+    <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.d.ts

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

package/lib/components/CollapsibleCard/CollapsibleCard.d.ts

@@ -0,0 +1,134 @@
+import {$ReadOnly, $Values} from 'utility-types';
+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.ReactNode;
+  children: React.ReactNode;
+  classNames?: ClassNames;
+  isOpen?: boolean;
+  headerIconName?: string;
+  headerIconType?: IconType;
+  semantic?: CollapsibleCardSemanticType;
+  onChange?:
+    | ((
+        e: React.SyntheticEvent<HTMLElement>,
+        isOpen: boolean,
+        id?: string,
+      ) => unknown)
+    | null
+    | undefined;
+};
+export type CollapsibleCardActionProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+export const CollapsibleCardAction = ({
+  children,
+  className,
+}: CollapsibleCardActionProps): React.ReactNode => (
+  <div className={classify(css.actionContainer, className)}>{children}</div>
+);
+export type CollapsibleCardContentProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+export const CollapsibleCardContent = ({
+  children,
+  className,
+}: CollapsibleCardActionProps): React.ReactNode => (
+  <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.ReactNode => {
+    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.d.ts

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

package/lib/components/Combobox/Combobox.d.ts

@@ -0,0 +1,292 @@
+import {$ReadOnly} from 'utility-types';
+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.ReactNode;
+  size?: 'medium' | 'small';
+  onContainerClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  locked?: boolean;
+  error?: boolean;
+  errorText?: string;
+  helperText?: string | React.ReactNode;
+  required?: boolean;
+  readOnly?: boolean;
+  boxRef?: (arg0: HTMLElement | null | undefined) => unknown;
+  value: {
+    dropdown?: string;
+    input?: string;
+  };
+  onChange: (arg0: {
+    input: string;
+    dropdown: string;
+    inputChange?: InputOnChangeParamsType;
+    dropdownOption?: MenuOption;
+  }) => unknown;
+
+  /* Input props */
+  inputPlaceholder?: string;
+  onInputFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onInputBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  onInputContainerClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  inputName?: string;
+  iconLeftName?: string;
+  iconLeftType?: IconType;
+  iconRightName?: string;
+  iconRightType?: IconType;
+  onIconRightClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  inputBoxRef?: (arg0: HTMLElement | null | undefined) => unknown;
+  minLength?: string;
+  maxLength?: string;
+  pattern?: string;
+  min?: string;
+  max?: string;
+
+  /* Dropdown props */
+  menu?: MenuProps;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  scrollMenuToBottom?: boolean;
+  onDropdownFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onDropdownBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onDropdownKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  onDropdownContainerClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  dropdownName?: string;
+  dropdownPlaceholder?: string;
+  dropdownBoxRef?: (arg0: HTMLElement | null | undefined) => unknown;
+};
+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.d.ts

@@ -0,0 +1,205 @@
+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.d.ts

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

package/lib/components/ConditionalWrapper/ConditionalWrapper.d.ts

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

package/lib/components/ConditionalWrapper/index.d.ts

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