@motiadev/workbench 0.0.1

package/src/components/ui/table.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />,
+)
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  ),
+)
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />
+  ),
+)
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className)}
+      {...props}
+    />
+  ),
+)
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+  ),
+)
+TableCaption.displayName = 'TableCaption'
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-list-flows.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+type Flow = {
+  id: string
+  name: string
+}
+
+export const useListFlows = () => {
+  const [isLoading, setIsLoading] = useState(true)
+  const [flows, setFlows] = useState<Flow[]>([])
+
+  useEffect(() => {
+    fetch('/flows')
+      .then((res) => res.json())
+      .then(setFlows)
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  return { flows, isLoading }
+}

package/src/hooks/use-log-listener.tsx

@@ -0,0 +1,32 @@
+import { Log, useLogs } from '@/stores/use-logs'
+import { useState, useEffect } from 'react'
+import { io } from 'socket.io-client'
+
+type UseWebSocketReturn = {
+  isConnected: boolean
+}
+
+const socket = io('/')
+
+export const useLogListener = (): UseWebSocketReturn => {
+  const [isConnected, setIsConnected] = useState(socket.connected)
+  const addLog = useLogs((state) => state.addLog)
+
+  useEffect(() => {
+    const onConnect = () => setIsConnected(true)
+    const onDisconnect = () => setIsConnected(false)
+    const onLog = (log: Log) => addLog(log)
+
+    socket.on('connect', onConnect)
+    socket.on('disconnect', onDisconnect)
+    socket.on('log', onLog)
+
+    return () => {
+      socket.off('connect', onConnect)
+      socket.off('disconnect', onDisconnect)
+      socket.off('log', onLog)
+    }
+  }, [addLog])
+
+  return { isConnected }
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.css

@@ -0,0 +1,190 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-size: 16px;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+  width: 100%;
+  color-scheme: light dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: 'PT Sans', serif;
+  font-optical-sizing: auto;
+}
+
+body {
+  margin: 0;
+  place-items: center;
+  min-height: 100dvh;
+  width: 100%;
+}
+
+
+button, textarea {
+  font-family: 'PT Sans', serif;
+}
+
+strong {
+  font-weight: 800;
+}
+
+body, #root {
+  width: 100dvw;
+  height: 100dvh;
+}
+
+.react-flow__attribution {
+  display: none;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes flowDash {
+  0%   { stroke-dashoffset: 0; }
+  100% { stroke-dashoffset: -20; }
+}
+
+.edge-animated {
+  stroke-dasharray: 5;      /* length of dash pattern */
+  stroke-linecap: round;    /* round the dash ends */
+  animation: flowDash 1s linear infinite;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,28 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+const router = createRouter({ routeTree })
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const root = createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}

package/src/publicComponents/api-node.tsx

@@ -0,0 +1,28 @@
+import { Webhook } from 'lucide-react'
+import { PropsWithChildren } from 'react'
+import { BaseNode } from './base-node'
+import { Emits } from './emits'
+import { ApiNodeProps } from './node-props'
+
+type Props = PropsWithChildren<ApiNodeProps & { excludePubsub?: boolean }>
+
+export const ApiNode = ({ data, children, excludePubsub }: Props) => {
+  return (
+    <BaseNode
+      variant="api"
+      title={data.name}
+      disableSourceHandle={!data.emits?.length}
+      disableTargetHandle={!data.subscribes?.length}
+    >
+      {data.description && <div className="text-sm max-w-[300px] text-white/60">{data.description}</div>}
+      {children}
+      {data.webhookUrl && (
+        <div className="flex gap-1 items-center text-xs text-white/60">
+          <Webhook className="w-3 h-3 text-white/40" />
+          <div className="font-mono">{data.webhookUrl}</div>
+        </div>
+      )}
+      {!excludePubsub && <Emits emits={data.emits} />}
+    </BaseNode>
+  )
+}

package/src/publicComponents/base-handle.tsx

@@ -0,0 +1,43 @@
+import React, { HTMLAttributes } from 'react'
+import { HandleProps, Position, Handle as RFHandle } from '@xyflow/react'
+import clsx from 'clsx'
+
+type Props = HandleProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    isHidden?: boolean
+  }
+
+export const BaseHandle: React.FC<Props> = (props) => {
+  const { isHidden, position, ...rest } = props
+
+  return (
+    <div
+      className={clsx(
+        'absolute w-1 h-1',
+        position === Position.Top && '-top-[10px]',
+        position === Position.Bottom && '-bottom-[10px]',
+        'left-1/2 -ml-[2px]',
+        isHidden && 'hidden',
+      )}
+    >
+      <RFHandle
+        {...rest}
+        position={position}
+        className="
+        !static
+        !w-1
+        !h-1
+        !min-w-[6px]
+        !min-h-[6px]
+        !p-0
+        !border-none
+        !bg-[#666666]
+        !transform-none
+        !rounded-full
+        !outline-none
+        !shadow-none
+      "
+      />
+    </div>
+  )
+}

package/src/publicComponents/base-node.tsx

@@ -0,0 +1,57 @@
+import { cn } from '@/lib/utils'
+import { Position } from '@xyflow/react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { PropsWithChildren } from 'react'
+import { BaseHandle } from './base-handle'
+
+const baseNodeVariants = cva('relative flex flex-col min-w-[300px] rounded-md overflow-hidden font-mono')
+
+const baseBackgroundVariants = cva('absolute -inset-[1px] rounded-md bg-gradient-to-r', {
+  variants: {
+    variant: {
+      event: 'from-teal-500/20 to-teal-400/10',
+      api: 'from-blue-500/20 to-blue-400/10',
+      noop: 'from-white/20 to-white/10',
+    },
+  },
+})
+
+type Props = PropsWithChildren<{
+  variant?: VariantProps<typeof baseBackgroundVariants>['variant']
+  title: string
+  headerChildren?: React.ReactNode
+  className?: string
+  disableSourceHandle?: boolean
+  disableTargetHandle?: boolean
+}>
+
+const HeaderBar = ({ text, children }: { text: string; children?: React.ReactNode }) => (
+  <div className="px-3 py-1 border-b border-white/20 bg-black/30 text-xs text-white/70 flex justify-between items-center">
+    <span>{text}</span>
+    {children}
+  </div>
+)
+
+export const BaseNode = (props: Props) => {
+  const { title, variant, className, children, disableSourceHandle, disableTargetHandle, headerChildren } = props
+
+  return (
+    <div className="group relative">
+      {/* Border container */}
+      <div className={cn(baseBackgroundVariants({ variant }))} />
+
+      {/* Main node content */}
+      <div className={cn(baseNodeVariants(), className)}>
+        <HeaderBar text={title} children={headerChildren} />
+        <div className="p-4 space-y-3">{children}</div>
+      </div>
+
+      {/* Connection points */}
+      {!disableTargetHandle && <BaseHandle type="target" position={Position.Top} />}
+      {!disableSourceHandle && <BaseHandle type="source" position={Position.Bottom} />}
+
+      {/* Stacked card effect */}
+      <div className="absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-black/20 rounded-md border border-white/5" />
+    </div>
+  )
+}

package/src/publicComponents/emits.tsx

@@ -0,0 +1,22 @@
+import { Send } from 'lucide-react'
+import { EventNodeData } from '../views/flow/nodes/nodes.types'
+
+const toType = (emit: string | { type: string; label?: string; conditional?: boolean }) =>
+  typeof emit === 'string' ? emit : emit.type
+
+export const Emits: React.FC<{ emits: EventNodeData['emits'] }> = ({ emits }) => {
+  return (
+    <>
+      {emits.map((emit) => (
+        <div
+          key={toType(emit)}
+          className="flex gap-2 items-center text-xs text-white/60"
+          data-testid={`emits__${toType(emit)}`}
+        >
+          <Send className="w-3 h-3 text-white/40" />
+          <div className="font-mono tracking-wider">{toType(emit)}</div>
+        </div>
+      ))}
+    </>
+  )
+}

package/src/publicComponents/event-node.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react'
+import { LanguageIndicator } from '../views/flow/nodes/language-indicator'
+import { BaseNode } from './base-node'
+import { Emits } from './emits'
+import { EventNodeProps } from './node-props'
+import { Subscribe } from './subscribe'
+
+type Props = PropsWithChildren<
+  EventNodeProps & {
+    excludePubsub?: boolean
+    className?: string
+  }
+>
+
+export const EventNode = (props: Props) => {
+  const { data, excludePubsub, children } = props
+
+  return (
+    <BaseNode
+      variant="event"
+      title={data.name}
+      disableSourceHandle={!data.emits.length}
+      disableTargetHandle={!data.subscribes.length}
+      headerChildren={<LanguageIndicator language={data.language} />}
+    >
+      {data.description && <div className="text-sm max-w-[300px] text-white/60">{data.description}</div>}
+      {children}
+      {!excludePubsub && (
+        <div className="space-y-2 pt-2 border-t border-white/10">
+          <Subscribe data={data} />
+        </div>
+      )}
+      <Emits emits={data.emits} />
+    </BaseNode>
+  )
+}

package/src/publicComponents/node-props.tsx

@@ -0,0 +1,15 @@
+import { EventNodeData, ApiNodeData, NoopNodeData } from '../views/flow/nodes/nodes.types'
+
+export type BaseNodeProps = EventNodeProps | NoopNodeProps | ApiNodeProps
+
+export type EventNodeProps = {
+  data: EventNodeData
+}
+
+export type NoopNodeProps = {
+  data: NoopNodeData
+}
+
+export type ApiNodeProps = {
+  data: ApiNodeData
+}

package/src/publicComponents/noop-node.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react'
+import { NoopNodeData } from '../views/flow/nodes/nodes.types'
+import { BaseNode } from './base-node'
+
+type Props = PropsWithChildren<{
+  data: NoopNodeData
+}>
+
+export const NoopNode = ({ data, children }: Props) => {
+  return (
+    <BaseNode
+      variant="noop"
+      title={data.name}
+      disableSourceHandle={!data.emits?.length}
+      disableTargetHandle={!data.subscribes?.length}
+    >
+      {data.description && <div className="text-sm max-w-[300px] text-white/60">{data.description}</div>}
+      {children}
+    </BaseNode>
+  )
+}

package/src/publicComponents/subscribe.tsx

@@ -0,0 +1,19 @@
+import { Eye } from 'lucide-react'
+import { EventNodeData } from '../views/flow/nodes/nodes.types'
+
+export const Subscribe: React.FC<{ data: EventNodeData }> = ({ data }) => {
+  return (
+    <>
+      {data.subscribes.map((subscribe) => (
+        <div
+          key={subscribe}
+          className="flex gap-2 items-center text-xs text-white/60"
+          data-testid={`subscribes__${subscribe}`}
+        >
+          <Eye className="w-3 h-3 text-white/40" />
+          <div className="font-mono tracking-wider">{subscribe}</div>
+        </div>
+      ))}
+    </>
+  )
+}