@4alldigital/foundation-ui--core 3.0.0

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

@@ -0,0 +1,84 @@
+import { Props } from './Result.types';
+import cx from 'classnames';
+import he from 'he';
+import { getEscapedField } from '../../view-helpers';
+import Card from '../../../../components/Card';
+import { CardVariant, ImageData } from '../../../../components/Card/Card.types';
+import { ResultAsTypes } from '../../Search.types';
+
+function Result({
+  className,
+  result,
+  // onClickLink,
+  as,
+  cardMap = {
+    idField: { fieldName: 'uuid' },
+    titleField: { fieldName: 'title' },
+    descriptionField: { fieldName: 'description' },
+    imageField: { fieldName: 'image' },
+  },
+}: Props) {
+  // Pass fields into the relevant Card.
+  // const fields: any = formatResult(result);
+  const { idField, titleField, imageField, videoField, descriptionField, metaDataFields, cardProps } = cardMap;
+
+  const id: string = idField && getEscapedField(result[idField.fieldName]);
+  const title = titleField && getEscapedField(result[titleField.fieldName]);
+  const defaultImageUrl = imageField && getEscapedField(result[imageField.fieldName]);
+  const imageUrl = defaultImageUrl ? defaultImageUrl : getEscapedField(result['image']);
+  const videoUrl =
+    videoField && videoField.formatter
+      ? videoField.formatter(getEscapedField(result[videoField.fieldName]))
+      : videoField && getEscapedField(result[videoField.fieldName]);
+  const description = descriptionField && getEscapedField(result[descriptionField.fieldName]);
+  const metaData =
+    metaDataFields &&
+    metaDataFields.map(field => {
+      const value = getEscapedField(result[field.fieldName]);
+      if (field.formatter && typeof field.formatter === 'function') {
+        return field.formatter(value);
+      }
+    });
+
+  const resultView = () => {
+    const imageData: ImageData = {
+      src: imageUrl || '',
+      alt: title || '',
+      title: title || '',
+      width: 500,
+      height: 500,
+    };
+
+    // Support dynamic actionsData as a function that receives the result
+    const actions = typeof cardMap.actionsData === 'function'
+      ? cardMap.actionsData(result)
+      : cardMap.actionsData;
+
+    const cardData = {
+      id,
+      title: he.decode(title),
+      image: imageData,
+      video: videoUrl,
+      description,
+      metaData,
+      actions,
+      onClick: cardMap.onClickLink,
+    };
+
+    switch (as) {
+      case ResultAsTypes.cardMedia:
+        return <Card variant={CardVariant.MEDIA} data={cardData} {...cardProps} />;
+      case ResultAsTypes.cardVideo:
+        return <Card variant={CardVariant.VIDEO} data={cardData} {...cardProps} isMuted={false} />;
+      default:
+        return <Card variant={CardVariant.BASIC} data={cardData} {...cardProps} />;
+    }
+  };
+
+  return <li className={cx('relative', className)}>{resultView()}</li>;
+}
+
+Result.displayName = 'Result';
+
+export default Result;
+export type { Props };

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

