-
-
Notifications
You must be signed in to change notification settings - Fork 696
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
49 changed files
with
1,247 additions
and
789 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| */ | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { addons } from '@storybook/manager-api'; | ||
| import AsyncAPIStorybookTheme from './AsyncAPIStorybookTheme'; | ||
|
|
||
| addons.setConfig({ | ||
| theme: AsyncAPIStorybookTheme, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.