@motiadev/workbench 0.13.0-beta.162-945354 → 0.13.0-beta.162-080298

package/dist/src/components/flow/flow-view.tsx

@@ -1,66 +0,0 @@
-import {
-  Background,
-  BackgroundVariant,
-  type NodeChange,
-  type OnNodesChange,
-  ReactFlow,
-  type Edge as ReactFlowEdge,
-  type Node as ReactFlowNode,
-} from '@xyflow/react'
-import type React from 'react'
-import { useCallback, useState } from 'react'
-import type { EdgeData, FlowConfigResponse, FlowResponse, NodeData } from '../../types/flow'
-import { BaseEdge } from './base-edge'
-import { FlowLoader } from './flow-loader'
-import { useGetFlowState } from './hooks/use-get-flow-state'
-import { NodeOrganizer } from './node-organizer'
-
-import '@xyflow/react/dist/style.css'
-import { BackgroundEffect } from '@motiadev/ui'
-
-export type FlowNode = ReactFlowNode<NodeData>
-export type FlowEdge = ReactFlowEdge<EdgeData>
-
-const edgeTypes = {
-  base: BaseEdge,
-}
-
-type Props = {
-  flow: FlowResponse
-  flowConfig: FlowConfigResponse
-}
-
-export const FlowView: React.FC<Props> = ({ flow, flowConfig }) => {
-  const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig)
-  const [initialized, setInitialized] = useState(false)
-  const onInitialized = useCallback(() => setInitialized(true), [])
-
-  const onNodesChangeHandler = useCallback<OnNodesChange<FlowNode>>(
-    (changes: NodeChange<FlowNode>[]) => onNodesChange(changes),
-    [onNodesChange],
-  )
-
-  if (!nodeTypes) {
-    return null
-  }
-
-  return (
-    <div className="w-full h-full relative">
-      {!initialized && <FlowLoader />}
-      <ReactFlow
-        minZoom={0.1}
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onNodesChange={onNodesChangeHandler}
-        onEdgesChange={onEdgesChange}
-        className="isolate"
-      >
-        <BackgroundEffect />
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
-        <NodeOrganizer onInitialized={onInitialized} nodes={nodes} edges={edges} />
-      </ReactFlow>
-    </div>
-  )
-}

package/dist/src/components/flow/hooks/use-get-flow-state.tsx

