@sats-group/ui-lib 80.4.0 → 81.0.0

package/react/search/search.tsx

@@ -1,267 +0,0 @@
-import classNames from 'classnames';
-import React, { useRef, useState } from 'react';
-
-import Button from '../button';
-import useClickOutside from '../hooks/use-click-outside';
-import { useIsMounted } from '../hooks/use-is-mounted';
-import CloseIcon from '../icons/18/close';
-import SearchIcon from '../icons/24/search';
-import Text from '../text';
-import useInputValidation from '../use-input-validation';
-
-import {
-  Search as Props,
-  themes,
-  inputSizes,
-  variants,
-  expandDirections,
-} from './search.types';
-
-const RefSearch = React.forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      button,
-      customErrorMessages,
-      clear,
-      disabled,
-      label,
-      isLabelVisible = true,
-      name,
-      onChangeFunc = () => {},
-      onClear = () => {},
-      expandable,
-      placeholder,
-      required,
-      inputSize = inputSizes.small,
-      theme = themes.inline,
-      variant = variants.default,
-      value = '',
-      helpText,
-      helpIcon,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [validationOnChange, handleInvalid, error] =
-      useInputValidation(customErrorMessages);
-    const searchArea = useRef<HTMLDivElement>(null);
-    const [expand, setExpand] = useState(false);
-    const isMounted = useIsMounted();
-
-    useClickOutside(searchArea, () => setExpand(false));
-
-    const [inputValue, setInputValue] = useState(value);
-
-    const setValue = (value: string) => {
-      onChangeFunc(value);
-      setInputValue(value);
-    };
-
-    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
-      setValue(e.target.value);
-      validationOnChange(e);
-    };
-
-    const handleClear = () => {
-      setValue('');
-      onClear();
-    };
-
-    const handleClose = () => {
-      handleClear();
-      setExpand(false);
-    };
-
-    return (
-      <div
-        className={classNames('search', {
-          [`search--expand-direction-${expandable?.direction}`]:
-            expandable?.direction,
-        })}
-      >
-        {isMounted ? (
-          <div
-            className={classNames('search__inner', {
-              'search__inner--expandable': expandable,
-              'search__inner--expand': expand,
-            })}
-            ref={searchArea}
-          >
-            {theme === themes.inline && isLabelVisible ? (
-              <Text
-                theme={Text.themes.emphasis}
-                size={
-                  inputSize === inputSizes.large
-                    ? Text.sizes.large
-                    : Text.sizes.small
-                }
-                className={classNames('search__header', {
-                  [`search__header--variant-${variant}`]: variant,
-                })}
-              >
-                {label}
-              </Text>
-            ) : null}
-            <div
-              className={classNames('search__input-wrapper', {
-                [`search__input-wrapper--size-${inputSize}`]: inputSize,
-                [`search__input-wrapper--theme-${theme}`]: theme,
-                [`search__input-wrapper--variant-${variant}`]: variant,
-              })}
-            >
-              <label className="search__label">
-                <div
-                  className={classNames('search__icon', {
-                    [`search__icon--variant-${variant}`]: variant,
-                  })}
-                >
-                  <SearchIcon />
-                </div>
-                <input
-                  {...restProps}
-                  className={classNames('search__input', {
-                    [`search__input--variant-${variant}`]: variant,
-                    [`search__input--size-${inputSize}`]: inputSize,
-                  })}
-                  disabled={disabled}
-                  name={name}
-                  onChange={handleChange}
-                  onClick={() => setExpand(true)}
-                  value={inputValue}
-                  onInvalid={handleInvalid}
-                  placeholder={placeholder}
-                  ref={ref}
-                  required={required}
-                  type="search"
-                  aria-label={
-                    theme === themes.floating || !isLabelVisible
-                      ? label
-                      : undefined
-                  }
-                />
-              </label>
-              <div
-                className={classNames('search__clear-button', {
-                  'search__clear-button--visible': inputValue,
-                })}
-              >
-                <Button
-                  {...clear}
-                  onClick={handleClear}
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
-                  type="button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.fixedTertiary
-                      : Button.variants.tertiary
-                  }
-                />
-              </div>
-              {button ? (
-                <Button
-                  {...button}
-                  className="search__search-button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.secondaryWhite
-                      : Button.variants.secondary
-                  }
-                  type="submit"
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
-                />
-              ) : null}
-              {expandable && expand ? (
-                <Button
-                  {...expandable.close}
-                  className="search__close-button"
-                  onClick={handleClose}
-                  leadingIcon={<CloseIcon />}
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
-                  type="button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.fixedTertiary
-                      : Button.variants.tertiary
-                  }
-                />
-              ) : null}
-            </div>
-            {error ? (
-              <div aria-hidden="true" className="search__error">
-                <Text>{error}</Text>
-              </div>
-            ) : null}
-            {theme === themes.inline && helpText ? (
-              <Text
-                size={Text.sizes.interface}
-                className={classNames('search__help-text', {
-                  [`search__help-text--variant-${variant}`]: variant,
-                })}
-              >
-                {helpIcon}
-                {helpText}
-              </Text>
-            ) : null}
-          </div>
-        ) : (
-          <div className="search__loading-inner">
-            {theme === themes.inline && isLabelVisible ? (
-              <div
-                className={classNames('search__loading-extra', {
-                  [`search__loading-extra--${variant}`]: variant,
-                })}
-              >
-                {label}
-              </div>
-            ) : null}
-            <div
-              className={classNames('search__loading-input', {
-                [`search__loading-input--${variant}`]: variant,
-                [`search__loading-input--${inputSize}`]: inputSize,
-              })}
-            ></div>
-            {theme === themes.inline && helpText ? (
-              <div
-                className={classNames('search__loading-extra', {
-                  [`search__loading-extra--${variant}`]: variant,
-                })}
-              >
-                {helpIcon}
-                {helpText}
-              </div>
-            ) : null}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-
-// NOTE: Stack traces will show "forwardRef" instead of "Search" if this is not set.
-RefSearch.displayName = 'Search';
-
-const Search: typeof RefSearch & {
-  themes: typeof themes;
-  variants: typeof variants;
-  inputSizes: typeof inputSizes;
-  expandDirections: typeof expandDirections;
-} = Object.assign(RefSearch, {
-  themes,
-  variants,
-  inputSizes,
-  expandDirections,
-});
-
-export default Search;

package/react/search/search.types.ts

@@ -1,44 +0,0 @@
-import type { ReactElement } from 'react';
-import type { Button } from '../button/button.types';
-import type { InputHtmlProps, ObjectValues } from '../types';
-import type { Messages } from '../use-input-validation.types';
-
-export const themes = {
-  floating: 'floating',
-  inline: 'inline',
-} as const;
-
-export const inputSizes = {
-  small: 'small',
-  large: 'large',
-} as const;
-
-export const variants = {
-  default: 'default',
-  fixed: 'fixed',
-} as const;
-
-export const expandDirections = {
-  left: 'left',
-  right: 'right',
-} as const;
-
-export type Search = {
-  button?: Button;
-  clear: Button;
-  customErrorMessages?: Messages;
-  expandable?: {
-    close: Button;
-    direction?: ObjectValues<typeof expandDirections>;
-  };
-  helpIcon?: ReactElement;
-  helpText?: string;
-  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash
-  isLabelVisible?: boolean;
-  label: string;
-  name: string;
-  onChangeFunc?: (arg: string) => void;
-  onClear?: () => void;
-  theme?: ObjectValues<typeof themes>;
-  variant?: ObjectValues<typeof variants>;
-} & InputHtmlProps;

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