@hitachivantara/uikit-cli 6.0.1

package/src/templates/AssetInventory/data.tsx

@@ -0,0 +1,255 @@
+import {
+  HvBulkActionsProps,
+  HvColor,
+  HvControlsProps,
+  HvRightControlProps,
+  HvSkeleton,
+  HvTableColumnConfig,
+  HvTooltip,
+} from "@hitachivantara/uikit-react-core";
+import {
+  Add,
+  Cards,
+  Delete,
+  Level0Good,
+  Level1,
+  Level2Average,
+  Level3Bad,
+  List,
+  Preview,
+} from "@hitachivantara/uikit-react-icons";
+
+import {
+  DataObject,
+  ServerPaginationProps,
+  useServerPagination,
+} from "./usePaginationData";
+
+// --- Table data utils ---
+
+export interface AssetInventoryEntry extends DataObject {
+  id?: string;
+  name?: string;
+  eventType?: string;
+  status?: string;
+  severity?: string;
+  priority?: string;
+  time?: string;
+  temperature?: string;
+  statusColor?: HvColor;
+  image?: string;
+}
+
+const images = [
+  "https://images.unsplash.com/photo-1513828583688-c52646db42da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1589320011103-48e428abcbae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1567789884554-0b844b597180?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1647427060118-4911c9821b82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1612685180313-bdfe1d6896cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1190&q=80",
+  "https://images.unsplash.com/photo-1566930665082-4ae9dbbb5b6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=873&q=80",
+  "https://images.unsplash.com/photo-1513828742140-ccaa28f3eda0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1622534376374-fe4480328daa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80",
+  "https://images.unsplash.com/photo-1618840626133-54463084a141?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=872&q=80",
+  "https://images.unsplash.com/photo-1600715502630-c9300abe78a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+];
+
+export const getStatusIcon = (
+  color?: AssetInventoryEntry["statusColor"] | string,
+) => {
+  switch (color) {
+    case "positive":
+      return <Level0Good color="positive" />;
+    case "warning":
+      return <Level2Average color="warning" />;
+    case "negative":
+      return <Level3Bad color="negative" />;
+    case "info":
+    default:
+      return <Level1 color="info" />;
+  }
+};
+
+const getStatusMessage = (status?: AssetInventoryEntry["statusColor"]) => {
+  switch (status) {
+    case "positive":
+      return "Success";
+    case "warning":
+      return "Open";
+    case "negative":
+      return "Error";
+    case "info":
+    default:
+      return "Unassigned";
+  }
+};
+
+export const getColumns = (
+  loading?: boolean,
+): HvTableColumnConfig<AssetInventoryEntry, string>[] => [
+  {
+    Header: "Status",
+    accessor: "statusColor",
+    style: { width: 60 },
+    Cell: ({ value }: { value: any }) =>
+      loading ? (
+        <HvSkeleton width={32} height={32} variant="circle" animation="wave" />
+      ) : (
+        <HvTooltip title={getStatusMessage(value)}>
+          {getStatusIcon(value)}
+        </HvTooltip>
+      ),
+  },
+  {
+    Header: "Asset",
+    accessor: "image",
+    style: { maxWidth: 60 },
+    Cell: ({ value, row }: { value: any; row: any }) => {
+      return loading ? (
+        <HvSkeleton width={60} height={40} variant="square" animation="wave" />
+      ) : (
+        <HvTooltip
+          placement="right"
+          title={
+            <div style={{ width: 400 }}>
+              <img alt={row.original.name} src={value} />
+            </div>
+          }
+        >
+          <div style={{ maxWidth: 60 }}>
+            <img alt={row.original.name} src={value} />
+          </div>
+        </HvTooltip>
+      );
+    },
+  },
+  {
+    Header: "Title",
+    accessor: "name",
+    style: { minWidth: 140 },
+    Cell: ({ value }: { value: any }) => {
+      return loading ? <HvSkeleton animation="wave" /> : <span>{value}</span>;
+    },
+  },
+  {
+    Header: "Event Type",
+    accessor: "eventType",
+    style: { minWidth: 100 },
+    Cell: ({ value }: { value: any }) => {
+      return loading ? <HvSkeleton animation="wave" /> : <span>{value}</span>;
+    },
+  },
+  {
+    Header: "Severity",
+    accessor: "severity",
+    Cell: ({ value }: { value: any }) => {
+      return loading ? <HvSkeleton animation="wave" /> : <span>{value}</span>;
+    },
+  },
+  {
+    Header: "Priority",
+    accessor: "priority",
+    Cell: ({ value }: { value: any }) => {
+      return loading ? <HvSkeleton animation="wave" /> : <span>{value}</span>;
+    },
+  },
+  {
+    Header: "Time",
+    accessor: "time",
+    Cell: ({ value }: { value: any }) => {
+      return loading ? <HvSkeleton animation="wave" /> : <span>{value}</span>;
+    },
+  },
+  {
+    Header: "Temperature",
+    accessor: "temperature",
+    Cell: ({ value }: { value: any }) => {
+      return loading ? <HvSkeleton animation="wave" /> : <span>{value}</span>;
+    },
+  },
+];
+
+export const actions: HvBulkActionsProps["actions"] = [
+  { id: "add", label: "Add", icon: <Add /> },
+  { id: "delete", label: "Delete", icon: <Delete /> },
+  { id: "put", label: "Preview", icon: <Preview /> },
+];
+
+export const views: HvControlsProps["views"] = [
+  { id: "card", "aria-label": "Select card view", icon: <Cards /> },
+  { id: "list", "aria-label": "Select list view", icon: <List /> },
+];
+
+export const rightControlValues: HvRightControlProps["values"] = [
+  {
+    id: "nameAsc",
+    accessor: "name",
+    label: "Name Ascending",
+    desc: false,
+  },
+  {
+    id: "nameDesc",
+    accessor: "name",
+    label: "Name Descending",
+    desc: true,
+  },
+  {
+    id: "eventTypeAsc",
+    accessor: "eventType",
+    label: "Event Type Ascending",
+    desc: false,
+  },
+  {
+    id: "eventTypeDesc",
+    accessor: "eventType",
+    label: "Event Type Descending",
+    desc: true,
+  },
+  {
+    id: "severityAsc",
+    accessor: "severity",
+    label: "Severity Ascending",
+    desc: false,
+  },
+  {
+    id: "severityDesc",
+    accessor: "severity",
+    label: "Severity Descending",
+    desc: true,
+  },
+];
+
+const getOption = <T,>(opts: T[], i: number) => opts[i % opts.length];
+
+const getTime = (priority: string, index: number) => {
+  let i = priority === "High" ? index + 4 : index + 3;
+  i = priority === "Medium" ? i + 30 : index + 20;
+
+  return `${i % 12}:${i % 60}:${i % 60}`;
+};
+
+const getPriority = (i: number) => getOption(["High", "Medium", "Low"], i);
+
+export const createEntry = (i: number): AssetInventoryEntry => {
+  return {
+    id: `${i + 1}`,
+    name: `Event ${i + 1}`,
+    eventType: `Anomaly detection ${i % 4}`,
+    status: getOption(["Closed", "Open"], i),
+    severity: getOption(["Critical", "Major", "Average", "Minor"], i),
+    priority: getPriority(i),
+    time: getTime(getPriority(i), i),
+    temperature: `${i + 35}º C`,
+    statusColor: getOption(["info", "positive", "negative", "warning"], i),
+    image: getOption(images, i),
+  };
+};
+
+// --- Data & Endpoint ---
+const db = [...Array(50).keys()].map(createEntry);
+
+export interface PaginationDataProps
+  extends Omit<ServerPaginationProps<AssetInventoryEntry>, "endpoint" | "db"> {}
+
+export const usePaginationData = (props: PaginationDataProps) => {
+  return useServerPagination({ endpoint: "/events", db, ...props });
+};

package/src/templates/AssetInventory/index.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useId, useMemo, useState } from "react";
+import { css } from "@emotion/css";
+import {
+  HvActionsGenericProps,
+  HvBulkActions,
+  HvControls,
+  HvLeftControl,
+  HvLeftControlProps,
+  HvPagination,
+  HvRightControl,
+  theme,
+  useHvBulkActions,
+  useHvData,
+  useHvGlobalFilter,
+  useHvPagination,
+  useHvRowSelection,
+  useHvSortBy,
+} from "@hitachivantara/uikit-react-core";
+
+import { CardView } from "./CardView";
+import {
+  actions,
+  AssetInventoryEntry,
+  getColumns,
+  PaginationDataProps,
+  rightControlValues,
+  usePaginationData,
+  views,
+} from "./data";
+import { ListView } from "./ListView";
+
+const classes = {
+  root: css({
+    display: "grid",
+    gap: theme.space.sm,
+  }),
+};
+
+const PAGE_OPTIONS = [6, 12, 18];
+
+const AssetInventory = () => {
+  const [currentView, setCurrentView] = useState("card");
+  const [params, setParams] = useState<PaginationDataProps>({
+    limit: PAGE_OPTIONS[0],
+    skip: 0,
+  });
+
+  const cardViewId = useId();
+  const listViewId = useId();
+
+  const {
+    data: { pages, data },
+    loading,
+    deleteEntries,
+  } = usePaginationData(params);
+
+  const columns = useMemo(() => getColumns(loading), [loading]);
+
+  const instance = useHvData<AssetInventoryEntry, string>(
+    {
+      data,
+      columns,
+      manualPagination: true,
+      manualSortBy: true,
+      autoResetPage: false,
+      autoResetSortBy: true,
+      pageCount: pages,
+      initialState: { pageSize: PAGE_OPTIONS[0] },
+    },
+    useHvGlobalFilter,
+    useHvSortBy,
+    useHvPagination,
+    useHvRowSelection,
+    useHvBulkActions,
+  );
+
+  useEffect(() => {
+    const { pageSize = PAGE_OPTIONS[0], pageIndex = 0 } = instance.state;
+
+    setParams((prev) => ({
+      ...prev,
+      ...(instance.state.sortBy &&
+        instance.state.sortBy.length > 0 && {
+          order: instance.state.sortBy?.[0].desc ? "desc" : "asc",
+          sort: instance.state.sortBy?.[0].id,
+        }),
+      limit: pageSize,
+      skip: pageSize * pageIndex,
+    }));
+  }, [instance.state]);
+
+  const bulkActionProps = instance.getHvBulkActionsProps?.();
+
+  const handleSearch: HvLeftControlProps["onSearch"] = (e, value) => {
+    instance.gotoPage?.(0);
+    setParams((prev) => ({
+      ...prev,
+      skip: 0,
+      search: value,
+    }));
+  };
+
+  const handleAction: HvActionsGenericProps["onAction"] = async (
+    event,
+    action,
+  ) => {
+    if (action.id === "put" || action.id === "add") {
+      alert(
+        `Callback for action ${
+          action.label
+        } on items ${instance.selectedFlatRows
+          .map((r) => r.original.id)
+          .join(", ")}`,
+      );
+    } else if (action.id === "delete") {
+      const ids = instance.selectedFlatRows.map((r) => r.original.id || "");
+
+      await deleteEntries(ids);
+
+      if (
+        ids.length === data.length &&
+        instance.state.pageIndex === pages - 1
+      ) {
+        // Go back
+        instance.gotoPage?.((instance.state.pageIndex as number) - 1);
+        setParams((prev) => ({
+          ...prev,
+          skip: prev.skip - prev.limit,
+        }));
+      }
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <HvControls
+        views={views}
+        callbacks={instance}
+        defaultView="card"
+        onViewChange={(evt, id) => setCurrentView(id)}
+      >
+        <HvLeftControl
+          placeholder="Search"
+          onSearch={handleSearch}
+          searchProps={{
+            inputProps: {
+              "aria-label": "Search",
+              "aria-controls": `${cardViewId} ${listViewId}`,
+            },
+          }}
+        />
+        <HvRightControl
+          values={rightControlValues}
+          sortProps={{
+            "aria-label": "Sort by",
+            "aria-controls": `${cardViewId} ${listViewId}`,
+          }}
+        />
+      </HvControls>
+
+      <HvBulkActions
+        {...bulkActionProps}
+        numTotal={data.length}
+        numSelected={instance.selectedFlatRows.length}
+        maxVisibleActions={2}
+        onSelectAll={() => bulkActionProps?.onSelectAll()}
+        onSelectAllPages={() => bulkActionProps?.onSelectAllPages()}
+        actions={actions}
+        onAction={handleAction}
+        checkboxProps={{
+          "aria-controls": `${cardViewId} ${listViewId}`,
+        }}
+      />
+
+      {currentView === "card" && (
+        <CardView id={cardViewId} instance={instance} loading={loading} />
+      )}
+
+      {currentView === "list" && (
+        <ListView id={listViewId} instance={instance} columns={columns} />
+      )}
+
+      {instance.page?.length ? (
+        <HvPagination
+          {...instance.getHvPaginationProps?.()}
+          pageSizeOptions={PAGE_OPTIONS}
+          labels={{
+            pageSizeEntryName: currentView === "card" ? "cards" : "rows",
+          }}
+        />
+      ) : undefined}
+    </div>
+  );
+};
+
+export { AssetInventory as Component };
+
+export default AssetInventory;

package/src/templates/AssetInventory/usePaginationData.ts

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useState } from "react";
+import useSWR from "swr";
+
+// --- Types ---
+
+export type DataObject = Record<string, string | number | undefined>;
+
+export interface ServerPaginationProps<T extends DataObject = DataObject> {
+  endpoint: string;
+  db: T[];
+  limit: number;
+  skip: number;
+  sort?: string;
+  order?: "desc" | "asc";
+  filter?: { id: string; value: string | number };
+  search?: string;
+}
+
+export interface PaginationData<T extends DataObject = DataObject> {
+  data: T[];
+  total: number;
+  pages: number;
+}
+
+// --- Utils ---
+
+export const delay = (ms = 500) =>
+  new Promise((resolve) => {
+    setTimeout(() => resolve("Time passed"), ms);
+  });
+
+const searchObj = (entry: DataObject, search: string) => {
+  return Object.keys(entry)
+    .filter((key) => key !== "id" && key !== "statusColor")
+    .find(
+      (key) =>
+        entry[key]?.toString().toLowerCase().search(search.toLowerCase()) !==
+        -1,
+    )?.length;
+};
+
+// --- Pagination hook ---
+
+export function useServerPagination<T extends DataObject = DataObject>({
+  endpoint,
+  db,
+  limit,
+  skip,
+  sort,
+  order = "desc",
+  filter,
+  search,
+}: ServerPaginationProps<T>) {
+  const initialState: PaginationData<T> = {
+    data: [],
+    pages: 0,
+    total: 0,
+  };
+  const [currData, setCurrData] = useState(initialState);
+  const [deleting, setDeleting] = useState(false);
+  const [allData, setAllData] = useState<T[]>(db);
+
+  const fetcher = useCallback(async () => {
+    // Loading
+    await delay(800);
+
+    const items =
+      search || filter
+        ? allData.filter((entry) => {
+            let keep = true;
+
+            if (search) {
+              keep = !!searchObj(
+                entry as Record<string, string | number>,
+                search,
+              );
+            }
+            if (filter && keep) {
+              keep =
+                entry[filter.id]?.toString().toLowerCase() ===
+                filter.value.toString().toLowerCase();
+            }
+
+            return keep;
+          })
+        : [...allData];
+
+    return {
+      data: items
+        .sort(
+          sort
+            ? (a, b) => {
+                return order === "desc"
+                  ? (b[sort] || "")
+                      .toString()
+                      .localeCompare((a[sort] || "").toString(), undefined, {
+                        numeric: true,
+                        sensitivity: "base",
+                      })
+                  : (a[sort] || "")
+                      .toString()
+                      .localeCompare((b[sort] || "").toString(), undefined, {
+                        numeric: true,
+                        sensitivity: "base",
+                      });
+              }
+            : undefined,
+        )
+        .slice(skip, skip + limit),
+      total: items.length,
+      pages: Math.ceil(items.length / limit),
+    };
+  }, [allData, filter, limit, order, search, skip, sort]);
+
+  const { data, isLoading, mutate } = useSWR<PaginationData<T>>(() => {
+    const params = new URLSearchParams({
+      skip: skip.toString(),
+      limit: limit.toString(),
+      ...(sort && { sort, order }),
+      ...(search && { search }),
+      ...(filter && { [filter.id]: filter.value }),
+    });
+
+    return `${endpoint}?${params.toString()}`;
+  }, fetcher);
+
+  // Prevents data from updating to undefined when loading (this crashes useHvData)
+  useEffect(() => {
+    if (!isLoading && data) {
+      setCurrData(data);
+    }
+  }, [isLoading, data]);
+
+  const deleteEntries = useCallback(
+    async (ids: string[]) => {
+      setDeleting(true);
+
+      setAllData((prev) =>
+        prev.filter((entry: any) => entry.id && !ids.includes(entry.id)),
+      );
+
+      const refreshedData = await fetcher();
+
+      mutate(refreshedData);
+
+      await delay(800);
+
+      setDeleting(false);
+    },
+    [fetcher, mutate],
+  );
+
+  return {
+    deleteEntries,
+    data: currData,
+    loading: isLoading || deleting,
+  };
+}

package/src/templates/Canvas/Context.tsx

@@ -0,0 +1,49 @@
+import {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+interface SelectedTable {
+  id: string;
+  label: React.ReactNode;
+}
+
+interface CanvasContextValue {
+  selectedTable: string;
+  setSelectedTable?: Dispatch<SetStateAction<string>>;
+  openedTables?: SelectedTable[];
+  setOpenedTables?: Dispatch<SetStateAction<SelectedTable[] | undefined>>;
+}
+
+const CanvasContext = createContext<CanvasContextValue>({
+  selectedTable: "none",
+});
+
+interface CanvasProviderProps {
+  children?: React.ReactNode;
+}
+
+export const CanvasProvider = ({ children }: CanvasProviderProps) => {
+  const [openedTables, setOpenedTables] = useState<SelectedTable[]>();
+  const [selectedTable, setSelectedTable] = useState<string>("none");
+
+  const value = useMemo(
+    () => ({
+      openedTables,
+      setOpenedTables,
+      selectedTable,
+      setSelectedTable,
+    }),
+    [openedTables, selectedTable],
+  );
+
+  return (
+    <CanvasContext.Provider value={value}>{children}</CanvasContext.Provider>
+  );
+};
+
+export const useCanvasContext = () => useContext(CanvasContext);