@hitachivantara/uikit-cli 6.0.1

package/src/templates/ListView/data.tsx

@@ -0,0 +1,179 @@
+import useSWR from "swr";
+import {
+  HvBulkActionsProps,
+  HvColor,
+  HvTableColumnConfig,
+  HvTooltip,
+} from "@hitachivantara/uikit-react-core";
+import {
+  IconType,
+  Level0Good,
+  Level1,
+  Level2Average,
+  Level3Bad,
+  Refresh,
+} from "@hitachivantara/uikit-react-icons";
+
+import {
+  DataObject,
+  delay,
+  ServerPaginationProps,
+  useServerPagination,
+} from "./usePaginationData";
+
+// --- Table data utils ---
+
+export interface ListViewEntry extends DataObject {
+  id?: string;
+  name?: string;
+  description?: string;
+  serverId?: number;
+  created?: string;
+  build?: string;
+  status?: number;
+}
+
+const TooltipIcon = ({
+  title,
+  Icon,
+  color,
+}: {
+  title: string;
+  Icon: IconType;
+  color: HvColor;
+}) => (
+  <HvTooltip title={title}>
+    <Icon iconSize="XS" color={color} />
+  </HvTooltip>
+);
+
+export const getStatusIcon = (status?: ListViewEntry["status"]) => {
+  switch (status) {
+    case 0:
+      return <TooltipIcon title="Success" Icon={Level0Good} color="positive" />;
+    case 1:
+      return <TooltipIcon title="Error" Icon={Level3Bad} color="negative" />;
+    case 2:
+      return <TooltipIcon title="Open" Icon={Level2Average} color="warning" />;
+    default:
+      return <TooltipIcon title="Unassigned" Icon={Level1} color="info" />;
+  }
+};
+
+export const getColumns = (): HvTableColumnConfig<ListViewEntry, string>[] => [
+  {
+    Header: "Status",
+    accessor: "status",
+    style: { width: 40 },
+    Cell: ({ value }: { value: any }) => getStatusIcon(value),
+  },
+  { Header: "Name", accessor: "name", style: { minWidth: 200 } },
+  { Header: "Description", accessor: "description", style: { minWidth: 200 } },
+  { Header: "Server ID", accessor: "serverId", style: { width: 120 } },
+  { Header: "Created", accessor: "created" },
+  { Header: "Build", accessor: "build", style: { width: 120 } },
+];
+
+export const actions: HvBulkActionsProps["actions"] = [
+  { id: "refresh", label: "Refresh", icon: <Refresh /> },
+];
+
+const entries = [
+  { name: "Previous", description: "Clean Data Logs" },
+  { name: "Home", description: "Review Log" },
+  { name: "Carriage", description: "Deploy Cloud Run" },
+  { name: "Black", description: "Clean Session" },
+  { name: "Forward", description: "Update Build" },
+];
+
+const getDate = (i: number): string => {
+  return new Date(2018, 4, i * 3).toISOString().slice(0, 10);
+};
+
+const getServerID = (i: number): number => Math.floor(100000000 + 17 * i);
+
+const getOption = <T,>(opts: T[], i: number) => opts[i % opts.length];
+
+export const createEntry = (i: number): ListViewEntry => {
+  const entry = getOption(entries, i);
+  const serverId = getServerID(i);
+
+  return {
+    id: `${i + 1}`,
+    name: entry.name,
+    description: entry.description,
+    serverId,
+    created: getDate(i),
+    build: btoa(String(serverId)).slice(5),
+    status: i % 4,
+  };
+};
+
+// --- Trend data utils ---
+
+export type TrendData = (string | number)[][];
+
+export const getTrendData = (variation: string): TrendData => {
+  if (variation === "up") {
+    return [
+      ["Count", "Requests"],
+      ["1", 265],
+      ["2", 734],
+      ["3", 1420],
+      ["4", 2780],
+    ];
+  }
+
+  return [
+    ["Count", "Requests"],
+    ["1", 2780],
+    ["2", 1420],
+    ["3", 734],
+    ["4", 265],
+  ];
+};
+
+// --- Data & Endpoints ---
+const db = [...Array(20).keys()].map(createEntry);
+
+const countByStatus = (status: number) =>
+  db.filter((entry) => entry.status === status).length || 0;
+
+const requestsSummary = {
+  success: {
+    count: countByStatus(0),
+    data: getTrendData("up"),
+    variation: "up",
+  },
+  error: {
+    count: countByStatus(1),
+    data: getTrendData("down"),
+    variation: "down",
+  },
+  open: {
+    count: countByStatus(2),
+    data: getTrendData("down"),
+    variation: "down",
+  },
+  unassign: {
+    count: countByStatus(3),
+    data: getTrendData("up"),
+    variation: "up",
+  },
+};
+
+export interface PaginationDataProps
+  extends Omit<ServerPaginationProps<ListViewEntry>, "endpoint" | "db"> {}
+
+export const usePaginationData = (props: PaginationDataProps) => {
+  return useServerPagination({ endpoint: "/requests", db, ...props });
+};
+
+export const useSummaryData = () => {
+  return useSWR("/requests/summary", async () => {
+    // Loading
+    await delay(800);
+
+    return requestsSummary;
+  });
+};

