@umodeapporg/ui 0.23.0 → 0.24.0

package/dist/components/UI/Flow/FlowPalette.js

@@ -1,90 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { twMerge } from "tailwind-merge";
-import ControlledButton from "../../Form/ControlledButton.js";
-import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
-import { MaterialSymbol } from "../MaterialSymbol/index.js";
-import NoDataFound from "../NoDataFound/index.js";
-import { FLOW_BLOCK_DRAG_TYPE } from "./flowConstants.js";
-import { useFlowBlockRegistry, useFlowEditorStore, useFlowEditor } from "./FlowEditorProvider.js";
-import { useFlowLabels } from "./useFlowLabels.js";
-const CATEGORY_ORDER = ["trigger", "condition", "action"];
-const FlowPalette = ({ readOnly = false, className }) => {
-  const { t } = useTranslation("ui");
-  const labels = useFlowLabels();
-  const registry = useFlowBlockRegistry();
-  const store = useFlowEditorStore();
-  const nodes = useFlowEditor((state) => state.graph.nodes);
-  const [visibleBlocks, setVisibleBlocks] = useState(registry.list);
-  const instancesByType = useMemo(() => {
-    const counts = /* @__PURE__ */ new Map();
-    nodes.forEach((node) => counts.set(node.type, (counts.get(node.type) ?? 0) + 1));
-    return counts;
-  }, [nodes]);
-  const startDrag = (event, type) => {
-    event.dataTransfer.setData(FLOW_BLOCK_DRAG_TYPE, type);
-    event.dataTransfer.effectAllowed = "copy";
-  };
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className: twMerge(
-        "flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-3",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: t("flow.palette.title") }),
-        /* @__PURE__ */ jsx(
-          UnifiedSearchBar,
-          {
-            mode: "default",
-            label: t("flow.palette.search"),
-            searchableItems: registry.list,
-            searchKeys: ["label", "description"],
-            setFilteredItems: setVisibleBlocks,
-            minSearchLength: 1,
-            debounceTime: 150
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-y-4 overflow-y-auto", children: [
-          visibleBlocks.length === 0 && /* @__PURE__ */ jsx(NoDataFound, { compact: true, variant: "search", message: t("flow.palette.empty") }),
-          CATEGORY_ORDER.map((category) => {
-            const blocks = visibleBlocks.filter((block) => block.category === category);
-            if (blocks.length === 0) return null;
-            return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: labels.categories[category] }),
-              blocks.map((block) => {
-                const limitReached = block.maxInstances !== void 0 && (instancesByType.get(block.type) ?? 0) >= block.maxInstances;
-                const disabled = readOnly || limitReached;
-                return /* @__PURE__ */ jsxs(
-                  ControlledButton,
-                  {
-                    defaultHtmlButton: true,
-                    draggable: !disabled,
-                    disabled,
-                    onDragStart: (event) => startDrag(event, block.type),
-                    onClick: () => store.getState().addNode(block.type),
-                    className: "interactive flex items-start gap-x-2 rounded-lg border border-transparent px-2 py-2 text-left hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-foreground-muted", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: block.icon, size: 16, "aria-hidden": true }) }),
-                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
-                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: block.label }),
-                        limitReached ? /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: t("flow.palette.limitReached") }) : block.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: block.description })
-                      ] })
-                    ]
-                  },
-                  block.type
-                );
-              })
-            ] }, category);
-          })
-        ] })
-      ]
-    }
-  );
-};
-export {
-  FlowPalette as default
-};
-//# sourceMappingURL=FlowPalette.js.map

