@hitachivantara/uikit-cli 6.0.1

package/src/templates/DetailsView/data.ts

@@ -0,0 +1,67 @@
+import useSWR from "swr";
+
+import {
+  delay,
+  ServerPaginationProps,
+  useServerPagination,
+} from "./usePaginationData";
+import { createEntry, DetailsViewEntry } from "./utils";
+
+// --- Data ---
+
+const TOTAL = 10;
+
+const db = [...Array(TOTAL).keys()].map(createEntry);
+
+const model = {
+  description: "Model created from the example Jupyter Notebook",
+  status: "Critical",
+  severity: "Medium",
+  tags: ["test", "note"],
+  project: "Wine Quality",
+  progress: 0.87,
+  risk: 0.2,
+  asc: "Failure Prediction",
+  createdAt: "2022-05-24 14:32:50",
+  modifiedAt: "2022-05-24 14:32:50",
+  imageUrl: "https://i.imgur.com/5EW6x5r.jpg",
+  deploys: {
+    summary: [
+      { id: 1, title: "Success Requests", count: 4, diff: 2.02 },
+      { id: 2, title: "Error Requests", count: 2, diff: -1.63 },
+      { id: 3, title: "Open Requests", count: 12, diff: 1.84 },
+    ],
+    data: [
+      { id: 2, title: "Update Build", value: "2020/12/1" },
+      { id: 3, title: "Clean Data Logs", value: "2018/5/3" },
+      { id: 6, title: "Build", value: "46uYmU" },
+    ],
+  },
+};
+
+export type ModelDetails = typeof model;
+
+// #region Endpoints
+export interface PaginationDataProps
+  extends Omit<ServerPaginationProps<DetailsViewEntry>, "endpoint" | "db"> {
+  id: string;
+}
+
+export const usePaginationData = (props: PaginationDataProps) => {
+  const endpoint = `/model/${props.id}/events`;
+  return useServerPagination({ endpoint, db, ...props });
+};
+
+export const useModelData = () => {
+  return useSWR(
+    "model",
+    async () => {
+      // Loading
+      await delay(800);
+
+      return model;
+    },
+    { suspense: true },
+  );
+};
+// #endregion

package/src/templates/DetailsView/index.tsx

@@ -0,0 +1,102 @@
+import { ElementType, ReactNode, Suspense, useState } from "react";
+import { css } from "@emotion/css";
+import {
+  HvButton,
+  HvGlobalActions,
+  HvGlobalActionsProps,
+  HvGrid,
+  HvGridProps,
+  HvLoading,
+  theme,
+} from "@hitachivantara/uikit-react-core";
+
+import { KPIs } from "./KPIs";
+import { Properties } from "./Properties";
+import { Table } from "./Table";
+
+const MODEL_ID = "123";
+
+interface SectionProps extends HvGridProps {
+  variant?: HvGlobalActionsProps["variant"];
+  actions?: ReactNode;
+  component?: ElementType;
+}
+
+const Section = ({
+  title,
+  variant = "section",
+  component = "section",
+  actions,
+  ...others
+}: SectionProps) => (
+  <>
+    {title && (
+      <HvGlobalActions variant={variant} title={title}>
+        {actions}
+      </HvGlobalActions>
+    )}
+    <Suspense fallback={<HvLoading className={css({ minHeight: 200 })} />}>
+      <HvGrid
+        container
+        component={component}
+        className={css({
+          marginTop: 0, // avoid collapse
+          marginBottom: theme.space.md,
+        })}
+        {...others}
+      />
+    </Suspense>
+  </>
+);
+
+const DetailsView = () => {
+  const [editing, setEditing] = useState(false);
+
+  const actions = editing ? (
+    <span>
+      <HvButton type="submit" form="properties" variant="primaryGhost">
+        Save
+      </HvButton>
+      <HvButton variant="secondaryGhost" onClick={() => setEditing(false)}>
+        Cancel
+      </HvButton>
+    </span>
+  ) : (
+    <HvButton variant="primaryGhost" onClick={() => setEditing(true)}>
+      Edit
+    </HvButton>
+  );
+
+  return (
+    <>
+      <Section title="Asset Details" variant="global">
+        <KPIs />
+      </Section>
+
+      <Section
+        id="properties"
+        title="Asset Properties"
+        actions={actions}
+        component={editing ? "form" : "section"}
+        onSubmit={(evt) => {
+          evt.preventDefault();
+          const formData = new FormData(evt.currentTarget as any);
+          console.log(Object.fromEntries(formData.entries()));
+          setEditing(false);
+        }}
+      >
+        <Properties editMode={editing} />
+      </Section>
+
+      <Section title="Events">
+        <HvGrid item xs={12}>
+          <Table modelId={MODEL_ID} />
+        </HvGrid>
+      </Section>
+    </>
+  );
+};
+
+export { DetailsView as Component };
+
+export default DetailsView;

package/src/templates/DetailsView/usePaginationData.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useState } from "react";
+import useSWR from "swr";
+
+// --- Types ---
+
+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, 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/DetailsView/utils.ts

