@motiadev/workbench 0.0.5 → 0.0.7-build.20250529212805

package/src/components/ui/table.tsx

@@ -1,76 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,32 +0,0 @@
-'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

@@ -1,20 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,190 +0,0 @@
-@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

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

package/src/main.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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>
-      ))}
-    </>
-  )
-}