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

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 };

package/out/components/header/index.css

@@ -272,6 +272,259 @@
     }
 }
 
+.ktl-result-module_result_EKhUw {
+    box-sizing: border-box;
+    display: block;
+    padding: 16px 32px;
+    text-decoration: none;
+}
+    .ktl-result-module_result_EKhUw:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .ktl-result-module_result_EKhUw:focus {
+        outline: none;
+        background: rgba(255, 255, 255, 0.1);
+    }
+    .ktl-result-module_result_EKhUw em {
+        background-color: rgba(127,82,255,0.3);
+        font-style: normal;
+    }
+
+.ktl-result-module_resultTitle_DSpAT {
+    margin-bottom: 6px;
+}
+
+.ktl-result-module_text_fWBKG {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.ktl-list-module_results_LlxqY {
+    box-sizing: border-box;
+    max-height: 305px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    color: #fff;
+    overflow-y: scroll;
+}
+
+.ktl-list-module_topBar_OO0XT {
+    display: none;
+}
+
+.ktl-list-module_advancedSearch_XNy88 {
+    display: inline-block;
+    background: transparent;
+    border: 0;
+    padding: 6px 16px;
+    border-radius: 24px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.ktl-list-module_advancedSearch_XNy88:hover {
+        background: rgba(255, 255, 255, .1);
+    }
+
+.ktl-list-module_advancedSearch_XNy88:focus {
+        outline: none;
+        box-shadow: rgba(107, 87, 255, 0.8) 0 0 0 4px;
+    }
+
+@media (min-width: 768px) {
+    .ktl-list-module_results_LlxqY {
+        max-height: 434px;
+    }
+    .ktl-list-module_topBar_OO0XT {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 34px 32px 14px 32px;
+    }
+}
+.ktl-empty-module_empty_xh1i- {
+    box-sizing: border-box;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    padding: 32px;
+}
+.ktl-loading-module_loading_CtOhW {
+    box-sizing: border-box;
+    height: 92px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: #323236;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+}
+    .ktl-loading-module_loading_CtOhW > svg {
+        fill: #6B57FF;
+    }
+.ktl-quick-search-module_wrapper_kkbQQ {
+    box-sizing: border-box;
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: -8px;
+    transform: translateY(100%);
+}
+
+@media (min-width: 768px) {
+    .ktl-quick-search-module_wrapper_kkbQQ {
+        left: 0;
+        right: 0;
+    }
+}
+.ktl-full-search-module_fullSearch_MTU8t {
+    display: none;
+    box-sizing: border-box;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    overflow: scroll;
+}
+
+.ktl-full-search-module_closeSearch_5vYDG {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    position: absolute;
+    top: 40px;
+    right: 40px;
+}
+
+.ktl-full-search-module_wrapper_9rxXb {
+    max-width: 704px;
+    margin: 0 auto;
+}
+
+.ktl-full-search-module_header_Wltw0 {
+    width: 100%;
+    padding-top: 120px;
+    padding-bottom: 24px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 10;
+}
+
+.ktl-full-search-module_switcher_o1RgM {
+    margin-top: 14px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.ktl-full-search-module_results_svcSE {
+    margin-top: 14px;
+}
+
+@media (min-width: 768px) {
+    .ktl-full-search-module_fullSearch_MTU8t {
+        display: block;
+    }
+}
+.ktl-loading-module_loader_B2IQl {
+    margin: 24px 0;
+}
+    .ktl-loading-module_loader_B2IQl > svg {
+        fill: #6B57FF;
+    }
+.ktl-empty-module_wrapper_cNB8Y {
+    display: block;
+}
+
+.ktl-empty-module_title_p2FMj {
+    margin-bottom: 24px;
+}
+
+.ktl-empty-module_image_6Xr6L {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+}
+.ktl-chapters-module_chapters_J0wLB {
+    border-left: 1px solid var(--ktl-light-dark-20);
+    padding-left: 12px;
+    margin-top: 24px;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz {
+    border-bottom-color: transparent;
+}
+
+.ktl-chapters-module_chapterTitle_b6Rdz em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_singleChapter_zSmx2:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+.ktl-chapters-module_headliner_ZBuf9 {
+    margin: 0;
+}
+
+.ktl-chapters-module_snippet_yROJo {
+    margin-top: 8px;
+    color: rgba(39, 40, 44, 0.7);
+}
+
+.ktl-chapters-module_snippet_yROJo em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-chapters-module_extraSection_lsZfw {
+    display: none;
+}
+
+.ktl-chapters-module_visibleSection_wQyvM {
+    display: block;
+}
+
+.ktl-chapters-module_moreButton_98oqy {
+    margin-top: 12px;
+}
+.ktl-hit-list-module_hitList_1MP6m {
+    margin: 24px 0;
+}
+
+.ktl-hit-list-module_titleLink_rdJ6u {
+    border-bottom-color: transparent;
+}
+
+.ktl-hit-list-module_titleLink_rdJ6u em {
+        background: rgba(127, 82, 255, 0.2);
+        font-style: normal;
+    }
+
+.ktl-search-box-module_searchBox_0SgE9 {
+    position: relative;
+    width: 408px;
+}
+
+@media (max-width: 767px) {
+    .ktl-search-box-module_searchBox_0SgE9 {
+        background: var(--ktl-dark-100);
+        width: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 4px;
+    }
+}
+
 :root {
   --ktl-light-grey: #f4f4f4;
   --ktl-dark-100: rgba(39, 40, 44, 1);

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.0",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [
@@ -29,9 +29,11 @@
     "@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.3.0",
     "react-swipeable-views": "0.x",
     "sha.js": "2.x"
   },
@@ -47,8 +49,9 @@
     "@rescui/checkbox": "^0.1.0",
     "@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 +68,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 +108,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",