@jetbrains/kotlin-web-site-ui 4.0.0 → 4.1.0-alpha.2

package/out/components/header/quick-search/loading/loading.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { LoadingIcon } from '@rescui/icons';
+import styles from './loading.module.pcss.js';
+
+const LoadingResults = () => {
+  return React__default.createElement("div", {
+    className: styles.loading
+  }, React__default.createElement(LoadingIcon, {
+    theme: 'dark',
+    size: 'l'
+  }));
+};
+
+export { LoadingResults };

package/out/components/header/quick-search/loading/loading.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "loading": "ktl-loading-module_loading_CtOhW"
+};
+export { styles as default };

package/out/components/header/quick-search/quick-search.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import { ResultsList } from './list/list.js';
+import { EmptyResult } from './empty/empty.js';
+import { LoadingResults } from './loading/loading.js';
+import styles from './quick-search.module.pcss.js';
+
+const QuickSearch = ({
+  results,
+  searchString,
+  toggleFullSearch,
+  placeholder
+}) => {
+  if (placeholder) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: styles.wrapper
+    }, React__default.createElement(EmptyResult, {
+      placeholder: placeholder
+    })));
+  }
+
+  if (results.length > 0) {
+    return React__default.createElement(ThemeProvider, {
+      theme: 'dark'
+    }, React__default.createElement("div", {
+      className: styles.wrapper
+    }, React__default.createElement(ResultsList, {
+      results: results,
+      searchString: searchString,
+      toggleFullSearch: toggleFullSearch
+    })));
+  }
+
+  return React__default.createElement("div", {
+    className: styles.wrapper
+  }, React__default.createElement(LoadingResults, null));
+};
+
+export { QuickSearch };

package/out/components/header/quick-search/quick-search.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "wrapper": "ktl-quick-search-module_wrapper_kkbQQ"
+};
+export { styles as default };

package/out/components/header/quick-search/result/result.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import styles from './result.module.pcss.js';
+
+const Result = ({
+  hit
+}) => {
+  const textCn = useTextStyles();
+  const hitTitle = hit.title === hit.mainTitle ? hit.highlightedTitle : `${hit.mainTitle}: ${hit.highlightedTitle}`;
+  return React__default.createElement("a", {
+    className: styles.result,
+    href: hit.url
+  }, React__default.createElement("div", {
+    className: styles.resultTitle
+  }, React__default.createElement("div", {
+    className: textCn('rs-h4'),
+    dangerouslySetInnerHTML: {
+      __html: hitTitle
+    }
+  })), React__default.createElement("div", {
+    className: styles.text
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-3'),
+    dangerouslySetInnerHTML: {
+      __html: hit.snippet
+    }
+  })));
+};
+
+export { Result };

package/out/components/header/quick-search/result/result.module.pcss.js

@@ -0,0 +1,6 @@
+var styles = {
+  "result": "ktl-result-module_result_EKhUw",
+  "resultTitle": "ktl-result-module_resultTitle_DSpAT",
+  "text": "ktl-result-module_text_fWBKG"
+};
+export { styles as default };

package/out/components/header/search-box/search-box.js