package/dist/components/UI/Flow/FlowPalette.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlowPalette.js","sources":["../../../../src/components/UI/Flow/FlowPalette.tsx"],"sourcesContent":["import { DragEvent, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport UnifiedSearchBar from '@/components/Search/UnifiedSearchBar';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport NoDataFound from '@/components/UI/NoDataFound';\n\nimport { FLOW_BLOCK_DRAG_TYPE } from './flowConstants';\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport type { IFlowBlockDefinition, TFlowBlockCategory } from './flowTypes';\nimport { useFlowLabels } from './useFlowLabels';\n\nconst CATEGORY_ORDER: Array<TFlowBlockCategory> = ['trigger', 'condition', 'action'];\n\ninterface IFlowPaletteProps {\n  readOnly?: boolean;\n  className?: string;\n}\n\n/** The blocks a flow can use, grouped by category. Drag one onto the canvas, or click to add it below the selection. */\nconst FlowPalette: React.FC<IFlowPaletteProps> = ({ readOnly = false, className }) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n  const nodes = useFlowEditor((state) => state.graph.nodes);\n  const [visibleBlocks, setVisibleBlocks] = useState<Array<IFlowBlockDefinition>>(registry.list);\n\n  const instancesByType = useMemo(() => {\n    const counts = new Map<string, number>();\n    nodes.forEach((node) => counts.set(node.type, (counts.get(node.type) ?? 0) + 1));\n    return counts;\n  }, [nodes]);\n\n  const startDrag = (event: DragEvent<HTMLButtonElement>, type: string) => {\n    event.dataTransfer.setData(FLOW_BLOCK_DRAG_TYPE, type);\n    event.dataTransfer.effectAllowed = 'copy';\n  };\n\n  return (\n    <aside\n      className={twMerge(\n        'flex h-full min-h-0 flex-col gap-y-3 rounded-xl border border-border bg-surface p-3',\n        className,\n      )}\n    >\n      <span className=\"text-sm font-semibold text-foreground\">{t('flow.palette.title')}</span>\n      <UnifiedSearchBar<IFlowBlockDefinition>\n        mode=\"default\"\n        label={t('flow.palette.search')}\n        searchableItems={registry.list}\n        searchKeys={['label', 'description']}\n        setFilteredItems={setVisibleBlocks}\n        minSearchLength={1}\n        debounceTime={150}\n      />\n      <div className=\"flex min-h-0 flex-1 flex-col gap-y-4 overflow-y-auto\">\n        {visibleBlocks.length === 0 && <NoDataFound compact variant=\"search\" message={t('flow.palette.empty')} />}\n        {CATEGORY_ORDER.map((category) => {\n          const blocks = visibleBlocks.filter((block) => block.category === category);\n          if (blocks.length === 0) return null;\n          return (\n            <section key={category} className=\"flex flex-col gap-y-1\">\n              <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n                {labels.categories[category]}\n              </span>\n              {blocks.map((block) => {\n                const limitReached =\n                  block.maxInstances !== undefined && (instancesByType.get(block.type) ?? 0) >= block.maxInstances;\n                const disabled = readOnly || limitReached;\n                return (\n                  <ControlledButton\n                    key={block.type}\n                    defaultHtmlButton\n                    draggable={!disabled}\n                    disabled={disabled}\n                    onDragStart={(event) => startDrag(event, block.type)}\n                    onClick={() => store.getState().addNode(block.type)}\n                    className=\"interactive flex items-start gap-x-2 rounded-lg border border-transparent px-2 py-2 text-left hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60\"\n                  >\n                    <span className=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-foreground-muted\">\n                      <MaterialSymbol icon={block.icon} size={16} aria-hidden />\n                    </span>\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"text-sm font-medium text-foreground\">{block.label}</span>\n                      {limitReached ? (\n                        <span className=\"text-xs text-foreground-subtle\">{t('flow.palette.limitReached')}</span>\n                      ) : (\n                        block.description && <span className=\"text-xs text-foreground-subtle\">{block.description}</span>\n                      )}\n                    </span>\n                  </ControlledButton>\n                );\n              })}\n            </section>\n          );\n        })}\n      </div>\n    </aside>\n  );\n};\n\nexport default FlowPalette;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Flow/flowConstants.d.ts

@@ -1,2 +0,0 @@
-/** The MIME type a palette item puts on the drag so the canvas knows which block was dropped. */
-export declare const FLOW_BLOCK_DRAG_TYPE = "application/x-umode-flow-block";

package/dist/components/UI/Flow/flowConstants.js

@@ -1,5 +0,0 @@
-const FLOW_BLOCK_DRAG_TYPE = "application/x-umode-flow-block";
-export {
-  FLOW_BLOCK_DRAG_TYPE
-};
-//# sourceMappingURL=flowConstants.js.map

package/dist/components/UI/Flow/flowConstants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flowConstants.js","sources":["../../../../src/components/UI/Flow/flowConstants.ts"],"sourcesContent":["/** The MIME type a palette item puts on the drag so the canvas knows which block was dropped. */\nexport const FLOW_BLOCK_DRAG_TYPE = 'application/x-umode-flow-block';\n"],"names":[],"mappings":"AACO,MAAM,uBAAuB;"}