@sats-group/ui-lib 80.3.0 → 81.0.0

package/react/filter/filter.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-import useToggle from '../hooks/use-toggle';
-import useClickOutside from '../hooks/use-click-outside';
-import useEscape from '../hooks/use-escape';
-import { useIsMounted } from '../hooks/use-is-mounted';
-import FormContent from '../form-content';
-import ChevronUp from '../icons/24/arrow-up';
-import ChevronDown from '../icons/24/arrow-down';
-import Text from '../text';
-
-import { Filter as Props } from './filter.types';
-
-const Filter: React.FunctionComponent<Props> = ({
-  formContentOptions,
-  selectedOptionsCount,
-  testTags,
-  title,
-}) => {
-  const isMounted = useIsMounted();
-  const modal = React.useRef(null);
-  const [isOpen, toggle, , close] = useToggle(false);
-
-  useClickOutside(modal, close);
-  useEscape(close);
-
-  return (
-    <div
-      className={classNames('filter', {
-        'filter--clicked': isOpen,
-      })}
-      ref={modal}
-      {...testTags}
-    >
-      {isMounted ? (
-        <div className="filter__buttons">
-          <button
-            type="button"
-            className="filter__button"
-            onClick={toggle}
-            data-test-dropdown-button
-          >
-            <Text
-              size={Text.sizes.basic}
-              theme={Text.themes.emphasis}
-              className="filter__button-text"
-            >
-              {title}
-            </Text>
-
-            <div className="filter__button-inner-right">
-              {selectedOptionsCount ? (
-                <Text
-                  className="filter__selected-options"
-                  theme={Text.themes.emphasis}
-                  size={Text.sizes.small}
-                >
-                  {selectedOptionsCount}
-                </Text>
-              ) : null}
-
-              {isOpen ? <ChevronUp /> : <ChevronDown />}
-            </div>
-          </button>
-        </div>
-      ) : (
-        <div className="filter__loading-button">
-          <div className="filter__loading-placeholder">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="112"
-              height="22"
-              viewBox="0 0 112 22"
-              fill="none"
-            >
-              <path
-                d="M0 4.5C0 2.29086 1.79086 0.5 4 0.5H108C110.209 0.5 112 2.29086 112 4.5V17.5C112 19.7091 110.209 21.5 108 21.5H4C1.79086 21.5 0 19.7091 0 17.5V4.5Z"
-                fill="#DCDEE0"
-              />
-            </svg>
-          </div>
-          <div className="filter__loading-icon">
-            <ChevronDown />
-          </div>
-        </div>
-      )}
-
-      <FormContent
-        {...formContentOptions}
-        isOpen={isOpen}
-        close={close}
-        onSubmit={toggle}
-      />
-    </div>
-  );
-};
-
-export default Filter;

package/react/filter/filter.types.ts

@@ -1,8 +0,0 @@
-import type { FormContentFilter } from '../form-content/form-content.types';
-
-export type Filter = {
-  title: string;
-  formContentOptions: FormContentFilter;
-  selectedOptionsCount?: number;
-  testTags?: { [key: string]: boolean };
-};

package/react/filter-wrapper/filter-wrapper.tsx

@@ -1,24 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import Filter from '../filter/filter';
-
-import {
-  FilterWrapper as Props,
-  BreakAtElements,
-} from './filter-wrapper.types';
-
-const FilterWrapper: React.FunctionComponent<Props> = ({ filters }) => (
-  <div
-    className={classNames('filter-wrapper', {
-      [`filter-wrapper--medium`]: filters.length <= BreakAtElements.medium,
-      [`filter-wrapper--wide`]: filters.length >= BreakAtElements.wide,
-      [`filter-wrapper--single`]: filters.length === 1,
-    })}
-  >
-    {filters.map((filter, i) => (
-      <Filter {...filter} key={i} />
-    ))}
-  </div>
-);
-
-export default FilterWrapper;

package/react/filter-wrapper/filter-wrapper.types.ts

@@ -1,10 +0,0 @@
-import { Filter } from '../filter/filter.types';
-
-export enum BreakAtElements {
-  'wide' = 3,
-  'medium' = 4,
-}
-
-export type FilterWrapper = {
-  filters: Filter[];
-};

package/react/flag/flag.tsx

