Skip to content
This repository has been archived by the owner on Oct 31, 2024. It is now read-only.

Commit

Permalink
merging main
Browse files Browse the repository at this point in the history
  • Loading branch information
@pellicceama
pellicceama committed Oct 18, 2024
2 parents 3d180e4 + 6765c53 commit 9babf91
Show file tree
Hide file tree
Showing 17 changed files with 2,560 additions and 495 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,5 @@ temp/
dist/

*.play.*

*storybook.log
3 changes: 3 additions & 0 deletions apps/web/app/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
--ring: 215 20.2% 65.1%;

--radius: 0.5rem;

--button: #8a5df6;
--button-foreground: #ffffff;
}

.dark {
Expand Down
4 changes: 3 additions & 1 deletion apps/web/components/ColorConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {useState} from 'react'
interface ThemeColors {
background: string
border: string
button: string
buttonForeground: string
foreground: string
primary: string
primaryForeground: string
Expand All @@ -14,7 +16,7 @@ interface ThemeColors {
cardForeground: string
}

const defaultThemeColors: ThemeColors = {
const defaultThemeColors: Partial<ThemeColors> = {
background: '0 0% 100%',
border: '214.3 31.8% 91.4%',
card: '0 0% 100%',
Expand Down
5 changes: 4 additions & 1 deletion apps/web/tailwind.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type {Config} from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

import {VeniceTheme} from './themes'

export default {
Expand Down Expand Up @@ -83,6 +82,10 @@ export default {
colors: {
// --- Begin shadcn tailwind config
border: 'hsl(var(--border))',
button: {
DEFAULT: 'var(--button)',
foreground: 'var(--button-foreground)',
},
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
Expand Down
217 changes: 127 additions & 90 deletions packages/engine-frontend/components/ConnectionPortal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
'use client'

import {Link, Loader, Settings} from 'lucide-react'
import {Loader, Settings} from 'lucide-react'
import type {Id} from '@openint/cdk'
import type {UIPropsNoChildren} from '@openint/ui'
import {
Badge,
Card,
ConnectorLogo,
DropdownMenu,
DropdownMenuContent,
Expand All @@ -14,6 +13,7 @@ import {
Separator,
useToast,
} from '@openint/ui'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@openint/ui/shadcn/Tabs'
import {cn} from '@openint/ui/utils'
import {R} from '@openint/util'
import {WithConnectConfig} from '../hocs/WithConnectConfig'
Expand Down Expand Up @@ -80,102 +80,139 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
return (
<div className={cn('gap-4 p-8', className)}>
{/* Listing by categories */}
<NewConnectionCard hasExisting={connectionCount > 0} />
<Card className="flex w-[500px] flex-col justify-between space-y-4 p-4">
<div className="flex flex-row items-center justify-start gap-2">
<Link className="size-6 text-[#8A5DF6]" />
<h3 className="text-xl font-semibold tracking-tight">
Connectors
</h3>
</div>
{listConnectionsRes.isLoading ? (
<div className="flex h-full items-center justify-center">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
</div>
) : (
categoriesWithConnections.map((category) => (
<div key={category.name} className="flex flex-col space-y-4">
{category.connections.map((conn) => (
<>
<Tabs defaultValue="connections" className="w-[400px]">
<TabsList>
<TabsTrigger value="connections">
My Connections ({connectionCount})
</TabsTrigger>
<TabsTrigger value="add-connection">
Add a Connection
</TabsTrigger>
</TabsList>
<TabsContent value="connections">
{connectionCount === 0 ? (
<div className="flex flex-col gap-2 p-4">
<div>
<p className="text-base font-semibold">
No connections yet
</p>
<p className="text-base">
Add a connection to get started
</p>
</div>
<ConnectDialog
className="self-end bg-[#8A5DF6] hover:bg-[#A082E9]"
connectorConfigFilters={{}}
onEvent={(event) => {
if (event.type === 'close') {
listConnectionsRes.refetch(); // Trigger refetch
}
}}
></ConnectDialog>
</div>
) : (
<div className="p-4">
{listConnectionsRes.isLoading ? (
<div className="flex h-full items-center justify-center">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
</div>
) : (
categoriesWithConnections.map((category) => (
<div
key={conn.id}
className="flex flex-row justify-between gap-4">
<div className="flex flex-row gap-4">
<ConnectorLogo
connector={conn.connectorConfig.connector}
className="size-[64px] rounded-lg"
/>
<div className="flex flex-col h-full justify-center">
<div className="flex flex-row gap-2 items-center">
<h4 className="font-bold">
{conn.connectorName.charAt(0).toUpperCase() +
conn.connectorName.slice(1)}
</h4>
<Badge variant="secondary">
{category.name}
</Badge>
</div>
{conn.pipelineIds.length > 0 && (
<div className="mt-2">
{conn.syncInProgress ? (
<div className="flex flex-row items-center justify-start gap-2">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
<p className="font-semibold">Syncing...</p>
key={category.name}
className="flex flex-col space-y-4">
{category.connections.map((conn) => (
<>
<div
key={conn.id}
className="flex flex-row justify-between gap-4">
<div className="flex flex-row gap-4">
<ConnectorLogo
connector={conn.connectorConfig.connector}
className="size-[64px] rounded-lg"
/>
<div className="flex h-full flex-col justify-center">
<div className="flex flex-row items-center gap-2">
<h4 className="font-bold">
{conn.connectorName
.charAt(0)
.toUpperCase() +
conn.connectorName.slice(1)}
</h4>
<Badge variant="secondary">
{category.name}
</Badge>
</div>
) : (
<p>Successfully synced</p>
)}
{conn.pipelineIds.length > 0 && (
<div className="mt-2">
{conn.syncInProgress ? (
<div className="flex flex-row items-center justify-start gap-2">
<Loader className="size-5 animate-spin text-[#8A5DF6]" />
<p className="font-semibold">
Syncing...
</p>
</div>
) : (
<p>Successfully synced</p>
)}
</div>
)}
</div>
</div>
)}
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger>
<Settings className="size-5 text-[#808080]" />
</DropdownMenuTrigger>
<DropdownMenuContent className="flex w-[80px] items-center justify-center">
<DropdownMenuItem
className="flex items-center justify-center"
onSelect={() =>
deleteResource.mutate({id: conn.id})
}>
<span className="text-center font-medium text-red-500">
Delete
</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger>
<Settings className="size-5 text-[#808080]" />
</DropdownMenuTrigger>
<DropdownMenuContent className="flex w-[80px] items-center justify-center">
<DropdownMenuItem
className="flex items-center justify-center"
onSelect={() =>
deleteResource.mutate({id: conn.id})
}>
<span className="text-center font-medium text-red-500">
Delete
</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* TODO: Improve the condition to hide the separator for the last item, right now it iterates
over all categories and all connections, would be good to have a single array of connections with the category
information included already */}
<Separator className="w-full" />
</>
))}
</div>
{/* TODO: Improve the condition to hide the separator for the last item, right now it iterates
over all categories and all connections, would be good to have a single array of connections with the category
information included already */}
<Separator className="w-full" />
</>
))}
))
)}
</div>
))
)}
<ConnectDialog
className="self-end bg-[#8A5DF6] hover:bg-[#A082E9]"
connectorConfigFilters={{}}
onEvent={(event) => {
if (event.type === 'close') {
listConnectionsRes.refetch(); // Trigger refetch
}
}}
></ConnectDialog>
</Card>
)}
</TabsContent>
<TabsContent value="add-connection">
<div className="flex flex-col gap-2 p-4">
<div>
<p className="text-base font-semibold">
Setup a new Connection
</p>
<p className="text-base">
Choose a connector config to start
</p>
</div>
<ConnectDialog
className="self-end bg-[#8A5DF6] hover:bg-[#A082E9]"
connectorConfigFilters={{}}
onEvent={(event) => {
if (event.type === 'close') {
listConnectionsRes.refetch(); // Trigger refetch
}
}}
></ConnectDialog>
</div>
</TabsContent>
</Tabs>
</div>
)
}}
</WithConnectConfig>
)
}

const NewConnectionCard = ({hasExisting}: {hasExisting: boolean}) => (
<div className="mb-4 flex flex-col items-start justify-center space-y-3 text-center">
<h3 className="text-[24px] font-semibold">
{hasExisting ? 'Connect another integration' : 'No integration connected'}
</h3>
</div>
)
51 changes: 51 additions & 0 deletions packages/ui/.storybook/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
const { dirname, join } = require('path')

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, 'package.json')))
}

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: [
'../stories/**/*.mdx',
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
addons: [
getAbsolutePath('@storybook/addon-onboarding'),
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-interactions'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
// Add the following configuration to support SVGs
viteFinal: async (config) => {
// Ensure plugins array is initialized
if (!config.plugins) {
config.plugins = [];
}

config.plugins.push({
name: 'svgr',
transform: (code, id) => {
if (/\.svg$/.test(id)) {
return {
code: `import { ReactComponent as Icon } from '${id}'; export default Icon;`,
map: null,
};
}
return null;
},
});
return config;
},
}

export default config
21 changes: 21 additions & 0 deletions packages/ui/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// import '../../../apps/web/app/global.css'

if (typeof document !== 'undefined') {
const script = document.createElement('script')
script.src = 'https://cdn.tailwindcss.com'
document.head.appendChild(script)
}

/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
}

export default preview
Loading

0 comments on commit 9babf91

Please sign in to comment.