mirror of
https://github.com/simstudioai/sim.git
synced 2026-04-06 03:00:16 -04:00
feat(turbo): restructured repo to be a standard turborepo monorepo (#341)
* added turborepo * finished turbo migration * updated gitignore * use dotenv & run format * fixed error in docs * remove standalone deployment in prod * fix ts error, remove ignore ts errors during build * added formatter to the end of the docs generator
This commit is contained in:
Waleed Latif
44
apps/docs/components/ui/block-info-card.tsx
Normal file
44
apps/docs/components/ui/block-info-card.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
|
||||
interface BlockInfoCardProps {
|
||||
type: string
|
||||
color: string
|
||||
icon?: boolean
|
||||
iconSvg?: string
|
||||
}
|
||||
|
||||
export function BlockInfoCard({
|
||||
type,
|
||||
color,
|
||||
icon = false,
|
||||
iconSvg,
|
||||
}: BlockInfoCardProps): React.ReactNode {
|
||||
return (
|
||||
<div className="mb-6 rounded-lg overflow-hidden border border-border">
|
||||
<div className="flex items-center justify-center p-6">
|
||||
<div
|
||||
className="h-20 w-20 rounded-lg flex items-center justify-center"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{iconSvg ? (
|
||||
<div className="w-10 h-10 text-white" dangerouslySetInnerHTML={{ __html: iconSvg }} />
|
||||
) : (
|
||||
<div className="text-xl font-mono opacity-70">{type.substring(0, 2)}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{icon && (
|
||||
<style jsx global>{`
|
||||
.block-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 1rem auto;
|
||||
display: block;
|
||||
}
|
||||
`}</style>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
148
apps/docs/components/ui/block-types.tsx
Normal file
148
apps/docs/components/ui/block-types.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { AgentIcon, ApiIcon, ChartBarIcon, CodeIcon, ConditionalIcon, ConnectIcon } from '../icons'
|
||||
|
||||
// Custom Feature component specifically for BlockTypes to handle the 6-item layout
|
||||
const BlockFeature = ({
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
href,
|
||||
index,
|
||||
totalItems,
|
||||
itemsPerRow,
|
||||
}: {
|
||||
title: string
|
||||
description: string
|
||||
icon: React.ReactNode
|
||||
href?: string
|
||||
index: number
|
||||
totalItems: number
|
||||
itemsPerRow: number
|
||||
}) => {
|
||||
const blockColor = {
|
||||
'--block-color':
|
||||
title === 'Agent'
|
||||
? '#8b5cf6'
|
||||
: title === 'API'
|
||||
? '#3b82f6'
|
||||
: title === 'Condition'
|
||||
? '#f59e0b'
|
||||
: title === 'Function'
|
||||
? '#10b981'
|
||||
: title === 'Router'
|
||||
? '#6366f1'
|
||||
: title === 'Evaluator'
|
||||
? '#ef4444'
|
||||
: '#8b5cf6',
|
||||
} as React.CSSProperties
|
||||
|
||||
const content = (
|
||||
<>
|
||||
{index < itemsPerRow && (
|
||||
<div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
|
||||
)}
|
||||
{index >= itemsPerRow && (
|
||||
<div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
|
||||
)}
|
||||
<div
|
||||
className="mb-4 relative z-10 px-10 text-neutral-500 group-hover/feature:text-[color:var(--block-color,#8b5cf6)] dark:text-neutral-400 dark:group-hover/feature:text-[color:var(--block-color,#a78bfa)] transition-colors duration-200"
|
||||
style={blockColor}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-lg font-bold mb-2 relative z-10 px-10">
|
||||
<div
|
||||
className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-[color:var(--block-color,#8b5cf6)] transition-all duration-200 origin-center"
|
||||
style={blockColor}
|
||||
/>
|
||||
<span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
|
||||
{description}
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
|
||||
const containerClasses = cn(
|
||||
'flex flex-col lg:border-r py-5 relative group/feature dark:border-neutral-800',
|
||||
(index === 0 || index === itemsPerRow) && 'lg:border-l dark:border-neutral-800',
|
||||
index < itemsPerRow && 'lg:border-b dark:border-neutral-800',
|
||||
href && 'cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900/50 transition-colors'
|
||||
)
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} className={containerClasses} style={{ textDecoration: 'none' }}>
|
||||
{content}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
return <div className={containerClasses}>{content}</div>
|
||||
}
|
||||
|
||||
export function BlockTypes() {
|
||||
const features = [
|
||||
{
|
||||
title: 'Agent',
|
||||
description:
|
||||
'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.',
|
||||
icon: <AgentIcon className="w-6 h-6" />,
|
||||
href: '/blocks/agent',
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
description:
|
||||
'Connect to any external API with support for all standard HTTP methods and customizable request parameters.',
|
||||
icon: <ApiIcon className="w-6 h-6" />,
|
||||
href: '/blocks/api',
|
||||
},
|
||||
{
|
||||
title: 'Condition',
|
||||
description:
|
||||
'Add a condition to the workflow to branch the execution path based on a boolean expression.',
|
||||
icon: <ConditionalIcon className="w-6 h-6" />,
|
||||
href: '/blocks/condition',
|
||||
},
|
||||
{
|
||||
title: 'Function',
|
||||
description:
|
||||
'Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic.',
|
||||
icon: <CodeIcon className="w-6 h-6" />,
|
||||
href: '/blocks/function',
|
||||
},
|
||||
{
|
||||
title: 'Router',
|
||||
description:
|
||||
'Intelligently direct workflow execution to different paths based on input analysis.',
|
||||
icon: <ConnectIcon className="w-6 h-6" />,
|
||||
href: '/blocks/router',
|
||||
},
|
||||
{
|
||||
title: 'Evaluator',
|
||||
description:
|
||||
'Assess content using customizable evaluation metrics and scoring criteria across multiple dimensions.',
|
||||
icon: <ChartBarIcon className="w-6 h-6" />,
|
||||
href: '/blocks/evaluator',
|
||||
},
|
||||
]
|
||||
|
||||
const totalItems = features.length
|
||||
const itemsPerRow = 3 // For large screens
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 relative z-10 py-10 max-w-7xl mx-auto">
|
||||
{features.map((feature, index) => (
|
||||
<BlockFeature
|
||||
key={feature.title}
|
||||
{...feature}
|
||||
index={index}
|
||||
totalItems={totalItems}
|
||||
itemsPerRow={itemsPerRow}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
102
apps/docs/components/ui/features.tsx
Normal file
102
apps/docs/components/ui/features.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import {
|
||||
IconAdjustmentsBolt,
|
||||
IconCloud,
|
||||
IconEaseInOut,
|
||||
IconHeart,
|
||||
IconHelp,
|
||||
IconHistory,
|
||||
IconRouteAltLeft,
|
||||
IconTerminal2,
|
||||
} from '@tabler/icons-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export function Features() {
|
||||
const features = [
|
||||
{
|
||||
title: 'Multi-LLM Support',
|
||||
description: 'Connect to any LLM provider including OpenAI, Anthropic, and more',
|
||||
icon: <IconCloud />,
|
||||
},
|
||||
{
|
||||
title: 'API Deployment',
|
||||
description: 'Deploy your workflows as secure, scalable APIs',
|
||||
icon: <IconTerminal2 />,
|
||||
},
|
||||
{
|
||||
title: 'Webhook Integration',
|
||||
description: 'Trigger workflows via webhooks from external services',
|
||||
icon: <IconRouteAltLeft />,
|
||||
},
|
||||
{
|
||||
title: 'Scheduled Execution',
|
||||
description: 'Schedule workflows to run at specific times or intervals',
|
||||
icon: <IconEaseInOut />,
|
||||
},
|
||||
{
|
||||
title: '40+ Integrations',
|
||||
description: 'Connect to hundreds of external services and data sources',
|
||||
icon: <IconAdjustmentsBolt />,
|
||||
},
|
||||
{
|
||||
title: 'Visual Debugging',
|
||||
description: 'Debug workflows visually with detailed execution logs',
|
||||
icon: <IconHelp />,
|
||||
},
|
||||
{
|
||||
title: 'Version Control',
|
||||
description: 'Track changes and roll back to previous versions',
|
||||
icon: <IconHistory />,
|
||||
},
|
||||
{
|
||||
title: 'Team Collaboration',
|
||||
description: 'Collaborate with team members on workflow development',
|
||||
icon: <IconHeart />,
|
||||
},
|
||||
]
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-20 py-10 max-w-7xl mx-auto">
|
||||
{features.map((feature, index) => (
|
||||
<Feature key={feature.title} {...feature} index={index} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Feature = ({
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
index,
|
||||
}: {
|
||||
title: string
|
||||
description: string
|
||||
icon: React.ReactNode
|
||||
index: number
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col lg:border-r py-5 relative group/feature dark:border-neutral-800',
|
||||
(index === 0 || index === 4) && 'lg:border-l dark:border-neutral-800',
|
||||
index < 4 && 'lg:border-b dark:border-neutral-800'
|
||||
)}
|
||||
>
|
||||
{index < 4 && (
|
||||
<div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
|
||||
)}
|
||||
{index >= 4 && (
|
||||
<div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
|
||||
)}
|
||||
<div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">{icon}</div>
|
||||
<div className="text-lg font-bold mb-2 relative z-10 px-10">
|
||||
<div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-purple-500 transition-all duration-200 origin-center" />
|
||||
<span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
48
apps/docs/components/ui/theme-image.tsx
Normal file
48
apps/docs/components/ui/theme-image.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
interface ThemeImageProps {
|
||||
lightSrc: string
|
||||
darkSrc: string
|
||||
alt: string
|
||||
width?: number
|
||||
height?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function ThemeImage({
|
||||
lightSrc,
|
||||
darkSrc,
|
||||
alt,
|
||||
width = 600,
|
||||
height = 400,
|
||||
className = 'rounded-lg border border-border my-6',
|
||||
}: ThemeImageProps) {
|
||||
const { resolvedTheme } = useTheme()
|
||||
const [imageSrc, setImageSrc] = useState(lightSrc)
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
// Wait until component is mounted to avoid hydration mismatch
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (mounted) {
|
||||
setImageSrc(resolvedTheme === 'dark' ? darkSrc : lightSrc)
|
||||
}
|
||||
}, [resolvedTheme, lightSrc, darkSrc, mounted])
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<Image src={imageSrc} alt={alt} width={width} height={height} className={className} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user