5 | I am an error
6 |
7 | `;
8 |
--------------------------------------------------------------------------------
/packages/search-ui-analytics-plugin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib"
5 | },
6 | "exclude": ["node_modules", "lib"],
7 | "include": ["src/**/*.ts", "src/**/*.js"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/search-ui-engines-connector/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib"
5 | },
6 | "exclude": ["node_modules", "lib"],
7 | "include": ["src/**/*.ts", "src/**/*.js"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/search-ui-elasticsearch-connector/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib"
5 | },
6 | "exclude": ["node_modules", "lib"],
7 | "include": ["src/**/*.ts", "src/**/*.js"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/search-ui-site-search-connector/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "lib"
5 | },
6 | "exclude": ["node_modules", "lib"],
7 | "include": ["src/**/*.ts", "src/**/*.js"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/SearchContext.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { SearchProviderContextInterface } from "./SearchProvider";
3 |
4 | const SearchContext =
5 | React.createContext
7 |
11 | `;
12 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/__tests__/__snapshots__/Results.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders correctly 1`] = `
4 |
8 | Children
9 |
10 | -
7 |
8 | Children
9 |
10 | Main site content goes here
11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-search-ui-views/src/styles/themes/reference-ui/components/_sorting.scss: -------------------------------------------------------------------------------- 1 | @include block("sorting") { 2 | @include themeTypography; 3 | display: inline-block; 4 | width: 100%; 5 | 6 | @include element("label") { 7 | font-size: $sizeM; 8 | color: $facetLabel; 9 | text-transform: uppercase; 10 | letter-spacing: 1px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/sandbox/src/components/UseCaseCard.tsx: -------------------------------------------------------------------------------- 1 | import { Card } from "./Card"; 2 | 3 | export const UseCaseCard = ({ title, description, href, icon }) => ( 4 |
12 |
--------------------------------------------------------------------------------
/packages/react-search-ui/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: "ts-jest/presets/js-with-ts-esm",
3 | testPathIgnorePatterns: ["./lib"],
4 | testEnvironment: "jsdom",
5 | setupFilesAfterEnv: ["
7 | I am an error
8 |
9 | `;
10 |
11 | exports[`renders children when there is no error 1`] = `
12 |
13 | Child
14 |
15 | `;
16 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | # Fixes commits issued from VSCode. Compiled from: https://github.com/typicode/husky/issues/912
5 | export NVM_DIR="$HOME/.nvm"
6 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
7 | a=$(nvm ls | grep 'node')
8 | b=${a#*(-> }
9 | v=${b%%[)| ]*}
10 | export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"
11 |
12 | npx lint-staged
13 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: "ts-jest/presets/js-with-ts-esm",
3 | testPathIgnorePatterns: ["./lib"],
4 | testEnvironment: "jsdom",
5 | setupFilesAfterEnv: ["
8 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from "@storybook/react";
2 |
3 | import "../lib/styles/styles.css";
4 |
5 | // automatically import all files ending in *.stories.js
6 | const req = require.context("../stories", true, /.stories.js$/);
7 | function loadStories() {
8 | req.keys().forEach((filename) => req(filename));
9 | }
10 |
11 | configure(loadStories, module);
12 |
--------------------------------------------------------------------------------
/examples/vue/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
7 | Showing
8 |
9 |
10 | 0
11 | -
12 | 20
13 |
14 |
15 | out of
16 |
17 | 1000
18 |
19 |
20 | for:
21 |
22 | grok
23 |
24 |
25 | `;
26 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "module": "ESNext",
5 | "target": "ES2015",
6 | "declaration": true,
7 | "strict": false,
8 | "sourceMap": true,
9 | "moduleResolution": "node",
10 | "resolveJsonModule": true,
11 | "allowSyntheticDefaultImports": true,
12 | "esModuleInterop": true,
13 | "forceConsistentCasingInFileNames": true,
14 | "isolatedModules": true,
15 | "skipLibCheck": true
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/search-ui-elasticsearch-connector/src/__tests__/index.test.ts:
--------------------------------------------------------------------------------
1 | import ElasticsearchAPIConnector from "../index";
2 |
3 | describe("elasticsearch connector interface", () => {
4 | it("should throw an exception when host or cloud not specified", () => {
5 | expect(() => {
6 | new ElasticsearchAPIConnector({
7 | index: "test"
8 | });
9 | }).toThrowError(
10 | "Either host or cloud configuration or custom apiClient must be provided"
11 | );
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_results-per-page.scss:
--------------------------------------------------------------------------------
1 | @include block("results-per-page") {
2 | @include themeTypography;
3 | color: $metaTextColor;
4 | font-size: 12px;
5 | display: flex;
6 | align-items: center;
7 | height: 100%;
8 |
9 | @include element("label") {
10 | margin-right: $sizeS;
11 | }
12 |
13 | .sui-select__control {
14 | align-items: center;
15 |
16 | input {
17 | position: absolute;
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | const args = process.argv;
4 | const watch = args.indexOf("--watch") !== -1;
5 |
6 | export default defineConfig({
7 | entry: ["src/index.ts"],
8 | format: ["esm", "cjs"],
9 | dts: true,
10 | sourcemap: watch,
11 | clean: !watch,
12 | splitting: false,
13 | minify: !watch,
14 | outDir: "lib",
15 | watch,
16 | silent: watch,
17 | onSuccess: "echo 'Build completed successfully! 🎉'",
18 | tsconfig: "tsconfig.json"
19 | });
20 |
--------------------------------------------------------------------------------
/packages/search-ui-engines-connector/src/handlers/search/Query.ts:
--------------------------------------------------------------------------------
1 | import SearchkitModule from "../SearchkitModule";
2 |
3 | const { CustomQuery } = SearchkitModule;
4 |
5 | export const EngineQuery = () =>
6 | new CustomQuery({
7 | queryFn: (query) => {
8 | return {
9 | bool: {
10 | must: [
11 | {
12 | query_string: {
13 | query: query
14 | }
15 | }
16 | ]
17 | }
18 | };
19 | }
20 | });
21 |
--------------------------------------------------------------------------------
/packages/search-ui/src/actions/setResultsPerPage.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Set the number of results to show
3 | *
4 | * Will trigger new search
5 | *
6 | * @param resultsPerPage Integer
7 | */
8 | export default function setResultsPerPage(resultsPerPage: number): void {
9 | if (this.debug)
10 | // eslint-disable-next-line no-console
11 | console.log("Search UI: Action", "setResultsPerPage", ...arguments);
12 |
13 | this._updateSearchResults({
14 | current: 1,
15 | resultsPerPage
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/__tests__/A11yNotifications.test.ts:
--------------------------------------------------------------------------------
1 | import defaultMessages from "../A11yNotifications";
2 |
3 | it("outputs moreFilters correctly", () => {
4 | expect(
5 | defaultMessages.moreFilters({
6 | visibleOptionsCount: 15,
7 | showingAll: false
8 | })
9 | ).toEqual("15 options shown.");
10 |
11 | expect(
12 | defaultMessages.moreFilters({
13 | visibleOptionsCount: 28,
14 | showingAll: true
15 | })
16 | ).toEqual("All 28 options shown.");
17 | });
18 |
--------------------------------------------------------------------------------
/pull_request_template.md:
--------------------------------------------------------------------------------
1 | Before submitting this PR:
2 |
3 | 1. Make sure you are PR'ing from a fork, please do not push branches directly
4 | to this repository.
5 | 2. Ensure you've written sufficient tests for your work.
6 | 3. Double check that your changes will not break existing connectors (if
7 | applicable).
8 | 4. Double check that your changes do not break the `react-search-ui-views`
9 | storybook (if applicable).
10 |
11 | ## Description
12 |
13 | ## List of changes
14 |
15 | ## Associated Github Issues
16 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/WithSearchRenderProps.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import withSearch from "./withSearch";
3 | import PropTypes from "prop-types";
4 |
5 | function WithSearch({ mapContextToProps, children }) {
6 | const Search = withSearch(mapContextToProps)((props) => {
7 | return children(props);
8 | });
9 |
10 | return
7 | Showing
8 |
9 |
10 | 1
11 | -
12 | 20
13 |
14 |
15 | out of
16 |
17 | 100
18 |
19 |
20 | `;
21 |
22 | exports[`supports a render prop 1`] = `
23 |
24 | 1
25 | 20
26 |
27 | `;
28 |
--------------------------------------------------------------------------------
/examples/vue/src/components/SearchSort.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
21 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_error-boundary.scss:
--------------------------------------------------------------------------------
1 | @include block("search-error") {
2 | @include themeTypography;
3 | color: $red;
4 | margin: auto;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | height: calc(100vh - 180px);
9 |
10 | &.no-error {
11 | @include themeTypography;
12 | color: $black;
13 | margin: auto;
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | height: calc(100vh - 180px);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/search-ui-engines-connector/src/types.ts:
--------------------------------------------------------------------------------
1 | import type { estypes } from "@elastic/elasticsearch";
2 |
3 | export type SearchRequest = estypes.SearchRequest;
4 | export type SearchResponse = estypes.SearchResponseSort by
4 |
12 |
16 | {children}
17 |
18 | );
19 | }
20 |
21 | export default Facets;
22 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // setup file
2 | import { configure } from "enzyme";
3 | import util from "util";
4 | import Adapter from "@cfaester/enzyme-adapter-react-18";
5 |
6 | configure({ adapter: new Adapter() });
7 |
8 | if (typeof global.TextEncoder === "undefined") {
9 | Object.defineProperty(global, "TextEncoder", {
10 | value: util.TextEncoder
11 | });
12 | }
13 |
14 | if (typeof global.TextDecoder === "undefined") {
15 | Object.defineProperty(global, "TextDecoder", {
16 | value: util.TextDecoder
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/packages/search-ui-app-search-connector/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2015",
4 | "declaration": true,
5 | "outDir": "lib/esm",
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": false,
9 | "forceConsistentCasingInFileNames": true,
10 | "esModuleInterop": true,
11 | "module": "es2020",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true
15 | },
16 | "exclude": ["node_modules"],
17 | "include": ["src/**/*.ts", "src/**/*.js"]
18 | }
19 |
--------------------------------------------------------------------------------
/packages/search-ui-workplace-search-connector/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2015",
4 | "declaration": true,
5 | "outDir": "lib/esm",
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": false,
9 | "forceConsistentCasingInFileNames": true,
10 | "esModuleInterop": true,
11 | "module": "es2020",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true
15 | },
16 | "exclude": ["node_modules"],
17 | "include": ["src/**/*.ts", "src/**/*.js"]
18 | }
19 |
--------------------------------------------------------------------------------
/examples/sandbox/.codesandbox/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | "setupTasks": [
3 | {
4 | "name": "Install Dependencies",
5 | "command": "yarn install"
6 | },
7 | {
8 | "name": "Build App",
9 | "command": "VITE_IS_SANDBOX=true yarn build"
10 | }
11 | ],
12 | "tasks": {
13 | "start": {
14 | "name": "start",
15 | "command": "VITE_IS_SANDBOX=true yarn start & node src/pages/elasticsearch-production-ready/server/index.js",
16 | "runAtStart": true,
17 | "preview": {
18 | "port": 4173
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/search-ui/src/queryString.ts:
--------------------------------------------------------------------------------
1 | import queryString from "qs";
2 | import preserveTypesEncoder from "./preserveTypesEncoder";
3 |
4 | export default {
5 | parse(string: string | Record
3 |
14 |
15 |
16 |
22 |
--------------------------------------------------------------------------------
/.ci/pipelines/search-ui.groovy:
--------------------------------------------------------------------------------
1 | @Library(['estc', 'entsearch']) _
2 |
3 | eshPipeline(
4 | timeout: 45,
5 | project_name: 'Search UI',
6 | repository: 'search-ui',
7 | stage_name: 'Search UI Unit Tests',
8 | stages: [
9 |
10 | [
11 | name: 'Run tests',
12 | type: 'script',
13 | label: 'Run tests',
14 | script: {
15 | sh "docker run --rm -v `pwd`:/ci -w=/ci node:16.14 npm install && npm run test-ci"
16 | },
17 | match_on_all_branches: true,
18 | ]
19 | ],
20 | slack_channel: 'search-ui'
21 | )
22 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Question
3 | about: Questions about using this library
4 | title: ""
5 | labels: question
6 | assignees: ""
7 | ---
8 |
9 | Please read the following before posting:
10 |
11 | The Enterprise Search team at Elastic maintains this library and are happy to help. Try posting your question to the [Elastic Enterprise Search](https://discuss.elastic.co/c/enterprise-search/84) discuss forums. Be sure to mention that you're using Search UI and also let us know what backend your using; whether it's App Search, Site Search, Workplace Search, Elasticsearch, or something else entirely.
12 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/__tests__/helpers.test.ts:
--------------------------------------------------------------------------------
1 | import { accentFold } from "../helpers";
2 |
3 | describe("accentFold", () => {
4 | it("should remove accents marks from string", () => {
5 | expect(accentFold("ǟc̈ŗÄh")).toBe("acrAh");
6 | expect(accentFold("abc")).toBe("abc");
7 | expect(accentFold("ABC")).toBe("ABC");
8 | // anything other than string passed as argument should return empty string
9 | expect(accentFold(123)).toBe("");
10 | expect(accentFold({ a: 1, b: 2 })).toBe("");
11 | expect(accentFold([1, 2])).toBe("");
12 | expect(accentFold(null)).toBe("");
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/.github/workflows/docs-preview.yml:
--------------------------------------------------------------------------------
1 | name: docs-preview
2 | on:
3 | pull_request_target:
4 | types: [opened]
5 | paths:
6 | - "**.asciidoc"
7 | - "**.jpg"
8 | - "**.png"
9 | - "**.gif"
10 |
11 | permissions:
12 | pull-requests: write
13 |
14 | jobs:
15 | doc-preview-pr:
16 | runs-on: ubuntu-latest
17 | steps:
18 | - uses: elastic/docs/.github/actions/docs-preview@master
19 | with:
20 | github-token: ${{ secrets.GITHUB_TOKEN }}
21 | repo: ${{ github.event.repository.name }}
22 | preview-path: "guide/index.html"
23 | pr: ${{ github.event.pull_request.number }}
24 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "packages": ["examples/*", "packages/*"],
3 | "version": "1.23.1",
4 | "useWorkspaces": true,
5 | "npmClient": "yarn",
6 | "command": {
7 | "publish": {
8 | "npmClient": "npm",
9 | "ignoreChanges": [
10 | "**/__tests__/**",
11 | "**/*.md",
12 | "**/src/test/**",
13 | "packages/search-ui-workplace-search-connector/**",
14 | "packages/search-ui-app-search-connector/**"
15 | ],
16 | "registry": "https://registry.npmjs.org/",
17 | "message": "Release: %s"
18 | },
19 | "run": {
20 | "sort": true,
21 | "noPrivate": true
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/search-ui-elasticsearch-connector/src/__tests__/utils.test.ts:
--------------------------------------------------------------------------------
1 | import { getHostFromCloud } from "../utils";
2 |
3 | describe("Utils Browser Tests", () => {
4 | it("should correctly decode cloud ID in browser environment", () => {
5 | const testCloudId =
6 | "some-search-build:c29tZWNsb3VkaG9zdDo0NDMkcmFuZG9tSWQkc29tZWluZm8=";
7 |
8 | // Spy on atob
9 | const atobSpy = jest.spyOn(window, "atob");
10 | const result = getHostFromCloud({ id: testCloudId });
11 |
12 | expect(atobSpy).toHaveBeenCalled();
13 | expect(result).toBe("https://randomId.somecloudhost:443");
14 |
15 | atobSpy.mockRestore();
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/examples/sandbox/src/components/TabTrigger.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs } from "radix-ui";
2 |
3 | export const TabTrigger = ({
4 | children,
5 | value
6 | }: {
7 | children: React.ReactNode;
8 | value: string;
9 | }) => {
10 | return (
11 | Show
4 |
13 |
17 |
18 | {getAutocomplete()}
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export default SearchInput;
26 |
--------------------------------------------------------------------------------
/packages/search-ui-elasticsearch-connector/src/__tests__/utils.test.node.ts:
--------------------------------------------------------------------------------
1 | import { getHostFromCloud } from "../utils";
2 |
3 | describe("Utils Node.js Tests", () => {
4 | it("should correctly decode cloud ID in Node.js environment", () => {
5 | const testCloudId =
6 | "some-search-build:c29tZWNsb3VkaG9zdDo0NDMkcmFuZG9tSWQkc29tZWluZm8=";
7 |
8 | // Spy on Buffer.from
9 | const bufferSpy = jest.spyOn(Buffer, "from");
10 | const result = getHostFromCloud({ id: testCloudId });
11 |
12 | expect(bufferSpy).toHaveBeenCalled();
13 | expect(result).toBe("https://randomId.somecloudhost:443");
14 |
15 | bufferSpy.mockRestore();
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Working with the docs
2 |
3 | The [Search UI docs](https://www.elastic.co/guide/en/search-ui/current/overview.html) are written in [Docs V3](https://elastic.github.io/docs-builder/) and are built using [elastic/docs](https://github.com/elastic/docs).
4 |
5 | ## Build the docs locally
6 |
7 | Before building the docs locally make sure you have:
8 |
9 | - [docs-builder](https://elastic.github.io/docs-builder/contribute/locally/#step-one) install locally
10 |
11 | Install `docs-builder` in a parent directory and run
12 |
13 | ```
14 | ../docs-builder serve -p ./docs
15 | ```
16 |
17 | And open: [http://localhost:3000/reference/](http://localhost:3000/reference/)
18 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/__tests__/layouts/__snapshots__/LayoutSidebar.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders correctly 1`] = `
4 |
16 |
24 | Hello world!
25 |
26 | Children
9 | Children
19 | Children
9 | Children
19 | {driver.state.searchTerm}
}
18 |
3 |
6 |
7 |
8 |
17 |
18 |
35 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/containers/__tests__/__snapshots__/Facet.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders correctly 1`] = `
4 | Search UI demo with Vue (Hearthstone cards)
4 |-
3 |
-
8 |
9 |
10 |
11 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/packages/search-ui/src/actions/setSort.ts:
--------------------------------------------------------------------------------
1 | import { SortOption, SortDirection } from "../types";
2 | /**
3 | * Set the current sort
4 | *
5 | * Will trigger new search
6 | *
7 | * @param sort SortList | string
8 | * @param sortDirection String ["asc"|"desc"]
9 | */
10 | export default function setSort(
11 | sort: SortOption[] | string,
12 | sortDirection: SortDirection
13 | ): void {
14 | // eslint-disable-next-line no-console
15 | if (this.debug) console.log("Search UI: Action", "setSort", ...arguments);
16 |
17 | const update = {
18 | current: 1,
19 | sortList: null,
20 | sortField: null,
21 | sortDirection: null
22 | };
23 |
24 | if (Array.isArray(sort)) {
25 | update.sortList = sort;
26 | } else {
27 | update.sortField = sort;
28 | update.sortDirection = sortDirection;
29 | }
30 |
31 | this._updateSearchResults(update);
32 | }
33 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { appendClassName } from "./view-helpers";
4 | import type { SearchContextState } from "@elastic/search-ui";
5 | import { BaseContainerProps } from "./types";
6 |
7 | export type ErrorBoundaryContainerContext = Pick
13 |
22 |
21 | {error}
22 |
23 | );
24 | }
25 |
26 | return children as JSX.Element;
27 | }
28 |
29 | export default ErrorBoundary;
30 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_facets.scss:
--------------------------------------------------------------------------------
1 | @include block("facet") {
2 | @include themeTypography;
3 | // fieldset reset
4 | margin: 0;
5 | padding: 0;
6 | border: 0;
7 |
8 | & + & {
9 | margin-top: $sizeXL;
10 | }
11 |
12 | .sui-sorting + & {
13 | margin-top: $sizeXL;
14 | }
15 |
16 | @include element("title") {
17 | text-transform: uppercase;
18 | font-size: 12px;
19 | color: #8b9bad;
20 | letter-spacing: 1px;
21 | // legend reset
22 | padding: 0;
23 | }
24 |
25 | @include element("list") {
26 | line-height: 1.5;
27 | font-size: 13px;
28 | margin: $sizeS 0;
29 | padding: 0;
30 | }
31 |
32 | @include element("count") {
33 | color: $facetCountColor;
34 | font-size: 0.85em;
35 | margin-left: 20px;
36 | display: inline-block;
37 | padding-top: 2px;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/view-helpers/getUrlSanitizer.ts:
--------------------------------------------------------------------------------
1 | const VALID_PROTOCOLS = ["http:", "https:"];
2 |
3 | /**
4 | *
5 | * @param {URL} URLParser URL interface provided by browser https://developer.mozilla.org/en-US/docs/Web/API/URL
6 | * @param {String} currentLocation String representation of the browser's current location
7 | */
8 | export default function getUrlSanitizer(
9 | URLParser: typeof URL,
10 | currentLocation: string
11 | ) {
12 | // This function is curried so that dependencies can be injected and don't need to be mocked in tests.
13 | return (url) => {
14 | let parsedUrl;
15 |
16 | try {
17 | // Attempts to parse a URL as relative
18 | parsedUrl = new URLParser(url, currentLocation);
19 | // eslint-disable-next-line no-empty
20 | } catch (e) {}
21 |
22 | return VALID_PROTOCOLS.includes(parsedUrl.protocol) ? url : "";
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/packages/search-ui/src/test/sharedTests.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable jest/no-export */
2 |
3 | import { doesStateHaveResponseData } from "./helpers";
4 |
5 | export function itResetsCurrent(fn) {
6 | const state = fn();
7 | it("resets current", () => {
8 | expect(state.current).toEqual(1);
9 | });
10 | }
11 |
12 | export function itResetsFilters(fn) {
13 | const state = fn();
14 | it("resets filters", () => {
15 | expect(state.filters).toEqual([]);
16 | });
17 | }
18 |
19 | export function itFetchesResults(fn) {
20 | it("fetches results", () => {
21 | const state = fn();
22 | expect(doesStateHaveResponseData(state)).toBe(true);
23 | });
24 | }
25 |
26 | export function itUpdatesURLState(MockedURLManager, fn) {
27 | it("Updates URL state", () => {
28 | fn();
29 | expect(
30 | MockedURLManager.mock.instances[0].pushStateToURL.mock.calls
31 | ).toHaveLength(1);
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/docs/reference/guides-debugging.md:
--------------------------------------------------------------------------------
1 | ---
2 | mapped_pages:
3 | - https://www.elastic.co/guide/en/search-ui/current/guides-debugging.html
4 | ---
5 |
6 | # Debugging [guides-debugging]
7 |
8 | There is a `debug` flag available on the configuration for `SearchDriver` and `SearchProvider`.
9 |
10 | ```jsx
11 |
3 | Showing
4 | {{ start }} - {{ Math.min(end, searchState.totalResults) }}
5 | out of {{ searchState.totalResults }} for:
6 | "{{ searchState.searchTerm }}"
7 |
8 |
9 |
10 |
32 |
--------------------------------------------------------------------------------
/packages/search-ui-engines-connector/src/handlers/transporter.ts:
--------------------------------------------------------------------------------
1 | import { SearchRequest, SearchResponse, Transporter } from "../types";
2 |
3 | export class EngineTransporter implements Transporter {
4 | constructor(
5 | private host: string,
6 | private engineName: string,
7 | private apiKey: string
8 | ) {}
9 |
10 | async performRequest(requestBody: SearchRequest): Promise
3 |
24 |
25 |
26 |
32 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/__tests__/ResultsPerPage.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ResultsPerPage from "../ResultsPerPage";
3 | import { shallow } from "enzyme";
4 |
5 | const requiredProps = {
6 | onChange: () => ({}),
7 | options: [20, 40]
8 | };
9 |
10 | it("renders correctly when there is a selected value", () => {
11 | const wrapper = shallow(
4 |
22 |
23 | Child
,
7 | error: "I am an error"
8 | };
9 |
10 | it("renders an error when there is an error", () => {
11 | const wrapper = shallow(-
30 | {children}
31 |
19 | {isLoading &&
27 | );
28 | };
29 | export const App = () => {
30 | return (
31 | I'm loading now
}
20 | {!isLoading && (
21 |
11 |
13 | }
14 | bodyContent={Side Content
12 | Body Content
}
15 | bodyHeader={Body Header
}
16 | bodyFooter={Body Footer
}
17 | />
18 | );
19 | expect(wrapper).toMatchSnapshot();
20 | });
21 |
22 | it("will accept children instead of bodyContent", () => {
23 | const wrapper = shallow(
24 |
28 |
30 | }
31 | bodyHeader={Side Content
29 | Body Header
}
32 | bodyFooter={Body Footer
}
33 | >
34 | Body Content
35 |
7 |
9 | );
10 | };
11 |
12 | const CustomResultView = ({ result }) => {
13 | return (
14 | - {children}
24 | {result.name.raw}
25 | 26 |
34 |
39 | 35 | {props.title} 36 |
37 |
35 | Showing{" "}
36 |
37 | {start} - {end}
38 | {" "}
39 | out of {totalResults}
40 | {searchTerm && (
41 | <>
42 | {" "}
43 | for: {searchTerm}
44 |
45 | )}
46 |
47 | );
48 | }
49 |
50 | export default PagingInfo;
51 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_single-links-facet.scss:
--------------------------------------------------------------------------------
1 | @include block("single-option-facet") {
2 | font-size: 13px;
3 | margin: $sizeS 0;
4 | padding: 0;
5 | list-style: none;
6 |
7 | @include element("item") {
8 | display: flex;
9 | justify-content: space-between;
10 | }
11 |
12 | @include element("link") {
13 | color: $facetLinkColor;
14 | position: relative;
15 | text-decoration: none;
16 | list-style: none;
17 | padding: 0;
18 | font-weight: bold;
19 |
20 | &:after {
21 | content: "";
22 | opacity: 0;
23 | position: absolute;
24 | top: -1px;
25 | left: -5px;
26 | width: calc(100% + 10px);
27 | height: calc(100% + 2px);
28 | background: rgba(37, 139, 248, 0.08);
29 | pointer-events: none;
30 | }
31 |
32 | &:focus {
33 | color: $linkColor;
34 | font-weight: bold;
35 | outline: none;
36 | }
37 |
38 | &:hover {
39 | color: $linkColor;
40 | font-weight: bold;
41 |
42 | &:after {
43 | opacity: 1;
44 | }
45 | }
46 | }
47 |
48 | @include element("selected") {
49 | font-weight: 900;
50 | list-style: none;
51 |
52 | a {
53 | font-weight: 100;
54 | padding: 0 2px;
55 | }
56 | }
57 |
58 | @include element("remove") {
59 | color: #666;
60 | margin-left: 10px;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/packages/search-ui-elasticsearch-connector/src/queryBuilders/SuggestionsAutocompleteBuilder.ts:
--------------------------------------------------------------------------------
1 | import type { RequestState, SuggestionConfiguration } from "@elastic/search-ui";
2 | import { BaseQueryBuilder } from "./BaseQueryBuilder";
3 | import { SearchRequest } from "../types";
4 |
5 | export class SuggestionsAutocompleteBuilder extends BaseQueryBuilder {
6 | constructor(
7 | state: RequestState,
8 | private readonly configuration: SuggestionConfiguration,
9 | private readonly completionSize: number = 5
10 | ) {
11 | super(state);
12 | }
13 |
14 | build() {
15 | this.setSize(0);
16 | this.setSourceFields([]);
17 | this.setSuggest(this.buildSuggestion());
18 |
19 | return this.query;
20 | }
21 |
22 | private setSuggest(query: SearchRequest["suggest"]): void {
23 | if (query) {
24 | this.query.suggest = query;
25 | }
26 | }
27 |
28 | private buildSuggestion(): SearchRequest["suggest"] | null {
29 | if (!this.state.searchTerm) {
30 | return null;
31 | }
32 |
33 | const field = this.configuration.fields[0];
34 |
35 | return {
36 | suggest: {
37 | prefix: this.state.searchTerm,
38 | completion: {
39 | size: this.completionSize,
40 | skip_duplicates: true,
41 | field,
42 | fuzzy: {
43 | fuzziness: 1
44 | }
45 | }
46 | }
47 | };
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/containers/__tests__/__snapshots__/Results.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`supports a render prop 1`] = `
4 |
5 | id",
13 | },
14 | "title": Object {
15 | "raw": "title",
16 | "snippet": "title",
17 | },
18 | "url": Object {
19 | "raw": "url",
20 | "snippet": "url",
21 | },
22 | }
23 | }
24 | shouldTrackClickThrough={true}
25 | titleField="title"
26 | urlField="url"
27 | view={[Function]}
28 | />
29 | id",
37 | },
38 | "title": Object {
39 | "raw": "title",
40 | "snippet": "title",
41 | },
42 | "url": Object {
43 | "raw": "url",
44 | "snippet": "url",
45 | },
46 | }
47 | }
48 | shouldTrackClickThrough={true}
49 | titleField="title"
50 | urlField="url"
51 | view={[Function]}
52 | />
53 |
54 | `;
55 |
--------------------------------------------------------------------------------
/examples/vue/src/searchConfig.js:
--------------------------------------------------------------------------------
1 | import "regenerator-runtime/runtime";
2 | import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
3 |
4 | const connector = new AppSearchAPIConnector({
5 | searchKey: "search-nyxkw1fuqex9qjhfvatbqfmw",
6 | engineName: "hearthstone-cards",
7 | endpointBase: "https://search-ui-sandbox.ent.us-central1.gcp.cloud.es.io"
8 | });
9 |
10 | const config = {
11 | debug: true,
12 | apiConnector: connector,
13 | searchQuery: {
14 | disjunctiveFacets: ["cost", "card_class", "set", "type", "race", "rarity"],
15 | facets: {
16 | race: {
17 | type: "value"
18 | },
19 | rarity: {
20 | type: "value"
21 | },
22 | type: {
23 | type: "value"
24 | },
25 | set: {
26 | type: "value",
27 | size: 30
28 | },
29 | card_class: {
30 | type: "value"
31 | },
32 | cost: {
33 | type: "range",
34 | ranges: [
35 | { from: 0, to: 1, name: "0" },
36 | { from: 1, to: 2, name: "1" },
37 | { from: 2, to: 3, name: "2" },
38 | { from: 3, to: 4, name: "3" },
39 | { from: 4, to: 5, name: "4" },
40 | { from: 5, to: 6, name: "5" },
41 | { from: 6, to: 7, name: "6" },
42 | { from: 7, to: 8, name: "7" },
43 | { from: 8, name: "8+" }
44 | ]
45 | }
46 | }
47 | }
48 | };
49 |
50 | export default config;
51 |
--------------------------------------------------------------------------------
/packages/search-ui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@elastic/search-ui",
3 | "version": "1.23.1",
4 | "description": "A Headless Search UI library",
5 | "license": "Apache-2.0",
6 | "main": "lib/index.js",
7 | "module": "lib/index.mjs",
8 | "types": "lib/index.d.ts",
9 | "sideEffects": false,
10 | "homepage": "https://docs.elastic.co/search-ui",
11 | "directories": {
12 | "lib": "lib",
13 | "test": "__tests__"
14 | },
15 | "files": [
16 | "lib"
17 | ],
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/elastic/search-ui.git",
21 | "directory": "packages/search-ui"
22 | },
23 | "scripts": {
24 | "test-ci": "jest --runInBand",
25 | "test": "jest",
26 | "build": "tsup",
27 | "watch": "yarn run build --watch",
28 | "prepare": "yarn run build"
29 | },
30 | "bugs": {
31 | "url": "https://github.com/elastic/search-ui/issues"
32 | },
33 | "devDependencies": {
34 | "@types/history": "^4.7.11",
35 | "@types/qs": "^6.9.7",
36 | "typescript": "^4.9.3"
37 | },
38 | "dependencies": {
39 | "date-fns": "^1.30.1",
40 | "deep-equal": "^1.0.1",
41 | "history": "^4.9.0",
42 | "qs": "^6.9.7"
43 | },
44 | "exports": {
45 | ".": {
46 | "types": "./lib/index.d.ts",
47 | "import": "./lib/index.mjs",
48 | "require": "./lib/index.js"
49 | },
50 | "./package": "./package.json",
51 | "./package.json": "./package.json"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/react-search-ui/src/containers/__tests__/__snapshots__/ResultsPerPage.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders the component with custom page options 1`] = `
4 |
7 |
56 | `;
57 |
58 | exports[`supports a render prop 1`] = `
59 |
10 | Show
11 |
12 |
60 | 20
61 |
62 | `;
63 |
--------------------------------------------------------------------------------
/packages/search-ui-site-search-connector/src/types/index.ts:
--------------------------------------------------------------------------------
1 | import adaptRequest from "../requestAdapter";
2 |
3 | import type {
4 | FieldConfiguration,
5 | FacetConfiguration
6 | } from "@elastic/search-ui";
7 |
8 | export type SearchResponse = {
9 | record_count?: number;
10 | records?: Record
11 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/layouts/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import LayoutSidebar from "./LayoutSidebar";
4 | import { appendClassName } from "../view-helpers";
5 |
6 | interface LayoutProps {
7 | className?: string;
8 | children?: React.ReactNode;
9 | header?: React.ReactNode;
10 | bodyContent?: React.ReactNode;
11 | bodyFooter?: React.ReactNode;
12 | bodyHeader?: React.ReactNode;
13 | sideContent?: React.ReactNode;
14 | }
15 |
16 | function Layout({
17 | className,
18 | children,
19 | header,
20 | bodyContent,
21 | bodyFooter,
22 | bodyHeader,
23 | sideContent
24 | }: LayoutProps) {
25 | return (
26 |
18 |
31 | {
33 | window.location.href = `${window.location.origin}/search-bar-in-header/search?q=${searchTerm}`;
34 | }}
35 | autocompleteMinimumCharacters={3}
36 | autocompleteResults={{
37 | linkTarget: "_blank",
38 | sectionTitle: "Results",
39 | titleField: "title",
40 | urlField: "nps_link",
41 | shouldTrackClickThrough: true,
42 | clickThroughTags: ["test"]
43 | }}
44 | autocompleteSuggestions={true}
45 | debounceLength={0}
46 | />
47 |
48 |
49 |
23 | 🌲 National Parks
24 |
25 |
27 |
47 | );
48 | }
49 |
50 | export default Layout;
51 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/styles/themes/reference-ui/components/_multi-checkbox-facet.scss:
--------------------------------------------------------------------------------
1 | @include block("multi-checkbox-facet") {
2 | color: $facetLinkColor;
3 | font-size: 13px;
4 | margin: 8px 0;
5 |
6 | @include element("option-label") {
7 | display: flex;
8 | align-items: center;
9 | justify-content: space-between;
10 | cursor: pointer;
11 | }
12 |
13 | @include element("option-input-wrapper") {
14 | flex: 1;
15 | }
16 |
17 | @include element("checkbox") {
18 | margin-right: $sizeS;
19 | cursor: pointer;
20 | }
21 |
22 | @include element("option-count") {
23 | color: #888888;
24 | font-size: 0.85em;
25 | margin-left: $sizeL;
26 | }
27 | }
28 |
29 | @include block("facet-view-more") {
30 | display: block;
31 | cursor: pointer;
32 | color: $linkColor;
33 | font-size: 13px;
34 |
35 | // Button reset
36 | font-family: inherit;
37 | line-height: inherit;
38 | text-align: left;
39 | border: unset;
40 | padding: unset;
41 | background: unset;
42 |
43 | &:hover,
44 | &:focus {
45 | background-color: $facetSelectBackground;
46 | outline: $sizeXS solid $facetSelectBackground;
47 | }
48 | }
49 |
50 | @include block("facet-search") {
51 | margin: 6px 0px 0px 0px;
52 |
53 | @include element("text-input") {
54 | width: 100%;
55 | height: 100%;
56 | padding: 6px;
57 | margin: 0;
58 | font-family: inherit;
59 | border: 1px solid #cccccc;
60 | border-radius: 4px;
61 | outline: none;
62 |
63 | &:focus {
64 | border: 1px solid $linkColor;
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/packages/search-ui-site-search-connector/src/responseAdapters.ts:
--------------------------------------------------------------------------------
1 | const addEachKeyValueToObject = (acc: any, [key, value]) => ({
2 | ...acc,
3 | [key]: value
4 | });
5 |
6 | export function getFacets(docInfo: any) {
7 | if (!docInfo.facets) return {};
8 |
9 | return Object.entries(docInfo.facets)
10 | .map(([facetName, facetValue]) => {
11 | return [
12 | facetName,
13 | [
14 | {
15 | field: facetName,
16 | data: Object.entries(facetValue).map(([value, count]) => ({
17 | value,
18 | count
19 | })),
20 | // Site Search does not support any other type of facet
21 | type: "value"
22 | }
23 | ]
24 | ];
25 | })
26 | .reduce(addEachKeyValueToObject, {});
27 | }
28 |
29 | export function getResults(records: Record
28 |
30 | {header}
29 |
31 |
46 |
32 |
33 | {sideContent}
34 |
35 |
45 |
36 |
44 |
37 |
39 | {bodyHeader}
38 |
40 | {children || bodyContent}
41 |
42 | {bodyFooter}
43 |
57 | {this.renderToggleButton("Save Filters")}
58 | {children}
59 |
60 |
61 | );
62 | }
63 | }
64 |
65 | export default LayoutSidebar;
66 |
--------------------------------------------------------------------------------
/packages/search-ui/src/actions/trackClickThrough.ts:
--------------------------------------------------------------------------------
1 | import { SearchState } from "..";
2 | import Events from "../Events";
3 |
4 | /**
5 | * Report a click through event. A click through event is when a user
6 | * clicks on a result link.
7 | *
8 | * @param documentId String The document ID associated with result that was
9 | * clicked
10 | * @param tag Array[String] Optional Tags which can be used to categorize
11 | * this click event
12 | */
13 | export default function trackClickThrough(
14 | documentId: string,
15 | tags: string[] = []
16 | ): void {
17 | if (this.debug)
18 | // eslint-disable-next-line no-console
19 | console.log("Search UI: Action", "trackClickThrough", ...arguments);
20 |
21 | const {
22 | requestId,
23 | searchTerm,
24 | results,
25 | current,
26 | resultsPerPage,
27 | totalResults,
28 | filters
29 | }: SearchState = this.state;
30 |
31 | const resultIndexOnPage = results.findIndex(
32 | (result) => result._meta.id === documentId
33 | );
34 | const result = results[resultIndexOnPage];
35 | const events: Events = this.events;
36 |
37 | this.events.resultClick({
38 | query: searchTerm,
39 | documentId,
40 | requestId,
41 | tags,
42 | result,
43 | page: current,
44 | resultsPerPage,
45 | resultIndexOnPage
46 | });
47 |
48 | events.emit({
49 | type: "ResultSelected",
50 | documentId,
51 | query: searchTerm,
52 | origin: "results",
53 | position: resultIndexOnPage,
54 | tags,
55 | totalResults,
56 | filters,
57 | currentPage: current,
58 | resultsPerPage: resultsPerPage
59 | });
60 | }
61 |
--------------------------------------------------------------------------------
/docs/reference/solutions-ecommerce-product-detail-page.md:
--------------------------------------------------------------------------------
1 | ---
2 | mapped_pages:
3 | - https://www.elastic.co/guide/en/search-ui/current/solutions-ecommerce-product-detail-page.html
4 | ---
5 |
6 | # Product Detail Page [solutions-ecommerce-product-detail-page]
7 |
8 | % TO DO: Use `:class: screenshot`
9 | 
10 |
11 | You can put many things on a product detail page: image, description, specs. They are all describing the product itself.
12 |
13 | But a critical piece that often gets overlooked is cross-sell recommendations.
14 |
15 | % TO DO: Use `:class: screenshot`
16 | 
17 |
18 | These are the lists of products located under the product description. They often come under such headings:
19 |
20 | - People who viewed this item also viewed
21 | - Often bought together
22 | - You might also like
23 | - etc.
24 |
25 | Cross-sell recommendations help users find the right product if the current one does not satisfy their criteria or find the related products faster (for example, frying pan + lid).
26 |
27 | Technically, cross-sell recommendations are usually implemented as product carousels. To build one, check out our [Product carousel guide](/reference/solutions-ecommerce-carousel.md), which has an implementation example.
28 |
29 | ## Related Articles [solutions-ecommerce-product-detail-page-related-articles]
30 |
31 | - [Product Carousels](/reference/solutions-ecommerce-carousel.md): Build a product carousel with Search UI.
32 | - [Creating Components](/reference/guides-creating-own-components.md): Build your own components for Search UI.
33 |
--------------------------------------------------------------------------------
/docs/reference/api-core-index.md:
--------------------------------------------------------------------------------
1 | ---
2 | mapped_pages:
3 | - https://www.elastic.co/guide/en/search-ui/current/api-core-index.html
4 | ---
5 |
6 | # Core API
7 |
8 | Core API is the main set of interfaces and configurations used to set up and manage search functionality in Search UI.
9 |
10 | ## Core Components
11 |
12 | Core API consists of three main parts:
13 |
14 | 1. [Configuration](/reference/api-core-configuration.md) - configuration of search queries, autocomplete, and event handlers
15 | 2. [State](/reference/api-core-state.md) - application state management, including:
16 | - Request State
17 | - Response State
18 | - Application State
19 | 3. [Actions](/reference/api-core-actions.md) - functions to update the Request State and perform API requests, including:
20 | - Search term management
21 | - Filter operations
22 | - Sorting
23 | - Pagination
24 | - Analytics tracking
25 |
26 | ## Key Features
27 |
28 | - Search query configuration with support for filters and facets
29 | - Autocomplete and suggestions configuration
30 | - Application state management
31 | - Integration with various search backends through connectors
32 | - URL state and routing configuration
33 |
34 | ## Usage Example
35 |
36 | ```jsx
37 | import { SearchProvider } from "@elastic/react-search-ui";
38 |
39 | const config = {
40 | apiConnector: connector,
41 | searchQuery: {
42 | facets: {
43 | states: { type: "value", size: 30 }
44 | }
45 | },
46 | autocompleteQuery: {
47 | results: {
48 | resultsPerPage: 5
49 | }
50 | }
51 | };
52 |
53 |
3 |
30 |
31 |
32 |
54 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/README.md:
--------------------------------------------------------------------------------
1 | # react-search-ui-views
2 |
3 | Part of the [Search UI](https://github.com/elastic/search-ui) project.
4 |
5 | This is the view layer for [react-search-ui](../react-search-ui/README.md).
6 |
7 | This library provides view implementations for all of React Search UI's
8 | components along with corresponding CSS, and a few layout components.
9 |
10 | The components provided here have no logic behind them, they are simple,
11 | stateless, view-only components.
12 |
13 | ## Usage
14 |
15 | ```jsx
16 | import React from "react";
17 | import {
18 | Layout,
19 | PagingInfo,
20 | Result,
21 | SearchBox
22 | } from "@elastic/react-search-ui-views";
23 | import "@elastic/react-search-ui-views/lib/styles/styles.css";
24 |
25 | export default function App() {
26 | return (
27 |
4 | {{ facet.field }}
5 |
6 |
29 |
28 |
50 | );
51 | }
52 | ```
53 |
54 | ## Storybook
55 |
56 | A visual component reference is available locally. It is built with [Storybook](https://storybook.js.org/), and can be run locally with the following command:
57 |
58 | ```
59 | npm run storybook
60 | ```
61 |
--------------------------------------------------------------------------------
/packages/react-search-ui-views/src/styles/themes/reference-ui/modules/_variables.scss:
--------------------------------------------------------------------------------
1 | // General Colors
2 | $black: #333333 !default;
3 | $white: #ffffff !default;
4 | $red: red;
5 | $linkColor: #3a56e4 !default;
6 | $textMatchColor: #3a56e4 !default;
7 | $facetLabel: #8b9bad !default;
8 | $facetLinkColor: #4f4f4f !default;
9 | $facetCountColor: #888888 !default;
10 | $facetSelectBackground: #f8f8f8 !default;
11 | $facetSelectBorder: #a6a6a6 !default;
12 | $facetSelectFocus: #00a9e5 !default;
13 | $metaTextColor: #4a4b4b !default;
14 | $helpTextGrayColor: #888888 !default;
15 | $pagingHoverBackground: #f8f8f8 !default;
16 |
17 | // Layout Colors
18 | $appContainerBackgroundColor: #ffffff !default;
19 | $resultsLeftBorderColor: #eeeeee !default;
20 |
21 | // Header Colors
22 | $headerBackgroundColor: #f9f9f9 !default;
23 | $headerBorderColor: #eeeeee !default;
24 | $searchboxBorderColor: #abb1b7 !default;
25 |
26 | // Result Colors
27 | $resultBackgroundColor: #fcfcfc !default;
28 | $resultBorderColor: #eeeeee !default;
29 | $fieldHoverColor: #f6f6f6 !default;
30 | $resultKeyTextColor: #777777 !default;
31 |
32 | // Font Variables
33 | $fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
34 | Arial, sans-serif !default;
35 | $fontWeightNormal: 400 !default;
36 | $fontWeightBold: 700 !default;
37 | $lineHeight: 1.5 !default;
38 |
39 | // Sizes
40 | $sizeXXS: 2px !default;
41 | $sizeXS: 4px !default;
42 | $sizeS: 8px !default;
43 | $sizeM: 12px !default;
44 | $sizeL: 24px !default;
45 | $sizeXL: 32px !default;
46 | $sizeXXL: 48px !default;
47 |
48 | $sidebarBreakpoint: 800px !default;
49 | $maxWidth: 1300px !default;
50 | $offset: 175px !default;
51 |
52 | $borderRadius: 4px !default;
53 |
--------------------------------------------------------------------------------
/packages/search-ui-engines-connector/README.md:
--------------------------------------------------------------------------------
1 | # search-ui-engines-connector
2 |
3 | Part of the [Search UI](https://github.com/elastic/search-ui) project.
4 |
5 | This Connector is used to connect Search UI to Elasticsearch Engines.
6 |
7 | ## Usage
8 |
9 | ```shell
10 | npm install --save @elastic/search-ui-engines-connector
11 | ```
12 |
13 | ```js
14 | import EnginesConnector from "@elastic/search-ui-engines-connector";
15 |
16 | const connector = new EnginesConnector({
17 | host: "https://my-engines-demo.ent.us-east4.gcp.elastic-cloud.com/",
18 | engineName: "puggles",
19 | apiKey: "QTJDMHhJVUJENHg5WETWcXlrWVQ6dXFlcF9QRWdRWHl2Rm9iSndka1Rndw=="
20 | });
21 | ```
22 |
23 | ## EnginesConnector
24 |
25 | **Kind**: global class
26 |
27 | ### new ElasticsearchAPIConnector(options)
28 |
29 | | Param | Type |
30 | | ------- | -------------------------------- |
31 | | options | [
32 |
39 | }
40 | bodyContent={
41 |
42 |
47 | }
48 | />
49 | Options](#Options) |
32 |
33 | ## Options
34 |
35 | **Kind**: global typedef
36 |
37 | | Param | Type | Default | Description |
38 | | ---------- | ------------------- | ------- | --------------------------------------------------------------- |
39 | | host | string | | Engines Host. |
40 | | engineName | string | | The name of the engine to search |
41 | | apiKey | string | | API Key for the engine. Can be found within the Engine view UI. |
42 |
43 | ## Query Configuration Requirements
44 |
45 | - `search_fields` object is required with all fields you want to search by.
46 |
--------------------------------------------------------------------------------
/packages/search-ui/src/actions/trackAutocompleteClickThrough.ts:
--------------------------------------------------------------------------------
1 | import Events from "../Events";
2 |
3 | /**
4 | * Report a click through event. A click through event is when a user
5 | * clicks on a result within an autocomplete Dropdown.
6 | *
7 | * @param documentId String The document ID associated with result that was
8 | * clicked
9 | * @param tag Array[String] Optional Tags which can be used to categorize
10 | * this click event
11 | */
12 | export default function trackAutocompleteClickThrough(
13 | documentId: string,
14 | tags: string[] = []
15 | ): void {
16 | if (this.debug) {
17 | // eslint-disable-next-line no-console
18 | console.log(
19 | "Search UI: Action",
20 | "trackAutocompleteClickThrough",
21 | ...arguments
22 | );
23 | }
24 |
25 | const {
26 | autocompletedResultsRequestId,
27 | searchTerm,
28 | autocompletedResults,
29 | current,
30 | resultsPerPage,
31 | totalResults,
32 | filters
33 | } = this.state;
34 | const resultIndex = autocompletedResults.findIndex(
35 | (result) => result._meta.id === documentId
36 | );
37 | const result = autocompletedResults[resultIndex];
38 |
39 | const events: Events = this.events;
40 |
41 | events.autocompleteResultClick({
42 | query: searchTerm,
43 | documentId,
44 | requestId: autocompletedResultsRequestId,
45 | tags,
46 | result,
47 | resultIndex
48 | });
49 |
50 | events.emit({
51 | type: "ResultSelected",
52 | documentId,
53 | query: searchTerm,
54 | position: resultIndex,
55 | origin: "autocomplete",
56 | tags,
57 | totalResults,
58 | filters,
59 | currentPage: current,
60 | resultsPerPage: resultsPerPage
61 | });
62 | }
63 |
--------------------------------------------------------------------------------
/packages/search-ui-site-search-connector/src/__tests__/example-response.json:
--------------------------------------------------------------------------------
1 | {
2 | "record_count": 2,
3 | "records": {
4 | "national-parks": [
5 | {
6 | "nps_link": "https://www.nps.gov/acad/index.htm",
7 | "updated_at": "2018-11-13T21:51:11+00:00",
8 | "states": ["Maine"],
9 | "title": "Acadia",
10 | "external_id": "9000",
11 | "acres": 49057.36,
12 | "_index": "5beb4099c9f929367efa5b7d",
13 | "_type": "5beb4099c9f929367efa5b7c",
14 | "_score": 0.7048211,
15 | "_version": null,
16 | "_explanation": null,
17 | "sort": null,
18 | "highlight": {
19 | "title": "Acadia"
20 | },
21 | "id": "5beb474f8db2315427beecc7"
22 | },
23 | {
24 | "nps_link": "https://www.nps.gov/acad/index.htm",
25 | "title": "Acadia",
26 | "updated_at": "2018-11-13T21:52:56+00:00",
27 | "states": ["Maine"],
28 | "external_id": "0",
29 | "acres": 49057.36,
30 | "_index": "5beb4099c9f929367efa5b7d",
31 | "_type": "5beb4099c9f929367efa5b7c",
32 | "_score": 0.7048211,
33 | "_version": null,
34 | "_explanation": null,
35 | "sort": null,
36 | "highlight": {
37 | "title": "Acadia"
38 | },
39 | "id": "5beb47b8a1f2532eb09be102"
40 | }
41 | ]
42 | },
43 | "info": {
44 | "national-parks": {
45 | "query": "acadia",
46 | "current_page": 1,
47 | "num_pages": 1,
48 | "per_page": 20,
49 | "total_result_count": 2,
50 | "facets": {
51 | "states": {
52 | "Maine": 2
53 | }
54 | }
55 | }
56 | },
57 | "errors": {}
58 | }
59 |
--------------------------------------------------------------------------------