hds-web 1.33.2 → 1.33.3

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

@@ -0,0 +1,107 @@
+import React from "react";
+import { useState, useEffect, useRef } from "react";
+// import { useRouter } from 'next/router'
+import { GetUtmCookie } from "./utils";
+import { Typography } from "../../foundation/Typography";
+
+export default function Paperform(
+  { 
+    formId, 
+    onSubmitCB, 
+    styleClass, 
+    hasuraConRegSuccessUrl 
+  },
+  props
+) 
+{
+  const isBrowser = typeof window !== "undefined";
+  const [isLoaded, setIsLoaded] = useState(false);
+  const embedDivRef = useRef(null);
+  // const router = useRouter();
+  useEffect(() => {
+    const existingEmbed = document.getElementById("paperform_embed");
+
+    if (existingEmbed) {
+      setIsLoaded(true);
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = "paperform_embed";
+    script.src = "https://forms.hasura.io/__embed.min.js";
+    script.onreadystatechange = () => {
+      if (this.readyState === "complete" || this.readyState === "loaded") {
+        setIsLoaded(true);
+      }
+    };
+    script.onload = () => setIsLoaded(true);
+    document.body.prepend(script);
+
+    return () => script.remove();
+  }, []);
+
+  function handleFormSubmit({ detail }) {
+    const { form_id, data } = detail;
+
+    const email = data.find((d) => d.type === "email")?.value;
+
+    if (!!email) {
+      if (isBrowser) {
+        window?.analytics?.identify(email, {
+          email,
+          identifiedBy: `Paperform ${form_id} Submitted`,
+          // ...nameTraits,
+        });
+      }
+    }
+    if (isBrowser) {
+      window?.analytics?.track("form submit", {
+        data,
+        category: "website",
+        label: `Paperform ${form_id} Submitted`,
+        action: "form submit",
+      });
+    }
+
+    typeof onSubmitCB === "function" && onSubmitCB(detail);
+    window.location.reload(`${window.location.pathname}?aliId=success_submit`);
+  }
+
+  useEffect(() => {
+    const refCurrValue = embedDivRef.current;
+    const utm_cookies = GetUtmCookie();
+    isBrowser &&
+      refCurrValue?.setAttribute(
+        "data-prefill",
+        `utm_landing-page=${window.location.pathname}&utm_search=${window.location.search}&utm_campaign=${utm_cookies.utm_campaign}&utm_medium=${utm_cookies.utm_medium}&utm_source=${utm_cookies.utm_source}&utm_content=${utm_cookies.utm_content}`
+      );
+
+    refCurrValue?.addEventListener("PaperformSubmission", handleFormSubmit);
+
+    return () =>
+      refCurrValue?.removeEventListener(
+        "PaperformSubmission",
+        handleFormSubmit
+      );
+  }, []);
+  return (
+    <div className={styleClass}>
+      {!isLoaded && (
+        <Typography
+          textStyle="h5"
+          as="h5"
+          className="text-neutral-800 font-medium py-8 tb:py-12"
+        >
+          Loading...
+        </Typography>
+      )}
+      <div
+        data-prefill-inherit="1"
+        data-no-scroll="1"
+        ref={embedDivRef}
+        id={formId}
+        data-paperform-id={formId}
+        data-spinner="1"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { default as GetUtmCookie } from './readcookie'

package/src/HDS/helpers/Paperform/utils/readcookie.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+const readCookie = name => {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(";");
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) === " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+  return "";
+};
+
+const GetUtmCookie = () => {
+  const utm_campaign = readCookie("utm_campaign");
+  const utm_medium = readCookie("utm_medium");
+  const utm_source = readCookie("utm_source");
+  const utm_content = readCookie("utm_content");
+    return {
+      utm_campaign,
+      utm_medium,
+      utm_source,
+      utm_content,
+    };
+};
+
+
+export default GetUtmCookie;

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

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

package/src/HDS/helpers/Time/time.js

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+
+const TimeComponent = ({ format, countdownTime }) => {
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const formatTime = () => {
+    switch (format) {
+      case 'MM/dd/yyyy hh:mm:ss tt':
+        return currentTime.toLocaleString('en-US', {
+          month: '2-digit',
+          day: '2-digit',
+          year: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
+          hour12: true,
+        });
+      case 'yyyy-mm-dd hh:mm:ss':
+        return currentTime.toLocaleString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
+        }).replace(/,/g, '');
+      case 'yyyy-mm-dd HH:MM:SS tt':
+        return currentTime.toLocaleString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: 'numeric',
+          minute: 'numeric',
+          second: 'numeric',
+          hour12: false,
+        });
+      case 'm/d/yyyy':
+        return currentTime.toLocaleString('en-US', {
+          month: 'numeric',
+          day: 'numeric',
+          year: 'numeric',
+        });
+      case 'yyyy-mm-dd':
+        return currentTime.toLocaleString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        });
+      default:
+        return currentTime.toLocaleString();
+    }
+  };
+
+  const countdown = () => {
+    if (!countdownTime) {
+      return null;
+    }
+
+    const remainingTime = countdownTime - currentTime;
+
+    if (remainingTime <= 0) {
+      return <div>Time's up!</div>;
+    }
+
+    const seconds = Math.floor(remainingTime / 1000) % 60;
+    const minutes = Math.floor(remainingTime / 1000 / 60) % 60;
+    const hours = Math.floor(remainingTime / 1000 / 60 / 60) % 24;
+    const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);
+
+    return (
+      <div>
+        <div>{days} days</div>
+        <div>
+          {hours.toString().padStart(2, '0')}:
+          {minutes.toString().padStart(2, '0')}:
+          {seconds.toString().padStart(2, '0')}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div>{formatTime()}</div>
+      {countdown()}
+    </div>
+  );
+};
+
+export default TimeComponent;

