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/components/ClickableLogo.tsx b/components/ClickableLogo.tsx index 0ce7f081e4f3..e40e7fa488c2 100644 --- a/components/ClickableLogo.tsx +++ b/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; 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/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx index 80ce7474a19d..db7b0a6407df 100644 --- a/components/NewsletterSubscribe.tsx +++ b/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} {status === 'loading' ? ( - + } dark={dark} /> ) : (
; +} diff --git a/components/icons/CircularLoader.tsx b/components/icons/CircularLoader.tsx new file mode 100644 index 000000000000..7cca8dfd8fe9 --- /dev/null +++ b/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 ( + + ); +} diff --git a/components/icons/Icons.mdx b/components/icons/Icons.mdx index 7ae712388093..cb6496377a38 100644 --- a/components/icons/Icons.mdx +++ b/components/icons/Icons.mdx @@ -2,6 +2,7 @@ import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks'; import IconAmbassador from './Ambassador'; import IconAsyncAPI from './AsyncAPI'; +import AsyncAPIColorIcon from './AsyncAPIColorIcon'; import IconArrowUp from './ArrowUp'; import IconArrowDown from './ArrowDown'; import IconArrowLeft from './ArrowLeft'; @@ -60,6 +61,7 @@ import IconUsers from './Users'; import Webinar from './Webinar'; import IconYoutube from './YouTube'; import IconYoutubeGray from './YouTubeGray'; +import IconCircularLoader from './CircularLoader'; @@ -70,31 +72,29 @@ These are the icons used in the AsyncAPI website. ## AsyncAPI Icons - - - + + + -{' '} + + + -{' '} - -{' '} - - - - + + + ## Social Media Icons @@ -104,50 +104,34 @@ These are the icons used in the AsyncAPI website. -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - @@ -164,265 +148,184 @@ These are the icons used in the AsyncAPI website. -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - -{' '} - - - - + + + + + + + + diff --git a/components/AsyncAPILogo.tsx b/components/logos/AsyncAPILogo.tsx similarity index 100% rename from components/AsyncAPILogo.tsx rename to components/logos/AsyncAPILogo.tsx diff --git a/components/AsyncAPILogoLight.tsx b/components/logos/AsyncAPILogoLight.tsx similarity index 100% rename from components/AsyncAPILogoLight.tsx rename to components/logos/AsyncAPILogoLight.tsx diff --git a/components/logos/logos.mdx b/components/logos/logos.mdx index c863c4eb059b..06e65b1c46ca 100644 --- a/components/logos/logos.mdx +++ b/components/logos/logos.mdx @@ -5,6 +5,8 @@ import AxwayLogo from './Axway'; import SlackLogo from './Slack'; import AdidasLogo from './Adidas'; import SalesforceLogo from './Salesforce'; +import AsyncAPILogo from './AsyncAPILogo'; +import AsyncAPILogoLight from './AsyncAPILogoLight'; @@ -13,29 +15,31 @@ import SalesforceLogo from './Salesforce'; These are the logos of various companies used in the AsyncAPI website. - - - + + + + + + + -{' '} + + + -{' '} - -{' '} - - - - + + + diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx index a108cdaf9a2d..1c6f57e130f9 100644 --- a/components/navigation/MobileNavMenu.tsx +++ b/components/navigation/MobileNavMenu.tsx @@ -2,9 +2,9 @@ import Link from 'next/link'; import { useState } from 'react'; import { SearchButton } from '../AlgoliaSearch'; -import AsyncAPILogo from '../AsyncAPILogo'; import NavItemDropdown from '../icons/NavItemDropdown'; import SearchIcon from '../icons/SearchIcon'; +import AsyncAPILogo from '../logos/AsyncAPILogo'; import communityItems from './communityItems'; import learningItems from './learningItems'; import MenuBlocks from './MenuBlocks'; diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx index 56cda97c5c06..ae8371702033 100644 --- a/components/navigation/NavBar.tsx +++ b/components/navigation/NavBar.tsx @@ -6,12 +6,12 @@ import { useEffect, useState } from 'react'; import { defaultLanguage, languages, useTranslation } from '../../utils/i18n'; import i18nPaths from '../../utils/i18nPaths'; import { SearchButton } from '../AlgoliaSearch'; -import AsyncAPILogo from '../AsyncAPILogo'; import GithubButton from '../buttons/GithubButton'; import { isMobileDevice } from '../helpers/is-mobile'; import { useOutsideClick } from '../helpers/use-outside-click'; import IconLoupe from '../icons/Loupe'; import LanguageSelect from '../languageSelector/LanguageSelect'; +import AsyncAPILogo from '../logos/AsyncAPILogo'; import CommunityPanel from './CommunityPanel'; import LearningPanel from './LearningPanel'; import MobileNavMenu from './MobileNavMenu'; diff --git a/components/tools/Checkbox.stories.tsx b/components/tools/Checkbox.stories.tsx new file mode 100644 index 000000000000..d9691aff1813 --- /dev/null +++ b/components/tools/Checkbox.stories.tsx @@ -0,0 +1,45 @@ +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; + +import type { CheckboxProps } from '@/types/components/tools/CheckboxPropsType'; + +import Checkbox from './Checkbox'; + +const meta: Meta = { + title: 'Components/Checkbox', + component: Checkbox +}; + +export default meta; + +type Story = StoryObj; + +export const DefaultCheckbox: Story = { + args: { + name: 'Check me!', + checked: true + }, + + render: (args: CheckboxProps) => { + const [{ checked }, updateArgs] = useArgs(); + + const handleClickOption = () => { + updateArgs({ checked: !checked }); + }; + + return ; + } +}; + +export const ColorfulCheckbox: Story = { + ...DefaultCheckbox, + + args: { + ...DefaultCheckbox.args, + bgColor: 'bg-gray-200', + textColor: 'text-primary-500', + borderColor: 'border-primary-500', + checkedStateBgColor: 'bg-primary-500', + checkedStateTextColor: 'text-white' + } +}; diff --git a/components/tools/Checkbox.tsx b/components/tools/Checkbox.tsx new file mode 100644 index 000000000000..439bb040be02 --- /dev/null +++ b/components/tools/Checkbox.tsx @@ -0,0 +1,40 @@ +import { twMerge } from 'tailwind-merge'; + +import type { CheckboxProps } from '@/types/components/tools/CheckboxPropsType'; + +/** + * This component renders a checkbox. + */ +const Checkbox = ({ + name, + checked, + bgColor = 'bg-white', + textColor = 'text-secondary-600', + borderColor = 'border-secondary-600', + checkedStateBgColor = 'bg-secondary-600', + checkedStateTextColor = 'text-white', + handleClickOption +}: CheckboxProps) => { + const handleClick = (event: React.MouseEvent) => { + event.stopPropagation(); // Prevents the event from propagating to parent elements + handleClickOption(name); + }; + + return ( +
+ {checked ? ( + checked + ) : ( + unchecked + )} +
{name}
+
+ ); +}; + +export default Checkbox; diff --git a/components/tools/Filters.tsx b/components/tools/Filters.tsx index a565d2130b8b..0ca822b7eea9 100644 --- a/components/tools/Filters.tsx +++ b/components/tools/Filters.tsx @@ -13,6 +13,7 @@ import ArrowDown from '../icons/ArrowDown'; import { CardData } from './CardData'; import FiltersDisplay from './FiltersDisplay'; import FiltersDropdown from './FiltersDropdown'; +import Toggle from './Toggle'; interface FiltersProps { setOpenFilter: React.Dispatch>; @@ -164,20 +165,7 @@ export default function Filters({ setOpenFilter }: FiltersProps) { />
- -
Show only AsyncAPI-owned tools
+
diff --git a/components/tools/FiltersDropdown.tsx b/components/tools/FiltersDropdown.tsx index fbf2d5c7a205..beb68e81eb5a 100644 --- a/components/tools/FiltersDropdown.tsx +++ b/components/tools/FiltersDropdown.tsx @@ -2,6 +2,8 @@ import { twMerge } from 'tailwind-merge'; import type { Category, Language, Technology } from '@/types/components/tools/ToolDataType'; +import Checkbox from './Checkbox'; + type DataList = Language[] | Technology[] | Category[]; interface FiltersDropdownProps { @@ -25,7 +27,7 @@ export default function FiltersDropdown({ setCheckedOptions, className = '' }: FiltersDropdownProps) { - const handleClickOption = (event: React.MouseEvent, option: string) => { + const handleClickOption = (option: string) => { const isChecked = checkedOptions.includes(option); const updatedOptions = isChecked ? checkedOptions.filter((item) => item !== option) : [...checkedOptions, option]; @@ -40,22 +42,7 @@ export default function FiltersDropdown({ {dataList.map((data, index) => { const checked = checkedOptions.includes(data.name); - return ( -
handleClickOption(event, data.name)} - > - {checked ? ( - checked - ) : ( - unchecked - )} -
{data.name}
-
- ); + return ; })} ); diff --git a/components/tools/Toggle.stories.tsx b/components/tools/Toggle.stories.tsx new file mode 100644 index 000000000000..2fcaf81c26df --- /dev/null +++ b/components/tools/Toggle.stories.tsx @@ -0,0 +1,42 @@ +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; + +import type { ToggleProps } from '@/types/components/tools/TogglePropsType'; + +import Toggle from './Toggle'; + +const meta: Meta = { + title: 'Components/Toggle', + component: Toggle +}; + +export default meta; + +type Story = StoryObj; + +export const DefaultToggle: Story = { + args: { + checked: true, + label: 'Toggle me!' + }, + + render: (args: ToggleProps) => { + const [{ checked }, updateArgs] = useArgs(); + + const setChecked = () => { + updateArgs({ checked: !checked }); + }; + + return ; + } +}; + +export const ColorfulToggle: Story = { + ...DefaultToggle, + + args: { + ...DefaultToggle.args, + bgColor: 'bg-gray-200', + checkedStateBgColor: 'bg-primary-500' + } +}; diff --git a/components/tools/Toggle.tsx b/components/tools/Toggle.tsx new file mode 100644 index 000000000000..bfa324b8538b --- /dev/null +++ b/components/tools/Toggle.tsx @@ -0,0 +1,33 @@ +import { twMerge } from 'tailwind-merge'; + +import type { ToggleProps } from '@/types/components/tools/TogglePropsType'; + +/** + * Toggle component for displaying and controlling a toggle switch. + */ +const Toggle = ({ + checked, + setChecked, + label, + bgColor = 'bg-gray-200', + checkedStateBgColor = 'bg-secondary-500' +}: ToggleProps) => { + return ( + + ); +}; + +export default Toggle; diff --git a/components/tools/ToolsDashboard.tsx b/components/tools/ToolsDashboard.tsx index da74ade22edb..bec91768c97d 100644 --- a/components/tools/ToolsDashboard.tsx +++ b/components/tools/ToolsDashboard.tsx @@ -1,6 +1,7 @@ import { useRouter } from 'next/router'; import { useContext, useEffect, useRef, useState } from 'react'; +import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon'; import type { ToolsListData } from '@/types/components/tools/ToolDataType'; import ToolsDataList from '../../config/tools.json'; @@ -9,6 +10,7 @@ import ArrowDown from '../icons/ArrowDown'; import Cross from '../icons/Cross'; import FilterIcon from '../icons/Filter'; import SearchIcon from '../icons/Search'; +import Loader from '../Loader'; import CategoryDropdown from './CategoryDropdown'; import Filters from './Filters'; import ToolsList from './ToolsList'; @@ -20,7 +22,6 @@ const ToolsData = ToolsDataList as ToolsListData; */ export default function ToolsDashboard() { const router = useRouter(); - const loader = 'img/loaders/loader.png'; // preloader image for the tools const [loading, setLoading] = useState(false); // used to handle the preloader on the page const filterRef = useRef(); // used to provide ref to the Filter menu and outside click close feature @@ -226,10 +227,7 @@ export default function ToolsDashboard() { )} {loading ? ( -
- loading -
Loading Tools...
-
+ } pulsating /> ) : (
{checkToolsList ? ( diff --git a/markdown/blog/websocket-part2.md b/markdown/blog/websocket-part2.md index 4098bebd799a..3014381da1e5 100644 --- a/markdown/blog/websocket-part2.md +++ b/markdown/blog/websocket-part2.md @@ -147,7 +147,7 @@ Create two AsyncAPI documents. Treat those two servers as separate services that You can use AsyncAPI also to describe the security of your API. You can describe in a machine-readable way the security mechanism that protects the server. Several [security schemes](https://github.com/asyncapi/spec/blob/master/spec/asyncapi.md#securitySchemeObject) are supported. In Kraken's case, I could not figure out what kind of security scheme they use from their docs. They seem to have a non-standard set up for getting the authorization token, which is why the only option was to put a human-readable-only description there. -```yaml +~~~yaml servers: public: url: ws.kraken.com @@ -166,16 +166,16 @@ servers: The resulting token must be provided in the "token" field of any new private WebSocket feed subscription: ``` - \{ + { "event": "subscribe", "subscription": - \{ + { "name": "ownTrades", "token": "WW91ciBhdXRoZW50aWNhdGlvbiB0b2tlbiBnb2VzIGhlcmUu" } } ``` -``` +~~~ ### Endpoints aka Channels @@ -436,7 +436,7 @@ For **automation** road described in section [Choosing the right road to Rome](# > You can open this document directly in AsyncAPI Studio by clicking [this](https://studio.asyncapi.com?url=https://gist.githubusercontent.com/derberg/4e419d6ff5870c7c3f5f443e8bd30535/raw/5e9b733b80a0209ba5520e5f41ab18c2a112e0a9/asyncapi-websocket-kraken.yml) link. Compare it also with the [original documentation](https://docs.kraken.com/websockets/). -```yml +~~~yaml asyncapi: 2.0.0 info: @@ -474,10 +474,10 @@ servers: The resulting token must be provided in the "token" field of any new private WebSocket feed subscription: ``` - \{ + { "event": "subscribe", "subscription": - \{ + { "name": "ownTrades", "token": "WW91ciBhdXRoZW50aWNhdGlvbiB0b2tlbiBnb2VzIGhlcmUu" } @@ -809,6 +809,6 @@ components: type: string description: Format of each pair is "A/B", where A and B are ISO 4217-A3 for standardized assets and popular unique symbol if not standardized. pattern: '[A-Z\s]+\/[A-Z\s]+' -``` +~~~ Stay tuned for more articles around WebSocket and AsyncAPI. Share your feedback and connect with the AsyncAPI community in our [Slack workspace](https://www.asyncapi.com/slack-invite/). diff --git a/package-lock.json b/package-lock.json index 879c389d24d7..14183711e3d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7558,20 +7558,14 @@ "version": "8.56.10", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz", "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==", + "dev": true, + "optional": true, + "peer": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" } }, - "node_modules/@types/eslint-scope": { - "version": "3.7.7", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", - "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", - "dependencies": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -12141,9 +12135,9 @@ "dev": true }, "node_modules/enhanced-resolve": { - "version": "5.17.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz", - "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -29893,11 +29887,10 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "node_modules/webpack": { - "version": "5.92.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz", - "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==", + "version": "5.94.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", + "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", "dependencies": { - "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", "@webassemblyjs/wasm-edit": "^1.12.1", @@ -29906,7 +29899,7 @@ "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.17.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", diff --git a/pages/index.tsx b/pages/index.tsx index 348311a7aa2a..f04a906e5ea5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,23 +1,25 @@ +import Head from '@/components/Head'; +import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon'; +import Loader from '@/components/Loader'; import { languageDetection } from '@/utils/i18n'; -import Head from '../components/Head'; - /** * @description This is the home page which is the first page that loads when the user visits the website. */ export default function HomePage() { - const loader: string = 'img/loaders/loader.png'; // preloader image for the tools - languageDetection(); return ( <>
-
- Loading... -
Loading...
-
+ } + className='my-60' + dark={false} + pulsating + />
); diff --git a/public/img/logos/asyncapi-horizontal-logo.svg b/public/img/logos/asyncapi-horizontal-logo.svg new file mode 100644 index 000000000000..6f0fc27579e9 --- /dev/null +++ b/public/img/logos/asyncapi-horizontal-logo.svg @@ -0,0 +1,82 @@ + + AsyncAPI Logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/logos/asyncapi-horizontal-white-logo.svg b/public/img/logos/asyncapi-horizontal-white-logo.svg new file mode 100644 index 000000000000..2a9e5c4c7167 --- /dev/null +++ b/public/img/logos/asyncapi-horizontal-white-logo.svg @@ -0,0 +1,82 @@ + + AsyncAPI Logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/types/components/tools/CheckboxPropsType.ts b/types/components/tools/CheckboxPropsType.ts new file mode 100644 index 000000000000..e535bb41dd4c --- /dev/null +++ b/types/components/tools/CheckboxPropsType.ts @@ -0,0 +1,27 @@ +export interface CheckboxProps { + // eslint-disable-next-line prettier/prettier + + /** The name to be displayed inside the checkbox. */ + name: string; + + /** If the checkbox is checked or not. */ + checked: boolean; + + /** The background color of the checkbox. */ + bgColor?: string; + + /** The text color of the checkbox. */ + textColor?: string; + + /** The border color of the checkbox. */ + borderColor?: string; + + /** The background color of the checkbox when it is checked. */ + checkedStateBgColor?: string; + + /** The text color of the checkbox when it is checked. */ + checkedStateTextColor?: string; + + /** Function to handle the click event of the checkbox. */ + handleClickOption: (name: string) => void; +} diff --git a/types/components/tools/TogglePropsType.ts b/types/components/tools/TogglePropsType.ts new file mode 100644 index 000000000000..5514aeb0f74f --- /dev/null +++ b/types/components/tools/TogglePropsType.ts @@ -0,0 +1,18 @@ +export interface ToggleProps { + // eslint-disable-next-line prettier/prettier + + /** Current state of the toggle. */ + checked: boolean; + + /** Function to update the toggle state. */ + setChecked: React.Dispatch>; + + /** Label text for the toggle. */ + label?: string; + + /** The background color of the checkbox. */ + bgColor?: string; + + /** The background color of the checkbox when it is checked. */ + checkedStateBgColor?: string; +}