@manta-eu/react 0.1.0 → 0.1.1

package/README.md

@@ -1,39 +1,48 @@
 # @manta-eu/react
 
-Shared React components and design system styles for Marketer apps.
+React components and design system for Manta apps, including the copilot chat.
 
-## Installation
+## Adding the copilot to a React app
 
-Install in your project:
+Five steps, end to end. Steps 1–3 are setup you do once; step 4 generates the types your app queries
+the graph with; step 5 is the chat itself.
+
+### 1. Install
 
 ```bash
-pnpm add @manta-eu/react
+pnpm add @manta-eu/react @manta-eu/codegen
+pnpm add react react-dom next-themes @xyflow/react html-to-image @ulb-darmstadt/shacl-form
+pnpm add -D tailwindcss @tailwindcss/postcss   # or @tailwindcss/vite, in a Vite app
 ```
 
-### 1. Add base styles to your global CSS
+The second line is this package's peer dependencies — the versions are yours to pick, so the
+package does not pin them for you. `react` and `react-dom` must satisfy `^19.0.0`.
+
+The third is Tailwind 4 and a build plugin for it. The package does not bring its own: the
+stylesheet it ships opens with `@import "tailwindcss"`, so Tailwind has to resolve from your tree
+whatever you write in step 2.
 
-In your app’s main stylesheet (e.g. `src/styles.css`), import Tailwind and the package styles:
+### 2. Add the styles
+
+The copilot is styled with Tailwind 4, so your app has to process the package's CSS. In your global
+stylesheet:
 
 ```css
 @import "tailwindcss";
 
-/* Marketer components – design tokens, base styles, utilities */
+/* Manta components – design tokens, base styles, utilities */
 @import "@manta-eu/react/globals.css";
-```
 
-### 2. Include the package in Tailwind’s content (purge)
-
-So Tailwind keeps classes used by `@manta-eu/react` in the build, add `@source` in the same global CSS file, pointing at the package (adjust the path if your `node_modules` layout differs, e.g. in a monorepo):
-
-```css
+/* Keep the classes the package uses in your build */
 @source "../node_modules/@manta-eu/react/";
 ```
 
-If the package is hoisted (e.g. at the repo root), the path might be `../../node_modules/@manta-eu/react/`.
+Adjust the `@source` path if your `node_modules` sits elsewhere — in a monorepo it is often
+`../../node_modules/@manta-eu/react/`.
 
-### 3. Override the font variable
+### 3. Point the font variable at a real font
 
-The design system expects `--font-roobertpro` to be set to your actual font. Override it in your global CSS, for example in `@theme` and/or `:root`:
+The design system reads `--font-roobertpro`. Set it to whatever you actually load:
 
 ```css
 @theme {
@@ -45,11 +54,78 @@ The design system expects `--font-roobertpro` to be set to your actual font. Ove
 }
 ```
 
-Use your real font family name (and fallbacks) if it differs from `RoobertPro`.
+### 4. Generate the graph types
 
-## Usage
+The copilot reads a datastore whose shapes are specific to your deployment, so the types come from
+that datastore rather than from this package. `@manta-eu/codegen` fetches them over HTTP:
 
