@motiadev/workbench 0.0.6 → 0.0.8

package/src/stores/use-logs.ts

@@ -1,22 +0,0 @@
-import { create } from 'zustand'
-
-export type Log = {
-  level: string
-  time: number
-  msg: string
-  traceId: string
-  flows: string[]
-  [key: string]: any
-}
-
-export type LogsState = {
-  logs: Log[]
-  addLog: (log: Log) => void
-  resetLogs: () => void
-}
-
-export const useLogs = create<LogsState>()((set) => ({
-  logs: [],
-  addLog: (log) => set((state) => ({ ...state, logs: [...state.logs, log] })),
-  resetLogs: () => set({ logs: [] }),
-}))

package/src/views/flow/arrow-head.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-type Props = {
-  color: string
-  id: string
-}
-
-export const ArrowHead: React.FC<Props> = (props) => (
-  <marker id={props.id} viewBox="-5 -5 10 10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10">
-    <line x1={0} y1={0} x2={2} y2={-2} stroke={props.color} strokeWidth="1" strokeOpacity="1" strokeLinecap="round" />
-    <line x1={-2} y1={-2} x2={0} y2={0} stroke={props.color} strokeWidth="1" strokeOpacity="1" strokeLinecap="round" />
-  </marker>
-)

package/src/views/flow/base-edge.tsx

@@ -1,31 +0,0 @@
-import { BaseEdge as BaseReactFlowEdge, EdgeProps, getSmoothStepPath } from '@xyflow/react'
-import React from 'react'
-
-export const BaseEdge: React.FC<EdgeProps> = (props) => {
-  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props
-
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition,
-    borderRadius: 20,
-    offset: 10,
-  })
-
-  return (
-    <BaseReactFlowEdge
-      path={edgePath}
-      style={{
-        stroke: data?.variant === 'virtual' ? 'rgb(147, 169, 197)' : 'rgb(133, 176, 132)',
-        strokeWidth: 0.5,
-        shapeRendering: 'geometricPrecision',
-        fill: 'none',
-        mixBlendMode: 'screen',
-      }}
-      className="edge-animated"
-    />
-  )
-}

package/src/views/flow/flow-loader.tsx

@@ -1,3 +0,0 @@
-export const FlowLoader = () => {
-  return <div className="absolute z-10 inset-0 w-full h-full bg-[#060911]" />
-}

package/src/views/flow/flow-view.tsx

@@ -1,72 +0,0 @@
-import { Background, BackgroundVariant, ReactFlow } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import { BaseEdge } from './base-edge'
-import { ArrowHead } from './arrow-head'
-import { useGetFlowState, FlowResponse } from './hooks/use-get-flow-state'
-import { useCallback, useEffect, useState } from 'react'
-import { NodeOrganizer } from './node-organizer'
-import { FlowLoader } from './flow-loader'
-import { useLogListener } from '@/hooks/use-log-listener'
-import { LogConsole } from '@/components/log-console'
-import { Legend } from './legend'
-
-const edgeTypes = {
-  base: BaseEdge,
-}
-
-type Props = {
-  flow: FlowResponse
-}
-
-export const FlowView: React.FC<Props> = ({ flow }) => {
-  const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow)
-  const [initialized, setInitialized] = useState(false)
-  const [hoveredType, setHoveredType] = useState<string | null>(null)
-
-  useLogListener()
-
-  useEffect(() => setInitialized(false), [flow])
-  const onInitialized = useCallback(() => {
-    setTimeout(() => setInitialized(true), 10)
-  }, [])
-
-  const highlightClass = (nodeType?: string) => {
-    if (!hoveredType) return ''
-    return nodeType === hoveredType
-      ? 'shadow-[0_0_15px_rgba(255,255,255,0.15)] border border-white/30 scale-[1.02] transition-all duration-300'
-      : 'opacity-30 transition-all duration-300'
-  }
-
-  const nodesWithHighlights = nodes.map((node) => ({
-    ...node,
-    className: highlightClass(node.data.type), // Access type from `data.type`
-  }))
-
-  if (!nodeTypes) {
-    return null
-  }
-
-  return (
-    <div className="w-full h-full relative bg-black">
-      {!initialized && <FlowLoader />}
-      <Legend onHover={setHoveredType} />
-      <ReactFlow
-        nodes={nodesWithHighlights}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-      >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#444" />
-        <NodeOrganizer onInitialized={onInitialized} />
-        <svg>
-          <defs>
-            <ArrowHead color="#B3B3B3" id="arrowhead" />
-          </defs>
-        </svg>
-      </ReactFlow>
-      <LogConsole />
-    </div>
-  )
-}

