StepEditor

Code

import { StepEditor, type StepNode, type StepParam } from "@fadymondy/nasaq/web";import { Globe } from "lucide-react";import { useState } from "react";const types = [{ id: "http", label: "HTTP request", category: "data", icon: Globe, fields: [{ name: "url", label: "URL", kind: "url" as const, required: true }] }];export function Editor() {  const [steps, setSteps] = useState<StepNode[]>([]);  const [params, setParams] = useState<StepParam[]>([{ id: "p1", name: "host", value: "api.example.com" }]);  return <StepEditor types={types} steps={steps} onStepsChange={setSteps} params={params} onParamsChange={setParams} />;}

Workflow · beta

Live examples and controls: StepEditor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/step-editor.json

The list view of a workflow, for people who think in order rather than in boxes. Steps can be reordered, duplicated and nested (a loop's body). Each step's form is generated from its step type's field definitions, the same ones the canvas uses. Parameters live beside the steps and are used as {{name}} in any text field; secret ones are masked and scrubbed from test output. Problems (a required field empty, a placeholder nobody defines, a step with no type) are listed and block the test run. It holds no backend: you keep steps and params, and onTestRun runs them.

When to useCopy Anchor Link

• A workflow, macro or automation edited as an ordered list.
• The mobile or accessible companion to workflow-canvas, on the same step types.

When not to useCopy Anchor Link

• Free-form graphs with branches and merges: use workflow-canvas.
• A plain list of one kind of row: use repeater or schema-repeater.

ImportCopy Anchor Link

import { StepEditor } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { StepEditor, type StepNode, type StepParam } from "@fadymondy/nasaq/web";
import { Globe } from "lucide-react";
import { useState } from "react";

const types = [{ id: "http", label: "HTTP request", category: "data", icon: Globe, fields: [{ name: "url", label: "URL", kind: "url" as const, required: true }] }];

export function Editor() {
  const [steps, setSteps] = useState<StepNode[]>([]);
  const [params, setParams] = useState<StepParam[]>([{ id: "p1", name: "host", value: "api.example.com" }]);
  return <StepEditor types={types} steps={steps} onStepsChange={setSteps} params={params} onParamsChange={setParams} />;
}

AnatomyCopy Anchor Link

StepEditor                data-slot="step-editor"
├─ Alert                  problems to fix
└─ Tabs
   ├─ Steps               Repeater of steps; nestable steps hold another Repeater
   │  └─ row              name, generated fields, continue-on-failure, inner steps
   │     (new row)        WorkflowNodePicker inline until a type is chosen
   ├─ Parameters          Repeater of name / value / secret
   └─ Test run            Run button and one result per step

APICopy Anchor Link

HelpersCopy Anchor Link

validateSteps, placeholders, resolvePlaceholders, maskSecrets, newStep, flattenSteps, countSteps are exported and pure.

ExamplesCopy Anchor Link

A loop that holds steps:

<StepEditor types={types} nestableTypes={["loop"]} defaultSteps={[{ id: "l", type: "loop", config: {}, children: [] }]} />

AccessibilityCopy Anchor Link

Reorder, add and remove are announced by the list. Problems are text, not colour. Secret values are type="password" with a labelled show/hide button. Localise labels.

RTL & i18nCopy Anchor Link

• The list mirrors. Placeholders, URLs and parameter names stay left-to-right.
• English and Arabic strings ship; step types bring their own localised labels.

Styling & tokensCopy Anchor Link

• Uses border, --nq-danger-soft and --nq-danger-text tokens. Extend with className; never pass raw hex.

Do / Don'tCopy Anchor Link

• Do keep secrets in parameters and reference them as {{name}}, rather than pasting them into fields.
• Do run validateSteps again on the server.
• Don't put a secret in output: masking only hides values that match a secret parameter.

RelatedCopy Anchor Link

• workflow-canvas
• repeater
• run-history

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-workflow-step-editor--docs