@envive-ai/react-widgets 0.1.0-arthur-1

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@envive-ai/react-widgets",
+  "version": "0.1.0-arthur-1",
+  "description": "React widget library for Envive services.",
+  "keywords": [
+    "react",
+    "components",
+    "envive",
+    "ui"
+  ],
+  "author": "Envive AI",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index-VWNd4lyI.d.cts",
+  "files": [
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo",
+    "tailwind-preset.js"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
+    "prepublish": "npm run build",
+    "typecheck": "tsc",
+    "test": "vitest",
+    "storybook": "npm run get-merchants && storybook dev -p 6006",
+    "build-storybook": "npm run get-merchants && storybook build",
+    "dev": "npm run get-merchants && storybook dev -p 6006",
+    "get-merchants": "tsx ./.storybook/getMerchants.ts"
+  },
+  "dependencies": {
+    "@envive-ai/react-hooks": "0.2.7",
+    "@envive-ai/react-toolkit": "*",
+    "@tailwindcss/typography": "^0.5.15",
+    "classnames": "^2.5.1",
+    "framer-motion": "^12.23.24"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@storybook/addon-a11y": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-onboarding": "^9.1.4",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-vitest": "^9.1.10",
+    "@storybook/icons": "^1.6.0",
+    "@storybook/react-vite": "^9.1.4",
+    "@types/node": "^24.3.2",
+    "@types/react": "^19.1.12",
+    "eslint-plugin-storybook": "^9.1.4",
+    "postcss": "^8.5.6",
+    "storybook": "^9.1.4",
+    "tailwindcss": "^3.4.17",
+    "tsdown": "^0.14.2",
+    "typescript": "^5.4.3",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/SearchResults/SearchResults.tsx

@@ -0,0 +1,144 @@
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import { SearchResultsContent } from '@envive-ai/react-toolkit/SearchResultsContent';
+import { SearchResultsFilterModal } from '@envive-ai/react-toolkit/SearchResultsFilterModal';
+import { SearchResultsToolbar } from '@envive-ai/react-toolkit/SearchResultsToolbar';
+import { useStickyVisibility } from '@envive-ai/react-toolkit/util'
+import { SearchResultsHocProps } from '@envive-ai/react-hooks/hooks/Search';
+import { SearchResultsEntryPointWidgetConfig } from './types';
+import { withSearchResults } from './withSearchResults';
+
+
+
+export interface SearchResultsProps extends SearchResultsHocProps {
+  widgetConfig: SearchResultsEntryPointWidgetConfig;
+}
+
+export const SearchResultsComponent = ({
+  widgetConfig,
+  productCardConfig,
+  merchantShortName,
+  productList,
+  autocompleteResults,
+  searchFilters,
+  availableDynamicFilters,
+  selectedFilterOptions,
+  searchText,
+  query,
+  searchResultsState,
+  isFilterOpen,
+  shouldShowAutocomplete,
+  focusedIndex,
+  focusedOptionId,
+  recommendedProducts,
+
+  // UI
+  filterButtonText,
+
+  // Callbacks
+  onSearchInputChange,
+  onSubmitSearch,
+  onAutocompleteSelect,
+  onKeyDown,
+  onSearchInputFocus,
+  onSearchInputBlur,
+  onToggleDynamicFilter,
+  onSelectFilterItem,
+  onRemoveFilter,
+  onClearAllFilters,
+  setIsFilterOpen,
+
+  // Refs
+  searchResultsRef,
+}: SearchResultsProps) => {
+  const {
+    searchInputVariant,
+    searchFilterSidebarVariant,
+    productGridVariant,
+    searchBoxPlaceholder,
+    noResultsFoundText,
+    isSearchInputSticky = false,
+  } = widgetConfig;
+
+  const { toolbarRef: ref, isVisible, toolbarHeight: height } = useStickyVisibility();
+
+  const toolbarRef = isSearchInputSticky ? ref : null;
+  const finalIsVisible = isSearchInputSticky ? isVisible : true;
+  const toolbarHeight = isSearchInputSticky ? height : 0;
+
+  const stickyToolbarClasses = classNames(
+    'spiffy-tw-fixed',
+    'spiffy-tw-top-0',
+    'spiffy-tw-left-0',
+    'spiffy-tw-right-0',
+    'spiffy-tw-transition-transform',
+    'spiffy-tw-duration-300',
+    'spiffy-tw-py-[8px]',
+  );
+
+  const containerXPaddingClasses = classNames('spiffy-tw-px-[16px]', 'sm:spiffy-tw-px-[46px]');
+
+  // Scroll to top when new search results are loaded
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [productList]);
+
+  return (
+    <div>
+      <SearchResultsFilterModal
+        isOpen={isFilterOpen}
+        setIsOpen={setIsFilterOpen}
+        searchFilters={searchFilters}
+        productCount={productList.length}
+        onSelectFilterItem={onSelectFilterItem}
+        onClearAllFilters={onClearAllFilters}
+        searchFilterSidebarVariant={searchFilterSidebarVariant}
+        filterButtonText={filterButtonText}
+      />
+      <SearchResultsToolbar
+        className={isSearchInputSticky ? stickyToolbarClasses : 'spiffy-tw-py-[8px]'}
+        toolbarRef={toolbarRef}
+        searchInputVariant={searchInputVariant}
+        searchBoxPlaceholder={searchBoxPlaceholder}
+        searchText={searchText}
+        focusedIndex={focusedIndex}
+        focusedOptionId={focusedOptionId}
+        autocompleteResults={autocompleteResults}
+        filterButtonText={filterButtonText}
+        onKeyDown={onKeyDown}
+        onSearchInputChange={onSearchInputChange}
+        onSubmitSearch={onSubmitSearch}
+        onAutocompleteSelect={onAutocompleteSelect}
+        onSearchInputFocus={onSearchInputFocus}
+        onSearchInputBlur={onSearchInputBlur}
+        shouldShowAutocomplete={shouldShowAutocomplete}
+        setIsFilterOpen={setIsFilterOpen}
+        containerXPaddingClasses={containerXPaddingClasses}
+        isVisible={finalIsVisible}
+      />
+      <SearchResultsContent
+        searchResultsState={searchResultsState}
+        productList={productList}
+        recommendedProducts={recommendedProducts}
+        productCardConfig={productCardConfig}
+        merchantShortName={merchantShortName}
+        searchFilterSidebarVariant={searchFilterSidebarVariant}
+        noResultsFoundText={noResultsFoundText}
+        productGridVariant={productGridVariant}
+        containerXPaddingClasses={containerXPaddingClasses}
+        selectedFilterOptions={selectedFilterOptions}
+        availableDynamicFilters={availableDynamicFilters}
+        onRemoveFilter={onRemoveFilter}
+        onToggleDynamicFilter={onToggleDynamicFilter}
+        searchResultsRef={searchResultsRef}
+        toolbarHeight={toolbarHeight}
+        query={query}
+      />
+    </div>
+  );
+};
+
+export const SearchResults = withSearchResults(SearchResultsComponent);

