@searchcraft/react-sdk 0.9.6 → 0.10.0

package/README.md

@@ -28,7 +28,7 @@ The React SDK provides the following prebuilt components for use in your applica
 <SearchcraftPopoverForm />
 <SearchcraftFilterPanel />
 <SearchcraftResultsInfo />
-<SearchcraftBaseSearchResults />
+<SearchcraftSearchResults />
 <SearchcraftPagination />
 
 ```

package/dist/client/index.d.ts

@@ -0,0 +1,292 @@
+import { Components } from '@searchcraft/javascript-sdk';
+import { defineCustomElements } from '@searchcraft/javascript-sdk';
+import { FC } from 'react';
+import { SearchcraftConfig } from '@searchcraft/javascript-sdk';
+import { SearchcraftCore } from '@searchcraft/javascript-sdk';
+
+export { defineCustomElements }
+
+/**
+ * The consumer-facing Searchcraft class.
+ */
+export declare class Searchcraft extends SearchcraftCore {
+    constructor(config: SearchcraftConfig);
+}
+
+/**
+ * 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 {
+}
+
+/**
+ * A component that renders a list of search results with customizable styles, layout, and link behavior.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { SearchcraftSearchResults } from '@searchcraft/react-sdk';
+ * import searchResultMappings from './searchResultMappings';
+ *
+ * const MySearchComponent = () => {
+ *   return (
+ *     <SearchcraftSearchResults
+ *       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 SearchcraftSearchResults: FC<SearchcraftSearchResultsProps>;
+
+/**
+ * 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 {
+}
+
+/**
+ * The props for the SearchcraftSearchResults component.
+ */
+export declare interface SearchcraftSearchResultsProps extends Components.SearchcraftSearchResults {
+}
+
+/**
+ * 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 />;
+ * };
+ *
+ * export default MyThemeProvider;
+ * ```
+ */
+export declare const SearchcraftTheme: FC<SearchcraftThemeProps>;
+
+/**
+ * The Props for the SearchcraftTheme component.
+ */
+export declare interface SearchcraftThemeProps extends Components.SearchcraftTheme {
+}
+
+
+export * from "@searchcraft/javascript-sdk";
+
+export { }