@contractspec/lib.presentation-runtime-react 10.0.1 → 12.0.0

package/dist/browser/index.js

@@ -0,0 +1,366 @@
+// src/WorkflowStepRenderer.tsx
+import { EmptyState, LoaderBlock } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function WorkflowStepRenderer({
+  spec,
+  state,
+  className,
+  renderHumanStep,
+  renderAutomationStep,
+  renderDecisionStep,
+  loadingFallback,
+  completedFallback,
+  cancelledFallback,
+  failedFallback
+}) {
+  const steps = spec.definition.steps;
+  if (!steps.length) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      children: /* @__PURE__ */ jsxDEV(EmptyState, {
+        title: "No steps defined",
+        description: "Add at least one step to this workflow to render it."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (!state) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      children: loadingFallback ?? /* @__PURE__ */ jsxDEV(LoaderBlock, {
+        label: "Loading workflow",
+        description: "Fetching workflow state..."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const lastExecution = state.history.at(-1);
+  if (state.status === "failed") {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      children: failedFallback?.(state, lastExecution) ?? /* @__PURE__ */ jsxDEV(EmptyState, {
+        title: "Workflow failed",
+        description: lastExecution?.error ?? "Fix the underlying issue and retry the step."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (state.status === "cancelled") {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      children: cancelledFallback ?? /* @__PURE__ */ jsxDEV(EmptyState, {
+        title: "Workflow cancelled",
+        description: "This workflow has been cancelled. Restart it to resume."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (state.status === "completed") {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      children: completedFallback ?? /* @__PURE__ */ jsxDEV(EmptyState, {
+        title: "Workflow complete",
+        description: "All steps have been executed successfully."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const activeStep = steps.find((step) => step.id === state.currentStep) ?? steps[0];
+  if (!activeStep) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      children: /* @__PURE__ */ jsxDEV(EmptyState, {
+        title: "No active step",
+        description: "This workflow has no active step."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  switch (activeStep.type) {
+    case "human": {
+      const form = activeStep.action?.form;
+      if (form && renderHumanStep) {
+        return /* @__PURE__ */ jsxDEV("div", {
+          className,
+          children: renderHumanStep(form, activeStep)
+        }, undefined, false, undefined, this);
+      }
+      return /* @__PURE__ */ jsxDEV("div", {
+        className,
+        children: /* @__PURE__ */ jsxDEV(EmptyState, {
+          title: "Form renderer missing",
+          description: "Provide renderHumanStep to render this human step's form."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    }
+    case "automation": {
+      if (renderAutomationStep) {
+        return /* @__PURE__ */ jsxDEV("div", {
+          className,
+          children: renderAutomationStep(activeStep)
+        }, undefined, false, undefined, this);
+      }
+      return /* @__PURE__ */ jsxDEV("div", {
+        className,
+        children: /* @__PURE__ */ jsxDEV(EmptyState, {
+          title: "Automation step in progress",
+          description: `Waiting for automation "${activeStep.label}" to finish.`
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    }
+    case "decision": {
+      if (renderDecisionStep) {
+        return /* @__PURE__ */ jsxDEV("div", {
+          className,
+          children: renderDecisionStep(activeStep)
+        }, undefined, false, undefined, this);
+      }
+      return /* @__PURE__ */ jsxDEV("div", {
+        className,
+        children: /* @__PURE__ */ jsxDEV(EmptyState, {
+          title: "Decision step awaiting input",
+          description: "Provide a custom decision renderer via renderDecisionStep."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+    }
+    default:
+      return /* @__PURE__ */ jsxDEV("div", {
+        className,
+        children: /* @__PURE__ */ jsxDEV(EmptyState, {
+          title: "Unknown step type",
+          description: `Step "${activeStep.id}" has an unsupported type.`
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this);
+  }
+}
+
+// src/WorkflowStepper.tsx
+import { Stepper } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function WorkflowStepper({
+  spec,
+  state,
+  className,
+  showLabels = false
+}) {
+  const steps = spec.definition.steps;
+  const total = steps.length;
+  const current = computeCurrent(steps, state);
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: ["flex flex-col gap-2", className].filter(Boolean).join(" "),
+    children: [
+      /* @__PURE__ */ jsxDEV2(Stepper, {
+        current,
+        total
+      }, undefined, false, undefined, this),
+      showLabels && total > 0 && /* @__PURE__ */ jsxDEV2("ol", {
+        className: "text-muted-foreground flex flex-wrap gap-2 text-sm",
+        children: steps.map((step, index) => {
+          const isActive = state?.status === "completed" ? index === total - 1 : step.id === state?.currentStep;
+          return /* @__PURE__ */ jsxDEV2("li", {
+            className: [
+              "rounded border px-2 py-1",
+              isActive ? "border-primary text-primary" : "border-border"
+            ].join(" "),
+            children: /* @__PURE__ */ jsxDEV2("span", {
+              className: "font-medium",
+              children: step.label
+            }, undefined, false, undefined, this)
+          }, step.id, false, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function computeCurrent(steps, state) {
+  if (!steps.length)
+    return 0;
+  if (!state)
+    return 1;
+  if (state.status === "completed")
+    return steps.length;
+  const idx = steps.findIndex((step) => step.id === state.currentStep);
+  return idx === -1 ? 1 : idx + 1;
+}
+
+// src/useWorkflow.ts
+import * as React from "react";
+function useWorkflow({
+  workflowId,
+  runner,
+  autoRefresh = true,
+  refreshIntervalMs = 2000
+}) {
+  const isMounted = React.useRef(true);
+  const [state, setState] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [isExecuting, setIsExecuting] = React.useState(false);
+  const refresh = React.useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const next = await runner.getState(workflowId);
+      if (!isMounted.current)
+        return;
+      setState(next);
+      setError(null);
+    } catch (err) {
+      if (!isMounted.current)
+        return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      if (isMounted.current)
+        setIsLoading(false);
+    }
+  }, [runner, workflowId]);
+  const executeStep = React.useCallback(async (input) => {
+    setIsExecuting(true);
+    try {
+      await runner.executeStep(workflowId, input);
+      await refresh();
+    } catch (err) {
+      if (isMounted.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+      throw err;
+    } finally {
+      if (isMounted.current)
+        setIsExecuting(false);
+    }
+  }, [runner, workflowId, refresh]);
+  const cancel = React.useCallback(async () => {
+    await runner.cancel(workflowId);
+    await refresh();
+  }, [runner, workflowId, refresh]);
+  React.useEffect(() => {
+    isMounted.current = true;
+    refresh();
+    if (!autoRefresh) {
+      return () => {
+        isMounted.current = false;
+      };
+    }
+    const interval = setInterval(() => {
+      refresh();
+    }, refreshIntervalMs);
+    return () => {
+      isMounted.current = false;
+      clearInterval(interval);
+    };
+  }, [refresh, autoRefresh, refreshIntervalMs]);
+  return {
+    state,
+    isLoading,
+    error,
+    isExecuting,
+    refresh,
+    executeStep,
+    cancel
+  };
+}
+
+// src/index.ts
+import * as React2 from "react";
+import { useForm } from "@contractspec/lib.ui-kit-web/ui/form";
+function usePresentationController({
+  defaults,
+  form: formOpts,
+  toVariables,
+  fetcher,
+  toChips,
+  useUrlState,
+  replace
+}) {
+  const url = useUrlState({ defaults, replace });
+  const form = useForm({
+    defaultValues: formOpts.defaultValues,
+    resolver: formOpts.resolver
+  });
+  React2.useEffect(() => {
+    form.reset({ ...form.getValues(), ...url.state.filters });
+  }, [url.state.filters]);
+  const submitFilters = form.handleSubmit((values) => {
+    url.setState({ filters: values, page: 1 });
+  });
+  const setSearch = React2.useCallback((q) => url.setState({ q, page: 1 }), [url]);
+  const variables = React2.useMemo(() => toVariables(url.state), [url.state, toVariables]);
+  const [data, setData] = React2.useState([]);
+  const [loading, setLoading] = React2.useState(false);
+  const [error, setError] = React2.useState(null);
+  const [totalItems, setTotalItems] = React2.useState(undefined);
+  const [totalPages, setTotalPages] = React2.useState(undefined);
+  const refetch = React2.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const out = await fetcher(variables);
+      setData(out.items);
+      setTotalItems(out.totalItems);
+      setTotalPages(out.totalPages);
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [variables, fetcher]);
+  React2.useEffect(() => {
+    refetch();
+  }, [refetch]);
+  const chips = React2.useMemo(() => toChips ? toChips(url.state.filters || {}, url.setFilter) : [], [url.state.filters, toChips]);
+  const clearAll = React2.useCallback(() => {
+    form.reset(formOpts.defaultValues);
+    url.setState({ filters: {}, page: 1 });
+  }, [form, formOpts.defaultValues, url]);
+  return {
+    form,
+    url,
+    variables,
+    data,
+    loading,
+    error,
+    totalItems,
+    totalPages,
+    refetch,
+    chips,
+    setSearch,
+    submitFilters,
+    clearAll
+  };
+}
+function useListCoordinator({
+  defaults,
+  form: formOpts,
+  toVariables,
+  toChips,
+  useUrlState,
+  replace
+}) {
+  const url = useUrlState({ defaults, replace });
+  const form = useForm({
+    defaultValues: formOpts.defaultValues,
+    resolver: formOpts.resolver
+  });
+  React2.useEffect(() => {
+    form.reset({ ...form.getValues(), ...url.state.filters });
+  }, [url.state.filters]);
+  const submitFilters = form.handleSubmit((values) => {
+    url.setState({ filters: values, page: 1 });
+  });
+  const setSearch = React2.useCallback((q) => url.setState({ q, page: 1 }), [url]);
+  const variables = React2.useMemo(() => toVariables(url.state), [url.state, toVariables]);
+  const chips = React2.useMemo(() => toChips ? toChips(url.state.filters || {}, url.setFilter) : [], [url.state.filters, toChips]);
+  const clearAll = React2.useCallback(() => {
+    form.reset(formOpts.defaultValues);
+    url.setState({ filters: {}, page: 1 });
+  }, [form, formOpts.defaultValues, url]);
+  return {
+    form,
+    url,
+    variables,
+    chips,
+    setSearch,
+    submitFilters,
+    clearAll
+  };
+}
+export {
+  useWorkflow,
+  usePresentationController,
+  useListCoordinator,
+  WorkflowStepper,
+  WorkflowStepRenderer
+};

package/dist/browser/useWorkflow.js

@@ -0,0 +1,78 @@
+// src/useWorkflow.ts
+import * as React from "react";
+function useWorkflow({
+  workflowId,
+  runner,
+  autoRefresh = true,
+  refreshIntervalMs = 2000
+}) {
+  const isMounted = React.useRef(true);
+  const [state, setState] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [isExecuting, setIsExecuting] = React.useState(false);
+  const refresh = React.useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const next = await runner.getState(workflowId);
+      if (!isMounted.current)
+        return;
+      setState(next);
+      setError(null);
+    } catch (err) {
+      if (!isMounted.current)
+        return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      if (isMounted.current)
+        setIsLoading(false);
+    }
+  }, [runner, workflowId]);
+  const executeStep = React.useCallback(async (input) => {
+    setIsExecuting(true);
+    try {
+      await runner.executeStep(workflowId, input);
+      await refresh();
+    } catch (err) {
+      if (isMounted.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+      throw err;
+    } finally {
+      if (isMounted.current)
+        setIsExecuting(false);
+    }
+  }, [runner, workflowId, refresh]);
+  const cancel = React.useCallback(async () => {
+    await runner.cancel(workflowId);
+    await refresh();
+  }, [runner, workflowId, refresh]);
+  React.useEffect(() => {
+    isMounted.current = true;
+    refresh();
+    if (!autoRefresh) {
+      return () => {
+        isMounted.current = false;
+      };
+    }
+    const interval = setInterval(() => {
+      refresh();
+    }, refreshIntervalMs);
+    return () => {
+      isMounted.current = false;
+      clearInterval(interval);
+    };
+  }, [refresh, autoRefresh, refreshIntervalMs]);
+  return {
+    state,
+    isLoading,
+    error,
+    isExecuting,
+    refresh,
+    executeStep,
+    cancel
+  };
+}
+export {
+  useWorkflow
+};

package/dist/index.d.ts

@@ -1,115 +1,97 @@
-import { WorkflowStepRenderer } from "./WorkflowStepRenderer.js";
-import { WorkflowStepper } from "./WorkflowStepper.js";
-import { UseWorkflowOptions, UseWorkflowResult, useWorkflow } from "./useWorkflow.js";
-import * as React from "react";
-import { DefaultValues, Resolver, UseFormReturn } from "react-hook-form";
-import { ListFetcher, ListState } from "@contractspec/lib.presentation-runtime-core";
-
-//#region src/index.d.ts
-interface UsePresentationControllerOpts<TFilters extends Record<string, unknown>, TVars, TItem> {
-  defaults: ListState<TFilters>;
-  form: {
-    defaultValues: DefaultValues<TFilters> | TFilters;
-    resolver?: Resolver<TFilters>;
-  };
-  toVariables: (input: ListState<TFilters>) => TVars;
-  fetcher: ListFetcher<TVars, TItem>;
-  toChips?: (filters: TFilters, setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void) => {
-    key: string;
-    label: React.ReactNode;
-    onRemove?: () => void;
-  }[];
-  useUrlState: (args: {
+import * as React from 'react';
+import type { DefaultValues, Resolver, UseFormReturn } from 'react-hook-form';
+import type { ListFetcher, ListState } from '@contractspec/lib.presentation-runtime-core';
+export interface UsePresentationControllerOpts<TFilters extends Record<string, unknown>, TVars, TItem> {
     defaults: ListState<TFilters>;
+    form: {
+        defaultValues: DefaultValues<TFilters> | TFilters;
+        resolver?: Resolver<TFilters>;
+    };
+    toVariables: (input: ListState<TFilters>) => TVars;
+    fetcher: ListFetcher<TVars, TItem>;
+    toChips?: (filters: TFilters, setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void) => {
+        key: string;
+        label: React.ReactNode;
+        onRemove?: () => void;
+    }[];
+    useUrlState: (args: {
+        defaults: ListState<TFilters>;
+        replace?: boolean;
+    }) => {
+        state: ListState<TFilters>;
+        setState: (next: Partial<ListState<TFilters>>) => void;
+        setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+        clearFilters: () => void;
+    };
     replace?: boolean;
-  }) => {
-    state: ListState<TFilters>;
-    setState: (next: Partial<ListState<TFilters>>) => void;
-    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
-    clearFilters: () => void;
-  };
-  replace?: boolean;
 }
-declare function usePresentationController<TFilters extends Record<string, unknown>, TVars, TItem>({
-  defaults,
-  form: formOpts,
-  toVariables,
-  fetcher,
-  toChips,
-  useUrlState,
-  replace
-}: UsePresentationControllerOpts<TFilters, TVars, TItem>): {
-  readonly form: UseFormReturn<TFilters>;
-  readonly url: {
-    state: ListState<TFilters>;
-    setState: (next: Partial<ListState<TFilters>>) => void;
-    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
-    clearFilters: () => void;
-  };
-  readonly variables: TVars;
-  readonly data: TItem[];
-  readonly loading: boolean;
-  readonly error: unknown;
-  readonly totalItems: number | undefined;
-  readonly totalPages: number | undefined;
-  readonly refetch: () => Promise<void>;
-  readonly chips: {
-    key: string;
-    label: React.ReactNode;
-    onRemove?: () => void;
-  }[];
-  readonly setSearch: (q: string) => void;
-  readonly submitFilters: (e?: React.BaseSyntheticEvent) => Promise<void>;
-  readonly clearAll: () => void;
+export declare function usePresentationController<TFilters extends Record<string, unknown>, TVars, TItem>({ defaults, form: formOpts, toVariables, fetcher, toChips, useUrlState, replace, }: UsePresentationControllerOpts<TFilters, TVars, TItem>): {
+    readonly form: UseFormReturn<TFilters>;
+    readonly url: {
+        state: ListState<TFilters>;
+        setState: (next: Partial<ListState<TFilters>>) => void;
+        setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+        clearFilters: () => void;
+    };
+    readonly variables: TVars;
+    readonly data: TItem[];
+    readonly loading: boolean;
+    readonly error: unknown;
+    readonly totalItems: number | undefined;
+    readonly totalPages: number | undefined;
+    readonly refetch: () => Promise<void>;
+    readonly chips: {
+        key: string;
+        label: React.ReactNode;
+        onRemove?: () => void;
+    }[];
+    readonly setSearch: (q: string) => void;
+    readonly submitFilters: (e?: React.BaseSyntheticEvent) => Promise<void>;
+    readonly clearAll: () => void;
 };
-interface UseListCoordinatorOpts<TFilters extends Record<string, unknown>, TVars> {
-  defaults: ListState<TFilters>;
-  form: {
-    defaultValues: DefaultValues<TFilters>;
-    resolver?: Resolver<TFilters>;
-  };
-  toVariables: (input: ListState<TFilters>) => TVars;
-  toChips?: (filters: TFilters, setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void) => {
-    key: string;
-    label: React.ReactNode;
-    onRemove?: () => void;
-  }[];
-  useUrlState: (args: {
+export interface UseListCoordinatorOpts<TFilters extends Record<string, unknown>, TVars> {
     defaults: ListState<TFilters>;
+    form: {
+        defaultValues: DefaultValues<TFilters>;
+        resolver?: Resolver<TFilters>;
+    };
+    toVariables: (input: ListState<TFilters>) => TVars;
+    toChips?: (filters: TFilters, setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void) => {
+        key: string;
+        label: React.ReactNode;
+        onRemove?: () => void;
+    }[];
+    useUrlState: (args: {
+        defaults: ListState<TFilters>;
+        replace?: boolean;
+    }) => {
+        state: ListState<TFilters>;
+        setState: (next: Partial<ListState<TFilters>>) => void;
+        setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+        clearFilters: () => void;
+    };
     replace?: boolean;
-  }) => {
-    state: ListState<TFilters>;
-    setState: (next: Partial<ListState<TFilters>>) => void;
-    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
-    clearFilters: () => void;
-  };
-  replace?: boolean;
 }
-declare function useListCoordinator<TFilters extends Record<string, unknown>, TVars>({
-  defaults,
-  form: formOpts,
-  toVariables,
-  toChips,
-  useUrlState,
-  replace
-}: UseListCoordinatorOpts<TFilters, TVars>): {
-  readonly form: UseFormReturn<TFilters>;
-  readonly url: {
-    state: ListState<TFilters>;
-    setState: (next: Partial<ListState<TFilters>>) => void;
-    setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
-    clearFilters: () => void;
-  };
-  readonly variables: TVars;
-  readonly chips: {
-    key: string;
-    label: React.ReactNode;
-    onRemove?: () => void;
-  }[];
-  readonly setSearch: (q: string) => void;
-  readonly submitFilters: (e?: React.BaseSyntheticEvent) => Promise<void>;
-  readonly clearAll: () => void;
+export declare function useListCoordinator<TFilters extends Record<string, unknown>, TVars>({ defaults, form: formOpts, toVariables, toChips, useUrlState, replace, }: UseListCoordinatorOpts<TFilters, TVars>): {
+    readonly form: UseFormReturn<TFilters>;
+    readonly url: {
+        state: ListState<TFilters>;
+        setState: (next: Partial<ListState<TFilters>>) => void;
+        setFilter: (key: keyof TFilters, value: TFilters[keyof TFilters] | null) => void;
+        clearFilters: () => void;
+    };
+    readonly variables: TVars;
+    readonly chips: {
+        key: string;
+        label: React.ReactNode;
+        onRemove?: () => void;
+    }[];
+    readonly setSearch: (q: string) => void;
+    readonly submitFilters: (e?: React.BaseSyntheticEvent) => Promise<void>;
+    readonly clearAll: () => void;
 };
-//#endregion
-export { UseListCoordinatorOpts, UsePresentationControllerOpts, type UseWorkflowOptions, type UseWorkflowResult, WorkflowStepRenderer, WorkflowStepper, useListCoordinator, usePresentationController, useWorkflow };
+export { useWorkflow } from './useWorkflow';
+export type { UseWorkflowOptions, UseWorkflowResult } from './useWorkflow';
+export { WorkflowStepper } from './WorkflowStepper';
+export { WorkflowStepRenderer } from './WorkflowStepRenderer';
 //# sourceMappingURL=index.d.ts.map