package/src/views/flow/hooks/use-get-flow-state.tsx

@@ -1,93 +0,0 @@
-import { Edge, Node, useEdgesState, useNodesState } from '@xyflow/react'
-import { useEffect, useState } from 'react'
-import type { EdgeData, NodeData } from '../nodes/nodes.types'
-import { ApiFlowNode } from '../nodes/api-flow-node'
-import { NoopFlowNode } from '../nodes/noop-flow-node'
-import { EventFlowNode } from '../nodes/event-flow-node'
-
-type Emit = string | { type: string; label?: string }
-
-type FlowStep = {
-  id: string
-  name: string
-  type: 'event' | 'api' | 'noop'
-  description?: string
-  subscribes?: string[]
-  emits: Emit[]
-  virtualEmits?: Emit[]
-  action?: 'webhook'
-  webhookUrl?: string
-  language?: string
-  nodeComponentPath?: string
-}
-
-export type FlowResponse = {
-  id: string
-  name: string
-  steps: FlowStep[]
-  edges: FlowEdge[]
-}
-
-type FlowEdge = {
-  id: string
-  source: string
-  target: string
-  data: EdgeData
-}
-
-type FlowState = {
-  nodes: Node<NodeData>[]
-  edges: Edge<EdgeData>[]
-  nodeTypes: Record<string, React.ComponentType<any>>
-}
-
-async function importFlow(flow: FlowResponse): Promise<FlowState> {
-  const nodeTypes: Record<string, React.ComponentType<any>> = {
-    event: EventFlowNode,
-    api: ApiFlowNode,
-    noop: NoopFlowNode,
-  }
-
-  // Load custom node components if they exist
-  for (const step of flow.steps) {
-    if (step.nodeComponentPath) {
-      const module = await import(/* @vite-ignore */ step.nodeComponentPath)
-      nodeTypes[step.nodeComponentPath] = module.default
-    }
-  }
-
-  // Create nodes from steps
-  const nodes: Node<NodeData>[] = flow.steps.map((step) => ({
-    id: step.id,
-    type: step.nodeComponentPath ? step.nodeComponentPath : step.type,
-    position: { x: 0, y: 0 },
-    data: step,
-    language: step.language,
-  }))
-
-  // Use the edges provided by the API, adding required ReactFlow properties
-  const edges: Edge<EdgeData>[] = flow.edges.map((edge) => ({
-    ...edge,
-    type: 'base',
-  }))
-
-  return { nodes, edges, nodeTypes }
-}
-
-export const useGetFlowState = (flow: FlowResponse) => {
-  const [nodeTypes, setNodeTypes] = useState<Record<string, React.ComponentType<any>>>()
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([])
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<EdgeData>>([])
-
-  useEffect(() => {
-    if (!flow) return
-
-    importFlow(flow).then(({ nodes, edges, nodeTypes }) => {
-      setNodes(nodes)
-      setEdges(edges)
-      setNodeTypes(nodeTypes)
-    })
-  }, [flow])
-
-  return { nodes, edges, onNodesChange, onEdgesChange, nodeTypes }
-}

package/src/views/flow/hooks/use-organize-nodes.ts

