Workflow marketplace

Code

import { WorkflowMarketplace } from "@fadymondy/nasaq/web";import { Mail } from "lucide-react";<WorkflowMarketplace  categories={[{ id: "comms", label: "Messaging" }]}  listings={[    {      id: "send-email", kind: "step", name: "Send email", summary: "Send a templated email.", category: "comms", icon: Mail,      step: { inputs: ["Contact"], outputs: ["Message id"], fields: [{ name: "to", label: "To", kind: "text", required: true }] },    },  ]}  onInstall={async (l) => { await api.install(l.id); }}/>;

Workflow · beta

Live examples and controls: Workflow marketplace in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/workflow-marketplace.json

Browse and install the building blocks of automations. A listing is either a single step (a trigger or action you can add to any workflow) or a preset (a ready-made workflow of several steps). Steps show what they take, give and ask for; presets show the diagram they install. It is a thin layer over CatalogStore, so the card and detail layout matches any other Nasaq store.

When to useCopy Anchor Link

• Letting people add steps to the palette of WorkflowCanvas or start from a template.

When not to useCopy Anchor Link

• Selling apps or plugins: use CatalogStore directly.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { WorkflowMarketplace } from "@fadymondy/nasaq/web";
import { Mail } from "lucide-react";

<WorkflowMarketplace
  categories={[{ id: "comms", label: "Messaging" }]}
  listings={[
    {
      id: "send-email", kind: "step", name: "Send email", summary: "Send a templated email.", category: "comms", icon: Mail,
      step: { inputs: ["Contact"], outputs: ["Message id"], fields: [{ name: "to", label: "To", kind: "text", required: true }] },
    },
  ]}
  onInstall={async (l) => { await api.install(l.id); }}
/>;

AnatomyCopy Anchor Link

WorkflowMarketplace      (a CatalogStore)
├─ toolbar               search, kind ToggleGroup (All, Steps, Presets), sort
├─ categories            chips with counts, Installed
├─ cards                 badge: Preset, Trigger or Action
└─ detail sheet          step: takes, gives, settings; preset: the WorkflowNetwork diagram

APICopy Anchor Link

AccessibilityCopy Anchor Link

Inherits the catalog store's: named chip and toggle groups, a live result count, a focus-trapped sheet, role="alert" install errors. The preset diagram is real text in cards.

RTL & i18nCopy Anchor Link

English and Arabic built in for the marketplace and the store. Field kinds and other code stay left-to-right; the preset diagram follows the reading direction.

Styling & tokensCopy Anchor Link

Same tokens as the catalog store and workflow network. No raw hex.

Do / Don'tCopy Anchor Link

• Do give presets a short steps list (under ten) so the sheet diagram stays readable.
• Don't put secrets in step.fields; it lists names and kinds only.

RelatedCopy Anchor Link

• CatalogStore · WorkflowCanvas · WorkflowNetwork

LabCopy Anchor Link

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