@@ -1,171 +0,0 @@
-import { type Edge, type Node, useEdgesState, useNodesState } from '@xyflow/react'
-import isEqual from 'fast-deep-equal'
-import type React from 'react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { EdgeData, FlowConfigResponse, FlowResponse, NodeConfig, NodeData } from '../../../types/flow'
-import { ApiFlowNode } from '../nodes/api-flow-node'
-import { CronFlowNode } from '../nodes/cron-flow-node'
-import { EventFlowNode } from '../nodes/event-flow-node'
-import { NoopFlowNode } from '../nodes/noop-flow-node'
-import { useSaveWorkflowConfig } from './use-save-workflow-config'
-
-const DEFAULT_CONFIG: NodeConfig = { x: 0, y: 0 }
-
-const getNodePosition = (flowConfig: FlowConfigResponse | null, stepName: string): NodeConfig => {
-  return flowConfig?.config[stepName] || DEFAULT_CONFIG
-}
-
-type FlowState = {
-  nodes: Node<NodeData>[]
-  edges: Edge<EdgeData>[]
-  nodeTypes: Record<string, React.ComponentType<any>>
-}
-
-const nodeComponentCache = new Map<string, React.ComponentType<any>>()
-
-const BASE_NODE_TYPES: Record<string, React.ComponentType<any>> = {
-  event: EventFlowNode,
-  api: ApiFlowNode,
-  noop: NoopFlowNode,
-  cron: CronFlowNode,
-}
-
-async function importFlow(flow: FlowResponse, flowConfig: FlowConfigResponse | null): Promise<FlowState> {
-  const nodeTypes: Record<string, React.ComponentType<any>> = { ...BASE_NODE_TYPES }
-
-  const customNodePromises = flow.steps
-    .filter((step) => step.nodeComponentPath)
-    .map(async (step) => {
-      const path = step.nodeComponentPath!
-
-      // Check cache first
-      if (nodeComponentCache.has(path)) {
-        nodeTypes[path] = nodeComponentCache.get(path)!
-        return
-      }
-
-      try {
-        const module = await import(/* @vite-ignore */ `/@fs/${path}`)
-        const component = module.Node ?? module.default
-        nodeComponentCache.set(path, component)
-        nodeTypes[path] = component
-      } catch (error) {
-        console.error(`Failed to load custom node component: ${path}`, error)
-      }
-    })
-
-  await Promise.all(customNodePromises)
-
-  const nodes: Node<NodeData>[] = flow.steps.map((step) => ({
-    id: step.id,
-    type: step.nodeComponentPath || step.type,
-    filePath: step.filePath,
-    position: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_CONFIG,
-    data: { ...step, nodeConfig: step.filePath ? getNodePosition(flowConfig, step.filePath) : DEFAULT_CONFIG },
-    language: step.language,
-  }))
-
-  const edges: Edge<EdgeData>[] = flow.edges.map((edge) => ({
-    ...edge,
-    type: 'base',
-  }))
-
-  return { nodes, edges, nodeTypes }
-}
-
-export const useGetFlowState = (flow: FlowResponse, flowConfig: FlowConfigResponse) => {
-  const [nodeTypes, setNodeTypes] = useState<Record<string, React.ComponentType<any>>>(BASE_NODE_TYPES)
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([])
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<EdgeData>>([])
-
-  const saveConfig = useSaveWorkflowConfig()
-
-  const flowIdRef = useRef<string>('')
-  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
-  const lastSavedConfigRef = useRef<FlowConfigResponse['config']>(null)
-  const lastSavedFlowRef = useRef<FlowResponse>(null)
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const memoizedFlowConfig = useMemo(() => flowConfig, [flowConfig?.id, flowConfig?.config])
-
-  useEffect(() => {
-    if (!flow || flow.error) return
-    const hasSameConfig = isEqual(lastSavedConfigRef.current, memoizedFlowConfig?.config)
-    const hasSameFlow = isEqual(lastSavedFlowRef.current, flow)
-
-    if (hasSameConfig && hasSameFlow) return
-
-    lastSavedConfigRef.current = memoizedFlowConfig?.config
-    flowIdRef.current = flow.id
-    lastSavedFlowRef.current = flow
-
-    const importFlowAsync = async () => {
-      try {
-        const { nodes, edges, nodeTypes } = await importFlow(flow, flowConfig)
-        setNodes(nodes)
-        setEdges(edges)
-        setNodeTypes(nodeTypes)
-      } catch (error) {
-        console.error('Failed to import flow:', error)
-      }
-    }
-
-    importFlowAsync()
-  }, [flow, memoizedFlowConfig, setNodes, setEdges, flowConfig])
-
-  const saveFlowConfig = useCallback(
-    (nodesToSave: Node<NodeData>[]) => {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current)
-      }
-
-      saveTimeoutRef.current = setTimeout(async () => {
-        const steps = nodesToSave.reduce<FlowConfigResponse['config']>((acc, node) => {
-          if (node.data.filePath) {
-            acc[node.data.filePath] = {
-              x: Math.round(node.position.x),
-              y: Math.round(node.position.y),
-            }
-
-            if (node.data.nodeConfig?.sourceHandlePosition) {
-              acc[node.data.filePath].sourceHandlePosition = node.data.nodeConfig.sourceHandlePosition
-            }
-            if (node.data.nodeConfig?.targetHandlePosition) {
-              acc[node.data.filePath].targetHandlePosition = node.data.nodeConfig.targetHandlePosition
-            }
-          }
-          return acc
-        }, {})
-
-        if (!isEqual(steps, lastSavedConfigRef.current)) {
-          lastSavedConfigRef.current = steps
-          const newConfig = { id: flowIdRef.current, config: steps }
-
-          try {
-            await saveConfig(newConfig)
-          } catch (error) {
-            console.error('Failed to save flow config:', error)
-          }
-        }
-      }, 300)
-    },
-    [saveConfig],
-  )
-
-  useEffect(() => {
-    if (nodes.length > 0) {
-      saveFlowConfig(nodes)
-    }
-
-    return () => {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current)
-      }
-    }
-  }, [nodes, saveFlowConfig])
-
-  return useMemo(
-    () => ({ nodes, edges, onNodesChange, onEdgesChange, nodeTypes }),
-    [nodes, edges, onNodesChange, onEdgesChange, nodeTypes],
-  )
-}

