@4alldigital/foundation-ui--core 3.0.0

package/src/features/Search/Search.stories.tsx

@@ -0,0 +1,395 @@
+/* eslint-disable */
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Search from '.';
+// import { parseDuration } from '../../utils/parseDuration';
+// import { formatDuration } from 'date-fns';
+import { formatDate, subDays } from 'date-fns';
+import SingleSelectFacet from './views/SingleSelectFacet';
+import SingleLinksFacet from './views/SingleLinksFacet';
+import MultiCheckboxFacet from './views/MultiCheckboxFacet';
+import { ResultAsTypes } from './Search.types';
+import Container from '../../components/Container';
+
+const meta: Meta<typeof Search> = {
+  title: 'FEATURES/Search',
+  component: Search,
+};
+
+type Story = StoryObj<typeof Search>;
+
+export const Default: Story = {
+  render: args => {
+    return (
+      <Container>
+        <Search {...args} />
+      </Container>
+    );
+  },
+};
+
+const now = Math.floor(new Date().getTime()) / 1000;
+const oneDayAgo = Math.floor(subDays(new Date(), 1).getTime()) / 1000;
+const oneWeekAgo = Math.floor(subDays(new Date(), 7).getTime()) / 1000;
+const oneMonthAgo = Math.floor(subDays(new Date(), 30).getTime()) / 1000;
+const oneYearAgo = Math.floor(subDays(new Date(), 365).getTime()) / 1000;
+const tenYearsAgo = Math.floor(subDays(new Date(), 365 * 10).getTime()) / 1000;
+
+const lessThan15Mins = 60 * 15;
+const lessThan30Mins = 60 * 30;
+const lessThan45Mins = 60 * 45;
+const lessThan60Mins = 60 * 60;
+const moreThan60Mins = 60 * 60;
+
+const NRG_CONFIG = {
+  filters: [],
+  searchFields: {
+    title: {
+      weight: 3,
+    },
+    description: {},
+    workout_type: {},
+  },
+  facets: {
+    ['workout_type.keyword']: { type: 'value' },
+    ['livestream_section.keyword']: { type: 'value' },
+    ['targeted_section.keyword']: { type: 'value' },
+    ['level.keyword']: { type: 'value' },
+    duration_filter: {
+      type: 'range',
+      ranges: [
+        { from: 0, to: lessThan15Mins, name: 'Less than 15 minutes' },
+        { from: lessThan15Mins, to: lessThan30Mins, name: '15-30 minutes' },
+        { from: lessThan30Mins, to: lessThan45Mins, name: '30-45 minutes' },
+        { from: lessThan45Mins, to: lessThan60Mins, name: '45-60 minutes' },
+        { from: lessThan60Mins, to: moreThan60Mins, name: 'More than 60 minutes' },
+      ],
+    },
+    created: {
+      type: 'range',
+      ranges: [
+        { from: oneDayAgo, to: now, name: 'Past 24 hours' },
+        { from: oneWeekAgo, to: now, name: 'Past week' },
+        { from: oneMonthAgo, to: now, name: 'Past month' },
+        { from: oneYearAgo, to: now, name: 'Past year' },
+        { from: tenYearsAgo, to: now, name: 'Past decade' },
+        { from: tenYearsAgo, name: 'Older' },
+      ],
+    },
+  },
+  resultsFields: {
+    uuid: { raw: {} },
+    updated: { raw: {} },
+    created: { raw: {} },
+    title: { raw: {} },
+    duration: { raw: {} },
+    duration_filter: { raw: {} },
+    image_16_9: { raw: {} },
+    image: { raw: {} },
+    livestream_section: { raw: {} },
+    video_poster: { raw: {} },
+    video_url: { raw: {} },
+    workout_type: { raw: {} },
+    description: {
+      snippet: {
+        size: 100,
+        fallback: true,
+      },
+    },
+  },
+  alwaysSearchOnInitialLoad: true,
+  initialPlaceholder: 'Search for workouts...',
+};
+
+const NRG_FACETS = [
+  {
+    field: 'workout_type.keyword',
+    label: 'Workout type',
+    view: SingleSelectFacet,
+  },
+  {
+    field: 'livestream_section.keyword',
+    label: 'Live stream',
+    view: SingleLinksFacet,
+  },
+  {
+    field: 'targeted_section.keyword',
+    label: 'Targeted Workouts',
+    view: MultiCheckboxFacet,
+  },
+  {
+    field: 'created',
+    label: 'Date created',
+    view: MultiCheckboxFacet,
+  },
+  {
+    field: 'duration_filter',
+    label: 'Duration',
+    view: MultiCheckboxFacet,
+  },
+];
+
+const NRG_FIELD_MAP = {
+  idField: {
+    fieldName: 'uuid',
+  },
+  titleField: {
+    fieldName: 'title',
+  },
+  imageField: {
+    fieldName: 'image_16_9',
+  },
+  onClickLink: (event: any) => {
+    console.log('onClickLink', event);
+    event.preventDefault();
+    const item = event.currentTarget;
+    const itemId = item.getAttribute('data-id');
+    console.log('onClickLink', itemId);
+  },
+  // metaDataFields: [
+  //   {
+  //     fieldName: 'workout_type',
+  //     // Get first value from CSV list
+  //     formatter: (value: string) => value.split(',')[0],
+  //   },
+  //   {
+  //     fieldName: 'duration',
+  //     // Convert ISO duration to human readable format
+  //     formatter: (value: string) => {
+  //       const duration = parseDuration(value);
+  //       const formatedDuration = formatDuration(duration);
+  //       return formatedDuration;
+  //     },
+  //   },
+  // ],
+  actionsData: {
+    // like: {
+    //   isActive: true,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // share: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // save: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // comment: {
+    //   isActive: true,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // bookmark: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // report: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // follow: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // download: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // edit: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+    // delete: {
+    //   isActive: false,
+    //   onClick: (data: any) => {
+    //     console.log('actionsData like triggered', data);
+    //   },
+    // },
+  },
+};
+
+// const CNBC_CONFIG = {
+//   filters: [],
+//   searchFields: {
+//     generated_title: {
+//       weight: 3,
+//     },
+//     transcript: {},
+//     description: {},
+//   },
+// facets: {
+//   // entities: { type: 'value' },
+//   // phrases: { type: 'value' },
+//   created: {
+//     type: 'range',
+//     ranges: [
+//       { from: oneDayAgo, to: now, name: 'Past 24 hours' },
+//       { from: oneWeekAgo, to: now, name: 'Past week' },
+//       { from: oneMonthAgo, to: now, name: 'Past month' },
+//       { from: oneYearAgo, to: now, name: 'Past year' },
+//       { from: tenYearsAgo, to: now, name: 'Past decade' },
+//       { from: tenYearsAgo, name: 'Older' },
+//     ],
+//   },
+// },
+//   resultsFields: {
+//     uuid: { raw: {} },
+//     changed: { raw: {} },
+//     created: { raw: {} },
+//     generated_title: { raw: {} },
+//     image: { raw: {} },
+//     entities: { raw: {} },
+//     phrases: { raw: {} },
+//     transcript: {
+//       snippet: {
+//         size: 100,
+//         fallback: true,
+//       },
+//     },
+//     video: { raw: {} },
+//     description: {
+//       snippet: {
+//         size: 100,
+//         fallback: true,
+//       },
+//     },
+//   },
+//   alwaysSearchOnInitialLoad: false,
+//   initialPlaceholder: 'Search by name, company, subject...',
+// };
+
+// const CNBC_FACETS = [
+//   {
+//     field: 'created',
+//     label: 'Date created',
+//     view: MultiCheckboxFacet,
+//   },
+//   {
+//     field: 'duration_filter',
+//     label: 'Duration',
+//     view: MultiCheckboxFacet,
+//   },
+// ];
+
+// const CNBC_FIELD_MAP = {
+//   idField: {
+//     fieldName: 'uuid',
+//   },
+//   titleField: {
+//     fieldName: 'generated_title',
+//   },
+//   imageField: {
+//     fieldName: 'image',
+//   },
+//   videoField: {
+//     fieldName: 'video',
+//     formatter: (value: string) => {
+//       // console.log('videoField', value);
+//       const mp4Video = value
+//         ? value.replace('hls', 'mp4').replace('.m3u8', '_Mp4_Avc_Aac_16x9_1920x1080p_24Hz_8.5Mbps_qvbr.mp4')
+//         : null;
+//       return mp4Video;
+//     },
+//   },
+//   cardProps: {
+//     isMuted: false,
+//   },
+//   onClickLink: (event: any) => {
+//     console.log('onClickLink', event);
+//     event.preventDefault();
+//     const item = event.currentTarget;
+//     const itemId = item.getAttribute('data-id');
+//     console.log('onClickLink', itemId);
+//   },
+//   metaDataFields: [
+//     {
+//       fieldName: 'uuid',
+//       // Get first value from CSV list
+//       formatter: () => '$1300',
+//     },
+//     {
+//       fieldName: 'created',
+//       // Convert ISO duration to human readable format
+//       formatter: (value: number) => {
+//         // const duration = parseDuration(value);
+//         // const formatedDuration = formatDuration(duration);
+//         const date = new Date(value * 1000);
+//         // console.log('date', date);
+//         const fomattedDate = formatDate(date, 'MM/dd/yyyy');
+//         return fomattedDate;
+//       },
+//     },
+//   ],
+//   actionsData: {
+//     bookmark: {
+//       isActive: false,
+//       onClick: (data: any) => {
+//         console.log('actionsData like triggered', data);
+//       },
+//     },
+//   },
+// };
+
+const SORT_OPTIONS = [
+  {
+    name: 'Created',
+    value: [
+      {
+        field: 'created',
+        direction: 'desc',
+      },
+    ],
+  },
+  {
+    name: 'Relevance',
+    value: [],
+  },
+  {
+    name: 'Title',
+    value: [
+      {
+        field: 'title.keyword',
+        direction: 'asc',
+      },
+    ],
+  },
+];
+
+Default.args = {
+  showOptions: [16, 24, 32],
+  config: NRG_CONFIG,
+  ResultFieldMap: NRG_FIELD_MAP,
+  facetDisplay: NRG_FACETS,
+  // config: NRG_CONFIG,
+  // ResultFieldMap: NRG_FIELD_MAP,
+  // facetDisplay: NRG_FACETS,
+  // noSidebar: true,
+  // resultAs: ResultAsTypes.cardVideo,
+  resultAs: ResultAsTypes.cardBasic,
+  sortOptions: SORT_OPTIONS,
+  gridClasses: 'grid-cols-1 md:grid-cols-4 lg:grid-cols-4',
+  showPagingInfo: true,
+  // initialState: {
+  //   searchTerm: 'barre',
+  // },
+  showTextSearch: true,
+};
+
+export default meta;

