@searchcraft/react-sdk 0.1.3 → 0.5.0

package/README.md

@@ -1,4 +1,4 @@
-# Searchcraft's React SDK
+# Searchcraft React SDK
 
 This kit provides basic tools for building out a simple search interface using the Searchcraft API. Searching, tracking the request state, and displaying results are all available in this kit.
 
@@ -34,7 +34,7 @@ const searchcraftConfig = {
 const Main = () => {
   // initialize and pass an instance of SearchcraftCore into the provider
   const searchcraft = useMemo(() => new SearchcraftCore(searchcraftConfig),[]);
-  // debug is optional
+  // debug is optional and has a default value of false
   return (
     <Searchcraft.Provider {...{ searchcraft, debug: true }}>
       <YourApplicationOrScreenGoHere />
@@ -48,13 +48,27 @@ const Main = () => {
 Once your app is wrapped in the `Searchcraft.Provider`, the `useSearchcraft` hook functionalities are available for use.
 
 ```jsx
-import Searchcraft, { useSearchcraft, AutoSearchForm } from '@searchcraft/react-sdk'
+import Searchcraft, { useSearchcraft, AutoSearchForm, useTheme } from '@searchcraft/react-sdk'
+
+// values available when using the useSearchcraft hook
+const useSearchContextValues = {
+    error,
+    index,
+    isRequesting,
+    mode,
+    query,
+    search,
+    searchResults,
+    setQuery,
+  };
 
 // import the styles from the SDK
 import '../node_modules/@searchcraft/react-sdk/dist/style.css'
 
 const SearchWithResultsComponent = () => {
-const { isRequesting, query, search, searchResults } = useSearchcraft()
+const { isRequesting, query, search, searchResults } = useSearchcraft();
+// useTheme hook is exposed to control the dark and light UIs available. Configured values are 'light' and 'dark'.
+const { toggleTheme, theme } = useTheme();
 
 const handleClearInput = () => {
   setQuery('')
@@ -62,10 +76,11 @@ const handleClearInput = () => {
 
   return (
     <>
+    <button onClick={toggleTheme}>Toggle Theme</button>
       <AutoSearchForm
         handleSubmit={handleSubmitForm}
         inputCaptionValue="Search here"
-        onClearedInput={handleClearInput}
+        onClearInput={handleClearInput}
         rightToLeftOrientation
       />
       <Searchcraft.BaseSearchResults />
@@ -90,7 +105,9 @@ import {
   BaseSearchResults,
   useSearchcraft
 } from '@searchcraft/react-sdk';
-OR
+
+// OR
+
 import Searchcraft, { useSearchcraft } from '@searchcraft/react-sdk'
 
 const AutoSearchImplementation = () => {
@@ -102,56 +119,53 @@ const AutoSearchImplementation = () => {
 
   return (
     <>
+    // example using compound component pattern
       <Searchcraft.AutoSearchForm
         handleSubmit={handleSubmitForm}
         inputCaptionValue="Search here"
-        onClearedInput={handleClearInput}
+        onClearInput={handleClearInput}
         rightToLeftOrientation={true}
       />
     </>
   )
 };
 
-const BaseSearchAndResultsImplementation = () => {
-  const { query, search, searchResults } = useSearchcraft();
-
-  const handleSubmitForm = async () => await search(query, 'fuzzy');
+const BaseSearchResults: FC = () => {
+  const { searchResults, query } = useSearchcraft();
 
   return (
     <>
-      <Searchcraft.BaseSearchForm
-        rightToLeftOrientation={false}
-        handleSubmit={handleSubmitForm}
-      />
-      {searchResults?.hits ? (
-        searchResults?.hits?.map((document, index) => {
-          const { doc: result } = document;
-          const callback = () => {
-            console.log('interactive');
-          };
-          const buttonCallback = () => {
-            console.log('button callback');
-          };
-          return (
-            <Searchcraft.BaseSearchResult
-              key={`${result?.id}-${index}`}
-              buttonLabel='View More'
-              buttonCallbackFn={buttonCallback}
-              callbackFn={callback}
-              interactiveResult
-              imageSrc={result?.poster}
-              resultBodyContent={result?.overview}
-              resultHeading={result?.title}
-              resultSubheading={result?.release_date}
-            />
-          );
-        })
-      ) : (
-        <div>no search results found</div>
+      {searchResults?.data?.hits?.map((document, index) => {
+        const { doc: result } = document;
+        const callback = () => {
+          console.log('interactive element');
+        };
+        const buttonCallback = () => {
+          console.log('button callback');
+        };
+        return (
+          // example using named import component
+          <BaseSearchResult
+            key={`${result?.id}-${index}`}
+            buttonLabel='View More'
+            buttonCallbackFn={buttonCallback}
+            callbackFn={callback}
+            interactiveResult
+            imageSrc={result?.poster}
+            resultBodyContent={result?.overview}
+            resultHeading={result?.title}
+            resultSubheading={result?.release_date}
+          />
+        );
+      })}
+      {query.length > 0 && searchResults?.data?.hits?.length === 0 && (
+        <ErrorMessage
+          errorMessage={`No search results found for ${query} query`}
+        />
       )}
     </>
   );
-}
+};
 ```
 
 Additionally, you can import individual sub-components that comprise the pre-built UI components.

package/dist/index.d.ts

@@ -1,169 +1,59 @@
-import { ChangeEventHandler } from 'react';
-import { Dispatch } from 'react';
+import { Components } from '@searchcraft/javascript-sdk';
 import { FC } from 'react';
-import { ReactNode } from 'react';
-import { CoreSDK as SearchcraftCore } from '@searchcraft/core';
-import { SearchError } from '@searchcraft/core';
-import { SearchResult } from '@searchcraft/core';
-import { SetStateAction } from 'react';
-
-/**
- * * Button-less form used to submit the search query with a timing configurable debounced function.
- */
-export declare const AutoSearchForm: FC<AutoSearchFormProps>;
-
-declare interface AutoSearchFormProps {
-    autoSearchFormClass?: string;
-    handleSubmit: (query: string) => void;
-    inputCaptionValue?: string;
-    labelForInput?: string;
-    onClearInput?: () => void;
-    placeholderValue?: string;
-    rightToLeftOrientation?: boolean;
-    searchContainerClass?: string;
+
+export declare const SearchcraftBaseSearchResult: FC<SearchcraftBaseSearchResultProps>;
+
+export declare interface SearchcraftBaseSearchResultProps extends Components.SearchcraftBaseSearchResult {
+}
+
+export declare const SearchcraftBaseSearchResults: FC<SearchcraftBaseSearchResultsProps>;
+
+export declare interface SearchcraftBaseSearchResultsProps extends Components.SearchcraftBaseSearchResults {
+}
+
+export declare const SearchcraftButton: FC<SearchcraftButtonProps>;
+
+export declare interface SearchcraftButtonProps extends Components.SearchcraftButton {
 }
 
-/**
- * * Form used to submit the search query using a provided search function.
- */
-export declare const BaseSearchForm: FC<BaseSearchFormProps>;
-
-declare interface BaseSearchFormProps {
-    errorMessage?: string;
-    handleSubmit: (query: string) => void;
-    labelForInput?: string;
-    onClearInput?: () => void;
-    placeholderValue?: string;
-    rightToLeftOrientation?: boolean;
+export declare const SearchcraftErrorMessage: FC<SearchcraftErrorMessageProps>;
+
+export declare interface SearchcraftErrorMessageProps extends Components.SearchcraftErrorMessage {
 }
 
-export declare const BaseSearchResult: FC<BaseSearchResultProps>;
-
-declare interface BaseSearchResultProps {
-    buttonCallbackFn?: () => void;
-    buttonLabel?: string;
-    imageAltText?: string;
-    imageSrc?: string;
-    interactiveResult?: boolean;
-    callbackFn?: () => void;
-    keyDownCallbackFn?: () => void;
-    resultBodyContent?: string;
-    resultHeading?: string;
-    resultSubheading?: string;
+export declare const SearchcraftFacetList: FC<SearchcraftFacetListProps>;
+
+export declare interface SearchcraftFacetListProps extends Components.SearchcraftFacetList {
 }
 
-export declare const BaseSearchResults: FC;
-
-export declare const Button: FC<ButtonProps>;
-
-declare type ButtonProps = {
-    className?: string;
-    iconElement?: ReactNode;
-    iconOnly?: boolean;
-    iconPosition?: string;
-    label?: string;
-    onClick?: () => void;
-};
-
-export declare const ErrorMessage: FC<ErrorMessageProps>;
-
-declare type ErrorMessageProps = {
-    className?: string;
-    errorMessage?: string;
-};
-
-export declare const Input: FC<InputProps>;
-
-declare type InputCaptionProps = {
-    error?: boolean;
-    inputCaptionClassName?: string;
-    inputCaptionValue: string;
-    rightToLeftOrientation?: boolean;
-};
-
-export declare const InputLabel: FC<InputLabelProps>;
-
-declare type InputLabelProps = {
-    className?: string;
-    label: string;
-};
-
-declare type InputProps = {
-    error?: boolean;
-    formClassName?: string;
-    inputCaptionClassName?: string;
-    inputCaptionValue?: string;
-    inputClassName?: string;
-    onClearInput?: () => void;
-    onSearchInputChange: ChangeEventHandler<HTMLInputElement>;
-    placeholderValue?: string;
-    rightToLeftOrientation?: boolean;
-    query: string;
-};
-
-declare const Searchcraft: FC & {
-    AutoSearchForm: FC<AutoSearchFormProps>;
-    BaseSearchForm: FC<BaseSearchFormProps>;
-    BaseSearchResult: FC<BaseSearchResultProps>;
-    BaseSearchResults: FC;
-    Button: FC;
-    ClearInputButton: FC;
-    ErrorMessage: FC;
-    Input: FC<InputProps>;
-    InputCaption: FC<InputCaptionProps>;
-    InputIcon: FC;
-    InputLabel: FC<InputLabelProps>;
-    Provider: FC<{
-        searchcraft: SearchcraftCore;
-        debug?: boolean;
-    }>;
-};
-export default Searchcraft;
-
-export { SearchcraftCore }
-
-export declare interface SearchcraftProviderConfig {
-    index: string[];
-    apiKey: string;
-    endpointURL: string;
+export declare const SearchcraftFilterPanel: FC<SearchcraftFilterPanelProps>;
+
+export declare interface SearchcraftFilterPanelProps extends Components.SearchcraftFilterPanel {
 }
 
-/** The context provided by the Searchcraft React SDK */
-export declare interface SearchcraftProviderContext {
-    /**
-     * Error occurred while making a search query.
-     */
-    error: Error | null;
-    /**
-     * The db name(s) created in Vektron to query.
-     */
-    index: string[];
-    /**
-     * Value exposed when a search is in progress.
-     */
-    isRequesting: boolean;
-    /**
-     * Can be either fuzzy or normal. The default is fuzzy.
-     */
-    mode: 'fuzzy' | 'normal';
-    /**
-     * Input value given by the user to query the DB by.
-     */
-    query: string;
-    /**
-     * Setter function to update the value being sent to the SDK.
-     */
-    setQuery: Dispatch<SetStateAction<string>>;
-    /**
-     * Function for searching that requires search mode and search type.
-     */
-    search: (query: string, mode: 'fuzzy' | 'normal') => void;
-    /**
-     * Object that is returned from the Searchcraft API when a search request has resolved
-     */
-    searchResults?: SearchResult | SearchError | null;
+export declare const SearchcraftInputForm: FC<SearchcraftInputFormProps>;
+
+export declare interface SearchcraftInputFormProps extends Components.SearchcraftInputForm {
 }
 
-export declare const useSearchcraft: () => SearchcraftProviderContext;
+export declare const SearchcraftInputLabel: FC<SearchcraftInputLabelProps>;
+
+export declare interface SearchcraftInputLabelProps extends Components.SearchcraftInputLabel {
+}
+
+export declare const SearchcraftResultsInfo: FC<SearchcraftResultsInfoProps>;
+
+export declare interface SearchcraftResultsInfoProps extends Components.SearchcraftResultsInfo {
+}
+
+export declare const SearchcraftSlider: FC<SearchcraftSliderProps>;
+
+export declare interface SearchcraftSliderProps extends Components.SearchcraftSlider {
+}
+
+export declare const SearchcraftToggleButton: FC<SearchcraftToggleButtonProps>;
+
+export declare interface SearchcraftToggleButtonProps extends Components.SearchcraftToggleButton {
+}
 
 export { }