@@ -1,27 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import Text from '../text';
-
-import { Flag as Props, themes, variants } from './flag.types';
-
-const Flag: React.FunctionComponent<Props> & {
-  themes: typeof themes;
-  variants: typeof variants;
-} = ({ text, theme = themes['inline-block'], variant = variants.featured }) => (
-  <div
-    className={cn('flag', {
-      [`flag--theme-${theme}`]: theme,
-      [`flag--variant-${variant}`]: variant,
-    })}
-  >
-    <Text size={Text.sizes.interface} theme={Text.themes.emphasis}>
-      {text}
-    </Text>
-  </div>
-);
-
-Flag.themes = themes;
-Flag.variants = variants;
-
-export default Flag;

package/react/flag/flag.types.ts

@@ -1,17 +0,0 @@
-import { ObjectValues } from '../types';
-
-export const themes = {
-  block: 'block',
-  'inline-block': 'inline-block',
-} as const;
-
-export const variants = {
-  featured: 'featured',
-  primary: 'primary',
-} as const;
-
-export type Flag = {
-  text: string;
-  theme?: ObjectValues<typeof themes>;
-  variant?: ObjectValues<typeof variants>;
-};

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

@@ -1,183 +0,0 @@
-import * as React from 'react';
-import Text from '../text';
-import Checkbox from '../checkbox';
-
-import ChevronRight from '../icons/24/arrow-right';
-import ChevronUp from '../icons/24/arrow-up';
-
-import { CheckboxCategory as Props } from './form-content.checkbox-list.types';
-import VisuallyHidden from '../visually-hidden';
-import { mod } from '../add-bem-modifiers';
-import Collapse from '../collapse';
-
-const CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({
-  currentlySelectedValues = [],
-  id,
-  isSearching,
-  options,
-  searchResults = [],
-  selectAll,
-  selectAllLabel,
-  setMultipleSelectedValues = () => {},
-  setSelectedValue = () => {},
-  shouldShowItems = true,
-  removeAllValues = () => {},
-}) => {
-  const isExpandable = React.useMemo(
-    () => (selectAll ? true : false),
-    [selectAll],
-  );
-  const [availableOptions] = React.useState(
-    options.filter(button => !button.disabled),
-  );
-
-  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);
-
-  const handleChange = (value: string) => {
-    setSelectedValue(id, value);
-  };
-
-  const handleSelectAll = () => {
-    if (currentlySelectedValues.length !== availableOptions.length) {
-      setMultipleSelectedValues(
-        id,
-        availableOptions.map(button => button.value),
-      );
-    } else {
-      removeAllValues(id);
-    }
-  };
-
-  React.useEffect(
-    () =>
-      isSearching
-        ? setIsOpen(true)
-        : isExpandable
-          ? setIsOpen(false)
-          : setIsOpen(true),
-    [isExpandable, isSearching, searchResults],
-  );
-
-  const disableCategory = options.every(checkbox => checkbox.disabled);
-
-  const hasSelectedValues = currentlySelectedValues.length > 0;
-
-  return (
-    <fieldset className="form-content__fieldset">
-      {isExpandable && (
-        <div
-          className={mod('form-content__chevron-button-wrapper', {
-            hidden: isSearching,
-          })}
-        >
-          {selectAll ? (
-            <div className="form-content__select-all">
-              <Checkbox
-                {...selectAll}
-                isLabelVisible={false}
-                checked={
-                  availableOptions.length > 0 &&
-                  currentlySelectedValues.length === availableOptions.length
-                }
-                onChange={handleSelectAll}
-                data-test-select-all
-                disabled={disableCategory}
-              />
-            </div>
-          ) : null}
-          <button
-            className="form-content__chevron-button"
-            onClick={() => setIsOpen(currentState => !currentState)}
-            type="button"
-          >
-            <Text
-              elementName="span"
-              className={mod('form-content__select-all-label', {
-                disabled: disableCategory,
-              })}
-              size={Text.sizes.basic}
-            >
-              {selectAllLabel}
-            </Text>
-            <div className="form-content__checkbox-category-info-wrapper">
-              {hasSelectedValues ? (
-                <Text
-                  className="form-content__checkbox-category-number"
-                  size={Text.sizes.interface}
-                >
-                  {currentlySelectedValues.length}
-                </Text>
-              ) : undefined}
-              {isOpen ? (
-                <div className="form-content__checkbox-category-icon">
-                  <ChevronUp />
-                </div>
-              ) : (
-                <div className="form-content__checkbox-category-icon">
-                  <ChevronRight />
-                </div>
-              )}
-            </div>
-          </button>
-        </div>
-      )}
-
-      <Collapse
-        duration={300}
-        animateChildren={isExpandable ? true : false}
-        isOpen={isOpen}
-      >
-        {
-          <fieldset className="form-content__fieldset">
-            {options.map(checkbox => {
-              const isInSearchResults = isSearching
-                ? searchResults.find(
-                    item =>
-                      item.key.toLowerCase() === checkbox.value.toLowerCase(),
-                  )
-                : undefined;
-
-              const isSelected = currentlySelectedValues.includes(
-                checkbox.value,
-              );
-
-              const node = (
-                <div
-                  key={checkbox.value}
-                  className={mod('form-content__checkbox-button', {
-                    nested: !isSearching && isExpandable,
-                  })}
-                >
-                  <Checkbox
-                    onChange={e => handleChange(e.target.value)}
-                    checked={isSelected}
-                    isUnderlined={true}
-                    {...checkbox}
-                  />
-                </div>
-              );
-
-              if (!isSelected && !isInSearchResults && !shouldShowItems) {
-                return;
-              }
-
-              if (isSelected && isSearching && !isInSearchResults) {
-                return (
-                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>
-                );
-              }
-
-              if (!isSelected && isSearching && !isInSearchResults) {
-                return;
-              }
-
-              return node;
-            })}
-          </fieldset>
-        }
-      </Collapse>
-    </fieldset>
-  );
-};
-
-export default CheckboxCategory;

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

