@searchcraft/react-sdk 0.1.1 → 0.1.3

package/README.md

@@ -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,24 +32,23 @@ 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
   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 } from '@searchcraft/react-sdk'
 
 // import the styles from the SDK
 import '../node_modules/@searchcraft/react-sdk/dist/style.css'
@@ -69,7 +68,7 @@ const handleClearInput = () => {
         onClearedInput={handleClearInput}
         rightToLeftOrientation
       />
-      <BaseSearchResults />
+      <Searchcraft.BaseSearchResults />
     </>
   )
 };
@@ -77,20 +76,22 @@ 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,7 +102,7 @@ const AutoSearchImplementation = () => {
 
   return (
     <>
-      <AutoSearchForm
+      <Searchcraft.AutoSearchForm
         handleSubmit={handleSubmitForm}
         inputCaptionValue="Search here"
         onClearedInput={handleClearInput}
@@ -111,14 +112,14 @@ const AutoSearchImplementation = () => {
   )
 };
 
-const BasicSearchAndResultsImplementation = () => {
+const BaseSearchAndResultsImplementation = () => {
   const { query, search, searchResults } = useSearchcraft();
 
   const handleSubmitForm = async () => await search(query, 'fuzzy');
 
   return (
     <>
-      <BaseSearchForm
+      <Searchcraft.BaseSearchForm
         rightToLeftOrientation={false}
         handleSubmit={handleSubmitForm}
       />
@@ -132,7 +133,7 @@ const BasicSearchAndResultsImplementation = () => {
             console.log('button callback');
           };
           return (
-            <BaseSearchResult
+            <Searchcraft.BaseSearchResult
               key={`${result?.id}-${index}`}
               buttonLabel='View More'
               buttonCallbackFn={buttonCallback}
@@ -152,3 +153,42 @@ const BasicSearchAndResultsImplementation = () => {
   );
 }
 ```
+
+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,9 +101,26 @@ declare type InputProps = {
     query: string;
 };
 
-export { Searchcraft }
+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 declare const SearchcraftProvider: ({ children, searchcraft, }: PropsWithChildren & SearchcraftInstance) => JSX_2.Element;
+export { SearchcraftCore }
 
 export declare interface SearchcraftProviderConfig {
     index: string[];