Merge branch 'master' into newcontribguideaaabbbccc

.storybook/AsyncAPIStorybookTheme.ts

@@ -0,0 +1,42 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  // Brand Information
+  brandTitle: 'AsyncAPI Initiative',
+  brandUrl: 'https://www.asyncapi.com/',
+  brandImage: 'img/logos/asyncapi-horizontal-white-logo.svg',
+  brandTarget: '_blank',
+
+  // Typography
+  fontBase: '"Work Sans", sans-serif',
+  fontCode: 'monospace',
+
+
+  // Themes
+  base: 'dark',
+
+  /* -- FULL THEME IS NOT BEING USED DUE TO LACK OF STORYBOOK SUPPORT FOR CUSTOMIZING THE SETTINGS & ACTIONS BAR BG/TEXTCOLOR INDEPENDENTLY. --
+  colorPrimary: '#47BCEE',
+  colorSecondary: '#8851FB',
+
+  // UI
+  appBg: '#1b1130',
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#dfe6ea',
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: '#ffffff',
+  textInverseColor: '#ffffff',
+  textMutedColor: '#5c6870',
+  inputTextColor: '#2e3438',
+
+  // Toolbar
+  barTextColor: '#9E9E9E',
+
+  // Toolbar default and active colors
+  booleanBg: '#dfe6ea',
+  booleanSelectedBg: '#8851FB'
+  */
+});

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import AsyncAPIStorybookTheme from './AsyncAPIStorybookTheme';
+
+addons.setConfig({
+  theme: AsyncAPIStorybookTheme,
+});

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "../styles/globals.css";
 import type { Preview } from "@storybook/react";