@@ -0,0 +1,69 @@
+import React__default, { useState, useCallback, useEffect } from 'react';
+import Input from '@rescui/input';
+import { SearchIcon, CloseIcon, ErrorIcon } from '@rescui/icons';
+import { QuickSearch } from '../quick-search/quick-search.js';
+import { FullSearch } from '../full-search/full-search.js';
+import styles from './search-box.module.pcss.js';
+import { useSearch } from '../search-wrapper/use-search.js';
+import { isMacOs } from '../is-macos.js';
+import { ESC_CODE } from '../key-codes.js';
+
+const SearchBox = ({
+  closeHandler,
+  isMobile,
+  fullSearchActive,
+  setFullSearchActive
+}) => {
+  const [searchInput, setSearchInput] = useState('');
+  const {
+    hits,
+    placeholder
+  } = useSearch(searchInput, 25);
+  const escHandler = useCallback(event => {
+    if (event.keyCode === ESC_CODE) {
+      closeHandler();
+    }
+  }, [closeHandler]);
+  const handleInput = useCallback(e => {
+    setSearchInput(e.target.value);
+  }, []);
+  const handleClear = useCallback(() => {
+    setSearchInput('');
+  }, []);
+  const toggleFullSearch = useCallback(() => {
+    setFullSearchActive(!fullSearchActive);
+  }, [fullSearchActive]);
+  useEffect(() => {
+    if (typeof document !== `undefined`) {
+      document.addEventListener('keydown', escHandler);
+      return () => {
+        document.removeEventListener('keydown', escHandler);
+      };
+    }
+  }, [escHandler]);
+  const QuickSearchPlaceholder = isMobile ? 'Search' : `${isMacOs() ? '⌘K' : 'Ctrl+K'} for advanced search`;
+  return React__default.createElement("div", {
+    className: styles.searchBox
+  }, React__default.createElement(Input, {
+    placeholder: QuickSearchPlaceholder,
+    iconType: 'left',
+    value: searchInput,
+    onChange: handleInput,
+    onClear: isMobile ? closeHandler : handleClear,
+    icon: React__default.createElement(SearchIcon, null),
+    clearIcon: isMobile ? React__default.createElement(CloseIcon, null) : React__default.createElement(ErrorIcon, null),
+    autoFocus: true
+  }), searchInput && React__default.createElement(QuickSearch, {
+    results: hits,
+    searchString: searchInput,
+    toggleFullSearch: toggleFullSearch,
+    placeholder: placeholder
+  }), fullSearchActive && React__default.createElement(FullSearch, {
+    toggleFullSearch: toggleFullSearch,
+    searchString: searchInput,
+    results: hits,
+    killSearch: closeHandler
+  }));
+};
+
+export { SearchBox };

package/out/components/header/search-box/search-box.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "searchBox": "ktl-search-box-module_searchBox_0SgE9"
+};
+export { styles as default };

package/out/components/header/search-wrapper/init-search.js

@@ -0,0 +1,60 @@
+import algoliasearch from 'algoliasearch/lite';
+import { EXACT_MATCH } from './search-const.js';
+import { searchWithAlgolia } from './search-with-algolia.js';
+import { useState, useEffect, useMemo } from 'react';
+const attributesToRetrieve = ['pageTitle', 'url', 'breadcrumbs', 'mainTitle'];
+const attributesToSnippet = ['content:25'];
+
+function initSearch({
+  searchAlgoliaId,
+  searchAlgoliaApiKey,
+  searchAlgoliaIndexName
+}) {
+  const [searchIndex, setSearchIndex] = useState(null);
+  useEffect(() => {
+    if (searchAlgoliaId && searchAlgoliaApiKey && searchAlgoliaIndexName) {
+      const algoliaClient = algoliasearch(searchAlgoliaId, searchAlgoliaApiKey);
+      setSearchIndex(algoliaClient.initIndex(searchAlgoliaIndexName));
+    }
+  }, []);
+  const search = useMemo(() => async (query, matching, maxHits) => {
+    try {
+      const isExactSearch = matching === EXACT_MATCH.value;
+      const searchArgs = {
+        attributesToRetrieve,
+        attributesToSnippet,
+        isExactSearch,
+        maxHits,
+        query
+      };
+
+      if (!searchIndex) {
+        throw new Error('ConfigData is empty');
+      }
+
+      const searchData = await searchWithAlgolia({ ...searchArgs,
+        searchIndex
+      });
+      const {
+        hits,
+        totalHits
+      } = searchData;
+      return {
+        hits,
+        totalHits
+      };
+    } catch (error) {
+      //reportError(error, { component: 'search' });
+      return {
+        hits: [],
+        totalHits: 0
+      };
+    }
+  }, [searchIndex]);
+  return {
+    searchIndex,
+    search
+  };
+}
+
+export { initSearch };

package/out/components/header/search-wrapper/search-const.js

