@optiaxiom/proteus 0.0.0 → 0.1.1

package/dist/esm/proteus-map/ProteusMap.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext, ProteusDocumentPathProvider } from '../proteus-document/ProteusDocumentPathContext.js';
+import { useProteusValue } from '../proteus-document/useProteusValue.js';
+
+function ProteusMap({ children, path, separator }) {
+  const { strict } = useProteusDocumentContext("@optiaxiom/proteus/ProteusMap");
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusMap"
+  );
+  const array = useProteusValue({ path });
+  if (!Array.isArray(array)) {
+    if (strict) {
+      throw new Error(
+        `Expected value at "${path}" to be an array got "${typeof array}" instead`
+      );
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsxs(
+    ProteusDocumentPathProvider,
+    {
+      path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
+      children: [
+        index > 0 && separator,
+        children
+      ]
+    },
+    index
+  )) });
+}
+ProteusMap.displayName = "@optiaxiom/proteus/ProteusMap";
+
+export { ProteusMap };

package/dist/esm/proteus-question/ProteusQuestion.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Group, Button, Text } from '@optiaxiom/react';
+import { useState, useRef, useEffect } from 'react';
+import { IconAngleLeft } from '../icons/IconAngleLeft.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { ProteusQuestionItem } from './ProteusQuestionItem.js';
+
+function ProteusQuestion({ questions }) {
+  const { onEvent } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusQuestion"
+  );
+  const [answers, setAnswers] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const answer = answers[currentIndex];
+  const valid = Array.isArray(answer) && answer.length > 0 && answer.every(Boolean);
+  const questionRef = useRef(null);
+  const lastIndexRef = useRef(currentIndex);
+  useEffect(() => {
+    if (lastIndexRef.current !== currentIndex) {
+      questionRef.current?.animate(
+        [
+          {
+            opacity: 0,
+            translate: currentIndex > lastIndexRef.current ? "8px" : "-8px"
+          },
+          {
+            opacity: 1,
+            translate: "0px"
+          }
+        ],
+        {
+          duration: 150
+        }
+      );
+      lastIndexRef.current = currentIndex;
+    }
+  }, [currentIndex]);
+  if (currentIndex >= questions.length) {
+    return null;
+  }
+  const current = questions[currentIndex];
+  const isLast = currentIndex === questions.length - 1;
+  const onComplete = () => onEvent({
+    message: answers.map(
+      (value, index) => `Q: ${questions[index].question}
+A: ${value === null ? "[Not specified]" : value}`
+    ).join("\n\n")
+  });
+  return /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
+    /* @__PURE__ */ jsx(
+      ProteusQuestionItem,
+      {
+        addonAfter: questions.length > 1 && /* @__PURE__ */ jsxs(Group, { gap: "6", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Previous",
+              disabled: currentIndex === 0,
+              icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
+              onClick: (event) => {
+                event.preventDefault();
+                setCurrentIndex((i) => i - 1);
+              },
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", fontSize: "sm", children: [
+            currentIndex + 1,
+            " of ",
+            questions.length
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Next",
+              disabled: isLast,
+              icon: /* @__PURE__ */ jsx(IconAngleRight, {}),
+              onClick: (event) => {
+                event.preventDefault();
+                setCurrentIndex((i) => i + 1);
+              },
+              size: "sm"
+            }
+          )
+        ] }),
+        choiceRef: questionRef,
+        onValueChange: (value) => {
+          answers[currentIndex] = value;
+          setAnswers([...answers]);
+        },
+        options: current.options,
+        question: current.question,
+        type: current.type,
+        value: answers[currentIndex] ?? null
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { gap: "8", justifyContent: "end", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: (event) => {
+            event.preventDefault();
+            answers[currentIndex] = null;
+            setAnswers([...answers]);
+            if (isLast) {
+              void onComplete();
+            } else {
+              setCurrentIndex((i) => i + 1);
+            }
+          },
+          children: "Skip"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "primary",
+          disabled: !valid,
+          onClick: (event) => {
+            event.preventDefault();
+            if (isLast) {
+              void onComplete();
+            } else {
+              setCurrentIndex((i) => i + 1);
+            }
+          },
+          children: isLast ? "Submit" : "Next"
+        }
+      )
+    ] })
+  ] });
+}
+ProteusQuestion.displayName = "@optiaxiom/proteus/ProteusQuestion";
+
+export { ProteusQuestion };

