Merge branch 'asyncapi:master' into master

.github/workflows/if-nodejs-pr-testing.yml

@@ -1,6 +1,3 @@
-# This action is centrally managed in https://github.com/asyncapi/.github/
-# Don't make changes to this file in this repo as they will be overwritten with changes made to the same file in above mentioned repo
-
 # It does magic only if there is package.json file in the root of the project
 name: PR testing - if Node project
 
@@ -14,65 +11,61 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        # Using macos-13 instead of latest (macos-14) due to an issue with Puppeteer and such runner. 
-        # See: https://github.com/puppeteer/puppeteer/issues/12327 and https://github.com/asyncapi/parser-js/issues/1001
         os: [ubuntu-latest, macos-13, windows-latest]
     steps:
       - if: >
           !github.event.pull_request.draft && !(
             (github.actor == 'asyncapi-bot' && (
-              startsWith(github.event.pull_request.title, 'ci: update of files from global .github repo') || 
+              startsWith(github.event.pull_request.title, 'ci: update of files from global .github repo') ||
               startsWith(github.event.pull_request.title, 'chore(release):')
             )) ||
             (github.actor == 'asyncapi-bot-eve' && (
-              startsWith(github.event.pull_request.title, 'ci: update of files from global .github repo') || 
+              startsWith(github.event.pull_request.title, 'ci: update of files from global .github repo') ||
               startsWith(github.event.pull_request.title, 'chore(release):')
             )) ||
-            (github.actor == 'allcontributors[bot]' && 
+            (github.actor == 'allcontributors[bot]' &&
               startsWith(github.event.pull_request.title, 'docs: add')
             )
           )
         id: should_run
         name: Should Run
         run: echo "shouldrun=true" >> $GITHUB_OUTPUT
         shell: bash
-      - if: steps.should_run.outputs.shouldrun == 'true' 
+      - if: steps.should_run.outputs.shouldrun == 'true'
         name: Set git to use LF #to once and for all finish neverending fight between Unix and Windows
         run: |
           git config --global core.autocrlf false
           git config --global core.eol lf
         shell: bash
-      - if: steps.should_run.outputs.shouldrun == 'true' 
+      - if: steps.should_run.outputs.shouldrun == 'true'
         name: Checkout repository
         uses: actions/checkout@v4
-      - if: steps.should_run.outputs.shouldrun == 'true' 
+      - if: steps.should_run.outputs.shouldrun == 'true'
         name: Check if Node.js project and has package.json
         id: packagejson
         run: test -e ./package.json && echo "exists=true" >> $GITHUB_OUTPUT || echo "exists=false" >> $GITHUB_OUTPUT
         shell: bash
       - if: steps.packagejson.outputs.exists == 'true'
-        name: Check package-lock version
-        uses: asyncapi/.github/.github/actions/get-node-version-from-package-lock@master
-        id: lockversion
-      - if: steps.packagejson.outputs.exists == 'true'
+        name: Check if .nvmrc exists
+        id: nvmrc
+        run: test -e .nvmrc && echo "exists=true" >> $GITHUB_OUTPUT || echo "exists=false" >> $GITHUB_OUTPUT
+        shell: bash
+      - if: steps.nvmrc.outputs.exists == 'true'
+        name: Read Node.js version from .nvmrc
+        id: nodeversion
+        run: echo "version=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        shell: bash
+      - if: steps.packagejson.outputs.exists == 'true' && steps.nvmrc.outputs.exists == 'true'
         name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "${{ steps.lockversion.outputs.version }}"
-      - if: steps.lockversion.outputs.version == '18' && matrix.os == 'windows-latest'
-        #npm cli 10 is buggy because of some cache issue
-        name: Install npm cli 8
-        shell: bash
-        run: npm install -g [email protected]
-      - if: steps.packagejson.outputs.exists == 'true'
-        name: Install dependencies
-        shell: bash
+          node-version: "${{ steps.nodeversion.outputs.version }}"
+      - name: Install dependencies
         run: npm ci
       - if: steps.packagejson.outputs.exists == 'true'
         name: Test
         run: npm test --if-present
       - if: steps.packagejson.outputs.exists == 'true' && matrix.os == 'ubuntu-latest'
-        #linting should run just one and not on all possible operating systems
         name: Run linter
         run: npm run lint --if-present
       - if: steps.packagejson.outputs.exists == 'true'

.nvmrc

@@ -0,0 +1 @@
+20.11.0

components/InputBox.stories.tsx

@@ -0,0 +1,52 @@
+import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
+import { InputTypes } from '@/types/components/InputBoxPropsType';
+
+import InputBox from './InputBox';
+
+const meta: Meta<typeof InputBox> = {
+  title: 'Components/InputBox',
+  component: InputBox
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputBox>;
+
+const Input: Story = {
+  args: {
+    inputValue: ''
+  },
+
+  render: (args: InputBoxProps) => {
+    const [{ inputValue }, updateArgs] = useArgs();
+
+    const setValue = (newValue: string) => {
+      updateArgs({ inputValue: newValue });
+    };
+
+    return <InputBox {...args} inputValue={inputValue} setInput={setValue} />;
+  }
+};
+
+export const TextInput: Story = {
+  ...Input,
+
+  args: {
+    inputType: InputTypes.TEXT,
+    inputName: 'Name',
+    placeholder: 'AsyncAPI Initiative'
+  }
+};
+
+export const EmailInput: Story = {
+  ...Input,
+
+  args: {
+    inputType: InputTypes.EMAIL,
+    inputName: 'Email',
+    placeholder: '[email protected]'
+  }
+};

components/InputBox.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
+
+/**
+ * This component renders input box.
+ */
+export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput }: InputBoxProps) {
+  return (
+    <input
+      type={inputType}
+      name={inputName}
+      placeholder={placeholder}
+      value={inputValue}
+      onChange={(e) => setInput(e.target.value)}
+      className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
+      required
+      data-testid={`NewsletterSubscribe-${inputType}-input`}
+    />
+  );
+}