package/src/SearchResults/SearchResultsWidget.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useMemo } from 'react';
+import { useSetAtom } from 'jotai';
+import { isSearchResultsOpenAtom } from '@envive-ai/react-hooks/atoms/globalSearch';
+import { searchSystemAtom } from '@envive-ai/react-hooks/atoms/search';
+import { useNewOrgConfig } from '@envive-ai/react-hooks/hooks/NewOrgConfig';
+import { SearchResults } from './SearchResults';
+import { SearchResultsEntryPointWidgetConfig } from './types';
+
+export const SearchResultsWidget = () => {
+  const setIsSearchResultsOpen = useSetAtom(isSearchResultsOpenAtom);
+  const setSearchSystem = useSetAtom(searchSystemAtom);
+  const newConfig = useNewOrgConfig();
+
+  useEffect(() => {
+    setSearchSystem(true);
+    return () => setSearchSystem(false);
+  }, [setSearchSystem]);
+  useEffect(() => {
+    setIsSearchResultsOpen(true);
+
+    return () => {
+      setIsSearchResultsOpen(false);
+    };
+  }, [setIsSearchResultsOpen]);
+
+  const widgetConfig = useMemo(() => {
+    if (newConfig && newConfig.frontendConfig?.widgetConfigs) {
+      const baseWidgetConfig = (newConfig.frontendConfig?.widgetConfigs as unknown as any[]).find(
+        (widget: { key: string }) => widget.key === 'searchResultsEntryPoint',
+      );
+      return {
+        ...baseWidgetConfig.config,
+      };
+    }
+    return null;
+  }, [newConfig]);
+  if (!widgetConfig) {
+    return null;
+  }
+
+  return <SearchResults widgetConfig={widgetConfig as SearchResultsEntryPointWidgetConfig} />;
+};

