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

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

@@ -0,0 +1,146 @@
+// @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

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

package/lib/components/Combobox/Combobox.js

@@ -58,10 +58,7 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
     dropdownPlaceholder,
     dropdownBoxRef
   } = props;
-
-  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const inputRef = React.useRef();
-  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const dropdownRef = React.useRef();
   const {
     input: inputValue,
@@ -88,14 +85,10 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
   /* Handling locked functionality at Combobox level */
   React.useEffect(() => {
     if (locked) {
-      // @ts-ignore - TS2571 - Object is of type 'unknown'.
       inputRef.current && (inputRef.current.disabled = true);
-      // @ts-ignore - TS2571 - Object is of type 'unknown'.
       dropdownRef.current && (dropdownRef.current.disabled = true);
     } else {
-      // @ts-ignore - TS2571 - Object is of type 'unknown'.
       inputRef.current && (inputRef.current.disabled = false);
-      // @ts-ignore - TS2571 - Object is of type 'unknown'.
       dropdownRef.current && (dropdownRef.current.disabled = false);
     }
   }, [locked]);
@@ -113,12 +106,8 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
   }, "*"))), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ComboboxModule.default.box, {
       [_ComboboxModule.default.withError]: error ?? false
-    }, classNames?.box)
-    // @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
-    ,
-    onClick: !(disabled || locked) ? onContainerClick : null
-    // @ts-ignore - TS2322 - Type '((arg1?: HTMLElement | null | undefined) => unknown) | undefined' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-    ,
+    }, classNames?.box),
+    onClick: !(disabled || locked) ? onContainerClick : null,
     ref: boxRef
   }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     ref: dropdownRef,
@@ -146,9 +135,7 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
     onKeyDown: onDropdownKeyDown,
     onContainerClick: onDropdownContainerClick,
     name: dropdownName
-  }), /*#__PURE__*/React.createElement(_Input.Input
-  // @ts-ignore - TS2769 - No overload matches this call.
-  , {
+  }), /*#__PURE__*/React.createElement(_Input.Input, {
     ref: inputRef,
     boxRef: inputBoxRef,
     name: inputName,

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

@@ -0,0 +1,287 @@
+// @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

@@ -168,7 +168,6 @@ const formatPhoneNumber = function (phoneNumber) {
   };
 
   // Get the formatting rule for the locale
-  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly US: { readonly pattern: RegExp; readonly format: "($1) $2-$3"; readonly countryCode: "+1"; }; readonly CA: { readonly pattern: RegExp; readonly format: "($1) $2-$3"; readonly countryCode: "+1"; }; ... 6 more ...; readonly IN: { ...; }; }'.
   const rule = patterns[locale] || patterns.US; // Default to US formatting
 
   // If number starts with country code, remove it for formatting

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

@@ -0,0 +1,204 @@
+// @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

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