@showwhat/configurator 1.0.1 → 2.0.0

package/README.md

@@ -1,6 +1,8 @@
 # @showwhat/configurator
 
-A reusable React component library for visually editing showwhat feature flag definitions. Provides a complete rule-builder UI — bring your own store and persistence.
+A reusable React component library for visually editing showwhat definitions — like Swagger UI for your flag and config rules.
+
+Provides a complete rule-builder UI while letting your app own storage, workflow, and persistence.
 
 ## Installation
 

package/dist/index.d.ts

@@ -84,6 +84,7 @@ type ValueInputProps = {
 type DateTimeInputProps = {
     value: string;
     onChange: (value: string) => void;
+    disabled?: boolean;
 };
 type ValidationIssueDisplay = {
     path: (string | number)[];
@@ -219,7 +220,7 @@ declare function TabsContent({ className, ...props }: React__default.ComponentPr
 
 declare function ValueInput({ value, onChange, placeholder }: ValueInputProps): react_jsx_runtime.JSX.Element;
 
-declare function DateTimeInput({ value, onChange }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
+declare function DateTimeInput({ value, onChange, disabled }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
 
 declare function ValidationMessage({ errors }: ValidationMessageProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/index.js

@@ -309,7 +309,7 @@ function Badge({
 
 // src/components/condition-builder/TagInput.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function TagInput({ value, onChange, placeholder }) {
+function TagInput({ value, onChange, placeholder, disabled }) {
   const values = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
   const [text, setText] = useState("");
   const emit = useCallback(
@@ -358,32 +358,39 @@ function TagInput({ value, onChange, placeholder }) {
     },
     [addValues]
   );
-  return /* @__PURE__ */ jsxs3("div", { className: "border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-1 flex-wrap items-center gap-1 rounded-md border px-2 py-1 focus-within:ring-[3px]", children: [
-    values.map((v, i) => /* @__PURE__ */ jsxs3(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
-      v,
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
-          onClick: () => removeValue(i),
-          "aria-label": `Remove ${v}`,
-          children: "\xD7"
-        }
-      )
-    ] }, `${v}-${i}`)),
-    /* @__PURE__ */ jsx7(
-      "input",
-      {
-        className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
-        value: text,
-        placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
-        onChange: (e) => setText(e.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-1 flex-wrap items-center gap-1 rounded-md border px-2 py-1 focus-within:ring-[3px]${disabled ? " opacity-50" : ""}`,
+      children: [
+        values.map((v, i) => /* @__PURE__ */ jsxs3(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
+          v,
+          !disabled && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
+              onClick: () => removeValue(i),
+              "aria-label": `Remove ${v}`,
+              children: "\xD7"
+            }
+          )
+        ] }, `${v}-${i}`)),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
+            value: text,
+            placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            disabled
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/condition-builders.ts
@@ -482,7 +489,7 @@ import { useCallback as useCallback4, useMemo as useMemo2 } from "react";
 // src/components/condition-builder/NumberTagInput.tsx
 import { useCallback as useCallback3, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function NumberTagInput({ value, onChange, placeholder }) {
+function NumberTagInput({ value, onChange, placeholder, disabled }) {
   const values = Array.isArray(value) ? value : [value];
   const [text, setText] = useState2("");
   const emit = useCallback3(
@@ -531,33 +538,40 @@ function NumberTagInput({ value, onChange, placeholder }) {
     },
     [addValues]
   );
-  return /* @__PURE__ */ jsxs5("div", { className: "border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-1 flex-wrap items-center gap-1 rounded-md border px-2 py-1 focus-within:ring-[3px]", children: [
-    values.map((v, i) => /* @__PURE__ */ jsxs5(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
-      v,
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          type: "button",
-          className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
-          onClick: () => removeValue(i),
-          "aria-label": `Remove ${v}`,
-          children: "\xD7"
-        }
-      )
-    ] }, `${v}-${i}`)),
-    /* @__PURE__ */ jsx9(
-      "input",
-      {
-        className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
-        type: "number",
-        value: text,
-        placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
-        onChange: (e) => setText(e.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-1 flex-wrap items-center gap-1 rounded-md border px-2 py-1 focus-within:ring-[3px]${disabled ? " opacity-50" : ""}`,
+      children: [
+        values.map((v, i) => /* @__PURE__ */ jsxs5(Badge, { variant: "outline", className: "bg-muted gap-1 font-mono text-xs", children: [
+          v,
+          !disabled && /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: "text-muted-foreground hover:text-foreground ml-0.5 cursor-pointer leading-none",
+              onClick: () => removeValue(i),
+              "aria-label": `Remove ${v}`,
+              children: "\xD7"
+            }
+          )
+        ] }, `${v}-${i}`)),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            className: "min-w-[80px] flex-1 bg-transparent py-0.5 font-mono text-sm outline-none placeholder:text-muted-foreground",
+            type: "number",
+            value: text,
+            placeholder: values.length === 0 ? placeholder ?? "type and press Enter" : "",
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            disabled
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/condition-builder/NumberConditionEditor.tsx
@@ -656,7 +670,7 @@ function fromLocalDatetime(local) {
   if (Number.isNaN(d.getTime())) return local;
   return d.toISOString();
 }
-function DateTimeInput({ value, onChange }) {
+function DateTimeInput({ value, onChange, disabled }) {
   const [rawValue, setRawValue] = useState3(value);
   const [showRaw, setShowRaw] = useState3(false);
   const prevValueRef = useRef(value);
@@ -675,7 +689,8 @@ function DateTimeInput({ value, onChange }) {
           onChange: (e) => {
             setRawValue(e.target.value);
             onChange(e.target.value);
-          }
+          },
+          disabled
         }
       ),
       /* @__PURE__ */ jsx11(
@@ -697,7 +712,8 @@ function DateTimeInput({ value, onChange }) {
         className: "h-8 flex-1 text-xs",
         type: "datetime-local",
         value: toLocalDatetime(value),
-        onChange: (e) => onChange(fromLocalDatetime(e.target.value))
+        onChange: (e) => onChange(fromLocalDatetime(e.target.value)),
+        disabled
       }
     ),
     /* @__PURE__ */ jsx11(
@@ -2968,17 +2984,24 @@ function createPresetConditionMeta(presets) {
       type: name,
       label: capitalize(name),
       description,
-      defaults: { ...baseDefaults, ...preset.defaults, type: name }
+      defaults: { ...baseDefaults, ...preset.overrides, type: name }
     };
   });
 }
-function createPresetEditor(presetName, builtinType, presetKey) {
+function createPresetEditor(presetName, builtinType, presetKey, overrides = {}) {
+  const lockedFields = new Set(Object.keys(overrides));
   function PresetConditionEditor({ condition, onChange }) {
     const rec = useMemo10(() => condition, [condition]);
     const update = useCallback11(
       (field, value) => {
         onChange(
-          buildCustomCondition({ ...rec, [field]: value, key: presetKey, type: presetName })
+          buildCustomCondition({
+            ...rec,
+            [field]: value,
+            ...overrides,
+            key: presetKey,
+            type: presetName
+          })
         );
       },
       [rec, onChange]
@@ -3002,6 +3025,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             })
           );
         };
+        const opLocked = lockedFields.has("op");
+        const valueLocked = lockedFields.has("value");
         return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
           /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
           /* @__PURE__ */ jsx45(
@@ -3009,7 +3034,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.op ?? "eq"),
               onChange: handleOpChange,
-              options: OP_OPTIONS
+              options: OP_OPTIONS,
+              disabled: opLocked
             }
           ),
           isArray ? /* @__PURE__ */ jsx45(
@@ -3017,7 +3043,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: rec.value ?? "",
               onChange: (v) => update("value", v),
-              placeholder: `e.g. ${presetKey} value`
+              placeholder: `e.g. ${presetKey} value`,
+              disabled: valueLocked
             }
           ) : isRegex ? /* @__PURE__ */ jsx45(
             Input,
@@ -3025,7 +3052,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
               className: "h-8 font-mono text-sm",
               value: String(rec.value ?? ""),
               placeholder: "e.g. ^test.*$",
-              onChange: (e) => update("value", e.target.value)
+              onChange: (e) => update("value", e.target.value),
+              disabled: valueLocked
             }
           ) : /* @__PURE__ */ jsx45(
             Input,
@@ -3033,7 +3061,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
               className: "h-8 text-sm",
               value: String(rec.value ?? ""),
               placeholder: `e.g. ${presetKey} value`,
-              onChange: (e) => update("value", e.target.value)
+              onChange: (e) => update("value", e.target.value),
+              disabled: valueLocked
             }
           )
         ] });
