hds-web 1.33.2 → 1.33.4

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

@@ -0,0 +1,192 @@
+import algoliasearch from "algoliasearch/lite";
+import React, { useRef, useState, useEffect } 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 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);
+let showAll = true;
+
+const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const handleOnClick = (indexType) => {
+    if (indexType === INDEX_TYPES.All) {
+      showAll = true;
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
+        acc[key] = true;
+        return acc;
+      }, {});
+      setActiveIndexTypes(allFiltersSelected);
+    } else {
+      showAll = false
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+      }, {});
+      setActiveIndexTypes(allFiltersSelected);
+      setActiveIndexTypes((prevState) => ({
+        ...prevState,
+        [indexType]: !prevState[indexType],
+      }));
+    }
+    setShowDropdown(false)
+  };
+
+  return (
+    <div className="relative">
+    <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
+      <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
+        {Object.values(INDEX_TYPES).map((index) => (
+          <li key={index} className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0">
+            <button
+              onClick={() => handleOnClick(index)}
+              className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${(activeIndexTypes[index] && index === 'All') ? "bg-blue-500 " : ""
+                } ${(activeIndexTypes[index] && !showAll) ? 'bg-blue-500': ''} `}
+            >
+              <Typography
+                textStyle="body3c-medium"
+                className={`${(activeIndexTypes[index] && index === 'All') ? "text-neutral-0 " : ""} ${(activeIndexTypes[index] && !showAll) ? 'text-neutral-0' : ''} `
+              }
+              >
+                {index}
+              </Typography>
+            </button>
+          </li>
+        ))}
+      </ul>
+
+    </div>
+      <div className="relative hds-hidden-tbm">
+        <button
+          onClick={() => setShowDropdown(!showDropdown)}
+          className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-800 text-left rounded-full text-neutral-800 bg-transparent"
+        >
+          {Object.values(INDEX_TYPES).find((index) => activeIndexTypes[index]) || "All"}
+
+        </button>
+        {showDropdown && (
+          <ul className="absolute top-full left-0 w-full bg-neutral-0 shadow-md z-[20] p-2 rounded-3xl mt-1">
+            {Object.values(INDEX_TYPES).map((index) => (
+              <li
+                key={index}
+                onClick={() => handleOnClick(index)}
+                className={`capitalize cursor-pointer py-2 px-4 ${activeIndexTypes[index] ? "text-neutral-1000  " : "text-neutral-500"
+                  }`}
+              >
+                {index}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+    </div>
+  );
+};
+
+export default function SearchWrapper({ indices, ...props }) {
+  let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY ;
+  if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY){
+    ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
+    ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
+  }
+  const algoliaClient = algoliasearch(
+    ALGOLIA_APP_ID,
+    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 defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((acc, index) => {
+    acc[index] = true;
+    return acc;
+  }, {});
+  const wrapperRef = useRef(null);
+  const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
+  useEffect(() => {
+    setActiveIndexTypes(defaultIndexTypesState);
+  }, []);
+
+  return (
+    <InstantSearch
+      searchClient={searchClient}
+      indexName={indices[0].name}
+      onSearchStateChange={() => setActiveIndexTypes(defaultIndexTypesState)}
+    >
+      <SearchBox />
+      <CustomAllResults indices={indices}>
+        <div className="tb-m:flex gap-10">
+          <div className="hds-hidden tb-m:flex">
+            <IndexTypeFilter
+                activeIndexTypes={activeIndexTypes}
+                setActiveIndexTypes={setActiveIndexTypes}
+            />
+          </div>
+          <SearchResults
+            id="search-results"
+            indices={indices}
+            wrapperRef={wrapperRef}
+            activeIndexTypes={activeIndexTypes}
+            className="search-results">
+              <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
+                <IndexTypeFilter
+                  activeIndexTypes={activeIndexTypes}
+                  setActiveIndexTypes={setActiveIndexTypes}
+                />
+              </div>
+          </SearchResults>
+        </div>
+      </CustomAllResults>
+    </InstantSearch>
+  );
+}

package/src/HDS/helpers/Algorithms/hdssearch.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+function LiveSearch({ wordArray }) {
+    const [input, setInput] = useState("");
+    const [filteredWords, setFilteredWords] = useState([]);
+
+    const handleInputChange = (event) => {
+        const inputValue = event.target.value.toLowerCase();
+        setInput(inputValue);
+
+        const newFilteredWords = searchWords(wordArray, inputValue);
+        setFilteredWords(newFilteredWords);
+    };
+
+    return (
+        <div>
+            <input
+                type="text"
+                placeholder="Search..."
+                value={input}
+                onChange={handleInputChange}
+            />
+            <div id="results">
+                {filteredWords.map((word, index) => (
+                    <div key={index}>{word}</div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function searchWords(words, inputLetter) {
+    return words.filter((word) => word.toLowerCase().includes(inputLetter));
+}
+
+export default LiveSearch;

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

@@ -0,0 +1,2 @@
+export { default as HDSSearch } from './hdssearch';
+export { default as TagFilter } from './invertedIndex';

package/src/HDS/helpers/Algorithms/invertedIndex.js

@@ -0,0 +1,47 @@
+function buildInvertedIndex(data) {
+    const invertedIndex = {};
+
+    for (const item of data) {
+        const key = Object.keys(item)[0];
+        const tags = item[key];
+
+        for (const tag of tags) {
+            if (!invertedIndex[tag]) {
+                invertedIndex[tag] = new Set();
+            }
+            invertedIndex[tag].add(key); 
+        }
+    }
+
+    return invertedIndex;
+}
+
+export default function getSimilarAndRemainingKeys(data, inputKey) {
+    const invertedIndex = buildInvertedIndex(data);
+    const inputTags = data.find(item => item[inputKey]);
+    const similarKeys = new Set();
+    const allKeys = new Set();
+
+    if (inputTags) {
+        for (const tag of inputTags[inputKey]) {
+            const keysWithSimilarTag = invertedIndex[tag];
+            if (keysWithSimilarTag) {
+                keysWithSimilarTag.forEach(key => {
+                    if (key !== inputKey) {
+                        similarKeys.add(key);
+                    }
+                });
+            }
+        }
+    }
+
+    for (const item of data) {
+        const key = Object.keys(item)[0];
+        allKeys.add(key);
+    }
+
+    const remainingKeys = [...allKeys].filter(key => !similarKeys.has(key));
+
+    return [...similarKeys, ...remainingKeys];
+}
+

package/src/HDS/helpers/Effects/HoverEffects/card3d.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+
+
+const CardHoverEffect = ({ children }) => {
+    const cardRef = useRef(null);
+    let bounds;
+
+    useEffect(() => {
+        const cardElement = cardRef.current;
+
+        const rotateToMouse = (e) => {
+            const mouseX = e.clientX;
+            const mouseY = e.clientY;
+            const leftX = mouseX - bounds.x;
+            const topY = mouseY - bounds.y;
+            const center = {
+                x: leftX - bounds.width / 2,
+                y: topY - bounds.height / 2
+            };
+            const distance = Math.sqrt(center.x ** 2 + center.y ** 2);
+
+            cardElement.style.transform = `
+        scale3d(1.07, 1.07, 1.07)
+        rotate3d(
+          ${center.y / 100},
+          ${-center.x / 100},
+          0,
+          ${Math.log(distance) * 2}deg
+        )
+      `;
+
+            cardElement.querySelector('.glow').style.backgroundImage = `
+        radial-gradient(
+          circle at
+          ${center.x * 2 + bounds.width / 2}px
+          ${center.y * 2 + bounds.height / 2}px,
+          #ffffff55,
+      #0000000
+        
+        )
+      `;
+        };
+
+        const handleMouseEnter = () => {
+            bounds = cardElement.getBoundingClientRect();
+            document.addEventListener('mousemove', rotateToMouse);
+        };
+
+        const handleMouseLeave = () => {
+            document.removeEventListener('mousemove', rotateToMouse);
+            cardElement.style.transform = '';
+            cardElement.style.background = '';
+        };
+
+        cardElement.addEventListener('mouseenter', handleMouseEnter);
+        cardElement.addEventListener('mouseleave', handleMouseLeave);
+
+        return () => {
+            cardElement.removeEventListener('mouseenter', handleMouseEnter);
+            cardElement.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, []);
+
+    return (
+        <div className="card" ref={cardRef}>
+            <div className="glow" />
+
+           {children}
+
+        </div>
+    );
+};
+
+export default CardHoverEffect;

package/src/HDS/helpers/Effects/HoverEffects/index.js

@@ -0,0 +1 @@
+export { default as Card3dHover} from './card3d'

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

@@ -0,0 +1 @@
+export * from './HoverEffects';

package/src/HDS/helpers/Grid/grid.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+const GridComponent = ({ cards, gridSize }) => {
+  const numCards = cards.length;
+  const cardsLeftInLastRow = numCards % gridSize;
+  const renderCards = () => {
+    let cardClass = '';
+    if(cards.length === 4 ){
+      cardClass = 'grid grid-cols-2'
+    }
+    else cardClass = 'gridAutoClass';
+    return cards.map((card, index) => (
+      <div
+      className={cardClass}
+        key={index}
+      >
+        {/* Render card content */}
+        {card}
+      </div>
+    ));
+  };
+
+  return (
+    <div className='flex flex-wrap'>
+      {renderCards()}
+    </div>
+  );
+};
+
+export default GridComponent;
+
+
+
+
+// 2x2, 3x3, 4x4
+// odd even 
+
+//2x2 -odd grid grid-cols-2
+    //case 1: NOC = 3 
+    //                 .... .... 
+    //                 ......... colr-span-2  
+
+
+//3x3 -odd 
+    //case 1: noc:5
+    ///              ... ... ...
+            //       ..... ..... col-span-1.5 col-span-1.5
+    //case 2: noc:4
+    ///              ... ... ...
+            //       ........... col-span-3
+
+
+
+//4x4 
+
+// case1: noc 5:   
+//                  .. .. .. ..
+//                  ........... col-span-4
+// case2: noc 6:   
+//                  .. .. .. ..
+//                  ..... ..... col-span-2 col span-2
+// case1: noc 7:   
+//                  .. .. .. ..
+//                  ... ... ... col-span-4/3 col-span-4/3 col-span-4/3

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

@@ -0,0 +1,2 @@
+export {default as GridComponent} from './grid';
+export {default as StoryLayout} from './storyLayout'

package/src/HDS/helpers/Grid/storyLayout.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function StoryLayout(props) {
+    return (
+        <div className='p-4'>
+
+        <div className='pt-10 gap-10 flex flex-wrap items-center justify-center'>
+            {React.Children.map(props.children, (child) => (
+                <div className='p-10 border border-neutral-200 rounded-2xl'>
+                    <div className='shadow-xl  bg-neutral-0 rounded-3xl'>
+
+                    {child}
+                    </div>
+                </div>
+            ))}
+        </div>
+            </div>
+    );
+}
+
+export default StoryLayout;

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

@@ -0,0 +1 @@
+export {default as MarketoForm } from './marketo-form';

package/src/HDS/helpers/MarketoForm/marketo-form.js

@@ -0,0 +1,25 @@
+// Referance from here: https://github.com/PaulieScanlon/cockroachdb-custom-marketo-forms-with-react
+import { memo } from 'react'
+import PropTypes from 'prop-types'
+
+import useMarketo from './useMarketo'
+
+// eslint-disable-next-line react/display-name
+const MarketoForm = memo(({ formId, styleClass }) => {
+    useMarketo({
+        formId: formId,
+        callback: () => { }
+    })
+
+    return <form
+        id={`mktoForm_${formId}`}
+        className='mktoForm marketoFormWrapper eventDetailsFormWrapper'
+    ></form>
+})
+
+MarketoForm.propTypes = {
+    /** The Marketo Form Id */
+    formId: PropTypes.string.isRequired
+}
+
+export default MarketoForm;

package/src/HDS/helpers/MarketoForm/useMarketo.js

@@ -0,0 +1,67 @@
+// Referance from here: https://github.com/PaulieScanlon/cockroachdb-custom-marketo-forms-with-react
+
+import { useState, useEffect } from 'react'
+
+const useMarketo = ({ formId, callback }) => {
+    const [scriptAdded, setScriptAdded] = useState(false)
+    const [formLoaded, setFormLoaded] = useState(false)
+
+    useEffect(() => {
+        if (scriptAdded) {
+            if (!formLoaded) {
+                // eslint-disable-next-line no-undef
+                MktoForms2.loadForm(
+                    "//page.hasura.io",
+                    "631-HMN-492",
+                    formId,
+                    callback
+                )
+                // console.log(formId);
+                // MktoForms2.whenRendered((form) => {
+                //   const formElement = form.getFormElem()[0]
+                //   const formElementId = form.getFormElem()[0].id.split('_')[1]
+
+                //   /** Remove the style attribute and make for, and id attributes unique */
+                //   Array.from(formElement.querySelectorAll('[style]'))
+                //     .concat(formElement)
+                //     .forEach((element) => {
+                //       element.removeAttribute('style')
+                //       if (element.hasAttribute('id') && element.tagName !== 'FORM') {
+                //         element.setAttribute('id', `${element.getAttribute('id')}_${formElementId}`)
+                //       }
+
+                //       if (element.tagName === 'LABEL') {
+                //         element.setAttribute('for', `${element.getAttribute('for')}_${formElementId}`)
+                //       }
+                //     })
+
+                //   /** Remove <span /> from DOM */
+                //   Array.from(formElement.querySelectorAll('.mktoInstruction')).forEach((element) => {
+                //     element.remove()
+                //   })
+
+                //   /** Remove <style /> from DOM */
+                //   Array.from(formElement.children).forEach((element) => {
+                //     if (element.type && element.type === 'text/css') {
+                //       element.remove()
+                //     }
+                //   })
+                // })
+                setFormLoaded(true)
+            }
+        } else {
+            if (false) {
+                setScriptAdded(true)
+            } else {
+                const script = document.createElement('script')
+                script.defer = true
+                script.onload = () => (window?.MktoForms2 ? setScriptAdded(true) : null)
+                script.src = `//page.hasura.io/js/forms2/js/forms2.min.js`
+                document.head.appendChild(script)
+            }
+        }
+    }, [scriptAdded])
+}
+
+export default useMarketo;
+

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

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

