hds-web 1.33.2 → 1.33.3

package/src/HDS/foundation/ColorPalette/index.js

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

package/src/HDS/foundation/Typography/Typography.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import {PropTypes} from 'prop-types';
+export default function Typography(props) {
+    const {
+        children,
+        textStyle = 'h1',
+        className = '',
+        as: Component = 'div',
+    } = props;
+
+    const ComponentType = Component;
+    const TYPOGRAPHY_CLASSES = {
+        'h1': 'text-hds-m-h1 tb:text-hds-t-h1 db:text-hds-d-h1',
+        'h2': 'text-hds-m-h2 tb:text-hds-t-h2 db:text-hds-d-h2',
+        'h3': 'text-hds-m-h3 tb:text-hds-t-h3 db:text-hds-d-h3',
+        'h4': 'text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
+        'h5': 'text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
+        'h6': 'text-hds-m-h6 tb:text-hds-t-h6 db:text-hds-d-h6',
+        'h7': 'text-hds-m-h7 tb:text-hds-t-h7 db:text-hds-d-h7',
+        'sub1': 'text-hds-m-sub1 tb:text-hds-t-sub1 db:text-hds-d-sub1',
+        'sub2': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
+        'body1': 'text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1',
+        'body1-medium': 'text-hds-m-body1-medium tb:text-hds-t-body1-medium db:text-hds-d-body1-medium',
+        'body1-semi-bold': 'text-hds-m-body1-semi-bold tb:text-hds-t-body1-semi-bold db:text-hds-d-body1-semi-bold',
+        'body1-bold': 'text-hds-m-body1-bold tb:text-hds-t-body1-bold db:text-hds-d-body1-bold',
+        'body1c': 'text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c',
+        'body1c-medium': 'text-hds-m-body1c-medium tb:text-hds-t-body1c-medium db:text-hds-d-body1c-medium',
+        'body1c-semi-bold': 'text-hds-m-body1c-semi-bold tb:text-hds-t-body1c-semi-bold db:text-hds-d-body1c-semi-bold',
+        'body1c-bold': 'text-hds-m-body1c-bold tb:text-hds-t-body1c-bold db:text-hds-d-body1c-bold',
+        'body2': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2',
+        'body2-medium': 'text-hds-m-body2-medium tb:text-hds-t-body2-medium db:text-hds-d-body2-medium',
+        'body2-semi-bold': 'text-hds-m-body2-semi-bold tb:text-hds-t-body2-semi-bold db:text-hds-d-body2-semi-bold',
+        'body2-bold': 'text-hds-m-body2-bold tb:text-hds-t-body2-bold db:text-hds-d-body2-bold',
+        'body2c': 'text-hds-m-body2c tb:text-hds-t-body2c db:text-hds-d-body2c',
+        'body2c-medium': 'text-hds-m-body2c-medium tb:text-hds-t-body2c-medium db:text-hds-d-body2c-medium',
+        'body2c-semi-bold': 'text-hds-m-body2c-semi-bold tb:text-hds-t-body2c-semi-bold db:text-hds-d-body2c-semi-bold',
+        'body2c-bold': 'text-hds-m-body2c-bold tb:text-hds-t-body2c-bold db:text-hds-d-body2c-bold',
+        'body3': 'text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3',
+        'body3-medium': 'text-hds-m-body3-medium tb:text-hds-t-body3-medium db:text-hds-d-body3-medium',
+        'body3-semi-bold': 'text-hds-m-body3-semi-bold tb:text-hds-t-body3-semi-bold db:text-hds-d-body3-semi-bold',
+        'body3-bold': 'text-hds-m-body3-bold tb:text-hds-t-body3-bold db:text-hds-d-body3-bold',
+        'body3c': 'text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c',
+        'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
+        'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
+        'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
+        'quote': 'font-petrona font-normal italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
+        'code1': 'font-firaCode text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
+        'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
+      }
+      return React.createElement(
+        ComponentType,
+        {className: `${TYPOGRAPHY_CLASSES[textStyle]} ${className}`},
+        children
+      );      
+}
+Typography.propTypes = {
+    textStyle: PropTypes.string,
+    className: PropTypes.string
+    
+  };
+  
+  Typography.defaultProps = {
+    children: 'default Text',
+    textStyle: 'h1',
+  };
+  

package/src/HDS/foundation/Typography/TypographyClasses.js

