@tduniec/plugin-template-designer 0.3.7 → 0.4.0

package/dist/components/Nodes/ActionNode.esm.js

@@ -1,602 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { memo, useState, useRef, useEffect } from 'react';
-import { NodeToolbar, Position, Handle } from '@xyflow/react';
-import { useTheme, styled } from '@material-ui/core/styles';
-import { Box, Typography, IconButton, TextField, Button, Divider, Chip } from '@material-ui/core';
-import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
-import AddIcon from '@material-ui/icons/Add';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import { normalizeSchemaType, buildTypeLabel, extractEnumOptions, stringifyValueForDisplay, coerceValueForType } from './action/schema.esm.js';
-import { useActionInputs } from './action/useActionInputs.esm.js';
-import { createStopNodeInteraction } from './common/nodeInteraction.esm.js';
-import { AutoWidthPopper } from './common/AutoWidthPopper.esm.js';
-
-const Card = styled(Box)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: 12,
-  width: 760,
-  // card width
-  padding: theme.spacing(1.5),
-  boxShadow: theme.shadows[2],
-  color: theme.palette.text.primary
-}));
-const Header = styled(Box)(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "1fr",
-  gap: theme.spacing(1),
-  marginBottom: theme.spacing(1)
-}));
-const Grid = styled(Box)(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "88px 1fr",
-  gap: theme.spacing(1),
-  alignItems: "center"
-}));
-const KvRow = styled(Box)(({ theme }) => ({
-  display: "grid",
-  gridTemplateColumns: "200px 140px 1fr auto",
-  gap: theme.spacing(1),
-  alignItems: "center"
-}));
-const DEFAULT_ACTION_OPTIONS = [
-  "fetch:template"
-  // TODO to be fixed later to not uses default actions
-];
-const ActionNodeComponent = ({ data }) => {
-  const { rfId, step } = data;
-  const [newKey, setNewKey] = useState("");
-  const [newVal, setNewVal] = useState("");
-  const stepOutputReferences = data.stepOutputReferences ?? [];
-  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
-  const deleteConfirmationTimeoutRef = useRef(null);
-  const theme = useTheme();
-  const actionOptions = (data.scaffolderActionIds?.length ?? 0) > 0 ? data.scaffolderActionIds ?? [] : DEFAULT_ACTION_OPTIONS;
-  const handleTop = (field) => (e) => data.onUpdateField?.(rfId, field, e.target.value);
-  const actionId = typeof step?.action === "string" ? step.action : "";
-  const [actionInputValue, setActionInputValue] = useState(actionId);
-  useEffect(() => {
-    setActionInputValue(actionId);
-  }, [actionId]);
-  const {
-    actionInputSchema,
-    inputEntries,
-    usedInputKeys,
-    missingRequiredInputKeys,
-    availableInputOptions,
-    trimmedNewKey,
-    selectedNewKeyOption,
-    newKeyNormalizedType,
-    newKeyTypeLabel,
-    newKeyEnumOptions
-  } = useActionInputs({ data, step, actionId, newKey });
-  const hasMissingRequiredInputs = missingRequiredInputKeys.length > 0;
-  const isAddDisabled = !trimmedNewKey || usedInputKeys.has(trimmedNewKey);
-  const newValueOptions = Array.from(
-    /* @__PURE__ */ new Set([
-      ...newKeyNormalizedType === "boolean" ? ["true", "false"] : [],
-      ...newKeyEnumOptions,
-      ...stepOutputReferences
-    ])
-  );
-  const paletteMode = theme.palette.mode ?? theme.palette.type ?? "light";
-  const requiredInputsBackground = paletteMode === "dark" ? "rgba(244, 67, 54, 0.2)" : "rgba(244, 67, 54, 0.08)";
-  const addPair = () => {
-    const k = trimmedNewKey;
-    if (!k || usedInputKeys.has(k)) return;
-    const schema = selectedNewKeyOption?.schema ?? actionInputSchema?.[k];
-    const normalizedType = normalizeSchemaType(schema);
-    const parsedValue = coerceValueForType(newVal, normalizedType);
-    data.onUpdateInput?.(rfId, k, parsedValue);
-    setNewKey("");
-    setNewVal("");
-  };
-  const stopAll = createStopNodeInteraction();
-  useEffect(() => {
-    if (!isConfirmingDelete) {
-      if (deleteConfirmationTimeoutRef.current) {
-        clearTimeout(deleteConfirmationTimeoutRef.current);
-        deleteConfirmationTimeoutRef.current = null;
-      }
-      return void 0;
-    }
-    deleteConfirmationTimeoutRef.current = setTimeout(() => {
-      setIsConfirmingDelete(false);
-      deleteConfirmationTimeoutRef.current = null;
-    }, 3500);
-    return () => {
-      if (deleteConfirmationTimeoutRef.current) {
-        clearTimeout(deleteConfirmationTimeoutRef.current);
-        deleteConfirmationTimeoutRef.current = null;
-      }
-    };
-  }, [isConfirmingDelete]);
-  const handleDeleteNode = () => {
-    if (!data.onRemoveNode) {
-      return;
-    }
-    if (!isConfirmingDelete) {
-      setIsConfirmingDelete(true);
-      return;
-    }
-    data.onRemoveNode(rfId);
-    setIsConfirmingDelete(false);
-  };
-  return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsxs(Header, { title: step?.name || "Unnamed Step", children: [
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: theme.spacing(1)
-          },
-          children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", noWrap: true, children: step?.name || "Unnamed Step" }),
-            data.onRemoveNode && /* @__PURE__ */ jsxs(
-              Box,
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: theme.spacing(0.5),
-                  color: theme.palette.text.secondary
-                },
-                children: [
-                  isConfirmingDelete && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: "Click again to delete" }),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      size: "small",
-                      onClick: handleDeleteNode,
-                      onPointerDown: (e) => e.stopPropagation(),
-                      "aria-label": "Remove action",
-                      color: isConfirmingDelete ? "secondary" : "default",
-                      className: "nodrag nowheel",
-                      children: /* @__PURE__ */ jsx(DeleteOutlineIcon, { fontSize: "small" })
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Action" }),
-      /* @__PURE__ */ jsx(
-        Autocomplete,
-        {
-          size: "small",
-          options: actionOptions,
-          PopperComponent: AutoWidthPopper,
-          freeSolo: true,
-          autoHighlight: true,
-          value: actionId,
-          inputValue: actionInputValue,
-          filterOptions: (options) => {
-            const needle = actionInputValue.trim().toLowerCase();
-            if (!needle) {
-              return options;
-            }
-            return options.filter((opt) => opt.toLowerCase().includes(needle));
-          },
-          onChange: (_, newValue) => {
-            const nextValue = newValue ?? "";
-            setActionInputValue(nextValue);
-            data.onUpdateField?.(rfId, "action", nextValue);
-          },
-          onInputChange: (_, newInputValue, reason) => {
-            if (reason === "reset") {
-              return;
-            }
-            const nextValue = newInputValue ?? "";
-            setActionInputValue(nextValue);
-            data.onUpdateField?.(rfId, "action", nextValue);
-          },
-          onPointerDown: stopAll.onPointerDown,
-          onKeyDown: stopAll.onKeyDown,
-          className: stopAll.className,
-          fullWidth: true,
-          renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
-            {
-              ...params,
-              size: "small",
-              placeholder: "e.g. fetch:template",
-              fullWidth: true,
-              inputProps: {
-                ...params.inputProps,
-                ...stopAll.inputProps
-              }
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(NodeToolbar, { position: Position.Bottom, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "outlined",
-        size: "small",
-        startIcon: /* @__PURE__ */ jsx(AddIcon, { fontSize: "small" }),
-        onClick: () => data.onAddNode?.({
-          afterRfId: rfId,
-          type: "actionNode"
-        }),
-        onPointerDown: (e) => e.stopPropagation(),
-        className: "nodrag nowheel",
-        children: "Add Action"
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(Box, { sx: { mb: 1 }, children: /* @__PURE__ */ jsxs(Grid, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "ID" }),
-      /* @__PURE__ */ jsx(
-        TextField,
-        {
-          size: "small",
-          placeholder: "string id",
-          value: String(step?.id ?? ""),
-          onChange: handleTop("id"),
-          fullWidth: true,
-          ...stopAll
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Name" }),
-      /* @__PURE__ */ jsx(
-        TextField,
-        {
-          size: "small",
-          placeholder: "Step name",
-          value: String(step?.name ?? ""),
-          onChange: handleTop("name"),
-          fullWidth: true,
-          ...stopAll
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Inputs" }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", mt: 0.5 }, children: [
-      inputEntries.length === 0 && /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            fontSize: 12,
-            color: theme.palette.text.secondary,
-            border: `1px dashed ${theme.palette.divider}`,
-            borderRadius: 1,
-            p: 1,
-            textAlign: "center"
-          },
-          children: "No inputs yet"
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        KvRow,
-        {
-          sx: {
-            mt: inputEntries.length === 0 ? 1.5 : 0.5,
-            color: theme.palette.text.secondary
-          },
-          children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Key" }),
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Type" }),
-            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Value" }),
-            /* @__PURE__ */ jsx(Box, {})
-          ]
-        }
-      ),
-      inputEntries.map(([k, v]) => {
-        const schema = actionInputSchema?.[k];
-        const normalizedType = normalizeSchemaType(schema, v);
-        const fallbackTypeLabel = normalizedType === "unknown" ? "Unknown" : normalizedType[0].toUpperCase() + normalizedType.slice(1);
-        const typeLabel = buildTypeLabel(schema) || fallbackTypeLabel;
-        const enumOptions = extractEnumOptions(schema);
-        const baseOptions = normalizedType === "boolean" ? ["true", "false"] : [];
-        const options = Array.from(
-          /* @__PURE__ */ new Set([...baseOptions, ...enumOptions, ...stepOutputReferences])
-        );
-        const displayValue = stringifyValueForDisplay(v, normalizedType);
-        const handleStringChange = (nextValue) => {
-          const parsed = coerceValueForType(nextValue, normalizedType);
-          data.onUpdateInput?.(rfId, k, parsed);
-        };
-        return /* @__PURE__ */ jsxs(KvRow, { children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              noWrap: true,
-              title: k,
-              color: "textSecondary",
-              children: k
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: typeLabel }) }),
-          (normalizedType === "array" || normalizedType === "object") && /* @__PURE__ */ jsx(
-            TextField,
-            {
-              size: "small",
-              value: displayValue,
-              onChange: (event) => handleStringChange(event.target.value),
-              placeholder: "JSON value",
-              fullWidth: true,
-              multiline: true,
-              minRows: 2,
-              inputProps: {
-                ...stopAll.inputProps
-              },
-              onPointerDown: stopAll.onPointerDown,
-              onKeyDown: stopAll.onKeyDown,
-              className: stopAll.className
-            }
-          ),
-          (normalizedType === "number" || normalizedType === "integer") && /* @__PURE__ */ jsx(
-            TextField,
-            {
-              size: "small",
-              value: displayValue,
-              onChange: (event) => handleStringChange(event.target.value),
-              placeholder: "Number",
-              fullWidth: true,
-              inputProps: {
-                ...stopAll.inputProps,
-                inputMode: "decimal"
-              },
-              onPointerDown: stopAll.onPointerDown,
-              onKeyDown: stopAll.onKeyDown,
-              className: stopAll.className
-            }
-          ),
-          normalizedType !== "array" && normalizedType !== "object" && normalizedType !== "number" && normalizedType !== "integer" && /* @__PURE__ */ jsx(
-            Autocomplete,
-            {
-              size: "small",
-              freeSolo: true,
-              options,
-              PopperComponent: AutoWidthPopper,
-              value: displayValue,
-              inputValue: displayValue,
-              fullWidth: true,
-              onChange: (_, value) => handleStringChange(value ?? ""),
-              onInputChange: (_, value, reason) => {
-                if (reason === "reset") {
-                  return;
-                }
-                handleStringChange(value ?? "");
-              },
-              onPointerDown: stopAll.onPointerDown,
-              onKeyDown: stopAll.onKeyDown,
-              className: stopAll.className,
-              renderInput: (params) => /* @__PURE__ */ jsx(
-                TextField,
-                {
-                  ...params,
-                  size: "small",
-                  placeholder: "value",
-                  inputProps: {
-                    ...params.inputProps,
-                    ...stopAll.inputProps
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => data.onRemoveInputKey?.(rfId, k),
-              onPointerDown: (e) => e.stopPropagation(),
-              "aria-label": `Remove ${k}`,
-              className: "nodrag nowheel",
-              children: /* @__PURE__ */ jsx(DeleteOutlineIcon, { fontSize: "small" })
-            }
-          )
-        ] }, k);
-      }),
-      /* @__PURE__ */ jsxs(KvRow, { children: [
-        /* @__PURE__ */ jsx(
-          Autocomplete,
-          {
-            size: "small",
-            freeSolo: true,
-            options: availableInputOptions,
-            PopperComponent: AutoWidthPopper,
-            value: selectedNewKeyOption,
-            inputValue: newKey,
-            filterOptions: (options) => {
-              const needle = newKey.trim().toLowerCase();
-              if (!needle) {
-                return options;
-              }
-              return options.filter(
-                (option) => (typeof option === "string" ? option : option.label).toLowerCase().includes(needle)
-              );
-            },
-            onChange: (_, value) => {
-              if (!value) {
-                setNewKey("");
-                return;
-              }
-              if (typeof value === "string") {
-                setNewKey(value);
-                return;
-              }
-              setNewKey(value.key);
-            },
-            onInputChange: (_, value, reason) => {
-              if (reason === "reset") {
-                return;
-              }
-              setNewKey(value ?? "");
-            },
-            onPointerDown: stopAll.onPointerDown,
-            onKeyDown: stopAll.onKeyDown,
-            className: stopAll.className,
-            getOptionSelected: (option, value) => option.key === value?.key,
-            getOptionLabel: (option) => typeof option === "string" ? option : option.label,
-            renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
-              {
-                ...params,
-                size: "small",
-                placeholder: "new key",
-                inputProps: {
-                  ...params.inputProps,
-                  ...stopAll.inputProps
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: newKeyTypeLabel }) }),
-        (newKeyNormalizedType === "array" || newKeyNormalizedType === "object") && /* @__PURE__ */ jsx(
-          TextField,
-          {
-            size: "small",
-            value: newVal,
-            onChange: (event) => setNewVal(event.target.value),
-            placeholder: "JSON value",
-            fullWidth: true,
-            multiline: true,
-            minRows: 2,
-            inputProps: {
-              ...stopAll.inputProps
-            },
-            onPointerDown: stopAll.onPointerDown,
-            onKeyDown: stopAll.onKeyDown,
-            className: stopAll.className
-          }
-        ),
-        (newKeyNormalizedType === "number" || newKeyNormalizedType === "integer") && /* @__PURE__ */ jsx(
-          TextField,
-          {
-            size: "small",
-            value: newVal,
-            onChange: (event) => setNewVal(event.target.value),
-            placeholder: "Number",
-            fullWidth: true,
-            inputProps: {
-              ...stopAll.inputProps,
-              inputMode: "decimal"
-            },
-            onPointerDown: stopAll.onPointerDown,
-            onKeyDown: stopAll.onKeyDown,
-            className: stopAll.className
-          }
-        ),
-        newKeyNormalizedType !== "array" && newKeyNormalizedType !== "object" && newKeyNormalizedType !== "number" && newKeyNormalizedType !== "integer" && /* @__PURE__ */ jsx(
-          Autocomplete,
-          {
-            size: "small",
-            freeSolo: true,
-            options: newValueOptions,
-            PopperComponent: AutoWidthPopper,
-            value: newVal,
-            inputValue: newVal,
-            fullWidth: true,
-            filterOptions: (options) => {
-              const needle = newVal.trim().toLowerCase();
-              if (!needle) {
-                return options;
-              }
-              return options.filter((option) => {
-                const raw = String(option);
-                const normalized = raw.replace(/^\s*\$\{\{\s*/, "").replace(/\s*\}\}\s*$/, "");
-                const haystacks = [
-                  raw.toLowerCase(),
-                  normalized.toLowerCase()
-                ];
-                return haystacks.some(
-                  (haystack) => haystack.includes(needle)
-                );
-              });
-            },
-            onChange: (_, value) => setNewVal(value ?? ""),
-            onInputChange: (_, value, reason) => {
-              if (reason === "reset") {
-                return;
-              }
-              setNewVal(value ?? "");
-            },
-            onPointerDown: stopAll.onPointerDown,
-            onKeyDown: stopAll.onKeyDown,
-            className: stopAll.className,
-            renderInput: (params) => /* @__PURE__ */ jsx(
-              TextField,
-              {
-                ...params,
-                size: "small",
-                placeholder: "new value",
-                inputProps: {
-                  ...params.inputProps,
-                  ...stopAll.inputProps
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            variant: "contained",
-            onClick: addPair,
-            onPointerDown: (e) => e.stopPropagation(),
-            disabled: isAddDisabled,
-            className: "nodrag nowheel",
-            children: "Add"
-          }
-        )
-      ] })
-    ] }),
-    hasMissingRequiredInputs && /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          mt: 1.5,
-          p: 1,
-          borderRadius: 1,
-          border: `1px solid ${theme.palette.error.main}`
-        },
-        style: { backgroundColor: requiredInputsBackground },
-        children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", children: "Missing required inputs" }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                flexWrap: "wrap",
-                mt: 0.75
-              },
-              style: { gap: theme.spacing(0.5) },
-              children: missingRequiredInputKeys.map((key) => /* @__PURE__ */ jsx(
-                Chip,
-                {
-                  size: "small",
-                  variant: "outlined",
-                  label: key,
-                  style: {
-                    borderColor: theme.palette.error.main,
-                    color: theme.palette.error.main
-                  }
-                },
-                key
-              ))
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top }),
-    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom })
-  ] });
-};
-const ActionNode = memo(ActionNodeComponent);
-
-export { ActionNode };
-//# sourceMappingURL=ActionNode.esm.js.map