@@ -0,0 +1,47 @@
+import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
+import { SearchContextState } from '@elastic/search-ui';
+import { ResultAsTypes } from '../../Search.types';
+import { Actions } from '../../../../components/Card/Card.types';
+
+export type ResultContainerContext = Pick<SearchContextState, 'trackClickThrough'>;
+
+export type ResultContainerProps = BaseContainerProps &
+  ResultContainerContext & {
+    view?: React.ComponentType<ResultViewProps>;
+    clickThroughTags?: string[];
+    titleField?: string;
+    urlField?: string;
+    thumbnailField?: string;
+    result: any; // TODO: typing `SearchResult`;
+    shouldTrackClickThrough?: boolean;
+  };
+
+export type ResultViewProps = BaseContainerProps &
+  Pick<ResultContainerProps, 'result' | 'titleField' | 'urlField' | 'thumbnailField'> & {
+    key?: string;
+    onClickLink: () => void;
+  };
+
+interface FormatterField {
+  fieldName: string;
+  formatter?: (value: any) => any;
+}
+
+export interface cardMap {
+  idField: FormatterField;
+  titleField: FormatterField;
+  descriptionField?: FormatterField;
+  imageField?: FormatterField;
+  videoField?: FormatterField;
+  metaDataFields?: FormatterField[];
+  clickThroughPathField?: string;
+  actionsData?: Actions | ((result: any) => Actions);
+  cardProps?: any; // TODO: typing `CardProps`;
+  onClickLink?: (data: any) => void;
+}
+
+export interface Props extends ResultViewProps {
+  custom?: string;
+  as: ResultAsTypes;
+  cardMap?: cardMap;
+}

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

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

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

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import { Props } from './Results.types';
+
+function Results({ children, className, gridClasses, ...rest }: Props & React.HTMLAttributes<HTMLUListElement>) {
+  const layoutClasses = gridClasses || 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
+  return (
+    <ul className={cx('relative grid gap-4 mb-4', layoutClasses, className)} {...rest}>
+      {children}
+    </ul>
+  );
+}
+
+Results.displayName = 'Results';
+
+export default Results;
+export type { Props };

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

@@ -0,0 +1,24 @@
+import { ResultViewProps } from "@elastic/react-search-ui-views";
+import { BaseContainerProps } from "@elastic/react-search-ui/lib/esm/types";
+import { SearchContextState } from "@elastic/search-ui";
+
+export type ResultsContainerContext = Pick<SearchContextState, 'results'>;
+
+export type ResultsContainerProps = BaseContainerProps &
+  ResultsContainerContext & {
+    view?: React.ComponentType<ResultsViewProps>;
+    resultView?: React.ComponentType<ResultViewProps>;
+    clickThroughTags?: string[];
+    titleField?: string;
+    urlField?: string;
+    thumbnailField?: string;
+    results: any[]; // SearchResult[]; TODO type the RESULT
+    shouldTrackClickThrough?: boolean;
+  };
+
+export type ResultsViewProps = BaseContainerProps;
+
+export interface Props extends ResultsViewProps {
+  custom?: string;
+  gridClasses?: string;
+}

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

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

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

@@ -0,0 +1,32 @@
+import cx from 'classnames';
+import { Props } from './ResultsPerPage.types';
+import Label from '../../../../components/Label';
+import FormSelect from '../../../../components/FormSelect';
+import { COPY_TRANSFORM } from '../../../../components/Copy/Copy.types';
+import STRINGS from '../../../../translations';
+
+function ResultsPerPage({ className, onChange, options, label }: Props) {
+  // Return nothing without options.
+  if (!options) {
+    return <></>;
+  }
+
+  return (
+    <div className={cx('m-0 p-0 mb-2 border-none', className)}>
+      <Label className="text-sm mr-2" transform={COPY_TRANSFORM.UPPERCASE}>
+        {STRINGS.UI.SHOW}
+      </Label>
+      <FormSelect
+        id={label || 'ResultsPerPage'}
+        options={options.map((option) => ({ label: option.toString(), value: option }))}
+        onChange={(o: any) => onChange(o.target.value)}
+        className="min-w-20"
+      />
+    </div>
+  );
+}
+
+ResultsPerPage.displayName = 'ResultsPerPage';
+
+export default ResultsPerPage;
+export type { Props };

package/src/features/Search/views/ResultsPerPage/ResultsPerPage.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 ResultsPerPageContainerContext = Pick<SearchContextState, 'resultsPerPage' | 'setResultsPerPage'>;
+
+export type ResultsPerPageContainerProps = BaseContainerProps &
+  ResultsPerPageContainerContext & {
+    view?: React.ComponentType<ResultsPerPageViewProps>;
+    options?: number[];
+  };
+
+export type ResultsPerPageViewProps = BaseContainerProps &
+  Pick<ResultsPerPageContainerProps, 'options'> &
+  Rename<
+    ResultsPerPageContainerContext,
+    {
+      setResultsPerPage: 'onChange';
+      resultsPerPage: 'value';
+    }
+  >;
+
+export interface Props extends ResultsPerPageViewProps {
+  custom?: string;
+  label?: string;
+}

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

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

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

