@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/process-step-progress-bar-D74Y-8Jo.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const spinner = require('./spinner-PSUHmhye.cjs');
+const transitions = require('./transitions-DpczSjmD.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {});
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {});
+    default:
+      return null;
+  }
+}
+
+function ProcessStepListItem({ stepId, step, isActive, position }) {
+  const formatStepTitle = (stepId2) => {
+    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", transitions.transitions.all, {
+        "border border-dashed border-neutral2 bg-surface3": isActive
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: utils.cn("text-ui-md min-w-6 flex justify-end", transitions.transitions.colors, {
+                "text-neutral5": isActive || step.status === "success",
+                "text-neutral3": !isActive && step.status !== "success"
+              }),
+              children: [
+                position,
+                "."
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: utils.cn("text-ui-md", transitions.transitions.colors, {
+                  "text-neutral5": isActive || step.status === "success",
+                  "text-neutral3": !isActive && step.status !== "success"
+                }),
+                children: formatStepTitle(stepId)
+              }
+            ),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center",
+              transitions.transitions.all,
+              {
+                "border border-neutral2 border-dashed": step.status === "pending",
+                "[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4": step.status !== "running",
+                "w-[1.75rem] h-[1.75rem]": step.status === "running",
+                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
+                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
+                "scale-110": step.status === "success" || step.status === "failed"
+              }
+            ),
+            children: getStatusIcon(step.status)
+          }
+        )
+      ]
+    }
+  );
+}
+
+function ProcessStepList({ currentStep, steps = [], className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    ProcessStepListItem,
+    {
+      stepId: step.id,
+      step,
+      isActive: currentStep?.id === step.id,
+      position: idx + 1
+    },
+    step.id
+  )) });
+}
+
+function ProcessStepProgressBar({ steps }) {
+  const totalSteps = steps.length;
+  const completedSteps = steps.filter((step) => step.status === "success").length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center flex-col gap-4 content-center w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: utils.cn("flex justify-end items-center relative h-[2rem]", transitions.transitions.colors, {
+            "bg-accent1Dark": step.status === "success" && steps?.[idx - 1]?.status === "success"
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn(
+                "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm",
+                transitions.transitions.all,
+                {
+                  "border border-neutral2 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
+                }
+              ),
+              children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {}) : idx + 1
+            }
+          )
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("text-xs text-neutral3 text-center", transitions.transitions.colors), children: [
+      completedSteps,
+      " of ",
+      totalSteps,
+      " steps completed"
+    ] })
+  ] });
+}
+
+exports.ProcessStepList = ProcessStepList;
+exports.ProcessStepListItem = ProcessStepListItem;
+exports.ProcessStepProgressBar = ProcessStepProgressBar;
+exports.getStatusIcon = getStatusIcon;
+//# sourceMappingURL=process-step-progress-bar-D74Y-8Jo.cjs.map

package/dist/process-step-progress-bar-D74Y-8Jo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-step-progress-bar-D74Y-8Jo.cjs","sources":["../src/ds/components/Steps/shared.tsx","../src/ds/components/Steps/process-step-list-item.tsx","../src/ds/components/Steps/process-step-list.tsx","../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner />;\n    case 'success':\n      return <CheckIcon />;\n    case 'failed':\n      return <XIcon />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListItemProps = {\n  stepId: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n};\n\nexport function ProcessStepListItem({ stepId, step, isActive, position }: ProcessStepListItemProps) {\n  // Always format the step ID as the title\n  const formatStepTitle = (stepId: string) => {\n    return stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, ' ');\n  };\n\n  return (\n    <div\n      className={cn('grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg', transitions.all, {\n        'border border-dashed border-neutral2 bg-surface3': isActive,\n      })}\n    >\n      <div className=\"grid grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('text-ui-md min-w-6 flex justify-end', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div>\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {formatStepTitle(stepId)}\n          </h4>\n          {step.description && <p className=\"text-ui-md text-neutral2 -mt-0.5\">{step.description}</p>}\n        </div>\n      </div>\n      <div\n        className={cn(\n          'w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center',\n          transitions.all,\n          {\n            'border border-neutral2 border-dashed': step.status === 'pending',\n            '[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4': step.status !== 'running',\n            'w-[1.75rem] h-[1.75rem]': step.status === 'running',\n            'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n            'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n            'scale-110': step.status === 'success' || step.status === 'failed',\n          },\n        )}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem\n          key={step.id}\n          stepId={step.id}\n          step={step}\n          isActive={currentStep?.id === step.id}\n          position={idx + 1}\n        />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex justify-center flex-col gap-4 content-center w-full\">\n      <div className=\"grid grid-cols-[0_repeat(9,1fr)] w-full\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('flex justify-end items-center relative h-[2rem]', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm',\n                  transitions.all,\n                  {\n                    'border border-neutral2 border-dashed': step.status === 'pending',\n                    '[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]': step.status !== 'running',\n                    'bg-accent1Dark text-white shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-white shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-xs text-neutral3 text-center', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["Spinner","CheckIcon","XIcon","stepId","jsxs","cn","transitions","jsx"],"mappings":"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"}