package/src/templates/ListView/dependencies.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-google-charts": "^4.0.0"
+  }
+}

package/src/templates/ListView/index.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useId, useMemo, useState } from "react";
+import { css } from "@emotion/css";
+import {
+  HvActionsGenericProps,
+  HvBulkActions,
+  HvButton,
+  HvControls,
+  HvGlobalActions,
+  HvGrid,
+  HvGridProps,
+  HvLeftControl,
+  HvLeftControlProps,
+  HvLoadingContainer,
+  HvPagination,
+  HvRightControl,
+  theme,
+  useHvBulkActions,
+  useHvData,
+  useHvFilters,
+  useHvGlobalFilter,
+  useHvPagination,
+  useHvRowSelection,
+  useHvSortBy,
+} from "@hitachivantara/uikit-react-core";
+
+import {
+  actions,
+  getColumns,
+  ListViewEntry,
+  PaginationDataProps,
+  usePaginationData,
+  useSummaryData,
+} from "./data";
+import { Kpi } from "./Kpi";
+import { Table } from "./Table";
+
+const classes = {
+  paddingTop: css({
+    paddingTop: theme.space.md,
+  }),
+  marginTop: css({
+    marginTop: theme.space.md,
+  }),
+};
+
+const INIT_PAGE_SIZE = 5;
+
+const ListView = () => {
+  const breakpoints: HvGridProps = { xl: 3, lg: 3, md: 3, sm: 6, xs: 12 };
+  const listId = useId();
+
+  const [kpiSelection, setKpiSelection] = useState<number | undefined>();
+
+  const [params, setParams] = useState<PaginationDataProps>({
+    limit: INIT_PAGE_SIZE,
+    skip: 0,
+  });
+
+  const {
+    data: { pages, data },
+    loading,
+  } = usePaginationData(params);
+
+  const { data: indicatorData, isLoading: indicatorLoading } = useSummaryData();
+
+  const columns = useMemo(() => getColumns(), []);
+
+  const instance = useHvData<ListViewEntry, string>(
+    {
+      data,
+      columns,
+      manualPagination: true,
+      autoResetPage: false,
+      manualFilters: true,
+      autoResetFilters: true,
+      pageCount: pages,
+      initialState: { pageSize: INIT_PAGE_SIZE },
+    },
+    useHvGlobalFilter,
+    useHvFilters,
+    useHvSortBy,
+    useHvPagination,
+    useHvRowSelection,
+    useHvBulkActions,
+  );
+
+  useEffect(() => {
+    const { pageSize = INIT_PAGE_SIZE, pageIndex = 0 } = instance.state;
+
+    setParams((prev) => ({
+      ...prev,
+      limit: pageSize,
+      skip: pageSize * pageIndex,
+    }));
+  }, [instance.state]);
+
+  useEffect(() => {
+    instance.gotoPage?.(0);
+    setParams((prev) => ({
+      ...prev,
+      skip: 0,
+      filter:
+        instance.state.filters && instance.state.filters?.length > 0
+          ? instance.state.filters[0]
+          : undefined,
+    }));
+  }, [instance, instance.state.filters]);
+
+  const bulkActionProps = instance.getHvBulkActionsProps?.();
+
+  const handleAction: HvActionsGenericProps["onAction"] = (event, action) => {
+    if (action.id === "refresh") {
+      instance.gotoPage?.(0);
+      setKpiSelection(undefined);
+      setParams((prev) => ({
+        ...prev,
+        skip: 0,
+        filter: undefined,
+      }));
+    }
+  };
+
+  const handleSearch: HvLeftControlProps["onSearch"] = (e, value) => {
+    instance.gotoPage?.(0);
+    setParams((prev) => ({
+      ...prev,
+      skip: 0,
+      search: value,
+    }));
+  };
+
+  return (
+    <>
+      <HvGlobalActions title="Requests" backButton={false}>
+        <HvButton variant="primary">Request Server</HvButton>
+      </HvGlobalActions>
+
+      <HvGrid container className={classes.paddingTop}>
+        <HvGrid item {...breakpoints}>
+          <Kpi
+            title="Success Requests"
+            color="positive"
+            status={0}
+            instance={instance}
+            kpiSelection={kpiSelection}
+            setKpiSelection={setKpiSelection}
+            loading={indicatorLoading}
+            count={indicatorData?.success.count}
+            variation={indicatorData?.success.variation}
+            trendData={indicatorData?.success.data}
+          />
+        </HvGrid>
+        <HvGrid item {...breakpoints}>
+          <Kpi
+            title="Error Requests"
+            color="negative"
+            status={1}
+            instance={instance}
+            kpiSelection={kpiSelection}
+            setKpiSelection={setKpiSelection}
+            loading={indicatorLoading}
+            count={indicatorData?.error.count}
+            variation={indicatorData?.error.variation}
+            trendData={indicatorData?.error.data}
+          />
+        </HvGrid>
+        <HvGrid item {...breakpoints}>
+          <Kpi
+            title="Open Requests"
+            color="warning"
+            status={2}
+            instance={instance}
+            kpiSelection={kpiSelection}
+            setKpiSelection={setKpiSelection}
+            loading={indicatorLoading}
+            count={indicatorData?.open.count}
+            variation={indicatorData?.open.variation}
+            trendData={indicatorData?.open.data}
+          />
+        </HvGrid>
+        <HvGrid item {...breakpoints}>
+          <Kpi
+            title="Unassigned Requests"
+            color="info"
+            status={3}
+            instance={instance}
+            kpiSelection={kpiSelection}
+            setKpiSelection={setKpiSelection}
+            loading={indicatorLoading}
+            count={indicatorData?.unassign.count}
+            variation={indicatorData?.unassign.variation}
+            trendData={indicatorData?.unassign.data}
+          />
+        </HvGrid>
+      </HvGrid>
+
+      <HvControls
+        className={classes.paddingTop}
+        defaultView="card"
+        callbacks={instance}
+      >
+        <HvLeftControl
+          placeholder="Search"
+          onSearch={handleSearch}
+          searchProps={{
+            inputProps: {
+              "aria-label": "Search",
+              "aria-controls": listId,
+            },
+          }}
+        />
+        <HvRightControl hideSortBy />
+      </HvControls>
+
+      <HvBulkActions
+        className={classes.marginTop}
+        {...bulkActionProps}
+        numTotal={data.length}
+        numSelected={instance.selectedFlatRows.length}
+        maxVisibleActions={2}
+        onSelectAll={() => bulkActionProps?.onSelectAll()}
+        onSelectAllPages={() => bulkActionProps?.onSelectAllPages()}
+        actions={actions}
+        actionsDisabled={false}
+        onAction={handleAction}
+        checkboxProps={{
+          "aria-controls": listId,
+        }}
+      />
+
+      <HvLoadingContainer hidden={!loading}>
+        <div className={classes.marginTop}>
+          <Table instance={instance} id={listId} />
+          {instance.page?.length > 1 && (
+            <HvPagination {...instance.getHvPaginationProps?.()} />
+          )}
+        </div>
+      </HvLoadingContainer>
+    </>
+  );
+};
+
+export { ListView as Component };
+
+export default ListView;