@@ -0,0 +1,51 @@
+import { BTN_TYPES, BTN_VARIANTS } from '../../../../components/Button/Button.types';
+import Button from '../../../../components/Button';
+import TextInput from '../../../../components/TextInput';
+import { InputType } from '../../../../components/TextInput/TextInput.types';
+import { Props } from './SearchBox.types';
+import cx from 'classnames';
+
+function SearchBox({
+  className,
+  onChange,
+  onSubmit,
+  wasSearched,
+  placeholder,
+  allowReset = false,
+  resetTrigger = () => {},
+}: Props) {
+  return (
+    <div className={cx('m-0 md:px-48', className)}>
+      <form onSubmit={e => onSubmit(e)} className="flex items-center">
+        <div className="flex-1 bg-body-bg dark:bg-body-bg-dark bg-opacity-80 rounded">
+          <TextInput
+            name="SearchBoxInput"
+            type={InputType.TEXT}
+            placeholder={placeholder || 'Search now...'}
+            onChange={e => {
+              onChange(e?.target?.value);
+            }}
+          />
+        </div>
+        <div className="pl-4">
+          <div className="flex flex-row gap-2">
+            {wasSearched && allowReset && (
+              <Button
+                type={BTN_TYPES.BUTTON}
+                onClick={() => resetTrigger('', { shouldClearFilters: false })}
+                variant={BTN_VARIANTS.SECONDARY}
+                icon="mdi:restore"
+              />
+            )}
+            <Button type={BTN_TYPES.SUBMIT} variant={BTN_VARIANTS.PRIMARY} icon="mdi:magnify" />
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+SearchBox.displayName = 'SearchBox';
+
+export default SearchBox;
+export type { Props };

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

@@ -0,0 +1,10 @@
+export interface Props {
+  onChange: (data?: any) => void;
+  onSubmit: (data?: any) => void;
+  className?: string;
+  value?: string;
+  wasSearched?: boolean;
+  placeholder?: string;
+  allowReset?: boolean;
+  resetTrigger?: (data?: any, options?: any) => void;
+}

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Props } from './Sidebar.types';
+
+const Sidebar = ({ foo }: Props) => {
+    return (
+      <div data-testid="Sidebar" className="foo-bar">{foo}</div>
+    );
+};
+
+Sidebar.displayName = 'Sidebar';
+
+export default Sidebar;
+export type { Props };
+

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

@@ -0,0 +1,3 @@
+export interface Props {
+    foo: string;
+}

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

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

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import cx from 'classnames';
+import { getFilterValueDisplay } from '../../view-helpers';
+import { Props } from './SingleLinksFacet.types';
+import type { FieldValue } from '@elastic/search-ui';
+import Label from '../../../../components/Label';
+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 } from '../../../../components/Button/Button.types';
+import Icon from '../../../../components/Icon';
+
+function SingleLinksFacet({ className, label, onRemove, onSelect, options }: Props) {
+  const value = options.filter((o) => o.selected).map((o) => o.value)[0];
+  return (
+    <fieldset className={cx('m-0 p-0 mt-4 mb-2 border-none', className)}>
+      <div>
+        <Label transform={COPY_TRANSFORM.UPPERCASE}>
+          {label}
+        </Label>
+        <ul className="ul list-none p-0">
+          {value && (
+            <li className="m-0 flex justify-between items-center flex-1">
+              {getFilterValueDisplay(value)}
+              <span className="ml-1 px-1">
+                <Button onClick={() => onRemove(value as FieldValue)} size={BTN_SIZES.SMALL} rounded>
+                  <Icon name="mdi:close" />
+                </Button>
+              </span>
+            </li>
+          )}
+          {!value &&
+            options.map((option) => {
+              const filterValue = getFilterValueDisplay(option.value);
+              return (
+                <li className="m-0 flex justify-between" key={filterValue}>
+                  <a
+                    className="no-underline visited:text-body-text"
+                    data-transaction-name={`facet - ${label}`}
+                    href="/"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onSelect(option.value as FieldValue);
+                    }}>
+                    <label className="label pl-0 leading-none text-body-text dark:text-body-text-dark">{filterValue}</label>
+                  </a>
+                  <Copy as={COPY_TAG.SPAN} size={COPY_SIZE.MEDIUM}>
+                    {option.count.toLocaleString('en')}
+                  </Copy>
+                </li>
+              );
+            })}
+        </ul>
+      </div>
+    </fieldset>
+  );
+}
+
+SingleLinksFacet.displayName = 'SingleLinksFacet';
+
+export default SingleLinksFacet;
+export type { Props };

