@hitachivantara/uikit-cli 6.0.1

package/src/templates/Canvas/TreeView.tsx

@@ -0,0 +1,211 @@
+import { forwardRef, useRef, useState } from "react";
+import { useDndMonitor, useDraggable } from "@dnd-kit/core";
+import { css, cx } from "@emotion/css";
+import {
+  HvOverflowTooltip,
+  HvTreeItem,
+  HvTreeItemProps,
+  HvTreeView,
+  theme,
+  useForkRef,
+  useHvTreeItem,
+} from "@hitachivantara/uikit-react-core";
+import { DataSource, Drag, Table } from "@hitachivantara/uikit-react-icons";
+
+import { NodeData } from "./Node";
+
+const classes = {
+  dragging: css({
+    border: `2px solid ${theme.colors.primaryStrong}`,
+  }),
+  contentDragging: css({
+    "&&:hover": {
+      backgroundColor: theme.colors.bgContainer,
+    },
+  }),
+  labelRoot: css({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    gap: theme.space.xs,
+  }),
+  dragIcon: css({ flex: 1, display: "flex", justifyContent: "flex-end" }),
+};
+
+interface Data {
+  id: string;
+  label: string;
+  subtitle?: string;
+  children?: Data[];
+}
+
+interface TreeItemProps extends HvTreeItemProps {
+  isDragging?: boolean;
+}
+
+interface DraggableTreeItemProps extends HvTreeItemProps {
+  subtitle?: string;
+}
+
+const data = [
+  {
+    id: "db1",
+    label: "Database 1",
+    children: [
+      { id: "table1", label: "Table 1", subtitle: "Table from Database 1" },
+      { id: "table2", label: "Table 2", subtitle: "Table from Database 1" },
+      { id: "table3", label: "Table 3", subtitle: "Table from Database 1" },
+    ],
+  },
+  {
+    id: "db2",
+    label: "Database 2",
+    children: [
+      { id: "table4", label: "Table 4", subtitle: "Table from Database 2" },
+      { id: "table5", label: "Table 5", subtitle: "Table from Database 2" },
+      { id: "table6", label: "Table 6", subtitle: "Table from Database 2" },
+    ],
+  },
+] satisfies Data[];
+
+export const TreeItem = forwardRef<HTMLLIElement, TreeItemProps>(
+  function TreeItem(props, ref) {
+    const {
+      className,
+      isDragging,
+      children,
+      nodeId,
+      label,
+      onKeyDown,
+      ...others
+    } = props;
+    const Icon = children ? DataSource : Table;
+
+    const { handleExpansion } = useHvTreeItem(nodeId);
+
+    // Whether an item is being dragged or not
+    const [draggingActive, setDraggingActive] = useState<React.ReactNode>();
+    useDndMonitor({
+      onDragEnd: () => setDraggingActive(false),
+      onDragStart: () => setDraggingActive(true),
+    });
+
+    return (
+      <HvTreeItem
+        ref={ref}
+        nodeId={nodeId}
+        className={cx(className, { [classes.dragging]: isDragging })}
+        classes={{
+          content: cx({ [classes.contentDragging]: isDragging }),
+        }}
+        label={
+          <div className={classes.labelRoot}>
+            <Icon />
+            <HvOverflowTooltip data={label} />
+            {!children && (
+              <span className={classes.dragIcon}>
+                <Drag />
+              </span>
+            )}
+          </div>
+        }
+        // The following props enable drag and drop with keyboard
+        disableTreeFocus
+        tabIndex={0}
+        onKeyDown={(event) => {
+          if (onKeyDown) {
+            onKeyDown?.(event);
+            if (!isDragging) event.stopPropagation();
+            return;
+          }
+
+          // Expands item if possible when navigating with tab key
+          if (event.key === "Enter" && !draggingActive) {
+            handleExpansion(event as any);
+          }
+        }}
+        {...others}
+      >
+        {children}
+      </HvTreeItem>
+    );
+  },
+);
+
+const DraggableTreeItem = (props: DraggableTreeItemProps) => {
+  const { subtitle, label, children, nodeId, ...others } = props;
+
+  const itemRef = useRef<HTMLLIElement>(null);
+
+  const { attributes, listeners, setNodeRef, isDragging, transform } =
+    useDraggable({
+      id: nodeId,
+      data: {
+        // Data needed to be dropped in HvFlow
+        hvFlow: {
+          // HvFlow will use this value to populate the node's data.nodeLabel
+          label,
+          // 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: {
+            tableId: nodeId,
+            subtitle,
+            color: "cat3",
+            icon: "table",
+            output: {
+              id: "data",
+              label: "Data",
+            },
+          } satisfies NodeData,
+        },
+        // Data needed for the DragOverlay component
+        dragOverlay: {
+          component: <TreeItem nodeId={nodeId} label={label} isDragging />,
+        },
+      },
+    });
+
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : undefined;
+
+  const forkedRef = useForkRef(itemRef, setNodeRef);
+
+  return (
+    <TreeItem
+      nodeId={nodeId}
+      ref={forkedRef}
+      style={style}
+      isDragging={isDragging}
+      label={label}
+      {...attributes}
+      {...listeners}
+      {...others}
+    >
+      {children}
+    </TreeItem>
+  );
+};
+
+const renderTreeItem = ({ id, label, children, subtitle }: Data) =>
+  children ? (
+    <TreeItem key={id} nodeId={id} label={label}>
+      {children?.map(renderTreeItem)}
+    </TreeItem>
+  ) : (
+    <DraggableTreeItem key={id} nodeId={id} label={label} subtitle={subtitle}>
+      {children}
+    </DraggableTreeItem>
+  );
+
+export const TreeView = () => (
+  <HvTreeView aria-label="Database navigator" disableSelection>
+    {data.map((db) => renderTreeItem(db))}
+  </HvTreeView>
+);

