This repository has been archived by the owner on Oct 31, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Integration card rename and deprecate existing one (#74)
* Deprecate existing integration card * Rename new card to Integration card and update references --------- Co-authored-by: Rodrigo Arze Leon <[email protected]>
- Loading branch information
Showing
7 changed files
with
164 additions
and
164 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
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 was deleted.
Oops, something went wrong.
111 changes: 111 additions & 0 deletions
111
packages/ui/domain-components/DeprecatedIntegrationCard.tsx
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,111 @@ | ||
| import {Landmark} from 'lucide-react' | ||
| import React from 'react' | ||
| import type {Id} from '@openint/cdk' | ||
| import type {RouterOutput} from '@openint/engine-backend' | ||
| import {Badge, Card} from '../shadcn' | ||
| import {cn} from '../utils' | ||
|
|
||
| /** Can be img or next/image component */ | ||
| type ImageComponent = React.FC< | ||
| Omit< | ||
| React.DetailedHTMLProps< | ||
| React.ImgHTMLAttributes<HTMLImageElement>, | ||
| HTMLImageElement | ||
| >, | ||
| 'loading' | 'ref' | ||
| > | ||
| > | ||
|
|
||
| interface UIPropsNoChildren { | ||
| className?: string | ||
| Image?: ImageComponent | ||
| } | ||
|
|
||
| interface UIProps extends UIPropsNoChildren { | ||
| children?: React.ReactNode | ||
| } | ||
|
|
||
| type Integration = RouterOutput['listConfiguredIntegrations']['items'][number] | ||
|
|
||
| export const DeprecatedIntegrationCard = ({ | ||
| integration: int, | ||
| className, | ||
| children, | ||
| onClick, | ||
| ...uiProps | ||
| }: UIProps & { | ||
| integration: Integration & { | ||
| connectorName: string | ||
| connectorConfigId?: Id['ccfg'] | ||
| envName?: string | null | ||
| } | ||
| className?: string | ||
| onClick?: () => void | ||
| }) => ( | ||
| // <ConnectorCard | ||
| // {...props} | ||
| // showName={false} | ||
| // labels={int.envName ? [int.envName] : []} | ||
| // /> | ||
| <Card | ||
| className={cn( | ||
| 'm-3 flex h-36 w-48 flex-col p-4 sm:h-48 sm:w-64', | ||
| 'cursor-pointer rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-600', | ||
| className, | ||
| )} | ||
| onClick={onClick}> | ||
| <div className="flex h-6 self-stretch"> | ||
| {int.envName && ( | ||
| <Badge key={int.envName} variant="secondary"> | ||
| {int.envName} | ||
| </Badge> | ||
| )} | ||
| {/* {showStageBadge && ( | ||
| <Badge | ||
| variant="secondary" | ||
| className={cn( | ||
| 'ml-auto', | ||
| connector.stage === 'ga' && 'bg-green-200', | ||
| connector.stage === 'beta' && 'bg-blue-200', | ||
| connector.stage === 'alpha' && 'bg-pink-50', | ||
| )}> | ||
| {connector.stage} | ||
| </Badge> | ||
| )} */} | ||
| </div> | ||
| <IntegrationLogoTemp | ||
| {...uiProps} | ||
| integration={int} | ||
| // min-h-0 is a hack where some images do not shrink in height @see https://share.cleanshot.com/jMX1bzLP | ||
| className="h-12 min-h-0 w-12" | ||
| /> | ||
| <span className="mt-2 text-sm text-muted-foreground">{int.name}</span> | ||
| {/* {children} */} | ||
| </Card> | ||
| ) | ||
|
|
||
| /** Dedupe me with ResourceCard.IntegrationLogo */ | ||
| const IntegrationLogoTemp = ({ | ||
| integration: int, | ||
| className, | ||
| // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text | ||
| Image = (props) => <img {...props} />, | ||
| }: UIPropsNoChildren & { | ||
| integration: Integration | ||
| }) => | ||
| int.logo_url ? ( | ||
| <Image | ||
| // width={100} | ||
| // height={100} | ||
| src={int.logo_url} | ||
| alt={`"${int.name}" logo`} | ||
| className={cn('object-contain', className)} | ||
| /> | ||
| ) : ( | ||
| <div className={cn('flex flex-col items-center justify-center', className)}> | ||
| {/* <span>{int.name}</span> */} | ||
| <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary"> | ||
| <Landmark className="h-8 w-8 text-primary-foreground" /> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,48 @@ | ||
| import {Landmark} from 'lucide-react' | ||
| import React from 'react' | ||
| import type {Id} from '@openint/cdk' | ||
| import type {RouterOutput} from '@openint/engine-backend' | ||
| import {Badge, Card} from '../shadcn' | ||
| import {cn} from '../utils' | ||
| import {Plus} from 'lucide-react' | ||
| import {useState} from 'react' | ||
| import {Card, CardContent} from '../shadcn' | ||
|
|
||
| /** Can be img or next/image component */ | ||
| type ImageComponent = React.FC< | ||
| Omit< | ||
| React.DetailedHTMLProps< | ||
| React.ImgHTMLAttributes<HTMLImageElement>, | ||
| HTMLImageElement | ||
| >, | ||
| 'loading' | 'ref' | ||
| > | ||
| > | ||
|
|
||
| interface UIPropsNoChildren { | ||
| className?: string | ||
| Image?: ImageComponent | ||
| } | ||
|
|
||
| interface UIProps extends UIPropsNoChildren { | ||
| children?: React.ReactNode | ||
| } | ||
|
|
||
| type Integration = RouterOutput['listConfiguredIntegrations']['items'][number] | ||
|
|
||
| export const IntegrationCard = ({ | ||
| integration: int, | ||
| className, | ||
| children, | ||
| export function IntegrationCard({ | ||
| logo, | ||
| name, | ||
| onClick, | ||
| ...uiProps | ||
| }: UIProps & { | ||
| integration: Integration & { | ||
| connectorName: string | ||
| connectorConfigId?: Id['ccfg'] | ||
| envName?: string | null | ||
| } | ||
| className?: string | ||
| onClick?: () => void | ||
| }) => ( | ||
| // <ConnectorCard | ||
| // {...props} | ||
| // showName={false} | ||
| // labels={int.envName ? [int.envName] : []} | ||
| // /> | ||
| <Card | ||
| className={cn( | ||
| 'm-3 flex h-36 w-48 flex-col p-4 sm:h-48 sm:w-64', | ||
| 'cursor-pointer rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-600', | ||
| className, | ||
| )} | ||
| onClick={onClick}> | ||
| <div className="flex h-6 self-stretch"> | ||
| {int.envName && ( | ||
| <Badge key={int.envName} variant="secondary"> | ||
| {int.envName} | ||
| </Badge> | ||
| )} | ||
| {/* {showStageBadge && ( | ||
| <Badge | ||
| variant="secondary" | ||
| className={cn( | ||
| 'ml-auto', | ||
| connector.stage === 'ga' && 'bg-green-200', | ||
| connector.stage === 'beta' && 'bg-blue-200', | ||
| connector.stage === 'alpha' && 'bg-pink-50', | ||
| )}> | ||
| {connector.stage} | ||
| </Badge> | ||
| )} */} | ||
| </div> | ||
| <IntegrationLogoTemp | ||
| {...uiProps} | ||
| integration={int} | ||
| // min-h-0 is a hack where some images do not shrink in height @see https://share.cleanshot.com/jMX1bzLP | ||
| className="h-12 min-h-0 w-12" | ||
| /> | ||
| <span className="mt-2 text-sm text-muted-foreground">{int.name}</span> | ||
| {/* {children} */} | ||
| </Card> | ||
| ) | ||
| }: { | ||
| logo: string | ||
| name: string | ||
| onClick: () => void | ||
| }) { | ||
| const [isHovered, setIsHovered] = useState(false) | ||
|
|
||
| /** Dedupe me with ResourceCard.IntegrationLogo */ | ||
| const IntegrationLogoTemp = ({ | ||
| integration: int, | ||
| className, | ||
| // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text | ||
| Image = (props) => <img {...props} />, | ||
| }: UIPropsNoChildren & { | ||
| integration: Integration | ||
| }) => | ||
| int.logo_url ? ( | ||
| <Image | ||
| // width={100} | ||
| // height={100} | ||
| src={int.logo_url} | ||
| alt={`"${int.name}" logo`} | ||
| className={cn('object-contain', className)} | ||
| /> | ||
| ) : ( | ||
| <div className={cn('flex flex-col items-center justify-center', className)}> | ||
| {/* <span>{int.name}</span> */} | ||
| <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary"> | ||
| <Landmark className="h-8 w-8 text-primary-foreground" /> | ||
| </div> | ||
| </div> | ||
| return ( | ||
| <Card | ||
| className="relative h-[120px] w-[120px] cursor-pointer rounded-lg border border-gray-300 bg-white p-0 transition-colors duration-300 ease-in-out hover:border-[#8A7DFF] hover:bg-[#F8F7FF]" | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)}> | ||
| <CardContent | ||
| className="flex h-full flex-col items-center justify-center pt-6" | ||
| onClick={onClick}> | ||
| {isHovered ? ( | ||
| <div className="flex h-full flex-col items-center justify-center"> | ||
| <Plus color="#8A7DFF" size={24} /> | ||
| <span className="mt-2 font-sans text-[14px] font-semibold text-[#8A7DFF]"> | ||
| Add | ||
| </span>{' '} | ||
| {/* Set to 14px and semibold */} | ||
| </div> | ||
| ) : ( | ||
| <div className="flex h-full flex-col items-center justify-center"> | ||
| <img | ||
| src={logo} | ||
| alt={`${name} logo`} | ||
| className="h-8 w-8" | ||
| style={{marginBottom: '10px'}} | ||
| />{' '} | ||
| <p className="m-0 mb-2 text-center font-sans text-sm font-semibold"> | ||
| {name} | ||
| </p>{' '} | ||
| </div> | ||
| )} | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } |
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,5 +1,5 @@ | ||
| // codegen:start {preset: barrel, include: "./{*.{ts,tsx},*/index.{ts,tsx}}", exclude: "./**/*.{d,spec,test,fixture,gen,node}.{ts,tsx}"} | ||
| export * from './ConnectorCard' | ||
| export * from './IntegrationCard' | ||
| export * from './DeprecatedIntegrationCard' | ||
| export * from './ResourceCard' | ||
| // codegen:end |
6 changes: 3 additions & 3 deletions
6
...ges/ui/stories/ConnectionCard.stories.tsx → ...es/ui/stories/IntegrationCard.stories.tsx
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