@jetbrains/kotlin-web-site-ui 4.0.1 → 4.1.0-alpha.10

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/out/components/top-menu/dropdown-menu/dropdown-menu.js

@@ -44,9 +44,7 @@ const DropdownMenu = ({
   }, React__default.createElement("button", {
     className: classNames(styles.button, textCn('rs-text-2')),
     "aria-haspopup": "true"
-  }, React__default.createElement("span", {
-    className: styles.buttonText
-  }, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
+  }, React__default.createElement("span", null, activeItem.title), React__default.createElement(SvgArrowDropdownIcon, {
     className: styles.icon
   })), React__default.createElement("nav", {
     className: classNames(styles.dropdownList, {

package/out/components/top-menu/dropdown-menu/dropdown-menu.module.pcss.js

@@ -1,7 +1,6 @@
 var styles = {
   "dropdownMenu": "ktl-dropdown-menu-module_dropdown-menu_tq2uU",
   "button": "ktl-dropdown-menu-module_button_OYsuv",
-  "buttonText": "ktl-dropdown-menu-module_button-text_SJmh-",
   "icon": "ktl-dropdown-menu-module_icon_GGhMI",
   "dropdownList": "ktl-dropdown-menu-module_dropdown-list_Ylkvt",
   "fadein": "ktl-dropdown-menu-module_fadein_MySnq",

package/out/components/top-menu/index.css

@@ -51,7 +51,6 @@
     height: 48px;
     padding: 0 16px;
     grid-gap: 16px;
-    grid-template-columns: 1fr auto;
   }
 
   .ktl-top-menu-module_logo_CNH2W {
@@ -106,15 +105,12 @@
   height: 100%;
   justify-self: flex-start;
   white-space: nowrap;
-  min-width: 0;
-  max-width: 100%;
 }
 
 .ktl-dropdown-menu-module_button_OYsuv {
   border: none;
   background: none;
   height: 100%;
-  max-width: 100%;
   padding: 0;
   margin: 0;
   display: flex;
@@ -123,18 +119,11 @@
   cursor: pointer;
 }
 
-.ktl-dropdown-menu-module_button-text_SJmh- {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 0 1 auto;
-}
-
 .ktl-dropdown-menu-module_icon_GGhMI {
   width: 12px;
   height: 6px;
   margin-left: 6px;
   transition: transform ease-in-out var(--ktl-transition-xfast);
-  flex: 0 0 auto;
 }
 
 .ktl-dropdown-menu-module_dropdown-list_Ylkvt {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.0.1",
+  "version": "4.1.0-alpha.10",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -24,14 +24,18 @@
   },
   "peerDependencies": {
     "@rescui/checkbox": "0.x",
+    "@rescui/focus-manager": "0.x",
     "@rescui/icons": "0.x",
     "@rescui/input": "0.x",
     "@rescui/tooltip": "0.x",
     "@rescui/typography": "0.x",
     "@rescui/ui-contexts": "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-scrollbar-size": "5.x",
     "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
@@ -45,10 +49,12 @@
     "@react-hook/resize-observer": "^1.2.5",
     "@rescui/button": "^0.2.1",
     "@rescui/checkbox": "^0.1.0",
-    "@rescui/icons": "^0.2.0",
-    "@rescui/input": "^0.1.2",
+    "@rescui/focus-manager": "^0.1.1",
+    "@rescui/icons": "^0.8.2",
+    "@rescui/input": "^0.4.6",
+    "@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 +71,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,7 +111,9 @@
     "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-scrollbar-size": "^5.0.0",
     "react-swipeable-views": "^0.14.0",
     "rollup": "^2.70.1",
     "rollup-plugin-node-externals": "^4.0.0",