@sats-group/ui-lib 74.2.0

package/react/form-content/form-content.search.tsx

@@ -0,0 +1,47 @@
+import FuzzySearch from 'fuzzy-search';
+import * as React from 'react';
+import Search from '../search';
+import { Search as Props, SearchItem } from './form-content.types';
+
+const FormContentSearch: React.FC<Props> = ({
+  searchInput,
+  searchKeys,
+  searchDataset,
+  searchTerm = () => {},
+  searchResult = () => {},
+}) => {
+  const [term, setTerm] = React.useState('');
+  const searchOptions = { sort: true };
+
+  const search = React.useMemo(() => {
+    const searcher = new FuzzySearch<SearchItem>(
+      searchDataset,
+      searchKeys,
+      searchOptions,
+    );
+    return (term: string) => searcher.search(term);
+  }, [searchDataset]);
+
+  const searchResults = React.useMemo(
+    () => (term.length > 0 ? search(term).slice(0, 5) : []),
+    [search, term],
+  );
+
+  React.useEffect(() => {
+    searchResult(searchResults);
+    searchTerm(term);
+  });
+
+  return (
+    <div className="form-content__search">
+      <Search
+        {...searchInput}
+        inputSize={Search.inputSizes.small}
+        isLabelVisible={false}
+        onChangeFunc={string => setTerm(string)}
+      />
+    </div>
+  );
+};
+
+export default FormContentSearch;

package/react/form-content/form-content.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import Button from '../button';
+import Close from '../icons/24/close';
+import Text from '../text';
+
+import CheckboxList from './form-content.checkbox-list';
+import RadioList from './form-content.radio-list';
+import Range from './form-content.range';
+
+import { FormContent as Props } from './form-content.types';
+
+import { ContentKeys } from '../form-content/form-content.types';
+import TabTrapper from '../modal/tab-trapper';
+
+const Content = (content: Props['content']) => {
+  switch (content.key) {
+    case ContentKeys.Checkbox: {
+      return <CheckboxList {...content} />;
+    }
+    case ContentKeys.Range: {
+      return <Range {...content} />;
+    }
+    case ContentKeys.Radio: {
+      return <RadioList {...content} />;
+    }
+  }
+};
+
+const FormContent: React.FC<Props> = ({
+  content,
+  closeLabel,
+  isOpen = false,
+  close,
+  onSubmit,
+  submitLabel,
+  title,
+}) => (
+  <div className="form-content">
+    {isOpen ? <div className="form-content__background-overlay"></div> : null}
+    <TabTrapper isActive={isOpen}>
+      <div
+        className={classNames('form-content__modal', {
+          'form-content__modal--open': isOpen,
+        })}
+        data-test-modal
+      >
+        <div className="form-content__modal-header">
+          <Text
+            elementName="span"
+            theme={Text.themes.emphasis}
+            size={Text.sizes.headline3}
+            className="form-content__modal-title"
+          >
+            {title}
+          </Text>
+          <div className="form-content__modal-close-small">
+            <Button
+              variant={Button.variants.secondary}
+              onClick={close}
+              size={Button.sizes.small}
+              leadingIcon={<Close />}
+              ariaLabel={closeLabel}
+            />
+          </div>
+        </div>
+        <div className="form-content__modal-content">{Content(content)}</div>
+        <div className="form-content__modal-action-wrapper">
+          <div className="form-content__modal-actions">
+            <div className="form-content__modal-close-large">
+              <Button
+                data-testid="close-form-content-modal"
+                variant={Button.variants.secondary}
+                size={Button.sizes.basic}
+                text={closeLabel}
+                onClick={close}
+              />
+            </div>
+            <Button
+              className="form-content__submit"
+              variant={Button.variants.primary}
+              size={Button.sizes.basic}
+              type="submit"
+              text={submitLabel}
+              onClick={onSubmit}
+            />
+          </div>
+        </div>
+      </div>
+    </TabTrapper>
+  </div>
+);
+
+export default FormContent;

package/react/form-content/form-content.types.ts

