@sats-group/ui-lib 80.4.0 → 81.0.0

package/react/message/message.types.ts

@@ -1,39 +0,0 @@
-import { ObjectValues } from '../types';
-import { VisuallyButton } from '../visually-button/visually-button.types';
-
-export const themes = {
-  default: 'default',
-  error: 'error',
-  success: 'success',
-  warning: 'warning',
-} as const;
-
-export type Message = {
-  action?: VisuallyButton;
-  inline?: boolean;
-  link?: {
-    href: string;
-    text: string;
-  };
-  mini?: boolean;
-  text: string;
-  theme?: ObjectValues<typeof themes>;
-};
-
-export const isMessageType = (
-  maybeMessageType?: string,
-): maybeMessageType is Message['theme'] =>
-  maybeMessageType
-    ? Boolean(themes[maybeMessageType as keyof Message['theme']])
-    : false;
-
-export const types: Record<string, Message['theme']> = {
-  default: themes.default,
-  error: themes.error,
-  success: themes.success,
-  warning: themes.warning,
-};
-
-export type MessageDetail = Pick<Message, 'link' | 'text' | 'theme'>;
-
-export type Listener = (event: MessageDetail) => void;

package/react/message/publish.ts

@@ -1,19 +0,0 @@
-import { Listener, MessageDetail } from './message.types';
-
-const eventName = 'user-message';
-
-export const publish = (message: MessageDetail) => {
-  if (!message) {
-    return;
-  }
-
-  window.dispatchEvent(new CustomEvent(eventName, { detail: message }));
-};
-
-const subscriber = (listener: Listener) => (event: CustomEvent) =>
-  listener(event.detail);
-
-export const subscribe = (listener: Listener) => {
-  window.addEventListener(eventName, subscriber(listener));
-  return () => window.removeEventListener(eventName, subscriber(listener));
-};

package/react/message-field/message-field.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-
-import { MessageField as Props, variants, sizes } from './message-field.types';
-import Button from '../button';
-import TextArea from '../text-area';
-import Add from '../icons/16/add';
-import Send from '../icons/16/send';
-import classNames from 'classnames';
-
-const MessageField: React.FunctionComponent<Props> & {
-  variants: typeof variants;
-  sizes: typeof sizes;
-} = ({
-  send,
-  input,
-  altButton,
-  variant = variants.nested,
-  size = sizes.default,
-  isSubmitting,
-  onAltButtonClick = () => {},
-  onClickFunc = () => {},
-}) => {
-  const [hasTyped, setHasTyped] = useState(false);
-  return (
-    <div
-      className={classNames('message-field', {
-        [`message-field--variant-${variant}`]: variant,
-        [`message-field--variant-${variant}-${size}`]: size,
-      })}
-    >
-      {altButton ? (
-        <Button
-          {...altButton}
-          leadingIcon={<Add />}
-          variant={Button.variants.tertiary}
-          onClick={onAltButtonClick}
-          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
-        />
-      ) : null}
-      <div className="message-field__message">
-        <TextArea
-          {...input}
-          onChange={e => {
-            setHasTyped(!!e.target.value.length);
-          }}
-          isLabelVisible={false}
-          size={
-            size === sizes.small ? TextArea.sizes.small : TextArea.sizes.default
-          }
-          isShort
-        />
-      </div>
-      <div>
-        <Button
-          {...send}
-          disabled={!hasTyped || isSubmitting}
-          leadingIcon={<Send />}
-          onClick={onClickFunc}
-          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
-          spinning={isSubmitting}
-          variant={Button.variants.complete}
-        />
-      </div>
-    </div>
-  );
-};
-
-MessageField.variants = variants;
-MessageField.sizes = sizes;
-export default MessageField;

package/react/message-field/message-field.types.ts

@@ -1,24 +0,0 @@
-import type { Button } from '../button/button.types';
-import type { TextArea } from '../text-area/text-area.types';
-import type { ObjectValues } from '../types';
-
-export const variants = {
-  nested: 'nested',
-  standalone: 'standalone',
-} as const;
-
-export const sizes = {
-  default: 'default',
-  small: 'small',
-} as const;
-
-export type MessageField = {
-  send: Button;
-  input: TextArea;
-  altButton?: Button;
-  variant?: ObjectValues<typeof variants>;
-  size?: ObjectValues<typeof sizes>;
-  isSubmitting?: boolean;
-  onAltButtonClick?: () => void;
-  onClickFunc?: () => void;
-};