package/src/HDS/helpers/Translations/en-translations.js

@@ -0,0 +1,8 @@
+const enTranslations = {
+    'GREETING': 'Hello!',
+    'GOODBYE': 'Goodbye!',
+    // Add more translations for English language here...
+  };
+  
+  export default enTranslations;
+  

package/src/HDS/helpers/Translations/es-translations.js

@@ -0,0 +1,8 @@
+const esTranslations = {
+    'GREETING': '¡Hola!',
+    'GOODBYE': '¡Adiós!',
+    // Add more translations for Spanish language here...
+  };
+  
+  export default esTranslations;
+  

package/src/HDS/helpers/Translations/fr-translations.js

@@ -0,0 +1,8 @@
+const frTranslations = {
+    'GREETING': 'Bonjour!',
+    'GOODBYE': 'Au revoir!',
+    // Add more translations for French language here...
+  };
+  
+  export default frTranslations;
+  

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

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

package/src/HDS/helpers/Translations/translations.js

@@ -0,0 +1,12 @@
+import enTranslations from './en-translations';
+import frTranslations from './fr-translations';
+import esTranslations from './es-translations';
+
+const translations = {
+  en: enTranslations,
+  fr: frTranslations,
+  es: esTranslations,
+  // Add more language translations here...
+};
+
+export default translations;

package/src/HDS/helpers/index.js

@@ -0,0 +1,7 @@
+export * from './Translations';
+export * from './Media';
+export * from './Effects';
+export * from './AlgoliaSearch';
+export * from './Paperform';
+export * from './MarketoForm';
+export * from './Algorithms';

package/src/HDS/index.js

@@ -0,0 +1,4 @@
+export * from './foundation';
+export * from './helpers';
+export * from './components';
+export * from './modules';

package/src/HDS/modules/Cards/aboutSection.js

