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

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { useTextStyles } from '@rescui/typography';
+import styles from './empty.module.pcss.js';
+
+const EmptyResult = ({
+  placeholder
+}) => {
+  const textCn = useTextStyles();
+  return React__default.createElement("div", {
+    className: styles.empty
+  }, React__default.createElement("div", {
+    className: textCn('rs-h4')
+  }, placeholder));
+};
+
+export { EmptyResult };

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

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

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

@@ -0,0 +1,31 @@
+import React__default, { useMemo } from 'react';
+import { Result } from '../result/result.js';
+import { useTextStyles } from '@rescui/typography';
+import { isMacOs } from '../../../../helper/is-macos.js';
+import styles from './list.module.pcss.js';
+
+const ResultsList = ({
+  results,
+  searchString,
+  toggleFullSearch
+}) => {
+  const textCn = useTextStyles();
+  const controlledSearchString = useMemo(() => searchString.length > 5 ? `${searchString.substring(0, 5)}...` : searchString, [searchString]);
+  return React__default.createElement("div", {
+    className: styles.results
+  }, results.length ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles.topBar
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-3')
+  }, "Showing results for \u00AB", controlledSearchString, "\u00BB"), React__default.createElement("button", {
+    className: styles.advancedSearch,
+    onClick: toggleFullSearch
+  }, React__default.createElement("div", {
+    className: textCn('rs-text-3')
+  }, "Advanced search ", isMacOs() ? '⌘K' : 'Ctrl+K'))), results.map((searchResult, index) => React__default.createElement(Result, {
+    key: index,
+    hit: searchResult
+  }))) : null);
+};
+
+export { ResultsList };

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

@@ -0,0 +1,6 @@
+var styles = {
+  "results": "ktl-list-module_results_LlxqY",
+  "topBar": "ktl-list-module_topBar_OO0XT",
+  "advancedSearch": "ktl-list-module_advancedSearch_XNy88"
+};
+export { styles as default };

package/out/components/header/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/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/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/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/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/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/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 '../../../helper/is-macos.js';
+import { ESC_CODE } from '../../../helper/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/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-button → components/header/search-button}/search-button.js

@@ -1,22 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import styles from './search-button.module.pcss.js';
 import classNames from 'classnames';
 import SvgSearch from './search.svg.js';
+const DATA_TEST_HEADER_SEARCH_BUTTON = 'header-search-button';
 
 const SearchButton = ({
   onClick,
   isActive
 }) => {
-  return jsx("button", Object.assign({
+  return React__default.createElement("button", {
     type: "button",
     className: classNames(styles.button, {
       [styles.active]: isActive
     }),
+    "data-test": DATA_TEST_HEADER_SEARCH_BUTTON,
     "aria-label": "Search",
     onClick: onClick
-  }, {
-    children: jsx(SvgSearch, {}, void 0)
-  }), void 0);
+  }, React__default.createElement(SvgSearch, null));
 };
 
-export { SearchButton };
+export { DATA_TEST_HEADER_SEARCH_BUTTON, SearchButton };

package/out/components/header/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/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/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/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/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/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/header/helper/is-macos.js

@@ -0,0 +1,5 @@
+function isMacOs() {
+  return window.navigator.appVersion.indexOf('Mac') !== -1;
+}
+
+export { isMacOs };

package/out/components/header/helper/key-codes.js

@@ -0,0 +1,3 @@
+const ESC_CODE = 27;
+const KEY_K_CODE = 75;
+export { ESC_CODE, KEY_K_CODE };