@hitachivantara/uikit-cli 6.0.1

package/src/templates/Canvas/StickyNode.tsx

@@ -0,0 +1,475 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { css, cx } from "@emotion/css";
+import Popover from "@mui/material/Popover";
+import {
+  NodeProps,
+  NodeResizer,
+  NodeToolbar,
+  Position,
+  useReactFlow,
+} from "reactflow";
+import {
+  HvButton,
+  HvCheckBox,
+  HvColorAny,
+  HvColorPicker,
+  HvDialogContent,
+  HvDialogTitle,
+  HvIconButton,
+  HvListItem,
+  HvMultiButton,
+  HvSelectionList,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import {
+  ActualSize,
+  Bold,
+  Delete,
+  FontSize,
+  Fullscreen,
+  Italic,
+  Palette,
+} from "@hitachivantara/uikit-react-icons";
+
+export type StickyNodeData =
+  | undefined
+  | {
+      title?: string;
+      backgroundColor?: HvColorAny;
+      borderColor?: HvColorAny;
+      textColor?: HvColorAny;
+      hasShadow?: boolean;
+      bold?: boolean;
+      italic?: boolean;
+      fontSize?: number;
+      expanded?: boolean;
+      visible?: boolean;
+      onDelete?: () => void;
+    };
+
+const defaultData: StickyNodeData = {
+  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];
+
+export const StickyNode = ({
+  id,
+  selected,
+  data = {},
+}: NodeProps<StickyNodeData>) => {
+  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<HTMLButtonElement>(null);
+  const fontSizeConfigBtnRef = useRef<HTMLButtonElement>(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: number) => {
+      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 (
+    <>
+      <Popover
+        open={colorsConfigOpen}
+        anchorEl={colorConfigBtnRef.current}
+        onClose={() => {
+          setColorsConfigOpen(false);
+          setEditing(false);
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+      >
+        <HvDialogTitle>Customize Colors</HvDialogTitle>
+        <HvDialogContent>
+          <div className={classes.colorConfig}>
+            {colorsToConfig.map((c) => (
+              <HvColorPicker
+                key={c}
+                label={`${c.charAt(0).toUpperCase() + c.slice(1).replace("Color", " Color")}`}
+                value={mergedData[c as keyof StickyNodeData] ?? ""}
+                onChange={(color) => {
+                  setNodes((nds) =>
+                    nds.map((node) => {
+                      if (node.id === id) {
+                        node.data = {
+                          ...node.data,
+                          [c]: color,
+                        };
+                      }
+                      return node;
+                    }),
+                  );
+                }}
+              />
+            ))}
+            <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;
+                  }),
+                );
+              }}
+            />
+            <HvButton variant="secondarySubtle" onClick={handleResetColors}>
+              Reset to defaults
+            </HvButton>
+          </div>
+        </HvDialogContent>
+      </Popover>
+      <Popover
+        open={fontSizeConfigOpen}
+        anchorEl={fontSizeConfigBtnRef.current}
+        onClose={() => {
+          setFontSizeConfigOpen(false);
+          setEditing(false);
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+      >
+        <HvSelectionList
+          className={classes.fontSizes}
+          value={fontSize}
+          onChange={(evt, newValue) => {
+            handleChangeFontSize(newValue);
+          }}
+        >
+          {fontSizes.map((size) => (
+            <HvListItem value={size} key={size}>
+              {size}
+            </HvListItem>
+          ))}
+        </HvSelectionList>
+      </Popover>
+      <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`,
+        }}
+      >
+        {mergedData.expanded && (
+          <>
+            <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,
+              }}
+            />
+            <NodeToolbar
+              isVisible={editing || toolbarVisible || selected}
+              position={Position.Top}
+              className={classes.nodeToolbar}
+              onMouseEnter={() => setToolbarVisible(true)}
+              onMouseLeave={() => setToolbarVisible(false)}
+            >
+              <div className={classes.buttonsContainer}>
+                <HvMultiButton>
+                  <HvIconButton
+                    aria-label="Font Size"
+                    title="Font Size"
+                    ref={fontSizeConfigBtnRef}
+                    onClick={() => {
+                      setEditing(true);
+                      setFontSizeConfigOpen(true);
+                    }}
+                  >
+                    <FontSize />
+                  </HvIconButton>
+                  <HvIconButton
+                    aria-label="Bold"
+                    title="Bold"
+                    selected={mergedData.bold}
+                    onClick={handleToggleBold}
+                  >
+                    <Bold />
+                  </HvIconButton>
+                  <HvIconButton
+                    aria-label="Italic"
+                    title="Italic"
+                    selected={mergedData.italic}
+                    onClick={handleToggleItalic}
+                  >
+                    <Italic />
+                  </HvIconButton>
+                  <HvIconButton
+                    aria-label="Customize Colors"
+                    title="Customize Colors"
+                    ref={colorConfigBtnRef}
+                    onClick={() => {
+                      setEditing(true);
+                      setColorsConfigOpen(true);
+                    }}
+                  >
+                    <Palette />
+                  </HvIconButton>
+                  <HvIconButton
+                    aria-label="Delete"
+                    title="Delete"
+                    onClick={handleDeleteSticky}
+                  >
+                    <Delete />
+                  </HvIconButton>
+                </HvMultiButton>
+              </div>
+            </NodeToolbar>
+            <div
+              onMouseEnter={() => setToolbarVisible(true)}
+              onMouseLeave={() => setToolbarVisible(false)}
+              className={classes.textAreaRoot}
+            >
+              <HvIconButton
+                className={classes.expandButton}
+                title="Fold"
+                onClick={handleToggleExpand}
+              >
+                <ActualSize />
+              </HvIconButton>
+              <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);
+                }}
+              />
+            </div>
+          </>
+        )}
+        {!mergedData.expanded && (
+          <>
+            <HvIconButton
+              title={
+                <span
+                  style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+                >
+                  {text}
+                </span>
+              }
+              onClick={handleToggleExpand}
+            >
+              <Fullscreen />
+            </HvIconButton>
+          </>
+        )}
+      </div>
+    </>
+  );
+};

package/src/templates/Canvas/Table.tsx

@@ -0,0 +1,202 @@
+import { useState } from "react";
+import useSWR from "swr";
+import {
+  HvLoadingContainer,
+  HvPagination,
+  HvTable,
+  HvTableBody,
+  HvTableCell,
+  HvTableColumnConfig,
+  HvTableContainer,
+  HvTableHead,
+  HvTableHeader,
+  HvTableRow,
+  HvTableSection,
+  HvTypography,
+  useHvData,
+  useHvPagination,
+  useHvSortBy,
+} from "@hitachivantara/uikit-react-core";
+
+import { delay } from "./utils";
+
+const EmptyRow = () => (
+  <HvTableRow>
+    <HvTableCell colSpan={100} />
+  </HvTableRow>
+);
+
+interface Data {
+  column1: string;
+  column2: string;
+  column3: string;
+  column4: string;
+  column5: string;
+  column6: string;
+}
+
+const columns: HvTableColumnConfig<Data, string>[] = [
+  { Header: "Column 1", accessor: "column1" },
+  { Header: "Column 2", accessor: "column2" },
+  { Header: "Column 3", accessor: "column3" },
+  { Header: "Column 4", accessor: "column4" },
+  { Header: "Column 5", accessor: "column5" },
+  { Header: "Column 6", accessor: "column6" },
+];
+
+const randomData = [
+  "potato",
+  "carrot",
+  "apple",
+  "grape",
+  "banana",
+  "orange",
+  "pineapple",
+  "blueberry",
+  "tomato",
+  "avocado",
+  "peach",
+  "watermelon",
+  "cherry",
+  "raspberry",
+];
+
+// Simulating data fetching in backend
+const fetchData = async (
+  limit: number,
+): Promise<{ data: Data[]; total: number; pageCount: number }> => {
+  await delay(600);
+  const total = 30;
+  return {
+    data: Array.from({ length: limit }).map(() => {
+      const random = Math.floor(Math.random() * randomData.length);
+      return {
+        column1: randomData[random],
+        column2: randomData[random],
+        column3: randomData[random],
+        column4: randomData[random],
+        column5: randomData[random],
+        column6: randomData[random],
+      };
+    }),
+    total,
+    pageCount: Math.ceil(total / limit),
+  };
+};
+
+const useServerData = (id: string, page = 0, skip = 0, limit = 5) => {
+  return useSWR(
+    `/data/${id}?page=${page}&skip=${skip}&limit=${limit}`,
+    async () => fetchData(limit),
+  );
+};
+
+interface DataTableProps {
+  id: string;
+}
+
+export const DataTable = ({ id }: DataTableProps) => {
+  const [pageSize, setPageSize] = useState(5);
+  const [page, setPage] = useState(0);
+
+  const { data, isLoading } = useServerData(
+    id,
+    page,
+    page * pageSize,
+    pageSize,
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    getHvPaginationProps,
+    prepareRow,
+    headerGroups,
+    page: pageData,
+  } = useHvData<Data, string>(
+    {
+      columns,
+      data: data?.data,
+      manualPagination: true,
+      initialState: { pageSize, pageIndex: page },
+      pageCount: data?.pageCount,
+      stateReducer: (newState, action) => {
+        switch (action.type) {
+          // Triggers a data fetch
+          case "init":
+          case "gotoPage":
+          case "setPageSize":
+            setPage(newState.pageIndex ?? 0);
+            setPageSize(newState.pageSize ?? 5);
+            break;
+          default:
+            break;
+        }
+        return newState;
+      },
+    },
+    useHvSortBy,
+    useHvPagination,
+  );
+
+  const renderTableRow = (i: number) => {
+    const row = pageData[i];
+
+    if (!row) return <EmptyRow key={i} />;
+
+    prepareRow(row);
+
+    return (
+      <HvTableRow {...row.getRowProps()} key={row.getRowProps().key}>
+        {row.cells.map((cell) => (
+          <HvTableCell {...cell.getCellProps()} key={cell.getCellProps().key}>
+            {cell.render("Cell")}
+          </HvTableCell>
+        ))}
+      </HvTableRow>
+    );
+  };
+
+  return (
+    <HvTableSection
+      raisedHeader
+      title={<HvTypography variant="label">Preview Data</HvTypography>}
+    >
+      <HvLoadingContainer hidden={!isLoading}>
+        <HvTableContainer tabIndex={0}>
+          <HvTable {...getTableProps()}>
+            <HvTableHead>
+              {headerGroups.map((headerGroup) => (
+                <HvTableRow
+                  {...headerGroup.getHeaderGroupProps()}
+                  key={headerGroup.getHeaderGroupProps().key}
+                >
+                  {headerGroup.headers.map((col) => (
+                    <HvTableHeader
+                      {...col.getHeaderProps()}
+                      key={col.getHeaderProps().key}
+                    >
+                      {col.render("Header")}
+                    </HvTableHeader>
+                  ))}
+                </HvTableRow>
+              ))}
+            </HvTableHead>
+            <HvTableBody {...getTableBodyProps()}>
+              {pageSize && [...Array(pageSize).keys()].map(renderTableRow)}
+            </HvTableBody>
+          </HvTable>
+        </HvTableContainer>
+      </HvLoadingContainer>
+      {pageData.length > 0 ? (
+        <HvPagination
+          {...getHvPaginationProps?.()}
+          labels={{
+            pageSizePrev: "",
+            pageSizeEntryName: `of ${data?.total}`,
+          }}
+        />
+      ) : undefined}
+    </HvTableSection>
+  );
+};