@4alldigital/foundation-ui--core 3.0.0

package/src/features/Search/config/config-helper.ts

@@ -0,0 +1,219 @@
+// import config from "../config/engine.json";
+
+/**
+ * This file abstracts most logic around the configuration of the Reference UI.
+ *
+ * Configuration is an important part of the "reusability" and "generic-ness" of
+ * the Reference UI, but if you are using this app as a starting point for own
+ * project, everything related to configuration can largely be thrown away. To
+ * that end, this file attempts to contain most of that logic to one place.
+ */
+
+export function getConfig(): any {
+  if (process.env.NODE_ENV === 'test') {
+    return {};
+  }
+
+  // if (config.engineName) return config;
+
+  // if (
+  //   typeof window !== "undefined" &&
+  //   window.appConfig &&
+  //   window.appConfig.engineName
+  // ) {
+  //   return window.appConfig;
+  // }
+
+  return {};
+}
+
+function toLowerCase(string) {
+  if (string) return string.toLowerCase();
+}
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function getTitleField() {
+  // If no title field configuration has been provided, we attempt
+  // to use a "title" field, if one exists
+  return getConfig().titleField || 'title';
+}
+
+export function getUrlField() {
+  return getConfig().urlField;
+}
+
+export function getThumbnailField() {
+  return getConfig().thumbnailField;
+}
+
+export function getFacetFields() {
+  return getConfig().facets || [];
+}
+
+export function getSortFields() {
+  return getConfig().sortFields || [];
+}
+
+export function getResultTitle(result) {
+  const titleField = getTitleField();
+
+  return result.getSnippet(titleField);
+}
+
+// Because if a field is configured to display as a "title", we don't want
+// to display it again in the fields list
+export function stripUnnecessaryResultFields(resultFields) {
+  return Object.keys(resultFields).reduce((acc, n) => {
+    if (
+      [
+        '_meta',
+        'id',
+        toLowerCase(getTitleField()),
+        toLowerCase(getUrlField()),
+        toLowerCase(getThumbnailField()),
+      ].includes(toLowerCase(n))
+    ) {
+      return acc;
+    }
+
+    acc[n] = resultFields[n];
+    return acc;
+  }, {});
+}
+
+export function buildSearchOptionsFromConfig() {
+  const config = getConfig();
+  const searchFields = (config.searchFields || config.fields || []).reduce((acc, n) => {
+    acc = acc || {};
+    acc[n] = {};
+    return acc;
+  }, undefined);
+
+  const resultFields = (config.resultFields || config.fields || []).reduce((acc, n) => {
+    acc = acc || {};
+    acc[n] = {
+      raw: {},
+      snippet: {
+        size: 100,
+        fallback: true,
+      },
+    };
+    return acc;
+  }, undefined);
+
+  // We can't use url, thumbnail, or title fields unless they're actually
+  // in the reuslts.
+  if (config.urlField) {
+    resultFields[config.urlField] = {
+      raw: {},
+      snippet: {
+        size: 100,
+        fallback: true,
+      },
+    };
+  }
+
+  if (config.thumbnailField) {
+    resultFields[config.thumbnailField] = {
+      raw: {},
+      snippet: {
+        size: 100,
+        fallback: true,
+      },
+    };
+  }
+
+  if (config.titleField) {
+    resultFields[config.titleField] = {
+      raw: {},
+      snippet: {
+        size: 100,
+        fallback: true,
+      },
+    };
+  }
+
+  const searchOptions: any = {};
+  searchOptions.result_fields = resultFields;
+  searchOptions.search_fields = searchFields;
+  return searchOptions;
+}
+
+export function buildFacetConfigFromConfig() {
+  const config = getConfig();
+
+  const facets = (config.facets || []).reduce((acc, n) => {
+    acc = acc || {};
+    acc[n] = {
+      type: 'value',
+      size: 100,
+    };
+    return acc;
+  }, undefined);
+
+  return facets;
+}
+
+export function buildSortOptionsFromConfig() {
+  const config = getConfig();
+  return [
+    {
+      name: 'Relevance',
+      value: '',
+      direction: '',
+    },
+    ...(config.sortFields || []).reduce((acc, sortField) => {
+      acc.push({
+        name: `${capitalizeFirstLetter(sortField)} ASC`,
+        value: sortField,
+        direction: 'asc',
+      });
+      acc.push({
+        name: `${capitalizeFirstLetter(sortField)} DESC`,
+        value: sortField,
+        direction: 'desc',
+      });
+      return acc;
+    }, []),
+  ];
+}
+
+export function buildAutocompleteQueryConfig() {
+  const querySuggestFields = getConfig().querySuggestFields;
+  if (!querySuggestFields || !Array.isArray(querySuggestFields) || querySuggestFields.length === 0) {
+    return {};
+  }
+
+  return {
+    suggestions: {
+      types: {
+        documents: {
+          fields: getConfig().querySuggestFields,
+        },
+      },
+    },
+  };
+}
+
+export function getDefaultConnectConfig() {
+  return {
+    host:
+      process.env.NEXT_PUBLIC_ELASTICSEARCH_HOST ||
+      process.env.REACT_APP_ELASTICSEARCH_HOST ||
+      process.env.STORYBOOK_ELASTICSEARCH_HOST ||
+      'http://localhost:9200',
+    index:
+      process.env.NEXT_PUBLIC_ELASTICSEARCH_INDEX ||
+      process.env.REACT_APP_ELASTICSEARCH_INDEX ||
+      process.env.STORYBOOK_ELASTICSEARCH_INDEX ||
+      '',
+    apiKey:
+      process.env.NEXT_PUBLIC_ELASTICSEARCH_API_KEY ||
+      process.env.REACT_APP_ELASTICSEARCH_API_KEY ||
+      process.env.STORYBOOK_ELASTICSEARCH_API_KEY ||
+      '',
+  };
+}

