@echothink-ui/quality 0.1.0

package/src/components/QCProfileEditor.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import clsx from "clsx";
+import { ConfigForm, RuleBuilder } from "@echothink-ui/forms";
+import type { FormValues, RuleDefinition } from "@echothink-ui/forms";
+
+export interface QCThreshold {
+  id: string;
+  label: string;
+  operator: string;
+  value: number | string;
+}
+
+export interface QCProfile {
+  id: string;
+  language: string;
+  thresholds: QCThreshold[];
+}
+
+export interface QCProfileEditorProps {
+  profile: QCProfile;
+  onChange?: (profile: QCProfile) => void;
+  onSubmit?: (profile: QCProfile) => void;
+  className?: string;
+}
+
+const operatorOptions = [
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "eq", label: "Equals" },
+  { value: "between", label: "Between" }
+];
+
+export function QCProfileEditor({ profile, onChange, onSubmit, className }: QCProfileEditorProps) {
+  const values = React.useMemo(() => valuesFromProfile(profile), [profile]);
+  const rules = React.useMemo(() => rulesFromProfile(profile), [profile]);
+
+  return (
+    <div className={clsx("eth-quality-qc-profile-editor", className)} data-eth-component="QCProfileEditor">
+      <ConfigForm
+        title="QC profile"
+        description={`Profile ${profile.id}`}
+        sections={[
+          {
+            id: "profile",
+            title: "Thresholds",
+            description: "Language and threshold values used by the automated QC job.",
+            fields: [
+              {
+                name: "language",
+                type: "text",
+                label: "Language",
+                required: true
+              },
+              ...profile.thresholds.flatMap((threshold) => [
+                {
+                  name: operatorKey(threshold.id),
+                  type: "select" as const,
+                  label: `${threshold.label} operator`,
+                  options: operatorOptions
+                },
+                {
+                  name: valueKey(threshold.id),
+                  type: typeof threshold.value === "number" ? ("number" as const) : ("text" as const),
+                  label: `${threshold.label} value`
+                }
+              ])
+            ]
+          }
+        ]}
+        values={values}
+        submitLabel="Save profile"
+        onChange={(nextValues) => onChange?.(profileFromValues(profile, nextValues))}
+        onSubmit={(nextValues) => onSubmit?.(profileFromValues(profile, nextValues))}
+      />
+      <RuleBuilder
+        className="eth-quality-qc-profile-editor__rules"
+        rules={rules}
+        variables={profile.thresholds.map((threshold) => threshold.id)}
+        onChange={(nextRules) => onChange?.(profileFromRules(profile, nextRules))}
+      />
+    </div>
+  );
+}
+
+function valuesFromProfile(profile: QCProfile): FormValues {
+  return profile.thresholds.reduce<FormValues>(
+    (values, threshold) => ({
+      ...values,
+      [operatorKey(threshold.id)]: threshold.operator,
+      [valueKey(threshold.id)]: threshold.value
+    }),
+    { language: profile.language }
+  );
+}
+
+function profileFromValues(profile: QCProfile, values: FormValues): QCProfile {
+  return {
+    ...profile,
+    language: String(values.language ?? ""),
+    thresholds: profile.thresholds.map((threshold) => ({
+      ...threshold,
+      operator: String(values[operatorKey(threshold.id)] ?? threshold.operator),
+      value: normalizeThresholdValue(threshold.value, values[valueKey(threshold.id)])
+    }))
+  };
+}
+
+function rulesFromProfile(profile: QCProfile): RuleDefinition[] {
+  return profile.thresholds.map((threshold) => ({
+    id: threshold.id,
+    when: {
+      kind: "leaf",
+      field: threshold.id,
+      op: threshold.operator,
+      value: threshold.value
+    },
+    then: {
+      type: "require-approval",
+      target: "manual-review"
+    }
+  }));
+}
+
+function profileFromRules(profile: QCProfile, rules: RuleDefinition[]): QCProfile {
+  return {
+    ...profile,
+    thresholds: profile.thresholds.map((threshold) => {
+      const rule = rules.find((item) => item.id === threshold.id);
+      if (!rule) return threshold;
+      return {
+        ...threshold,
+        operator: rule.when.op ?? threshold.operator,
+        value: normalizeThresholdValue(threshold.value, rule.when.value)
+      };
+    })
+  };
+}
+
+function normalizeThresholdValue(previousValue: string | number, nextValue: unknown) {
+  if (typeof previousValue === "number") {
+    const numeric = Number(nextValue);
+    return Number.isNaN(numeric) ? previousValue : numeric;
+  }
+  return String(nextValue ?? "");
+}
+
+function operatorKey(id: string) {
+  return `${id}.operator`;
+}
+
+function valueKey(id: string) {
+  return `${id}.value`;
+}

package/src/components/QCRoutingTimeline.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, Surface } from "@echothink-ui/core";
+import type { EthSeverity } from "@echothink-ui/core";
+
+export interface QCRoutingEvent {
+  at: string;
+  label: string;
+  severity?: EthSeverity;
+}
+
+export interface QCRoutingTimelineProps {
+  events: QCRoutingEvent[];
+  className?: string;
+}
+
+export function QCRoutingTimeline({ events, className }: QCRoutingTimelineProps) {
+  return (
+    <Surface
+      className={clsx("eth-quality-qc-routing-timeline", className)}
+      title="Routing timeline"
+      data-eth-component="QCRoutingTimeline"
+    >
+      <ol className="eth-quality-qc-routing-timeline__events">
+        {events.map((event) => (
+          <li key={`${event.at}-${event.label}`}>
+            <time>{event.at}</time>
+            <Badge severity={event.severity ?? "info"}>{event.severity ?? "info"}</Badge>
+            <span>{event.label}</span>
+          </li>
+        ))}
+      </ol>
+    </Surface>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,14 @@
+export * from "./components/QCMetricsInspector";
+export * from "./components/QCProfileEditor";
+export * from "./components/QCJobMonitor";
+export * from "./components/QCDecisionBadge";
+export * from "./components/QCRoutingTimeline";
+
+export const QualityComponentNames = [
+  "QCMetricsInspector",
+  "QCProfileEditor",
+  "QCJobMonitor",
+  "QCDecisionBadge",
+  "QCRoutingTimeline"
+] as const;
+export type QualityComponentName = (typeof QualityComponentNames)[number];