@hitachivantara/uikit-cli 6.0.1

package/src/templates/KanbanBoard/data.tsx

@@ -0,0 +1,140 @@
+import {
+  Copy,
+  Edit,
+  Magnifier,
+  Success,
+} from "@hitachivantara/uikit-react-icons";
+
+import { Column, Task } from "./types";
+
+export const columns: Column[] = [
+  {
+    id: "col1",
+    title: "Draft",
+    color: "info",
+    icon: <Edit color="info" />,
+  },
+  {
+    id: "col2",
+    title: "To Review",
+    color: "negativeStrong",
+    icon: <Copy color="negativeStrong" />,
+  },
+  {
+    id: "col3",
+    title: "In Review",
+    color: "warningStrong",
+    icon: <Magnifier color="warningStrong" />,
+  },
+  {
+    id: "col4",
+    title: "Reviewed",
+    color: "positiveStrong",
+    icon: <Success color="positiveStrong" />,
+  },
+];
+
+export const tasks: Task[] = [
+  {
+    id: "task1",
+    columnId: "col1",
+    title: "Task 1",
+    statusLevel: 1,
+  },
+  {
+    id: "task2",
+    columnId: "col1",
+    title: "Task 2",
+    statusLevel: 2,
+  },
+  {
+    id: "task3",
+    columnId: "col2",
+    title: "Task 3",
+    statusLevel: 3,
+    users: [
+      {
+        name: "Ben",
+        avatar: "https://i.imgur.com/56Eeg1g.png",
+      },
+      {
+        name: "Beatrice",
+        avatar: "https://i.imgur.com/bE7vg3N.png",
+      },
+      {
+        name: "Wayne",
+        avatar: "https://i.imgur.com/ea22egF.png",
+      },
+    ],
+  },
+  {
+    id: "task4",
+    columnId: "col2",
+    title: "Task 4",
+    statusLevel: 2,
+  },
+  {
+    id: "task5",
+    columnId: "col2",
+    title: "Task 5",
+    statusLevel: 4,
+    users: [
+      {
+        name: "Beatrice",
+        avatar: "https://i.imgur.com/bE7vg3N.png",
+      },
+      {
+        name: "Wayne",
+        avatar: "https://i.imgur.com/ea22egF.png",
+      },
+    ],
+  },
+  {
+    id: "task6",
+    columnId: "col3",
+    title: "Task 6",
+    statusLevel: 5,
+    users: [
+      {
+        name: "Ben",
+        avatar: "https://i.imgur.com/56Eeg1g.png",
+      },
+      {
+        name: "Beatrice",
+        avatar: "https://i.imgur.com/bE7vg3N.png",
+      },
+      {
+        name: "Wayne",
+        avatar: "https://i.imgur.com/ea22egF.png",
+      },
+      {
+        name: "Clara Soul",
+        avatar: "https://i.imgur.com/6sYhSb6.png",
+      },
+    ],
+  },
+  {
+    id: "task7",
+    columnId: "col4",
+    title: "Task 7",
+    statusLevel: 2,
+    users: [
+      {
+        name: "Ben",
+        avatar: "https://i.imgur.com/56Eeg1g.png",
+      },
+    ],
+  },
+  {
+    id: "task8",
+    columnId: "col4",
+    title: "Task 8",
+    statusLevel: 3,
+  },
+  {
+    id: "task9",
+    columnId: "col4",
+    title: "Task 9",
+    statusLevel: 3,
+  },
+];

package/src/templates/KanbanBoard/dependencies.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@hitachivantara/uikit-react-lab": "latest",
+    "@hitachivantara/uikit-react-pentaho": "latest"
+  }
+}

package/src/templates/KanbanBoard/index.tsx