package/src/SearchResults/index.ts

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

package/src/SearchResults/types.ts

@@ -0,0 +1,19 @@
+
+
+
+import { SearchFilterSidebarVariant } from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
+import { ProductGridVariant } from '@envive-ai/react-toolkit/ProductCard';
+import { BaseWidgetConfig } from 'src/config/BaseWidgetConfig';
+import { WidgetType } from 'src/config/WidgetType';
+
+export type SearchInputVariant = 'standard';
+
+export interface SearchResultsEntryPointWidgetConfig
+  extends BaseWidgetConfig<WidgetType.SearchResultsEntryPoint> {
+  searchInputVariant: SearchInputVariant;
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  productGridVariant: ProductGridVariant;
+  searchBoxPlaceholder: string;
+  noResultsFoundText?: string;
+  isSearchInputSticky?: boolean;
+}

package/src/SearchResults/withSearchResults.tsx

@@ -0,0 +1,22 @@
+import type { ComponentType } from 'react';
+import { SearchResultsHocProps, useSearch } from '@envive-ai/react-hooks/hooks/Search';
+import type { SearchResultsProps } from './SearchResults';
+
+export function withSearchResults(Component: ComponentType<SearchResultsProps>) {
+  // The HOC will accept the props that are not provided by the useSearch hook.
+  type HocProps = Omit<SearchResultsProps, keyof SearchResultsHocProps>;
+
+  return function SearchResultsHoc(props: HocProps) {
+    const searchHookResult = useSearch();
+
+    // The props passed to the HOC and the results from the hook are combined
+    // and passed to the wrapped component.
+    return (
+      <Component
+        {...props}
+        {...searchHookResult}
+        productList={searchHookResult.searchData?.products || []}
+      />
+    );
+  };
+}

package/src/config/BaseWidgetConfig.ts

@@ -0,0 +1,7 @@
+import { WidgetType } from './WidgetType';
+
+export interface BaseWidgetConfig<T extends WidgetType> {
+  widgetConfigId: string;
+  type: T;
+  contentId?: string;
+}

package/src/config/WidgetType.ts

@@ -0,0 +1,18 @@
+export enum WidgetType {
+  ChatPreview = 'ChatPreview',
+  SocialProofV2 = 'SocialProofV2',
+  ChatPreviewV2 = 'ChatPreviewV2',
+  ChatPreviewIsLoading = 'ChatPreviewIsLoading',
+  ChatPreviewPostInteraction = 'ChatPreviewPostInteraction',
+  ChatPreviewProductComparison = 'ChatPreviewProductComparison',
+  SuggestionBar = 'SuggestionBar',
+  SuggestionBarV2 = 'SuggestionBarV2',
+  ImagePromptCard = 'ImagePromptCard',
+  ImageBanner = 'ImageBanner',
+  SingleImagePrompt = 'SingleImagePrompt',
+  SearchPrompt = 'SearchPrompt',
+  SearchZeroStateEntryPoint = 'SearchZeroStateEntryPoint',
+  SearchResultsEntryPoint = 'SearchResultsEntryPoint',
+  SearchOverlayHost = 'SearchOverlayHost',
+  NoOp = 'NoOp',
+}

package/src/stories/SearchResults.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SearchResults } from 'src/SearchResults/SearchResults';
+import { WidgetType } from '@envive-ai/react-hooks/contexts/types';
+
+const meta = {
+  title: 'Widgets/Search/SearchResults',
+  component: SearchResults,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    widgetConfig: {
+      searchInputVariant: 'standard',
+      searchFilterSidebarVariant: 'darkButton',
+      productGridVariant: 'standard',
+      searchBoxPlaceholder: '',
+      widgetConfigId: '',
+      type: WidgetType.SearchResultsEntryPoint
+    },
+  },
+} satisfies Meta<typeof SearchResults>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};