-Import components and use the design system:
+```bash
+pnpm manta-codegen generate \
+  --api-url https://app.hiremanta.com \
+  --datastore your-datastore \
+  --keycloak-url https://auth.hiremanta.com \
+  --keycloak-realm your-realm \
+  --client-id your-realm-app \
+  --out ./.ldkit
+```
+
+The run writes one file per namespace plus an `index.ts` that re-exports them. Re-run it whenever
+the shapes change. See [`@manta-eu/codegen`](https://www.npmjs.com/package/@manta-eu/codegen) for
+the device-login and service-account paths.
+
+### 5. Mount the chat
+
+`EmbeddedChatProviders` supplies the API client, query cache and graph state; `EmbeddedChat` is the
+copilot itself. Requests carry the session from `mantaBaseUrl`, so the user signs in there.
+
+```tsx
+import { EmbeddedChat } from "@manta-eu/react/components/embedded-chat";
+import { EmbeddedChatProviders } from "@manta-eu/react/providers";
+import "./globals.css";
+
+export function Copilot() {
+  return (
+    <EmbeddedChatProviders mantaBaseUrl="https://app.hiremanta.com" datastoreId="your-datastore">
+      <EmbeddedChat
+        user={{ id: "…", email: "you@example.com", name: "You" }}
+        isOperator={false}
+        assistantName="Copilot"
+      />
+    </EmbeddedChatProviders>
+  );
+}
+```
+
+That is a working copilot. Everything below is optional.
+
+## Tailoring the chat
+
+`EmbeddedChat` takes these, all optional unless marked:
+
+| Prop                          | Type                                  | What it does                                      |
+| ----------------------------- | ------------------------------------- | ------------------------------------------------- |
+| `user`                        | `{ id, email, name? }` — **required** | Who is talking                                    |
+| `isOperator`                  | `boolean` — **required**              | Unlocks operator-only affordances                 |
+| `datastore`                   | `Datastore`                           | The datastore to read; defaults to the provider's |
+| `datastores`                  | `Datastore[]`                         | Choices when `canSwitchDatastore` is set          |
+| `canSwitchDatastore`          | `boolean`                             | Lets an operator change datastore in the UI       |
+| `title`                       | `string`                              | Header text                                       |
+| `assistantName`               | `string`                              | What the assistant calls itself                   |
+| `welcomeSubtitle`             | `string`                              | Subtitle on the empty state                       |
+| `initialPrompt`               | `string`                              | Prefills the composer                             |
+| `mark`                        | `ReactNode`                           | Your logo in the header                           |
+| `allowedModels`               | `MantaModelId[]`                      | Restricts the model picker                        |
+| `pageContext`                 | `PageContext`                         | Tells the assistant what the user is looking at   |
+| `collapsible` / `isCollapsed` | `boolean`                             | Collapsed presentation                            |
+| `onClose` / `onLogout`        | `() => void`                          | Chrome callbacks                                  |
+| `onSelectPlan`                | `(planIri: string) => void`           | Fires when a plan is opened                       |
+| `renderMenuItems`             | `(defaults) => ReactNode[]`           | Replaces the overflow menu                        |
+
+Removing or renaming one of these is a breaking change, so they change rarely.
+
+## Using the components on their own
+
+The design system is usable without the chat:
 
 ```tsx
 import { Button } from "@manta-eu/react/button";
@@ -60,28 +136,18 @@ export function App() {
 }
 ```
 
-Your app must use Tailwind 4 and process the package CSS (e.g. PostCSS with `@tailwindcss/postcss`) so the design tokens and utilities in `globals.css` apply.
+Every component has its own subpath export — `@manta-eu/react/button`, `/avatar`, `/badge` and so
+on — so you only pull in what you render.
 
 ## Themes
 
-Three themes are included: **standard** (default), **manta** (light), and **manta-dark**. Switch at runtime by setting a data attribute on `<html>`:
+Three ship with the package: **standard** (default), **manta** (light) and **manta-dark**. Switch at
+runtime on the document root:
 
 ```tsx
 document.documentElement.dataset.theme = "manta";
 ```
 
-Or use a React context/component that sets `data-theme` on the document root. Theme files live in `src/themes/` (standard.css, manta.css, manta-dark.css).
-
-## Development
-
-```bash
-pnpm storybook
-```
-
-Runs Storybook on port 6007.
-
-## Exports
+## License
 
-- `@manta-eu/react/button` – Button component
-- `@manta-eu/react/style` – `cn()` utility
-- `@manta-eu/react/globals.css` – Design system stylesheet
+MIT

package/dist/components/channel-icon/index.d.ts

@@ -1,4 +1,4 @@
-export type Channel = "META" | "GOOGLE_ADS" | "SNAPCHAT" | "SHOPIFY" | "MARKETER" | "MANTA";
+export type Channel = "META" | "GOOGLE_ADS" | "SNAPCHAT" | "SHOPIFY" | "MANTA";
 export type ChannelIconProps = {
     channel?: Channel;
     showName?: boolean;
@@ -12,5 +12,4 @@ export { GoogleAdsIcon } from "./google-ads-icon.js";
 export { SnapChatIcon } from "./snapchat-icon.js";
 export { ShopifyIcon } from "./shopify-icon.js";
 export { MantaIcon } from "./manta-icon.js";
-export { MarketerIcon } from "./marketer-icon.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/channel-icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channel-icon/index.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAW5F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDA0ClD;AAED,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/channel-icon/index.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAU/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAoClD;AAED,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/channel-icon/index.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { match } from "ts-pattern";
 import { GoogleAdsIcon } from "./google-ads-icon.js";
 import { MantaIcon } from "./manta-icon.js";
-import { MarketerIcon } from "./marketer-icon.js";
 import { MetaIcon } from "./meta-icon.js";
 import { ShopifyIcon } from "./shopify-icon.js";
 import { SnapChatIcon } from "./snapchat-icon.js";
@@ -12,7 +11,6 @@ const channelDisplayName = {
     GOOGLE_ADS: "Google Ads",
     SNAPCHAT: "Snapchat",
     SHOPIFY: "Shopify",
-    MARKETER: "Marketer",
     MANTA: "Manta",
 };
 export function ChannelIcon(props) {
@@ -24,7 +22,6 @@ export function ChannelIcon(props) {
         .with("GOOGLE_ADS", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(GoogleAdsIcon, { className: cn("size-6", iconClassName), rounded: rounded }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.GOOGLE_ADS })] })))
         .with("SNAPCHAT", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(SnapChatIcon, { className: cn("size-6", iconClassName), rounded: rounded }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.SNAPCHAT })] })))
         .with("SHOPIFY", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(ShopifyIcon, { className: cn("size-6", iconClassName), rounded: rounded }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.SHOPIFY })] })))