package/src/templates/Canvas/dependencies.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.2",
+    "reactflow": "^11.10.1"
+  }
+}

package/src/templates/Canvas/index.tsx

@@ -0,0 +1,363 @@
+import { useCallback, useMemo, useState } from "react";
+import { applyNodeChanges, ReactFlowInstance } from "reactflow";
+import {
+  HvButton,
+  HvDialog,
+  HvDialogContent,
+  HvDialogTitle,
+  HvIconButton,
+  HvInlineEditor,
+  HvOverflowTooltip,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+import {
+  Add,
+  Close,
+  DataSource,
+  DropUpXS,
+  Fullscreen,
+  Report,
+  Table,
+} from "@hitachivantara/uikit-react-icons";
+import {
+  HvFlow,
+  HvFlowBackground,
+  HvFlowControls,
+  HvFlowEmpty,
+  HvFlowProps,
+  StickyNode,
+  StickyNodeData,
+} from "@hitachivantara/uikit-react-lab";
+import {
+  HvCanvasBottomPanel,
+  HvCanvasBottomPanelProps,
+  HvCanvasProvider,
+  HvCanvasToolbar,
+} from "@hitachivantara/uikit-react-pentaho";
+
+import { CanvasProvider, useCanvasContext } from "./Context";
+import { ListView } from "./ListView";
+import { Node, NodeData } from "./Node";
+import { CanvasSidebar } from "./Sidebar";
+import { StatusEdge } from "./StatusEdge";
+import { classes } from "./styles";
+import { DataTable } from "./Table";
+import { TreeView } from "./TreeView";
+import { flowStatuses } from "./utils";
+
+const nodeTypes = {
+  node: Node,
+  sticky: StickyNode,
+};
+const edgeTypes = {
+  status: StatusEdge,
+};
+const initialNodes: HvFlowProps["nodes"] = [];
+const initialEdges: HvFlowProps["edges"] = [];
+
+const sidePanelTabs = [
+  {
+    id: 0,
+    content: (
+      <div className={classes.tabLabel}>
+        <DataSource />
+        Data
+      </div>
+    ),
+  },
+  {
+    id: 2,
+    content: (
+      <div className={classes.tabLabel}>
+        <Add />
+        Nodes
+      </div>
+    ),
+  },
+];
+const sidePanelContent = {
+  [sidePanelTabs[0].id]: <TreeView />,
+  [sidePanelTabs[1].id]: <ListView />,
+};
+
+const Page = () => {
+  const [sidePanelOpen, setSidePanelOpen] = useState(true);
+  const [sidePanelTab, setSidePanelTab] = useState(sidePanelTabs[0].id);
+  const [minimize, setMinimize] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [nodesHidden, setNodesHidden] = useState(false);
+  const [flowInstance, setFlowInstance] =
+    useState<ReactFlowInstance<NodeData | StickyNodeData>>();
+  const [nodes, setNodes] = useState(initialNodes);
+
+  const { selectedTable, openedTables, setOpenedTables, setSelectedTable } =
+    useCanvasContext();
+
+  const bottomTabs = useMemo(() => {
+    return (openedTables || []).map((table) => ({
+      id: table.id,
+      title: (overflowing) => (
+        <div className={classes.titleRoot}>
+          {!overflowing && <Table />}
+          <HvOverflowTooltip data={table.label} />
+        </div>
+      ),
+    })) satisfies HvCanvasBottomPanelProps["tabs"];
+  }, [openedTables]);
+
+  const handleCloseTab = (value: string | number) => {
+    const newOpenedTables = openedTables?.filter((x) => x.id !== value) ?? [];
+    if (newOpenedTables.length !== 0) {
+      setOpenedTables?.(newOpenedTables);
+      setSelectedTable?.(newOpenedTables[0].id as string);
+    } else {
+      setOpenedTables?.(undefined);
+    }
+  };
+
+  const handleChangeTab: HvCanvasBottomPanelProps["onTabChange"] = (
+    event,
+    value,
+  ) => {
+    setSelectedTable?.(value as string);
+  };
+
+  const handleAction: HvCanvasBottomPanelProps["onAction"] = (
+    event,
+    action,
+    tabId,
+  ) => {
+    switch (action.id) {
+      case "close":
+        event.stopPropagation();
+        handleCloseTab(tabId);
+        break;
+      case "toggle":
+        if (minimize && selectedTable !== tabId) handleChangeTab(null, tabId);
+        setMinimize((prev) => !prev);
+        break;
+      case "fullscreen":
+        if (minimize && selectedTable !== tabId) handleChangeTab(null, tabId);
+        setFullscreen((prev) => !prev);
+        break;
+      default:
+        break;
+    }
+  };
+
+  // Simulating an execution of the flow and updating the statuses of nodes and edges
+  const handleExecute = () => {
+    flowInstance?.setNodes((nodes) =>
+      nodes.map((node) => {
+        if (node.type === "sticky") return node;
+
+        const random = Math.floor(Math.random() * flowStatuses.length);
+
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            status: flowStatuses[random],
+          },
+        };
+      }),
+    );
+    flowInstance?.setEdges((edges) =>
+      edges.map((edge) => {
+        const random = Math.floor(Math.random() * flowStatuses.length);
+        return {
+          ...edge,
+          type: Object.keys(edgeTypes)[0],
+          data: {
+            ...edge.data,
+            status: flowStatuses[random],
+          },
+        };
+      }),
+    );
+  };
+
+  const handleAddSticky = () => {
+    const id = Date.now().toString();
+    const newNode = {
+      id,
+      type: "sticky",
+      position: {
+        x: Math.random() * 250 + 350,
+        y: Math.random() * 250 + 200,
+      },
+      style: {
+        width: 150,
+        height: 125,
+      },
+      data: {},
+    };
+    flowInstance?.addNodes(newNode);
+  };
+
+  const handleHideNotes = () => {
+    setNodesHidden(!nodesHidden);
+    flowInstance?.setNodes((nds) => {
+      if (!nds.some((node) => node.type === "sticky")) return nds;
+
+      return nds.map((node) =>
+        node.type === "sticky"
+          ? {
+              ...node,
+              data: {
+                ...node.data,
+                visible: !((node.data as StickyNodeData)?.visible ?? true),
+              },
+            }
+          : node,
+      );
+    });
+  };
+
+  const bottomPanelOpen = useMemo(
+    () =>
+      !!openedTables &&
+      openedTables.length > 0 &&
+      bottomTabs &&
+      bottomTabs.length > 0,
+    [bottomTabs, openedTables],
+  );
+
+  const leftActions = [
+    {
+      id: "toggle",
+      label: minimize ? "Maximize" : "Minimize",
+      icon: <DropUpXS size="XS" rotate={!minimize} />,
+    },
+  ];
+
+  const rightActions = [
+    {
+      id: "fullscreen",
+      label: "Fullscreen",
+      icon: <Fullscreen iconSize="XS" />,
+    },
+    {
+      id: "close",
+      label: "Close",
+      icon: <Close iconSize="XS" />,
+    },
+  ];
+
+  const onNodesChange = useCallback((changes: any) => {
+    return setNodes((nds) => applyNodeChanges(changes, nds));
+  }, []);
+
+  return (
+    <div className={classes.root}>
+      <HvCanvasProvider>
+        <HvFlow
+          className={classes.flow}
+          nodes={nodes}
+          edges={initialEdges}
+          nodeTypes={nodeTypes}
+          onNodesChange={onNodesChange}
+          edgeTypes={edgeTypes}
+          onInit={setFlowInstance}
+          /** Flow sidebar passed as prop to access the flow's Dnd context inside CanvasSidePanel */
+          sidebar={
+            <CanvasSidebar
+              tabs={sidePanelTabs}
+              open={sidePanelOpen}
+              tab={sidePanelTab}
+              onToggle={(event, value) => setSidePanelOpen(value)}
+              onTabChange={(event, value) => setSidePanelTab(value as number)}
+            >
+              {sidePanelContent[sidePanelTab]}
+            </CanvasSidebar>
+          }
+        >
+          <HvFlowEmpty
+            className={classes.flowEmpty}
+            title={
+              <HvTypography variant="title3" component="p">
+                Drag and Drop your Nodes
+              </HvTypography>
+            }
+            message={
+              <HvTypography
+                className={classes.flowEmptyMessage}
+                variant="label"
+                component="p"
+              >
+                Then you can start configuring your flow.
+              </HvTypography>
+            }
+            icon={null}
+          />
+          <HvFlowBackground />
+          <HvFlowControls>
+            <HvIconButton
+              variant="secondarySubtle"
+              onClick={handleHideNotes}
+              aria-label={nodesHidden ? "Show notes" : "Hide notes"}
+              title={nodesHidden ? "Show notes" : "Hide notes"}
+            >
+              <Report />
+            </HvIconButton>
+          </HvFlowControls>
+        </HvFlow>
+        <HvCanvasToolbar
+          title={<HvInlineEditor defaultValue="My Canvas" variant="title4" />}
+        >
+          <div className="flex gap-sm">
+            <HvButton variant="secondarySubtle" onClick={handleAddSticky}>
+              Add note
+            </HvButton>
+            <HvButton variant="primary" onClick={handleExecute}>
+              Execute
+            </HvButton>
+          </div>
+        </HvCanvasToolbar>
+        {bottomTabs.length > 0 && bottomPanelOpen && (
+          <HvCanvasBottomPanel
+            classes={{
+              rightActions: classes.rightActions,
+            }}
+            open={bottomPanelOpen}
+            minimize={minimize}
+            tabs={bottomTabs}
+            selectedTabId={selectedTable}
+            leftActions={leftActions}
+            rightActions={rightActions}
+            overflowActions={[...leftActions, ...rightActions]}
+            onTabChange={handleChangeTab}
+            onAction={handleAction}
+          >
+            <DataTable id={selectedTable} />
+          </HvCanvasBottomPanel>
+        )}
+        {bottomPanelOpen && (
+          <HvDialog
+            fullWidth
+            maxWidth="lg"
+            open={fullscreen}
+            onClose={() => setFullscreen((prev) => !prev)}
+          >
+            <HvDialogTitle className={classes.dialogTitle}>
+              {bottomTabs.find((x) => x.id === selectedTable)?.title(false)}
+            </HvDialogTitle>
+            <HvDialogContent>
+              <DataTable id={selectedTable} />
+            </HvDialogContent>
+          </HvDialog>
+        )}
+      </HvCanvasProvider>
+    </div>
+  );
+};
+
+const Canvas = () => (
+  <CanvasProvider>
+    <Page />
+  </CanvasProvider>
+);
+
+export { Canvas as Component };
+
+export default Canvas;

