@sats-group/ui-lib 80.4.0 → 81.0.0

package/react/text-area/text-area.tsx

@@ -1,153 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import Text from '../text';
-import useInputValidation from '../use-input-validation';
-
-import { TextArea as Props, themes, sizes } from './text-area.types';
-
-const RefTextArea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.PropsWithChildren<Props>
->(
-  (
-    {
-      children,
-      helpText,
-      label,
-      name,
-      placeholder,
-      disabled,
-      required,
-      isLabelVisible = true,
-      helpIcon,
-      size = sizes.default,
-      theme = themes.light,
-      isShort,
-      maxLength,
-      defaultValue,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [onChange, onInvalid, error] = useInputValidation();
-    const [count, setCount] = React.useState(0);
-
-    React.useEffect(() => {
-      if (defaultValue) {
-        if (typeof defaultValue === 'string') {
-          setCount(defaultValue.length);
-        } else if (typeof defaultValue === 'number') {
-          setCount(defaultValue);
-        }
-      }
-    }, [restProps]);
-
-    return (
-      <label className="text-area">
-        <div className="text-area__wrapper">
-          {isLabelVisible ? (
-            <div className="text-area__header">
-              <Text
-                theme={Text.themes.emphasis}
-                size={
-                  size === sizes.default ? Text.sizes.basic : Text.sizes.small
-                }
-                className={cn('text-area__label', {
-                  [`text-area__label--theme-${theme}-disabled`]: disabled,
-                  [`text-area__label--theme-${theme}`]: theme,
-                })}
-              >
-                {label}
-                {required ? (
-                  <span
-                    className={cn('text-area__asterisk', {
-                      [`text-area__asterisk--theme-${theme}-disabled`]:
-                        disabled,
-                      [`text-area__asterisk--theme-${theme}`]: theme,
-                    })}
-                  >
-                    *
-                  </span>
-                ) : null}
-                {children}
-              </Text>
-              {maxLength ? (
-                <Text className="text-area__max" size={Text.sizes.small}>
-                  {count}/{maxLength}
-                </Text>
-              ) : null}
-            </div>
-          ) : null}
-          <textarea
-            className={cn('text-area__input', {
-              [`text-area__input--theme-${theme}`]: theme,
-              [`text-area__input--theme-${theme}-error`]: error,
-              [`text-area__input--size-${size}-short`]: isShort,
-              [`text-area__input--size-${size}`]: size,
-            })}
-            aria-label={isLabelVisible ? label : undefined}
-            name={name}
-            maxLength={maxLength}
-            ref={ref}
-            cols={1}
-            required={required}
-            defaultValue={defaultValue}
-            rows={isShort ? 1 : 2}
-            onChange={e => {
-              // NOTE: To not break compatibility
-              if (restProps.onChange) {
-                restProps.onChange(e);
-              }
-              onChange(e);
-              if (maxLength) {
-                setCount(e.target.value.length);
-              }
-            }}
-            onInvalid={e => {
-              // NOTE: To not break compatibility
-              if (restProps.onInvalid) restProps.onInvalid(e);
-              onInvalid(e);
-            }}
-            placeholder={placeholder}
-            disabled={disabled}
-            {...restProps}
-          />
-        </div>
-
-        {helpText ? (
-          <div className="text-area__help">
-            <Text
-              size={Text.sizes.interface}
-              className={cn('text-area__help-text', {
-                [`text-area__help-text--theme-${theme}-error`]: error,
-                [`text-area__help-text--theme-${theme}`]: theme,
-              })}
-            >
-              {helpIcon ? helpIcon : null}
-              {helpText}
-            </Text>
-          </div>
-        ) : null}
-
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error && (
-          <div aria-hidden="true" className="text-area__error">
-            <Text>{error}</Text>
-          </div>
-        )}
-      </label>
-    );
-  },
-);
-
-// NOTE: If this isn't set, stack traces say "forwardRef" instead of "TextArea"
-RefTextArea.displayName = 'TextArea';
-// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
-
-const TextArea: typeof RefTextArea & {
-  themes: typeof themes;
-  sizes: typeof sizes;
-} = Object.assign(RefTextArea, { themes, sizes });
-
-export default TextArea;

package/react/text-area/text-area.types.ts

@@ -1,24 +0,0 @@
-import type { ReactElement } from 'react';
-import type { ObjectValues, TextAreaHtmlProps } from '../types';
-
-export const themes = {
-  light: 'light',
-  dark: 'dark',
-} as const;
-
-export const sizes = {
-  default: 'default',
-  small: 'small',
-} as const;
-
-export type TextArea = {
-  helpText?: string;
-  label: string;
-  theme?: ObjectValues<typeof themes>;
-  size?: ObjectValues<typeof sizes>;
-  isLabelVisible?: boolean;
-  helpIcon?: ReactElement;
-  isShort?: boolean;
-  name: string;
-  defaultValue?: string;
-} & TextAreaHtmlProps;

