@optiaxiom/proteus 0.0.0 → 0.1.0

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Group, Button, Text } from '@optiaxiom/react';
+import { useState } from 'react';
+import { IconAngleLeft } from '../icons/IconAngleLeft.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);
+  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,
+      {
+        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: [
+      questions.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Previous",
+            disabled: currentIndex === 0,
+            icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
+            onClick: (event) => {
+              event.preventDefault();
+              setCurrentIndex((i) => i - 1);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", children: [
+          currentIndex + 1,
+          " of ",
+          questions.length
+        ] })
+      ] }),
+      /* @__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",
+          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-Dns_NfIP.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']});
+var choice = recipe({base:[{border:'1',color:'fg.default',cursor:'pointer',flexDirection:'column',fontSize:'md',gap:'8',px:'16',py:'12',rounded:'lg',transition:'colors'},'ProteusQuestionItem__uar8vn2','ProteusQuestionItem__uar8vn0']});
+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,57 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { Group, Text, Box, Checkbox } from '@optiaxiom/react';
+import { VisuallyHidden } from '@optiaxiom/react/unstable';
+import { choiceGroup, choice, input, addon } from './ProteusQuestionItem-css.js';
+
+function ProteusQuestionItem({
+  onValueChange,
+  options,
+  question,
+  type,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "16", children: [
+    /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: question }),
+    /* @__PURE__ */ jsx(Group, { ...choiceGroup(), children: options.map((option, index) => {
+      const checked = type === "single_select" ? value?.[0] === option : Array.isArray(value) && value.includes(option);
+      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,
+            name: type === "single_select" ? "question-item" : void 0,
+            onChange: () => {
+              if (type === "single_select") {
+                onValueChange([option]);
+              } else {
+                const current = Array.isArray(value) ? 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, { fontWeight: "500", children: option }) })
+        ] })
+      ] }));
+    }) })
+  ] });
+}
+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 };