Add workflow card demo

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '24'
           cache: 'npm'
       - name: Install dependencies
         run: npm ci

.github/workflows/typecheck.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '24'
           cache: 'npm'
       - name: Install dependencies
         run: npm ci

package.json

@@ -4,8 +4,8 @@
   "version": "1.0.0",
   "license": "MIT",
   "engines": {
-    "node": "16.x",
-    "npm": "8.x"
+    "node": "24.x",
+    "npm": "11.x"
   },
   "private": true,
   "scripts": {

src/components.ts

@@ -30,6 +30,13 @@ const LinkButton = z.object({
   linkButtonLabel: z.string().max(500),
 });
 
+const WorkflowButton = z.object({
+  workflowButtonLabel: z.string().max(500),
+  workflowButtonWorkflowIdentifier: z.object({
+    workflowId: z.string(),
+  }),
+});
+
 const Spacer = z.object({
   spacerSize: ComponentSpacerSize,
 });
@@ -48,6 +55,7 @@ const RowContentUnionInput = z.object({
   componentText: Text.optional(),
   componentDivider: Divider.optional(),
   componentLinkButton: LinkButton.optional(),
+  componentWorkflowButton: WorkflowButton.optional(),
   componentSpacer: Spacer.optional(),
   componentBadge: Badge.optional(),
   componentCopyButton: CopyButton.optional(),
@@ -62,6 +70,7 @@ const ContainerContentUnionInput = z.object({
   componentText: Text.optional(),
   componentDivider: Divider.optional(),
   componentLinkButton: LinkButton.optional(),
+  componentWorkflowButton: WorkflowButton.optional(),
   componentSpacer: Spacer.optional(),
   componentBadge: Badge.optional(),
   componentCopyButton: CopyButton.optional(),
@@ -76,6 +85,7 @@ export const Component = z.object({
   componentText: Text.optional(),
   componentDivider: Divider.optional(),
   componentLinkButton: LinkButton.optional(),
+  componentWorkflowButton: WorkflowButton.optional(),
   componentSpacer: Spacer.optional(),
   componentBadge: Badge.optional(),
   componentCopyButton: CopyButton.optional(),

src/example-cards/index.ts

@@ -10,6 +10,7 @@ import usage from './usage';
 import latestInvoice from './latestInvoice';
 import sentry from './sentry';
 import tutorial from './tutorial';
+import workflow from './workflow';
 
 export const cardExamples: (() => Card)[] = [
   // realistic examples
@@ -21,6 +22,7 @@ export const cardExamples: (() => Card)[] = [
   sentry,
   timerCard,
   tutorial,
+  workflow,
 
   // component examples
   componentLibrary,

src/example-cards/workflow.ts

@@ -0,0 +1,31 @@
+import { Card } from '../response';
+
+export default (): Card => {
+  return {
+    key: 'workflow-card',
+    timeToLiveSeconds: null,
+    components: [
+      {
+        componentText: {
+          text: 'Trigger a workflow directly from a customer card.',
+          textSize: 'S',
+          textColor: 'MUTED',
+        },
+      },
+      {
+        componentSpacer: {
+          spacerSize: 'M',
+        },
+      },
+      {
+        componentWorkflowButton: {
+          workflowButtonLabel: 'Run workflow',
+          workflowButtonWorkflowIdentifier: {
+            // This is a placeholder workflow ID from Plain's developer environment. You'll need to replace this with the a workflow ID from your workspace.
+            workflowId: 'wf_01KKKW99MRJW6SY6C12JS0NRBR',
+          },
+        },
+      },
+    ],
+  };
+};