hds-web 1.0.0 → 1.0.1

package/src/HDS/components/Snippet/CodeSnippet.js

@@ -1,70 +1,70 @@
-// import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-javascript';
 
-// import Prism from 'prismjs';
-// import 'prismjs/themes/prism.css';
-// import 'prismjs/components/prism-javascript';
+function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
 
-// function CodeSnippetWithCopy({ snippet, filename, backgroundColor }) {
-
-//   if(!snippet){
-//     snippet='as'
-//   }
+  if(!snippet){
+    snippet='as'
+  }
  
-//   const [isCopied, setIsCopied] = useState(false);
-//   const preRef = useRef(null);
+  const [isCopied, setIsCopied] = useState(false);
+  const preRef = useRef(null);
 
-//   async function copyToClipboard() {
-//     try {
-//       await navigator.clipboard.writeText(snippet);
-//       setIsCopied(true);
-//       setTimeout(() => setIsCopied(false), 1500);
-//     } catch (error) {
-//       console.error('Failed to copy to clipboard', error);
-//     }
-//   }
+  async function copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(snippet);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 1500);
+    } catch (error) {
+      console.error('Failed to copy to clipboard', error);
+    }
+  }
 
   
-//   useEffect(() => {
-//     console.log(snippet)
-//     if (preRef.current ) {
-//       Prism.highlightAll();
-//     }
-//   }, [snippet, preRef.current]);
+  useEffect(() => {
+    console.log(snippet)
+    if (preRef.current ) {
+      Prism.highlightAll();
+    }
+  }, [snippet, preRef.current]);
 
 
-//   const lines = snippet.split('\n');
-//   const lineCount = lines.length;
-//   if(snippet){}
-//   return (
-//     <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
-//       {filename ? (
-//         <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
-//       ) : null}
+  const lines = snippet.split('\n');
+  const lineCount = lines.length;
+  if(snippet){}
+  return (
+    <div className={`${backgroundColor}  border border-neutral-100 rounded relative`}>
+      {filename ? (
+        <span className='bg-neutral-100 flex p-2 text-sm-medium text-neutral-900'>{filename}</span>
+      ) : null}
 
-//       <div className='my-6 mx-10'>
-//         <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
-//           {lines.map((line, index) => (
-//             <code className='language-javascript' key={index}>
-//               <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
-//               {line}
-//               {index < lineCount - 1 ? '\n' : null}
-//             </code>
-//           ))}
-//         </pre>
+      <div className='my-6 mx-10'>
+        <pre style={{ whiteSpace: 'pre-wrap' }} ref={preRef} className='line-numbers'>
+          {lines.map((line, index) => (
+            <code className='language-javascript' key={index}>
+              <span className='text-sm text-neutral-500 mr-4'>{index + 1}  </span>
+              {line}
+              {index < lineCount - 1 ? '\n' : null}
+            </code>
+          ))}
+        </pre>
 
-//         <button
-//           className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
-//           onClick={copyToClipboard}
-//         >
-//           {isCopied ? 'Copied!' : 'Copy to Clipboard'}
-//         </button>
-//       </div>
-//     </div>
-//   );
-// }
+        <button
+          className='border border-neutral-400 button-sm absolute bottom-0 right-0 mb-4 mr-4'
+          onClick={copyToClipboard}
+        >
+          {isCopied ? 'Copied!' : 'Copy to Clipboard'}
+        </button>
+      </div>
+    </div>
+  );
+}
 
-// // CodeSnippetWithCopy.propTypes = {
-// //   snippet: PropTypes.string.isRequired,
-// // };
+// CodeSnippetWithCopy.propTypes = {
+//   snippet: PropTypes.string.isRequired,
+// };
 
-// export default CodeSnippetWithCopy;
+export default CodeSnippetWithCopy;

package/src/HDS/components/Snippet/index.js

