@searchcraft/react-sdk 0.1.2 → 0.1.4

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.
 
@@ -16,13 +16,13 @@ Install with NPM:
 $ npm install @searchcraft/react-sdk
 ```
 
-Wrap your app or target a specific interface and wrap them with the `SearchcraftProvider` to expose the functionalities of the SDK.
+Wrap your app or target a specific interface and wrap them with the `Searchcraft.Provider` to expose the functionalities of the SDK.
 
 ```jsx
 
 import { useMemo } from 'react'
 
-import { SearchcraftProvider, Searchcraft } from '@searchcraft/react-sdk'
+import Searchcraft, { SearchcraftCore } from '@searchcraft/react-sdk'
 
 // values are created via the Searchcraft Vektron Customer Portal
 const searchcraftConfig = {
@@ -32,30 +32,43 @@ const searchcraftConfig = {
 }
 
 const Main = () => {
-  // initialize and pass an instance of Searchcraft into the provider
-  const searchcraft = useMemo(() => new Searchcraft(searchcraftConfig),[]);
+  // initialize and pass an instance of SearchcraftCore into the provider
+  const searchcraft = useMemo(() => new SearchcraftCore(searchcraftConfig),[]);
+  // debug is optional and has a default value of false
   return (
-    <SearchcraftProvider {...{ searchcraft }}>
+    <Searchcraft.Provider {...{ searchcraft, debug: true }}>
       <YourApplicationOrScreenGoHere />
-    </SearchcraftProvider>
+    </Searchcraft.Provider>
   )
 }
 
 ```
 ### Quickstart with useSearchcraft hook
 
-Once your app is wrapped in the `SearchcraftProvider`, the `useSearchcraft` hook functionalities are available for use.
+Once your app is wrapped in the `Searchcraft.Provider`, the `useSearchcraft` hook functionalities are available for use.
 
 ```jsx
-import {
-  useSearchcraft
-} 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('')
@@ -63,13 +76,14 @@ const handleClearInput = () => {
 
   return (
     <>
+    <button onClick={toggleTheme}>Toggle Theme</button>
       <AutoSearchForm
         handleSubmit={handleSubmitForm}
         inputCaptionValue="Search here"
-        onClearedInput={handleClearInput}
+        onClearInput={handleClearInput}
         rightToLeftOrientation
       />
-      <BaseSearchResults />
+      <Searchcraft.BaseSearchResults />
     </>
   )
 };
@@ -77,21 +91,25 @@ const handleClearInput = () => {
 
 ## UI Components
 
-The SDK provides 4 pre-built UI components with data provided to them via the `SearchcraftProvider` and `useSearchcraft` hook.
+The SDK provides 4 pre-built UI components with data provided to them via the `Searchcraft.Provider` and `useSearchcraft` hook.
 
 ```jsx
 import {
   // Search input without submit button
   AutoSearchForm,
   // Search input with submit button
-  BasicSearchForm,
+  BaseSearchForm,
   // Single Search Result component that can be customized while iterating over SearchResults
-  BasicSearchResult,
+  BaseSearchResult,
   // Fully encapsulated list of search results with no iteration required
-  BasicSearchResults,
+  BaseSearchResults,
   useSearchcraft
 } from '@searchcraft/react-sdk';
 
+// OR
+
+import Searchcraft, { useSearchcraft } from '@searchcraft/react-sdk'
+
 const AutoSearchImplementation = () => {
   const { query, search, searchResults } = useSearchcraft()
 
@@ -101,54 +119,90 @@ const AutoSearchImplementation = () => {
 
   return (
     <>
-      <AutoSearchForm
+    // example using compound component pattern
+      <Searchcraft.AutoSearchForm
         handleSubmit={handleSubmitForm}
         inputCaptionValue="Search here"
-        onClearedInput={handleClearInput}
+        onClearInput={handleClearInput}
         rightToLeftOrientation={true}
       />
     </>
   )
 };
 
-const BasicSearchAndResultsImplementation = () => {
-  const { query, search, searchResults } = useSearchcraft();
-
-  const handleSubmitForm = async () => await search(query, 'fuzzy');
+const BaseSearchResults: FC = () => {
+  const { searchResults, query } = useSearchcraft();
 
   return (
     <>
-      <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 (
-            <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.
+
+```jsx
+import { Input, useSearchcraft } from '@searchcraft/react-sdk';
+
+const InputComponent = () => {
+  const { query, setQuery } = useSearchcraft();
+  const [error, setError] = useState<boolean>(false);
+
+  const handleFormSubmit = (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    if (query.trim() === '') {
+      setError(true);
+    } else {
+      setError(false);
+      handleSubmit(query);
+    }
+  };
+
+  const handleSearchInputChange = (event: { target: { value: string } }) =>
+    setQuery(event.target.value);
+
+  const handleClearInput = () => setQuery('');
+
+  return (
+    <>
+      <Input
+        error={error}
+        onClearInput={handleClearInput}
+        onSearchInputChange={handleSearchInputChange}
+        placeholderValue={placeholderValue}
+        query={query}
+        rightToLeftOrientation={rightToLeftOrientation}
+      />
+    </>
+  )
+};
+```

package/dist/index.d.ts

@@ -1,11 +1,8 @@
 import { ChangeEventHandler } from 'react';
 import { Dispatch } from 'react';
 import { FC } from 'react';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
-import { CoreSDK as Searchcraft } from '@searchcraft/core';
-import { SearchcraftInstance } from '@searchcraft/core';
+import { CoreSDK as SearchcraftCore } from '@searchcraft/core';
 import { SearchError } from '@searchcraft/core';
 import { SearchResult } from '@searchcraft/core';
 import { SetStateAction } from 'react';
@@ -20,7 +17,7 @@ declare interface AutoSearchFormProps {
     handleSubmit: (query: string) => void;
     inputCaptionValue?: string;
     labelForInput?: string;
-    onClearedInput?: () => void;
+    onClearInput?: () => void;
     placeholderValue?: string;
     rightToLeftOrientation?: boolean;
     searchContainerClass?: string;
@@ -35,6 +32,7 @@ declare interface BaseSearchFormProps {
     errorMessage?: string;
     handleSubmit: (query: string) => void;
     labelForInput?: string;
+    onClearInput?: () => void;
     placeholderValue?: string;
     rightToLeftOrientation?: boolean;
 }
@@ -76,6 +74,13 @@ declare type ErrorMessageProps = {
 
 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 = {
@@ -96,18 +101,14 @@ declare type InputProps = {
     query: string;
 };
 
-export { Searchcraft }
-
-export declare const SearchcraftProvider: ({ children, searchcraft, }: PropsWithChildren & SearchcraftInstance) => JSX_2.Element;
-
-export declare interface SearchcraftProviderConfig {
+export declare interface ProviderConfigTypes {
     index: string[];
     apiKey: string;
     endpointURL: string;
 }
 
 /** The context provided by the Searchcraft React SDK */
-export declare interface SearchcraftProviderContext {
+export declare interface ProviderContextTypes {
     /**
      * Error occurred while making a search query.
      */
@@ -142,6 +143,36 @@ export declare interface SearchcraftProviderContext {
     searchResults?: SearchResult | SearchError | null;
 }
 
-export declare const useSearchcraft: () => SearchcraftProviderContext;
+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 }
+
+declare interface ThemeContextType {
+    theme: ThemeOptionType;
+    toggleTheme: () => void;
+}
+
+declare type ThemeOptionType = 'light' | 'dark';
+
+export declare const useSearchcraft: () => ProviderContextTypes;
+
+export declare const useTheme: () => ThemeContextType;
 
 export { }