package/src/features/Search/views/SingleLinksFacet/SingleLinksFacet.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/SingleLinksFacet/index.ts

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

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

@@ -0,0 +1,34 @@
+import cx from 'classnames';
+import { Props } from './SingleSelectFacet.types';
+import FormSelect from '../../../../components/FormSelect';
+import Label from '../../../../components/Label';
+import { COPY_TRANSFORM } from '../../../../components/Copy/Copy.types';
+
+function SingleSelectFacet({ className, label, onChange, options }: Props) {
+  const selectBoxOptions = options.map(option => {
+    return {
+      value: option.value,
+      label: `${option.value} (${option.count})`,
+    };
+  });
+  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>
+      <FormSelect
+        id={label}
+        options={selectBoxOptions}
+        onChange={(o: any) => {
+          console.debug('SingleSelectFacet onChange', o.target.value);
+          onChange(o.target.value);
+        }}
+      />
+    </fieldset>
+  );
+}
+
+SingleSelectFacet.displayName = 'SingleSelectFacet';
+
+export default SingleSelectFacet;
+export type { Props };

package/src/features/Search/views/SingleSelectFacet/SingleSelectFacet.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/SingleSelectFacet/index.ts

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

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

@@ -0,0 +1,24 @@
+import cx from 'classnames';
+import { Props } from './Sorting.types';
+import FormSelect from '../../../../components/FormSelect';
+import { COPY_TRANSFORM } from '../../../../components/Copy/Copy.types';
+import Label from '../../../../components/Label';
+
+function Sorting({ className, label, onChange, options }: Props) {
+  if (!options) {
+    return null;
+  }
+  return (
+    <div className={cx('m-0 p-0 mb-2 border-none', className)}>
+      <Label className="text-sm" transform={COPY_TRANSFORM.UPPERCASE}>
+        {label}
+      </Label>
+      <FormSelect id={label || 'Sorting'} options={options} onChange={(o: any) => onChange(o.target.value)} />
+    </div>
+  );
+}
+
+Sorting.displayName = 'Sorting';
+
+export default Sorting;
+export type { Props };

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

@@ -0,0 +1,25 @@
+import { BaseContainerProps } from '@elastic/react-search-ui/lib/esm/types';
+import { SearchContextState } from '@elastic/search-ui';
+
+export type SortingContainerContext = Pick<SearchContextState, 'sortDirection' | 'sortField' | 'sortList' | 'setSort'>;
+
+export type SortingContainerProps = BaseContainerProps &
+  SortingContainerContext & {
+    view?: React.ComponentType<SortingViewProps>;
+    label?: string;
+    sortOptions: any;
+  };
+
+export type SortingViewProps = BaseContainerProps &
+  Pick<SortingContainerProps, 'label'> & {
+    onChange: (sortData?: any) => void;
+    options: {
+      value: string;
+      label: string;
+    }[];
+    value: string;
+  };
+
+export interface Props extends SortingViewProps {
+  custom?: string;
+}

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

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