@@ -1,60 +0,0 @@
-import { Edge, Node } from '@xyflow/react'
-import dagre from 'dagre'
-import { useEffect, useRef } from 'react'
-import { EventNodeData, EdgeData, ApiNodeData } from '../nodes/nodes.types'
-
-const organizeNodes = (
-  nodes: Node<EventNodeData | ApiNodeData>[],
-  edges: Edge<EdgeData>[],
-): Node<EventNodeData | ApiNodeData>[] => {
-  const dagreGraph = new dagre.graphlib.Graph({ compound: true })
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-  // Top-to-bottom layout
-  dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' })
-
-  nodes.forEach((node) => {
-    dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height })
-  })
-
-  edges.forEach((edge) => {
-    if (typeof edge.label === 'string') {
-      dagreGraph.setEdge(edge.source, edge.target, {
-        label: edge.label ?? '',
-        width: edge.label.length * 40, // Add width for the label
-        height: 30, // Add height for the label
-        labelpos: 'c', // Position label in center
-      })
-    } else {
-      dagreGraph.setEdge(edge.source, edge.target)
-    }
-  })
-
-  dagre.layout(dagreGraph)
-
-  return nodes.map((node) => {
-    const { x, y } = dagreGraph.node(node.id)
-    const position = {
-      x: x - (node.measured?.width ?? 0) / 2,
-      y: y - (node.measured?.height ?? 0) / 2,
-    }
-
-    return { ...node, position }
-  })
-}
-
-export const useOrganizeNodes = (
-  nodes: Node<EventNodeData | ApiNodeData>[],
-  edges: Edge<EdgeData>[],
-  setNodes: (nodes: Node<EventNodeData | ApiNodeData>[]) => void,
-) => {
-  const organizedRef = useRef<boolean>(false)
-
-  useEffect(() => {
-    if (!nodes.length || !edges.length || !nodes[0].measured || organizedRef.current) return
-
-    const layoutedNodes = organizeNodes(nodes, edges)
-    setNodes(layoutedNodes)
-    organizedRef.current = true
-  }, [nodes, edges, setNodes])
-}

package/src/views/flow/legend.tsx