@@ -3055,6 +3084,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             })
           );
         };
+        const numOpLocked = lockedFields.has("op");
+        const numValueLocked = lockedFields.has("value");
         return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
           /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
           /* @__PURE__ */ jsx45(
@@ -3062,7 +3093,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.op ?? "eq"),
               onChange: handleNumOpChange,
-              options: OP_OPTIONS2
+              options: OP_OPTIONS2,
+              disabled: numOpLocked
             }
           ),
           isNumArray ? /* @__PURE__ */ jsx45(
@@ -3070,7 +3102,8 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: rec.value ?? [],
               onChange: (v) => update("value", v),
-              placeholder: `e.g. ${presetKey} value`
+              placeholder: `e.g. ${presetKey} value`,
+              disabled: numValueLocked
             }
           ) : /* @__PURE__ */ jsx45(
             Input,
@@ -3079,12 +3112,14 @@ function createPresetEditor(presetName, builtinType, presetKey) {
               className: "h-8 font-mono text-sm",
               value: rec.value !== void 0 ? String(rec.value) : "",
               placeholder: "e.g. 100",
-              onChange: (e) => update("value", e.target.value === "" ? "" : Number(e.target.value))
+              onChange: (e) => update("value", e.target.value === "" ? "" : Number(e.target.value)),
+              disabled: numValueLocked
             }
           )
         ] });
       }