@@ -0,0 +1,179 @@
+import { useMemo, useState } from "react";
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { arrayMove, SortableContext } from "@dnd-kit/sortable";
+
+import { ColumnContainer } from "./ColumnContainer";
+import { columns as defaultColumns, tasks as defaultTasks } from "./data";
+import classes from "./styles";
+import { TaskCard } from "./TaskCard";
+import { Column, Task } from "./types";
+
+const KanbanBoard = () => {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 2,
+      },
+    }),
+  );
+
+  const [tasks, setTasks] = useState<Task[]>(defaultTasks);
+  const [columns, setColumns] = useState<Column[]>(defaultColumns);
+  const [activeColumn, setActiveColumn] = useState<Column | null>(null);
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [creatingTask, setCreatingTask] = useState<boolean>(false);
+
+  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
+
+  const onDragStart = (event: DragStartEvent) => {
+    if (event.active.data.current?.type === "Column") {
+      setActiveColumn(event.active.data.current.column);
+    }
+
+    if (event.active.data.current?.type === "Task") {
+      setActiveTask(event.active.data.current.task);
+    }
+  };
+
+  const onDragEnd = (event: DragEndEvent) => {
+    setActiveColumn(null);
+    setActiveTask(null);
+
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id;
+    const overId = over.id;
+
+    if (activeId === overId) return;
+
+    const isActiveAColumn = active.data.current?.type === "Column";
+    if (!isActiveAColumn) return;
+
+    setColumns((cs) => {
+      const activeColumnIndex = cs.findIndex((col) => col.id === activeId);
+      const overColumnIndex = cs.findIndex((col) => col.id === overId);
+
+      return arrayMove(cs, activeColumnIndex, overColumnIndex);
+    });
+  };
+
+  const onDragOver = (event: DragOverEvent) => {
+    const { active, over } = event;
+    console.log(active, over);
+    if (!over) return;
+
+    const activeId = active.id;
+    const overId = over.id;
+
+    if (activeId === overId) return;
+
+    const isActiveATask = active.data.current?.type === "Task";
+    const isOverATask = over.data.current?.type === "Task";
+
+    if (!isActiveATask) return;
+
+    // Dropping a Task over another Task
+    if (isActiveATask && isOverATask) {
+      setTasks((ts) => {
+        const activeIndex = ts.findIndex((t) => t.id === activeId);
+        const overIndex = ts.findIndex((t) => t.id === overId);
+
+        if (ts[activeIndex].columnId !== ts[overIndex].columnId) {
+          ts[activeIndex].columnId = ts[overIndex].columnId;
+          return arrayMove(ts, activeIndex, overIndex - 1);
+        }
+
+        return arrayMove(ts, activeIndex, overIndex);
+      });
+    }
+
+    const isOverAColumn = over.data.current?.type === "Column";
+
+    // Dropping a Task over a Column
+    if (isActiveATask && isOverAColumn) {
+      setTasks((ts) => {
+        const activeIndex = ts.findIndex((t) => t.id === activeId);
+
+        ts[activeIndex].columnId = overId.toString();
+        return arrayMove(ts, activeIndex, activeIndex);
+      });
+    }
+  };
+
+  const addTask = async (columnId: string) => {
+    try {
+      setCreatingTask(true);
+
+      const highestId = tasks.reduce((acc, task) => {
+        const taskId = Number.parseInt(task.id.replace("task", ""), 10);
+        return taskId > acc ? taskId : acc;
+      }, 0);
+
+      setTasks((ts) => [
+        ...ts,
+        {
+          id: `task${highestId + 1}`,
+          columnId,
+          title: `Task ${highestId + 1}`,
+        },
+      ]);
+    } finally {
+      setCreatingTask(false);
+    }
+  };
+
+  const deleteTask = (taskId: string) => {
+    const newTasks = tasks.filter((task) => task.id !== taskId);
+    setTasks(newTasks);
+  };
+
+  return (
+    <div className={classes.root}>
+      <DndContext
+        sensors={sensors}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDragOver={onDragOver}
+      >
+        <div className={classes.board}>
+          <SortableContext items={columnsId}>
+            {columns.map((column) => (
+              <ColumnContainer
+                key={column.id}
+                column={column}
+                tasks={tasks.filter((task) => task.columnId === column.id)}
+                addTask={addTask}
+                deleteTask={deleteTask}
+                addEnabled={!creatingTask}
+              />
+            ))}
+          </SortableContext>
+        </div>
+
+        <DragOverlay>
+          {activeColumn && (
+            <ColumnContainer
+              column={activeColumn}
+              tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
+            />
+          )}
+          {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} />}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  );
+};
+
+export { KanbanBoard as Component };
+
+export default KanbanBoard;

package/src/templates/KanbanBoard/styles.tsx

