hds-web 1.15.9 → 1.16.1

package/src/HDS/helpers/AlgoliaSearch/constants.js

@@ -1,48 +0,0 @@
-export const INDEX_TYPES = Object.freeze({
-  blog: "blog",
-  docs: "docs",
-  learn: "learn",
-});
-
-export const SEARCH_INDICES = [
-  { name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
-  { name: `graphql-docs-prod`, title: `Hasura GraphQL Engine Docs`, type: INDEX_TYPES.docs },
-  { name: `learn-intro-graphql`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
-  { name: `learn-intro-graphql-zh`, title: `Learn Intro GraphQL`, type: INDEX_TYPES.learn },
-  { name: `learn-elm-graphql`, title: `Learn ELM GraphQl`, type: INDEX_TYPES.learn },
-  { name: `learn-flutter-graphql`, title: `Learn Flutter GraphQL`, type: INDEX_TYPES.learn },
-  { name: `learn-database-mysql`, title: `Learn Database MySQL`, type: INDEX_TYPES.learn },
-  {
-    name: `learn-database-postgresql`,
-    title: `Learn Database PostgreSQL`,
-    type: INDEX_TYPES.learn,
-  },
-  { name: `learn-hasura-backend`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
-  { name: `learn-hasura-backend-ja`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
-  { name: `learn-hasura-backend-zh`, title: `Learn Hasura Backend`, type: INDEX_TYPES.learn },
-  { name: `learn-hasura-backend-advanced`, title: `Learn Hasura Backend Advanced`, type: INDEX_TYPES.learn },
-  { name: `learn-hasura-auth-slack`, title: `Learn Hasura Auth Slack`, type: INDEX_TYPES.learn },
-  { name: `learn-react-apollo-hooks`, title: `Learn React Apollo Hooks`, type: INDEX_TYPES.learn },
-  { name: `learn-react-apollo`, title: `Learn React Apollo`, type: INDEX_TYPES.learn },
-  {
-    name: `learn-typescript-react-apollo`,
-    title: `Learn TypeScript React Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  { name: `learn-angular-apollo`, title: `Learn Angular Apollo`, type: INDEX_TYPES.learn },
-  { name: `learn-vue-apollo`, title: `Learn Vue Apollo`, type: INDEX_TYPES.learn },
-  { name: `learn-ios-apollo`, title: `Learn IOS Apollo`, type: INDEX_TYPES.learn },
-  { name: `learn-svelte-apollo`, title: `Learn Svelte Apollo`, type: INDEX_TYPES.learn },
-  { name: `learn-android-apollo`, title: `Learn Android Apollo`, type: INDEX_TYPES.learn },
-  {
-    name: `learn-react-native-apollo`,
-    title: `Learn React Native Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  {
-    name: `learn-reason-react-apollo`,
-    title: `Learn Reason React Apollo`,
-    type: INDEX_TYPES.learn,
-  },
-  { name: `learn-database-mssql`, title: `Learn MicrosoftSQL`, type: INDEX_TYPES.learn },
-];

package/src/HDS/helpers/AlgoliaSearch/index.js

@@ -1 +0,0 @@
-export {default as AlgoliaSearch } from './search';

package/src/HDS/helpers/AlgoliaSearch/search.js

@@ -1,38 +0,0 @@
-import { useEffect, useState } from "react";
-import SearchOverlay from "./searchoverlay";
-export default function Search() {
-  const [showSearch, setShowSearch] = useState(false);
-
-  const handleSearchWithKeyboard = e => {
-    if (e.key === "/" || e.key === "Escape") {
-      e.preventDefault();
-      if (e.key === "/") return setShowSearch(true);
-      if (e.key === "Escape") return onCloseSearch();
-    }
-
-    return null;
-  };
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleSearchWithKeyboard);
-
-    return () => {
-      document.removeEventListener("keydown", handleSearchWithKeyboard);
-    };
-  }, []);
-
-  const onCloseSearch = () => setShowSearch(false);
-
-  return (
-    <>
-      <div className="pt-10">
-        <div className="max-w-7xl mx-auto">
-          <div className="w-full" onClick={() => {setShowSearch(preShowSearch => !preShowSearch);}}>
-            Search
-          </div>
-        </div>
-      </div>
-      <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} />
-    </>
-  );
-}

package/src/HDS/helpers/AlgoliaSearch/search.scss

@@ -1,38 +0,0 @@
-.search-results {
-  width: calc(100% - 150px);
-  .ais-Hits, .Hits {
-    .ais-Hits-list {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-gap: 40px;
-      .ais-Hits-item {
-        border-bottom: 1px solid transparent;
-        &:hover {
-          border-bottom: 1px solid #E5E7EB;
-        }
-        .hit-slug {
-          word-break: break-word;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 799px) {
-  .search-results {
-    .ais-Hits, .Hits {
-      .ais-Hits-list {
-        grid-template-columns: 1fr;
-      }
-    }
-  }
-}
-@media (min-width: 800px) and (max-width: 905px) {
-  .search-results {
-    .ais-Hits, .Hits {
-      .ais-Hits-list {
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-  }
-}

package/src/HDS/helpers/AlgoliaSearch/searchbox.js

@@ -1,88 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { connectSearchBox } from "react-instantsearch-dom";
-import { Icon } from '../../components/common-components/Icon'
-import { Typography } from '../../foundation/Typography'
-const searchSuggestions = [
-  "GraphQL",
-  "Actions",
-  "Authentication",
-  "React",
-  "Remote Joins",
-  "Postgres",
-];
-
-const DebouncedSearchBox = ({
-  refine,
-  currentRefinement,
-  className,
-  delay = 500,
-  isSearchStalled,
-}) => {
-  const [value, setValue] = useState(currentRefinement);
-  const timerId = useRef();
-  const searchInputRef = useRef();
-  useEffect(() => {
-    searchInputRef.current?.focus();
-  }, []);
-
-  const trySuggestion = inputValue => {
-    refine(inputValue);
-    setValue(inputValue);
-  };
-
-  const resetInput = () => {
-    refine("");
-    setValue("");
-  };
-
-  const onChangeDebounced = event => {
-    const value = event.target.value;
-
-    clearTimeout(timerId.current);
-    timerId.current = setTimeout(() => refine(value), delay);
-
-    setValue(value);
-  };
-  return (
-    <div className=" sticky -top-20 tb-m:-top-20 z-10 py-8 pt-16 tb-m:pt-16 tb-m:py-9 bg-neutral-50">
-      <div className="flex relative items-center w-full">
-        <div className="absolute left-2">
-          {isSearchStalled ? (
-            <div className="loader-spin border-[3px] border-neutral-400 border-t-blue-500 w-5 h-5 rounded-full" />
-          ) : (
-            <Icon height={'w-5 h-5 stroke-[1.5px]'} variant="searchsm" strokeClass="stroke-neutral-800" />
-          )}
-        </div>
-        <form className={`${className} w-full`} onSubmit={e => e.preventDefault()}>
-          <input
-            id="search-input"
-            ref={searchInputRef}
-            className="w-full indent-5 rounded-xl border-neutral-400 h-12"
-            type="text"
-            placeholder="Search for tutorials, articles or docs"
-            aria-label="Search"
-            onChange={onChangeDebounced}
-            value={value}
-          />
-        </form>
-        <div onClick={resetInput} className="absolute right-2 cursor-pointer bg-neutral-200 rounded-md">
-          <Icon height={'w-6 h-6 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
-        </div>
-      </div>
-      <div className="hidden tb:flex flex-wrap items-center mt-4">
-        <Typography textStyle="body2c-bold" className="uppercase text-neutral-500 mr-4">POPULAR</Typography>
-        {searchSuggestions.map(suggestion => (
-          <button
-            key={suggestion}
-            className={`px-3 py-1 border rounded-md m-1 ${currentRefinement === suggestion ? "border-neutral-300 hover:bg-neutral-300 bg-neutral-300" : "bg-neutral-150 hover:bg-neutral-200 border-neutral-150"}`}
-            onClick={() => trySuggestion(suggestion)}
-          >
-            {suggestion}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default connectSearchBox(DebouncedSearchBox);

package/src/HDS/helpers/AlgoliaSearch/searchfooter.js

@@ -1,30 +0,0 @@
-import React, { Fragment } from "react";
-import { PoweredBy } from "react-instantsearch-dom";
-
-const SearchFooter = () => (
-  <Fragment>
-    <hr className="my-5 border-t-neutral-200" />
-    <div className="mt-12 flex flex-wrap justify-between">
-      <div className="community-links-wrapper">
-        <p>Unable to find what you're looking for?</p>
-        <p>
-          Reach out to our{" "}
-          <a className="text-blue-500 hover:text-blue-700" href="https://discord.com/invite/hasura" target="_blank" rel="noopener noreferrer">
-            Discord Community
-          </a>{" "}
-          or start a{" "}
-          <a className="text-blue-500 hover:text-blue-700"
-            href="https://github.com/hasura/graphql-engine/discussions"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Discussion on GitHub
-          </a>
-        </p>
-      </div>
-      <PoweredBy />
-    </div>
-  </Fragment>
-);
-
-export default SearchFooter;

package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js

@@ -1,36 +0,0 @@
-import { useEffect, useState } from "react";
-import { Icon } from '../../components/common-components/Icon'
-import SearchWrapper from "./searchwrapper";
-import { SEARCH_INDICES } from "./constants";
-
-export default function SearchOverlay({showSearch, onCloseSearch}) {
-  
-  useEffect(() => {
-    if (showSearch) {
-      document.body.style.overflow = "hidden";
-    }
-
-    return () => {
-      document.body.style.overflow = "unset";
-    };
-  }, [showSearch]);
-
-  if (!showSearch) return null;
-
-  return (
-    <div className="fixed left-0 top-0 w-full h-full z-[10000] bg-neutral-50">
-      <div className="absolute top-4 right-4 cursor-pointer z-[11]" onClick={onCloseSearch}>
-        <Icon height={'w-8 h-8 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
-      </div>
-      <div className="py-20 overflow-y-auto h-full w-full">
-        <div className="px-4">
-          <div className="max-w-7xl mx-auto">
-            <div className="w-full">
-              <SearchWrapper indices={SEARCH_INDICES} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/HDS/helpers/AlgoliaSearch/searchresults.js

@@ -1,98 +0,0 @@
-import React, { Fragment } from "react";
-import { connectStateResults, Highlight, Hits, Index, Snippet } from "react-instantsearch-dom";
-import { INDEX_TYPES } from "./constants";
-import SearchFooter from "./searchfooter";
-import { Typography } from '../../foundation/Typography'
-
-// import SearchFooter from "./SearchFooter";
-
-const baseDomain = 'hasura.io';
-
-
-const HitsHeader = ({ searchResults, indexTitle, showSeparator }) => {
-  const hitCount = searchResults && searchResults.nbHits;
-  return hitCount > 0 ? (
-    <Fragment>
-      {showSeparator && <hr className="my-5 border-t-neutral-200" />}
-      {/* <div className="HitCount">
-        {hitCount} result{hitCount !== 1 ? `s` : ``}
-      </div> */}
-      <Typography textStyle="body2c-medium" className="pb-4">{indexTitle}</Typography>
-    </Fragment>
-  ) : null;
-};
-
-const CustomHitsHeader = connectStateResults(HitsHeader);
-
-const PageHit = ({ hit, indexType }) => (
-  <a href={hit.url} className="grid h-full">
-    <div className="self-start">
-      <Typography textStyle="body3c-medium" className="uppercase text-neutral-500">{indexType}</Typography>
-      {indexType === INDEX_TYPES.docs ? (
-        <Fragment>
-          {!!hit.hierarchy && (
-            <Typography textStyle="body1c-bold" className="font-semibold py-3">{`${
-              Object.values(hit.hierarchy)
-                .filter(h => !!h)
-                .reverse()[0]
-            }`}</Typography>
-          )}
-          <Typography textStyle="body2" className="text-neutral-600 break-words">
-            <Snippet attribute="content" hit={hit} tagName="mark" />
-          </Typography>
-          
-        </Fragment>
-      ) : (
-        <Fragment>
-          <Typography textStyle="body1c-bold" className="font-semibold py-3">
-            <Highlight attribute="title" hit={hit} tagName="mark" />
-          </Typography>
-          <Typography textStyle="body2" className="text-neutral-600 break-words">
-            <Snippet attribute="excerpt" hit={hit} tagName="mark" />
-          </Typography>
-        </Fragment>
-      )}
-    </div>
-    {hit.url ? (
-      <Typography textStyle="body3" className="self-end my-2 pt-3 text-neutral-600">
-        <span className='hit-slug break-words'>{hit.url.replace(`https://${baseDomain}/`, "/")}</span>
-      </Typography>
-    ) : null}
-  </a>
-);
-
-const HitsByIndexType = ({ indexType }) => {
-  if (INDEX_TYPES[indexType] === undefined) return null;
-
-  return (
-    <Hits
-      className="Hits"
-      hitComponent={hitProps => <PageHit {...hitProps} indexType={indexType} />}
-    />
-  );
-};
-
-const HitsInIndex = ({ index, show }) => (
-  <Index indexName={index.name}>
-    {show && (
-      <Fragment>
-        <CustomHitsHeader
-          indexTitle={index.title}
-          showSeparator={index.type !== INDEX_TYPES.blog}
-        />
-        <HitsByIndexType indexType={index.type} />
-      </Fragment>
-    )}
-  </Index>
-);
-
-const SearchResult = ({ indices, className, id, wrapperRef, activeIndexTypes }) => (
-  <div id={id} className={`${className} search-results z-[2] clear-both`} ref={wrapperRef}>
-    {indices.map(index => (
-      <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
-    ))}
-    <SearchFooter />
-  </div>
-);
-
-export default SearchResult;

package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js

@@ -1,126 +0,0 @@
-import algoliasearch from "algoliasearch/lite";
-import React, { useRef, useState } from "react";
-import { InstantSearch, connectStateResults, Index } from "react-instantsearch-dom";
-import SearchBox from "./searchbox";
-import SearchResults from "./searchresults";
-import { INDEX_TYPES } from "./constants";
-import SearchFooter from "./searchfooter";
-import { Typography } from '../../foundation/Typography'
-
-
-const algoliaClient = algoliasearch(
-  process.env.ALGOLIA_APP_ID,
-  process.env.ALGOLIA_SEARCH_KEY
-);
-
-const searchClient = {
-  ...algoliaClient,
-  search(requests) {
-    if (requests.every(({ params }) => !params.query)) {
-      return Promise.resolve({
-        results: requests.map(() => ({
-          hits: [],
-          nbHits: 0,
-          nbPages: 0,
-          processingTimeMS: 0,
-        })),
-      });
-    }
-
-    return algoliaClient.search(requests);
-  },
-};
-
-const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
-  if (!searchState?.query) return null;
-
-  const hasResults =
-    allSearchResults && Object.values(allSearchResults).some(results => results.nbHits > 0);
-  return !hasResults ? (
-    <div>
-      <div>
-        {searching ? (
-          <span>
-            Searching for "<em>{searchState?.query}</em>"
-          </span>
-        ) : (
-          <span>
-            No results for "<em>{searchState?.query}</em>"
-          </span>
-        )}
-      </div>
-      {indices.map(index => (
-        <Index indexName={index.name} key={index.name} />
-      ))}
-      <SearchFooter />
-    </div>
-  ) : (
-    children
-  );
-};
-
-const CustomAllResults = connectStateResults(AllResults);
-
-const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
-  const handleOnChange = indexType => ({ target }) => {
-    setActiveIndexTypes(prevState => ({
-      ...prevState,
-      [indexType]: target.checked,
-    }));
-  };
-
-  return (
-    <div className="tb-m:min-w-[150px] static tb-m:sticky top-[96px] self-start">
-      <Typography textStyle="h6" as="h6" className="text-neutral-700 uppercase">Filter</Typography>
-      <ul className="flex tb-m:block">
-        {Object.values(INDEX_TYPES).map(index => (
-          <li key={index} className="flex items-center py-3 mr-4 tb-m:mr-0">
-            <input
-              type="checkbox"
-              id={"algolia_index_type_" + index}
-              name={"algolia_index_type_" + index}
-              value={index}
-              checked={activeIndexTypes[index]}
-              onChange={handleOnChange(index)}
-              className="mr-2 focus:outline-none"
-            />
-            <label htmlFor={"algolia_index_type_" + index}>{index}</label>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default function SearchWrapper({ indices }) {
-  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((a, c) => {
-    a[c] = true;
-    return a;
-  }, {});
-  const wrapperRef = useRef(null);
-  const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
-  return (
-    <InstantSearch
-      searchClient={searchClient}
-      indexName={indices[0].name}
-      onSearchStateChange={() => setActiveIndexTypes(defaultIndexTypesState)}
-    >
-      <SearchBox />
-      <CustomAllResults indices={indices}>
-        <div className="tb-m:flex">
-          <IndexTypeFilter
-              activeIndexTypes={activeIndexTypes}
-              setActiveIndexTypes={setActiveIndexTypes}
-            />
-          <SearchResults
-            id="search-results"
-            indices={indices}
-            wrapperRef={wrapperRef}
-            activeIndexTypes={activeIndexTypes}
-            className="search-results"
-          />
-        </div>
-      </CustomAllResults>
-    </InstantSearch>
-  );
-}