@@ -0,0 +1,55 @@
+import type { Radio } from '../radio/radio.types';
+import type { Range } from './form-content.range.types';
+import type { Search as SearchProps } from '../search/search.types';
+import type { CheckboxList } from './form-content.checkbox-list.types';
+
+export enum ContentKeys {
+  Radio = 'radio',
+  Range = 'range',
+  Checkbox = 'checkbox',
+}
+
+export type SearchItem = { key: string; label: string };
+
+export type Search = {
+  searchKeys: string[];
+  searchDataset: SearchItem[];
+  searchInput: SearchProps;
+  searchTerm?: (arg: string) => void;
+  searchResult?: (arg: SearchItem[]) => void;
+};
+
+type RadioListBase = {
+  key: ContentKeys.Radio;
+  categories: {
+    header?: string;
+    options: Radio[];
+    id: string;
+  }[];
+  setSelectedValue?: (id: string, value: string) => void;
+};
+
+type RadioListSearch = RadioListBase & {
+  searchProps: Search;
+};
+
+export type RadioList = RadioListBase | RadioListSearch;
+
+type FormContentBase = {
+  closeLabel: string;
+  isOpen?: boolean;
+  close?: () => void;
+  onSubmit?: () => void;
+  submitLabel: string;
+  title: string;
+};
+
+export type FormContentDropdownList = FormContentBase & {
+  content: RadioList;
+};
+
+export type FormContentFilter = FormContentBase & {
+  content: Range | CheckboxList | RadioList;
+};
+
+export type FormContent = FormContentDropdownList | FormContentFilter;

package/react/form-content/index.ts

@@ -0,0 +1,2 @@
+import FormContent from './form-content';
+export default FormContent;

package/react/form-content/types/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-tiny-collapse';

package/react/hidden-input/hidden-input.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { HiddenInput as Props } from './hidden-input.types';
+
+const HiddenInput: React.FunctionComponent<Props> = props => (
+  <input type="hidden" {...props} />
+);
+
+export default HiddenInput;

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

@@ -0,0 +1,6 @@
+import type { InputHtmlProps } from '../types';
+
+export type HiddenInput = {
+  name: string;
+  value: string;
+} & InputHtmlProps;

package/react/hidden-input/index.ts

@@ -0,0 +1,2 @@
+import HiddenInput from './hidden-input';
+export default HiddenInput;

package/react/hooks/focus-previous-element.ts

@@ -0,0 +1,30 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+const focusRef = (ref: React.MutableRefObject<HTMLElement | null>): void => {
+  ref?.current?.focus();
+};
+
+const focusPreviousElement = (
+  modal: RefObject<HTMLElement>,
+  isActive?: boolean,
+) => {
+  const previouslyFocusedElement = useRef<HTMLElement | null>(null);
+
+  const focusContent = () => focusRef(modal);
+  useEffect(() => {
+    if (modal.current && isActive) {
+      previouslyFocusedElement.current = document.activeElement as HTMLElement;
+      focusContent();
+      return;
+    }
+
+    if (!isActive) {
+      focusRef(previouslyFocusedElement);
+    }
+  }, [isActive]);
+
+  // NOTE: This happens on unmount only
+  useEffect(() => () => focusRef(previouslyFocusedElement), []);
+};
+
+export default focusPreviousElement;

package/react/hooks/is-running-on-client.ts

@@ -0,0 +1 @@
+export default typeof window !== 'undefined';

package/react/hooks/use-click-outside.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import useEvent from './use-event';
+
+/** Executes the provided callback when a click event occurs outside of the provided ref */
+const useClickOutside = (
+  ref: React.RefObject<Element | null>,
+  callback: () => void = () => {},
+): void => {
+  useEvent<MouseEvent>('mousedown', e => {
+    if (
+      ref.current &&
+      ref?.current !== e.target &&
+      // NOTE: Because of react typings we need to cast this, more info: https://stackoverflow.com/a/61164277
+      !ref.current.contains(e.target as Node) &&
+      e.clientX < document.body.scrollWidth
+    ) {
+      callback();
+    }
+  });
+};
+
+export default useClickOutside;

package/react/hooks/use-escape.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+
+import useEvent from './use-event';
+
+const useEscape = (callback: () => void) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Escape') {
+        callback();
+      }
+    },
+    [callback],
+  );
+
+  useEvent('keydown', handleKeyDown);
+};
+
+export default useEscape;