package/src/HDS/helpers/Media/mediabox.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Icon } from '../../components/common-components/Icon';
+
+export default function MediaViewer ({ img_url, video_url, video_poster, width }){
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleVideoClose = () => {
+    setIsVideoPlaying(false);
+  };
+
+  return (
+    <div>
+      {img_url && (
+        <div className='flex justify-center'>
+        <img src={img_url} alt="Image" className='rounded-2xl' onClick={handleVideoClick} />
+        </div>
+      )}
+
+      {video_url && !img_url && video_poster && (
+        <div>
+          {!isVideoPlaying ? (
+            <div className='relative flex justify-center'>
+              <div className='flex items-center'>
+                
+               <a
+                  className=" left-[45%] z-10 cursor-pointer absolute w-12 h-12  flex justify-center items-center rounded-full border border-neutral-0"
+                  onClick={() => {
+                    setIsVideoPlaying(true);
+                  }}
+                >
+                  
+                  <Icon variant='play' height='h-6 w-6' strokeClass='stroke-neutral-0' />
+                </a>
+                </div>
+                <div>
+              <img
+                src={video_poster}
+                alt="Video Poster"
+                onClick={handleVideoClick}
+                className="cursor-pointer rounded-2xl"
+              />
+              </div>
+            </div>
+          ) : (
+            <div className="fixed inset-0 flex justify-center items-center z-50">
+              <div className="relative w-screen h-screen flex items-start p-10">
+                <a
+                  className=" z-10 cursor-pointer left-14 top-2 relative w-12 h-12 bg-neutral-0 flex justify-center items-center rounded-full"
+                  onClick={handleVideoClose}
+                >
+                  <Icon variant='xclose' height='h-6 w-6' strokeClass='stroke-neutral-800' />
+                </a>
+                <video
+                  controls={false}
+                  autoPlay
+                  className="object-contain max-w-full max-h-full"
+                >
+                  <source src={video_url} type="video/mp4" />
+                </video>
+
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+

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

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