@searchcraft/react-sdk 0.7.2 → 0.8.0

package/dist/index.d.ts

@@ -2,8 +2,31 @@ import { Components } from '@searchcraft/javascript-sdk';
 import { FC } from 'react';
 
 /**
- * The React component for SearchcraftBaseSearchResults.
- * @param props
+ * A component that renders a list of search results with customizable styles, layout, and link behavior.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftBaseSearchResults } from '@searchcraft/react-sdk';
+ * import searchResultMappings from './searchResultMappings';
+ *
+ * const MySearchComponent = () => {
+ *   return (
+ *     <SearchcraftBaseSearchResults
+ *       searchResultMappings={searchResultMappings}
+ *       resultImagePlacement="left"
+ *       buttonLabel="View More"
+ *       buttonTarget="_blank"
+ *       buttonRel="noopener"
+ *       containerTarget="_self"
+ *       containerRel="nofollow"
+ *       onNoResults={() => console.log("No search results found")}
+ *     />
+ *   );
+ * };
+ *
+ * export default MySearchComponent;
+ * ```
  */
 export declare const SearchcraftBaseSearchResults: FC<SearchcraftBaseSearchResultsProps>;
 
@@ -14,8 +37,22 @@ export declare interface SearchcraftBaseSearchResultsProps extends Components.Se
 }
 
 /**
- * The React component for the SearchcraftFilterPanel.
- * @param props
+ * A component that represents a filter panel UI view, allowing users to refine and control their search queries by applying various filter criteria.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftFilterPanel } from '@searchcraft/react-sdk';
+ * import filterItems from './filterItems';
+ *
+ * const MyFilterComponent = () => {
+ *   return (
+ *     <SearchcraftFilterPanel items={filterItems} />
+ *   );
+ * };
+ *
+ * export default MyFilterComponent;
+ * ```
  */
 export declare const SearchcraftFilterPanel: FC<SearchcraftFilterPanelProps>;
 
@@ -26,8 +63,43 @@ export declare interface SearchcraftFilterPanelProps extends Components.Searchcr
 }
 
 /**
- * The React component for the SearchcraftInputForm
- * @param props
+ * A component that provides a user-friendly interface for querying an indexed dataset,
+ * enabling users to easily search large collections of data. It abstracts the complexities
+ * of index-based searching, making it accessible to users of all technical levels.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftInputForm } from '@searchcraft/react-sdk';
+ * import searchcraftConfig from './searchcraftConfig';
+ *
+ * const MySearchComponent = () => {
+ *   const handleQuerySubmit = (event: CustomEvent<string>) => {
+ *     console.log("Query submitted", event.detail);
+ *   };
+ *
+ *   return (
+ *     <SearchcraftInputForm
+ *       config={searchcraftConfig}
+ *       autoSearch={true}
+ *       buttonPlacement="right"
+ *       buttonLabel="Search"
+ *       inputLabel="Search Database"
+ *       customStyles={{ border: "1px solid gray", padding: "5px" }}
+ *       placeholderValue="Search here..."
+ *       searchTerm=""
+ *       onQuerySubmit={handleQuerySubmit}
+ *       onInputCleared={() => console.log("Input cleared")}
+ *       onNoResultsReceived={() => console.log("No results found")}
+ *       onInputFocus={() => console.log("Input focused")}
+ *       onInputBlur={() => console.log("Input blurred")}
+ *       onInputInit={() => console.log("Input initialized")}
+ *     />
+ *   );
+ * };
+ *
+ * export default MySearchComponent;
+ * ```
  */
 export declare const SearchcraftInputForm: FC<SearchcraftInputFormProps>;
 