package/react/hooks/use-event.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+import isRunningOnClient from './is-running-on-client';
+
+const defaultTarget = isRunningOnClient ? window : null;
+
+const useEvent = <T extends Event = Event>(
+  name: string,
+  handler: (event: T) => void,
+  target: EventTarget | null = defaultTarget,
+) => {
+  useEffect(() => {
+    if (!name) {
+      return;
+    }
+
+    if (!target) {
+      return;
+    }
+
+    target.addEventListener(name, handler);
+
+    return () => {
+      target.removeEventListener(name, handler);
+    };
+  }, [name, handler, target]);
+};
+
+export default useEvent;

package/react/hooks/use-is-mounted.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const useIsMounted = () => {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted;
+};

package/react/hooks/use-toggle.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+const useToggle = (
+  initialState: boolean,
+): [
+  state: boolean,
+  toggle: () => void,
+  turnOn: () => void,
+  turnOff: () => void,
+] => {
+  const [state, setState] = useState(!!initialState);
+  const toggle = () => setState(!state);
+  const turnOn = () => setState(true);
+  const turnOff = () => setState(false);
+
+  return [state, toggle, turnOn, turnOff];
+};
+
+export default useToggle;

package/react/icons/16/close.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgClose = () => (
+  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.646 3.947a.5.5 0 0 1 .708 0L8 7.594l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8.3l3.647 3.646a.5.5 0 0 1-.708.708L8 9.008l-3.646 3.647a.5.5 0 0 1-.708-.707L7.293 8.3 3.646 4.655a.5.5 0 0 1 0-.708Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgClose;

package/react/icons/18/close.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+const SvgClose = () => (
+  <svg width={18} height={18} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.424 3.877a.6.6 0 0 1 0 .848l-9 9a.6.6 0 1 1-.848-.848l9-9a.6.6 0 0 1 .848 0Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.576 3.877a.6.6 0 0 1 .848 0l9 9a.6.6 0 0 1-.848.848l-9-9a.6.6 0 0 1 0-.848Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgClose;

package/react/icons/24/arrow-down.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+const SvgArrowDown = () => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m17 9.5-5 5-5-5"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgArrowDown;

package/react/icons/24/arrow-right.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+const SvgArrowRight = () => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m9.5 7 5 5-5 5"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgArrowRight;

package/react/icons/24/arrow-up.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+const SvgArrowUp = () => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m7 14.5 5-5 5 5"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgArrowUp;

package/react/icons/24/close.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgClose = () => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgClose;

package/react/icons/24/remove.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const SvgRemove = () => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 2.75a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5ZM1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12 17.937 22.75 12 22.75 1.25 17.937 1.25 12Zm6.583-4.167a.75.75 0 0 1 1.061 0L12 10.94l3.106-3.106a.75.75 0 0 1 1.06 1.061L13.062 12l3.106 3.106a.75.75 0 0 1-1.061 1.06L12 13.062l-3.106 3.106a.75.75 0 1 1-1.06-1.061L10.938 12 7.833 8.894a.75.75 0 0 1 0-1.06Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgRemove;

package/react/icons/24/search.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+const SvgSearch = () => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m20.47 21.53.53.53L22.06 21l-.53-.53-1.06 1.06Zm-4.65-6.77a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm5.71 5.71-5.71-5.71-1.06 1.06 5.71 5.71 1.06-1.06ZM16.65 10.2a6.45 6.45 0 0 1-6.45 6.45v1.5a7.95 7.95 0 0 0 7.95-7.95h-1.5Zm-6.45 6.45a6.45 6.45 0 0 1-6.45-6.45h-1.5a7.95 7.95 0 0 0 7.95 7.95v-1.5ZM3.75 10.2a6.45 6.45 0 0 1 6.45-6.45v-1.5a7.95 7.95 0 0 0-7.95 7.95h1.5Zm6.45-6.45a6.45 6.45 0 0 1 6.45 6.45h1.5a7.95 7.95 0 0 0-7.95-7.95v1.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgSearch;

package/react/icons/icons.md

@@ -0,0 +1,3 @@
+These icons are local to ui-lib so it doesn't have to depend on @sats-group/icons.
+
+It might be nicer to refactor the few components that have embedded icons to take icons as input instead.

package/react/indexed-access-type.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/react/link/index.ts

@@ -0,0 +1,2 @@
+import Link from './link';
+export default Link;

package/react/link/link.scss

@@ -0,0 +1,44 @@
+@use '../../tokens/spacing';
+@use '../../tokens/light';
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing.$xs;
+
+  &--background-default {
+    color: light.$on-buttons-on-link-default;
+    @media (hover: hover) {
+      &:hover {
+        color: light.$on-buttons-on-link-hover;
+      }
+    }
+
+    &-orange {
+      color: light.$on-buttons-on-action-default;
+      @media (hover: hover) {
+        &:hover {
+          color: light.$on-buttons-on-action-pressed;
+        }
+      }
+    }
+  }
+
+  &--background-fixed {
+    color: light.$on-buttons-on-fixed-link-default;
+    @media (hover: hover) {
+      &:hover {
+        color: light.$on-buttons-on-fixed-link-hover;
+      }
+    }
+
+    &-orange {
+      color: light.$on-buttons-on-fixed-action-default;
+      @media (hover: hover) {
+        &:hover {
+          color: light.$on-buttons-on-fixed-action-pressed;
+        }
+      }
+    }
+  }
+}

package/react/link/link.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import Text from '../text';
+
+import {
+  Link as Props,
+  variants,
+  sizes,
+  iconPositions,
+  backgrounds,
+} from './link.types';
+import classNames from 'classnames';
+
+const Link: React.FC<Props> & {
+  variants: typeof variants;
+  sizes: typeof sizes;
+  iconPositions: typeof iconPositions;
+  backgrounds: typeof backgrounds;
+} = ({
+  href,
+  icon,
+  testId,
+  text,
+  variant,
+  size = sizes.basic,
+  background = backgrounds.defualt,
+  iconPosition = iconPositions.prefix,
+  ...rest
+}) => (
+  <Text
+    elementName="a"
+    size={size}
+    className={classNames('link', variant, {
+      [`link--background-${background}-${variant}`]: variant,
+      [`link--background-${background}`]: background,
+    })}
+    href={href}
+    data-testid={testId}
+    {...rest}
+  >
+    {icon ? (
+      iconPosition === iconPositions.prefix ? (
+        <>
+          {icon} {text}
+        </>
+      ) : (
+        <>
+          {text} {icon}
+        </>
+      )
+    ) : (
+      text
+    )}
+  </Text>
+);
+
+Link.variants = variants;
+Link.sizes = sizes;
+Link.iconPositions = iconPositions;
+Link.backgrounds = backgrounds;
+
+export default Link;

package/react/link/link.types.ts

@@ -0,0 +1,37 @@
+import { ObjectValues } from '../types';
+
+import { sizes as TextSizes } from '../text/text.types';
+
+import type { AnchorHTMLAttributes } from 'react';
+
+export const variants = {
+  orange: 'orange',
+} as const;
+
+export const backgrounds = {
+  defualt: 'default',
+  fixed: 'fixed',
+} as const;
+
+export const sizes = {
+  interface: TextSizes.interface,
+  small: TextSizes.small,
+  basic: TextSizes.basic,
+  large: TextSizes.large,
+};
+
+export const iconPositions = {
+  prefix: 'prefix',
+  suffix: 'suffix',
+};
+
+export interface Link extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  icon?: React.ReactNode;
+  testId?: string;
+  text: string;
+  variant?: ObjectValues<typeof variants>;
+  background?: ObjectValues<typeof backgrounds>;
+  size?: ObjectValues<typeof sizes>;
+  iconPosition?: ObjectValues<typeof iconPositions>;
+}

package/react/link-button/index.ts

@@ -0,0 +1,2 @@
+import LinkButton from './link-button';
+export default LinkButton;

package/react/link-button/link-button.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import VisuallyButton from '../visually-button/visually-button';
+
+import { LinkButton as Props } from './link-button.types';
+
+const LinkButton: React.FunctionComponent<Props> & {
+  sizes: typeof VisuallyButton.sizes;
+  variants: typeof VisuallyButton.variants;
+} = ({ href, ...rest }) => (
+  <VisuallyButton elementName="a" href={href} {...rest} />
+);
+
+LinkButton.sizes = VisuallyButton.sizes;
+LinkButton.variants = VisuallyButton.variants;
+
+export default LinkButton;

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

@@ -0,0 +1,5 @@
+import { VisuallyButtonLink } from '../visually-button/visually-button.types';
+
+export type LinkButton = VisuallyButtonLink & {
+  href: string;
+};