@@ -0,0 +1,13 @@
+const FULL_SEARCH = 'full';
+const QUICK_SEARCH = 'quick';
+const DEBOUNCE_SEARCH = 500;
+const DEBOUNCE_QUERY_UPDATE = 100;
+const ALL_RESULTS = {
+  label: 'All results',
+  value: 'All results'
+};
+const EXACT_MATCH = {
+  label: 'Exact match',
+  value: 'Exact match'
+};
+export { ALL_RESULTS, DEBOUNCE_QUERY_UPDATE, DEBOUNCE_SEARCH, EXACT_MATCH, FULL_SEARCH, QUICK_SEARCH };

package/out/components/header/search-wrapper/search-context.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+const searchParamsInitValue = {
+  query: '',
+  type: '',
+  setType: () => null,
+  search: () => new Promise(() => ({
+    hits: [],
+    totalHits: 0
+  })),
+  matching: '',
+  matchingOptions: [],
+  setMatching: () => null,
+  updateQueryString: () => null,
+  searchQueryState: '',
+  setSearchQueryState: () => null
+};
+const SearchContext = React__default.createContext(searchParamsInitValue);
+export { SearchContext as default };

package/out/components/header/search-wrapper/search-with-algolia.js

@@ -0,0 +1,58 @@
+const snippetEllipsisText = '…';
+
+const searchWithAlgolia = async ({
+  attributesToRetrieve = [],
+  attributesToSnippet = [],
+  isExactSearch = false,
+  maxHits = 0,
+  query = '',
+  searchIndex
+}) => {
+  try {
+    if (searchIndex?.indexName) {
+      const searchResponse = await searchIndex.search(query, {
+        attributesToRetrieve,
+        attributesToSnippet,
+        clickAnalytics: true,
+        hitsPerPage: maxHits,
+        query,
+        snippetEllipsisText,
+        typoTolerance: !isExactSearch
+      });
+      return {
+        hits: mapResponseToHits(searchResponse.hits),
+        totalHits: searchResponse.nbHits
+      };
+    }
+
+    throw new Error(`Algolia client can't be initialized`);
+  } catch (error) {
+    return {
+      totalHits: 0,
+      hits: []
+    };
+  }
+};
+
+function mapResponseToHits(results) {
+  return results.map(({
+    _highlightResult,
+    _snippetResult,
+    breadcrumbs,
+    mainTitle,
+    objectID,
+    pageTitle,
+    url
+  }) => ({
+    breadcrumb: breadcrumbs,
+    highlightedTitle: _highlightResult.pageTitle.value,
+    hitId: objectID,
+    mainTitle,
+    pageId: _highlightResult.parent.value,
+    snippet: _snippetResult.content.value,
+    title: pageTitle,
+    url
+  }));
+}
+
+export { searchWithAlgolia };

package/out/components/header/search-wrapper/search-wrapper.js

@@ -0,0 +1,40 @@
+import React__default, { useState } from 'react';
+import { initSearch } from './init-search.js';
+import SearchContext from './search-context.js';
+import { QUICK_SEARCH, ALL_RESULTS, EXACT_MATCH } from './search-const.js';
+const matchingOptions = [{
+  label: ALL_RESULTS.label,
+  value: ALL_RESULTS.value
+}, {
+  label: EXACT_MATCH.label,
+  value: EXACT_MATCH.value
+}];
+
+const SearchWrapper = ({
+  children,
+  searchConfig
+}) => {
+  const {
+    search
+  } = initSearch(searchConfig);
+  const [type, setType] = useState(QUICK_SEARCH);
+  const [matching, setMatching] = useState(matchingOptions[0].value);
+  const [searchQueryState, setSearchQueryState] = useState(''); // router
+
+  return React__default.createElement(SearchContext.Provider, {
+    value: {
+      query: '',
+      type,
+      setType,
+      search,
+      matching,
+      matchingOptions,
+      setMatching,
+      updateQueryString: () => {},
+      searchQueryState,
+      setSearchQueryState
+    }
+  }, children);
+};
+
+export { SearchWrapper };

package/out/components/header/search-wrapper/use-search.js

