@sats-group/ui-lib 80.3.0 → 81.0.0

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,
-};

package/react/visually-button/visually-button.tsx

@@ -1,111 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import Text from '../text';
-
-import { italicMap, sizeMap, themeMap } from './maps';
-import {
-  sizes,
-  variants,
-  type VisuallyButton as Props,
-} from './visually-button.types';
-
-const VisuallyButtonRef = React.forwardRef<HTMLElement, Props>(
-  (
-    {
-      iconOnly,
-      className,
-      elementName,
-      leadingIcon,
-      trailingIcon,
-      hasStackedIcon,
-      size = sizes.basic,
-      spinning,
-      testId,
-      text,
-      variant = variants.primary,
-      wide,
-      ...rest
-    },
-    ref,
-  ) => {
-    const hasIcon = Boolean(leadingIcon || trailingIcon);
-    const renderIconOnly = Boolean(iconOnly && hasIcon);
-    const role = renderIconOnly && elementName === 'div' ? 'img' : undefined;
-
-    return React.createElement(
-      elementName,
-      {
-        'aria-label': renderIconOnly ? text : undefined,
-        className: cn(
-          'visually-button',
-          {
-            'visually-button--icon': renderIconOnly,
-            'visually-button--icon-text':
-              (leadingIcon || trailingIcon) && !iconOnly,
-            'visually-button--icon-text--stacked': hasStackedIcon,
-            [`visually-button--size-${size}`]: size,
-            'visually-button--spinning': spinning,
-            [`visually-button--variant-${variant}`]: variant,
-            'visually-button--wide': wide,
-          },
-          className,
-        ),
-        'data-testid': testId,
-        role,
-        ...rest,
-        ref,
-      },
-      leadingIcon ? (
-        <div className="visually-button__icon">{leadingIcon}</div>
-      ) : null,
-      renderIconOnly ? null : (
-        <Text
-          className="visually-button__text"
-          italic={italicMap[variant]}
-          size={sizeMap[size]}
-          theme={themeMap[variant]}
-          elementName="span"
-        >
-          {text}
-        </Text>
-      ),
-      trailingIcon ? (
-        <div className="visually-button__icon">{trailingIcon}</div>
-      ) : null,
-      spinning ? (
-        <div className="visually-button__spinner">
-          <svg
-            className="visually-button__spinner-icon"
-            width="24px"
-            height="24px"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle opacity="0.1" cx="12" cy="12" r="10" />
-            <path
-              d="M12 2C13.9778 2 15.9112 2.58649 17.5557 3.6853C19.2002 4.78412 20.4819 6.3459 21.2388 8.17316C21.9957 10.0004 22.1937 12.0111 21.8079 13.9509C21.422 15.8907 20.4696 17.6725 19.0711 19.0711C17.6725 20.4696 15.8907 21.422 13.9509 21.8079C12.0111 22.1937 10.0004 21.9957 8.17317 21.2388C6.3459 20.4819 4.78412 19.2002 3.6853 17.5557C2.58649 15.9112 2 13.9778 2 12"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </div>
-      ) : null,
-    );
-  },
-);
-
-VisuallyButtonRef.displayName = 'VisuallyButton';
-
-const VisuallyButton: typeof VisuallyButtonRef & {
-  sizes: typeof sizes;
-  variants: typeof variants;
-} = Object.assign(VisuallyButtonRef, {
-  sizes,
-  variants,
-});
-
-export default VisuallyButton;

package/react/visually-button/visually-button.types.ts

@@ -1,59 +0,0 @@
-import type { ReactElement } from 'react';
-
-import type {
-  ButtonHtmlProps,
-  DivHtmlProps,
-  LinkHtmlProps,
-  ObjectValues,
-} from '../types';
-
-export const sizes = {
-  small: 'small',
-  basic: 'basic',
-  large: 'large',
-} as const;
-
-export const variants = {
-  complete: 'complete',
-  cta: 'cta',
-  ctaSecondary: 'cta-secondary',
-  ctaSecondaryWhite: 'cta-secondary-white',
-  primary: 'primary',
-  primaryDestructive: 'primary-destructive',
-  primaryWhite: 'primary-white',
-  secondary: 'secondary',
-  secondaryWhite: 'secondary-white',
-  secondaryDestructive: 'secondary-destructive',
-  tertiary: 'tertiary',
-  tertiaryDestructive: 'tertiary-destructive',
-  fixedTertiary: 'fixed-tertiary',
-  waitlist: 'waitlist',
-  waitlistSecondary: 'waitlist-secondary',
-} as const;
-
-type CommonProps<ElementName extends string> = {
-  className?: string;
-  elementName: ElementName;
-  hasStackedIcon?: boolean;
-  iconOnly?: boolean;
-  leadingIcon?: ReactElement;
-  size?: ObjectValues<typeof sizes>;
-  spinning?: boolean;
-  testId?: string;
-  text: string;
-  trailingIcon?: ReactElement;
-  variant?: ObjectValues<typeof variants>;
-  wide?: boolean;
-};
-
-type Props<ElementProps, ElementName extends string> = ElementProps &
-  CommonProps<ElementName>;
-
-export type VisuallyButtonButton = Props<ButtonHtmlProps, 'button'>;
-export type VisuallyButtonDiv = Props<DivHtmlProps, 'div'>;
-export type VisuallyButtonLink = Props<LinkHtmlProps, 'a'> & { href: string };
-
-export type VisuallyButton =
-  | VisuallyButtonButton
-  | VisuallyButtonDiv
-  | VisuallyButtonLink;

package/react/visually-hidden/visually-hidden.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-const VisuallyHidden: React.FunctionComponent<React.PropsWithChildren> = ({
-  children,
-}) =>
-  React.Children.count(children) === 0 ? null : (
-    <span className="visually-hidden">{children}</span>
-  );
-
-export default VisuallyHidden;