@@ -0,0 +1,76 @@
+import { css } from "@emotion/css";
+import { theme } from "@hitachivantara/uikit-react-core";
+
+const styles = {
+  root: css({
+    marginTop: theme.space.md,
+  }),
+  board: css({
+    display: "flex",
+    gap: theme.space.sm,
+  }),
+  columnContainer: css({
+    // This is needed because we need to have a set height on the column container so that
+    // dnd-kit will work. In some edge cases (when content of the column is a single item with
+    // a certain height) drag between columns wouldn't work.
+    height: 100,
+    width: "100%",
+  }),
+  column: css({
+    flex: 1,
+    padding: theme.spacing("sm", "xs"),
+    borderRadius: theme.radii.large,
+    backgroundColor: theme.colors.primaryDimmed,
+  }),
+  columnHeader: css({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: theme.space.lg,
+    padding: theme.spacing(0, "xs"),
+    "&:hover": {
+      cursor: "grab",
+    },
+  }),
+  columnTitle: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xs,
+  }),
+  columnCards: css({}),
+  count: css({
+    borderRadius: theme.radii.full,
+    width: 20,
+    height: 20,
+    backgroundColor: theme.colors.border,
+    display: "grid",
+    placeItems: "center",
+  }),
+  card: css({
+    borderRadius: theme.radii.round,
+  }),
+  cardHeader: css({
+    "&:hover": {
+      cursor: "grab",
+    },
+    backgroundColor: theme.colors.bgContainer,
+    zIndex: 200,
+    borderRadius: `${theme.radii.round} ${theme.radii.round} 0 0`,
+  }),
+  cardDeleteIcon: css({
+    position: "absolute",
+    top: theme.space.xs,
+    right: theme.space.xs,
+  }),
+  cardSemanticBar: css({
+    height: 20,
+    borderRadius: theme.radii.round,
+    top: -2,
+  }),
+  cardActions: css({
+    borderTop: "none",
+  }),
+};
+
+export default styles;

package/src/templates/KanbanBoard/types.ts

@@ -0,0 +1,21 @@
+import { HvColor } from "@hitachivantara/uikit-react-core";
+
+export type Column = {
+  id: string;
+  title: string;
+  color?: HvColor;
+  icon?: React.ReactNode;
+};
+
+export type User = {
+  name: string;
+  avatar: string;
+};
+
+export type Task = {
+  id: string;
+  columnId: Column["id"];
+  title: string;
+  users?: User[];
+  statusLevel?: number;
+};

package/src/templates/ListView/Indicator.tsx

@@ -0,0 +1,42 @@
+import ReactChart from "react-google-charts";
+
+import { TrendData } from "./data";
+
+interface IndicatorProps {
+  data?: TrendData;
+  variation?: string;
+}
+
+export const Indicator = ({ data, variation }: IndicatorProps) => (
+  <div style={{ pointerEvents: "none", marginRight: -4 }}>
+    <ReactChart
+      width="50px"
+      height="32px"
+      chartType="AreaChart"
+      loader={<div>Loading Chart</div>}
+      data={data}
+      options={{
+        legend: "none",
+        colors: variation === "up" ? ["green"] : ["red"],
+        tooltip: {
+          trigger: "none",
+        },
+        hAxis: {
+          minValue: 0,
+          maxValue: 10,
+          gridlines: {
+            color: "transparent",
+          },
+          baselineColor: "transparent",
+        },
+        backgroundColor: "transparent",
+        vAxis: {
+          gridlines: {
+            color: "transparent",
+          },
+          baselineColor: "transparent",
+        },
+      }}
+    />
+  </div>
+);

package/src/templates/ListView/Kpi.tsx