package/react/modal/modal.tsx

@@ -1,131 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import Button from '../button';
-import useEscape from '../hooks/use-escape';
-import { useIsMounted } from '../hooks/use-is-mounted';
-import Close from '../icons/18/close';
-import Text from '../text';
-
-import { ActionTypes, type Modal as Props, backgrounds } from './modal.types';
-import TabTrapper from './tab-trapper';
-import LinkButton from '../link-button';
-
-const Modal: React.FC<React.PropsWithChildren<Props>> & {
-  backgrounds: typeof backgrounds;
-} = ({
-  ariaLabel,
-  background = backgrounds.primary,
-  children,
-  closeLabel,
-  explanation,
-  id,
-  onClose = () => {},
-  title,
-  actions,
-  onClick = () => {},
-}) => {
-  const modal = React.useRef<HTMLDivElement>(null);
-  const isMounted = useIsMounted();
-  useEscape(onClose);
-
-  if (!isMounted) {
-    return null;
-  }
-
-  const handleModalClick: React.MouseEventHandler = e => {
-    if (modal.current && modal.current === e.target) {
-      onClose();
-    }
-  };
-
-  return ReactDOM.createPortal(
-    <div
-      aria-label={ariaLabel}
-      className="modal"
-      id={id}
-      onClick={handleModalClick}
-      ref={modal}
-      role="dialog"
-    >
-      <div
-        className={classNames('modal__content', {
-          [`modal__content--${background}`]: background,
-        })}
-      >
-        <TabTrapper isActive={true} className="modal__content-inner">
-          <div
-            className={classNames('modal__close-action', {
-              'modal__close-action--always-shown': actions && actions.length,
-            })}
-          >
-            <Button
-              leadingIcon={<Close />}
-              onClick={onClose}
-              size={Button.sizes.small}
-              text={closeLabel}
-              variant={Button.variants.secondary}
-              iconOnly
-            />
-          </div>
-          {title || explanation ? (
-            <div className="modal__nav">
-              <div className="modal__texts">
-                {title ? (
-                  <Text
-                    className="modal__title"
-                    size={Text.sizes.headline2}
-                    theme={Text.themes.emphasis}
-                  >
-                    {title}
-                  </Text>
-                ) : null}
-                {explanation ? (
-                  <div
-                    className={classNames('modal__explanation', {
-                      [`modal__explanation--${background}`]: background,
-                    })}
-                  >
-                    <Text size={Text.sizes.small}>{explanation}</Text>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          ) : null}
-          <div className="modal__children">
-            <div>{children}</div>
-          </div>
-          {actions && actions.length ? (
-            <div className="modal__actions">
-              {actions.map(action =>
-                action.type === ActionTypes.LinkButton ? (
-                  <LinkButton {...action.action} />
-                ) : action.type === ActionTypes.Button ? (
-                  <Button
-                    {...action.action}
-                    onClick={e => onClick(action.buttonId, e)}
-                  />
-                ) : null,
-              )}
-            </div>
-          ) : (
-            <div className="modal__close-action-mobile">
-              <Button
-                leadingIcon={<Close />}
-                onClick={onClose}
-                text={closeLabel}
-                variant={Button.variants.secondary}
-              />
-            </div>
-          )}
-        </TabTrapper>
-      </div>
-    </div>,
-    document.body,
-  );
-};
-
-Modal.backgrounds = backgrounds;
-
-export default Modal;

package/react/modal/modal.types.ts

@@ -1,36 +0,0 @@
-import { Button } from '../button/button.types';
-import { LinkButton } from '../link-button/link-button.types';
-import { ObjectValues } from '../types';
-
-export const backgrounds = {
-  primary: 'primary',
-  secondary: 'secondary',
-} as const;
-
-export enum ActionTypes {
-  LinkButton = 'LinkButton',
-  Button = 'Button',
-}
-
-type LinkAction = {
-  type: ActionTypes.LinkButton;
-  action: LinkButton;
-};
-
-type ButtonAction = {
-  type: ActionTypes.Button;
-  action: Button;
-  buttonId: string;
-};
-
-export type Modal = {
-  ariaLabel: string;
-  background?: ObjectValues<typeof backgrounds>;
-  closeLabel: string;
-  explanation?: string;
-  id: string;
-  onClose?: () => void;
-  title?: string;
-  actions?: (LinkAction | ButtonAction)[];
-  onClick?: (id: string, arg?: unknown) => void;
-};

package/react/modal/tab-trapper.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-
-const focusRef = (ref: React.RefObject<HTMLElement | null>): void => {
-  ref?.current?.focus();
-};
-
-/** Returns the value of `value` from the previous render.
-```js
-const [value, setValue] = useState();
-const previousValue = usePrevious(value);
-```
- */
-// eslint-disable-next-line
-const usePrevious = <T extends unknown>(
-  value: T,
-  initialValue?: T,
-): React.RefObject<T | null>['current'] => {
-  const state = React.useRef<T | null>(
-    typeof initialValue === 'undefined' ? null : initialValue,
-  );
-
-  React.useEffect(() => {
-    state.current = value;
-  }, [value]);
-
-  return state.current;
-};
-
-const TabTrapper: React.FunctionComponent<
-  React.PropsWithChildren<{
-    isActive: boolean;
-    className?: string;
-  }>
-> = ({ children, isActive, className }) => {
-  const wasActive = usePrevious(isActive);
-  const contentRef = React.useRef<HTMLDivElement>(null);
-  const previouslyFocusedElement = React.useRef<HTMLElement | null>(null);
-
-  const focusContent = () => focusRef(contentRef);
-
-  React.useEffect(() => {
-    if (!wasActive && isActive) {
-      // NOTE: Because document.activeElement is an Element by default, we need
-      // to cast this as a HTMLElement to be able to use HTMLElement functions
-      previouslyFocusedElement.current = document.activeElement as HTMLElement;
-      focusContent();
-    }
-
-    if (wasActive && !isActive) {
-      focusRef(previouslyFocusedElement);
-    }
-  }, [isActive]);
-
-  // NOTE: This happens on unmount only
-  React.useEffect(() => () => focusRef(previouslyFocusedElement), []);
-
-  return (
-    <React.Fragment>
-      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}
-      <div ref={contentRef} tabIndex={-1} className={className}>
-        {children}
-      </div>
-      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}
-    </React.Fragment>
-  );
-};
-
-export default TabTrapper;

