react-addsearch-ui 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2021 AddSearch Oy https://www.addsearch.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# React AddSearch UI
+
+Implemements [AddSearch](www.addsearch.com)'s [search-ui](https://github.com/AddSearch/search-ui)
+package as a ReactJS library exposing one single Component for Integration.
+
+## Setup
+
+### 1. Add `react-addsearch-ui` to your dependencies:
+
+```bash
+npm i react-addsearch-ui
+// pnpm i react-addsearch-ui
+// yarn add react-addsearch-ui
+```
+
+### 2. Import and configure `AddSearchUiIntegration` component
+
+```tsx
+import { AddSearchUiIntegration } from 'react-addsearch-ui';
+import 'react-addsearch-ui/dist/style.css';
+
+export default function App() {
+    return (
+        <div className="flex flex-col w-full h-full gap-6 p-6 items-center">
+            <h1>My React AddSearch UI Integration Example</h1>
+            <AddSearchUiIntegration publicSiteKey="YOUR_PUBLIC_SITEKEY(as ENV VAR ideally)" />
+        </div>
+    );
+}
+```
+
+-   `publicSiteKey` can be found in your dashboard
+
+### 3. Brand your Search UI
+
+#### Brand Color:
+
+```tsx
+<AddSearchUiIntegration publicSiteKey="YOUR_PUBLIC_SITEKEY" primaryColor="#004225" />
+```
+
+#### Custom Font:
+
+Load font, e.g. by adding to your document head, e.g.:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet"
+/>
+```
+
+then use the customFont property on `AddSearchUiIntegration`:
+
+```tsx
+<AddSearchUiIntegration
+    publicSiteKey="YOUR_PUBLIC_SITEKEY"
+    primaryColor="#004225"
+    customFont="Poppins"
+/>
+```
+
+### 4. Configure the UI
+
+```tsx
+<AddSearchUiIntegration
+    publicSiteKey="YOUR_PUBLIC_SITEKEY"
+    primaryColor="#004225" // default AddSearch primary color
+    customFont="Poppins" // no default
+    searchFieldHeaderText="Search" // no default
+    searchButtonText="Apply" // no default
+    hasSearchInputFieldIcon={false} // default true
+    hasSearchInputAutofocus={false} // default true
+    searchInputPlaceholderText="What are you looking for?" // default "keyword"
+    hasSearchAsYouType={true} // default false
+    minLengthToShowSearchAsYouTypeResults={1} // default 3
+    hasAutocomplete={true} // default true
+    loadMoreResults={'button'} // default 'pagination'
+    hasLoadMore={true} // default true
+    sortByOptions={sortByOptions} // default []
+    filters={[
+        {
+            labelText: 'Categories',
+            type: 'checkbox-group',
+            options: {
+                pricing: {
+                    label: 'Pricing',
+                    filter: { category: '1xpricing' }
+                },
+                partners: {
+                    label: 'Partners',
+                    filter: { category: '1xpartners' }
+                },
+                customers: {
+                    label: 'Customers',
+                    filter: { category: '1xcustomers' }
+                }
+            }
+        },
+        {
+            labelText: 'Documents',
+            type: 'tags',
+            options: {
+                nofilter: {
+                    label: 'All results'
+                },
+                blog: {
+                    label: 'Blog',
+                    filter: { category: '1xblog' }
+                },
+                docs: {
+                    label: 'Documentation',
+                    filter: { category: '1xdocs' }
+                }
+            }
+        }
+    ]}
+    hasActiveFilters={true} // default true
+/>
+```
+
+-   `minLengthToShowSearchAsYouTypeResults` affects both `hasAutocomplete` and `hasSearchAsYouType`
+-   `loadMoreResults` defines what UI option to use for loading more results
+-   `sortByOptions` and `filtersOptions` for configuration details visit
+    [SortBy Documentation](https://github.com/AddSearch/search-ui?tab=readme-ov-file#sort-by) and
+    [Filters Documentation](https://github.com/AddSearch/search-ui?tab=readme-ov-file#filters)
+    respectively
+-   `filterTypes`
+-   `filters` can handle 1 'tabs' filter and 1 'select-list' filter and multiple filters of the
+    other types (all supported types are 'tabs' | 'checkbox-group' | 'radio-group' | 'tags' |
+    'select-list')
+-   `hasActiveFilters`is disabled when using Tab Filters

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import * as React_2 from 'react';
+
+export declare const AddSearchUiIntegration: React_2.FC<AddSearchUiIntegrationProps>;
+
+declare interface AddSearchUiIntegrationProps {
+    readonly publicSiteKey: string;
+    readonly primaryColor?: string;
+    readonly customFont?: string;
+    readonly searchFieldHeaderText?: string;
+    readonly searchButtonText?: string;
+    readonly searchInputPlaceholderText?: string;
+    readonly hasSearchInputAutofocus?: boolean;
+    readonly hasSearchAsYouType?: boolean;
+    readonly minLengthToShowSearchAsYouTypeResults?: number;
+    readonly hasSearchInputFieldIcon?: boolean;
+    readonly hasAutocomplete?: boolean;
+    readonly loadMoreResults?: 'button' | 'pagination';
+    readonly sortByOptions?: SortByOption[];
+    readonly filters?: Filter[];
+    readonly hasActiveFilters?: boolean;
+}
+
+declare interface Filter {
+    readonly labelText?: string;
+    readonly type: FilterType;
+    readonly options: {
+        [key: string]: {
+            readonly label: string;
+            readonly filter?: {
+                readonly category: string;
+            };
+        };
+    };
+}
+
+declare type FilterType = 'tabs' | 'checkbox-group' | 'radio-group' | 'tags' | 'select-list';
+
+declare interface SortByOption {
+    readonly label: string;
+    readonly sortBy: string | string[];
+    readonly order: string | string[];
+}
+
+export { }