fix: missing React imports in multiple JSX/TSX files (#3287)

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/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';
 

components/dashboard/GoodFirstIssuesTip.tsx

@@ -1,5 +1,5 @@
 import { useFloating } from '@floating-ui/react-dom-interactions';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 /**
  * @description A tooltip that appears when the user hovers over the Good First Issues icon.

components/dashboard/Header.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Button from '../buttons/Button';
 import GithubButton from '../buttons/GithubButton';
 import SlackButton from '../buttons/SlackButton';

components/dashboard/table/Filters.tsx

@@ -1,6 +1,6 @@
 import { useFloating } from '@floating-ui/react-dom-interactions';
 import type { RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 

components/dashboard/table/Row.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 
 interface RowProps {

components/dashboard/table/Table.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type { Issue } from '@/types/components/dashboard/TableTypes';
 
 import Row from './Row';

components/docs/Card.tsx

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

components/editor/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Highlight from 'react-syntax-highlighter';
 
 import Caption from '../Caption';

components/faq/FAQ.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Accordion from '@/components/Accordion/Accordion';
 
 import { faqList } from './FAQList';

components/icons/Ambassador.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/ArrowDown.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/ArrowLeft.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/ArrowRight.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/ArrowUp.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/AsyncAPI.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/AsyncAPIColorIcon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface AsyncAPIColorLogoProps {
   // eslint-disable-next-line prettier/prettier
 

components/icons/Calendar.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /* eslint-disable max-len */
 /**
  * @description Icons for asyncapi website

components/icons/CenterMenu.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * @description Icons for asyncapi website
  */