package/react/progress-bar/progress-bar.tsx

@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import Text from '../text';
-
-import {
-  Progressbar as Props,
-  variants,
-  themes,
-  labelAlignments,
-  labelPositions,
-} from './progress-bar.types';
-
-const ProgressBar: React.FunctionComponent<Props> & {
-  variants: typeof variants;
-  themes: typeof themes;
-  labelAlignments: typeof labelAlignments;
-  labelPositions: typeof labelPositions;
-} = ({
-  value,
-  max,
-  label,
-  labelAlignment = 'right',
-  labelPosition,
-  variant,
-  theme,
-}) => (
-  <div
-    className={classNames('progress-bar', {
-      [`progress-bar--${labelPosition}`]: labelPosition,
-    })}
-  >
-    <progress className="progress-bar__hidden" value={value} max={max} />
-    <div
-      className={classNames('progress-bar__progress', {
-        [`progress-bar__progress--${theme}`]: theme,
-      })}
-    >
-      <div
-        className={classNames('progress-bar__bar', {
-          [`progress-bar__bar--${variant}`]: variant,
-          [`progress-bar__bar--${theme}`]: theme,
-        })}
-        style={{ width: `${Math.floor((value / max) * 100)}%` }}
-      />
-    </div>
-    {label ? (
-      <div
-        className={classNames('progress-bar__text', {
-          [`progress-bar__text--${theme}`]: theme,
-        })}
-      >
-        {labelAlignment === 'left' ? (
-          <Text elementName="span" size={Text.sizes.basic}>
-            {label.text}
-          </Text>
-        ) : null}
-        {label.boldText ? (
-          <Text
-            elementName="span"
-            size={Text.sizes.basic}
-            theme={Text.themes.emphasis}
-          >
-            {label.boldText}
-          </Text>
-        ) : undefined}
-        {labelAlignment === 'right' ? (
-          <Text elementName="span" size={Text.sizes.basic}>
-            {label.text}
-          </Text>
-        ) : null}
-      </div>
-    ) : undefined}
-  </div>
-);
-
-ProgressBar.variants = variants;
-ProgressBar.themes = themes;
-ProgressBar.labelAlignments = labelAlignments;
-ProgressBar.labelPositions = labelPositions;
-export default ProgressBar;