package/dist/esm/proteus-question/ProteusQuestionItem-css.js

@@ -0,0 +1,9 @@
+import './../assets/src/proteus-question/ProteusQuestionItem.css.ts.vanilla-S1I3NGY4.css';
+import { recipe } from '@optiaxiom/react/css-runtime';
+
+var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestionItem__uar8vn3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});
+var choice = recipe({base:[{border:'1',color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',px:'16',py:'12',rounded:'lg',transition:'colors'},'ProteusQuestionItem__uar8vn2','ProteusQuestionItem__uar8vn0'],variants:{cursor:{text:{cursor:'text'}}}});
+var choiceGroup = recipe({base:{flexDirection:'column',gap:'8'}});
+var input = recipe({base:'ProteusQuestionItem__uar8vn1'});
+
+export { addon, choice, choiceGroup, input };

package/dist/esm/proteus-question/ProteusQuestionItem.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, createElement } from 'react';
+import { Group, Text, Box, Checkbox } from '@optiaxiom/react';
+import { VisuallyHidden, InlineInput } from '@optiaxiom/react/unstable';
+import { IconPencil } from '../icons/IconPencil.js';
+import { choiceGroup, choice, input, addon } from './ProteusQuestionItem-css.js';
+
+function ProteusQuestionItem({
+  addonAfter,
+  choiceRef,
+  onValueChange,
+  options,
+  question,
+  type,
+  value
+}) {
+  const otherInputRef = useRef(null);
+  const otherValue = value?.find((v) => !options.includes(v));
+  const otherChecked = otherValue !== void 0;
+  return /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Text, { flex: "1", fontWeight: "500", children: question }),
+      addonAfter
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { ref: choiceRef, ...choiceGroup(), children: [
+      options.map((option, index) => {
+        const checked = type === "single_select" ? value?.[0] === option : value?.includes(option);
+        const disabled = type === "single_select" && otherChecked && !!otherValue;
+        return /* @__PURE__ */ createElement(Box, { asChild: true, ...choice(), key: option }, /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input(), children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              checked,
+              disabled,
+              name: type === "single_select" ? "question-item" : void 0,
+              onChange: () => {
+                if (type === "single_select") {
+                  onValueChange([option]);
+                } else {
+                  const current = value ?? [];
+                  onValueChange(
+                    checked ? current.filter((v) => v !== option) : [...current, option]
+                  );
+                }
+              },
+              type: type === "single_select" ? "radio" : "checkbox",
+              value: option
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
+            /* @__PURE__ */ jsx(Box, { ...addon(), children: type === "single_select" ? index + 1 : /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked,
+                hidden: true,
+                pointerEvents: "none",
+                tabIndex: -1
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Group, { flex: "1", flexDirection: "column", gap: "2", children: /* @__PURE__ */ jsx(Text, { children: option }) })
+          ] })
+        ] }));
+      }),
+      /* @__PURE__ */ createElement(Box, { asChild: true, ...choice({ cursor: "text" }), key: "other" }, /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input(), children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            checked: otherChecked,
+            name: type === "single_select" ? "question-item" : void 0,
+            onChange: () => {
+              if (type === "single_select") {
+                if (!otherValue) {
+                  onValueChange([""]);
+                }
+              }
+              otherInputRef.current?.focus();
+            },
+            type: "checkbox",
+            value: "other"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(Group, { gap: "12", children: [
+          /* @__PURE__ */ jsx(Box, { ...addon({ cursor: "pointer" }), children: type === "single_select" ? /* @__PURE__ */ jsx(IconPencil, {}) : /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: otherChecked,
+              hidden: true,
+              pointerEvents: "none",
+              tabIndex: -1
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Group, { flex: "1", flexDirection: "column", gap: "2", children: /* @__PURE__ */ jsx(
+            InlineInput,
+            {
+              label: "Something else",
+              onValueChange: (text) => {
+                if (type === "single_select") {
+                  onValueChange([text]);
+                } else {
+                  const current = value ?? [];
+                  onValueChange([
+                    ...current.filter((v) => options.includes(v)),
+                    ...text ? [text] : []
+                  ]);
+                }
+              },
+              ref: otherInputRef,
+              value: otherValue ?? ""
+            }
+          ) })
+        ] })
+      ] }))
+    ] })
+  ] });
+}
+ProteusQuestionItem.displayName = "@optiaxiom/proteus/ProteusQuestionItem";
+
+export { ProteusQuestionItem };