package/src/features/Search/index.ts

@@ -0,0 +1 @@
+export { default } from './Search';

package/src/features/Search/view-helpers/appendClassName.ts

@@ -0,0 +1,14 @@
+function getNewClassName(newClassName: string | string[]) {
+  if (!Array.isArray(newClassName)) return newClassName;
+
+  return newClassName.filter((name) => name).join(' ');
+}
+
+export default function appendClassName(
+  baseClassName?: string | string[] | undefined,
+  newClassName?: string | string[] | undefined,
+): string {
+  if (!newClassName) return (Array.isArray(baseClassName) ? baseClassName.join(' ') : baseClassName) || '';
+  if (!baseClassName) return getNewClassName(newClassName) || '';
+  return `${baseClassName} ${getNewClassName(newClassName)}`;
+}

package/src/features/Search/view-helpers/formatResult.ts

@@ -0,0 +1,97 @@
+function isFieldValueWrapper(object: any) {
+  return (
+    object &&
+    (Object.prototype.hasOwnProperty.call(object, 'raw') || Object.prototype.hasOwnProperty.call(object, 'snippet'))
+  );
+}
+
+// Returns true for objects like this:
+// objectField: {
+//     objectSubField1: { raw: "one" },
+//     objectSubField2: { raw: "two" }
+// }
+// And false for objects like this:
+// objectField: { raw: "one" }
+function isNestedField(result: any, field: any) {
+  return (
+    result &&
+    result[field] &&
+    field !== '_meta' &&
+    typeof result[field] === 'object' &&
+    !isFieldValueWrapper(result[field])
+  );
+}
+
+// Takes any value and removes the wrapper around deepest values
+// (removes the wrapper Object with "raw" and/or "snippet" fields)
+// See tests for examples
+function cleanValueWrappers(value: any): any {
+  if (isFieldValueWrapper(value)) {
+    return getEscapedField(value);
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(cleanValueWrappers);
+  }
+
+  if (typeof value === 'object') {
+    return Object.entries(value).reduce((acc: any, [key, value]) => {
+      acc[key] = cleanValueWrappers(value);
+      return acc;
+    }, {});
+  }
+
+  return value;
+}
+
+function getFieldType(object: any, type: any) {
+  if (object) return object[type];
+}
+
+export function getRaw(object: any) {
+  return getFieldType(object, 'raw');
+}
+
+function getSnippet(object: any) {
+  return getFieldType(object, 'snippet');
+}
+
+function htmlEscape(str: string) {
+  if (!str) return '';
+
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+export function getEscapedField(maybeObject: any) {
+  // Fallback to raw values here, because non-string fields
+  // will not have a snippet fallback. Raw values MUST be html escaped.
+  const safeField = getSnippet(maybeObject) || htmlEscape(getRaw(maybeObject));
+  return Array.isArray(safeField) ? safeField.join(', ') : safeField;
+}
+
+export function formatResult(result: any) {
+  return Object.keys(result).reduce((acc, field) => {
+    if (isNestedField(result, field)) {
+      return {
+        ...acc,
+        [field]: JSON.stringify(cleanValueWrappers(result[field])),
+      };
+    }
+
+    // If we receive an arbitrary value from the response, we may not properly
+    // handle it, so we should filter out arbitrary values here.
+    //
+    // I.e.,
+    // Arbitrary value: "_metaField: '1939191'"
+    // vs.
+    // FieldValueWrapper: "_metaField: {raw: '1939191'}"
+    if (!isFieldValueWrapper(result[field])) return acc;
+
+    return { ...acc, [field]: getEscapedField(result[field]) };
+  }, {});
+}

package/src/features/Search/view-helpers/getFilterValueDisplay.ts

@@ -0,0 +1,10 @@
+/*
+Since Filter Values come in many different varieties, this helper
+encapsulates the logic for determining how to show the label of that
+filter in the UI.
+*/
+export default function getFilterValueDisplay(filterValue: any): string {
+  if (filterValue === undefined || filterValue === null) return '';
+  if (Object.prototype.hasOwnProperty.call(filterValue, 'name')) return filterValue.name;
+  return String(filterValue);
+}

package/src/features/Search/view-helpers/getUrlSanitizer.ts

@@ -0,0 +1,23 @@
+const VALID_PROTOCOLS = ['http:', 'https:'];
+
+/**
+ *
+ * @param {URL} URLParser URL interface provided by browser https://developer.mozilla.org/en-US/docs/Web/API/URL
+ * @param {String} currentLocation String representation of the browser's current location
+ */
+export default function getUrlSanitizer(URLParser: typeof URL, currentLocation: string) {
+  // This function is curried so that dependencies can be injected and don't need to be mocked in tests.
+  return (url: string) => {
+    let parsedUrl;
+
+    try {
+      // Attempts to parse a URL as relative
+      parsedUrl = new URLParser(url, currentLocation);
+    } catch {
+      // If it fails, it means the URL is invalid or not relative
+      return '';
+    }
+
+    return parsedUrl && VALID_PROTOCOLS.includes(parsedUrl.protocol) ? url : '';
+  };
+}

package/src/features/Search/view-helpers/index.ts

@@ -0,0 +1,4 @@
+export { default as getFilterValueDisplay } from './getFilterValueDisplay';
+export { default as appendClassName } from './appendClassName';
+export { default as getUrlSanitizer } from './getUrlSanitizer';
+export { formatResult, getEscapedField, getRaw } from './formatResult';

package/src/features/Search/views/Layout/Layout.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import cx from 'classnames';
+import { isMobileOnly } from 'react-device-detect';
+import { Props } from './Layout.types';
+// import Sidebar from "../Sidebar";
+
+function Layout({
+  className,
+  children,
+  header,
+  bodyContent,
+  bodyFooter,
+  bodyHeader,
+  sideContent,
+  showSidebar,
+}: Props) {
+  const sidebarClasses = cx(
+    'hidden md:block fixed md:relative w-full h-full left-0 md:left-auto top-0 md:top-auto px-2 pb-4 md:pt-6 md:px-6 md:pb-auto md:pl-0',
+    { 'hidden md:hidden': !sideContent },
+  );
+
+  return (
+    <>
+      <div className={cx('w-full flex flex-col', className)}>
+        <div className="m-auto md:py-0 w-full">{header}</div>
+        <div
+          className={cx('md:grid m-auto md:py-0 w-full', {
+            'md:grid-cols-1': !sideContent,
+            'md:grid-cols-[1fr_3fr]': sideContent,
+          })}>
+          {!isMobileOnly && <div className={sidebarClasses}>{sideContent}</div>}
+          <div
+            className={cx('p-0 pt-2 md:p-6 md:pr-0', {
+              'md:pl-0': !sideContent,
+            })}>
+            <div className="flex flex-row gap-8 items-center justify-end">{bodyHeader}</div>
+            <div className="relative">{children || bodyContent}</div>
+            <div className="flex items-center justify-around">{bodyFooter}</div>
+          </div>
+        </div>
+      </div>
+      {isMobileOnly && showSidebar && <div className="fixed z-10 w-full top-0 left-0 right-0 bottom-0 bg-body-bg px-4 overflow-scroll">{sideContent}</div>}
+    </>
+  );
+}
+
+Layout.displayName = 'Layout';
+
+export default Layout;
+export type { Props };

package/src/features/Search/views/Layout/Layout.types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface Props {
+  className?: string;
+  children?: ReactNode;
+  header?: ReactNode;
+  bodyContent?: ReactNode;
+  bodyFooter?: ReactNode;
+  bodyHeader?: ReactNode;
+  sideContent?: ReactNode;
+  noSidebar?: boolean;
+  showSidebar?: boolean;
+}

package/src/features/Search/views/Layout/index.ts

@@ -0,0 +1 @@
+export { default } from './Layout';

package/src/features/Search/views/MultiCheckboxFacet/MultiCheckboxFacet.tsx

@@ -0,0 +1,85 @@
+import type { FieldValue } from '@elastic/search-ui';
+import cx from 'classnames';
+import { getFilterValueDisplay } from '../../view-helpers';
+import { Props } from './MultiCheckboxFacet.types';
+import Copy from '../../../../components/Copy';
+import { COPY_SIZE, COPY_TAG, COPY_TRANSFORM } from '../../../../components/Copy/Copy.types';
+import Button from '../../../../components/Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../../../../components/Button/Button.types';
+import Checkbox from '../../../../components/Checkbox';
+import TextInput from '../../../../components/TextInput';
+import { InputType } from '../../../../components/TextInput/TextInput.types';
+import Label from '../../../../components/Label';
+
+function MultiCheckboxFacet({
+  className,
+  label,
+  onMoreClick,
+  onRemove,
+  onSelect,
+  options,
+  showMore,
+  showSearch,
+  onSearch,
+  searchPlaceholder,
+}: Props) {
+  if (!options) {
+    return <>Options required</>;
+  }
+
+  return (
+    <fieldset className={cx('m-0 p-0 mt-4 mb-2 border-none', className)}>
+      <Label className="text-sm" transform={COPY_TRANSFORM.UPPERCASE}>
+        {label}
+      </Label>
+
+      {showSearch && (
+        <div className="mt-1">
+          <TextInput
+            type={InputType.SEARCH}
+            placeholder={searchPlaceholder || 'Search'}
+            onChange={(e) => {
+              onSearch(e.target.value);
+            }}
+          />
+        </div>
+      )}
+
+      <div className="my-4">
+        {options?.length < 1 && <div>No matching options</div>}
+        {options?.map((option) => {
+          const checked = option.selected;
+          const value = option.value as FieldValue;
+          const filterDisplayValue = getFilterValueDisplay(value);
+          return (
+            <div key={filterDisplayValue} className="flex justify-between pb-2">
+              <Checkbox
+                id={`facet_${label}${filterDisplayValue}`}
+                data-transaction-name={`facet - ${label}`}
+                checked={checked}
+                onChange={() => (checked ? onRemove(value) : onSelect(value))}
+                label={filterDisplayValue}
+              />
+              <Copy as={COPY_TAG.SPAN} size={COPY_SIZE.SMALL}>{option.count.toLocaleString('en')}</Copy>
+            </div>
+          );
+        })}
+      </div>
+
+      {showMore && (
+        <Button
+          size={BTN_SIZES.SMALL}
+          variant={BTN_VARIANTS.TERTIARY}
+          onClick={onMoreClick}
+          aria-label="Show more options">
+          + More
+        </Button>
+      )}
+    </fieldset>
+  );
+}
+
+MultiCheckboxFacet.displayName = 'MultiCheckboxFacet';
+
+export default MultiCheckboxFacet;
+export type { Props };

package/src/features/Search/views/MultiCheckboxFacet/MultiCheckboxFacet.types.ts

@@ -0,0 +1,5 @@
+import { FacetViewProps } from '@elastic/react-search-ui-views';
+
+export interface Props extends FacetViewProps {
+  custom?: string;
+}

package/src/features/Search/views/MultiCheckboxFacet/index.ts

@@ -0,0 +1 @@
+export { default } from './MultiCheckboxFacet';

package/src/features/Search/views/Paging/Paging.tsx

@@ -0,0 +1,35 @@
+import cx from 'classnames';
+import RCPagination from 'rc-pagination';
+import enUsLocale from 'rc-pagination/lib/locale/en_US';
+import { Props } from './Paging.types';
+import Icon from '../../../../components/Icon';
+
+function Paging({ className, current, resultsPerPage = 10, onChange, totalPages, ...rest }: Props) {
+  return (
+    <RCPagination
+      current={current}
+      onChange={onChange}
+      simple
+      pageSize={resultsPerPage}
+      total={totalPages * resultsPerPage}
+      className={cx('m-0 p-0 list-none text-body-text flex gap-2 text-center items-center [&>li>span]:px-2 [&>li>input]:text-black [&>li>input]:rounded [&>li>input]:text-center', className)}
+      locale={enUsLocale}
+      prevIcon={
+        <div className="text-body-text">
+          <Icon name="mdi:chevron-left" />
+        </div>
+      }
+      nextIcon={
+        <div className="text-body-text">
+          <Icon name="mdi:chevron-right" />
+        </div>
+      }
+      {...rest}
+    />
+  );
+}
+
+Paging.displayName = 'Paging';
+
+export default Paging;
+export type { Props };

package/src/features/Search/views/Paging/Paging.types.ts

@@ -0,0 +1,24 @@
+import { Rename } from '@elastic/react-search-ui-views';
+import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
+import { SearchContextState } from '@elastic/search-ui';
+
+export type PagingContainerContext = Pick<
+  SearchContextState,
+  'current' | 'resultsPerPage' | 'totalPages' | 'setCurrent'
+>;
+
+export type PagingContainerProps = BaseContainerProps &
+  PagingContainerContext & {
+    view?: React.ComponentType<PagingViewProps>;
+  };
+
+export type PagingViewProps = Rename<
+  BaseContainerProps & PagingContainerContext,
+  {
+    setCurrent: 'onChange';
+  }
+>;
+
+export interface Props extends PagingViewProps {
+  custom?: string;
+}

package/src/features/Search/views/Paging/index.ts

@@ -0,0 +1 @@
+export { default } from './Paging';

package/src/features/Search/views/PagingInfo/PagingInfo.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './PagingInfo.types';
+
+function PagingInfo({
+  className,
+  end,
+  searchTerm,
+  start,
+  totalResults,
+  ...rest
+}: Props & React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cx("m-0 p-0 flex-1", className)} {...rest}>
+      Showing{" "}
+      <strong>
+        {start} - {end}
+      </strong>{" "}
+      out of <strong>{totalResults}</strong>
+      {searchTerm && (
+        <>
+          {" "}
+          for: <em>{searchTerm}</em>
+        </>
+      )}
+    </div>
+  );
+}
+
+PagingInfo.displayName = 'PagingInfo';
+
+export default PagingInfo;
+export type { Props };
+

package/src/features/Search/views/PagingInfo/PagingInfo.types.ts

@@ -0,0 +1,26 @@
+import { Rename } from '@elastic/react-search-ui-views';
+import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
+import { SearchContextState } from '@elastic/search-ui';
+
+export type PagingInfoContainerContext = Pick<
+  SearchContextState,
+  'pagingStart' | 'pagingEnd' | 'resultSearchTerm' | 'totalResults'
+>;
+
+export type PagingInfoContainerProps = BaseContainerProps &
+  PagingInfoContainerContext & {
+    view?: React.ComponentType<PagingInfoViewProps>;
+  };
+
+export type PagingInfoViewProps = Rename<
+  BaseContainerProps & PagingInfoContainerContext,
+  {
+    pagingStart: 'start';
+    resultSearchTerm: 'searchTerm';
+    pagingEnd: 'end';
+  }
+>;
+
+export interface Props extends PagingInfoViewProps {
+  custom?: string;
+}

package/src/features/Search/views/PagingInfo/index.ts

@@ -0,0 +1 @@
+export { default } from './PagingInfo';