@@ -1,126 +0,0 @@
-import * as React from 'react';
-import Text from '../text';
-
-import CheckboxCategory from './checkbox-category';
-
-import { CheckboxList as Props } from './form-content.checkbox-list.types';
-import { SearchItem } from './form-content.types';
-import { mod } from '../add-bem-modifiers';
-import FormContentSearch from './form-content.search';
-
-const CheckboxList: React.FC<React.PropsWithChildren<Props>> = props => {
-  const [currentlySelectedValues, setCurrentlySelectedValues] = React.useState<
-    Record<string, string[]>
-  >({});
-  const { content, emptySearchResultDescription, emptySearchResultText } =
-    props;
-
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();
-
-  const updateCurrentlySelectedValues = (id: string, value: string) => {
-    if (currentlySelectedValues[id]?.includes(value)) {
-      setCurrentlySelectedValues(prevState => {
-        const updatedValues = Object.entries(prevState).map(([id, values]) => [
-          id,
-          values.filter(option => option !== value),
-        ]);
-        return Object.fromEntries(updatedValues);
-      });
-    } else {
-      setCurrentlySelectedValues(prevState => {
-        const updatedValues = Object.entries(prevState).map(
-          ([filterGroupId, values = []]) => {
-            if (id === filterGroupId) {
-              return [filterGroupId, [...values, value]];
-            }
-
-            return [filterGroupId, values];
-          },
-        );
-        return Object.fromEntries(updatedValues);
-      });
-    }
-  };
-
-  const updateMultipleSelectedValues = (id: string, values: string[]) => {
-    setCurrentlySelectedValues(prevState => ({
-      ...prevState,
-      [id]: values,
-    }));
-  };
-
-  const removeAllValuesById = (id: string) => {
-    setCurrentlySelectedValues(prevState => {
-      const selectedValues = prevState[id] || [];
-      const updatedValues = Object.entries(prevState).map(([id, values]) => [
-        id,
-        values.filter(option => !selectedValues.includes(option)),
-      ]);
-      return Object.fromEntries(updatedValues);
-    });
-  };
-
-  React.useEffect(() => {
-    const selectedValues = content
-      .flatMap(({ categories }) => categories)
-      .filter(category => category?.id)
-      .map(category => [category?.id, category?.selectedValues]);
-    setCurrentlySelectedValues(Object.fromEntries(selectedValues));
-  }, [content]);
-
-  return (
-    <div>
-      {'searchProps' in props ? (
-        <FormContentSearch
-          {...props.searchProps}
-          searchResult={setSearchResult}
-          searchTerm={setSearchTerm}
-        />
-      ) : undefined}
-
-      {searchTerm.length > 0 && searchResult?.length === 0 && (
-        <div className="form-content__search-no-results">
-          <Text
-            className="form-content__search-no-results-text"
-            elementName="span"
-            theme={Text.themes.emphasis}
-          >
-            {emptySearchResultText}
-          </Text>
-          <span>{emptySearchResultDescription}</span>
-        </div>
-      )}
-
-      {content.map(({ categories = [], key, header }) => (
-        <React.Fragment key={key}>
-          {header && searchTerm.length === 0 ? (
-            <Text
-              className={mod('form-content__content-title', {
-                hidden: searchTerm.length > 0,
-              })}
-              theme={Text.themes.emphasis}
-            >
-              {header}
-            </Text>
-          ) : undefined}
-
-          {categories.map(category => (
-            <CheckboxCategory
-              key={category.id}
-              searchResults={searchResult}
-              isSearching={searchTerm.length > 0}
-              currentlySelectedValues={currentlySelectedValues[category.id]}
-              setSelectedValue={updateCurrentlySelectedValues}
-              setMultipleSelectedValues={updateMultipleSelectedValues}
-              removeAllValues={removeAllValuesById}
-              {...category}
-            />
-          ))}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};
-
-export default CheckboxList;

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

@@ -1,36 +0,0 @@
-import type { Checkbox } from '../checkbox/checkbox.types';
-import { ContentKeys } from '../form-content/form-content.types';
-import type { Search } from './form-content.types';
-
-export type CheckboxCategory = {
-  currentlySelectedValues?: string[];
-  id: string;
-  isSearching?: boolean;
-  options: Checkbox[];
-  searchResults?: { key: string; label: string }[];
-  selectAll?: Checkbox;
-  selectAllLabel?: string;
-  selectedValues?: string[];
-  setMultipleSelectedValues?: (id: string, values: string[]) => void;
-  setSelectedValue?: (id: string, value: string) => void;
-  shouldShowItems?: boolean;
-  removeAllValues?: (id: string) => void;
-  queryName: string; // NOTE: This is used by some systems to avoid looping through all options to get the name. This should be refactored away in those systems.
-};
-
-export type CheckboxListBase = {
-  key: ContentKeys.Checkbox;
-  content: {
-    key: string;
-    header?: string;
-    categories?: CheckboxCategory[];
-  }[];
-  emptySearchResultText?: string;
-  emptySearchResultDescription?: string;
-};
-
-export type CheckboxListSearch = CheckboxListBase & {
-  searchProps: Search;
-};
-
-export type CheckboxList = CheckboxListBase | CheckboxListSearch;

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

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import Radio from '../radio';
-import Text from '../text';
-import FormContentSearch from './form-content.search';
-
-import { RadioList as Props, SearchItem } from './form-content.types';
-import classNames from 'classnames';
-
-const RadioList: React.FC<Props> = props => {
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();
-  return (
-    <div>
-      {'searchProps' in props ? (
-        <FormContentSearch
-          {...props.searchProps}
-          searchResult={setSearchResult}
-          searchTerm={setSearchTerm}
-        />
-      ) : undefined}
-      {props.categories.map((category, categoryIndex) => (
-        <div key={categoryIndex}>
-          {category.header &&
-          category.options.length > 0 &&
-          searchTerm.length === 0 ? (
-            <Text
-              className={classNames('form-content__group-title', {
-                hidden: searchTerm.length > 0,
-              })}
-              theme={Text.themes.emphasis}
-            >
-              {category.header}
-            </Text>
-          ) : undefined}
-          {category.options.map((radio, i) => {
-            const isInSearchResults =
-              searchTerm.length > 0
-                ? searchResult?.find(
-                    item =>
-                      item.key.toLowerCase() === radio.value.toLowerCase(),
-                  )
-                : undefined;
-
-            if (searchTerm.length > 0 && !isInSearchResults) return;
-
-            return (
-              <div key={i} className="form-content__radio-button">
-                <Radio {...radio} isUnderline={true} />
-              </div>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default RadioList;

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import TextInput from '../text-input';
-
-import { Range as Props } from './form-content.range.types';
-
-const Range: React.FC<React.PropsWithChildren<Props>> = ({ max, min }) => {
-  return (
-    <div className="form-content__range">
-      <div className="form-content__range-input">
-        <TextInput {...min} type="number" />
-      </div>
-      <div className="form-content__range-line"></div>
-      <div className="form-content__range-input">
-        <TextInput {...max} type="number" />
-      </div>
-    </div>
-  );
-};
-
-export default Range;

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

@@ -1,47 +0,0 @@
-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) : []),
-    [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;