package/src/features/index.ts

@@ -0,0 +1,11 @@
+// Features
+export { default as Search } from './Search';
+
+// Feature Helpers
+export { default as SingleSelectFacet } from './Search/views/SingleSelectFacet';
+export { default as SingleLinksFacet } from './Search/views/SingleLinksFacet';
+export { default as MultiCheckboxFacet } from './Search/views/MultiCheckboxFacet';
+
+// Types
+export { ResultAsTypes } from './Search/Search.types';
+export type { Props as SearchProps } from './Search/Search.types';

package/src/forms/ForgotPasswordForm/ForgotPasswordForm.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ForgotPasswordForm from '.';
+
+const meta: Meta<typeof ForgotPasswordForm> = {
+  title: 'FORMS/ForgotPasswordForm',
+  component: ForgotPasswordForm,
+};
+
+type Story = StoryObj<typeof ForgotPasswordForm>;
+
+export const Default: Story = {
+  args: {
+    handleSubmit: (values: any) => {
+      console.log(values);
+    },
+  },
+};
+
+export default meta;

package/src/forms/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Props } from './ForgotPasswordForm.types';
+import Form from '../../components/Form';
+import FormField from '../../components/FormField';
+import { FIELD_TYPES } from '../../components/FormField/FormField.types';
+import { validEmail } from '../validations';
+import STRINGS from '../../translations';
+
+const ForgotPasswordForm = ({ handleSubmit }: Props) => {
+  return (
+    <div data-testid="ForgotPasswordForm" className="form-wrapper">
+      <Form onSubmit={handleSubmit} submit={STRINGS.FORMS.FORGOT_PASSWORD_FORM.SUBMIT}>
+        <FormField
+          name="email"
+          type={FIELD_TYPES.EMAIL}
+          label={STRINGS.FORMS.FORGOT_PASSWORD_FORM.EMAIL}
+          required
+          validations={validEmail}
+        />
+      </Form>
+    </div>
+  );
+};
+
+ForgotPasswordForm.displayName = 'ForgotPasswordForm';
+
+export default ForgotPasswordForm;
+export type { Props };

package/src/forms/ForgotPasswordForm/ForgotPasswordForm.types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  handleSubmit: (values: any) => void;
+}

package/src/forms/ForgotPasswordForm/index.ts

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

package/src/forms/LoginForm/LoginForm.stories.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { toast } from 'react-toastify';
+import LoginForm from '.';
+
+const meta: Meta<typeof LoginForm> = {
+  title: 'FORMS/LoginForm',
+  component: LoginForm,
+};
+
+type Story = StoryObj<typeof LoginForm>;
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+
+    const handleTokenCallback = (tokens: any) => {
+      console.log('handleTokenCallback', tokens);
+      setAccessToken(tokens.accessToken);
+    };
+
+    const handleSubmit = async (values: any) => {
+      try {
+        console.log('Login values', values);
+        const response = await fetch('http://localhost:9003/1.0/user/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(values),
+        });
+        const json = await response.json();
+        if (response.ok) {
+          console.log('Login json', json);
+          toast.info(json?.message);
+        }
+        throw new Error(json?.message);
+      } catch (err: any) {
+        console.log(err);
+        toast.error(err.message);
+      }
+    };
+
+    // const now = new Date().getTime();
+    // const initialValues = {
+    //   email: `joe+${now}@4alldigital.com`,
+    //   password: 'Password123!',
+    // };
+
+    return (
+      <>
+        {!accessToken && (
+          <LoginForm
+            handleSubmit={handleSubmit}
+            // initialValues={initialValues}
+            handleTokenCallback={handleTokenCallback}
+            showSocialButtons={true}
+          />
+        )}
+        {accessToken && <div>Access token: {accessToken}</div>}
+      </>
+    );
+  },
+};
+
+export default meta;