@@ -1 +1 @@
-// export {default as CodeSnippet} from './CodeSnippet';
+export {default as CodeSnippet} from './CodeSnippet';

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {ReactComponent as HasuraPrimaryIcon } from "../../../assets/icons/HasuraPrimary.svg"
 import {ReactComponent as ClockrewindIcon } from "../../../assets/icons/clock-rewind.svg"
 import {ReactComponent as PassportIcon } from "../../../assets/icons/passport.svg"
 import {ReactComponent as Compass02Icon } from "../../../assets/icons/compass-02.svg"
@@ -1175,6 +1176,7 @@ import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg
 import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
+    hasuraPrimary: HasuraPrimaryIcon,
     hasura: HasuraIcon,
     minus01: Minus01Icon,
     clockrewind: ClockrewindIcon,

package/src/HDS/components/index.js

@@ -10,4 +10,5 @@ export * from './common-components';
 export * from './InputFields';
 export * from './Snippet';
 export * from './Tabs';
-export * from './Tooltip';
+export * from './Tooltip';
+export * from './Hero';

package/src/HDS/foundation/Animations/featureCard.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useRef, useEffect } from "react";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import PropTypes from 'prop-types';
+
+export default function FeatureCard(props) {
+  const [cardHeight, setCardHeight] = useState('auto');
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+    // Calculate the max height among all cards
+    const cards = wrapperRef.current.querySelectorAll(".feature-card");
+    if (!cards) return;
+    const heights = Array.from(cards).map((card) => card.clientHeight);
+    const maxHeight = Math.max(...heights);
+
+    // Set the max height as a CSS variable
+    setCardHeight(`${maxHeight}px`);
+    }
+  }, [props.featureCards]);
+
+  return (
+    <div ref={wrapperRef}  className="relative card-animation-wrapper   max-h-[26.25] max-w-[15rem] tb:max-w-[25rem] tb:max-h-[25.25rem]">
+      {props.featureCards.map((feature, index) => (
+        <div
+          key={index}
+          style={{ height: cardHeight }} 
+          className={
+            "feature-card max-w-[18rem] tb:max-w-[21rem] rounded-3xl absolute top-0 left-0 " +
+            (feature.card_bg_color || "")
+          }
+        >
+          <div className="flex justify-center px-6 pt-6 tb:px-8 tb:pt-8  ">
+            <img src={feature.img_url} className='rounded-2xl tb:max-w-[17rem]' alt={feature.title} />
+          </div>
+          <div className={`flex flex-col px-6 pb-6 mt-6 tb:mt-8 tb:px-8 tb:pb-8`}>
+            <Typography
+              textStyle="h5"
+              as="h5"
+              className="text-neutral-0"
+            >
+              {feature.title}
+            </Typography>
+            <Typography textStyle="body1c" className="text-neutral-0 mt-1">
+              {feature.description}
+            </Typography>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+FeatureCard.defaultProps ={
+  featureCards : [
+    {
+      img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png',
+      title: 'Feature 1',
+      description: 'With hands-on workshops and learning about new tools, tips and tricks from real-life use cases,  grow your skill set at HasuraCon.',
+      card_bg_color: 'bg-blue-500',
+    },
+    {
+      img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png',
+      title: 'Feature 2',
+      description: 'With hands-on workshops ',
+      card_bg_color: 'bg-red-500',
+    },
+    {
+      img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png',
+      title: 'Feature 3',
+      description: 'With hands-on workshops and learning about new tools, tips and tricks from real-life use cases,  grow your skill set at HasuraCon.',
+      card_bg_color: 'bg-green-500',
+    },
+  ]
+}

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

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

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

@@ -1,95 +1,73 @@
 import React, { useState, useEffect } from 'react';
+import { Typography } from '../../foundation/Typography';
 
-const TimeComponent = ({ format, countdownTime }) => {
+const TimeComponent = ({ dateTimeString, className }) => {
   const [currentTime, setCurrentTime] = useState(new Date());
+  const [userTimeZone, setUserTimeZone] = useState('');
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(new Date());
     }, 1000);
+
+    getUserTimeZone();
+
     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 formatTime = (time, timeZone) => {
+    return time.toLocaleString('en-US', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true,
+      timeZone,
+    });
   };
 
-  const countdown = () => {
-    if (!countdownTime) {
-      return null;
-    }
+  const getUserTimeZone = () => {
+    const getTimeZone = () => {
+      const offset = new Date().getTimezoneOffset();
+      const offsetHours = Math.abs(Math.floor(offset / 60));
+      const offsetMinutes = Math.abs(offset % 60);
+      const sign = offset < 0 ? '+' : '-';
+      return `GMT${sign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes
+        .toString()
+        .padStart(2, '0')}`;
+    };
 
-    const remainingTime = countdownTime - currentTime;
+    setUserTimeZone(getTimeZone());
+  };
 
-    if (remainingTime <= 0) {
-      return <div>Time's up!</div>;
+  const getUserDateTime = () => {
+    if (!dateTimeString) {
+      return null;
     }
 
-    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);
+    const parseDateTime = (dateTimeString) => {
+      const parts = dateTimeString.split('|');
+      const dateString = parts[0].trim();
+      const timeString = parts[1].trim();
+      const [month, day, year] = dateString.split(' ');
+      const [time, timezone] = timeString.split(' ');
+      const [hours, minutes] = time.split(':');
+      const dateTime = new Date(`${month} ${day}, ${year} ${hours}:${minutes}`);
+      return dateTime.toLocaleString('en-US', { timeZone: timezone });
+    };
 
-    return (
-      <div>
-        <div>{days} days</div>
-        <div>
-          {hours.toString().padStart(2, '0')}:
-          {minutes.toString().padStart(2, '0')}:
-          {seconds.toString().padStart(2, '0')}
-        </div>
-      </div>
-    );
+    const userDateTime = parseDateTime(dateTimeString);
+    return userDateTime;
   };
 
   return (
     <div>
-      <div>{formatTime()}</div>
-      {countdown()}
+      <div className={className}>
+        <Typography textStyle='h6'>
+          {getUserDateTime() || formatTime(currentTime, userTimeZone)}
+        </Typography>
+      </div>
     </div>
   );
 };

package/src/index.css

@@ -3,6 +3,160 @@
 @tailwind utilities;
 /* Typography classes */
 
+.card-animation-wrapper {
+    position: relative;
+  }
+  
+  .card-animation-wrapper .feature-card {
+    transition: all;
+  }
+  
+  .card-animation-wrapper .feature-card:first-child {
+    animation: card1 15s infinite;
+  }
+  
+  .card-animation-wrapper .feature-card:nth-child(2) {
+    animation: card2 15s infinite;
+  }
+  
+  .card-animation-wrapper .feature-card:nth-child(3) {
+    animation: card3 15s infinite;
+  }
+  @keyframes card1 {
+    0%   {
+      transform: translate(0, 0);
+      z-index: 3;
+    }
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+    6.66%, 26.64%  {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    66.6%, 100% {
+      transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+
+  @media (max-width: 600px) {
+  @keyframes card1 {
+    0%   {
+      transform: translate(0, 0);
+      z-index: 3;
+    }
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+    6.66%, 26.64%  {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    66.6%, 100% {
+      transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+}
+  @keyframes card2 {
+    0%   {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    6.66%, 26.64%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+  }
+
+  @media (max-width: 600px) {
+  @keyframes card2 {
+    0%   {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    6.66%, 26.64%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+  }
+}
+  @keyframes card3 {
+    0%   {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    6.66%, 26.64%  {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    33.3%, 59.94%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+  }
+  @media (max-width: 600px) {
+  @keyframes card3 {
+    0%   {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    6.66%, 26.64%  {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    33.3%, 59.94%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+  }
+}
+
 .scrollbar-hide::-webkit-scrollbar {
     width: 0;
     height: 0;