Merge branch 'buildPostTest' of https://github.com/vishvamsinh28/website

 into buildPostTest

.all-contributorsrc

@@ -555,6 +555,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "raj17ce",
+      "name": "Raj Patel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/116947399?v=4",
+      "profile": "https://github.com/raj17ce",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -395,6 +395,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Shiva953"><img src="https://avatars.githubusercontent.com/u/120790871?v=4?s=100" width="100px;" alt="Neutron"/><br /><sub><b>Neutron</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=Shiva953" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/sagarkori143"><img src="https://avatars.githubusercontent.com/u/129517558?v=4?s=100" width="100px;" alt="Sagar Kori"/><br /><sub><b>Sagar Kori</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=sagarkori143" title="Documentation">📖</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/raj17ce"><img src="https://avatars.githubusercontent.com/u/116947399?v=4?s=100" width="100px;" alt="Raj Patel"/><br /><sub><b>Raj Patel</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=raj17ce" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

components/AlgoliaSearch.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 export const INDEX_NAME = 'asyncapi';
@@ -283,6 +283,7 @@ export default function AlgoliaSearch({ children }: { children: React.ReactNode
  */
 export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISearchButtonProps) {
   const { onOpen, onInput } = useContext(SearchContext);
+  const [Children, setChildren] = useState<string | React.ReactNode>('');
   const searchButtonRef = useRef<HTMLButtonElement>(null);
   const actionKey = getActionKey();
 
@@ -308,6 +309,12 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe
     };
   }, [onInput, searchButtonRef]);
 
+  useEffect(() => {
+    if (typeof children === 'function') {
+      setChildren(children({ actionKey }));
+    }
+  }, []);
+
   return (
     <button
       type='button'
@@ -318,7 +325,7 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe
       {...props}
       data-testid='Search-Button'
     >
-      {typeof children === 'function' ? children({ actionKey }) : children}
+      {Children}
     </button>
   );
 }

components/Avatar.tsx

@@ -32,9 +32,17 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) {
   );
 
   return link ? (
-    <a href={link} data-testid='Avatars-link'>
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+
+        window.open(link, '_blank');
+      }}
+      data-testid='Avatars-link'
+      className='cursor-pointer border-none bg-inherit p-0'
+    >
       {avatar}
-    </a>
+    </button>
   ) : (
     <React.Fragment>{avatar}</React.Fragment>
   );

components/Calendar.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { IEvent } from '@/types/event';

components/CaseStudyCard.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ICaseStudies } from '@/types/post';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/CaseTOC.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { useHeadingsObserver } from './helpers/useHeadingsObserver';

components/ClickableLogo.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 
 import AsyncAPILogo from './logos/AsyncAPILogo';
 

components/DemoAnimation.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Typing from 'react-typist-component';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';

components/Feedback.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import GitHubIssue from './buttons/GitHubIssue';
 

components/Figure.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Float } from '@/types/components/FigurePropsType';
 
 import Caption from './Caption';

components/FinancialSummary/AsyncAPISummary.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/FinancialSummary/Card.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { ExpenseItem, Expenses } from '@/types/FinancialSummary/BarChartComponent';
 
 import ExpensesLinkData from '../../config/finance/json-data/ExpensesLink.json';

components/FinancialSummary/ContactUs.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/FinancialSummary/CustomTooltip.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { CustomTooltipProps } from '@/types/FinancialSummary/BarChartComponent';
 
 /**

components/FinancialSummary/ExpenseBreakdown.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import { expenseData } from '../data/ExpenseBreakdownData';

components/FinancialSummary/ExpensesCard.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Expenses } from '@/types/FinancialSummary/BarChartComponent';
 
 import ExpensesData from '../../config/finance/json-data/Expenses.json';

components/FinancialSummary/OtherFormsComponent.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import { otherFormsData } from '../data/otherFormsData';

components/FinancialSummary/SponsorshipTiers.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/FinancialSummary/SuccessStories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { successStories } from '../data/successStoriesData';
 
 /**

components/GeneratorInstallation.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/Hero.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/InlineHelp.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { registerClickAway } from './helpers/click-away';
 import QuestionMark from './icons/QuestionMark';

components/InputBox.stories.tsx

@@ -1,5 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
 import { InputTypes } from '@/types/components/InputBoxPropsType';

components/Loader.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon';
 import IconCircularLoader from '@/components/icons/CircularLoader';

components/Loader.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import AsyncAPIColorIcon from './icons/AsyncAPIColorIcon';
+
 interface LoaderProps {
   // eslint-disable-next-line prettier/prettier
 
@@ -25,7 +27,7 @@ interface LoaderProps {
  */
 export default function Loader({
   loaderText = '',
-  loaderIcon = null,
+  loaderIcon = <AsyncAPIColorIcon alt='Loading...' />,
   className = '',
   dark = false,
   pulsating = false

components/MDX/MDX.tsx

@@ -1,7 +1,7 @@
 import { MDXProvider as CoreMDXProvider } from '@mdx-js/react';
 import mermaid from 'mermaid';
 import Link from 'next/link';
-import { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import {
   TwitterDMButton,
   TwitterFollowButton,

components/MacWindow.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface IMacWindowProps {
   className?: string;
   contentClassName?: string;

components/Meeting.tsx

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from '@heroicons/react/outline';
+import React from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 

components/Modal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface IModalProps {
   title: string;

components/NewsletterSubscribe.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import IconCircularLoader from '@/components/icons/CircularLoader';
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';

components/Profiles.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 type Profile = {
   name: string;
   link: string;

components/Remember.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import LightBulb from './icons/LightBulb';
 
 interface RememberProps {

components/SupportUs/SupportUs.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { items } from './SupportItemsList';
 
 interface SupportUsProps {

components/TOC.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Scrollspy from 'react-scrollspy';
 import { twMerge } from 'tailwind-merge';
 

components/Testimonial.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import IconQuote from './icons/Quote';
 import Paragraph from './typography/Paragraph';
 

components/Warning.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import IconExclamation from './icons/Exclamation';
 
 interface WarningProps {

components/buttons/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { ButtonIconPosition, ButtonSize, ButtonType } from '@/types/components/buttons/ButtonPropsType';
 

components/buttons/Button.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ButtonIconPosition, ButtonSize, ButtonType } from '@/types/components/buttons/ButtonPropsType';

components/buttons/ChapterSuggestion.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { HTMLAttributeAnchorTarget } from 'react';
+import React from 'react';
 import type { Url } from 'url';
 
 import IconArrowRight from '../icons/ArrowRight';

components/buttons/ChapterSuggestions.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { IChapterSuggestionProps } from './ChapterSuggestion';
 import ChapterSuggestion from './ChapterSuggestion';
 

components/buttons/DocsButton.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import React from 'react';
 
 import type { IDocs } from '@/types/post';
 

components/buttons/GithubButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition, ButtonSize } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';

components/buttons/GoogleCalendarButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';

components/buttons/ICSFileButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';

components/buttons/OpenInStudioButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import IconRocket from '../icons/Rocket';
 import Button from './Button';
 

components/buttons/SlackButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';

components/buttons/SubscribeButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';

components/buttons/YoutubeButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';

components/campaigns/AnnouncementHero.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import ArrowLeft from '../icons/ArrowLeft';
 import ArrowRight from '../icons/ArrowRight';

components/community/Hero.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import orbitData from '../../config/orbitData.json';
 import Header from './Header';
 

components/dashboard/Button.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface ButtonProps {
   text: string;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

components/dashboard/GoodFirstIssues.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import type { Issue } from '@/types/components/dashboard/TableTypes';