@hitachivantara/uikit-cli 6.0.1

package/src/templates/Canvas/ListView.tsx

@@ -0,0 +1,189 @@
+import { forwardRef, useId, useRef, useState } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { css, cx } from "@emotion/css";
+import {
+  HvInput,
+  HvInputProps,
+  HvListContainer,
+  HvListItem,
+  HvListItemProps,
+  HvTypography,
+  outlineStyles,
+  theme,
+  useForkRef,
+} from "@hitachivantara/uikit-react-core";
+import { Drag } from "@hitachivantara/uikit-react-icons";
+
+import { NodeData } from "./Node";
+import { iconsMapping, iconsMappingKeys } from "./utils";
+
+const classes = {
+  root: css({ display: "flex", flexDirection: "column", gap: theme.space.sm }),
+  item: css({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    border: `1px solid ${theme.colors.borderSubtle}`,
+    borderRadius: "12px",
+    backgroundColor: theme.colors.bgContainer,
+    padding: theme.space.xs,
+    height: "unset",
+    "&:focus-visible": {
+      ...outlineStyles,
+    },
+  }),
+  itemTitle: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xs,
+  }),
+  icon: css({
+    borderRadius: theme.radii.round,
+    backgroundColor: theme.colors.cat6,
+  }),
+  dragging: css({
+    border: `2px solid ${theme.colors.primaryStrong}`,
+  }),
+};
+
+const items = iconsMappingKeys.map((key, index) => ({
+  id: `item${index + 1}`,
+  title: `Item ${index + 1}`,
+  subtitle: `Description ${index + 1}`,
+  icon: key,
+}));
+
+interface ItemProps {
+  id: string;
+  title: string;
+  subtitle: string;
+  icon: string;
+}
+
+interface ItemCardProps
+  extends Omit<HvListItemProps, "title">,
+    Omit<ItemProps, "id"> {
+  isDragging?: boolean;
+}
+
+const ItemCard = forwardRef<HTMLLIElement, ItemCardProps>(
+  ({ icon, title, subtitle, isDragging, ...others }, ref) => {
+    return (
+      <HvListItem
+        ref={ref}
+        classes={{ root: cx(classes.item, { [classes.dragging]: isDragging }) }}
+        {...others}
+      >
+        <div className={classes.itemTitle}>
+          <div className={classes.icon}>
+            {iconsMapping[icon as keyof typeof iconsMapping]}
+          </div>
+          <HvTypography variant="label">{title}</HvTypography>
+        </div>
+        <Drag />
+      </HvListItem>
+    );
+  },
+);
+
+const DraggableItemCard = ({ icon, title, id, subtitle }: ItemProps) => {
+  const itemRef = useRef<HTMLLIElement>(null);
+
+  const { attributes, listeners, setNodeRef, isDragging, transform } =
+    useDraggable({
+      id,
+      data: {
+        // Data needed to be dropped in HvFlow
+        hvFlow: {
+          // HvFlow will use this value to populate the node's data.nodeLabel
+          label: title,
+          // Node type from nodeTypes property provided to HvFlow
+          type: "node",
+          // Item position: used by HvFlow to position the node when dropped
+          x: itemRef.current?.getBoundingClientRect().x,
+          y: itemRef.current?.getBoundingClientRect().y,
+          // Values to be added to the node's data
+          data: {
+            subtitle,
+            color: "cat6",
+            icon,
+            output: {
+              id: "data",
+              label: "Data",
+            },
+            input: {
+              id: "data",
+              label: "Data",
+            },
+          } satisfies NodeData,
+        },
+        // Data needed for the DragOverlay component
+        dragOverlay: {
+          component: (
+            <ItemCard
+              icon={icon}
+              title={title}
+              subtitle={subtitle}
+              isDragging
+            />
+          ),
+        },
+      },
+    });
+
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : undefined;
+
+  const forkedRef = useForkRef(itemRef, setNodeRef);
+
+  return (
+    <ItemCard
+      ref={forkedRef}
+      style={style}
+      icon={icon}
+      title={title}
+      subtitle={subtitle}
+      isDragging={isDragging}
+      {...attributes}
+      {...listeners}
+    />
+  );
+};
+
+export const ListView = () => {
+  const [listItems, setListItems] = useState(items);
+  const listId = useId();
+
+  const handleSearch: HvInputProps["onChange"] = (event, value) => {
+    if (value) {
+      setListItems(
+        items.filter((item) =>
+          item.title.toLowerCase().trim().includes(value.toLowerCase().trim()),
+        ),
+      );
+    } else {
+      setListItems(items);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <HvInput
+        type="search"
+        placeholder="Search for a node..."
+        aria-controls={listId}
+        aria-owns={listId}
+        onChange={handleSearch}
+        inputProps={{ autoComplete: "off" }}
+      />
+      <HvListContainer id={listId}>
+        {listItems.map((item) => (
+          <DraggableItemCard key={item.id} {...item} />
+        ))}
+      </HvListContainer>
+    </div>
+  );
+};

package/src/templates/Canvas/Node.tsx

@@ -0,0 +1,203 @@
+import { isValidElement } from "react";
+import { css, cx } from "@emotion/css";
+import { Handle, NodeProps, NodeToolbar, Position } from "reactflow";
+import {
+  HvButton,
+  HvColorAny,
+  HvIconButton,
+  HvTooltip,
+  HvTypography,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import {
+  HvFlowNodeInput,
+  HvFlowNodeOutput,
+  useHvNode,
+} from "@hitachivantara/uikit-react-lab";
+
+import { useCanvasContext } from "./Context";
+import { FlowStatus, flowStatusesSpecs, iconsMapping } from "./utils";
+
+const classes = {
+  root: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.large,
+    backgroundColor: theme.colors.bgContainer,
+    boxShadow: theme.colors.shadow,
+    borderWidth: "1px",
+    minWidth: "200px",
+    minHeight: "100px",
+    borderColor: "var(--node-border-color)",
+  }),
+  content: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing("sm"),
+    gap: theme.space.xs,
+  }),
+  contentIcon: css({
+    width: 48,
+    height: 48,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: theme.radii.round,
+    backgroundColor: "var(--icon-bg-color)",
+  }),
+  nodeToolbar: css({
+    backgroundColor: theme.colors.bgContainer,
+    borderRadius: theme.radii.full,
+  }),
+  handle: css({
+    backgroundColor: theme.colors.textSubtle,
+    border: `1px solid ${theme.colors.bgContainer}`,
+    height: 8,
+    width: 8,
+  }),
+  statusIcon: css({ position: "absolute", top: -8, right: -8 }),
+  contentInfo: css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    "& > button": { marginTop: theme.space.xs, alignSelf: "center" },
+  }),
+};
+
+export type NodeData =
+  | undefined
+  | {
+      nodeLabel?: string; // nodeLabel is automatically added by HvFlow when the node is dropped
+      tableId?: string;
+      subtitle?: string;
+      color?: HvColorAny;
+      icon?: string;
+      output?: HvFlowNodeOutput;
+      input?: HvFlowNodeInput;
+      status?: FlowStatus;
+    };
+
+export const Node = ({ id, data = {} }: NodeProps<NodeData>) => {
+  const {
+    nodeLabel: titleProp,
+    subtitle: subtitleProp,
+    color: colorProp,
+    icon: iconProp,
+    input: inputProp,
+    output: outputProp,
+    status: statusProp,
+    tableId,
+  } = data;
+
+  const {
+    toggleShowActions,
+    getNodeToolbarProps,
+    handleDefaultAction,
+    nodeActions,
+    color,
+    subtitle,
+    icon,
+    title,
+  } = useHvNode({
+    id,
+    title: titleProp,
+    subtitle: subtitleProp,
+    color: colorProp,
+    icon: iconProp
+      ? iconsMapping[iconProp as keyof typeof iconsMapping]
+      : undefined,
+    inputs: inputProp ? [inputProp] : undefined,
+    outputs: outputProp ? [outputProp] : undefined,
+  });
+
+  const { selectedTable, setOpenedTables, setSelectedTable } =
+    useCanvasContext();
+
+  const status = statusProp ? flowStatusesSpecs[statusProp] : undefined;
+
+  return (
+    <div
+      style={
+        {
+          "--node-border-color": status ? status.color : color,
+          "--icon-bg-color": color,
+        } as React.CSSProperties
+      }
+      className={cx(
+        "nowheel", // Disables the default canvas pan behaviour when scrolling inside the node
+        classes.root,
+      )}
+      onMouseEnter={toggleShowActions}
+      onMouseLeave={toggleShowActions}
+    >
+      <NodeToolbar className={classes.nodeToolbar} {...getNodeToolbarProps()}>
+        {nodeActions?.map((action) => (
+          <HvIconButton
+            key={action.id}
+            title={action.label}
+            onClick={() => handleDefaultAction(action)}
+          >
+            {isValidElement(action.icon) ? action.icon : null}
+          </HvIconButton>
+        ))}
+      </NodeToolbar>
+      {inputProp && (
+        <Handle
+          className={classes.handle}
+          type="target"
+          position={Position.Left}
+          id={inputProp.id ?? "0"}
+        />
+      )}
+      {outputProp && (
+        <Handle
+          className={classes.handle}
+          type="source"
+          position={Position.Right}
+          id={outputProp.id ?? "0"}
+        />
+      )}
+      <div className={classes.content}>
+        <div className={classes.contentIcon}>{icon}</div>
+        <div className={classes.contentInfo}>
+          <HvTypography variant="title4" component="p">
+            {title}
+          </HvTypography>
+          <HvTypography variant="caption1">{subtitle}</HvTypography>
+          {tableId && (
+            <HvButton
+              size="sm"
+              variant="primarySubtle"
+              onClick={() =>
+                setOpenedTables?.((prev) => {
+                  const tables = prev ? [...prev] : [];
+                  if (!tables.some((x) => x.id === tableId)) {
+                    if (tables.length === 0 && selectedTable === "none") {
+                      setSelectedTable?.(tableId);
+                    }
+                    tables.push({
+                      id: tableId,
+                      label: title,
+                    });
+                    return tables;
+                  }
+                  return prev;
+                })
+              }
+            >
+              View Data
+            </HvButton>
+          )}
+        </div>
+      </div>
+      {status && (
+        <HvTooltip className={classes.statusIcon} title={status.description}>
+          {status.icon}
+        </HvTooltip>
+      )}
+    </div>
+  );
+};