@@ -0,0 +1,51 @@
+import { HvTableColumnConfig } from "@hitachivantara/uikit-react-core";
+
+// --- Table data utils ---
+
+export type DetailsViewEntry = {
+  id: string;
+  name: string;
+  eventType: string;
+  status: string;
+  severity: string;
+  priority: string;
+  time: string;
+  temperature: string;
+};
+
+export const getColumns = (): HvTableColumnConfig<
+  DetailsViewEntry,
+  string
+>[] => [
+  { Header: "Title", accessor: "name", style: { minWidth: 120 } },
+  { Header: "Event Type", accessor: "eventType", style: { minWidth: 100 } },
+  { Header: "Status", accessor: "status", style: { width: 120 } },
+  { Header: "Severity", accessor: "severity" },
+  { Header: "Priority", accessor: "priority" },
+  { Header: "Time", accessor: "time" },
+  { Header: "Temperature", accessor: "temperature" },
+];
+
+const getOption = (opts: string[], 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) =>
+  (i % 2 > 0 && "High") || (i % 2 < 0 && "Medium") || "Low";
+
+export const createEntry = (i: number): DetailsViewEntry => {
+  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}`,
+  };
+};

package/src/templates/Form/index.tsx

@@ -0,0 +1,107 @@
+import {
+  HvButton,
+  HvCheckBox,
+  HvDatePicker,
+  HvGrid,
+  HvInput,
+  HvOption,
+  HvRadio,
+  HvRadioGroup,
+  HvSelect,
+  HvTextArea,
+  HvTimePicker,
+} from "@hitachivantara/uikit-react-core";
+import { Phone } from "@hitachivantara/uikit-react-icons";
+
+const countries = [
+  { id: "pt", label: "Portugal" },
+  { id: "sp", label: "Spain" },
+  { id: "fr", label: "France" },
+  { id: "de", label: "Germany" },
+  { id: "us", label: "United States" },
+];
+
+const Form = () => (
+  <form
+    autoComplete="on"
+    onSubmit={(event) => {
+      event.preventDefault();
+      const formData = new FormData(event.currentTarget);
+      alert(JSON.stringify(Object.fromEntries(formData), null, 2));
+    }}
+  >
+    <HvGrid container maxWidth="md" rowSpacing="xs">
+      <HvGrid item xs={12} sm={6}>
+        <HvInput required name="name" label="Full Name" />
+      </HvGrid>
+      <HvGrid item xs={12} sm={6}>
+        <HvInput required type="email" name="email" label="Email" />
+      </HvGrid>
+      <HvGrid item xs={12} sm={6}>
+        <HvInput name="street-address" label="Address" />
+      </HvGrid>
+      <HvGrid item xs={12} sm={6}>
+        <HvSelect
+          required
+          name="country"
+          label="Country"
+          statusMessage="Country is required"
+        >
+          {countries.map(({ id, label }) => (
+            <HvOption key={id} value={id}>
+              {label}
+            </HvOption>
+          ))}
+        </HvSelect>
+      </HvGrid>
+      <HvGrid item xs={12} sm={6}>
+        <HvInput name="tel" label="Phone number" endAdornment={<Phone />} />
+      </HvGrid>
+      <HvGrid item xs={12} sm={6}>
+        <HvInput type="password" name="password" label="Password" />
+      </HvGrid>
+      <HvGrid item xs={12} component="hr" />
+      <HvGrid item xs={12} sm={6}>
+        <HvDatePicker name="bday" label="Birthday" placeholder="Select date" />
+      </HvGrid>
+      <HvGrid item xs={12} sm={6}>
+        <HvTimePicker name="startTime" label="Start time" />
+      </HvGrid>
+      <HvGrid item xs={12} component="hr" />
+      <HvGrid item xs={12}>
+        <HvTextArea
+          required
+          name="description"
+          description="Write a short description"
+          label="Description"
+          rows={3}
+          inputProps={{ minLength: 16, maxLength: 128 }}
+          minCharQuantity={16}
+          maxCharQuantity={128}
+        />
+      </HvGrid>
+      <HvGrid item xs={12}>
+        <HvRadioGroup required name="sex" label="Sex" orientation="horizontal">
+          <HvRadio value="male" label="Male" />
+          <HvRadio value="female" label="Female" />
+          <HvRadio value="other" label="Other" />
+        </HvRadioGroup>
+      </HvGrid>
+      <HvGrid item xs={12}>
+        <HvCheckBox
+          defaultChecked
+          name="subscribe"
+          label="Subscribe to newsletter"
+          value="yes"
+        />
+      </HvGrid>
+      <HvGrid item xs={12}>
+        <HvButton type="submit">Submit</HvButton>
+      </HvGrid>
+    </HvGrid>
+  </form>
+);
+
+export { Form as Component };
+
+export default Form;

package/src/templates/KanbanBoard/ColumnContainer.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from "react";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  HvIconButton,
+  HvStack,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+import { Add } from "@hitachivantara/uikit-react-icons";
+
+import classes from "./styles";
+import { TaskCard } from "./TaskCard";
+import { Column, Task } from "./types";
+
+interface ColumnProps {
+  column: Column;
+  tasks?: Task[];
+  addTask?: (columnId: string) => void;
+  deleteTask?: (taskId: string) => void;
+  addEnabled?: boolean;
+}
+
+export const ColumnContainer = ({
+  column,
+  tasks,
+  addTask,
+  deleteTask,
+  addEnabled = true,
+}: ColumnProps) => {
+  const tasksIds = useMemo(() => tasks?.map((task) => task.id), [tasks]) || [];
+
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: column.id, data: { type: "Column", column } });
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        ...style,
+        ...(isDragging && {
+          opacity: 0.2,
+        }),
+      }}
+      className={classes.columnContainer}
+    >
+      <div className={classes.column}>
+        <div className={classes.columnHeader} {...attributes} {...listeners}>
+          <div className={classes.columnTitle}>
+            {column.icon}
+            <HvTypography variant="title3">{column.title}</HvTypography>
+            <div className={classes.count}>{tasks?.length}</div>
+          </div>
+          <HvIconButton
+            title="Add"
+            variant="primarySubtle"
+            onClick={() => addTask?.(column.id)}
+            disabled={!addEnabled}
+          >
+            <Add />
+          </HvIconButton>
+        </div>
+        <HvStack direction="column" spacing="md">
+          <SortableContext items={tasksIds}>
+            {tasks &&
+              tasks.map((task) => (
+                <TaskCard
+                  key={task.id}
+                  task={task}
+                  color={column.color}
+                  deleteTask={deleteTask}
+                />
+              ))}
+          </SortableContext>
+        </HvStack>
+      </div>
+    </div>
+  );
+};

package/src/templates/KanbanBoard/TaskCard.tsx

@@ -0,0 +1,130 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  HvActionBar,
+  HvAvatar,
+  HvAvatarGroup,
+  HvButton,
+  HvCard,
+  HvCardContent,
+  HvCardHeader,
+  HvOverflowTooltip,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+import {
+  Delete,
+  Level0Good,
+  Level1,
+  Level3Bad,
+  Level4,
+  Level5,
+} from "@hitachivantara/uikit-react-icons";
+
+import classes from "./styles";
+import { Column, Task } from "./types";
+
+interface TaskProps {
+  task: Task;
+  color?: Column["color"];
+  deleteTask?: (taskId: string) => void;
+}
+
+const getStatusIcon = (statusLevel?: number) => {
+  switch (statusLevel) {
+    case 1:
+      return <Level1 color="info" />;
+    case 2:
+      return <Level3Bad color="warningStrong" />;
+    case 3:
+      return <Level4 color="negativeStrong" />;
+    case 4:
+      return <Level5 color="negativeDeep" />;
+    case 5:
+      return <Level0Good color="positive" />;
+    default:
+      return null;
+  }
+};
+
+export const TaskCard = ({ task, deleteTask }: TaskProps) => {
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: task.id, data: { type: "Task", task } });
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        ...style,
+        ...(isDragging && {
+          opacity: 0.2,
+        }),
+      }}
+      {...attributes}
+      {...listeners}
+    >
+      <HvCard
+        bgcolor="bgContainer"
+        classes={{ root: classes.card, semanticBar: classes.cardSemanticBar }}
+      >
+        <HvCardHeader
+          title={
+            <>
+              <HvTypography variant="caption2">Some time ago</HvTypography>
+              <HvTypography variant="title3">{task.title}</HvTypography>
+            </>
+          }
+          className={classes.cardHeader}
+          icon={getStatusIcon(task.statusLevel)}
+        />
+        <HvCardContent>
+          <HvOverflowTooltip
+            paragraphOverflow
+            data={
+              <HvTypography>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+                vitae ex sem. Ut posuere nibh risus, vel pellentesque elit
+                varius sed. Etiam eleifend consequat tortor, ac ultrices nunc
+                viverra pretium. Praesent rutrum congue justo fermentum varius.
+                Aenean malesuada magna ut purus tincidunt tempor. Quisque urna
+                erat, finibus quis mi vitae, vehicula gravida dui. In vitae
+                elementum felis, sed interdum nunc. Integer varius nibh ac
+                congue rutrum. Pellentesque vel auctor risus. Cras quis
+                sollicitudin odio.
+              </HvTypography>
+            }
+          />
+          <HvButton
+            icon
+            onClick={() => deleteTask?.(task.id)}
+            classes={{ root: classes.cardDeleteIcon }}
+          >
+            <Delete />
+          </HvButton>
+        </HvCardContent>
+        <HvActionBar classes={{ root: classes.cardActions }}>
+          {task.users ? (
+            <HvAvatarGroup size="xs" maxVisible={2}>
+              {task.users.map((user) => (
+                <HvAvatar key={user.name} alt={user.name} src={user.avatar} />
+              ))}
+            </HvAvatarGroup>
+          ) : (
+            <HvButton variant="primaryGhost">Assign</HvButton>
+          )}
+          <div style={{ flex: 1 }} />
+        </HvActionBar>
+      </HvCard>
+    </div>
+  );
+};