@@ -0,0 +1,85 @@
+import { useState, useContext, useEffect } from 'react';
+import SearchContext from './search-context.js';
+import { DEBOUNCE_QUERY_UPDATE, DEBOUNCE_SEARCH, FULL_SEARCH, QUICK_SEARCH } from './search-const.js';
+let updateQueryTimeout = 0;
+let searchTimeout = 0;
+
+const useSearch = (inputValue = '', maxHits = 25) => {
+  const [hits, setHits] = useState([]);
+  const [totalHits, setTotalHits] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [queryId, setQueryId] = useState('');
+  const [placeholder, setPlaceholder] = useState('');
+  const {
+    matching,
+    updateQueryString,
+    type,
+    search,
+    setSearchQueryState
+  } = useContext(SearchContext);
+  const isFullSearch = type === FULL_SEARCH;
+  const isQuickSearch = type === QUICK_SEARCH;
+
+  const debouncedSearch = () => {
+    if (updateQueryTimeout) {
+      clearTimeout(updateQueryTimeout);
+    }
+
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+    }
+
+    updateQueryTimeout = window.setTimeout(() => {
+      if (isQuickSearch) {
+        setSearchQueryState(inputValue);
+      } else if (isFullSearch) {
+        updateQueryString(inputValue, type);
+      }
+    }, DEBOUNCE_QUERY_UPDATE);
+    searchTimeout = window.setTimeout(async () => {
+      if (inputValue) {
+        setIsLoading(true);
+
+        try {
+          const results = await search(inputValue, matching, maxHits);
+
+          if (results.hits.length === 0) {
+            setPlaceholder(`We’re sorry! We could’t find results for «${inputValue}»`);
+          } else {
+            setPlaceholder('');
+          }
+
+          setHits(results.hits);
+          setTotalHits(results.totalHits);
+
+          if (results.queryId) {
+            setQueryId(results.queryId);
+          }
+        } catch (error) {
+          console.error(error);
+        } finally {
+          setIsLoading(false);
+        }
+      } else {
+        // Clear hits and placeholder when search string is empty.
+        // It prevents show previous negative result when searching from scratch
+        setPlaceholder('');
+        setHits([]);
+      }
+    }, DEBOUNCE_SEARCH);
+  };
+
+  useEffect(() => {
+    debouncedSearch();
+    return () => clearTimeout(updateQueryTimeout);
+  }, [inputValue, matching]);
+  return {
+    hits,
+    totalHits,
+    isLoading,
+    queryId,
+    placeholder
+  };
+};
+
+export { useSearch };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.0.0",
+  "version": "4.1.0-alpha.2",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -29,9 +29,12 @@
     "@rescui/tooltip": "0.x",
     "@rescui/typography": "0.x",
     "@rescui/ui-contexts": "0.x",
+    "@rescui/focus-manager": "0.x",
+    "algoliasearch": "4.x",
     "formik": "2.x",
     "react": ">= 16.8.6 < 18",
     "react-dom": ">= 16.8.6 < 18",
+    "react-outside-click-handler": "1.x",
     "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
@@ -45,10 +48,12 @@
     "@react-hook/resize-observer": "^1.2.5",
     "@rescui/button": "^0.2.1",
     "@rescui/checkbox": "^0.1.0",
+    "@rescui/focus-manager": "^0.1.1",
     "@rescui/icons": "^0.2.0",
     "@rescui/input": "^0.1.2",
+    "@rescui/switcher": "^0.2.2",
     "@rescui/tooltip": "^0.1.2",
-    "@rescui/typography": "^0.3.0",
+    "@rescui/typography": "^0.7.3",
     "@rescui/ui-contexts": "^0.1.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -65,11 +70,13 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.13.1",
+    "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/sha.js": "^2.4.0",
     "@types/youtube": "^0.0.45",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "algoliasearch": "^4.13.1",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
@@ -103,6 +110,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-modal": "^3.14.4",
+    "react-outside-click-handler": "^1.3.0",
     "react-remove-scroll-bar": "^2.2.0",
     "react-swipeable-views": "^0.14.0",
     "rollup": "^2.70.1",