package/react/text-input/text-input.tsx

@@ -1,160 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import Text from '../text';
-import useInputValidation from '../use-input-validation';
-import SvgInfo from '../icons/16/info';
-import SvgError from '../icons/16/error';
-
-import { themes, variants, TextInput as Props } from './text-input.types';
-import { useEffect } from 'react';
-
-const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      customErrorMessages,
-      defaultValue,
-      disabled,
-      hasError,
-      helpText,
-      label,
-      leadingIcon,
-      maxLength,
-      name,
-      onChange = () => {},
-      placeholder,
-      required,
-      theme,
-      trailingIcon,
-      type = 'text',
-      variant = variants.large,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [count, setCount] = React.useState(0);
-    const [isError, setIsError] = React.useState(hasError);
-    const [validationOnChange, onInvalid, error] = useInputValidation(
-      customErrorMessages,
-      customErrorMessages ? customErrorMessages.defaultError : undefined,
-      isError,
-    );
-    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;
-
-    React.useEffect(() => {
-      if (defaultValue) {
-        if (typeof defaultValue === 'string') {
-          setCount(defaultValue.length);
-        } else if (typeof defaultValue === 'number') {
-          setCount(defaultValue);
-        }
-      }
-    }, [restProps]);
-
-    useEffect(() => {
-      setIsError(hasError);
-    }, [hasError]);
-
-    return (
-      <label
-        className={cn('text-input', {
-          'text-input--theme-dark': theme === themes.dark,
-          'text-input--theme-light': theme === themes.light,
-          'text-input--disabled': disabled,
-          'text-input--error': error || isError,
-          'text-input--icon': leadingIcon || trailingIcon,
-          'text-input--variant-small': variant === variants.small,
-          'text-input--variant-large': variant === variants.large,
-        })}
-      >
-        <div className="text-input__wrapper">
-          <div className="text-input__label-wrapper">
-            <Text
-              className="text-input__label"
-              theme={Text.themes.emphasis}
-              size={
-                variant === variants.small ? Text.sizes.small : Text.sizes.basic
-              }
-            >
-              {label}
-              {required ? (
-                <span className="text-input__asterisk">*</span>
-              ) : null}
-            </Text>
-            {isMaxLengthValid ? (
-              <div className="text-input__length-counter">
-                <Text
-                  size={
-                    variant === variants.small
-                      ? Text.sizes.small
-                      : Text.sizes.basic
-                  }
-                >
-                  {count}/{maxLength}
-                </Text>
-              </div>
-            ) : null}
-          </div>
-
-          <div className="text-input__input-wrapper">
-            {leadingIcon ? (
-              <div className="text-input__icon">{leadingIcon}</div>
-            ) : null}
-            <input
-              className="text-input__input"
-              defaultValue={defaultValue}
-              disabled={disabled}
-              required={required}
-              name={name}
-              maxLength={isMaxLengthValid ? maxLength : undefined}
-              onInvalid={e => onInvalid(e)}
-              onChange={e => {
-                onChange(e);
-                validationOnChange(e);
-                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.
-                if (isMaxLengthValid) {
-                  setCount(e.target.value.length);
-                }
-              }}
-              placeholder={placeholder}
-              ref={ref}
-              type={type}
-              aria-label={label}
-              {...restProps}
-            />
-            {trailingIcon ? (
-              <div className="text-input__icon">{trailingIcon}</div>
-            ) : null}
-          </div>
-          {helpText ? (
-            <div className="text-input__help">
-              <div className="text-input__help-icon">
-                <SvgInfo />
-              </div>
-              <Text size={Text.sizes.interface}>{helpText}</Text>
-            </div>
-          ) : null}
-          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-          {error ? (
-            <div aria-hidden="true" className="text-input__error">
-              <div className="text-input__error-icon">
-                <SvgError />
-              </div>
-              <Text size={Text.sizes.interface}>{error}</Text>
-            </div>
-          ) : null}
-        </div>
-      </label>
-    );
-  },
-);
-
-// NOTE: If this isn't set, stack traces say "forwardRef" instead of "TextInput"
-RefTextInput.displayName = 'TextInput';
-
-const TextInput: typeof RefTextInput & {
-  themes: typeof themes;
-  variants: typeof variants;
-} = Object.assign(RefTextInput, { themes, variants });
-
-export default TextInput;

package/react/text-input/text-input.types.ts