package/src/templates/Canvas/Sidebar.tsx

@@ -0,0 +1,51 @@
+import { useId, useState } from "react";
+import {
+  DndContextProps,
+  DragOverlay,
+  useDndMonitor,
+  useDroppable,
+} from "@dnd-kit/core";
+import {
+  HvCanvasSidePanel,
+  HvCanvasSidePanelProps,
+} from "@hitachivantara/uikit-react-pentaho";
+
+export const CanvasSidebar = (props: HvCanvasSidePanelProps) => {
+  const [overlay, setOverlay] = useState<React.ReactNode>();
+
+  const elementId = useId();
+
+  // The sidebar is droppable to distinguish between the canvas and the sidebar
+  // Otherwise items dropped inside the sidebar will be added to the canvas
+  const { setNodeRef } = useDroppable({ id: elementId });
+
+  const handleDragStart: DndContextProps["onDragStart"] = (event) => {
+    if (event.active.data.current?.dragOverlay) {
+      setOverlay(event.active.data.current.dragOverlay?.component);
+    }
+  };
+
+  const handleDragEnd: DndContextProps["onDragEnd"] = () => {
+    setOverlay(undefined);
+  };
+
+  useDndMonitor({
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+  });
+
+  return (
+    <>
+      <HvCanvasSidePanel
+        id={elementId}
+        ref={setNodeRef}
+        labels={{
+          open: "Click to Add Nodes & View Files",
+        }}
+        {...props}
+      />
+      {/** Shown when the dragged item leaves the sidebar to drop it in the canvas */}
+      <DragOverlay>{overlay ?? null}</DragOverlay>
+    </>
+  );
+};

