{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "workflow-1", "title": "Workflow 1: automation builder", "author": "Ballmac ", "description": "An automation builder as a vertical flow: a trigger, then conditions, waits and actions you add, reorder and delete, each opening to its settings, and a test run that shows every step as done or where a condition stopped it.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json", "https://ui.ballmac.com/r/switch.json" ], "files": [ { "path": "registry/ballmac/components/blocks/workflow-1/workflow-1.tsx", "content": "// Ballmac UI: Workflow 1. https://ui.ballmac.com/blocks/workflow-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDown, ArrowUp, CircleCheck, CircleX, Clock, GitBranch, Loader2, Mail, MessageSquare, Play, Plus, SquareCheckBig, Tag, Trash2, Zap } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ballmac/select\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { Switch } from \"@/components/ballmac/switch\"\nimport { cn } from \"@/lib/utils\"\n\ntype Workflow1Step =\n | { id: string; type: \"condition\"; field: string; operator: \"is\" | \"is not\" | \"is more than\" | \"contains\"; value: string }\n | { id: string; type: \"delay\"; amount: number; unit: \"minutes\" | \"hours\" | \"days\" }\n | { id: string; type: \"action\"; action: \"email\" | \"slack\" | \"task\" | \"tag\"; text: string }\n\ntype Workflow1Props = Omit, \"title\" | \"onChange\"> &\n StateProps & {\n title?: string\n trigger?: string\n triggers?: string[]\n steps?: Workflow1Step[]\n /** The facts a test run uses, for conditions. */\n sample?: Record\n /** The step that is open at first. */\n defaultSelectedId?: string\n /** Milliseconds a step takes in a test run. 0 makes it instant. */\n stepMs?: number\n onChange?: (state: { trigger: string; steps: Workflow1Step[]; enabled: boolean }) => void\n }\n\nconst sampleSteps: Workflow1Step[] = [\n { id: \"s1\", type: \"condition\", field: \"Order total\", operator: \"is more than\", value: \"500\" },\n { id: \"s2\", type: \"action\", action: \"slack\", text: \"Big order from {customer}: {total}\" },\n { id: \"s3\", type: \"delay\", amount: 1, unit: \"days\" },\n { id: \"s4\", type: \"action\", action: \"email\", text: \"Thanks for your order, {customer}. A person will be in touch.\" },\n]\n\nconst triggerList = [\"A new order is paid\", \"A customer signs up\", \"A ticket is marked urgent\", \"An invoice becomes overdue\"]\nconst fields = [\"Order total\", \"Customer country\", \"Plan\", \"Source\"]\nconst operators = [\"is\", \"is not\", \"is more than\", \"contains\"] as const\nconst actionMeta = {\n email: { label: \"Send an email\", icon: Mail },\n slack: { label: \"Post to Slack\", icon: MessageSquare },\n task: { label: \"Create a task\", icon: SquareCheckBig },\n tag: { label: \"Add a tag\", icon: Tag },\n}\nconst typeMeta = { condition: { label: \"Only continue if\", icon: GitBranch }, delay: { label: \"Wait\", icon: Clock }, action: { label: \"Do this\", icon: Zap } }\n\nconst defaultSample = { \"Order total\": \"640\", \"Customer country\": \"Portugal\", Plan: \"Team\", Source: \"Website\" }\n\nfunction Skel() {\n return (\n
\n {[0, 1, 2, 3].map((i) => (\n \n ))}\n
\n )\n}\n\nfunction passes(s: Extract, facts: Record) {\n const v = (facts[s.field] ?? \"\").toLowerCase()\n const w = s.value.toLowerCase()\n if (s.operator === \"is\") return v === w\n if (s.operator === \"is not\") return v !== w\n if (s.operator === \"contains\") return v.includes(w)\n return Number(v) > Number(w)\n}\nconst sentence = (s: Workflow1Step) =>\n s.type === \"condition\" ? `${s.field} ${s.operator} ${s.value || \"…\"}` : s.type === \"delay\" ? `Wait ${s.amount} ${s.amount === 1 ? s.unit.replace(/s$/, \"\") : s.unit}` : s.text || \"Add a message\"\n\n/**\n * An automation builder as a vertical flow: a trigger at the top, then conditions, waits and actions you add, reorder and delete, each opening to\n * its own settings. A test run walks the flow with sample facts and shows each step as done or, when a condition is not met, where and why it\n * stopped. The whole automation can be switched on or off, and every change is reported with the full list of steps.\n */\nfunction Workflow1({ title = \"New order alerts\", trigger: triggerProp = \"A new order is paid\", triggers = triggerList, steps: stepsProp = sampleSteps, sample = defaultSample, stepMs = 450, defaultSelectedId, onChange, state = \"ready\", onRetry, emptyState, errorState, className, ...props }: Workflow1Props) {\n const id = React.useId()\n const [trigger, setTrigger] = React.useState(triggerProp)\n const [steps, setSteps] = React.useState(stepsProp)\n const [enabled, setEnabled] = React.useState(true)\n const [selected, setSelected] = React.useState(defaultSelectedId ?? null)\n const [adding, setAdding] = React.useState(null)\n const [run, setRun] = React.useState<{ at: number; results: (\"done\" | \"stopped\")[]; finished: boolean } | null>(null)\n const [announce, setAnnounce] = React.useState(\"\")\n const running = !!run && !run.finished\n const empty = state === \"empty\"\n\n const update = (next: Workflow1Step[], t = trigger, e = enabled) => {\n setSteps(next)\n onChange?.({ trigger: t, steps: next, enabled: e })\n }\n const patch = (sid: string, p: Partial) => update(steps.map((s) => (s.id === sid ? ({ ...s, ...p } as Workflow1Step) : s)))\n const add = (at: number, kind: \"condition\" | \"delay\" | \"action\") => {\n const sid = `n${Date.now()}`\n const step: Workflow1Step = kind === \"condition\" ? { id: sid, type: \"condition\", field: fields[0]!, operator: \"is\", value: \"\" } : kind === \"delay\" ? { id: sid, type: \"delay\", amount: 1, unit: \"hours\" } : { id: sid, type: \"action\", action: \"task\", text: \"\" }\n update([...steps.slice(0, at), step, ...steps.slice(at)])\n setSelected(sid)\n setAdding(null)\n setAnnounce(`${typeMeta[kind].label} step added`)\n }\n const move = (i: number, d: -1 | 1) => {\n const j = i + d\n if (j < 0 || j >= steps.length) return\n const next = [...steps]\n ;[next[i], next[j]] = [next[j]!, next[i]!]\n update(next)\n setAnnounce(`Step moved to position ${j + 1}`)\n }\n\n async function test() {\n setSelected(null)\n const results: (\"done\" | \"stopped\")[] = []\n setRun({ at: 0, results, finished: false })\n for (let i = 0; i < steps.length; i++) {\n setRun({ at: i, results: [...results], finished: false })\n if (stepMs) await new Promise((r) => setTimeout(r, stepMs))\n const s = steps[i]!\n if (s.type === \"condition\" && !passes(s, sample)) {\n results.push(\"stopped\")\n setRun({ at: i, results: [...results], finished: true })\n setAnnounce(`Test run stopped at step ${i + 1}: ${sentence(s)} was not met`)\n return\n }\n results.push(\"done\")\n }\n setRun({ at: steps.length, results: [...results], finished: true })\n setAnnounce(\"Test run finished. Every step ran.\")\n }\n\n const connector = (at: number) => (\n
  • \n \n {adding === at ? (\n
    \n {([\"condition\", \"delay\", \"action\"] as const).map((k) => (\n \n ))}\n \n
    \n ) : (\n \n )}\n \n
    • \n )\n\n const content = empty ? (\n
    \n \n \n \n

    {emptyState?.title ?? \"Nothing automated yet\"}

    \n

    {emptyState?.description ?? \"Pick what starts it, then add what should happen. It runs on its own from then on.\"}

    \n {emptyState?.action}\n
    \n ) : (\n
    \n
    \n \n \n
    \n\n
      \n
    1. \n

      \n \n When\n

      \n
      \n \n
      \n
      2. \n {connector(0)}\n {steps.map((s, i) => {\n const M = s.type === \"action\" ? actionMeta[s.action] : typeMeta[s.type]\n const isSel = selected === s.id\n const r = run && (i < run.results.length ? run.results[i] : run.at === i && !run.finished ? \"running\" : null)\n return (\n \n
    2. \n
      \n \n {r === \"done\" ? : r === \"stopped\" ? : r === \"running\" ? : }\n \n \n
      \n \n \n \n
      \n
      \n {isSel ? (\n
      \n {s.type === \"condition\" ? (\n <>\n \n \n \n \n \n \n
      \n \n patch(s.id, { value: e.target.value })} aria-label=\"Value\" />\n \n
      \n \n ) : null}\n {s.type === \"delay\" ? (\n <>\n \n patch(s.id, { amount: Math.max(1, Number(e.target.value) || 1) })} aria-label=\"Amount\" />\n \n \n \n \n \n ) : null}\n {s.type === \"action\" ? (\n <>\n \n \n \n
      \n \n patch(s.id, { text: e.target.value })} aria-label=\"Message or name\" placeholder=\"Use {customer} and {total} to fill in details\" />\n \n
      \n \n ) : null}\n
      \n ) : null}\n
      3. \n {connector(i + 1)}\n       \n )\n })}\n
    3. \n \n {steps.length ? \"End of the automation\" : \"Add a first step to get started\"}\n
      4. \n
    \n\n {run?.finished ? (\n

    \n {run.results.includes(\"stopped\") ? `Test run stopped at step ${run.results.length}: the condition was not met, so nothing after it ran.` : `Test run finished. All ${steps.length} ${steps.length === 1 ? \"step\" : \"steps\"} ran.`}\n

    \n ) : null}\n
    \n )\n\n return (\n
    \n
    \n

    \n {title}\n

    \n

    Do things automatically when something happens.

    \n
    \n } error={{ title: errorState?.title ?? \"The automation could not be loaded\", description: errorState?.description ?? \"Nothing was changed. Check your connection and try again.\", ...errorState }}>\n {content}\n \n

    \n {announce}\n

    \n
    \n )\n}\n\nfunction Field({ label, children }: { label: string; children: React.ReactNode }) {\n return (\n
    \n

    {label}

    \n {children}\n
    \n )\n}\n\nexport { Workflow1, type Workflow1Props, type Workflow1Step }\n", "type": "registry:component", "target": "@components/ballmac/blocks/workflow-1/workflow-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "workflow", "automation", "trigger", "conditions", "actions", "zapier", "rules", "no-code", "builder", "flow" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "An automation builder. ...} />. Test run walks the steps with the sample facts; a condition that fails stops it there. Every edit calls onChange with the whole flow.", "whenToUse": [ "Rules and automations in a SaaS product", "A no-code 'when this happens, do that' editor" ], "whenNotToUse": [ "A marketing diagram of a workflow (use a features block)", "A graph with branches and loops" ], "composesWith": [ "flags-1", "webhooks-1", "app-shell-1", "tickets-1" ], "a11y": [ { "keys": "Tab, Enter / Space", "action": "Each step's title is a button that says whether it is open; reorder and delete buttons say which step they act on" }, { "keys": "Test run", "action": "Each step says Ran fine, Running or Stopped here with why, with an icon, and the end result is a status message" }, { "keys": "Changes", "action": "Adding, moving and deleting a step are announced politely, with the new position" } ], "customization": [ "Steps are a plain array, so saving and loading flows is a JSON round trip", "stepMs sets how long each step takes in a test run; 0 is instant", "The trigger card is dark so the start of the flow is always clear" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "workflow-1-loading", "trigger": "state=\"loading\"", "note": "Skeleton step cards under the real heading, announced as loading." }, { "id": "empty", "title": "Nothing automated yet", "example": "workflow-1-empty", "trigger": "state=\"empty\"", "note": "Says to pick what starts it and add what should happen; emptyState sets the copy and can add a button." }, { "id": "error", "title": "Could not load", "example": "workflow-1-error", "trigger": "state=\"error\"", "note": "An alert saying nothing was changed, with Try again (onRetry)." } ], "examples": [ "workflow-1-demo", "workflow-1-open", "workflow-1-loading", "workflow-1-empty", "workflow-1-error" ], "url": "https://ui.ballmac.com/components/workflow-1" }, "categories": [ "blocks", "workflow" ], "type": "registry:block" }