@@ -1,24 +0,0 @@
-import { InputHtmlProps, ObjectValues } from '../types';
-import { Messages } from '../use-input-validation.types';
-
-export const themes = {
-  dark: 'dark',
-  light: 'light',
-} as const;
-
-export const variants = {
-  small: 'small',
-  large: 'large',
-};
-
-export type TextInput = {
-  customErrorMessages?: Messages;
-  hasError?: boolean;
-  helpText?: string;
-  label: string;
-  leadingIcon?: React.ReactNode;
-  name: string;
-  theme?: ObjectValues<typeof themes>;
-  trailingIcon?: React.ReactNode;
-  variant?: ObjectValues<typeof variants>;
-} & InputHtmlProps;

package/react/toggle/toggle.tsx

@@ -1,85 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import Text from '../text';
-import useInputValidation from '../use-input-validation';
-
-import { Toggle as Props } from './toggle.types';
-
-const Toggle = React.forwardRef<
-  HTMLInputElement,
-  React.PropsWithChildren<Props>
->(
-  (
-    {
-      children,
-      isLabelVisible = true,
-      label,
-      labelPosition = 'right',
-      name,
-      value = '',
-      spaceBetween,
-      testId,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [onChange, onInvalid, error] = useInputValidation();
-
-    return (
-      <div
-        className={cn('toggle', {
-          'toggle--error': error,
-        })}
-      >
-        <label
-          className={cn('toggle__content', {
-            'toggle__content--space-between': spaceBetween,
-          })}
-          data-testid={testId}
-        >
-          {isLabelVisible && labelPosition === 'left' && (
-            <div className="toggle__label">
-              <Text>{label}</Text>
-              {children}
-            </div>
-          )}
-
-          <div className="toggle__button-wrap">
-            <input
-              aria-label={isLabelVisible ? undefined : label}
-              className="toggle__input"
-              type="checkbox"
-              name={name}
-              onChange={e => {
-                // NOTE: If props specify an `onChange`, we need to call that too
-                if (rest.onChange) rest.onChange(e);
-                onChange(e);
-              }}
-              onInvalid={e => {
-                // NOTE: If props specify an `onInvalid`, we need to call that too
-                if (rest.onInvalid) rest.onInvalid(e);
-                onInvalid(e);
-              }}
-              ref={ref}
-              value={value}
-              {...rest}
-            />
-            <span className="toggle__slider">
-              <div className="toggle__slider-element"></div>
-            </span>
-          </div>
-
-          {isLabelVisible && labelPosition === 'right' && (
-            <div className="toggle__label">
-              <Text>{label}</Text>
-              {children}
-            </div>
-          )}
-        </label>
-      </div>
-    );
-  },
-);
-
-export default Toggle;

package/react/toggle/toggle.types.ts

@@ -1,11 +0,0 @@
-import { InputHtmlProps } from '../types';
-
-export type Toggle = Omit<InputHtmlProps, 'value'> & {
-  isLabelVisible?: boolean;
-  label: string;
-  labelPosition?: 'left' | 'right';
-  name: string;
-  value: string;
-  spaceBetween?: boolean;
-  testId?: string;
-};

package/react/toolbox/toolbox.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { Types, type Toolbox as Props } from './toolbox.types';
-import Text from '../text';
-import HiddenInput from '../hidden-input';
-
-const Toolbox: React.FunctionComponent<Props> = ({ items }) => (
-  <div className="toolbox">
-    {items.map(({ item, icon }, i) => (
-      <div className="toolbox__item-wrapper" key={i}>
-        {item.type === Types.Link ? (
-          <a {...item.props.link} className="toolbox__item">
-            {icon ? icon : null}
-            <Text size={Text.sizes.small}>{item.props.text}</Text>
-          </a>
-        ) : (
-          <form
-            onSubmit={item.props.handleSubmit}
-            method="POST"
-            className="toolbox__list-item-form"
-            {...item.props.form}
-          >
-            <button
-              className="toolbox__item"
-              data-testid={item.props.testId}
-              {...item.props.button}
-            >
-              {icon ? icon : null}
-              <Text size={Text.sizes.small}>{item.props.text}</Text>
-            </button>
-            {item.props.hiddenInputs
-              ? item.props.hiddenInputs.map((input, index) => (
-                  <HiddenInput key={input.name + index} {...input} />
-                ))
-              : null}
-          </form>
-        )}
-      </div>
-    ))}
-  </div>
-);
-
-export default Toolbox;

package/react/toolbox/toolbox.types.ts

@@ -1,39 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { HiddenInput } from '../hidden-input/hidden-input.types';
-import type { ButtonHtmlProps, FormHtmlProps, LinkHtmlProps } from '../types';
-
-export enum Types {
-  Button = 'Button',
-  Link = 'Link',
-}
-
-type LinkItem = {
-  type: Types.Link;
-  props: {
-    text: string;
-    link: LinkHtmlProps;
-    testId?: string;
-  };
-};
-
-type FormItem = {
-  type: Types.Button;
-  props: {
-    text: string;
-    form: FormHtmlProps;
-    button: ButtonHtmlProps;
-    handleSubmit?: () => void;
-    hiddenInputs?: HiddenInput[];
-    testId?: string;
-  };
-};
-
-type MenuItem = {
-  icon?: ReactNode;
-  item: LinkItem | FormItem;
-};
-
-export type Toolbox = {
-  items: MenuItem[];
-};

package/react/ts/debounce.ts

@@ -1,12 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function debounce<T extends any[]>(
-  callback: (...args: T) => void,
-  wait: number,
-) {
-  let timerRef: number;
-
-  return (...args: T) => {
-    clearTimeout(timerRef);
-    timerRef = window.setTimeout(() => callback(...args), wait);
-  };
-}

package/react/use-input-validation.ts

@@ -1,60 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-
-import { Messages } from './use-input-validation.types';
-
-type SupportedElement =
-  | HTMLInputElement
-  | HTMLSelectElement
-  | HTMLTextAreaElement;
-
-const getCustomMessage = (validity: ValidityState, messages: Messages) => {
-  if (validity.badInput) return messages.badInput;
-  if (validity.customError) return messages.customError;
-  if (validity.patternMismatch) return messages.patternMismatch;
-  if (validity.rangeOverflow) return messages.rangeOverflow;
-  if (validity.rangeUnderflow) return messages.rangeUnderflow;
-  if (validity.stepMismatch) return messages.stepMismatch;
-  if (validity.tooLong) return messages.tooLong;
-  if (validity.tooShort) return messages.tooShort;
-  if (validity.typeMismatch) return messages.typeMismatch;
-  if (validity.valueMissing) return messages.valueMissing;
-  return undefined;
-};
-
-export default (
-  customMessages: Messages = {},
-  defaultError?: string,
-  isError?: boolean,
-) => {
-  const [error, setError] = useState<string | undefined>();
-  const validationEnabled = useRef(false);
-
-  useEffect(() => {
-    if (isError && defaultError) {
-      setError(defaultError);
-    } else {
-      setError(undefined);
-    }
-  }, [isError, defaultError]);
-
-  const onInvalid = (e: React.FormEvent<SupportedElement>) => {
-    validationEnabled.current = true;
-
-    const message = getCustomMessage(
-      (e.target as HTMLInputElement).validity,
-      customMessages,
-    );
-    setError(message || (e.target as HTMLInputElement)?.validationMessage);
-  };
-
-  const onChange = (e: React.ChangeEvent<SupportedElement>) => {
-    const message = getCustomMessage(e.target.validity, customMessages);
-    setError(message || e.target?.validationMessage || undefined);
-  };
-
-  return [onChange, onInvalid, error] as [
-    typeof onChange,
-    typeof onInvalid,
-    typeof error,
-  ];
-};

package/react/use-input-validation.types.ts

@@ -1,13 +0,0 @@
-export type Messages = {
-  badInput?: string;
-  customError?: string;
-  defaultError?: string;
-  patternMismatch?: string;
-  rangeOverflow?: string;
-  rangeUnderflow?: string;
-  stepMismatch?: string;
-  tooLong?: string;
-  tooShort?: string;
-  typeMismatch?: string;
-  valueMissing?: string;
-};

package/react/visually-button/maps.ts

@@ -1,36 +0,0 @@
-import type { ValueOf } from '../indexed-access-type';
-import { sizes as textSizes, themes as textThemes } from '../text/text.types';
-import { variants, sizes } from './visually-button.types';
-
-export const italicMap: Partial<Record<ValueOf<typeof variants>, true>> = {
-  cta: true,
-  'cta-secondary': true,
-  'cta-secondary-white': true,
-};
-
-export const sizeMap: Record<keyof typeof sizes, keyof typeof textSizes> = {
-  small: textSizes.small,
-  basic: textSizes.basic,
-  large: textSizes.large,
-};
-
-export const themeMap: Record<
-  ValueOf<typeof variants>,
-  keyof typeof textThemes
-> = {
-  complete: textThemes.emphasis,
-  cta: textThemes.headline,
-  'cta-secondary': textThemes.headline,
-  'cta-secondary-white': textThemes.headline,
-  primary: textThemes.emphasis,
-  'primary-destructive': textThemes.emphasis,
-  'primary-white': textThemes.emphasis,
-  secondary: textThemes.emphasis,
-  'secondary-white': textThemes.emphasis,
-  'secondary-destructive': textThemes.emphasis,
-  tertiary: textThemes.emphasis,
-  'tertiary-destructive': textThemes.emphasis,
-  'fixed-tertiary': textThemes.emphasis,
-  waitlist: textThemes.emphasis,
-  'waitlist-secondary': textThemes.emphasis,
-};