-        .with("MARKETER", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(MarketerIcon, { className: cn("size-6", iconClassName) }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.MARKETER })] })))
         .with("MANTA", () => (_jsxs("span", { className: cn("flex gap-2 items-center", className), children: [_jsx(MantaIcon, { className: cn("size-6", iconClassName) }), showName && _jsx("span", { className: "typography-small-semibold", children: channelDisplayName.MANTA })] })))
         .exhaustive();
 }
@@ -33,4 +30,3 @@ export { GoogleAdsIcon } from "./google-ads-icon.js";
 export { SnapChatIcon } from "./snapchat-icon.js";
 export { ShopifyIcon } from "./shopify-icon.js";
 export { MantaIcon } from "./manta-icon.js";
-export { MarketerIcon } from "./marketer-icon.js";

package/dist/components/plan-row/index.d.ts

@@ -1,3 +1,4 @@
+import type { GQLIntegration } from "@manta-eu/client";
 import type { ElementType } from "react";
 export type PlanState = "DRAFT" | "RUNNING" | "FAILED" | "TIMED_OUT" | "COMPLETED";
 export type PlanHowTo = {
@@ -9,7 +10,7 @@ export type PlanHowTo = {
 export type PlanRowPlan = {
     iri: string;
     state?: PlanState | null;
-    primaryIntegration?: string | null;
+    primaryIntegration?: GQLIntegration | null;
     actionCount: number;
     completedActionCount: number;
     subjects: number;

package/dist/components/plan-row/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/plan-row/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;AAEnF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0EF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsE1C;AAED,wBAAgB,iBAAiB,4CAShC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/plan-row/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAQzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;AAEnF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,kBAAkB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2DF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsE1C;AAED,wBAAgB,iBAAiB,4CAShC"}

package/dist/components/plan-row/index.js

@@ -4,6 +4,7 @@ import { Clock, Ellipsis, Zap } from "lucide-react";
 import { match } from "ts-pattern";
 import { Link } from "../button/index.js";
 import { ChannelIcon } from "../channel-icon/index.js";
+import { integrationToChannel } from "../planning/plan-detail-utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/index.js";
 import { cn } from "#style";
 function isActivePlan(state) {
@@ -63,23 +64,10 @@ function extractPlanName(iri) {
     const separator = Math.max(lastHash, lastSlash);
     return separator > -1 ? iri.slice(separator + 1) : iri;
 }
-function integrationToChannel(integration) {
-    if (integration === "GOOGLE")
-        return "GOOGLE_ADS";
-    if (integration === "META" ||
-        integration === "GOOGLE_ADS" ||
-        integration === "SNAPCHAT" ||
-        integration === "SHOPIFY" ||
-        integration === "MARKETER" ||
-        integration === "MANTA") {
-        return integration;
-    }
-    return null;
-}
 export function PlanRow(props) {
     const { plan, href, component, className } = props;
     const status = getStatusConfig(plan.state);
-    const channel = integrationToChannel(plan.primaryIntegration);
+    const channel = plan.primaryIntegration ? integrationToChannel(plan.primaryIntegration) : null;
     const actionCount = getActionCount(plan);
     const timeEstimate = getTimeEstimate(plan);
     const planName = plan.howTo?.name ?? extractPlanName(plan.iri);