@hitachivantara/uikit-react-lab 6.0.0-next.1 → 6.0.0-next.3

package/dist/Flow/hooks/useNodeId.js

@@ -1,4 +1,4 @@
-import { useNodeId as useNodeId$1 } from "@xyflow/react";
+import { useNodeId as useNodeId$1 } from "reactflow";
 function useNodeId(id) {
   const currentNodeId = useNodeId$1();
   return id ?? currentNodeId;

package/dist/Flow/nodes/DashboardNode.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useLabels, HvDialog, HvDialogTitle, HvDialogContent, HvEmptyState, HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
+import { Info } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./DashboardNode.styles.js";
+import { staticClasses } from "./DashboardNode.styles.js";
+import { HvFlowNode } from "../Node/Node.js";
+import { HvDashboard } from "../../Dashboard/Dashboard.js";
+const DEFAULT_LABELS = {
+  emptyMessage: "No visualizations connected to the dashboard.",
+  dialogTitle: "Configure dashboard",
+  dialogSubtitle: "Please configure the layout of your dashboard as needed.",
+  dialogApply: "Apply",
+  dialogCancel: "Cancel"
+};
+const HvDashboardNode = (props) => {
+  const {
+    id,
+    open,
+    layout,
+    labels: labelsProp,
+    classes: classesProp,
+    previewItems,
+    children,
+    dialogProps,
+    dashboardProps,
+    onApply,
+    onCancel,
+    onClose,
+    ...others
+  } = props;
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs(
+    HvFlowNode,
+    {
+      id,
+      classes,
+      labels,
+      ...others,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          HvDialog,
+          {
+            open,
+            maxWidth: "lg",
+            fullWidth: true,
+            onClose,
+            ...dialogProps,
+            children: [
+              /* @__PURE__ */ jsx(HvDialogTitle, { variant: "info", children: labels?.dialogTitle }),
+              /* @__PURE__ */ jsxs(HvDialogContent, { indentContent: true, children: [
+                labels?.dialogSubtitle,
+                layout && layout?.length > 0 ? /* @__PURE__ */ jsx(
+                  HvDashboard,
+                  {
+                    cols: 12,
+                    layout,
+                    compactType: "vertical",
+                    rowHeight: 80,
+                    margin: [16, 16],
+                    containerPadding: [0, 16],
+                    ...dashboardProps,
+                    children: previewItems
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  HvEmptyState,
+                  {
+                    className: classes.empty,
+                    icon: /* @__PURE__ */ jsx(Info, {}),
+                    message: labels?.emptyMessage
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(HvDialogActions, { children: [
+                /* @__PURE__ */ jsx(HvButton, { variant: "primary", onClick: onApply, children: labels?.dialogApply }),
+                /* @__PURE__ */ jsx(HvButton, { variant: "secondarySubtle", onClick: onCancel, children: labels?.dialogCancel })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HvDashboardNode,
+  staticClasses as hvDashboardNodeClasses
+};

package/dist/Flow/nodes/DashboardNode.styles.js

@@ -0,0 +1,16 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+import { staticClasses as staticClasses$1 } from "../Node/Node.styles.js";
+const baseClasses = Object.fromEntries(
+  Object.keys(staticClasses$1).map((key) => [key, {}])
+);
+const { staticClasses, useClasses } = createClasses("HvDashboardNode", {
+  empty: {
+    padding: theme.spacing("sm", 0, 0, 0)
+  },
+  // Spread here to know if we are overriding classes from parents
+  ...baseClasses
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/Flow/nodes/StickyNode.js

@@ -0,0 +1,439 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useCallback } from "react";
+import { css, cx } from "@emotion/css";
+import Popover from "@mui/material/Popover";
+import { useReactFlow, NodeResizer, NodeToolbar, Position } from "reactflow";
+import { theme, HvDialogTitle, HvDialogContent, HvColorPicker, HvCheckBox, HvButton, HvSelectionList, HvListItem, HvMultiButton, HvIconButton } from "@hitachivantara/uikit-react-core";
+import { FontSize, Bold, Italic, Palette, Delete, ActualSize, Fullscreen } from "@hitachivantara/uikit-react-icons";
+const defaultData = {
+  title: "Sticky Note",
+  backgroundColor: theme.colors.warningSubtle,
+  borderColor: theme.colors.warningSubtle,
+  textColor: theme.colors.text,
+  hasShadow: true,
+  bold: false,
+  italic: false,
+  fontSize: 14,
+  expanded: true,
+  visible: true
+};
+const classes = {
+  root: css({
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    display: "flex",
+    outline: "none"
+  }),
+  nodeToolbar: css({
+    backgroundColor: "transparent",
+    borderRadius: theme.radii.full,
+    top: 10
+  }),
+  buttonsContainer: css({
+    padding: theme.space.xs
+  }),
+  textAreaRoot: css({
+    flex: 1,
+    width: "100%",
+    border: "none",
+    background: "transparent",
+    outline: "none"
+  }),
+  textAreaInput: css({
+    resize: "none",
+    height: "100%",
+    width: "100%",
+    padding: theme.space.xs,
+    "&:focus-visible": {
+      outline: "none"
+    },
+    paddingRight: 32
+  }),
+  textAreaInputFolded: css({
+    resize: "none",
+    width: "100%",
+    padding: 0,
+    border: "none",
+    overflow: "hidden",
+    minHeight: "1.5rem",
+    height: "auto"
+  }),
+  colorConfig: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.sm
+  }),
+  folded: css({
+    width: 34,
+    height: 34
+  }),
+  expandButton: css({
+    position: "absolute",
+    top: theme.space.xxs,
+    right: theme.space.xxs
+  }),
+  fontSizes: css({
+    maxHeight: 160,
+    overflowY: "auto",
+    padding: theme.space.xs
+  })
+};
+const colorsToConfig = ["textColor", "backgroundColor", "borderColor"];
+const fontSizes = [10, 11, 12, 14, 16, 20, 24, 32, 36, 40, 48, 64, 96, 128];
+const StickyNode = ({
+  id,
+  selected,
+  data = {}
+}) => {
+  const mergedData = useMemo(() => ({ ...defaultData, ...data }), [data]);
+  const [text, setText] = useState("");
+  const { setNodes } = useReactFlow();
+  const [editing, setEditing] = useState(false);
+  const [toolbarVisible, setToolbarVisible] = useState(false);
+  const [colorsConfigOpen, setColorsConfigOpen] = useState(false);
+  const [fontSizeConfigOpen, setFontSizeConfigOpen] = useState(false);
+  const [fontSize, setFontSize] = useState(mergedData.fontSize ?? 14);
+  const colorConfigBtnRef = useRef(null);
+  const fontSizeConfigBtnRef = useRef(null);
+  const handleToggleBold = useCallback(() => {
+    setNodes(
+      (nds) => nds.map((node) => {
+        if (node.id === id) {
+          node.data = {
+            ...node.data,
+            bold: !node.data?.bold
+          };
+        }
+        return node;
+      })
+    );
+  }, [setNodes, id]);
+  const handleToggleItalic = useCallback(() => {
+    setNodes(
+      (nds) => nds.map((node) => {
+        if (node.id === id) {
+          node.data = {
+            ...node.data,
+            italic: !node.data?.italic
+          };
+        }
+        return node;
+      })
+    );
+  }, [setNodes, id]);
+  const handleChangeFontSize = useCallback(
+    (size) => {
+      setFontSize(size);
+      setNodes(
+        (nds) => nds.map((node) => {
+          if (node.id === id) {
+            node.data = {
+              ...node.data,
+              fontSize: size
+            };
+          }
+          return node;
+        })
+      );
+      setFontSizeConfigOpen(false);
+    },
+    [setNodes, id]
+  );
+  const handleToggleExpand = useCallback(() => {
+    setNodes(
+      (nds) => nds.map((node) => {
+        if (node.id === id) {
+          node.data = {
+            ...node.data,
+            expanded: !node.data?.expanded
+          };
+        }
+        return node;
+      })
+    );
+  }, [setNodes, id]);
+  const handleResetColors = useCallback(() => {
+    setNodes(
+      (nds) => nds.map((node) => {
+        if (node.id === id) {
+          node.data = {
+            ...node.data,
+            backgroundColor: defaultData.backgroundColor,
+            borderColor: defaultData.borderColor,
+            textColor: defaultData.textColor,
+            hasShadow: defaultData.hasShadow
+          };
+        }
+        return node;
+      })
+    );
+  }, [setNodes, id]);
+  const handleDeleteSticky = useCallback(() => {
+    setNodes((nds) => nds.filter((node) => node.id !== id));
+    mergedData.onDelete?.();
+  }, [mergedData, setNodes, id]);
+  if (!mergedData.visible) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: colorsConfigOpen,
+        anchorEl: colorConfigBtnRef.current,
+        onClose: () => {
+          setColorsConfigOpen(false);
+          setEditing(false);
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        children: [
+          /* @__PURE__ */ jsx(HvDialogTitle, { children: "Customize Colors" }),
+          /* @__PURE__ */ jsx(HvDialogContent, { children: /* @__PURE__ */ jsxs("div", { className: classes.colorConfig, children: [
+            colorsToConfig.map((c) => /* @__PURE__ */ jsx(
+              HvColorPicker,
+              {
+                label: `${c.charAt(0).toUpperCase() + c.slice(1).replace("Color", " Color")}`,
+                value: mergedData[c] ?? "",
+                onChange: (color) => {
+                  setNodes(
+                    (nds) => nds.map((node) => {
+                      if (node.id === id) {
+                        node.data = {
+                          ...node.data,
+                          [c]: color
+                        };
+                      }
+                      return node;
+                    })
+                  );
+                }
+              },
+              c
+            )),
+            /* @__PURE__ */ jsx(
+              HvCheckBox,
+              {
+                label: "Drop Shadow",
+                defaultChecked: mergedData.hasShadow,
+                onChange: (_, checked) => {
+                  setNodes(
+                    (nds) => nds.map((node) => {
+                      if (node.id === id) {
+                        node.data = {
+                          ...node.data,
+                          hasShadow: checked
+                        };
+                      }
+                      return node;
+                    })
+                  );
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(HvButton, { variant: "secondarySubtle", onClick: handleResetColors, children: "Reset to defaults" })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: fontSizeConfigOpen,
+        anchorEl: fontSizeConfigBtnRef.current,
+        onClose: () => {
+          setFontSizeConfigOpen(false);
+          setEditing(false);
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: /* @__PURE__ */ jsx(
+          HvSelectionList,
+          {
+            className: classes.fontSizes,
+            value: fontSize,
+            onChange: (evt, newValue) => {
+              handleChangeFontSize(newValue);
+            },
+            children: fontSizes.map((size) => /* @__PURE__ */ jsx(HvListItem, { value: size, children: size }, size))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          classes.root,
+          "nowheel",
+          !mergedData.expanded && classes.folded
+        ),
+        style: {
+          backgroundColor: mergedData.backgroundColor ?? theme.colors.bgContainer,
+          boxShadow: mergedData.hasShadow ? "0 8px 12px rgba(65,65,65,0.25)" : "none",
+          border: mergedData.borderColor ? `1px solid ${mergedData.borderColor}` : "none",
+          fontSize: `${mergedData.fontSize ?? 14}px`,
+          lineHeight: `${mergedData.fontSize ?? 14}px`
+        },
+        children: [
+          mergedData.expanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              NodeResizer,
+              {
+                isVisible: selected,
+                minWidth: 100,
+                minHeight: 75,
+                lineStyle: {
+                  color: theme.colors.primary,
+                  borderStyle: "solid"
+                },
+                handleStyle: {
+                  width: 6,
+                  height: 6,
+                  border: `1px solid ${theme.colors.primary}`,
+                  backgroundColor: mergedData.backgroundColor ?? "transparent",
+                  borderRadius: theme.radii.full
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              NodeToolbar,
+              {
+                isVisible: editing || toolbarVisible || selected,
+                position: Position.Top,
+                className: classes.nodeToolbar,
+                onMouseEnter: () => setToolbarVisible(true),
+                onMouseLeave: () => setToolbarVisible(false),
+                children: /* @__PURE__ */ jsx("div", { className: classes.buttonsContainer, children: /* @__PURE__ */ jsxs(HvMultiButton, { children: [
+                  /* @__PURE__ */ jsx(
+                    HvIconButton,
+                    {
+                      "aria-label": "Font Size",
+                      title: "Font Size",
+                      ref: fontSizeConfigBtnRef,
+                      onClick: () => {
+                        setEditing(true);
+                        setFontSizeConfigOpen(true);
+                      },
+                      children: /* @__PURE__ */ jsx(FontSize, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    HvIconButton,
+                    {
+                      "aria-label": "Bold",
+                      title: "Bold",
+                      selected: mergedData.bold,
+                      onClick: handleToggleBold,
+                      children: /* @__PURE__ */ jsx(Bold, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    HvIconButton,
+                    {
+                      "aria-label": "Italic",
+                      title: "Italic",
+                      selected: mergedData.italic,
+                      onClick: handleToggleItalic,
+                      children: /* @__PURE__ */ jsx(Italic, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    HvIconButton,
+                    {
+                      "aria-label": "Customize Colors",
+                      title: "Customize Colors",
+                      ref: colorConfigBtnRef,
+                      onClick: () => {
+                        setEditing(true);
+                        setColorsConfigOpen(true);
+                      },
+                      children: /* @__PURE__ */ jsx(Palette, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    HvIconButton,
+                    {
+                      "aria-label": "Delete",
+                      title: "Delete",
+                      onClick: handleDeleteSticky,
+                      children: /* @__PURE__ */ jsx(Delete, {})
+                    }
+                  )
+                ] }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onMouseEnter: () => setToolbarVisible(true),
+                onMouseLeave: () => setToolbarVisible(false),
+                className: classes.textAreaRoot,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    HvIconButton,
+                    {
+                      className: classes.expandButton,
+                      title: "Fold",
+                      onClick: handleToggleExpand,
+                      children: /* @__PURE__ */ jsx(ActualSize, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      id: `sticky-textarea-${id}`,
+                      value: text || "",
+                      onChange: (e) => setText(e.target.value),
+                      className: classes.textAreaInput,
+                      placeholder: "Type here...",
+                      style: {
+                        color: mergedData.textColor ?? theme.colors.text,
+                        fontWeight: mergedData.bold ? "bold" : "normal",
+                        fontStyle: mergedData.italic ? "italic" : "normal",
+                        fontSize: mergedData.fontSize ?? "14px"
+                      },
+                      onFocus: () => setEditing(true),
+                      onBlur: () => {
+                        setEditing(false);
+                        setColorsConfigOpen(false);
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          !mergedData.expanded && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            HvIconButton,
+            {
+              title: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: { whiteSpace: "pre-wrap", wordBreak: "break-word" },
+                  children: text
+                }
+              ),
+              onClick: handleToggleExpand,
+              children: /* @__PURE__ */ jsx(Fullscreen, {})
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  StickyNode
+};