Skip to content

Commit 0bbcf69

Browse files
snrondinapellicceama
snrondina
and
pellicceama
authored
figma components and connectionstable (#404)
* figma components and connectionstable * vercel fix --------- Co-authored-by: Amadeo Pellicce <[email protected]>
1 parent 795e477 commit 0bbcf69

23 files changed

+2373
-5
lines changed

‎packages/ui-v1/components/BaseTableCell.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {cn} from '@openint/shadcn/lib/utils'
2+
import {CopyID} from './CopyID'
3+
import {StatusType} from './StatusDot'
4+
5+
interface BaseTableCellProps extends React.HTMLAttributes<HTMLDivElement> {
6+
/**
7+
* Name to display
8+
*/
9+
name: string
10+
/**
11+
* Logo/icon component or element
12+
*/
13+
logo: React.ReactNode
14+
/**
15+
* ID to be displayed and copied (optional for simple variant)
16+
*/
17+
id?: string
18+
/**
19+
* Status of the entity
20+
*/
21+
status?: StatusType
22+
/**
23+
* Whether to show the simple variant (logo and name only)
24+
*/
25+
simple?: boolean
26+
/**
27+
* Optional className for styling
28+
*/
29+
className?: string
30+
}
31+
32+
export function BaseTableCell({
33+
name,
34+
logo,
35+
id,
36+
status = 'healthy',
37+
simple = false,
38+
className,
39+
...props
40+
}: BaseTableCellProps) {
41+
return (
42+
<div
43+
className={cn(
44+
'flex items-center gap-3',
45+
simple ? 'py-1' : 'py-2',
46+
className,
47+
)}
48+
{...props}>
49+
<div className="relative flex-shrink-0">{logo}</div>
50+
{simple ? (
51+
<div className="flex items-center">
52+
<div className="text-sm font-medium">{name}</div>
53+
</div>
54+
) : (
55+
<div className="flex h-[55px] flex-col justify-between">
56+
<div className="text-sm font-medium">{name}</div>
57+
{id && <CopyID value={id} width={280} size="medium" />}
58+
</div>
59+
)}
60+
</div>
61+
)
62+
}

‎packages/ui-v1/components/ConnectionTableCell.stories.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import type {Meta, StoryObj} from '@storybook/react'
2+
import {ConnectionTableCell} from './ConnectionTableCell'
3+
import {CopyID} from './CopyID'
4+
5+
const meta: Meta<typeof ConnectionTableCell> = {
6+
title: 'Components/ConnectionTableCell',
7+
component: ConnectionTableCell,
8+
argTypes: {
9+
name: {
10+
control: 'text',
11+
description: 'Name of the connection',
12+
},
13+
id: {
14+
control: 'text',
15+
description: 'ID of the connection',
16+
},
17+
status: {
18+
control: 'select',
19+
options: ['healthy', 'warning', 'offline', 'destructive'],
20+
description: 'Status of the connection',
21+
},
22+
backgroundColor: {
23+
control: 'color',
24+
description: 'Background color for the logo container',
25+
},
26+
simple: {
27+
control: 'boolean',
28+
description: 'Whether to show the simple variant',
29+
},
30+
},
31+
}
32+
33+
export default meta
34+
type Story = StoryObj<typeof ConnectionTableCell>
35+
36+
export const Default: Story = {
37+
args: {
38+
name: 'AWS S3 Connection',
39+
id: '12345678',
40+
status: 'healthy',
41+
backgroundColor: '#f1f5f9',
42+
},
43+
}
44+
45+
export const Simple: Story = {
46+
args: {
47+
name: 'AWS S3 Connection',
48+
status: 'healthy',
49+
backgroundColor: '#f1f5f9',
50+
simple: true,
51+
},
52+
}
53+
54+
export const WithDifferentStatuses: Story = {
55+
render: () => (
56+
<div className="flex flex-col gap-4">
57+
<ConnectionTableCell
58+
name="AWS S3 Connection"
59+
id="12345678"
60+
status="healthy"
61+
backgroundColor="#f1f5f9"
62+
/>
63+
<ConnectionTableCell
64+
name="Google Cloud Storage"
65+
id="87654321"
66+
status="warning"
67+
backgroundColor="#e0f2fe"
68+
/>
69+
<ConnectionTableCell
70+
name="Azure Blob Storage"
71+
id="24681357"
72+
status="offline"
73+
backgroundColor="#dbeafe"
74+
/>
75+
<ConnectionTableCell
76+
name="DigitalOcean Spaces"
77+
id="13572468"
78+
status="destructive"
79+
backgroundColor="#d1e9dd"
80+
/>
81+
</div>
82+
),
83+
}
84+
85+
export const CopyIDOnly: Story = {
86+
render: () => (
87+
<div className="p-4">
88+
<CopyID value="CONNID_12345678" width={300} size="medium" />
89+
</div>
90+
),
91+
}

‎packages/ui-v1/components/ConnectionTableCell.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import {cn} from '@openint/shadcn/lib/utils'
2+
import {BaseTableCell} from './BaseTableCell'
3+
import {StatusDot, StatusType} from './StatusDot'
4+
5+
interface ConnectionTableCellProps
6+
extends React.HTMLAttributes<HTMLDivElement> {
7+
/**
8+
* Name of the connection
9+
*/
10+
name: string
11+
/**
12+
* ID of the connection
13+
*/
14+
id?: string
15+
/**
16+
* Status of the connection
17+
*/
18+
status?: StatusType
19+
/**
20+
* Background color for the logo container
21+
*/
22+
backgroundColor?: string
23+
/**
24+
* Text color for the initials
25+
*/
26+
textColor?: string
27+
/**
28+
* Whether to show the simple variant (logo and name only)
29+
*/
30+
simple?: boolean
31+
/**
32+
* Optional className for styling
33+
*/
34+
className?: string
35+
}
36+
37+
export function ConnectionTableCell({
38+
name,
39+
id,
40+
status = 'healthy',
41+
backgroundColor = '#f1f5f9', // Default light gray
42+
textColor = '#666666', // Default text color
43+
simple = false,
44+
className,
45+
...props
46+
}: ConnectionTableCellProps) {
47+
const logo = (
48+
<div
49+
className={cn(
50+
'relative flex h-[55px] w-[55px] items-center justify-center overflow-hidden rounded',
51+
simple && 'h-10 w-10',
52+
)}
53+
style={{backgroundColor}}>
54+
<span
55+
className={cn('font-medium', simple ? 'text-xs' : 'text-base')}
56+
style={{color: textColor}}>
57+
{name.substring(0, 2).toUpperCase()}
58+
</span>
59+
{status && (
60+
<div
61+
className={cn(
62+
'absolute right-1 top-1',
63+
simple && 'right-0.5 top-0.5',
64+
)}>
65+
<StatusDot status={status} />
66+
</div>
67+
)}
68+
</div>
69+
)
70+
71+
return (
72+
<BaseTableCell
73+
name={name}
74+
logo={logo}
75+
id={id ? `CONNID_${id}` : undefined}
76+
status={status}
77+
simple={simple}
78+
className={className}
79+
{...props}
80+
/>
81+
)
82+
}

‎packages/ui-v1/components/ConnectorConfigTableCell.stories.tsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import type {Meta, StoryObj} from '@storybook/react'
2+
import {ConnectorConfigTableCell} from './ConnectorConfigTableCell'
3+
import {CopyID} from './CopyID'
4+
5+
const meta: Meta<typeof ConnectorConfigTableCell> = {
6+
title: 'Components/ConnectorConfigTableCell',
7+
component: ConnectorConfigTableCell,
8+
argTypes: {
9+
name: {
10+
control: 'text',
11+
description: 'Name of the connector config',
12+
},
13+
id: {
14+
control: 'text',
15+
description: 'ID of the connector config',
16+
},
17+
status: {
18+
control: 'select',
19+
options: ['healthy', 'warning', 'offline', 'destructive'],
20+
description: 'Status of the connector config',
21+
},
22+
backgroundColor: {
23+
control: 'color',
24+
description: 'Background color for the logo container',
25+
},
26+
textColor: {
27+
control: 'color',
28+
description: 'Text color for the initials',
29+
},
30+
simple: {
31+
control: 'boolean',
32+
description: 'Whether to show the simple variant',
33+
},
34+
},
35+
}
36+
37+
export default meta
38+
type Story = StoryObj<typeof ConnectorConfigTableCell>
39+
40+
export const Default: Story = {
41+
args: {
42+
name: 'Salesforce Connector Config',
43+
id: '12345678',
44+
status: 'healthy',
45+
backgroundColor: '#e0f2fe',
46+
textColor: '#0ea5e9',
47+
},
48+
}
49+
50+
export const Simple: Story = {
51+
args: {
52+
name: 'Salesforce Connector Config',
53+
status: 'healthy',
54+
backgroundColor: '#e0f2fe',
55+
textColor: '#0ea5e9',
56+
simple: true,
57+
},
58+
}
59+
60+
export const WithDifferentStatuses: Story = {
61+
render: () => (
62+
<div className="flex flex-col gap-4">
63+
<ConnectorConfigTableCell
64+
name="Salesforce Config"
65+
id="12345678"
66+
status="healthy"
67+
backgroundColor="#e0f2fe"
68+
textColor="#0ea5e9"
69+
/>
70+
<ConnectorConfigTableCell
71+
name="HubSpot Config"
72+
id="87654321"
73+
status="warning"
74+
backgroundColor="#dbeafe"
75+
textColor="#3b82f6"
76+
/>
77+
<ConnectorConfigTableCell
78+
name="Stripe Config"
79+
id="24681357"
80+
status="offline"
81+
backgroundColor="#f0f9ff"
82+
textColor="#0369a1"
83+
/>
84+
<ConnectorConfigTableCell
85+
name="Zendesk Config"
86+
id="13572468"
87+
status="destructive"
88+
backgroundColor="#e0f2fe"
89+
textColor="#0ea5e9"
90+
/>
91+
</div>
92+
),
93+
}
94+
95+
export const CopyIDOnly: Story = {
96+
render: () => (
97+
<div className="p-4">
98+
<CopyID value="CCFGID_12345678" width={300} size="medium" />
99+
</div>
100+
),
101+
}

0 commit comments

Comments
 (0)