+import { themes } from '@storybook/theming';
 import {
   Title,
   Subtitle,
@@ -20,6 +21,7 @@ const preview: Preview = {
       },
     },
     docs: {
+      theme: themes.light,
       toc: {
         title: 'Table of contents',
       },

components/ClickableLogo.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import AsyncAPILogo from './AsyncAPILogo';
+import AsyncAPILogo from './logos/AsyncAPILogo';
 
 interface IClickableLogoProps {
   href?: string;

components/Loader.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon';
+import IconCircularLoader from '@/components/icons/CircularLoader';
+
+import Loader from './Loader';
+
+const meta: Meta<typeof Loader> = {
+  title: 'Components/Loader',
+  component: Loader
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loader>;
+
+const DarkBackgroundDecorator = (Story: any) => (
+  <div style={{ backgroundColor: '#1b1130', padding: '12px' }}>
+    <Story />
+  </div>
+);
+
+export const TextLoader: Story = {
+  args: {
+    loaderText: 'Loading...'
+  }
+};
+
+export const TextLoaderInDark: Story = {
+  decorators: [DarkBackgroundDecorator],
+  args: {
+    loaderText: 'Loading...',
+    dark: true
+  }
+};
+
+export const PulsatingTextLoader: Story = {
+  args: {
+    loaderText: 'Loading...',
+    pulsating: true
+  }
+};
+
+export const PulsatingTextLoaderInDark: Story = {
+  decorators: [DarkBackgroundDecorator],
+  args: {
+    loaderText: 'Loading...',
+    dark: true,
+    pulsating: true
+  }
+};
+
+export const CircularAnimationLoader: Story = {
+  args: {
+    loaderIcon: <IconCircularLoader />
+  }
+};
+
+export const CircularAnimationLoaderInDark: Story = {
+  decorators: [DarkBackgroundDecorator],
+  args: {
+    loaderIcon: <IconCircularLoader dark={true} />,
+    dark: true
+  }
+};
+
+export const PulsatingIconLoader: Story = {
+  args: {
+    loaderIcon: <AsyncAPIColorIcon alt='Loading...' />,
+    pulsating: true
+  }
+};
+
+export const PulsatingIconLoaderInDark: Story = {
+  decorators: [DarkBackgroundDecorator],
+  args: {
+    loaderIcon: <AsyncAPIColorIcon alt='Loading...' />,
+    dark: true,
+    pulsating: true
+  }
+};
+
+export const CircularAnimationTextLoader: Story = {
+  args: {
+    loaderIcon: <IconCircularLoader />,
+    loaderText: 'Loading...'
+  }
+};
+
+export const CircularAnimationTextLoaderInDark: Story = {
+  decorators: [DarkBackgroundDecorator],
+  args: {
+    loaderIcon: <IconCircularLoader dark={true} />,
+    loaderText: 'Loading...',
+    dark: true
+  }
+};
+
+export const PulsatingIconTextLoader: Story = {
+  args: {
+    loaderIcon: <AsyncAPIColorIcon alt='Loading...' />,
+    loaderText: 'Loading...',
+    pulsating: true
+  }
+};
+
+export const PulsatingIconTextLoaderInDark: Story = {
+  decorators: [DarkBackgroundDecorator],
+  args: {
+    loaderIcon: <AsyncAPIColorIcon alt='Loading...' />,
+    loaderText: 'Loading...',
+    dark: true,
+    pulsating: true
+  }
+};

components/Loader.tsx

@@ -1,24 +1,39 @@
+import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface LoaderProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The text to be displayed along with the loading animation. */
+  loaderText?: string;
+
+  /** The icon to be displayed along with the loading animation. */
+  loaderIcon?: React.ReactElement | null;
+
+  /** Additional classes for the loader. */
   className?: string;
+
+  /** Whether the loader should be in dark mode. */
   dark?: boolean;
+
+  /** Whether the loader should be pulsating. */
+  pulsating?: boolean;
 }
 
 /**
  * This component displays a loader.
- * @param {LoaderProps} props - The props for the Loader component
- * @param {string} props.className - Additional classes for the loader
- * @param {boolean} props.dark - Whether the loader should be in dark mode
  */
-export default function Loader({ className = '', dark = false }: LoaderProps) {
+export default function Loader({
+  loaderText = '',
+  loaderIcon = null,
+  className = '',
+  dark = false,
+  pulsating = false
+}: LoaderProps) {
   return (
-    <div className={twMerge(`w-fit flex flex-col m-auto ${className}`)}>
-      <svg
-        className={`mx-auto animate-spin border-4 border-t-transparent ${dark ? 'border-white' : 'border-black'} size-10 rounded-full`}
-        viewBox='0 0 24 24'
-      ></svg>
-      <div className={`my-2 ${dark ? 'text-white' : 'text-black'}`}>Waiting for response...</div>
+    <div className={twMerge(`w-fit flex gap-4 m-auto items-center ${pulsating ? 'animate-pulse ' : ''} ${className}`)}>
+      {loaderIcon}
+      <div className={`my-2 ${dark ? 'text-white' : 'text-black'}`}>{loaderText}</div>
     </div>
   );
 }

components/NewsletterSubscribe.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import IconCircularLoader from '@/components/icons/CircularLoader';
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
 import { InputTypes } from '@/types/components/InputBoxPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
@@ -127,7 +128,7 @@ export default function NewsletterSubscribe({
         {subtitle}
       </Paragraph>
       {status === 'loading' ? (
-        <Loader dark={dark} />
+        <Loader loaderText={'Waiting for response...'} loaderIcon={<IconCircularLoader dark />} dark={dark} />
       ) : (
         <form className='flex flex-col gap-4 md:flex-row' onSubmit={handleSubmit}>
           <InputBox

components/footer/Footer.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { HeadingTypeStyle } from '@/types/typography/Heading';
 
-import AsyncAPILogoLight from '../AsyncAPILogoLight';
+import AsyncAPILogoLight from '../logos/AsyncAPILogoLight';
 import Heading from '../typography/Heading';
 import type { InitiativeLink, SocialMediaLink } from './FooterList';
 import { initiativeLinks, socialMediaLinks } from './FooterList';

components/icons/AsyncAPIColorIcon.tsx

@@ -0,0 +1,18 @@
+interface AsyncAPIColorLogoProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The alt text for the logo. */
+  alt?: string;
+
+  /** Additional classes for the logo. */
+  className?: string;
+}
+
+/**
+ * The AsyncAPIColorIcon component is the logo for AsyncAPI in color mode.
+ */
+export default function AsyncAPIColorIcon({ alt = 'AsyncAPI Icon', className = '' }: AsyncAPIColorLogoProps) {
+  const loaderIconPath: string = 'img/loaders/loader.png';
+
+  return <img alt={alt} src={loaderIconPath} className={className || 'mx-auto w-16'} />;
+}

components/icons/CircularLoader.tsx

@@ -0,0 +1,18 @@
+interface CircularLoaderProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** Whether the loader should be in dark mode. */
+  dark?: boolean;
+}
+
+/**
+ * CircularLoader Icon
+ */
+export default function IconCircularLoader({ dark = false }: CircularLoaderProps) {
+  return (
+    <svg
+      className={`mx-auto animate-spin border-4 border-t-transparent ${dark ? 'border-white' : 'border-black'} size-10 rounded-full`}
+      viewBox='0 0 24 24'
+    />
+  );
+}