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 11 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
},
}
41 changes: 41 additions & 0 deletions packages/ui/components/AppCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
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
className={`bg-gray-800 border-gray-800 rounded-lg w-[523px] border-2 ${className} ${
KhudaDad414 marked this conversation as resolved.
Show resolved Hide resolved
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>
}
{badges.map((badge, index) => (<ServiceInfoBadge info={badge} key={index} />))}
KhudaDad414 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

@princerajpoot20 princerajpoot20 Nov 22, 2023

Choose a reason for hiding this comment

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

Suggested change
{badges.map((badge, index) => (<ServiceInfoBadge info={badge} key={index} />))}
{Array.from(new Set(badges))
.filter(badge => validBadges.includes(badge))
.map((badge, index) => (<ServiceInfoBadge info={badge} key={`${badge}-${index}`} />))}
  • I noticed that invalid badges leave a blank space (reserved for that invalid badge).
    What do you think about adding a check for this also? If a badge is not valid, we could simply ignore it instead of reserving blank space.

For this, we need to add an export of the list of valid badges from ServiceInfoBadge

export const validBadges: Info[] = ['http', 'kafka', 'websocket', 'amqp', 'mqtt', 'googlepubsub', 'ibmmq', 'nats', 'pulsar', 'redis', 'sns', 'sqs', 'solace', 'stomp', 'client', 'server'];

Copy link
Member Author

Choose a reason for hiding this comment

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

we are already marking it's type as Info[] so it will give error in Typescript. so I am more in favour of letting typescript give the error.

Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I didn't get this, could you please explain that further.

Copy link
Member Author

Choose a reason for hiding this comment

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

@princerajpoot20 I mean Typescript doesn't allow invalid badges:

Screenshot 2023-11-29 at 16 33 31

Copy link
Member

Choose a reason for hiding this comment

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

@KhudaDad414 Okay, got it. Makes sense. 👍

</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)',
},
},
}
};