components/NewsletterSubscribe.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
+import { InputTypes } from '@/types/components/InputBoxPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
 import { useTranslation } from '../utils/i18n';
 import Button from './buttons/Button';
+import InputBox from './InputBox';
 import Loader from './Loader';
 import Heading from './typography/Heading';
 import Paragraph from './typography/Paragraph';
@@ -128,25 +130,19 @@ export default function NewsletterSubscribe({
         <Loader dark={dark} />
       ) : (
         <form className='flex flex-col gap-4 md:flex-row' onSubmit={handleSubmit}>
-          <input
-            type='text'
-            name='name'
+          <InputBox
+            inputType={InputTypes.TEXT}
+            inputName='name'
             placeholder={t('newsletterCTA.nameInput')}
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className='form-input block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
-            required
-            data-testid='NewsletterSubscribe-text-input'
+            inputValue={name}
+            setInput={setName}
           />
-          <input
-            type='email'
-            name='email'
+          <InputBox
+            inputType={InputTypes.EMAIL}
+            inputName='email'
             placeholder={t('newsletterCTA.emailInput')}
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
-            required
-            data-testid='NewsletterSubscribe-email-input'
+            inputValue={email}
+            setInput={setEmail}
           />
           <Button
             type={ButtonType.SUBMIT}

components/sponsors/GoldSponsorsList.ts

@@ -1,13 +1,6 @@
 import type { SponsorType } from '@/types/components/sponsors/SponsorType';
 
 export const goldSponsors: SponsorType[] = [
-  {
-    name: 'Postman',
-    website: 'https://www.postman.com',
-    imageSrc: '/img/sponsors/postman.png',
-    altText: 'Postman',
-    imageClass: 'inline-block px-4 sm:h-18'
-  },
   {
     name: 'IBM',
     website: 'https://www.ibm.com',

components/sponsors/SilverSponsors.tsx

@@ -20,7 +20,7 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             key={index}
             href={sponsor.website}
             target='_blank'
-            className='relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5'
+            className='relative block w-2/3 p-4 text-center sm:w-1/2 md:w-1/3 lg:w-1/4'
             rel='noopener noreferrer'
             data-testid='SilverSponsors-link'
           >

components/sponsors/SilverSponsorsList.ts

@@ -35,5 +35,19 @@ export const Silversponsors: SponsorType[] = [
     altText: 'SmartBear',
     imageSrc: '/img/sponsors/smartbear_logo.png',
     imageClass: 'inline-block sm:h-9'
+  },
+  {
+    name: 'HDI',
+    website: 'https://www.hdi.global/',
+    altText: 'HDI',
+    imageSrc: '/img/sponsors/hdi_logo.png',
+    imageClass: 'inline-block sm:h-9'
+  },
+  {
+    name: 'Route4Me',
+    website: 'https://route4me.com',
+    altText: 'Best Route Planning and Route Optimization Software',
+    imageSrc: '/img/sponsors/route4me_logo.png',
+    imageClass: 'inline-block sm:h-9'
   }
 ];

components/sponsors/SponsorsList.ts

@@ -14,5 +14,12 @@ export const sponsors: SponsorType[] = [
     imageSrc: '/img/sponsors/gravitee.io_logo.jpg',
     altText: 'Gravitee.io',
     imageClass: 'inline-block px-4 sm:h-14'
+  },
+  {
+    name: 'Postman',
+    website: 'https://www.postman.com',
+    imageSrc: '/img/sponsors/postman.png',
+    altText: 'Postman',
+    imageClass: 'inline-block px-4 sm:h-18'
   }
 ];