@@ -0,0 +1,120 @@
+import { css, cx } from "@emotion/css";
+import {
+  HvCard,
+  HvCardProps,
+  HvLoading,
+  HvTableInstance,
+  HvTypography,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+import { BottomXS, TopXS } from "@hitachivantara/uikit-react-icons";
+
+import { getStatusIcon, ListViewEntry, TrendData } from "./data";
+import { Indicator } from "./Indicator";
+
+const classes = {
+  container: css({
+    padding: theme.space.sm,
+  }),
+  card: css({
+    cursor: "pointer",
+    width: "100%",
+    padding: 0,
+    textAlign: "left",
+  }),
+  title: css({
+    margin: `${theme.space.xs} 0`,
+  }),
+  content: css({
+    display: "flex",
+    alignItems: "center",
+  }),
+  variation: css({
+    display: "flex",
+    flex: 1,
+    justifyContent: "flex-end",
+    alignItems: "center",
+  }),
+  selected: css({
+    outline: `1px solid ${theme.colors.borderDisabled}`,
+  }),
+  loading: css({
+    margin: `${theme.space.xs} 0`,
+  }),
+};
+
+interface KpiProps {
+  title: string;
+  count?: number;
+  color: HvCardProps["statusColor"];
+  variation?: string;
+  status: number;
+  instance: HvTableInstance<ListViewEntry, string>;
+  kpiSelection: number | undefined;
+  setKpiSelection: (value: number | undefined) => void;
+  trendData?: TrendData;
+  loading?: boolean;
+}
+
+export const Kpi = ({
+  title,
+  count,
+  color,
+  variation,
+  status,
+  instance,
+  kpiSelection,
+  trendData,
+  loading,
+  setKpiSelection,
+}: KpiProps) => {
+  const handleKpiClick = () => {
+    setKpiSelection(status);
+    if (status !== kpiSelection) {
+      instance?.setFilter?.("status", `${status}`);
+    } else {
+      instance?.setFilter?.("status", "");
+      setKpiSelection(undefined);
+    }
+  };
+
+  return (
+    <HvCard
+      id={`kpi${status}`}
+      selectable
+      selected={status === kpiSelection}
+      bgcolor="bgContainer"
+      statusColor={color}
+      onClick={handleKpiClick}
+      className={cx(classes.card, {
+        [classes.selected]: status === kpiSelection,
+      })}
+      icon={getStatusIcon(status)}
+      tabIndex={0}
+    >
+      <div className={classes.container}>
+        <HvTypography variant="label">{title}</HvTypography>
+        {loading ? (
+          <HvLoading className={classes.loading} small />
+        ) : (
+          <div className={classes.content}>
+            <HvTypography variant="title2" className={classes.title}>
+              {count}
+            </HvTypography>
+            <div className={classes.variation}>
+              <Indicator variation={variation} data={trendData} />
+              {variation === "up" ? (
+                <TopXS title="Up" color="positive" />
+              ) : (
+                <BottomXS title="Up" color="negative" />
+              )}
+              <div>
+                <HvTypography variant="caption1">vs last 24h.</HvTypography>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </HvCard>
+  );
+};

package/src/templates/ListView/Table.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+import {
+  HvTable,
+  HvTableBody,
+  HvTableCell,
+  HvTableContainer,
+  HvTableHead,
+  HvTableHeader,
+  HvTableInstance,
+  HvTableRow,
+} from "@hitachivantara/uikit-react-core";
+
+import { getColumns, ListViewEntry } from "./data";
+
+interface TableProps {
+  instance: HvTableInstance<ListViewEntry, string>;
+  id?: string;
+}
+
+export const Table = ({ instance, id }: TableProps) => {
+  const columns = useMemo(() => getColumns(), []);
+
+  return (
+    <HvTableContainer style={{ padding: "2px" }} id={id}>
+      <HvTable variant="listrow" {...instance.getTableProps()}>
+        <HvTableHead>
+          <HvTableRow>
+            <HvTableCell variant="listcheckbox" />
+            {columns.map((col) => (
+              <HvTableHeader key={col.Header}>{col.Header}</HvTableHeader>
+            ))}
+          </HvTableRow>
+        </HvTableHead>
+        <HvTableBody withNavigation {...instance.getTableBodyProps()}>
+          {instance.page.map((row) => {
+            instance.prepareRow(row);
+            const { key, ...rowProps } = row.getRowProps();
+            return (
+              <HvTableRow key={key} {...rowProps}>
+                {row.cells.map((cell) => {
+                  const { key: cellKey, ...cellProps } = cell.getCellProps();
+                  return (
+                    <HvTableCell key={cellKey} {...cellProps}>
+                      {cell.render("Cell")}
+                    </HvTableCell>
+                  );
+                })}
+              </HvTableRow>
+            );
+          })}
+        </HvTableBody>
+      </HvTable>
+    </HvTableContainer>
+  );
+};