package/src/templates/Canvas/StatusEdge.tsx

@@ -0,0 +1,75 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+} from "reactflow";
+import {
+  HvDropDownMenu,
+  HvDropDownMenuProps,
+} from "@hitachivantara/uikit-react-core";
+import { useFlowInstance } from "@hitachivantara/uikit-react-lab";
+
+import { FlowStatus, flowStatusesSpecs } from "./utils";
+
+export type StatusEdgeData =
+  | undefined
+  | {
+      status?: FlowStatus;
+    };
+
+export const StatusEdge = (props: EdgeProps<StatusEdgeData>) => {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    data,
+  } = props;
+
+  const instance = useFlowInstance();
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const status = data?.status ? flowStatusesSpecs[data.status] : undefined;
+
+  const handleClick: HvDropDownMenuProps["onClick"] = (event, value) => {
+    if (value.id === "remove") {
+      instance.setEdges((edges) => edges.filter((edge) => edge.id !== id));
+    }
+  };
+
+  return (
+    <>
+      <BaseEdge {...props} path={edgePath} />
+      {status && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: "absolute",
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: "all",
+            }}
+            className="nodrag nopan nowheel" // ReactFlow specific classes to prevent drag on icon
+          >
+            <HvDropDownMenu
+              icon={status.icon}
+              dataList={[{ id: "remove", label: "Remove connection" }]}
+              onClick={handleClick}
+            />
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+};