@@ -1,96 +0,0 @@
-export const Legend = ({ onHover }: { onHover: (type: string | null) => void }) => {
-  const legendItems = [
-    {
-      label: 'Event (Core)',
-      type: 'event',
-      bgColor: 'bg-green-950/40',
-      description: 'Core logic components that process events.',
-    },
-    {
-      label: 'API',
-      type: 'api',
-      bgColor: 'bg-blue-950/40',
-      description: 'HTTP endpoints that trigger flows.',
-    },
-    {
-      label: 'Noop (Non-Operation)',
-      type: 'noop',
-      bgColor: 'bg-zinc-950/40',
-      description: 'Placeholder nodes for external processes.',
-    },
-  ]
-
-  const edgeLegendItems = [
-    {
-      label: 'Event Edge',
-      color: 'rgb(133, 176, 132)', // Solid green line
-      description: 'Represents an event emitted and subscribed by steps.',
-      dashed: true,
-    },
-    {
-      label: 'Virtual Edge',
-      color: 'rgb(147, 169, 197)', // Dotted blue line
-      description: 'Represents virtual connections.',
-      dashed: true,
-    },
-  ]
-
-  const renderSwatch = (bgColor: string) => (
-    <div className="relative group">
-      <div className="absolute -inset-[1px] rounded bg-gradient-to-r from-white/20 to-white/10" />
-      <div className={`relative ${bgColor} w-8 h-8 rounded border border-white/10`} />
-      <div className="absolute inset-0 -z-10 translate-y-0.5 translate-x-0.5 bg-black/20 rounded border border-white/5" />
-    </div>
-  )
-
-  const renderEdgeSwatch = (color: string, dashed: boolean) => (
-    <svg width="48" height="10" viewBox="0 0 48 10" xmlns="http://www.w3.org/2000/svg">
-      <line
-        x1="0"
-        y1="5"
-        x2="48"
-        y2="5"
-        stroke={color}
-        strokeWidth=".8"
-        strokeDasharray={dashed ? '4 3' : 'none'} // Match the dashed or solid style
-        strokeLinecap="round" // Rounded edges
-      />
-    </svg>
-  )
-
-  return (
-    <div className="absolute right-4 top-4 font-mono rounded-lg border border-white/20 p-4 z-10 shadow-xl">
-      <div className="text-sm text-white mb-3 font-semibold">Flow Legend</div>
-      <div className="flex flex-col gap-3">
-        {legendItems.map((item) => (
-          <div
-            key={item.type}
-            onMouseEnter={() => onHover(item.type)}
-            onMouseLeave={() => onHover(null)}
-            className="group cursor-pointer transition-all hover:bg-white/5 rounded p-1 -mx-1"
-          >
-            <div className="flex items-start gap-3">
-              {renderSwatch(item.bgColor)}
-              <div className="flex-1">
-                <div className="text-white text-xs font-medium">{item.label}</div>
-                <div className="text-white/60 text-xs mt-0.5">{item.description}</div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="text-sm text-white mt-4 mb-3 font-semibold">Edge Legend</div>
-      <div className="flex flex-col gap-3">
-        {edgeLegendItems.map((item) => (
-          <div key={item.label} className="flex items-start gap-3">
-            {renderEdgeSwatch(item.color, item.dashed)}
-            <div className="flex-1">
-              <div className="text-white text-xs font-medium">{item.label}</div>
-              <div className="text-white/60 text-xs mt-0.5">{item.description}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/views/flow/node-organizer.tsx

@@ -1,70 +0,0 @@
-import { Edge, Node, useNodesInitialized, useReactFlow } from '@xyflow/react'
-import dagre from 'dagre'
-import { useEffect } from 'react'
-import { EventNodeData, EdgeData, ApiNodeData } from './nodes/nodes.types'
-
-const organizeNodes = (
-  nodes: Node<EventNodeData | ApiNodeData>[],
-  edges: Edge<EdgeData>[],
-): Node<EventNodeData | ApiNodeData>[] => {
-  const dagreGraph = new dagre.graphlib.Graph({ compound: true })
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-  // Top-to-bottom layout
-  dagreGraph.setGraph({ rankdir: 'TB', ranksep: 80, nodesep: 60, edgesep: 20, ranker: 'tight-tree' })
-
-  nodes.forEach((node) => {
-    dagreGraph.setNode(node.id, { width: node.measured?.width, height: node.measured?.height })
-  })
-
-  edges.forEach((edge) => {
-    if (typeof edge.label === 'string') {
-      dagreGraph.setEdge(edge.source, edge.target, {
-        label: edge.label ?? '',
-        width: edge.label.length * 40, // Add width for the label
-        height: 30, // Add height for the label
-        labelpos: 'c', // Position label in center
-      })
-    } else {
-      dagreGraph.setEdge(edge.source, edge.target)
-    }
-  })
-
-  dagre.layout(dagreGraph)
-
-  return nodes.map((node) => {
-    const { x, y } = dagreGraph.node(node.id)
-    const position = {
-      x: x - (node.measured?.width ?? 0) / 2,
-      y: y - (node.measured?.height ?? 0) / 2,
-    }
-
-    return { ...node, position }
-  })
-}
-
-type Props = {
-  onInitialized: () => void
-}
-
-export const NodeOrganizer: React.FC<Props> = ({ onInitialized }) => {
-  const { setNodes, getNodes, getEdges, fitView } = useReactFlow()
-  const nodesInitialized = useNodesInitialized()
-
-  useEffect(() => {
-    if (nodesInitialized) {
-      const nodes = getNodes() as Node<EventNodeData | ApiNodeData>[]
-      const edges = getEdges() as Edge<EdgeData>[]
-      const organizedNodes = organizeNodes(nodes, edges)
-
-      setNodes(organizedNodes)
-      onInitialized()
-
-      setTimeout(async () => {
-        await fitView()
-      }, 1)
-    }
-  }, [nodesInitialized, onInitialized])
-
-  return null
-}

package/src/views/flow/nodes/api-flow-node.tsx

@@ -1,6 +0,0 @@
-import { ApiNode } from '../../../publicComponents/api-node'
-import { ApiNodeData } from './nodes.types'
-
-export const ApiFlowNode = ({ data }: { data: ApiNodeData }) => {
-  return <ApiNode data={data} />
-}

package/src/views/flow/nodes/event-flow-node.tsx

@@ -1,6 +0,0 @@
-import { EventNode } from '../../../publicComponents/event-node'
-import { EventNodeProps } from '../../../publicComponents/node-props'
-
-export const EventFlowNode = ({ data }: EventNodeProps) => {
-  return <EventNode className="relative" data={data}></EventNode>
-}

package/src/views/flow/nodes/json-schema-form.tsx

@@ -1,110 +0,0 @@
-import { useEffect, useState } from 'react'
-import { JSONSchema7 } from 'json-schema'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Textarea } from '@/components/ui/textarea'
-
-interface JsonSchemaFormProps {
-  schema: JSONSchema7
-  formData?: any
-  onChange?: (data: any) => void
-}
-
-export const JsonSchemaForm: React.FC<JsonSchemaFormProps> = ({ schema, formData = {}, onChange }) => {
-  const [values, setValues] = useState(formData)
-
-  useEffect(() => {
-    onChange?.(values)
-  }, [values, onChange])
-
-  const renderField = (propertyName: string, propertySchema: JSONSchema7) => {
-    const value = values[propertyName]
-
-    switch (propertySchema.type) {
-      case 'string':
-        if (propertySchema.enum) {
-          return (
-            <div className="space-y-2" key={propertyName}>
-              <Label>{propertySchema.title || propertyName}</Label>
-              <Select value={value} onValueChange={(newValue) => setValues({ ...values, [propertyName]: newValue })}>
-                <SelectTrigger>
-                  <SelectValue placeholder={propertySchema.description || `Select ${propertyName}`} />
-                </SelectTrigger>
-                <SelectContent>
-                  {propertySchema.enum.map((option) => (
-                    <SelectItem key={String(option)} value={String(option)}>
-                      {String(option)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          )
-        }
-
-        if (propertySchema.format === 'textarea') {
-          return (
-            <div className="space-y-2" key={propertyName}>
-              <Label>{propertySchema.title || propertyName}</Label>
-              <Textarea
-                placeholder={propertySchema.description}
-                value={value || ''}
-                onChange={(e) => setValues({ ...values, [propertyName]: e.target.value })}
-              />
-            </div>
-          )
-        }
-
-        return (
-          <div className="space-y-2" key={propertyName}>
-            <Label>{propertySchema.title || propertyName}</Label>
-            <Input
-              type="text"
-              placeholder={propertySchema.description}
-              value={value || ''}
-              onChange={(e) => setValues({ ...values, [propertyName]: e.target.value })}
-            />
-          </div>
-        )
-
-      case 'number':
-      case 'integer':
-        return (
-          <div className="space-y-2" key={propertyName}>
-            <Label>{propertySchema.title || propertyName}</Label>
-            <Input
-              type="number"
-              placeholder={propertySchema.description}
-              value={value || ''}
-              onChange={(e) => setValues({ ...values, [propertyName]: Number(e.target.value) })}
-            />
-          </div>
-        )
-
-      case 'boolean':
-        return (
-          <div className="flex items-center space-x-2" key={propertyName}>
-            <Switch
-              checked={value || false}
-              onCheckedChange={(checked) => setValues({ ...values, [propertyName]: checked })}
-            />
-            <Label>{propertySchema.title || propertyName}</Label>
-          </div>
-        )
-
-      default:
-        return null
-    }
-  }
-
-  return (
-    <form className="space-y-4">
-      {schema.properties &&
-        Object.entries(schema.properties).map(([propertyName, propertySchema]) =>
-          renderField(propertyName, propertySchema as JSONSchema7),
-        )}
-    </form>
-  )
-}