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 npm@8.19.4
- - 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: 'press@asyncapi.io'
+ }
+};

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'
  }
 ];