package/src/features/Search/Search.tsx

@@ -0,0 +1,204 @@
+import React, { useMemo, useState } from 'react';
+import ElasticSearchAPIConnector from '@elastic/search-ui-elasticsearch-connector';
+import {
+  ErrorBoundary,
+  Facet,
+  SearchProvider,
+  SearchBox,
+  Results,
+  PagingInfo,
+  ResultsPerPage,
+  Paging,
+  Sorting,
+  WithSearch,
+} from '@elastic/react-search-ui';
+import { Props, ResultAsTypes } from './Search.types';
+// Views
+import SortingView from './views/Sorting';
+import PagingView from './views/Paging';
+import ResultsPerPageView from './views/ResultsPerPage';
+import PagingInfoView from './views/PagingInfo';
+import SearchBoxView from './views/SearchBox';
+import LayoutView from './views/Layout';
+import ResultsView from './views/Results';
+import ResultView from './views/Result';
+import { getDefaultConnectConfig } from './config/config-helper';
+import Button from '../../components/Button';
+import { useLanguage } from '../../hooks';
+
+export default function Search({
+  showOptions,
+  sortOptions,
+  resultAs = ResultAsTypes.cardBasic,
+  ResultFieldMap,
+  config = {
+    filters: [],
+    facets: {},
+    searchFields: {},
+    resultsFields: {},
+    alwaysSearchOnInitialLoad: true,
+    initialPlaceholder: 'Search...',
+  },
+  facetDisplay = [],
+  noSidebar = false,
+  customConnector,
+  showPagingInfo,
+  gridClasses,
+  initialState = {},
+  showTextSearch = true,
+}: Props) {
+  const T = useLanguage();
+  const connector = useMemo(() => {
+    const defaultConnector = getDefaultConnectConfig();
+
+    return new ElasticSearchAPIConnector(customConnector || defaultConnector);
+  }, []);
+
+  const searchConfig = useMemo(() => {
+    return {
+      debug: process.env.NODE_ENV === 'development',
+      alwaysSearchOnInitialLoad: true, //config.alwaysSearchOnInitialLoad,
+      apiConnector: connector,
+      hasA11yNotifications: true,
+      searchQuery: {
+        filters: config.filters || [],
+        search_fields: config.searchFields || {},
+        result_fields: config.resultsFields || {},
+        // disjunctiveFacets: ['created'],  // Make certain Facets into OR instead of AND
+        facets: config.facets,
+        sortList: [],
+      },
+      autocompleteQuery: {
+        results: {
+          search_fields: {
+            title: {},
+            description: {},
+          },
+          resultsPerPage: 5,
+          result_fields: {
+            title: {
+              snippet: {
+                size: 100,
+                fallback: true,
+              },
+            },
+          },
+        },
+        // TODO: Implement suggestions
+        // suggestions: {
+        //   types: {
+        //     documents: {
+        //       fields: ['title'],
+        //     },
+        //   },
+        //   size: 4,
+        // },
+      },
+      onSearch: (requestState, queryConfig, next) => {
+        let updatedState = requestState;
+        if (
+          requestState.searchTerm === '' &&
+          requestState.sortList.length === 0 &&
+          sortOptions &&
+          sortOptions.length > 0
+        ) {
+          const initOption = sortOptions[0];
+          updatedState = {
+            ...requestState,
+            sortList: [{ field: initOption?.value?.[0]?.field, direction: initOption?.value?.[0]?.direction }],
+          };
+        }
+        return Promise.resolve(next(updatedState, queryConfig));
+      },
+      initialState: {
+        resultsPerPage: showOptions?.[0] || 8,
+        ...initialState,
+      },
+    };
+  }, [config]);
+
+  const [showSidebar, setShowSidebar] = useState(false);
+
+  const handleShowFilters = () => {
+    setShowSidebar(toggleSidebar => !toggleSidebar);
+  };
+
+  return (
+    <SearchProvider config={searchConfig}>
+      <WithSearch
+        mapContextToProps={({ wasSearched, setSearchTerm }) => ({
+          wasSearched,
+          setSearchTerm,
+        })}>
+        {({ wasSearched, setSearchTerm }) => {
+          return (
+            <>
+              <ErrorBoundary>
+                <LayoutView
+                  noSidebar={noSidebar}
+                  showSidebar={showSidebar}
+                  header={
+                    showTextSearch && (
+                      <SearchBox
+                        view={props => (
+                          <SearchBoxView
+                            {...props}
+                            wasSearched={wasSearched}
+                            placeholder={config.initialPlaceholder}
+                            allowReset
+                            resetTrigger={setSearchTerm}
+                          />
+                        )}
+                      />
+                    )
+                  }
+                  sideContent={
+                    !noSidebar &&
+                    facetDisplay && (
+                      <div>
+                        <div className="md:hidden flex justify-end pt-2 -mb-2">
+                          <Button onClick={handleShowFilters} icon="mdi:close">
+                            {T?.UI?.HIDE_FILTERS}
+                          </Button>
+                        </div>
+                        {wasSearched && sortOptions && (
+                          <Sorting label={'Sort by'} sortOptions={sortOptions} view={SortingView} />
+                        )}
+                        {facetDisplay?.map(({ field, label, view }) => (
+                          <Facet key={field} field={field} label={label} view={view} />
+                        ))}
+                      </div>
+                    )
+                  }
+                  bodyContent={
+                    <Results
+                      shouldTrackClickThrough={false}
+                      resultView={props => <ResultView {...props} as={resultAs} cardMap={ResultFieldMap} />}
+                      className="list-none p-0 m-0"
+                      view={props => <ResultsView {...props} gridClasses={gridClasses} />}
+                    />
+                  }
+                  bodyHeader={
+                    <>
+                      {wasSearched && showPagingInfo && <PagingInfo view={PagingInfoView} />}
+                      {wasSearched && showOptions && <ResultsPerPage view={ResultsPerPageView} options={showOptions} />}
+                      {wasSearched && sortOptions && noSidebar && (
+                        <Sorting label={'Sort by'} sortOptions={sortOptions} view={SortingView} />
+                      )}
+                      {wasSearched && !noSidebar && (
+                        <div className="block md:hidden">
+                          <Button rounded onClick={handleShowFilters} icon="mdi:filter-variant-plus" />
+                        </div>
+                      )}
+                    </>
+                  }
+                  bodyFooter={<Paging view={PagingView} />}
+                />
+              </ErrorBoundary>
+            </>
+          );
+        }}
+      </WithSearch>
+    </SearchProvider>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { RequestState } from '@elastic/search-ui';
+import { cardMap } from './views/Result/Result.types';
+
+export enum ResultAsTypes {
+  cardBasic = 'cardBasic',
+  cardMedia = 'cardMedia',
+  cardVideo = 'cardVideo',
+}
+
+interface FacetDisplay {
+  field: string;
+  label: string;
+  view: React.FC<any>;
+}
+export interface Props {
+  custom?: string;
+  showOptions?: number[];
+  sortOptions?: any[];
+  resultAs: ResultAsTypes;
+  ResultFieldMap?: cardMap;
+  config: {
+    searchFields: any;
+    filters: any[];
+    facets: any;
+    resultsFields: any;
+    alwaysSearchOnInitialLoad?: boolean;
+    initialPlaceholder?: string;
+  };
+  facetDisplay?: FacetDisplay[];
+  noSidebar?: boolean;
+  customConnector?: {
+    host: string;
+    index: string;
+    apiKey: string;
+  };
+  showPagingInfo?: boolean;
+  gridClasses?: string;
+  initialState?: RequestState;
+  showTextSearch?: boolean;
+}
+