@@ -38,8 +110,50 @@ export declare interface SearchcraftInputFormProps extends Components.Searchcraf
 }
 
 /**
- * The React component for the SearchcraftPopoverButton.
- * @param props
+ * This React component is designed to facilitate pagination of search results.
+ * Once a query is submitted, calculates the number for pages.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftPagination } from '@searchcraft/react-sdk';
+ *
+ * const MyPaginationComponent = () => {
+ *   return (
+ *     // other searchcraft components
+ *     <SearchcraftPagination />
+ *   );
+ * };
+ *
+ * export default MyPaginationComponent;
+ * ```
+ */
+export declare const SearchcraftPagination: FC<SearchcraftPaginationProps>;
+
+/**
+ * The props for the SearchcraftPagination component.
+ */
+export declare interface SearchcraftPaginationProps extends Components.SearchcraftPagination {
+}
+
+/**
+ * A button component that, when clicked, toggles the visibility of a popover.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftPopoverButton } from '@searchcraft/react-sdk';
+ *
+ * const MyPopoverTrigger = () => {
+ *   return (
+ *     <SearchcraftPopoverButton>
+ *       Open Popover
+ *     </SearchcraftPopoverButton>
+ *   );
+ * };
+ *
+ * export default MyPopoverTrigger;
+ * ```
  */
 export declare const SearchcraftPopoverButton: FC<SearchcraftPopoverButtonProps>;
 
@@ -50,8 +164,30 @@ export declare interface SearchcraftPopoverButtonProps extends Components.Search
 }
 
 /**
- * The React component for SearchcraftPopoverForm.
- * @param props
+ * A component that displays search results in a popover container that dynamically appears
+ * when the user interacts with a search input field, or when a popover button is clicked.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftPopoverForm } from '@searchcraft/react-sdk';
+ * import searchcraftConfig from './searchcraftConfig';
+ * import popoverResultMappings from './popoverResultMappings';
+ *
+ * const MyPopoverSearch = () => {
+ *   return (
+ *     <SearchcraftPopoverForm
+ *       config={searchcraftConfig}
+ *       type="fullscreen"
+ *       popoverResultMappings={popoverResultMappings}
+ *       hotkey="k"
+ *       hotkeyModifier="meta"
+ *     />
+ *   );
+ * };
+ *
+ * export default MyPopoverSearch;
+ * ```
  */
 export declare const SearchcraftPopoverForm: FC<SearchcraftPopoverFormProps>;
 
@@ -62,8 +198,26 @@ export declare interface SearchcraftPopoverFormProps extends Components.Searchcr
 }
 
 /**
- * The React component for SearchcraftResultsInfo.
- * @param props
+ * This React component is designed to display the number of results returned from a search query.
+ *
+ * @example
+ * ```tsx
+ * import React, { useEffect, useRef } from 'react';
+ * import { SearchcraftResultsInfo } from '@searchcraft/react-sdk';
+ *
+ * const MyResultsInfo = () => {
+ *   const ref = useRef();
+ *
+ *   useEffect(() => {
+ *     ref.current.customFormatter = (range, count, responseTime) =>
+ *       `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+ *   });
+ *
+ *   return <SearchcraftResultsInfo ref={ref} />;
+ * };
+ *
+ * export default MyResultsInfo;
+ * ```
  */
 export declare const SearchcraftResultsInfo: FC<SearchcraftResultsInfoProps>;
 
@@ -74,8 +228,43 @@ export declare interface SearchcraftResultsInfoProps extends Components.Searchcr
 }
 
 /**
- * The react component for SearchcraftTheme.
- * @param props
+ * This React component is designed to choose the number of search results displayed.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftSearchResultsPerPage } from '@searchcraft/react-sdk';
+ *
+ * const MyResultsPerPage = () => {
+ *   return <SearchcraftSearchResultsPerPage increment={20} />;
+ * };
+ *
+ * export default MyResultsPerPage;
+ * ```
+ */
+export declare const SearchcraftSearchResultsPerPage: FC<SearchcraftSearchResultsPerPageProps>;
+
+/**
+ * The Props for the SearchcraftSearchResultsPerPage component.
+ */
+export declare interface SearchcraftSearchResultsPerPageProps extends Components.SearchcraftSearchResultsPerPage {
+}
+
+/**
+ * A component that applies Searchcraft's built-in CSS theme to your page.
+ * It does not render anything visible—its only function is to manage the CSS styles on the page.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftTheme } from '@searchcraft/react-sdk';
+ *
+ * const MyThemeProvider = () => {
+ *   return <SearchcraftTheme theme="light" customTheme={'[]'} />;
+ * };
+ *
+ * export default MyThemeProvider;
+ * ```
  */
 export declare const SearchcraftTheme: FC<SearchcraftThemeProps>;