@openmrs/esm-form-builder-app 1.0.1-pre.126

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@openmrs/esm-form-builder-app",
+  "version": "1.0.1-pre.126",
+  "license": "MPL-2.0",
+  "description": "OpenMRS ESM Form Builder App",
+  "browser": "dist/openmrs-esm-form-builder-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.json",
+    "verify": "turbo lint typescript coverage",
+    "coverage": "yarn test --coverage --passWithNoTests",
+    "prepare": "husky install",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends",
+    "formbuilder",
+    "form builder"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-form-builder.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-form-builder#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-form-builder/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.19.0",
+    "@ohri/openmrs-ohri-form-engine-lib": "next",
+    "file-loader": "^6.2.0",
+    "lodash-es": "^4.17.21",
+    "react-ace": "^10.1.0",
+    "sass": "^1.56.2"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-i18next": "11.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@swc/cli": "^0.1.57",
+    "@swc/core": "^1.3.22",
+    "@swc/jest": "^0.2.24",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.4",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@types/webpack-env": "^1.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "css-loader": "^6.7.2",
+    "eslint": "^8.29.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.2",
+    "i18next": "^19.9.2",
+    "i18next-parser": "^5.4.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.3.1",
+    "jest-cli": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "openmrs": "next",
+    "prettier": "^2.8.1",
+    "pretty-quick": "^3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^11.18.6",
+    "rxjs": "^7.6.0",
+    "swc-loader": "^0.2.3",
+    "turbo": "^1.6.3",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "packageManager": "yarn@3.2.4",
+  "stableVersion": "1.0.0"
+}

package/src/components/dashboard/dashboard.component.tsx

@@ -0,0 +1,310 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Tile,
+} from "@carbon/react";
+import { Add, DocumentImport, Download, Edit } from "@carbon/react/icons";
+import { navigate, useLayoutType } from "@openmrs/esm-framework";
+
+import { FilterProps } from "../../types";
+import { useClobdata } from "../../hooks/useClobdata";
+import { useForms } from "../../hooks/useForms";
+import EmptyState from "../empty-state/empty-state.component";
+import ErrorState from "../error-state/error-state.component";
+import styles from "./dashboard.scss";
+
+function CustomTag({ condition }) {
+  const { t } = useTranslation();
+
+  return condition ? (
+    <Tag type="green" size="md" title="Clear Filter">
+      {t("yes", "Yes")}
+    </Tag>
+  ) : (
+    <Tag type="red" size="md" title="Clear Filter">
+      {t("no", "No")}
+    </Tag>
+  );
+}
+
+function ActionButtons({ form }) {
+  const { t } = useTranslation();
+  const { clobdata } = useClobdata(form);
+  const formResources = form?.resources;
+
+  const downloadableSchema = useMemo(
+    () =>
+      new Blob([JSON.stringify(clobdata, null, 2)], {
+        type: "application/json",
+      }),
+    [clobdata]
+  );
+
+  return formResources.length == 0 || !form?.resources[0] ? (
+    <Button
+      className={styles.importButton}
+      renderIcon={DocumentImport}
+      onClick={() => navigate({ to: `form-builder/edit/${form.uuid}` })}
+      kind={"ghost"}
+      iconDescription={t("import", "Import")}
+      hasIconOnly
+    />
+  ) : (
+    <>
+      <Button
+        className={styles.editButton}
+        enterDelayMs={300}
+        renderIcon={Edit}
+        onClick={() =>
+          navigate({
+            to: `${window.spaBase}/form-builder/edit/${form.uuid}`,
+          })
+        }
+        kind={"ghost"}
+        iconDescription={t("editSchema", "Edit schema")}
+        hasIconOnly
+        tooltipAlignment="start"
+      />
+      <a
+        className={styles.downloadLink}
+        download={`${form?.name}.json`}
+        href={window.URL.createObjectURL(downloadableSchema)}
+      >
+        <Button
+          className={styles.downloadButton}
+          enterDelayMs={300}
+          renderIcon={Download}
+          kind={"ghost"}
+          iconDescription={t("downloadSchema", "Download schema")}
+          hasIconOnly
+          tooltipAlignment="start"
+        ></Button>
+      </a>
+    </>
+  );
+}
+
+function FormsList({ forms, isValidating, t }) {
+  const isTablet = useLayoutType() === "tablet";
+  const [filter, setFilter] = useState("");
+
+  const filteredRows = useMemo(() => {
+    if (!filter) {
+      return forms;
+    }
+
+    if (filter === "Published") {
+      return forms.filter((form) => form.published);
+    }
+
+    if (filter === "Unpublished") {
+      return forms.filter((form) => !form.published);
+    }
+
+    return forms;
+  }, [filter, forms]);
+
+  const tableHeaders = [
+    {
+      header: t("name", "Name"),
+      key: "name",
+    },
+    {
+      header: t("version", "Version"),
+      key: "version",
+    },
+    {
+      header: t("published", "Published"),
+      key: "published",
+    },
+    {
+      header: t("retired", "Retired"),
+      key: "retired",
+    },
+    {
+      header: t("schemaActions", "Schema actions"),
+      key: "actions",
+    },
+  ];
+
+  const tableRows = useMemo(
+    () =>
+      (filteredRows.length ? filteredRows : forms)?.map((form) => ({
+        ...form,
+        id: form.uuid,
+        published: <CustomTag condition={form.published} />,
+        retired: <CustomTag condition={form.retired} />,
+        actions: <ActionButtons form={form} />,
+      })),
+    [filteredRows, forms]
+  );
+
+  const handleStatusChange = ({ selectedItem }) => {
+    setFilter(selectedItem);
+  };
+
+  const handleFilter = ({
+    rowIds,
+    headers,
+    cellsById,
+    inputValue,
+    getCellId,
+  }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        return ("" + filterableValue).toLowerCase().includes(filterTerm);
+      })
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.flexContainer}>
+        <div className={styles.filterContainer}>
+          <Dropdown
+            id="publishStatusFilter"
+            initialSelectedItem={"All"}
+            label=""
+            titleText={
+              t("filterByPublishedStatus", "Filter by publish status") + ":"
+            }
+            type="inline"
+            items={["All", "Published", "Unpublished"]}
+            onChange={handleStatusChange}
+          />
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <DataTable
+        filterRows={handleFilter}
+        rows={tableRows}
+        headers={tableHeaders}
+        size={isTablet ? "sm" : "lg"}
+        useZebraStyles
+      >
+        {({
+          rows,
+          headers,
+          getTableProps,
+          getHeaderProps,
+          getRowProps,
+          onInputChange,
+        }) => (
+          <>
+            <TableContainer className={styles.tableContainer}>
+              <div className={styles.toolbarWrapper}>
+                <TableToolbar className={styles.tableToolbar}>
+                  <TableToolbarContent>
+                    <TableToolbarSearch
+                      onChange={onInputChange}
+                      placeholder={t("searchThisList", "Search this list")}
+                    />
+                    <Button
+                      kind="primary"
+                      iconDescription={t("createNewForm", "Create a new form")}
+                      renderIcon={(props) => <Add size={16} {...props} />}
+                      onClick={() =>
+                        navigate({
+                          to: `${window.spaBase}/form-builder/new`,
+                        })
+                      }
+                    >
+                      {t("createNewForm", "Create a new form")}
+                    </Button>
+                  </TableToolbarContent>
+                </TableToolbar>
+              </div>
+              <Table {...getTableProps()} className={styles.table}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t(
+                        "noMatchingFormsToDisplay",
+                        "No matching forms to display"
+                      )}
+                    </p>
+                    <p className={styles.helper}>
+                      {t("checkFilters", "Check the filters above")}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+          </>
+        )}
+      </DataTable>
+    </>
+  );
+}
+
+const Dashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { error, forms, isLoading, isValidating } = useForms();
+
+  return (
+    <div className={styles.container}>
+      <h3 className={styles.heading}>{t("formBuilder", "Form Builder")}</h3>
+      {(() => {
+        if (error) {
+          return <ErrorState error={error} />;
+        }
+
+        if (isLoading) {
+          return <DataTableSkeleton role="progressbar" />;
+        }
+
+        if (forms.length === 0) {
+          return <EmptyState />;
+        }
+
+        return <FormsList forms={forms} isValidating={isValidating} t={t} />;
+      })()}
+    </div>
+  );
+};
+
+export default Dashboard;