package/dist/src/components/flow/hooks/use-save-workflow-config.ts

@@ -1,25 +0,0 @@
-import { useCallback } from 'react'
-import type { FlowConfigResponse } from '../../../types/flow'
-
-export const useSaveWorkflowConfig = () => {
-  return useCallback(async (body: FlowConfigResponse) => {
-    try {
-      const response = await fetch(`/__motia/flows/${body.id}/config`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(body),
-      })
-
-      if (!response.ok) {
-        throw new Error(`Failed to save config: ${response.statusText}`)
-      }
-
-      return await response.json()
-    } catch (error) {
-      console.error('Error saving workflow config:', error)
-      throw error
-    }
-  }, [])
-}

package/dist/src/components/flow/node-organizer.tsx

@@ -1,103 +0,0 @@
-import { type Edge, type Node, useNodesInitialized, useReactFlow } from '@xyflow/react'
-import dagre from 'dagre'
-import isEqual from 'fast-deep-equal'
-import type React from 'react'
-import { useEffect, useRef } from 'react'
-import type { EdgeData, NodeData } from '../../types/flow'
-
-const organizeNodes = (nodes: Node<NodeData>[], edges: Edge<EdgeData>[]): Node<NodeData>[] => {
-  const dagreGraph = new dagre.graphlib.Graph({ directed: true, compound: false, multigraph: false })
-
-  dagreGraph.setDefaultEdgeLabel(() => ({}))
-  dagreGraph.setGraph({ rankdir: 'LR', ranksep: 0, nodesep: 20, edgesep: 0 })
-
-  nodes.forEach((node) => {
-    if (node.position.x !== 0 || node.position.y !== 0) {
-      dagreGraph.setNode(node.id, {
-        width: node.measured?.width,
-        height: node.measured?.height,
-        x: node.position.x,
-        y: node.position.y,
-      })
-    } else {
-      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) => {
-    if (node.position.x !== 0 || node.position.y !== 0) {
-      return 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
-  nodes: Node<NodeData>[]
-  edges: Edge<EdgeData>[]
-}
-
-export const NodeOrganizer: React.FC<Props> = ({ onInitialized, nodes, edges }) => {
-  const { setNodes, getNodes, getEdges, fitView } = useReactFlow()
-  const nodesInitialized = useNodesInitialized()
-  const initialized = useRef(false)
-
-  const lastNodesRef = useRef<Node<NodeData>[]>([])
-  const lastEdgesRef = useRef<Edge<EdgeData>[]>([])
-
-  useEffect(() => {
-    if (nodesInitialized) {
-      if (isEqual(lastNodesRef.current, nodes) && isEqual(lastEdgesRef.current, edges)) {
-        return
-      }
-
-      lastNodesRef.current = nodes
-      lastEdgesRef.current = edges
-
-      try {
-        const nodesToOrganize = nodes.some((node) => node.position.x === 0 && node.position.y === 0)
-
-        if (nodesToOrganize) {
-          const organizedNodes = organizeNodes(nodes, edges)
-          setNodes(organizedNodes)
-        }
-
-        if (!initialized.current) {
-          initialized.current = true
-          onInitialized()
-          setTimeout(() => fitView(), 1)
-        }
-      } catch (error) {
-        console.error('Error organizing nodes:', error)
-      }
-    }
-  }, [nodesInitialized, onInitialized, setNodes, getNodes, getEdges, fitView, nodes, edges])
-
-  return null
-}

package/dist/src/components/flow/nodes/api-flow-node.tsx

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

package/dist/src/components/flow/nodes/cron-flow-node.tsx

@@ -1,6 +0,0 @@
-import { CronNode } from '../../../publicComponents/cron-node'
-import type { CronNodeProps } from '../../../publicComponents/node-props'
-
-export const CronFlowNode = ({ data }: CronNodeProps) => {
-  return <CronNode data={data} />
-}

package/dist/src/components/flow/nodes/event-flow-node.tsx

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

package/dist/src/components/flow/nodes/noop-flow-node.tsx

@@ -1,6 +0,0 @@
-import type { NoopNodeProps } from '../../../publicComponents/node-props'
-import { NoopNode } from '../../../publicComponents/noop-node'
-
-export const NoopFlowNode = ({ data }: NoopNodeProps) => {
-  return <NoopNode data={data} />
-}

package/dist/src/components/header/deploy-button.tsx

@@ -1,110 +0,0 @@
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@motiadev/ui'
-import { Rocket } from 'lucide-react'
-import { useState } from 'react'
-import { motiaAnalytics } from '../../lib/motia-analytics'
-
-export const DeployButton = () => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const onDeployButtonClick = () => {
-    motiaAnalytics.track('deploy_button_clicked')
-  }
-
-  const onDeployClick = () => {
-    setIsOpen(false)
-    motiaAnalytics.track('deploy_button_deploy_clicked')
-  }
-
-  const onClose = () => {
-    setIsOpen(false)
-    motiaAnalytics.track('deploy_button_closed')
-  }
-
-  const onMotiaCloudClick = () => {
-    setIsOpen(true)
-    motiaAnalytics.track('deploy_button_motia_cloud_clicked')
-  }
-
-  const onSelfHostedClick = () => {
-    motiaAnalytics.track('deploy_button_self_hosted_clicked')
-    window.open('https://www.motia.dev/docs/deployment-guide/self-hosted', '_blank')
-  }
-
-  return (
-    <>
-      {isOpen && (
-        <div>
-          {/* backdrop container */}
-          <div className="fixed inset-0 z-[9999] bg-black/20 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
-
-          <div className="driver-popover w-[600px]! fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[10000] animate-in fade-in-0 zoom-in-95">
-            <img
-              src="https://oxhhfuuoqzsaqthfairn.supabase.co/storage/v1/object/public/public-images/preview.png"
-              alt="Motia Cloud"
-              className="driver-popover-image object-cover"
-              style={{ height: 393, width: '100%' }}
-            />
-
-            <div className="driver-popover-title">
-              <h2 className="popover-title">Motia Cloud is Live!</h2>
-            </div>
-
-            <div className="driver-popover-description">
-              Deploy to production in minutes, not hours. One click gets your Motia project live with enterprise-grade
-              reliability. Seamlessly scale, rollback instantly, and monitor everything in real-time. Your code deserves
-              infrastructure that just works.
-            </div>
-
-            <a
-              href="https://www.motia.dev/docs/concepts/deployment/motia-cloud/features"
-              target="_blank"
-              className="text-foreground text-xs font-semibold px-4 hover:underline"
-              rel="noopener"
-            >
-              Learn more about Motia Cloud
-            </a>
-
-            <div className="driver-popover-footer flex items-center justify-end">
-              <div className="driver-popover-navigation-btns flex gap-6">
-                <button
-                  className="tutorial-opt-out-button text-sm! font-semibold! text-muted-foreground!"
-                  onClick={onClose}
-                >
-                  Close
-                </button>
-                <a
-                  href="https://motia.cloud?utm_source=workbench&utm_medium=referral"
-                  target="_blank"
-                  onClick={onDeployClick}
-                  rel="noopener"
-                >
-                  <button className="driver-popover-next-btn">Deploy!</button>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="font-semibold text-sm dark:bg-white dark:text-black dark:hover:bg-white/90 bg-black/90 hover:bg-black/80 text-white"
-            onClick={onDeployButtonClick}
-          >
-            <Rocket />
-            Deploy
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="bg-background text-foreground w-56">
-          <DropdownMenuItem className="cursor-pointer h-10 font-semibold" onClick={onMotiaCloudClick}>
-            Motia Cloud
-          </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer h-10 font-semibold" onClick={onSelfHostedClick}>
-            Self-Hosted (Docker)
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  )
-}

package/dist/src/components/header/header.tsx

@@ -1,39 +0,0 @@
-import { useThemeStore } from '@motiadev/ui'
-import type React from 'react'
-import { memo, useEffect } from 'react'
-// @ts-expect-error: PNG asset types
-import motiaLogoDark from '../../assets/motia-dark.png'
-// @ts-expect-error: PNG asset types
-import motiaLogoLight from '../../assets/motia-light.png'
-import { useMotiaConfigStore } from '../../stores/use-motia-config-store'
-import { Tutorial } from '../tutorial/tutorial'
-import { TutorialButton } from '../tutorial/tutorial-button'
-import { ThemeToggle } from '../ui/theme-toggle'
-import { DeployButton } from './deploy-button'
-
-export const Header: React.FC = memo(() => {
-  const theme = useThemeStore((state) => state.theme)
-  const logo = theme === 'light' ? motiaLogoLight : motiaLogoDark
-
-  const config = useMotiaConfigStore((state) => state.config)
-  const fetchConfig = useMotiaConfigStore((state) => state.fetchConfig)
-
-  useEffect(() => {
-    fetchConfig()
-  }, [])
-
-  const isDevMode = config?.isDev ?? false
-  const isTutorialDisabled = config?.isTutorialDisabled ?? true
-
-  return (
-    <header className="min-h-16 px-4 gap-4 flex items-center bg-default text-default-foreground border-b">
-      <img src={logo} className="h-5" id="logo-icon" data-testid="logo-icon" />
-      <div className="flex-1" />
-      <ThemeToggle />
-      {isDevMode && !isTutorialDisabled && <TutorialButton />}
-      {isDevMode && <DeployButton />}
-      {!isTutorialDisabled && <Tutorial />}
-    </header>
-  )
-})
-Header.displayName = 'Header'

package/dist/src/components/root-motia.tsx

@@ -1,10 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { memo } from 'react'
-import { useAnalytics } from '../lib/motia-analytics'
-
-export const RootMotia: React.FC<PropsWithChildren> = memo(({ children }) => {
-  useAnalytics()
-
-  return children
-})
-RootMotia.displayName = 'RootMotia'

package/dist/src/components/top-panel.tsx

@@ -1,40 +0,0 @@
-import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui'
-import { memo } from 'react'
-import { useShallow } from 'zustand/react/shallow'
-import { type AppTabsState, TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store'
-import { useTabsStore } from '../stores/use-tabs-store'
-
-const topTabsSelector = (state: AppTabsState) => state.tabs[TabLocation.TOP]
-const topPanelId = 'top-panel'
-
-export const TopPanel = memo(() => {
-  const defaultTab = useTabsStore((state) => state.tab.top)
-  const setTopTab = useTabsStore((state) => state.setTopTab)
-  const tabs = useAppTabsStore(useShallow(topTabsSelector))
-
-  return (
-    <CollapsiblePanel
-      id={topPanelId}
-      variant={'tabs'}
-      defaultTab={defaultTab}
-      onTabChange={setTopTab}
-      withResizeHandle
-      header={
-        <TabsList>
-          {tabs.map(({ id, tabLabel: Label }) => (
-            <TabsTrigger key={id} value={id} data-testid={`${id.toLowerCase()}-link`} className="cursor-pointer">
-              <Label />
-            </TabsTrigger>
-          ))}
-        </TabsList>
-      }
-    >
-      {tabs.map(({ id, content: Element }) => (
-        <TabsContent key={id} value={id} className="h-full">
-          <Element />
-        </TabsContent>
-      ))}
-    </CollapsiblePanel>
-  )
-})
-TopPanel.displayName = 'TopPanel'

package/dist/src/components/tutorial/engine/tutorial-engine.ts

@@ -1,26 +0,0 @@
-import type { TutorialStep } from './tutorial-types'
-
-class Tutorial {
-  public steps: TutorialStep[] = []
-  private onStepsRegisteredCallbacks: (() => void)[] = []
-  private onOpenCallbacks: (() => void)[] = []
-
-  register(steps: TutorialStep[]) {
-    this.steps = steps
-    this.onStepsRegisteredCallbacks.forEach((callback) => callback())
-  }
-
-  onStepsRegistered(callback: () => void) {
-    this.onStepsRegisteredCallbacks.push(callback)
-  }
-
-  onOpen(callback: () => void) {
-    this.onOpenCallbacks.push(callback)
-  }
-
-  open() {
-    this.onOpenCallbacks.forEach((callback) => callback())
-  }
-}
-
-export const MotiaTutorial = new Tutorial()

package/dist/src/components/tutorial/engine/tutorial-types.ts

@@ -1,26 +0,0 @@
-export type TutorialActionClick = {
-  type: 'click'
-  selector: string
-  optional?: boolean
-}
-
-export type TutorialActionEditor = {
-  type: 'fill-editor'
-  content: Record<string, any>
-}
-
-export type TutorialAction = TutorialActionClick | TutorialActionEditor
-
-export type TutorialImage = {
-  height: number
-  src: string
-}
-
-export type TutorialStep = {
-  title: string
-  description: React.FC<void>
-  image?: TutorialImage
-  link?: string
-  elementXpath?: string
-  before?: TutorialAction[]
-}