@ocelescope/core

Core React component and style library for Ocelescope. It provides the application shell, the module system and the shared UI building blocks that every Ocelescope frontend module is built on.

It is built on Mantine for UI and TanStack Query for data fetching, and is designed to run inside a Next.js (Pages Router) app.

Installation

pnpm add @ocelescope/core

@ocelescope/core relies on a number of peer dependencies (notably react, react-dom, next, @mantine/*, @tanstack/react-query, dayjs and zustand). When building a full app you normally install them alongside the Ocelescope packages — see the app template for a complete setup.

Usage

Setting up the app (Next.js Pages Router)

// pages/_app.tsx

// 1. Third-party global styles core relies on. Import these FIRST, in this
//    order (@mantine/core must come before its extensions).
import "@mantine/core/styles.css";
import "@mantine/dropzone/styles.css";
import "@mantine/notifications/styles.css";
import "mantine-datatable/styles.css";

// 2. core's own (scoped) styles — must come AFTER the above so its overrides win.
import "@ocelescope/core/styles.css";

import { OcelescopeApp } from "@ocelescope/core";
import config from "../ocelescope.config";

export default OcelescopeApp(config);

Styles. @ocelescope/core ships only its own component styles in @ocelescope/core/styles.css; it does not bundle its dependencies' global CSS. Your app must import the Mantine / mantine-datatable stylesheets above itself (and add those packages to its dependencies), in order, before core's stylesheet. Each Ocelescope module documents any additional stylesheets it needs.

// pages/_document.tsx
import { OcelescopeDocument } from "@ocelescope/core";

export default OcelescopeDocument;

// pages/[[...slug]].tsx — renders the registered modules
import { createModulesPage } from "@ocelescope/core";
import config from "../ocelescope.config";

const page = createModulesPage(config);

export const getStaticPaths = page.getStaticPaths;
export const getStaticProps = page.getStaticProps;
export default page.ModulePage;

// ocelescope.config.ts — register modules
import type { OcelescopeConfig } from "@ocelescope/core";
import ocelot from "@ocelescope/ocelot";

export default {
  modules: [ocelot],
} satisfies OcelescopeConfig;

Defining a module

A module bundles metadata and one or more routes:

import { defineModule, defineModuleRoute } from "@ocelescope/core";
import { TableIcon } from "lucide-react";
import EventsView from "./routes/events";

const eventsRoute = defineModuleRoute({
  name: "events",
  label: "Events",
  requiresOcel: true,
  component: EventsView,
});

export default defineModule({
  name: "example",
  label: "Example",
  description: "An example Ocelescope module",
  authors: [{ name: "Your Name" }],
  icon: TableIcon,
  routes: [eventsRoute],
});

About

Part of Ocelescope, a framework for working with Object-Centric Event Logs (OCEL) developed at the Chair of Process and Data Science (PADS), RWTH Aachen University.

📖 Documentation: https://www.ocelescope.org