@access-ci/ui 0.9.0 → 0.10.0-beta1

package/dist/resource-home-DCo6cnW8.js

@@ -0,0 +1,272 @@
+import { j as e, a as p, i as g, k as b, B as v } from "./index-lEG5SUtq.js";
+import { I as h } from "./icon-B4ZiM0pS.js";
+const C = {
+  "ACCESS Pegasus": "https://pegasus.isi.edu/wordpress/wp-content/uploads/2016/01/favicon.ico",
+  "ACCESS OnDemand": "https://openondemand.org/themes/fire/theme/assets/media/favicons/favicon.ico",
+  "Advance reservations": "calendar-check",
+  "Composable hardware fabric": "boxes",
+  "Compute Resources": "cpu-fill",
+  "CPU Compute": "cpu-fill",
+  "GPU Compute": "cpu",
+  "Innovative / Novel Compute": "lightbulb",
+  "Large Memory Nodes": "arrows-fullscreen",
+  Preemption: "clock-history",
+  "Science Gateway support": "globe",
+  "Service / Other": "stars",
+  "Storage Resources": "hdd-fill",
+  "Virtual Machines": "pc-display-horizontal",
+  Cloud: "cloud",
+  Storage: "hdd-fill"
+};
+function x({ active: t, tagCategory: o, tagId: c, iconUri: n, name: a, toggleTag: s }) {
+  const i = n || C[a] || "tag";
+  return /* @__PURE__ */ e.jsx(
+    "li",
+    {
+      className: `tag tag-category-${o.name.toLowerCase().replace(/[^a-z]+/g, "-")}${t.tagIds.has(c) ? " active" : ""}`,
+      children: /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          href: "#",
+          disabled: t.disabledTagIds.has(c),
+          onClick: (r) => {
+            r.preventDefault(), s(c);
+          },
+          children: [
+            i.startsWith("http") ? /* @__PURE__ */ e.jsx(h, { alt: a, src: i }) : /* @__PURE__ */ e.jsx(h, { name: i }),
+            a
+          ]
+        }
+      )
+    }
+  );
+}
+function f({ children: t }) {
+  return /* @__PURE__ */ e.jsx("ul", { className: "tags", children: t });
+}
+function N({
+  active: t,
+  baseUri: o,
+  description: c,
+  imageType: n,
+  imageUri: a,
+  name: s,
+  infoGroupId: i,
+  tags: r,
+  toggleTag: l
+}) {
+  const u = `${o}/${i}`;
+  return /* @__PURE__ */ e.jsxs("div", { className: "resource-group", children: [
+    /* @__PURE__ */ e.jsx(
+      "a",
+      {
+        className: `resource-group-image image-type-${n}`,
+        href: u,
+        children: a ? /* @__PURE__ */ e.jsx("img", { src: a }) : /* @__PURE__ */ e.jsx(h, { name: "motherboard" })
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "resource-group-text", children: [
+      /* @__PURE__ */ e.jsx("h3", { children: /* @__PURE__ */ e.jsx("a", { href: u, children: s }) }),
+      /* @__PURE__ */ e.jsx(f, { children: r.map((m) => /* @__PURE__ */ e.jsx(
+        x,
+        {
+          ...m,
+          active: t,
+          toggleTag: l
+        },
+        m.tagId
+      )) }),
+      /* @__PURE__ */ e.jsxs("p", { children: [
+        c && c,
+        /* @__PURE__ */ e.jsx("br", {}),
+        /* @__PURE__ */ e.jsxs("a", { href: u, children: [
+          "Learn more about ",
+          s,
+          " »"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function w({
+  active: t,
+  baseUri: o,
+  name: c,
+  resourceGroups: n,
+  toggleTag: a
+}) {
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("h2", { children: c }),
+    n.filter(({ infoGroupId: s }) => t.infoGroupIds.has(s)).map((s) => /* @__PURE__ */ e.jsx(
+      N,
+      {
+        ...s,
+        baseUri: o,
+        active: t,
+        toggleTag: a
+      },
+      s.infoGroupId
+    ))
+  ] });
+}
+function y({
+  active: t,
+  clearTags: o,
+  tagCategories: c,
+  toggleTag: n
+}) {
+  const [a, s] = p.useState(!1), i = p.useRef(null);
+  return p.useEffect(() => {
+    const r = () => s(!1);
+    return document.body.addEventListener("click", r), () => document.body.removeEventListener("click", r);
+  }, []), /* @__PURE__ */ e.jsxs(
+    "section",
+    {
+      className: "filters-outer",
+      onClick: (r) => {
+        r.stopPropagation();
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            ref: i,
+            onClick: () => s(!a),
+            className: `btn-filters btn ${a ? "active" : ""}`,
+            children: [
+              /* @__PURE__ */ e.jsx(h, { name: "filter" }),
+              " Filters",
+              t.tagIds.size > 0 ? /* @__PURE__ */ e.jsx("span", { className: "active-tag-count", children: t.tagIds.size }) : null
+            ]
+          }
+        ),
+        a ? /* @__PURE__ */ e.jsxs("div", { className: "filters-inner", children: [
+          c.map((r) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx("h2", { children: r.name }),
+            /* @__PURE__ */ e.jsx(f, { children: r.tags.map((l) => /* @__PURE__ */ e.jsx(x, { ...l, active: t, toggleTag: n })) })
+          ] })),
+          /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              onClick: o,
+              disabled: t.tagIds.size == 0,
+              className: "btn danger",
+              children: [
+                /* @__PURE__ */ e.jsx(h, { name: "trash" }),
+                " Clear Filters"
+              ]
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function k({ setBotOpen: t }) {
+  const o = p.useRef(null), c = [
+    {
+      title: "Browse resources",
+      icon: "filter-square",
+      description: "Filter resources to find the best match for your research.",
+      onClick: (n) => {
+        n.preventDefault(), o.current && o.current.nextSibling.scrollIntoView({ bahavior: "smooth" });
+      }
+    },
+    {
+      title: "Ask a question",
+      icon: "question-circle",
+      onClick: (n) => {
+        n.preventDefault(), t(!0);
+      },
+      description: "You have resource questions. Our Q&A bot has answers!",
+      login: !0
+    },
+    {
+      title: "Get suggestions",
+      icon: "card-checklist",
+      href: "https://access-ara.ccs.uky.edu:8080/",
+      description: "Fill out a form to get resource recommendations."
+    },
+    {
+      title: "Read news",
+      icon: "newspaper",
+      href: "https://access-ci.org/tag/resource-providers/",
+      description: "See the latest news from resource providers."
+    }
+  ];
+  return /* @__PURE__ */ e.jsxs("section", { id: "resource-pathways", ref: o, children: [
+    /* @__PURE__ */ e.jsxs("p", { className: "intro", children: [
+      "ACCESS provides advanced computing resources ",
+      /* @__PURE__ */ e.jsx("strong", { children: "at no cost" }),
+      " ",
+      "to researchers and educators."
+    ] }),
+    /* @__PURE__ */ e.jsx("ul", { className: "resource-pathways", children: c.map(
+      ({ title: n, icon: a, href: s, description: i, login: r, onClick: l }, u) => /* @__PURE__ */ e.jsx("li", { className: `resource-pathway-${u}`, children: /* @__PURE__ */ e.jsxs("a", { href: s || "#", onClick: l, children: [
+        a ? /* @__PURE__ */ e.jsx(h, { name: a }) : null,
+        " ",
+        /* @__PURE__ */ e.jsxs("span", { className: "detail", children: [
+          /* @__PURE__ */ e.jsx("span", { className: "title", children: n }),
+          /* @__PURE__ */ e.jsx("span", { className: "description", children: i }),
+          r ? /* @__PURE__ */ e.jsxs("span", { className: "login", children: [
+            /* @__PURE__ */ e.jsx(h, { name: "key" }),
+            " Requires ACCESS Login"
+          ] }) : null
+        ] })
+      ] }) }, n)
+    ) })
+  ] });
+}
+function I({
+  baseUri: t,
+  title: o,
+  setBotOpen: c,
+  showBreadcrumbs: n = !0,
+  showTitle: a = !0
+}) {
+  const [s, i] = p.useState([]), r = g(), l = p.useMemo(
+    () => r ? b(r, s) : null,
+    [r, s]
+  ), u = (d) => i(
+    s.includes(d) ? s.filter((j) => j != d) : [...s, d]
+  ), m = () => i([]);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    n && /* @__PURE__ */ e.jsx(
+      v,
+      {
+        expandWidth: !0,
+        items: [{ name: "Resources" }],
+        topBorder: !0
+      }
+    ),
+    o && /* @__PURE__ */ e.jsx("h1", { className: a ? "" : "visually-hidden", children: o }),
+    /* @__PURE__ */ e.jsx(k, { setBotOpen: c }),
+    /* @__PURE__ */ e.jsxs("div", { id: "browse-resources", children: [
+      l ? /* @__PURE__ */ e.jsx(
+        y,
+        {
+          tagCategories: r.tagCategories,
+          active: l,
+          clearTags: m,
+          toggleTag: u
+        }
+      ) : null,
+      r ? r.resourceCategories.filter(
+        ({ resourceCategoryId: d }) => l.resourceCategoryIds.has(d)
+      ).map((d) => /* @__PURE__ */ e.jsx(
+        w,
+        {
+          ...d,
+          active: l,
+          baseUri: t,
+          clearTags: m,
+          toggleTag: u
+        },
+        d.name
+      )) : null
+    ] })
+  ] });
+}
+export {
+  I as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@access-ci/ui",
-  "version": "0.9.0",
+  "version": "0.10.0-beta1",
   "description": "User interface components for ACCESS CI",
   "repository": "github:access-ci-org/access-ci-ui",
   "license": "Apache-2.0",
@@ -19,23 +19,29 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "@glidejs/glide": "^3.6.1",
-    "@preact/compat": "^18.3.1",
-    "@snf/access-qa-bot": "^2.4.2",
+    "@snf/access-qa-bot": "^2.6.0",
     "chart.js": "^4.4.6",
     "fuse.js": "^7.0.0",
-    "preact": "^10.24.1",
-    "preact-iso": "^2.6.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-error-boundary": "^6.0.0",
+    "react-router": "^7.7.1",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.9.1",
-    "vite": "^5.4.8"
-  },
-  "eslintConfig": {
-    "extends": "preact"
+    "@eslint/js": "^9.32.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.0.6"
   }
 }