Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add AppCard component #784

Merged
merged 19 commits into from
Nov 30, 2023
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/fluffy-plums-mix.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@asyncapi/studio-ui": minor
---

- Added AppCard component.
- change the dark background color of the design system.
- Modified InfoBadges so it exports Info type.
6 changes: 6 additions & 0 deletions apps/design-system/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import '@asyncapi/studio-ui/styles.css'

export const parameters = {
backgrounds: {
values: [
{ name: 'light', value: '#ffffff' },
{ name: 'dark', value: '#0F172A' },
],
},
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
Expand Down
26 changes: 26 additions & 0 deletions apps/design-system/src/components/AppCard.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { StoryObj, Meta } from '@storybook/react'

import { AppCard } from '@asyncapi/studio-ui'

const meta: Meta<typeof AppCard> = {
component: AppCard,
parameters: {
layout: 'centered',
backgrounds: {
default: 'dark'
}
},
}

export default meta
type Story = StoryObj<typeof AppCard>
export const CodeEditor: Story = {
args: {
isActive: true,
name: 'User Registration',
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eucondimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentumurna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuerefermentum urna, eu condimentum maur",
badges: ['http', 'kafka', 'websocket'],
isServer: true,
isClient: false
},
}
42 changes: 42 additions & 0 deletions packages/ui/components/AppCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Info, ServiceInfoBadge } from './ServiceInfoBadge';

interface AppCardProps {
isActive?: boolean;
name: string;
description: string;
badges: Info[];
isClient: boolean;
isServer: boolean;
className?: string;
}

export const AppCard = ({isActive = false, name, description, badges, className, isClient, isServer}:AppCardProps) => {
return (
<>
<div
KhudaDad414 marked this conversation as resolved.
Show resolved Hide resolved
aria-label={`${name} Application Card, ${isActive ? 'active' : 'inactive'}`}
className={`bg-gray-800 border-gray-800 rounded-lg max-w-[523px] w-full border-2 ${className} ${
isActive ? ' border-pink-800/30 shadow-active' : ''
}`}
>
<div className="flex flex-col gap-2 px-5 py-3">
<h3 className="text-base font-medium text-gray-100">{name}</h3>
<div className='flex gap-1'>
{ (isClient || isServer) &&
<div className='mr-2 flex gap-1'>
{isClient && <ServiceInfoBadge info='client'/>}
{isServer && <ServiceInfoBadge info='server'/>}
</div>
}
{Array.from(new Set(badges)).map((badge, index) => (<ServiceInfoBadge info={badge} key={badge + index} aria-label={`Badge for ${badge}`} />))}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would extract this to a variable so it's easier to understand. Above the return on line 14, I would add this:

const dedupedListOfBadges = Array.from(new Set(badges)).map((badge, index) => (<ServiceInfoBadge info={badge} key={badge + index} aria-label={`Badge for ${badge}`} />))

And then in this line I would just add {dedupedListOfBadges}. The code would be much more readable IMHO.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, for the aria-label, this is what a screen reader would say so imagine having 4 or 5 badges. The screen reader would say: "Badge for client, Badge for server, Badge for websocket, Badge for HTTP, Badge for kafka" 😅 Badge badge badge 😂

I suggest that we improve the root element aria-label with a better explanation and would mark all these badges with aria-hidden={true}. This way we can create a meaningful sentence like "This application is both a server and a client. It uses the WebSocket, HTTP, and Kafka protocols".

Suggested change
{Array.from(new Set(badges)).map((badge, index) => (<ServiceInfoBadge info={badge} key={badge + index} aria-label={`Badge for ${badge}`} />))}
{Array.from(new Set(badges)).map((badge, index) => (<ServiceInfoBadge info={badge} key={badge + index} aria-hidden={true} />))}

Then on line 17, we change it to:

aria-label={ariaLabel}

Where ariaLabel is something like "{name}. This application is active/inactive, and it's both a server and a client. It uses the WebSocket, HTTP, and Kafka protocols."

Note we're missing the description though. I'm not sure if a screen reader would read the paragraph below because it's not focusable. We should add https://storybook.js.org/addons/addon-screen-reader to Storybook so we can properly test what our users will experience using a screen reader.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would extract this to a variable so it's easier to understand.

Agreed, extracting the badges list makes the code cleaner.

Also, for the aria-label, this is what a screen reader would say so imagine having 4 or 5 badges. The screen reader would say: "Badge for client, Badge for server, Badge for websocket, Badge for HTTP, Badge for kafka"

I see your point, and I agree. Right now, it is not a fit for 4-5 badges.

I suggest that we improve the root element aria-label with a better explanation and would mark all these badges with aria-hidden={true}. This way we can create a meaningful sentence like "This application is both a server and a client. It uses the WebSocket, HTTP, and Kafka protocols".
We should add https://storybook.js.org/addons/addon-screen-reader to Storybook so we can properly test what our users will experience using a screen reader.

Sounds perfect.

</div>
</div>
<div className="w-full h-px bg-gray-700"></div>
<div className="px-5 py-[14px]">
<p className="text-sm text-gray-400 line-clamp-6">{description}
</p>
</div>
</div>
</>
)
}
3 changes: 2 additions & 1 deletion packages/ui/components/ServiceInfoBadge.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import type { FunctionComponent } from 'react'
import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, ServerIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons'

export type Info = 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' | 'client' | 'server'
interface ServiceInfoBadgeProps {
className?: string
info: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp'
info: Info
}

export const ServiceInfoBadge: FunctionComponent<ServiceInfoBadgeProps> = ({
Expand Down
1 change: 1 addition & 0 deletions packages/ui/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export * from './ServiceInfoBadge'
export * from './Sidebar'
export * from './SlideOver'
export * from './Toolbar'
export * from './AppCard'
export { default as Tooltip } from './Tooltip'
9 changes: 8 additions & 1 deletion packages/ui/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
const sharedConfig = require('tailwind-config/tailwind.config.js');
import sharedConfig from 'tailwind-config/tailwind.config.js';

module.exports = {
content: ['./components/**/*.tsx'],
presets: [sharedConfig],
theme: {
extend: {
boxShadow: {
active: '0px 0px 29px 0px rgba(190, 24, 93, 0.50)',
},
},
}
};