feat: add toolbox contract shell and testkit
This commit is contained in:
231
packages/shell-react/src/AppShell.tsx
Normal file
231
packages/shell-react/src/AppShell.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import {
|
||||
contextualizeToolboxLink,
|
||||
loadToolboxContext,
|
||||
resolveWebUrl,
|
||||
type ToolboxAppManifest,
|
||||
type ToolboxContext,
|
||||
type ToolboxContextLoadOptions,
|
||||
type ToolboxError,
|
||||
} from "@add-ideas/toolbox-contract";
|
||||
import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
|
||||
export interface AppShellProps {
|
||||
app: ToolboxAppManifest;
|
||||
children: ReactNode;
|
||||
appActions?: ReactNode;
|
||||
className?: string;
|
||||
manifestUrl?: string | URL;
|
||||
contextOptions?: Omit<ToolboxContextLoadOptions, "signal">;
|
||||
onContextError?: (error: ToolboxError) => void;
|
||||
}
|
||||
|
||||
function currentHref(): string {
|
||||
return typeof globalThis.location === "undefined"
|
||||
? "http://localhost/"
|
||||
: globalThis.location.href;
|
||||
}
|
||||
|
||||
function safeHref(reference: string, base: string | URL): string | undefined {
|
||||
try {
|
||||
return resolveWebUrl(reference, base).href;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function privacyText(app: ToolboxAppManifest): string {
|
||||
if (app.privacy.label) return app.privacy.label;
|
||||
const processing =
|
||||
app.privacy.processing === "local"
|
||||
? "Local processing"
|
||||
: app.privacy.processing === "remote"
|
||||
? "Remote processing"
|
||||
: "Local and remote processing";
|
||||
const details = [
|
||||
app.privacy.fileUploads ? "uploads files" : "no file uploads",
|
||||
app.privacy.telemetry ? "uses telemetry" : "no telemetry",
|
||||
];
|
||||
return `${processing} · ${details.join(" · ")}`;
|
||||
}
|
||||
|
||||
export function AppShell({
|
||||
app,
|
||||
children,
|
||||
appActions,
|
||||
className,
|
||||
manifestUrl,
|
||||
contextOptions,
|
||||
onContextError,
|
||||
}: AppShellProps) {
|
||||
const [context, setContext] = useState<ToolboxContext | null>(null);
|
||||
const [contextState, setContextState] = useState<"standalone" | "connected">(
|
||||
"standalone",
|
||||
);
|
||||
const errorHandler = useRef(onContextError);
|
||||
|
||||
useEffect(() => {
|
||||
errorHandler.current = onContextError;
|
||||
}, [onContextError]);
|
||||
|
||||
const contextCatalog = contextOptions?.catalogUrl;
|
||||
const contextDocument = contextOptions?.document;
|
||||
const contextFetch = contextOptions?.fetch;
|
||||
const contextLocation = contextOptions?.location;
|
||||
const contextMetaName = contextOptions?.metaName;
|
||||
const contextQueryParameter = contextOptions?.queryParameter;
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
void loadToolboxContext({
|
||||
...(contextCatalog === undefined ? {} : { catalogUrl: contextCatalog }),
|
||||
...(contextDocument === undefined ? {} : { document: contextDocument }),
|
||||
...(contextFetch === undefined ? {} : { fetch: contextFetch }),
|
||||
...(contextLocation === undefined ? {} : { location: contextLocation }),
|
||||
...(contextMetaName === undefined ? {} : { metaName: contextMetaName }),
|
||||
...(contextQueryParameter === undefined
|
||||
? {}
|
||||
: { queryParameter: contextQueryParameter }),
|
||||
signal: controller.signal,
|
||||
}).then((result) => {
|
||||
if (controller.signal.aborted) return;
|
||||
if (result.status === "ready") {
|
||||
setContext(result.context);
|
||||
setContextState("connected");
|
||||
} else {
|
||||
setContext(null);
|
||||
setContextState("standalone");
|
||||
if (result.status === "error") errorHandler.current?.(result.error);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, [
|
||||
contextCatalog,
|
||||
contextDocument,
|
||||
contextFetch,
|
||||
contextLocation,
|
||||
contextMetaName,
|
||||
contextQueryParameter,
|
||||
]);
|
||||
|
||||
const pageUrl = contextLocation ?? currentHref();
|
||||
const appManifestUrl = useMemo(
|
||||
() =>
|
||||
manifestUrl ??
|
||||
safeHref("toolbox-app.json", pageUrl) ??
|
||||
"http://localhost/toolbox-app.json",
|
||||
[manifestUrl, pageUrl],
|
||||
);
|
||||
const privacyHref = app.privacy.url
|
||||
? safeHref(app.privacy.url, appManifestUrl)
|
||||
: undefined;
|
||||
const enabledApps =
|
||||
context?.catalog.apps.filter((entry) => entry.enabled) ?? [];
|
||||
const theme = context?.catalog.catalog.theme.mode ?? "system";
|
||||
const rootClassName = ["toolbox-shell", className].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={rootClassName}
|
||||
data-toolbox-context={contextState}
|
||||
data-toolbox-theme={theme}
|
||||
>
|
||||
<header className="toolbox-shell__header">
|
||||
<div className="toolbox-shell__bar">
|
||||
{context ? (
|
||||
<a
|
||||
className="toolbox-shell__home"
|
||||
href={context.catalog.homeUrl.href}
|
||||
>
|
||||
{context.catalog.catalog.theme.brand}
|
||||
</a>
|
||||
) : null}
|
||||
|
||||
<div className="toolbox-shell__identity">
|
||||
<img
|
||||
className="toolbox-shell__icon"
|
||||
src={safeHref(app.icon, appManifestUrl)}
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="toolbox-shell__name">{app.name}</h1>
|
||||
<span className="toolbox-shell__description">
|
||||
{app.description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="toolbox-shell__actions">
|
||||
{app.actions?.map((action) => {
|
||||
const href = safeHref(action.url, appManifestUrl);
|
||||
return href ? (
|
||||
<a key={action.id} href={href}>
|
||||
{action.label}
|
||||
</a>
|
||||
) : null;
|
||||
})}
|
||||
{appActions}
|
||||
</div>
|
||||
|
||||
<div className="toolbox-shell__meta">
|
||||
<span aria-label={`Version ${app.version}`}>v{app.version}</span>
|
||||
{privacyHref ? (
|
||||
<a href={privacyHref}>{privacyText(app)}</a>
|
||||
) : (
|
||||
<span>{privacyText(app)}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{context && enabledApps.length > 0 ? (
|
||||
<details className="toolbox-shell__switcher">
|
||||
<summary>Apps</summary>
|
||||
<nav aria-label="Toolbox applications">
|
||||
<ul>
|
||||
{enabledApps.map((entry) => {
|
||||
if (entry.kind === "external") {
|
||||
return (
|
||||
<li
|
||||
key={`external:${entry.name}:${entry.entryUrl.href}`}
|
||||
>
|
||||
<a
|
||||
href={entry.entryUrl.href}
|
||||
{...(entry.launch === "new-tab"
|
||||
? { target: "_blank", rel: "noreferrer" }
|
||||
: {})}
|
||||
>
|
||||
{entry.name}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
const manifest = entry.app.manifest;
|
||||
return (
|
||||
<li key={manifest.id}>
|
||||
<a
|
||||
href={contextualizeToolboxLink(
|
||||
entry.app.entryUrl,
|
||||
context.catalog.catalogUrl,
|
||||
{ location: pageUrl },
|
||||
)}
|
||||
aria-current={
|
||||
manifest.id === app.id ? "page" : undefined
|
||||
}
|
||||
>
|
||||
{manifest.name}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
</details>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
<main className="toolbox-shell__main">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
2
packages/shell-react/src/index.ts
Normal file
2
packages/shell-react/src/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { AppShell } from "./AppShell.js";
|
||||
export type { AppShellProps } from "./AppShell.js";
|
||||
202
packages/shell-react/src/styles.css
Normal file
202
packages/shell-react/src/styles.css
Normal file
@@ -0,0 +1,202 @@
|
||||
:root {
|
||||
--toolbox-font:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", sans-serif;
|
||||
--toolbox-background: #f5f7fa;
|
||||
--toolbox-surface: #ffffff;
|
||||
--toolbox-text: #172033;
|
||||
--toolbox-muted: #657086;
|
||||
--toolbox-border: #dce2ea;
|
||||
--toolbox-accent: #3156d3;
|
||||
--toolbox-accent-contrast: #ffffff;
|
||||
--toolbox-radius: 0.65rem;
|
||||
--toolbox-shadow: 0 1px 2px rgb(18 28 45 / 8%);
|
||||
}
|
||||
|
||||
[data-toolbox-theme="dark"] {
|
||||
--toolbox-background: #111722;
|
||||
--toolbox-surface: #192130;
|
||||
--toolbox-text: #edf1f7;
|
||||
--toolbox-muted: #aab4c5;
|
||||
--toolbox-border: #303b4d;
|
||||
--toolbox-accent: #9db2ff;
|
||||
--toolbox-accent-contrast: #111722;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-toolbox-theme="system"] {
|
||||
--toolbox-background: #111722;
|
||||
--toolbox-surface: #192130;
|
||||
--toolbox-text: #edf1f7;
|
||||
--toolbox-muted: #aab4c5;
|
||||
--toolbox-border: #303b4d;
|
||||
--toolbox-accent: #9db2ff;
|
||||
--toolbox-accent-contrast: #111722;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbox-shell {
|
||||
min-height: 100vh;
|
||||
color: var(--toolbox-text);
|
||||
background: var(--toolbox-background);
|
||||
font-family: var(--toolbox-font);
|
||||
}
|
||||
|
||||
.toolbox-shell *,
|
||||
.toolbox-shell *::before,
|
||||
.toolbox-shell *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toolbox-shell__header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid var(--toolbox-border);
|
||||
background: var(--toolbox-surface);
|
||||
box-shadow: var(--toolbox-shadow);
|
||||
}
|
||||
|
||||
.toolbox-shell__bar {
|
||||
display: flex;
|
||||
min-height: 4.25rem;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
max-width: 90rem;
|
||||
margin: 0 auto;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.toolbox-shell a {
|
||||
color: var(--toolbox-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toolbox-shell a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toolbox-shell__home {
|
||||
flex: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toolbox-shell__identity {
|
||||
display: flex;
|
||||
min-width: 12rem;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.toolbox-shell__identity > div {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.toolbox-shell__icon {
|
||||
flex: none;
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.toolbox-shell__name {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.toolbox-shell__description {
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.toolbox-shell__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.toolbox-shell__meta {
|
||||
display: grid;
|
||||
flex: none;
|
||||
gap: 0.15rem;
|
||||
color: var(--toolbox-muted);
|
||||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher {
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher summary {
|
||||
padding: 0.45rem 0.7rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: var(--toolbox-radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher nav {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
width: max-content;
|
||||
min-width: 12rem;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid var(--toolbox-border);
|
||||
border-radius: var(--toolbox-radius);
|
||||
background: var(--toolbox-surface);
|
||||
box-shadow: 0 0.75rem 2rem rgb(18 28 45 / 14%);
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher ul {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher a {
|
||||
display: block;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
.toolbox-shell__switcher a[aria-current="page"] {
|
||||
color: var(--toolbox-accent-contrast);
|
||||
background: var(--toolbox-accent);
|
||||
}
|
||||
|
||||
.toolbox-shell__main {
|
||||
width: min(100%, 90rem);
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 52rem) {
|
||||
.toolbox-shell__bar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbox-shell__identity {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbox-shell__actions {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.toolbox-shell__meta {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user