package/src/templates/Canvas/styles.tsx

@@ -0,0 +1,41 @@
+import { css } from "@emotion/css";
+import { actionsGenericClasses, theme } from "@hitachivantara/uikit-react-core";
+
+export const classes = {
+  flow: css({
+    width: "100%",
+    height: "100%",
+    // border style when a node is selected
+    [`& .selected > div`]: {
+      borderWidth: "2px",
+      borderColor: theme.colors.primaryStrong,
+    },
+    " .react-flow": {
+      minHeight: 700,
+    },
+  }),
+  flowEmpty: css({ backgroundColor: "transparent" }),
+  flowEmptyMessage: css({ color: theme.colors.textSubtle }),
+  tabLabel: css({ display: "flex", alignItems: "center" }),
+  root: css({
+    minHeight: 700,
+    height: "100%",
+    display: "flex",
+    width: "100%",
+    position: "relative",
+  }),
+  titleRoot: css({
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+  }),
+  dialogTitle: css({
+    ...theme.typography.label,
+    "& div > div": { margin: 0, padding: 0 },
+  }),
+  rightActions: css({
+    [`& .${actionsGenericClasses.button}:not(:last-child)`]: {
+      marginRight: 0,
+    },
+  }),
+};

package/src/templates/Canvas/utils.tsx