package/react/progress-bar/progress-bar.types.ts

@@ -1,35 +0,0 @@
-import { ObjectValues } from '../types';
-
-export const variants = {
-  cta: 'cta',
-} as const;
-
-export const themes = {
-  dark: 'dark',
-} as const;
-
-export const labelAlignments = {
-  left: 'left',
-  right: 'right',
-} as const;
-
-export const labelPositions = {
-  topLeft: 'top-left',
-  topCenter: 'top-center',
-  topRight: 'top-right',
-  bottomCenter: 'bottom-center',
-  bottomRight: 'bottom-right',
-} as const;
-
-export type Progressbar = {
-  value: number;
-  max: number;
-  label?: {
-    boldText?: string;
-    text: string;
-  };
-  labelAlignment?: ObjectValues<typeof labelAlignments>;
-  labelPosition?: ObjectValues<typeof labelPositions>;
-  variant?: ObjectValues<typeof variants>;
-  theme?: ObjectValues<typeof themes>;
-};

package/react/radio/radio.tsx

@@ -1,87 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import useInputValidation from '../use-input-validation';
-import Text from '../text';
-
-import { colors, Radio as Props } from './radio.types';
-
-const RefRadio = React.forwardRef<
-  HTMLInputElement,
-  React.PropsWithChildren<Props>
->(
-  (
-    {
-      children,
-      color,
-      description,
-      isUnderline,
-      label,
-      name,
-      showCustomError = true,
-      value,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [onChange, onInvalid, error] = useInputValidation();
-
-    return (
-      <label
-        className={cn(
-          'radio',
-          { 'radio--error': error, 'radio--underline': isUnderline },
-          color,
-        )}
-      >
-        <input
-          name={name}
-          value={value}
-          ref={ref}
-          type="radio"
-          onChange={e => {
-            // NOTE: To not break compatibility
-            if (restProps.onChange) restProps.onChange(e);
-            onChange(e);
-          }}
-          onInvalid={e => {
-            // NOTE: To not break compatibility
-            if (restProps.onInvalid) restProps.onInvalid(e);
-            onInvalid(e);
-          }}
-          {...restProps}
-        />
-        <div className="radio__label">
-          <span className="radio__fake-element"></span>
-          <span>
-            {label}
-            {children}
-          </span>
-        </div>
-
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error && showCustomError && (
-          <div aria-hidden="true" className="radio__error">
-            {error}
-          </div>
-        )}
-
-        {description && (
-          <Text className="radio__description" size={Text.sizes.small}>
-            {description}
-          </Text>
-        )}
-      </label>
-    );
-  },
-);
-
-// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Radio"
-RefRadio.displayName = 'Radio';
-
-// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
-const Radio: typeof RefRadio & {
-  colors: typeof colors;
-} = Object.assign(RefRadio, { colors });
-
-export default Radio;

package/react/radio/radio.types.ts

@@ -1,15 +0,0 @@
-import { InputHtmlProps, ObjectValues } from '../types';
-
-export const colors = {
-  light: 'radio--light',
-} as const;
-
-export type Radio = {
-  color?: ObjectValues<typeof colors>;
-  description?: string;
-  isUnderline?: boolean;
-  label?: string;
-  name: string;
-  showCustomError?: boolean;
-  value: string;
-} & InputHtmlProps;

package/react/scale-bar/scale-bar.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-import VisuallyHidden from '../visually-hidden/visually-hidden';
-
-import { ScaleBar as Props } from './scale-bar.types';
-
-const ScaleBar: React.FunctionComponent<Props> = ({ max = 4, value }) => (
-  <>
-    <div className="scale-bar">
-      {Array(max)
-        .fill(0)
-        .map((_, i) => (
-          <div
-            className={`scale-bar__item scale-bar__item--${
-              i < value ? 'filled' : 'empty'
-            }`}
-            key={i}
-          />
-        ))}
-    </div>
-    <VisuallyHidden>
-      <meter max={max} min={0} value={value}>
-        {value}/{max}
-      </meter>
-    </VisuallyHidden>
-  </>
-);
-
-export default ScaleBar;

package/react/scale-bar/scale-bar.types.ts

@@ -1,4 +0,0 @@
-export type ScaleBar = {
-  max?: number;
-  value: number;
-};