package/src/components/dashboard/dashboard.scss

@@ -0,0 +1,112 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  padding: 2rem;
+  background-color: $ui-01;
+}
+
+.backgroundDataFetchingIndicator {
+  flex: 1;
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  height: spacing.$spacing-09;
+  justify-content: flex-end;
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.table tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.heading {
+  margin-bottom: 1.5rem;
+}
+
+.toolbar {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.emptyContainer {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+.tableContainer {
+  padding: 0;
+
+  :global(.cds--data-table-content) {
+    border: 1px solid $ui-03;
+    border-bottom: none;
+    overflow: visible;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: relative;
+    height: 2rem;
+    min-height: 0rem;
+    overflow: visible;
+    top: 0;
+  }
+
+  &:global(.cds--data-table-container) {
+    padding-top: 0rem;
+  }
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+

package/src/components/empty-state/empty-data-illustration.component.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={17.636}
+          cy={2.314}
+          r={1.175}
+        />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={40.218}
+          cy={9.755}
+          r={1.13}
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/empty-state/empty-state.component.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Layer, Link, Tile } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { navigate, useLayoutType } from "@openmrs/esm-framework";
+
+import styles from "./empty-state.scss";
+import { EmptyDataIllustration } from "./empty-data-illustration.component";
+
+function EmptyState() {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === "tablet";
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div
+          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
+        >
+          <h4>{t("forms", "Forms")}</h4>
+        </div>
+        <EmptyDataIllustration />
+        <p className={styles.content}>
+          {t("noFormsToDisplay", "There are no forms to display.")}
+        </p>
+        <p className={styles.action}>
+          <Link
+            onClick={() =>
+              navigate({
+                to: `${window.spaBase}/form-builder/new`,
+              })
+            }
+          >
+            {t("createNewForm", "Create a new form")}
+          </Link>
+        </p>
+      </Tile>
+    </Layer>
+  );
+}
+
+export default EmptyState;

package/src/components/empty-state/empty-state.scss

@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style("heading-compact-01");
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+  
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}