@@ -0,0 +1,136 @@
+import React from "react";
+import { Badges } from '../../components/BadgesCaption'
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from '../../components/Buttons';
+import { Icon } from "../../components/common-components";
+export default function AboutSection(props) {
+    return (
+        <>
+            <div className="divide-y divide-neutral-200">
+                <div className=" pb-8">
+                    <div>
+                        {/* <div className=" w-14 h-14 relative rounded-full border border-neutral-300 ">
+                            <img alt={props.title ?? 'connectorImage'} src={props.imgUrl} className="rounded-full w-full " />
+                            {props.is_verified  && <div className="absolute top-8 left-10">
+                                <Icon
+                                    height={'h-5 w-5 stroke-[1.5px]'}
+                                    variant='verifiedBlue'
+
+                                />
+                            </div>
+                            }
+                        </div> */}
+                        {props.imgUrl &&  <div className="flex">
+                            <img alt={props.title ?? 'connectorImage'} src={props.imgUrl} className=" max-h-[25px] " />
+                        </div>}
+
+                        {props.tags &&
+                            <div className="gap-2 pt-8 flex flex-wrap">
+                                {props.tags.map((tag, index) => (
+                                    <Badges
+                                        key={index}
+                                        color={tag.color}
+                                        children={tag.label}
+                                    />
+                                ))}
+                            </div>
+                        }
+                    </div>
+                    <div>
+                        {props.title && <div className='pt-4 text-hds-t-h3 text-neutral-1000'>{props.title}</div>}
+                        {props.description && <Typography textStyle='sub2' className='pt-2 text-neutral-500'>{props.description}</Typography>}
+                    </div>
+                    {props.btnLink && <a href={props.btnLink} className='mt-4 flex' >
+                        <HDSButton
+                            type="secondary"
+                            label={props.btnLabel ?? 'Deployment guide'}
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow='true'
+                            rightAnimatedArrowColor='#3970FD'
+                        />
+                    </a>}
+
+                </div>
+                <div className="py-8 ">
+                    <Typography textStyle='h6' className='text-neutral-500 uppercase'>{props.aboutTitle ?? 'About'}</Typography>
+                    <div className="pt-4 flex flex-col gap-2">
+                        {props.versionValue && <div className="flex gap-2">
+                            <Typography textStyle='body1-medium' className='text-neutral-500'>{props.version ?? 'Version'}</Typography>
+                            <Badges
+                                color='blue'
+                                children={props.versionValue}
+                            // text_color='text-neutral-0'
+                            />
+                        </div>}
+                        {props.typeValue && <div className="flex gap-2 items-center">
+                            <Typography textStyle='body1-medium' className='text-neutral-500'>{props.typeText ?? 'Type'}</Typography>
+                            <Icon
+                                height={'h-5 w-5 stroke-[1.5px]'}
+                                variant={props.typeIconVariant}
+                                strokeClass='stroke-neutral-800'
+                            />
+                            <Typography textStyle='body1c-medium' className='text-neutral-800'>{props.typeValue}</Typography>
+
+                        </div>}
+                        {props.releasedValue && <div className="flex gap-2">
+                            <Typography textStyle='body1-medium' className='text-neutral-500'>{props.releasedText ?? 'Released'}</Typography>
+                            <Typography textStyle='body1-medium' className='text-neutral-800'>{props.releasedValue}</Typography>
+                        </div>}
+                        {props.lastUpdateValue && <div className="flex gap-2">
+                            <Typography textStyle='body1-medium' className='text-neutral-500'>{props.lastUpdatedText ?? 'Last Updated'}</Typography>
+                            <Typography textStyle='body1-medium' className='text-neutral-800'>{props.lastUpdateValue}</Typography>
+                        </div>}
+                        {props.deployed && <div className="flex gap-2">
+                            <Typography textStyle='body1-medium' className='text-neutral-500'>{props.deployed ?? 'Deployed'}</Typography>
+                            <Typography textStyle='body1-medium' className='text-neutral-800'>{props.deployedValue}</Typography>
+                        </div>}
+                        {props.githubRepoLink && 
+                        <a href={props.githubRepoLink} className="flex gap-2 items-center">
+                            <Icon
+                                height={'h-6 w-6 stroke-[1.5px]'}
+                                variant='octoface'
+
+                            />
+                            <Typography
+                                textStyle='body1-medium'
+                                className='text-blue-600'
+                            >
+                                {props.githubText ?? 'Github Repo'}
+                            </Typography>
+                            <Icon
+                                height={'h-5 w-5 stroke-[1.5px]'}
+                                variant='linkexternal01'
+                                strokeClass='stroke-blue-600'
+                            />
+                        </a>}
+                    </div>
+
+                </div>
+                <div className="py-8">
+                    <Typography textStyle='h6' className='text-neutral-500 uppercase'>{props.creator ?? 'Creator'}</Typography>
+                    {props.hasuraIncUrl && <a href={props.hasuraIncUrl} className="flex gap-2 items-center pt-4">
+
+                        <Typography
+                            textStyle='body1-medium'
+                            className='text-blue-600'
+                        >
+                            {props.hasuraInc ?? 'Hasura, Inc'}
+                        </Typography>
+                        <Icon
+                            height={'h-5 w-5 stroke-[1.5px]'}
+                            variant='linkexternal01'
+                            strokeClass='stroke-blue-600'
+                        />
+                    </a>}
+                    {props.Email && <Typography
+                        textStyle='body1-medium'
+                        className='text-neutral-500 pt-2'
+                    >
+                        {props.Email ?? 'support@hasura.io'}
+                    </Typography>}
+                </div>
+            </div>
+        </>
+    )
+}

