@searchcraft/react-sdk 0.7.1 → 0.8.0

package/dist/index.d.ts

@@ -1,38 +1,276 @@
 import { Components } from '@searchcraft/javascript-sdk';
 import { FC } from 'react';
 
+/**
+ * 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>;
 
+/**
+ * The props for the SearchcraftBaseSearchResults component.
+ */
 export declare interface SearchcraftBaseSearchResultsProps extends Components.SearchcraftBaseSearchResults {
 }
 
+/**
+ * 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>;
 
+/**
+ * The props for the SearchcraftFilterPanel.
+ */
 export declare interface SearchcraftFilterPanelProps extends Components.SearchcraftFilterPanel {
 }
 
+/**
+ * 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>;
 
+/**
+ * The props for the SearchcraftInputForm.
+ */
 export declare interface SearchcraftInputFormProps extends Components.SearchcraftInputForm {
 }
 
+/**
+ * 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>;
 
+/**
+ * The props for the SearchcraftPopoverButton.
+ */
 export declare interface SearchcraftPopoverButtonProps extends Components.SearchcraftPopoverButton {
 }
 
+/**
+ * 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>;
 
+/**
+ * The props for the SearchcraftPopoverForm component.
+ */
 export declare interface SearchcraftPopoverFormProps extends Components.SearchcraftPopoverForm {
 }
 
+/**
+ * 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>;
 
+/**
+ * The Props for the SearchcraftResultsInfo component.
+ */
 export declare interface SearchcraftResultsInfoProps extends Components.SearchcraftResultsInfo {
 }
 
+/**
+ * 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>;
 
+/**
+ * The Props for the SearchcraftTheme component.
+ */
 export declare interface SearchcraftThemeProps extends Components.SearchcraftTheme {
 }