@@ -0,0 +1,70 @@
+import { theme } from "@hitachivantara/uikit-react-core";
+import {
+  Battery,
+  Cloud,
+  Edit,
+  Favorite,
+  Fire,
+  Ghost,
+  Heart,
+  Level0Good,
+  Level2Average,
+  Level3Bad,
+  Palette,
+  Table,
+} from "@hitachivantara/uikit-react-icons";
+
+export const delay = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+export const iconsMapping = {
+  table: <Table color="textDark" />,
+  ghost: <Ghost color="textDark" />,
+  cloud: <Cloud color="textDark" />,
+  battery: <Battery color="textDark" />,
+  fire: <Fire color="textDark" />,
+  palette: <Palette color="textDark" />,
+  edit: <Edit color="textDark" />,
+  heart: <Heart color="textDark" />,
+  favorite: <Favorite color="textDark" />,
+};
+
+export const iconsMappingKeys = Object.keys(iconsMapping);
+
+const iconWrapper = (icon: React.ReactNode) => (
+  <div
+    style={{
+      height: 24,
+      width: 24,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: `1px solid ${theme.colors.bgContainer}`,
+      borderRadius: theme.radii.full,
+    }}
+  >
+    {icon}
+  </div>
+);
+
+export const flowStatuses = ["warning", "error", "success"] as const;
+export type FlowStatus = (typeof flowStatuses)[number];
+export const flowStatusesSpecs = {
+  [flowStatuses[0]]: {
+    icon: iconWrapper(<Level2Average color={["warning", "textLight"]} />),
+    color: theme.colors.warning,
+    description: "Warning",
+  },
+  [flowStatuses[1]]: {
+    icon: iconWrapper(<Level3Bad color={["negativeStrong", "textLight"]} />),
+    color: theme.colors.negativeStrong,
+    description: "Error",
+  },
+  [flowStatuses[2]]: {
+    icon: iconWrapper(<Level0Good color={["positive", "textLight"]} />),
+    color: theme.colors.positive,
+    description: "Success",
+  },
+};