package/src/HDS/modules/Cards/dataSourceCard.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { Typography } from '../../foundation/Typography'
+import { HDSButton } from '../../components/Buttons';
+
+export default function DataSourcesCard(props) {
+    return (
+        <>
+
+            <div className="flex flex-col-reverse px-6 py-10 db:px-0 db:py-0 db:flex-row db:gap-[132px]">
+
+                <div className="flex flex-col db:pl-20 db:pt-20 db:pb-[74px]">
+                    {
+                        props.tagline && (
+                            <Typography textStyle='h6' className='text-blue-400 db:block uppercase mb-2 hidden '>{props.tagline}</Typography>
+                        )
+                    }
+                    {props.title && props.description
+                        && (<div className="flex flex-col gap-4">
+                            <Typography textStyle='h3' className='text-neutral-1000 db:block hidden'>{props.title}</Typography>
+                            <Typography textStyle='sub2' className='text-neutral-600 db:mt-0 mt-4 '>{props.description}</Typography>
+                        </div>)}
+                    {props.CTA &&
+                        <div className="mt-4 tb:mt-6 flex">
+                            <a href={props.CTA['url']}>
+                                <HDSButton
+                                    label={props.CTA['text']}
+                                    type={props.CTA['type'] || 'secondary'}
+                                    size='md'
+                                    rightAnimatedArrowColor="#3970FD"
+                                />
+                            </a>
+                        </div>}
+                </div>
+                {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] db:min-w-[550px]">
+                    <video
+                        autoPlay
+                        loop
+                        playsInline
+                        muted
+                        src={props.video_url}
+                        className=" rounded-xl db:rounded-none db:rounded-br-3xl db:rounded-tl-3xl"
+                    />
+                </div>}
+
+                <div className="db:hidden pb-2">
+                    <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
+                </div>
+                {
+                    props.tagline && (
+                        <Typography textStyle='h6' className='text-blue-400 db:hidden uppercase'>{props.tagline}</Typography>
+                    )
+                }
+            </div>
+
+        </>
+    )
+}
+
+DataSourcesCard.defaultProps = {
+    title: '100+ Data Sources',
+    description: 'description1',
+    CTA: {
+        text: 'Button Label',
+    },
+    video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
+} 

package/src/HDS/modules/Cards/index.js

@@ -0,0 +1,2 @@
+export { default as DataSourcesCard } from './dataSourceCard';
+export { default as AboutSectionCard } from './aboutSection';

