mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
919f0ade99
# Description of Changes ## What & why This PR introduces the **Stirling developer portal** — a new control-plane frontend that sits alongside the existing PDF editor — plus the shared design system and workspace structure needed to host both apps in one frontend. The portal is the parent product surface: where users connect sources, compose pipelines, wire agents, and manage usage / billing / infrastructure, with the PDF editor as one capability inside it. This PR lays the **foundation** — workspace reshape, design system, app shell, navigation, and a mock-driven home — rather than wiring real backends (those surfaces are placeholders for follow-up phases). ## What's in this PR **1. Frontend repo reshape (`frontend/src/` → `frontend/editor/`)** The existing editor app moved under `frontend/editor/`, so `editor`, `portal`, and `shared` are siblings in one workspace. All references were updated accordingly: `LICENSE`, `.dockerignore`, `.gitignore`, build/sign shell scripts, the GH language-check script, the Taskfile, and Docker config. **No editor source logic changed — path references only.** **2. New shared design system (`frontend/shared/`)** - **Design tokens** in `tokens.css` as the single runtime source of truth (light/dark, category accents, gradients). `tokens.ts` now holds only the `Tier` type — the old JS palette mirror was removed (nothing consumed it and it had drifted). - ~30 framework-light **components** (Card, Button, Input, Select, Tabs, Modal, Drawer, Toast, MetricCard, StatusBadge, Skeleton, EmptyState, …) with Storybook stories. - **Typed data catalogues**: `endpoints.ts` (10 verticals / 64 endpoints) and `ops.ts`. **3. New developer portal app (`frontend/portal/`)** - App shell: `Header`, `Sidebar`, `AssistantPanel`, search modal, notifications, tier switcher, theme toggle, MSW toggle. - **Tier-aware** home (free / pay-as-you-go / enterprise): KPI strip, 30-day usage chart, onboarding checklist, quick actions, recent activity, region health, product grid, and a curated **"Popular use cases"** teaser. - **Documents** view hosting the full, tab-filterable endpoint catalogue. - Placeholder views for Sources / Pipelines / Agents / Editor / Infrastructure / Usage & Billing / Developer Docs / Settings (follow-up phases). - **MSW-mocked** API layer: `api/*` issues real `fetch`, intercepted by mocks in dev/Storybook; pointing at a real backend is just a matter of not registering MSW. `react-router` URLs; Tier / View / UI contexts. **4. Tooling & guardrails** - ESLint extended to `portal` + `shared`, with **layering-boundary rules**: `shared/` may depend only on third-party packages and itself (no `@app` / `@portal` / `@core` / `@proprietary` / Tauri), so it stays cleanly extractable into a standalone package later. - `dpdm` circular-dependency check now walks editor + portal + shared (the old glob matched only 2 files). - New **devDependencies only** — Storybook (+ a11y/docs/themes addons), MSW. No runtime dependencies added. - New tasks: `frontend:dev:portal`, `frontend:build:portal`. ## Testing done locally - `tsc` for both `portal` and `shared` projects — clean - `eslint --max-warnings=0` across the whole frontend — clean - `dpdm` circular-dependency check — no cycles - Editor builds clean: `vite build editor --mode core` (✓ built, only the pre-existing >500 kB chunk-size advisory) - Editor runs in dev (core mode) with **zero console errors**; portal runs in dev across all three tiers ## Notes for reviewers - The change is overwhelmingly **additive**: `shared/` and `portal/` are brand-new; the existing editor is path-reference changes only. - The portal is intentionally **mock-driven** at this stage — real backends and the remaining views land in follow-up phases. --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have run `task check` to verify linters, typechecks, and tests pass - [x] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing) for more details. --------- Co-authored-by: Claude Opus 4.8 (1M context) <[email protected]>
143 lines
4.5 KiB
TypeScript
143 lines
4.5 KiB
TypeScript
// Storybook compiles .storybook/* with the classic JSX runtime, so the JSX in
|
|
// the decorators below transpiles to React.createElement and needs React in
|
|
// scope. (The app + story files use the automatic runtime via the portal vite
|
|
// config; this import is specifically for the preview config file.)
|
|
import React, { useEffect } from "react";
|
|
import type { Decorator, Preview } from "@storybook/react-vite";
|
|
import { initialize, mswLoader } from "msw-storybook-addon";
|
|
import { MemoryRouter } from "react-router-dom";
|
|
import { withThemeByDataAttribute } from "@storybook/addon-themes";
|
|
import { MantineProvider } from "@mantine/core";
|
|
|
|
// Reference React so the import isn't dropped as unused by the bundler — the
|
|
// classic runtime needs it present even though it's not named in the JSX.
|
|
void React;
|
|
|
|
import { TierProvider, type Tier } from "@portal/contexts/TierContext";
|
|
import { ThemeProvider } from "@portal/contexts/ThemeContext";
|
|
import { UIProvider } from "@portal/contexts/UIContext";
|
|
import { mantineTheme } from "@portal/theme/mantineTheme";
|
|
import { handlers } from "@portal/mocks/handlers";
|
|
|
|
import "@mantine/core/styles.css";
|
|
import "@shared/tokens/tokens.css";
|
|
import "@shared/tokens/base.css";
|
|
|
|
// Start MSW once. Storybook runs in a browser so this uses the service worker.
|
|
initialize({ onUnhandledRequest: "bypass" }, handlers);
|
|
|
|
/**
|
|
* Bridge between Storybook's `tier` global toolbar and the actual TierProvider.
|
|
* Without this the toolbar would just change a label; with it, every story
|
|
* that calls useTier() reflects the active toolbar value.
|
|
*/
|
|
function TierBridge({
|
|
tier,
|
|
children,
|
|
}: {
|
|
tier: Tier;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return <TierProvider initialTier={tier}>{children}</TierProvider>;
|
|
}
|
|
|
|
/** Forces the TierProvider to re-mount whenever the toolbar tier changes. */
|
|
function TierKey({
|
|
tier,
|
|
children,
|
|
}: {
|
|
tier: Tier;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<TierBridge key={tier} tier={tier}>
|
|
{children}
|
|
</TierBridge>
|
|
);
|
|
}
|
|
|
|
/** Keeps useTheme() and the data-theme attribute in sync. */
|
|
function ThemeWatcher() {
|
|
useEffect(() => {
|
|
// The addon-themes decorator already sets data-theme on <html>.
|
|
// We just read it on mount so ThemeProvider picks it up.
|
|
}, []);
|
|
return null;
|
|
}
|
|
|
|
const withProviders: Decorator = (Story, context) => {
|
|
const tier = (context.globals.tier as Tier) ?? "pro";
|
|
// withThemeByDataAttribute exposes the toolbar theme as the `theme` global.
|
|
// Bind Mantine's color scheme to it so Mantine chrome (inputs, focus rings,
|
|
// default surfaces) follows the dark toggle alongside the SUI CSS variables.
|
|
// The global initialises to "" (before any toolbar interaction), so treat
|
|
// anything that isn't "dark" as light — matching the addon's own
|
|
// `selected || defaultTheme` fallback where defaultTheme is light.
|
|
const colorScheme = context.globals.theme === "dark" ? "dark" : "light";
|
|
return (
|
|
<MemoryRouter initialEntries={["/"]}>
|
|
<ThemeProvider>
|
|
<MantineProvider theme={mantineTheme} forceColorScheme={colorScheme}>
|
|
<TierKey tier={tier}>
|
|
<UIProvider>
|
|
<ThemeWatcher />
|
|
<Story />
|
|
</UIProvider>
|
|
</TierKey>
|
|
</MantineProvider>
|
|
</ThemeProvider>
|
|
</MemoryRouter>
|
|
);
|
|
};
|
|
|
|
const preview: Preview = {
|
|
loaders: [mswLoader],
|
|
parameters: {
|
|
layout: "padded",
|
|
controls: {
|
|
matchers: { color: /(background|color)$/i, date: /Date$/i },
|
|
},
|
|
backgrounds: {
|
|
default: "app",
|
|
values: [
|
|
{ name: "app", value: "var(--color-bg)" },
|
|
{ name: "surface", value: "var(--color-surface)" },
|
|
],
|
|
},
|
|
a11y: {
|
|
// Run axe automatically against the story root; violations show in the
|
|
// Accessibility panel. `context` replaced `element` in addon-a11y 9.x.
|
|
context: "#storybook-root",
|
|
config: {},
|
|
options: {},
|
|
test: "todo",
|
|
},
|
|
},
|
|
globalTypes: {
|
|
tier: {
|
|
name: "Tier",
|
|
description: "Subscription tier — drives useTier() everywhere",
|
|
defaultValue: "pro",
|
|
toolbar: {
|
|
icon: "star",
|
|
items: [
|
|
{ value: "free", title: "Free" },
|
|
{ value: "pro", title: "Pay-as-you-go" },
|
|
{ value: "enterprise", title: "Enterprise" },
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
withProviders,
|
|
withThemeByDataAttribute({
|
|
themes: { light: "light", dark: "dark" },
|
|
defaultTheme: "light",
|
|
attributeName: "data-theme",
|
|
}),
|
|
],
|
|
};
|
|
|
|
export default preview;
|