-      case "bool":
+      case "bool": {
+        const boolValueLocked = lockedFields.has("value");
         return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
           /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
           /* @__PURE__ */ jsx45(OperatorSelect, { value: "eq", options: OP_OPTIONS4, disabled: true }),
@@ -3093,6 +3128,7 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.value ?? "true"),
               onValueChange: (v) => update("value", v === "true"),
+              disabled: boolValueLocked,
               children: [
                 /* @__PURE__ */ jsx45(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsx45(SelectValue, {}) }),
                 /* @__PURE__ */ jsxs31(SelectContent, { children: [
@@ -3103,7 +3139,10 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             }
           )
         ] });
-      case "datetime":
+      }
+      case "datetime": {
+        const dtOpLocked = lockedFields.has("op");
+        const dtValueLocked = lockedFields.has("value");
         return /* @__PURE__ */ jsxs31(ConditionRow, { children: [
           /* @__PURE__ */ jsx45(KeyInput, { value: presetKey, disabled: true }),
           /* @__PURE__ */ jsx45(
@@ -3111,11 +3150,20 @@ function createPresetEditor(presetName, builtinType, presetKey) {
             {
               value: String(rec.op ?? "eq"),
               onChange: (v) => update("op", v),
-              options: OP_OPTIONS3
+              options: OP_OPTIONS3,
+              disabled: dtOpLocked
             }
           ),
-          /* @__PURE__ */ jsx45(DateTimeInput, { value: String(rec.value ?? ""), onChange: (v) => update("value", v) })
+          /* @__PURE__ */ jsx45(
+            DateTimeInput,
+            {
+              value: String(rec.value ?? ""),
+              onChange: (v) => update("value", v),
+              disabled: dtValueLocked
+            }
+          )
         ] });
+      }
     }
     return null;
   }
@@ -3127,7 +3175,10 @@ function createPresetUI(presets) {
   const editorOverrides = /* @__PURE__ */ new Map();
   for (const [name, preset] of Object.entries(presets)) {
     if (PRIMITIVE_TYPES.has(preset.type) && preset.key) {
-      editorOverrides.set(name, createPresetEditor(name, preset.type, preset.key));
+      editorOverrides.set(
+        name,
+        createPresetEditor(name, preset.type, preset.key, preset.overrides)
+      );
     }
   }
   return { extraConditionTypes, editorOverrides };
@@ -3192,7 +3243,7 @@ function useConfiguratorSelector(selector) {
 // src/configurator/PreviewPanel.tsx
 import { useCallback as useCallback14, useEffect, useMemo as useMemo11, useRef as useRef5, useState as useState11 } from "react";
 import { ChevronRight as ChevronRight2, Eye as Eye2, Loader2, Maximize2, Play } from "lucide-react";
-import { resolve } from "showwhat";
+import { resolve, builtinEvaluators } from "showwhat";
 import { DefinitionInactiveError, DefinitionNotFoundError, VariationNotFoundError } from "showwhat";
 
 // src/configurator/selectors.ts
@@ -3397,38 +3448,49 @@ function PreviewPanel() {
       const result = await resolve({
         definitions: { [selectedKey]: definitions[selectedKey] },
         context,
-        options: fallback ? { fallback } : void 0
+        options: {
+          evaluators: builtinEvaluators,
+          ...fallback ? { fallback } : void 0
+        }
       });
       if (controller.signal.aborted) return;
       const resolution = result[selectedKey];
-      setPreviewResult({
-        status: "success",
-        value: resolution.value,
-        meta: resolution.meta
-      });
-    } catch (err) {
-      if (controller.signal.aborted) return;
-      if (err instanceof DefinitionInactiveError) {
-        setPreviewResult({
-          status: "inactive",
-          message: `"${selectedKey}" is inactive`
-        });
-      } else if (err instanceof VariationNotFoundError) {
+      if (resolution.success) {
         setPreviewResult({
-          status: "no-match",
-          message: "No variation matched the given context"
-        });
-      } else if (err instanceof DefinitionNotFoundError) {
-        setPreviewResult({
-          status: "error",
-          message: `Definition "${selectedKey}" not found`
+          status: "success",
+          value: resolution.value,
+          meta: resolution.meta
         });
       } else {
-        setPreviewResult({
-          status: "error",
-          message: err instanceof Error ? err.message : "Unknown error"
-        });
+        const err = resolution.error;
+        if (err instanceof DefinitionInactiveError) {
+          setPreviewResult({
+            status: "inactive",
+            message: `"${selectedKey}" is inactive`
+          });
+        } else if (err instanceof VariationNotFoundError) {
+          setPreviewResult({
+            status: "no-match",
+            message: "No variation matched the given context"
+          });
+        } else if (err instanceof DefinitionNotFoundError) {
+          setPreviewResult({
+            status: "error",
+            message: `Definition "${selectedKey}" not found`
+          });
+        } else {
+          setPreviewResult({
+            status: "error",
+            message: err.message
+          });
+        }
       }
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setPreviewResult({
+        status: "error",
+        message: err instanceof Error ? err.message : "Unknown error"
+      });
     } finally {
       if (!controller.signal.aborted) {
         setIsResolving(false);