package/dist/esm/proteus-select/ProteusSelect.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Select } from '@optiaxiom/react';
+import { useRef } from 'react';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
+import { useProteusValue } from '../proteus-document/useProteusValue.js';
+
+function ProteusSelect({
+  children,
+  options = [],
+  ...props
+}) {
+  const { onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusSelect"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusSelect"
+  );
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const resolved = useProteusValue({ path: props.name ?? "" });
+  const value = props.name ? String(resolved ?? options[0]?.value ?? "") : options[0]?.value ?? "";
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...props,
+      onValueChange: (value2) => {
+        if (readOnly) {
+          return;
+        }
+        if (props.name) {
+          onDataChange?.(`${parentPath}/${props.name}`, value2);
+        }
+      },
+      options,
+      value,
+      children
+    }
+  );
+}
+ProteusSelect.displayName = "@optiaxiom/proteus/ProteusSelect";
+
+export { ProteusSelect };

package/dist/esm/proteus-show/ProteusShow.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
+import { resolveProteusValue } from '../proteus-document/resolveProteusValue.js';
+
+function ProteusShow({ children, when }) {
+  const { data } = useProteusDocumentContext("@optiaxiom/proteus/ProteusShow");
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusShow"
+  );
+  const conditions = Array.isArray(when) ? when : [when];
+  const shouldShow = conditions.every(
+    (condition) => evaluateCondition(condition, data, parentPath)
+  );
+  if (!shouldShow) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function evaluateCondition(condition, data, parentPath) {
+  if (!condition) {
+    return true;
+  }
+  if ("and" in condition) {
+    return condition.and.every(
+      (cond) => evaluateCondition(cond, data, parentPath)
+    );
+  }
+  if ("or" in condition) {
+    return condition.or.some(
+      (cond) => evaluateCondition(cond, data, parentPath)
+    );
+  }
+  if ("!!" in condition) {
+    const value = resolveProteusValue(condition["!!"], data, parentPath);
+    return !!value;
+  }
+  if ("==" in condition) {
+    const [left, right] = condition["=="];
+    return resolveProteusValue(left, data, parentPath) === resolveProteusValue(right, data, parentPath);
+  } else if ("!=" in condition) {
+    const [left, right] = condition["!="];
+    return resolveProteusValue(left, data, parentPath) !== resolveProteusValue(right, data, parentPath);
+  } else if ("<" in condition) {
+    const [left, right] = condition["<"];
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal < rightVal;
+  } else if ("<=" in condition) {
+    const [left, right] = condition["<="];
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal <= rightVal;
+  } else if (">" in condition) {
+    const [left, right] = condition[">"];
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal > rightVal;
+  } else if (">=" in condition) {
+    const [left, right] = condition[">="];
+    const leftVal = resolveProteusValue(left, data, parentPath);
+    const rightVal = resolveProteusValue(right, data, parentPath);
+    return typeof leftVal === "number" && typeof rightVal === "number" && leftVal >= rightVal;
+  }
+  return false;
+}
+ProteusShow.displayName = "@optiaxiom/proteus/ProteusShow";
+
+export { ProteusShow };

package/dist/esm/proteus-textarea/ProteusTextarea.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Textarea } from '@optiaxiom/react';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
+import { useProteusValue } from '../proteus-document/useProteusValue.js';
+
+function ProteusTextarea(props) {
+  const { onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusTextarea"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusTextarea"
+  );
+  const value = useProteusValue({ path: props.name ?? "" });
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ...props,
+      onValueChange: (value2) => {
+        if (props.name) {
+          onDataChange?.(`${parentPath}/${props.name}`, value2);
+        }
+      },
+      readOnly,
+      value: props.name ? String(value ?? "") : void 0
+    }
+  );
+}
+ProteusTextarea.displayName = "@optiaxiom/proteus/ProteusTextarea";
+
+export { ProteusTextarea };

package/dist/esm/proteus-value/ProteusValue.js

@@ -0,0 +1,9 @@
+"use client";
+import { useProteusValue } from '../proteus-document/useProteusValue.js';
+
+function ProteusValue(props) {
+  return useProteusValue(props);
+}
+ProteusValue.displayName = "@optiaxiom/proteus/ProteusValue";
+
+export { ProteusValue };