package/src/templates/ListView/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/Welcome/index.tsx

@@ -0,0 +1,101 @@
+import { css } from "@emotion/css";
+import {
+  HvGrid,
+  HvInput,
+  HvTypography,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import { Heart, Palette } from "@hitachivantara/uikit-react-icons";
+
+const classes = {
+  root: css({
+    height: "100%",
+    padding: theme.space.xl,
+    background: `linear-gradient(70deg, ${theme.colors.bgPage} 55%, transparent 55%), linear-gradient(180deg, ${theme.colors.primary}, #000)`,
+  }),
+  glossaryContainer: css({
+    margin: theme.spacing("sm", 0),
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space.xs,
+  }),
+  imageContainer: css({
+    display: "flex",
+    alignItems: "center",
+
+    img: { maxHeight: "450px" },
+  }),
+};
+
+const Welcome = () => {
+  return (
+    <div className={classes.root}>
+      <HvGrid container>
+        <HvGrid item xs={6}>
+          <HvGrid container>
+            <HvGrid item xs={8}>
+              <HvTypography variant="title1">
+                Welcome to the NEXT UI Kit
+              </HvTypography>
+            </HvGrid>
+            <HvGrid item xs={8}>
+              <HvTypography variant="label">
+                The NEXT UI Kit is a composable and accessible component library
+                that gives you the foundation to build your NEXT application
+                faster and consistently.
+              </HvTypography>
+            </HvGrid>
+            <HvGrid item xs={8}>
+              <HvInput type="search" placeholder="What are you looking for?" />
+            </HvGrid>
+            <HvGrid item xs={6}>
+              <div className={classes.glossaryContainer}>
+                <Palette iconSize="M" />
+                <HvTypography variant="title4" component="p">
+                  Themeable
+                </HvTypography>
+                <HvTypography>
+                  Use available Design System or customize it to match your
+                  design needs.
+                </HvTypography>
+              </div>
+            </HvGrid>
+            <HvGrid item xs={6}>
+              <div className={classes.glossaryContainer}>
+                <Heart iconSize="M" />
+                <HvTypography variant="title4" component="p">
+                  Community
+                </HvTypography>
+                <HvTypography>
+                  We welcome all feedback in order to produce the best
+                  experience for our users.
+                </HvTypography>
+              </div>
+            </HvGrid>
+          </HvGrid>
+        </HvGrid>
+        <HvGrid item xs={6} display="flex">
+          <div className={classes.imageContainer}>
+            <img
+              alt="Monitor showing a dashboard built with UI Kit components"
+              src="https://lumada-design.github.io/assets/template-preview.webp"
+            />
+          </div>
+        </HvGrid>
+        <HvGrid item xs={12}>
+          <HvTypography
+            link
+            component="a"
+            href="https://pentaho.github.io/uikit-docs/master/"
+          >
+            More details
+          </HvTypography>
+        </HvGrid>
+      </HvGrid>
+    </div>
+  );
+};
+
+export { Welcome as Component };
+
+export default Welcome;