@@ -0,0 +1,32 @@
+import React from 'react';
+const TypographyClasses = ({ applyclass, text }) => {
+  return (
+    <div className=' '>
+      <div className='grid grid-cols-4 gap-10'>
+        <div>ClassName</div>
+        <div>Tab</div>
+        <div>Mobile</div>
+        <div>Desktop</div>
+      </div>
+      <div className='grid grid-cols-4 gap-10 border'>
+        <div>
+          {applyclass.map(temp => (
+            <div className='' >
+              <div className='text-lg-regular not-italic flex items-center ml-2 col-span-1 my-10'>{temp}</div>
+            </div>
+          )
+          )}
+        </div>
+        <div className='grid grid-cols-3 gap-[14rem] '>
+          {applyclass.map(temp => (
+            <div className='' >
+              <div className={`${temp} mr-2 `}>Aa</div>
+            </div>
+          )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default TypographyClasses;

package/src/HDS/foundation/Typography/index.js

@@ -0,0 +1,2 @@
+export {default as Typography} from './Typography';
+export {default as TypographyClasses} from './TypographyClasses';

package/src/HDS/foundation/index.js

@@ -0,0 +1,2 @@
+export * from './ColorPalette';
+export * from './Typography';

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

@@ -0,0 +1,54 @@
+export const INDEX_TYPES = Object.freeze({
+  All: "All",
+  //Website: "website",
+  blog: "blog",
+  docs: "docs",
+  learn: "learn",
+  // tutorials: "Tutorials",
+  // case_studies: "Case studies",
+  // events: "Events",
+  // resources: "Resources"
+});
+
+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

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

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import SearchOverlay from "./searchoverlay";
+import { Icon } from "../../components/common-components";
+export default function Search(props) {
+
+  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="">
+        <div className="max-w-7xl mx-auto">
+          <div className="w-full cursor-pointer gap-0.5 flex items-center" onClick={() => {setShowSearch(preShowSearch => !preShowSearch);}}>
+            <p className="-mt-1">/ </p>
+            <Icon height={'h-4 w-4 stroke-2'} variant={`searchsm`}  strokeClass='stroke-neutral-1000' />
+          </div>
+        </div>
+      </div>
+      <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} {...props}/>
+    </>
+  );
+}

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

@@ -0,0 +1,90 @@
+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-100">
+      <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-8 h-8 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="shodow-none bg-neutral-100 w-full font-bold indent-8 tb-m:indent-11 text-2xl tb-m:text-4xl text-neutral-800 placeholder:text-neutral-800 rounded-xl border-0 h-12 focus:border-0 focus:shadow-[none] focus:border-neutral-0 tb:text-2xl"
+            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 rounded-md">
+          <Icon height={'w-6 h-6 stroke-[1.5px]'} variant="xclose" strokeClass="stroke-neutral-800" />
+        </div>
+      </div>
+      <div className="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-2 py-[2px] text-blue-800 border rounded-[100px] m-1 ${currentRefinement === suggestion ? "border-blue-300 hover:bg-blue-300 bg-blue-300" : "bg-blue-200 hover:bg-blue-300 border-blue-200"}`}
+            onClick={() => trySuggestion(suggestion)}
+          >
+            <Typography textStyle="body2c-medium">
+            {suggestion}
+            </Typography>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default connectSearchBox(DebouncedSearchBox);

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

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+import { PoweredBy } from "react-instantsearch-dom";
+
+const SearchFooter = () => (
+  <Fragment>
+    <hr className="my-8 border-t-neutral-200" />
+    <div className="mt-10 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

@@ -0,0 +1,37 @@
+import React from "react";
+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, ...props}) {
+  
+  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-100">
+      <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 bg-neutral-100">
+        <div className="px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="w-full">
+              <SearchWrapper indices={SEARCH_INDICES} {...props} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+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 { Icon } from '../../components/common-components/Icon';
+
+// import SearchFooter from "./SearchFooter";
+
+const baseDomain = 'hasura.io';
+
+
+const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
+  const hitCount = searchResults && searchResults.nbHits;
+  const titleIcon = () => {
+    if(indexTitle === "Hasura Blog") {
+      return (
+        <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="pentool02" strokeClass='stroke-blue-500' />
+      )
+    }
+    if(indexTitle === "Hasura GraphQL Engine Docs") {
+      return (
+        <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="file02" strokeClass='stroke-blue-500' />
+      )
+    }
+    return (
+      <Icon height={'block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out'} variant="graduationhat01" strokeClass='stroke-blue-500' />
+    )
+  }
+  
+  return hitCount > 0 ? (
+    <Fragment>
+      {showSeparator && <hr className="my-8 border-t-neutral-200" />}
+      {/* <div className="HitCount">
+        {hitCount} result{hitCount !== 1 ? `s` : ``}
+      </div> */}
+      <Typography textStyle="sub1" className="pb-4 pl-2 flex items-center text-neutral-800 font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-100">
+        {
+          titleIcon()
+        }
+      
+        {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 ? (
+        <div className="flex items-start">
+          <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
+            <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+          </div>
+          <div>
+            {!!hit.hierarchy && (
+              <Typography textStyle="body1c-bold" className="font-bold flex items-start pb-3">
+              {`${
+                Object.values(hit.hierarchy)
+                  .filter(h => !!h)
+                  .reverse()[0]
+              }`}</Typography>
+            )}
+            <Typography textStyle="body2" className="text-neutral-800 word-break">
+              <Snippet attribute="content" hit={hit} tagName="mark" />
+            </Typography>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-start">
+          <div className="w-6 h-6 mr-2 min-w-[24px] flex items-center justify-center">
+            <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+          </div>
+          <div>
+            <Typography textStyle="body1c-bold" className="font-bold text-neutral-800 pb-3">
+              <Highlight attribute="title" hit={hit} tagName="mark" />
+            </Typography>
+            <Typography textStyle="body2" className="text-neutral-800 word-break">
+              <Snippet attribute="excerpt" hit={hit} tagName="mark" />
+            </Typography>
+          </div>
+        </div>
+      )}
+    </div>
+    {hit.url ? (
+      <Typography textStyle="body3" className="self-end pl-8 pt-3 text-neutral-500">
+        <span className='hit-slug word-break'>{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}
+          allIndex = {index.type}
+        />
+        <HitsByIndexType indexType={index.type} />
+      </Fragment>
+    )}
+  </Index>
+);
+
+const SearchResult = ({ children, indices, className, id, wrapperRef, activeIndexTypes }) => (
+  <div id={id} className={`${className} search-results clear-both`} ref={wrapperRef}>
+    {children && children}
+    {indices.map(index => (
+      <HitsInIndex index={index} key={index.name} show={activeIndexTypes[index.type]} />
+    ))}
+    <SearchFooter />
+  </div>
+);
+
+export default SearchResult;