@ocelescope/core 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -42,6 +42,12 @@ declare const FileDropzone: React.FC<{
 //#region src/components/EventHandler.d.ts
 declare const sseHandler: (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
 //#endregion
+//#region src/components/HelpModal/HelpModal.d.ts
+declare const HelpModal: React.FC<{
+  visible: boolean;
+  onClose: () => void;
+}>;
+//#endregion
 //#region src/lib/config.d.ts
 type Author = {
   name: string;
@@ -165,7 +171,17 @@ declare const formatAttributeValue: (type: ValueType, value: string | number) =>
 //#endregion
 //#region src/lib/env.d.ts
 declare const env: {
+  appVersion: string;
   projectPage: string;
+  docsUrl: string;
+  pluginDevGuideUrl: string;
+  pluginLibraryUrl: string;
+  reportBugUrl: string;
+  requestFeatureUrl: string;
+  submitPluginUrl: string;
+  troubleshootingUrl: string;
+  requestEnvironmentUrl: string;
+  contactEmail: string;
 };
 //#endregion
 //#region src/lib/getModuleRoute.d.ts
@@ -184,4 +200,4 @@ declare const getModuleRoute: ({
   pathname: string;
 };
 //#endregion
-export { AttributesTable, BarList, FileDropzone, ModuleDefinition, ModuleRouteDefinition, OcelSelect, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };
+export { AttributesTable, BarList, FileDropzone, HelpModal, ModuleDefinition, ModuleRouteDefinition, OcelSelect, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { AppShell, Box, Burger, Button, ColorSchemeScript, Combobox, CopyButton, Divider, Group, Input, InputBase, LoadingOverlay, MantineProvider, Modal, MultiSelect, NavLink, Stack, Table, Text, ThemeIcon, Tooltip, UnstyledButton, createTheme, mantineHtmlProps, useCombobox, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Box, Burger, Button, ColorSchemeScript, Combobox, CopyButton, Divider, Group, Input, InputBase, LoadingOverlay, MantineProvider, Modal, MultiSelect, NavLink, Stack, Table, Text, ThemeIcon, Tooltip, UnstyledButton, createTheme, mantineHtmlProps, useCombobox, useMantineTheme } from "@mantine/core";
 import { getDownloadFlatLogQueryKey, getDownloadOCELQueryKey, getDownloadResourceAsPnmlQueryKey, getDownloadResourceQueryKey, useActivities, useAggregatedAttributes, useAttributeNames, useE2o, useE2oCombinations, useEventAttributes, useGetDefaultOcel, useGetOcels, useImportDefaultOcel, useLogout, useO2o, useO2oCombinations, useObjectAttributes, useObjectTypes, useUpload } from "@ocelescope/api-base";
 import { HydrationBoundary, QueryClient, QueryClientProvider, keepPreviousData, useQueryClient } from "@tanstack/react-query";
-import { ChevronDownIcon, ChevronRightIcon, ContainerIcon, DownloadIcon, FilterIcon, LogOutIcon, PackageIcon, UploadIcon, XIcon } from "lucide-react";
+import { BookOpenIcon, BugIcon, ChevronDownIcon, ChevronRightIcon, ContainerIcon, DownloadIcon, FilterIcon, GlobeIcon, HelpCircleIcon, LightbulbIcon, LogOutIcon, MailIcon, PackageIcon, PackagePlusIcon, PuzzleIcon, TriangleAlertIcon, UploadIcon, XIcon } from "lucide-react";
 import { DataTable } from "mantine-datatable";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import dayjs from "dayjs";
@@ -9,6 +9,7 @@ import isBetween from "dayjs/plugin/isBetween.js";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dropzone } from "@mantine/dropzone";
 import { Readable } from "node:stream";
+import z from "zod";
 import { Notifications, showNotification } from "@mantine/notifications";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useDisclosure } from "@mantine/hooks";
@@ -17,10 +18,9 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import Link from "next/link.js";
 import { useRouter } from "next/router.js";
-import z from "zod";
 import { Head, Html, Main, NextScript } from "next/document.js";
 import { parse } from "content-disposition-attachment";
-import { saveAs } from "file-saver";
+import FileSaver from "file-saver";
 import qs from "qs";
 //#region src/lib/dayjs.ts
 dayjs.extend(isBetween);
@@ -456,6 +456,119 @@ const sseHandler = async (req, res) => {
 		res.status(500).end("SSE proxy error");
 	}
 };
+const env = z.object({
+	NEXT_PUBLIC_APP_VERSION: z.string().default("v0.0.0"),
+	NEXT_PUBLIC_PROJECT_PAGE: z.url().default("https://www.ocelescope.org/"),
+	NEXT_PUBLIC_DOCS_URL: z.url().default("https://www.ocelescope.org/getting-started/download/"),
+	NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL: z.url().default("https://www.ocelescope.org/plugin-development/"),
+	NEXT_PUBLIC_PLUGIN_LIBRARY_URL: z.url().default("https://www.ocelescope.org/community/plugin-library/"),
+	NEXT_PUBLIC_REPORT_BUG_URL: z.url().default("https://www.ocelescope.org/community/report-bug/"),
+	NEXT_PUBLIC_TROUBLESHOOTING_URL: z.url().default("https://www.ocelescope.org/community/troubleshooting/"),
+	NEXT_PUBLIC_REQUEST_FEATURE_URL: z.url().default("https://www.ocelescope.org/community/request-feature/"),
+	NEXT_PUBLIC_SUBMIT_PLUGIN_URL: z.url().default("https://www.ocelescope.org/community/submit-plugin/"),
+	NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL: z.url().default("https://www.ocelescope.org/plugin-development/request-package/"),
+	NEXT_PUBLIC_CONTACT_EMAIL: z.string().default("ocelescope@pads.rwth-aachen.de")
+}).transform((env) => ({
+	appVersion: env.NEXT_PUBLIC_APP_VERSION,
+	projectPage: env.NEXT_PUBLIC_PROJECT_PAGE,
+	docsUrl: env.NEXT_PUBLIC_DOCS_URL,
+	pluginDevGuideUrl: env.NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL,
+	pluginLibraryUrl: env.NEXT_PUBLIC_PLUGIN_LIBRARY_URL,
+	reportBugUrl: env.NEXT_PUBLIC_REPORT_BUG_URL,
+	requestFeatureUrl: env.NEXT_PUBLIC_REQUEST_FEATURE_URL,
+	submitPluginUrl: env.NEXT_PUBLIC_SUBMIT_PLUGIN_URL,
+	troubleshootingUrl: env.NEXT_PUBLIC_TROUBLESHOOTING_URL,
+	requestEnvironmentUrl: env.NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL,
+	contactEmail: env.NEXT_PUBLIC_CONTACT_EMAIL
+})).parse({
+	NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION,
+	NEXT_PUBLIC_PROJECT_PAGE: process.env.NEXT_PUBLIC_PROJECT_PAGE,
+	NEXT_PUBLIC_DOCS_URL: process.env.NEXT_PUBLIC_DOCS_URL,
+	NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL: process.env.NEXT_PUBLIC_PLUGIN_DEV_GUIDE_URL,
+	NEXT_PUBLIC_PLUGIN_LIBRARY_URL: process.env.NEXT_PUBLIC_PLUGIN_LIBRARY_URL,
+	NEXT_PUBLIC_REPORT_BUG_URL: process.env.NEXT_PUBLIC_REPORT_BUG_URL,
+	NEXT_PUBLIC_TROUBLESHOOTING_URL: process.env.NEXT_PUBLIC_TROUBLESHOOTING_URL,
+	NEXT_PUBLIC_REQUEST_FEATURE_URL: process.env.NEXT_PUBLIC_REQUEST_FEATURE_URL,
+	NEXT_PUBLIC_SUBMIT_PLUGIN_URL: process.env.NEXT_PUBLIC_SUBMIT_PLUGIN_URL,
+	NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL: process.env.NEXT_PUBLIC_REQUEST_ENVIRONMENT_URL,
+	NEXT_PUBLIC_CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL
+});
+//#endregion
+//#region src/components/HelpModal/HelpModal.tsx
+const HelpLink = ({ icon: Icon, label, href }) => /* @__PURE__ */ jsx(Anchor, {
+	href,
+	target: "_blank",
+	rel: "noopener noreferrer",
+	underline: "never",
+	c: "inherit",
+	children: /* @__PURE__ */ jsxs(Group, {
+		gap: "sm",
+		children: [/* @__PURE__ */ jsx(Icon, { size: 18 }), /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: label
+		})]
+	})
+});
+const HelpModal = ({ visible, onClose }) => {
+	return /* @__PURE__ */ jsx(Modal, {
+		title: /* @__PURE__ */ jsx(Text, {
+			size: "h3",
+			children: "Help"
+		}),
+		opened: visible,
+		onClose,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: GlobeIcon,
+					label: "Website",
+					href: env.projectPage
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: BookOpenIcon,
+					label: "Documentation",
+					href: env.docsUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: PuzzleIcon,
+					label: "Plugin development guide",
+					href: env.pluginDevGuideUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: TriangleAlertIcon,
+					label: "Known issues",
+					href: env.troubleshootingUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: BugIcon,
+					label: "Report a bug",
+					href: env.reportBugUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: LightbulbIcon,
+					label: "Request a feature",
+					href: env.requestFeatureUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: UploadIcon,
+					label: "Submit a plugin",
+					href: env.submitPluginUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: PackagePlusIcon,
+					label: "Request environment addition",
+					href: env.requestEnvironmentUrl
+				}),
+				/* @__PURE__ */ jsx(HelpLink, {
+					icon: MailIcon,
+					label: env.contactEmail,
+					href: `mailto:${env.contactEmail}`
+				})
+			]
+		})
+	});
+};
 //#endregion
 //#region src/components/ModulePage.tsx
 const createModulesPage = (config) => {
@@ -835,6 +948,7 @@ const AppShell$1 = ({ config, children }) => {
 	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(true);
 	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
 	const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
+	const [isHelpModalVisible, setIsHelpModalVisible] = useState(false);
 	return /* @__PURE__ */ jsxs(AppShell, {
 		header: { height: 60 },
 		navbar: {
@@ -853,17 +967,25 @@ const AppShell$1 = ({ config, children }) => {
 				justify: "space-between",
 				children: [/* @__PURE__ */ jsxs(Group, {
 					align: "center",
-					children: [/* @__PURE__ */ jsx(Burger, {
-						opened: mobileOpened,
-						onClick: toggleMobile,
-						hiddenFrom: "sm",
-						size: "sm"
-					}), /* @__PURE__ */ jsx(Burger, {
-						opened: desktopOpened,
-						onClick: toggleDesktop,
-						visibleFrom: "sm",
-						size: "sm"
-					})]
+					children: [
+						/* @__PURE__ */ jsx(Burger, {
+							opened: mobileOpened,
+							onClick: toggleMobile,
+							hiddenFrom: "sm",
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsx(Burger, {
+							opened: desktopOpened,
+							onClick: toggleDesktop,
+							visibleFrom: "sm",
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							children: env.appVersion
+						})
+					]
 				}), /* @__PURE__ */ jsxs(Group, { children: [
 					/* @__PURE__ */ jsx(CurrentOcelSelect, {}),
 					/* @__PURE__ */ jsx(Button, {
@@ -874,6 +996,16 @@ const AppShell$1 = ({ config, children }) => {
 					/* @__PURE__ */ jsx(UploadModal, {
 						visible: isUploadModalVisible,
 						onClose: () => setIsUploadModalVisible(false)
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						variant: "subtle",
+						"aria-label": "Help",
+						onClick: () => setIsHelpModalVisible(true),
+						children: /* @__PURE__ */ jsx(HelpCircleIcon, { size: 20 })
+					}),
+					/* @__PURE__ */ jsx(HelpModal, {
+						visible: isHelpModalVisible,
+						onClose: () => setIsHelpModalVisible(false)
 					})
 				] })]
 			}) }),
@@ -884,7 +1016,7 @@ const AppShell$1 = ({ config, children }) => {
 				children: /* @__PURE__ */ jsx(Box, {
 					h: "100%",
 					style: {
-						overflow: "scroll",
+						overflow: "auto",
 						position: "relative"
 					},
 					children
@@ -1306,7 +1438,8 @@ const useDownloadFile = () => {
 			if (!response.ok) throw new Error("Failed to download file");
 			const blob = await response.blob();
 			const contentDisposition = parse(response.headers.get("Content-Disposition") ?? "");
-			saveAs(blob, contentDisposition.attachment ? contentDisposition.filename : "fileName");
+			const fileName = contentDisposition.attachment ? contentDisposition.filename : "fileName";
+			FileSaver.saveAs(blob, fileName);
 		} catch (err) {
 			console.error("Download error:", err);
 		}
@@ -1334,6 +1467,5 @@ const useDownloadResourceAsPnml = useDownloadFromServer(getDownloadResourceAsPnm
 //#region src/lib/config.ts
 const defineModule = (def) => def;
 const defineModuleRoute = (def) => def;
-const env = z.object({ NEXT_PUBLIC_PROJECT_PAGE: z.url().default("https://www.ocelescope.org/") }).transform(({ NEXT_PUBLIC_PROJECT_PAGE }) => ({ projectPage: NEXT_PUBLIC_PROJECT_PAGE })).parse(process.env);
 //#endregion
-export { AttributesTable, BarList, FileDropzone, OcelSelect, OcelescopeApp, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };
+export { AttributesTable, BarList, FileDropzone, HelpModal, OcelSelect, OcelescopeApp, OcelescopeDocument, RelationTable, UploadModal, UploadSection, createModulesPage, defineModule, defineModuleRoute, env, formatAttributeValue, getModuleRoute, sseHandler, useCurrentOcel, useDownloadFile, useDownloadFlatOCEL, useDownloadOCEL, useDownloadResource, useDownloadResourceAsPnml, useInvalidate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/core",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Core React component and style library for Ocelescope (Mantine + React Query).",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -47,9 +47,9 @@
     "react-dom": "^19.2.0",
     "zod": "^4.3.6",
     "zustand": "^5.0.11",
+    "@ocelescope/api-base": "0.1.0",
     "@ocelescope/api-client": "0.1.0",
-    "@ocelescope/resources": "0.1.0",
-    "@ocelescope/api-base": "0.1.0"
+    "@ocelescope/resources": "0.1.0"
   },
   "devDependencies": {
     "@mantine/notifications": "^9.4.0",