@sats-group/ui-lib 80.4.0 → 81.0.1

package/react/select/select.tsx

@@ -1,139 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import useInputValidation from '../use-input-validation';
-
-import Option from '../select-option/select-option';
-import Text from '../text';
-import SvgArrowDown from '../icons/18/arrow-down';
-
-import { labelPositions, Select as Props, variants } from './select.types';
-
-// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.
-const RefSelect = React.forwardRef<
-  HTMLSelectElement,
-  React.PropsWithChildren<Props>
->(
-  (
-    {
-      children,
-      className,
-      id,
-      isLabelVisible = true,
-      label,
-      labelPosition = labelPositions.stacked,
-      name,
-      onChange = () => {},
-      onChangeOption = () => {},
-      options = [],
-      required,
-      variant = variants.large,
-      wide,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [validationOnChange, onInvalid, error] = useInputValidation();
-
-    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-      onChange(e);
-      onChangeOption(options.find(({ value }) => value === e.target.value));
-      validationOnChange(e);
-    };
-
-    const asterix = required ? (
-      <span className="select__asterisk">*</span>
-    ) : null;
-
-    return (
-      <div className={cn('select', className, { 'select--error': error })}>
-        <div
-          className={cn(
-            `select__content select__content--position-${labelPosition}`,
-            { 'select__content--wide': wide },
-          )}
-        >
-          {isLabelVisible ? (
-            <label className="select__label" htmlFor={id}>
-              {label || children ? (
-                <div className="select__label-text">
-                  <Text
-                    size={
-                      variant === variants.small
-                        ? Text.sizes.small
-                        : Text.sizes.basic
-                    }
-                    theme={Text.themes.emphasis}
-                  >
-                    {label}
-                  </Text>
-                  {asterix}
-                  {children}
-                </div>
-              ) : required ? (
-                asterix
-              ) : null}
-            </label>
-          ) : null}
-          <div
-            className={cn('select__native-wrapper', {
-              'select__native-wrapper--wide': wide,
-            })}
-          >
-            <select
-              aria-label={isLabelVisible ? undefined : label}
-              className={cn(
-                `select__select select__select--variant-${variant}`,
-                {
-                  'select__select--wide': wide,
-                },
-              )}
-              id={id}
-              name={name}
-              onChange={onInputChange}
-              onInvalid={e => {
-                // NOTE: To not break compatibility
-                if (restProps.onInvalid) restProps.onInvalid(e);
-                onInvalid(e);
-              }}
-              ref={ref}
-              required={required}
-              {...restProps}
-            >
-              {options.map(option => (
-                <Option key={option.value} {...option} />
-              ))}
-            </select>
-            <span className="select__chevron">
-              <SvgArrowDown />
-            </span>
-          </div>
-
-          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-          {error ? (
-            <div aria-hidden="true" className="select__error">
-              {error}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    );
-  },
-);
-
-// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Select"
-RefSelect.displayName = 'Select';
-
-// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012
-const SelectComponent = RefSelect as <OptionExtra>(
-  props: Props<OptionExtra> & {
-    ref?: React.Ref<HTMLSelectElement>;
-  },
-) => React.ReactElement;
-
-const Select: typeof SelectComponent & {
-  labelPositions: typeof labelPositions;
-  variants: typeof variants;
-} = Object.assign(SelectComponent, { labelPositions, variants });
-
-export default Select;

package/react/select/select.types.ts

@@ -1,26 +0,0 @@
-import { ObjectValues, SelectHtmlProps } from '../types';
-
-import { SelectOption } from '../select-option/select-option.types';
-
-export const labelPositions = {
-  inline: 'inline',
-  stacked: 'stacked',
-} as const;
-
-export const variants = {
-  small: 'small',
-  large: 'large',
-} as const;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Select<OptionExtra = any> = {
-  id: string;
-  isLabelVisible?: boolean;
-  label?: string;
-  labelPosition?: ObjectValues<typeof labelPositions>;
-  name: string;
-  onChangeOption?: (option?: SelectOption<OptionExtra>) => void;
-  options?: SelectOption<OptionExtra>[];
-  variant?: ObjectValues<typeof variants>;
-  wide?: boolean;
-} & SelectHtmlProps;

package/react/select-option/select-option.types.ts

@@ -1,8 +0,0 @@
-import { OptionHtmlProps } from '../types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type SelectOption<Extra = any> = {
-  extra?: Extra;
-  value: string;
-  text: string;
-} & OptionHtmlProps;

package/react/tag/tag.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import Text from '../text';
-
-import { Tag as Props, variants, sizes } from './tag.types';
-import classNames from 'classnames';
-
-const Tag: React.FunctionComponent<Props> & {
-  sizes: typeof sizes;
-  variants: typeof variants;
-} = ({ text, icon, border, size = sizes.m, variant = variants.primary }) => (
-  <Text
-    size={size}
-    tight
-    className={classNames('tag', `tag--variant-${variant}`, {
-      [`tag--variant-${variant}-border`]: border,
-    })}
-  >
-    {icon ? icon : null}
-    {text}
-  </Text>
-);
-
-Tag.sizes = sizes;
-Tag.variants = variants;
-export default Tag;

package/react/tag/tag.types.ts

@@ -1,30 +0,0 @@
-import { ObjectValues } from '../types';
-import { sizes as TextSizes } from '../text/text.types';
-import { ReactElement } from 'react';
-
-export const sizes = {
-  xs: TextSizes.interface,
-  s: TextSizes.small,
-  m: TextSizes.basic,
-  l: TextSizes.large,
-} as const;
-
-export const variants = {
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'tertiary',
-  positive: 'positive',
-  attention: 'attention',
-  negative: 'negative',
-  neutral: 'neutral',
-  information: 'information',
-  featured: 'featured',
-} as const;
-
-export type Tag = {
-  text: string;
-  border?: boolean;
-  size?: ObjectValues<typeof sizes>;
-  variant?: ObjectValues<typeof variants>;
-  icon?: ReactElement;
-};

package/react/text/text.tsx

@@ -1,40 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import { sizes, themes, Text as Props } from './text.types';
-
-const Text: React.FunctionComponent<React.PropsWithChildren<Props>> & {
-  sizes: typeof sizes;
-  themes: typeof themes;
-} = ({
-  children,
-  className,
-  elementName = 'div',
-  italic,
-  size = sizes.basic,
-  theme = themes.normal,
-  tight,
-  ...restProps
-}) =>
-  React.createElement(
-    elementName,
-    {
-      className: cn(
-        'text',
-        {
-          'text--italic': italic,
-          [`text--size-${size}`]: size ? sizes[size] : undefined,
-          [`text--theme-${theme}`]: theme ? themes[theme] : undefined,
-          'text--tight': tight,
-        },
-        className,
-      ),
-      ...restProps,
-    },
-    children,
-  );
-
-Text.sizes = sizes;
-Text.themes = themes;
-
-export default Text;

package/react/text/text.types.ts

@@ -1,29 +0,0 @@
-import { ObjectValues } from '../types';
-
-export const sizes = {
-  headline1: 'headline1',
-  headline2: 'headline2',
-  headline3: 'headline3',
-  large: 'large',
-  basic: 'basic',
-  small: 'small',
-  interface: 'interface',
-  button: 'button',
-  section: 'section',
-} as const;
-
-export const themes = {
-  normal: 'normal',
-  emphasis: 'emphasis',
-  headline: 'headline',
-} as const;
-
-// NOTE: The type of the rest spread properties is generic because `elementName` can be _any_ HTML element which we can't type the props for
-export type Text = {
-  className?: string;
-  elementName?: string;
-  italic?: boolean;
-  size?: ObjectValues<typeof sizes>;
-  theme?: ObjectValues<typeof themes>;
-  tight?: boolean;
-} & { [key: string]: unknown };

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;