@motiadev/workbench 0.0.5 → 0.0.7

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/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>
-      ))}
-    </>
-  )
-}

package/src/route-wrapper.tsx

@@ -1,9 +0,0 @@
-import { AppSidebar } from './components/app-sidebar'
-import { SidebarProvider } from './components/ui/sidebar'
-
-export const RouteWrapper = ({ children }: { children: React.ReactNode }) => (
-  <SidebarProvider>
-    <AppSidebar />
-    {children}
-  </SidebarProvider>
-)

package/src/routeTree.gen.ts

@@ -1,109 +0,0 @@
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-// Import Routes
-
-import { Route as rootRoute } from './routes/__root'
-import { Route as IndexImport } from './routes/index'
-import { Route as FlowIdImport } from './routes/flow/$id'
-
-// Create/Update Routes
-
-const IndexRoute = IndexImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRoute,
-} as any)
-
-const FlowIdRoute = FlowIdImport.update({
-  id: '/flow/$id',
-  path: '/flow/$id',
-  getParentRoute: () => rootRoute,
-} as any)
-
-// Populate the FileRoutesByPath interface
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexImport
-      parentRoute: typeof rootRoute
-    }
-    '/flow/$id': {
-      id: '/flow/$id'
-      path: '/flow/$id'
-      fullPath: '/flow/$id'
-      preLoaderRoute: typeof FlowIdImport
-      parentRoute: typeof rootRoute
-    }
-  }
-}
-
-// Create and export the route tree
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/flow/$id': typeof FlowIdRoute
-}
-
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/flow/$id': typeof FlowIdRoute
-}
-
-export interface FileRoutesById {
-  __root__: typeof rootRoute
-  '/': typeof IndexRoute
-  '/flow/$id': typeof FlowIdRoute
-}
-
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/flow/$id'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/flow/$id'
-  id: '__root__' | '/' | '/flow/$id'
-  fileRoutesById: FileRoutesById
-}
-
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  FlowIdRoute: typeof FlowIdRoute
-}
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  FlowIdRoute: FlowIdRoute,
-}
-
-export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>()
-
-/* ROUTE_MANIFEST_START
-{
-  "routes": {
-    "__root__": {
-      "filePath": "__root.tsx",
-      "children": [
-        "/",
-        "/flow/$id"
-      ]
-    },
-    "/": {
-      "filePath": "index.tsx"
-    },
-    "/flow/$id": {
-      "filePath": "flow/$id.tsx"
-    }
-  }
-}
-ROUTE_MANIFEST_END */

package/src/routes/__root.tsx

@@ -1,26 +0,0 @@
-import { RouteWrapper } from '@/route-wrapper'
-import { createRootRoute, Outlet } from '@tanstack/react-router'
-import React, { Suspense } from 'react'
-
-const TanStackRouterDevtools =
-  process.env.NODE_ENV === 'production'
-    ? () => null // Render nothing in production
-    : React.lazy(() =>
-        // Lazy load in development
-        import('@tanstack/router-devtools').then((res) => ({
-          default: res.TanStackRouterDevtools,
-          // For Embedded Mode
-          // default: res.TanStackRouterDevtoolsPanel
-        })),
-      )
-
-const RouteComponent = () => (
-  <RouteWrapper>
-    <Outlet />
-    <Suspense>
-      <TanStackRouterDevtools />
-    </Suspense>
-  </RouteWrapper>
-)
-
-export const Route = createRootRoute({ component: RouteComponent })

package/src/routes/flow/$id.tsx

@@ -1,21 +0,0 @@
-import { FlowView } from '@/views/flow/flow-view'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/flow/$id')({
-  component: Flow,
-  loader: async ({ params }) => {
-    return fetch(`/flows/${params.id}`)
-      .then((res) => res.json())
-      .then((flow) => ({ flow }))
-  },
-})
-
-function Flow() {
-  const { flow } = Route.useLoaderData()
-
-  return (
-    <div className="w-screen h-screen">
-      <FlowView flow={flow} />
-    </div>
-  )
-}

package/src/routes/index.tsx

@@ -1,13 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/')({
-  component: Index,
-})
-
-function Index() {
-  return (
-    <div className="flex items-center justify-center w-full h-screen">
-      <p className="text-gray-500">Select a flow</p>
-    </div>
-  )
-}