diff --git a/.github/workflows/if-nodejs-pr-testing.yml b/.github/workflows/if-nodejs-pr-testing.yml index 462e61316c7f..2154143339cc 100644 --- a/.github/workflows/if-nodejs-pr-testing.yml +++ b/.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,21 +11,19 @@ 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') ) ) @@ -36,43 +31,41 @@ jobs: 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' diff --git a/.github/workflows/netlify-edge-functions-test.yml b/.github/workflows/netlify-edge-functions-test.yml new file mode 100644 index 000000000000..adc110d68ddb --- /dev/null +++ b/.github/workflows/netlify-edge-functions-test.yml @@ -0,0 +1,21 @@ +name: Run tests for netlify edge-functions + +on: + pull_request: + types: [opened, reopened, synchronize, ready_for_review] + +jobs: + netlify-tests: + strategy: + matrix: + deno-version: [1.46.0] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Setup Deno + uses: denoland/setup-deno@3a041055d2e2068f6e2c59904ee0ec2dfa9d9665 + with: + deno-version: ${{ matrix.deno-version }} + - name: Test with Deno + run: deno test --allow-env --trace-ops netlify/**/*.test.ts + diff --git a/.gitignore b/.gitignore index 210beb93f6a7..0a69d4de26c5 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ cypress/videos *storybook.log /storybook-static/ coverage +deno.lock diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000000..8b0beab16a58 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +20.11.0 diff --git a/.storybook/AsyncAPIStorybookTheme.ts b/.storybook/AsyncAPIStorybookTheme.ts new file mode 100644 index 000000000000..9213d73cd955 --- /dev/null +++ b/.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' + */ +}); diff --git a/.storybook/manager.ts b/.storybook/manager.ts new file mode 100644 index 000000000000..cc32cf0e2e41 --- /dev/null +++ b/.storybook/manager.ts @@ -0,0 +1,6 @@ +import { addons } from '@storybook/manager-api'; +import AsyncAPIStorybookTheme from './AsyncAPIStorybookTheme'; + +addons.setConfig({ + theme: AsyncAPIStorybookTheme, +}); diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index c8e7c3b7f91b..29ac0d62998b 100644 --- a/.storybook/preview.tsx +++ b/.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', }, diff --git a/CODEOWNERS b/CODEOWNERS index e33f9f4e706b..ac1c2868806f 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -15,4 +15,4 @@ markdown/community/*.md @thulieblack @quetzalliwrites README.md @quetzalliwrites @derberg @akshatnema @magicmatatjahu @mayaleeeee @asyncapi-bot-eve #docTriagers: TRohit20 BhaswatiRoy VaishnaviNandakumar J0SAL -#codeTriagers: sambhavgupta0705 +#codeTriagers: sambhavgupta0705 devilkiller-ag diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1334921c2813..6a20e1c3395f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,20 @@ -# Contributing to AsyncAPI -We love your input! We want to make contributing to this project as easy and transparent as possible. +# Welcome to AsyncAPI -## Contribution recogniton +Welcome to our open-source project! We're excited to have you join our community and contribute to making our project better. Please follow this guide to ensure a smooth contribution process and maintain the quality of our codebase and documentation. -We use [All Contributors](https://allcontributors.org/docs/en/specification) specification to handle recognitions. For more details read [this](https://github.com/asyncapi/community/blob/master/recognize-contributors.md) document. +We encourage all contributors to familiarize themselves with these guidelines and actively participate in the project's growth. If you have any questions or need assistance, don't hesitate to contact the project maintainers or community members. -## Summary of the contribution flow +## Code of Conduct + +AsyncAPI has adopted a Code of Conduct (CoC) that we expect project participants to adhere to. Please [read the full CoC text](./CODE_OF_CONDUCT.md) to understand the expected behavior. + +## Our Development Process + +We use Github to host code, track issues, feature requests, and accept pull requests. + +## Contribution flow -The following is a summary of the ideal contribution flow. Please, note that Pull Requests can also be rejected by the maintainers when appropriate. +The following is a summary of the ideal contribution flow. ``` ┌───────────────────────┐ @@ -36,44 +43,70 @@ The following is a summary of the ideal contribution flow. Please, note that Pul └───────────────────────┘ ``` -## Code of Conduct -AsyncAPI has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](./CODE_OF_CONDUCT.md) so that you can understand what sort of behaviour is expected. +Issues and pull requests without activity from the creator within 14 days will be automatically closed by a triager or committer. However, closure does not mean rejection. If you wish to revisit a closed issue or pull a request, open a new one referencing the closed item. -## Our Development Process -We use Github to host code, to track issues and feature requests, as well as accept pull requests. +Issues and pull requests without activity from the triager or committer within 14 days may occur for many reasons. The creator may use the `/ptal` comment in the pull request to call out maintainers. -## Issues -[Open an issue](https://github.com/asyncapi/asyncapi/issues/new) **only** if you want to report a bug or a feature. Don't open issues for questions or support, instead join our [Slack workspace](https://www.asyncapi.com/slack-invite) and ask there. Don't forget to follow our [Slack Etiquette](https://github.com/asyncapi/community/blob/master/slack-etiquette.md) while interacting with community members! It's more likely you'll get help, and much faster! +### Issues -## Bug Reports and Feature Requests +[Open an issue](https://github.com/asyncapi/asyncapi/issues/new) **only** if you want to report a bug or a feature. Don't open issues for questions or support; join our [AsyncAPI Slack workspace](https://www.asyncapi.com/slack-invite) and post your queries on the relevant channels. Don't forget to follow our [Slack Etiquette](https://github.com/asyncapi/community/blob/master/slack-etiquette.md) while interacting with community members! It's more likely you'll get help, and much faster! -Please use our issues templates that provide you with hints on what information we need from you to help you out. +### Bug Reports and Feature Requests -## Pull Requests +Please use our issues templates, which provide hints on what information we need from you to help you out. -**Please, make sure you open an issue before starting with a Pull Request, unless it's a typo or a really obvious error.** Pull requests are the best way to propose changes to the specification. Get familiar with our document that explains [Git workflow](https://github.com/asyncapi/community/blob/master/git-workflow.md) used in our repositories. +### Pull Requests -## Conventional commits +**Please open an issue before starting a Pull Request unless it's a typo or a really obvious error.** Pull requests are the best way to propose changes to the specification. It may be rejected if no issue was created first to discuss the need for a pull request. -Our repositories follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification. Releasing to GitHub and NPM is done with the support of [semantic-release](https://semantic-release.gitbook.io/semantic-release/). +Get familiar with our document that explains the [Git workflow](https://github.com/asyncapi/community/blob/master/git-workflow.md) used in our repositories. -Pull requests should have a title that follows the specification, otherwise, merging is blocked. If you are not familiar with the specification simply ask maintainers to modify. You can also use this cheatsheet if you want: +## Conventional commits + +Our repositories follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) specification. -- `fix: ` prefix in the title indicates that PR is a bug fix and PATCH release must be triggered. -- `feat: ` prefix in the title indicates that PR is a feature and MINOR release must be triggered. -- `docs: ` prefix in the title indicates that PR is only related to the documentation and there is no need to trigger release. -- `chore: ` prefix in the title indicates that PR is only related to cleanup in the project and there is no need to trigger release. -- `test: ` prefix in the title indicates that PR is only related to tests and there is no need to trigger release. -- `refactor: ` prefix in the title indicates that PR is only related to refactoring and there is no need to trigger release. +Pull requests should have a title that follows the specification; otherwise, merging is blocked. If you are unfamiliar with the specification, ask maintainers to modify it. You can also use this cheatsheet if you want: -What about MAJOR release? just add `!` to the prefix, like `fix!: ` or `refactor!: ` +- `fix: ` prefix in the title indicates that the PR is a bug fix. +- `feat: ` prefix in the title indicates that the PR is a feature. +- `docs: ` prefix in the title indicates that the PR only relates to the documentation. +- `chore: ` prefix in the title indicates that the PR is only related to cleanup in the project. +- `test: ` prefix in the title indicates that the PR is only related to tests. +- `refactor: ` prefix in the title indicates that the PR is only related to refactoring. -Prefix that follows specification is not enough though. Remember that the title must be clear and descriptive with usage of [imperative mood](https://chris.beams.io/posts/git-commit/#imperative). +A prefix that follows specification is not enough. Remember that the title must be clear and descriptive, using the [imperative mood](https://chris.beams.io/posts/git-commit/#imperative). -Happy contributing :heart: +Happy contributing! :heart: ## License + When you submit changes, your submissions are understood to be under the same [Apache 2.0 License](https://github.com/asyncapi/asyncapi/blob/master/LICENSE) that covers the project. Feel free to [contact the maintainers](https://www.asyncapi.com/slack-invite) if that's a concern. -## References -This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md). \ No newline at end of file +## Contribution recognition + +We use the [All Contributors](https://allcontributors.org/docs/en/specification) specification to handle recognitions. Read the [`recognize contributors` document](https://github.com/asyncapi/community/blob/master/recognize-contributors.md). + +## Maintainers setup + +To streamline project management and facilitate onboarding, the maintainer's setup includes two roles: `triager` and `committer`. + +There are also two separate areas of responsibility: docs and code. A committer can be responsible for code only, and a triager can be responsible for docs only. A maintainer can hold all roles and participate in different areas. + +We recognize that because of the project's size and complexity, areas of responsibility can also become more granular. For example, a committer can be responsible for docs, but only community docs or a committer can be responsible only for project design. Project maintainers assess and approve these exceptions. + +### Triager + +Triagers are responsible for labeling, commenting, and managing issues and pull requests. + +- Triagers assess newly-opened issues and pull requests. +Responsibilities include labeling issues and pull requests, commenting, closing, and reopening items as needed, as well as assisting users and novice contributors. +- Triagers are crucial in enforcing the contributor guide and maintaining a clean backlog. +If a triager plans to become a committer, they should consult existing committers to gradually gain more rights. It's crucial to earn the trust of existing committers so they feel confident in your ability to merge PRs. A triager should consistently demonstrate dedication by regularly fulfilling their duties and actively reviewing PRs, providing code/docs suggestions and recommendations. This shows the committers that the triager is knowledgeable about the docs/codebase and committed to maintaining its quality. + +### Committer + +Committers are responsible for technical oversight, pull request approval, and onboarding of new maintainers. + +- Committers approve pull requests and oversee the technical direction of the project. +- They are responsible for reviewing and approving pull requests for merging. +- Committers also play a role in onboarding new maintainers and triagers. diff --git a/README.md b/README.md index 67479c6f7a58..5eab72063aa1 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ This repository contains the sources of AsyncAPI website: - It's powered by [Next.js](https://nextjs.org/), - It uses [Tailwind](https://tailwindcss.com/) CSS framework, - It's build and deployed with [Netlify](https://www.netlify.com/), -- It uses [Storybook](https://storybook.js.org/) as a frontend workshop and for dociuenting UI components. +- It uses [Storybook](https://storybook.js.org/) as a frontend workshop and for documenting UI components. ## Requirements @@ -249,7 +249,7 @@ This repository has the following structure: ├── .github # Definitions of GitHub workflows, pull request and issue templates ├── assets # Various assets | ├── docs # Documentation assets - | | fragments # Docuentations for CLI installation and contribution. + | | fragments # Documentations for CLI installation and contribution. ├── components # Various generic components such as "Button", "Figure", etc. ├── config # Transformed static data to display on the pages such as blog posts etc. ├── context # Various React's contexts used in website diff --git a/assets/docs/fragments/bindings-overview.md b/assets/docs/fragments/bindings-overview.md new file mode 100644 index 000000000000..5f92b0ca3800 --- /dev/null +++ b/assets/docs/fragments/bindings-overview.md @@ -0,0 +1 @@ +Bindings in AsyncAPI provide a way to add protocol-specific information to the AsyncAPI documentation. They can be added to different document parts, such as servers, channels, or messages; they specify standard details specific to a particular protocol. The purpose of bindings is to enhance the API's understanding and usage by providing additional context and configuration options for different protocols. diff --git a/components/Accordion/Accordion.stories.tsx b/components/Accordion/Accordion.stories.tsx new file mode 100644 index 000000000000..95bbed4b5ed7 --- /dev/null +++ b/components/Accordion/Accordion.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import type { AccordionItemType } from '@/types/components/AccordionItemType'; + +import Accordion from './Accordion'; + +const meta: Meta = { + title: 'Components/Accordion', + component: Accordion +}; + +export default meta; + +type Story = StoryObj; + +const sampleAccordionItemList: AccordionItemType[] = [ + { + title: 'Accordion Item 1', + content: 'This is the content of accordion item 1.' + }, + { + title: 'Accordion Item 2', + content: 'This is the content of accordion item 2.' + }, + { + title: 'Accordion Item 3', + content: 'This is the content of accordion item 3.' + } +]; + +export const SampleAccordion: Story = { + args: { + accordionItems: sampleAccordionItemList + } +}; diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx new file mode 100644 index 000000000000..aa5fbf536fb5 --- /dev/null +++ b/components/Accordion/Accordion.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import type { AccordionItemType } from '@/types/components/AccordionItemType'; + +import AccordionItem from './AccordionItem'; + +export interface AccordionProps { + // eslint-disable-next-line prettier/prettier + + /** List of accordian items objects each containing title and content. */ + accordionItems: AccordionItemType[]; +} + +/** + * This is the Accordion component. It displays a list of items that can be expanded or collapsed. + */ +export default function Accordion({ accordionItems = [] }: AccordionProps) { + const [activeIndex, setActiveIndex] = React.useState(null); + + return ( +
+ {accordionItems.map(({ title, content }, index) => ( + + ))} +
+ ); +} diff --git a/components/Accordion/AccordionItem.tsx b/components/Accordion/AccordionItem.tsx new file mode 100644 index 000000000000..b7c1f61d8296 --- /dev/null +++ b/components/Accordion/AccordionItem.tsx @@ -0,0 +1,67 @@ +import React from 'react'; + +export interface AccordionItemProps { + // eslint-disable-next-line prettier/prettier + + /** Index of the accordion item. */ + itemIndex: number; + + /** Title of the accordion item. */ + title: string; + + /** Content of the accordion item. */ + content: React.ReactNode; + + /** Whether the accordion item is active(open) or not. */ + isActive: boolean; + + /** Function to set the active index of the accordion item. */ + setActiveIndex: (index: number | null) => void; +} + +/** + * This is the AccordionItem component. It displays a single item that can be expanded or collapsed. + */ +export default function AccordionItem({ itemIndex, title, content, isActive, setActiveIndex }: AccordionItemProps) { + const handleClick = () => { + const nextIndex = isActive ? null : itemIndex; + + setActiveIndex(nextIndex); + }; + + return ( +
+ + {isActive && ( +
+ {content} +
+ )} +
+ ); +} diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx index 241e9b5aa84b..1642b8244506 100644 --- a/components/CaseStudyCard.tsx +++ b/components/CaseStudyCard.tsx @@ -19,7 +19,7 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) { return (
{studies.map((study, index) => ( - +
= { + title: 'Components/InputBox', + component: InputBox +}; + +export default meta; + +type Story = StoryObj; + +const Input: Story = { + args: { + inputValue: '' + }, + + render: (args: InputBoxProps) => { + const [{ inputValue }, updateArgs] = useArgs(); + + const setValue = (newValue: string) => { + updateArgs({ inputValue: newValue }); + }; + + return ; + } +}; + +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' + } +}; diff --git a/components/InputBox.tsx b/components/InputBox.tsx new file mode 100644 index 000000000000..446068f963ad --- /dev/null +++ b/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 ( + 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`} + /> + ); +} diff --git a/components/Loader.stories.tsx b/components/Loader.stories.tsx new file mode 100644 index 000000000000..85d97ee88674 --- /dev/null +++ b/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 = { + title: 'Components/Loader', + component: Loader +}; + +export default meta; + +type Story = StoryObj; + +const DarkBackgroundDecorator = (Story: any) => ( +
+ +
+); + +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: + } +}; + +export const CircularAnimationLoaderInDark: Story = { + decorators: [DarkBackgroundDecorator], + args: { + loaderIcon: , + dark: true + } +}; + +export const PulsatingIconLoader: Story = { + args: { + loaderIcon: , + pulsating: true + } +}; + +export const PulsatingIconLoaderInDark: Story = { + decorators: [DarkBackgroundDecorator], + args: { + loaderIcon: , + dark: true, + pulsating: true + } +}; + +export const CircularAnimationTextLoader: Story = { + args: { + loaderIcon: , + loaderText: 'Loading...' + } +}; + +export const CircularAnimationTextLoaderInDark: Story = { + decorators: [DarkBackgroundDecorator], + args: { + loaderIcon: , + loaderText: 'Loading...', + dark: true + } +}; + +export const PulsatingIconTextLoader: Story = { + args: { + loaderIcon: , + loaderText: 'Loading...', + pulsating: true + } +}; + +export const PulsatingIconTextLoaderInDark: Story = { + decorators: [DarkBackgroundDecorator], + args: { + loaderIcon: , + loaderText: 'Loading...', + dark: true, + pulsating: true + } +}; diff --git a/components/Loader.tsx b/components/Loader.tsx index 09324174ec2d..94fd29417659 100644 --- a/components/Loader.tsx +++ b/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 ( -
- -
Waiting for response...
+
+ {loaderIcon} +
{loaderText}
); } diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx index 36cddf7aa6a0..f9846fd6ec86 100644 --- a/components/MDX/MDX.tsx +++ b/components/MDX/MDX.tsx @@ -29,6 +29,7 @@ import Caption from '../Caption'; import DocsCards from '../docs/DocsCards'; import Visualizer from '../docs/Visualizer'; import CodeBlock from '../editor/CodeBlock'; +import FAQ from '../faq/FAQ'; import Figure from '../Figure'; import GeneratorInstallation from '../GeneratorInstallation'; import Column from '../layout/Column'; @@ -38,7 +39,7 @@ import Profiles from '../Profiles'; import Remember from '../Remember'; import Sponsors from '../sponsors/Sponsors'; import Warning from '../Warning'; -import { Table, TableCell, TableHeader, TableRow } from './MDXTable'; +import { Table, TableBody, TableCell, TableHeader, TableRow, Thead } from './MDXTable'; let mermaidInitialized = false; @@ -174,163 +175,161 @@ function Text({ content = '', className = '' }) { /** * @description This function returns MDX components. */ -export function getMDXComponents() { - return { - h1: (props: React.HTMLProps) => ( -

- ), - h2: (props: React.HTMLProps) => ( -

- ), - h3: (props: React.HTMLProps) => ( -

- ), - h4: (props: React.HTMLProps) => ( -

- ), - h5: (props: React.HTMLProps) => ( -
- ), - h6: (props: React.HTMLProps) => ( -
- ), - blockquote: (props: React.HTMLProps) => ( -
- ), - p: (props: React.HTMLProps) => ( -

- ), - strong: (props: React.HTMLProps) => ( - - ), - a: (props: React.HTMLProps) => ( - - ), - ul: (props: React.HTMLProps) => ( -