package/src/HDS/modules/Events/eventListingCard.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { Icon } from '../../components/common-components/Icon';
+import { Badges } from "../../components/BadgesCaption";
+import {LiveStatus} from "../../components/BadgesCaption";
+
+export default function EventListingCard(props) {
+  return (
+    <div className="group/eventListing rounded-3xl transition-all duration-300">
+      <div className="self-start rounded-t-3xl">
+        {
+          props.eventListingImg && (
+            <div className="relative">
+              <div>
+                <img src={props.eventListingImg} alt={props.title} className={` rounded-t-3xl h-[179px] object-cover ${props.imgBG}`} loading="lazy" />
+                {props.imgTagText && <div className=" scale-75 absolute top-2 -right-1">
+                  <LiveStatus
+                    statusCircleBgClass={props.circleBG ?? 'bg-red-400'}
+                    statusTextClass='text-neutral-900'
+                    bgClass='bg-neutral-0'
+                    statusText={props.imgTagText ?? 'Concluded'}
+                  />
+                </div>}
+              </div>
+
+            </div>
+          )
+
+        }
+      </div>
+      <div className="border border-neutral-200 group-hover/eventListing:border-opacity-0 transition-all duration-300 rounded-b-3xl">
+        <div className="p-6 pb-0">
+          {props.eventType &&
+            <Badges
+              color={props.badgeColor ?? 'green'}
+              children={props.eventType}
+            />
+          }
+          {
+            props.title && (
+              <div className="text-neutral-1000 text-hds-m-h5 tb:text-hds-t-h5  py-2">{props.title}</div>
+            )
+          }
+
+        </div>
+
+        {
+          props.eventDate && (
+            <Typography textStyle="body3-medium" className="text-neutral-700 flex items-center duration-300 self-end p-6 pt-0">
+              {props.eventDate}
+              <div>
+
+                <Icon className='z-10 stroke-2 group-hover/eventListing:translate-x-[0.15rem] group-hover/eventListing:transition-all group-hover/eventListing:duration-300' height={`h-5 w-5`} variant={'chevronright'} strokeClass='stroke-neutral-500' />
+
+                <Icon className='invisible stroke-2 group-hover/eventListing:transition-all group-hover/eventListing:delay-100 group-hover/eventListing:visible ' height={`h-5 w-5 -mt-5`} variant='minus01' strokeClass='stroke-neutral-500' />
+              </div>
+            </Typography>
+          )
+        }
+      </div>
+    </div>
+  )
+}

package/src/HDS/modules/Events/eventsAgenda.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+// import { HDSColor } from "../../foundation/ColorPalette";
+import { Icon } from '../../components/common-components/Icon';
+import ReactMarkdown from "react-markdown";
+
+export default function EventAgenda(props) {
+  // const titleColor = HDSColor(props.title_color);
+
+  return (
+    <>
+      {
+        props.tagline && (
+          <Typography textStyle="body1-medium" className="flex items-center text-neutral-700 pb-4">
+            {props.tagIcon && <Icon height={'h-6 w-6 stroke-[1.5px] mr-2'} variant={props.tagIcon} strokeClass="stroke-neutral-700" />}
+            {props.tagline}
+          </Typography>
+        )
+      }
+      {
+        props.agendaTitle && (
+          <Typography textStyle="h3" as="h3" className="text-neutral-1000 pb-4">
+            {props.agendaTitle}
+          </Typography>
+        )
+      }
+      {
+        props.agendaList && props.agendaList.map((list, index) => (
+          <div key={index} className={((index === 0) ? "" : "pt-4")}>
+            {
+              list.title && (
+                <Typography textStyle="h5" as="h5" className="text-neutral-700 pb-1">
+                  {list.title}
+                </Typography>
+              )
+            }
+            {
+              list.description && (
+                <Typography textStyle="body1" className="text-neutral-700 [&>p]:pb-1 [&>p>img]:mt-4 [&>p>img]:max-w-[420px] [&>p>img]:w-full [&>p>img:nth-child(2)]:max-w-[140px] last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800">
+                  <ReactMarkdown>{list.description}</ReactMarkdown>
+                </Typography>
+              )
+            }
+          </div>
+        ))
+      }
+      {
+        props.closingNotes && (
+          <Typography textStyle="body1" className="text-neutral-700 pt-4 [&>p]:pb-4 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800">
+            <ReactMarkdown>{props.closingNotes}</ReactMarkdown>
+          </Typography>
+        )
+      }
+    </>
+  )
+}

package/src/HDS/modules/Events/index.js

@@ -0,0 +1,2 @@
+export { default as EventsAgenda } from './eventsAgenda';
+export { default as EventListingCard } from "./eventListingCard";