Skip to content

feat(openregister): MockScene tabs in 'Typed data, surfaced everywhere'#30

Open
rubenvdlinde wants to merge 1 commit into
developmentfrom
feature/openregister-mock-scene-tabs
Open

feat(openregister): MockScene tabs in 'Typed data, surfaced everywhere'#30
rubenvdlinde wants to merge 1 commit into
developmentfrom
feature/openregister-mock-scene-tabs

Conversation

@rubenvdlinde
Copy link
Copy Markdown
Collaborator

Summary

The OpenRegister page's Typed data, surfaced everywhere Showcase had three tabs, two of which dropped a lone <AppMock> into the panel. That underplays the integration story — the punchline is "register data shows up across the whole workspace", and a multi-mock scene reads that better than one app frame in isolation.

This swaps the first two tabs to <MockScene> compositions built from the new mock toolkit (WidgetMock + SidebarMock + IntegrationIcon, all freshly exported in @conduction/docusaurus-preset 2.6.0):

  • Mail and Files tab — OpenRegister Metadata sidebar at centre with Nextcloud Mail + Files widgets overlapping its left edge and an Activity sparkline behind it on the right. Says "one register row, lit on every workspace surface."
  • Windmill and n8n tab — OpenConnector Run-detail sidebar at centre, with OpenRegister Activity + OpenConnector Runs widgets on the left edge and a Procest Werkvoorraad widget behind it on the right. Says "register events fire workflows, outcomes write back to the row."
  • LLMs tab — keeps <AgentTrace>. The trace is already a purpose-built mock for "watch the LLM working" and a scene composition would lose that punchline.

Bumps @conduction/docusaurus-preset from ^2.1.0 to ^2.6.0 for the new exports.

Test plan

  • CI build passes
  • Visual review on the deploy preview: each tab renders the new scene with the cobalt-50 + hex watermark coming from Showcase's panel chrome (MockScene itself is transparent)
  • Tab swap animation still works (Showcase swap remains untouched)
  • LLM tab still shows the AgentTrace

Reviewer note

The new components live in:

  • docusaurus-preset/src/components/MockScene/ (the overlap stage)
  • docusaurus-preset/src/components/SidebarMock/ (Nextcloud right-side detail panel)
  • docusaurus-preset/src/components/WidgetMock/ (single dashboard tile)
  • docusaurus-preset/src/components/IntegrationIcon/ (21 monochromatic glyphs, used inside SidebarMock tabs)

Kit pages exist for each at identity.conduction.nl/components/.

🤖 Generated with Claude Code

The "Typed data, surfaced everywhere" Showcase had a single AppMock
per tab plus an AgentTrace for the LLM tab. The first two tabs
underplayed the integration story by showing one app each in
isolation; the marketing punch is "this register data shows up
everywhere", which a multi-mock scene reads better than a single
app frame.

Mail and Files tab now composes:
  - openregister-metadata SidebarMock (md, centred)
  - nextcloud-mail and nextcloud-files WidgetMocks (sm, left edge,
    overlapping the sidebar)
  - openregister-activity WidgetMock (sm, behind the sidebar at z=0)

Windmill and n8n tab now composes:
  - openconnector-run-detail SidebarMock (md, centred)
  - openregister-activity and openconnector-runs WidgetMocks (sm,
    left edge)
  - procest-werkvoorraad WidgetMock (sm, behind the sidebar at z=0)

LLMs tab keeps the AgentTrace; the trace already reads as a mock
purpose-built for "watch the LLM working", and a scene
composition would lose that punchline.

Bumps @conduction/docusaurus-preset to ^2.6.0 (was ^2.1.0) for
WidgetMock + SidebarMock + MockScene + IntegrationIcon exports;
the components themselves landed earlier under that major.
@MWest2020
Copy link
Copy Markdown
Member

Review — feat(openregister): MockScene tabs in 'Typed data, surfaced everywhere'

Verdict: 🟢 APPROVE — Schone content-update: twee single-AppMock panels vervangen door MockScene composities; preset bump van ^2.1.0 naar ^2.6.0; lockfile-churn is legitieme deduplicatie van postcss-selector-parser. CI groen.

Wat goed gaat

Mooie iteratie op de OpenRegister showcase pagina — meerdere mock-widgets samen in één scene leveren meer storytelling dan losse panels. Preset bump is consistent met de fleet move naar 2.6.0. Lockfile-diff is netto opruim: 12 identieke postcss-selector-parser 7.1.1 sub-installs gehoist naar één top-level entry. CI is volledig groen.

Findings

1. 🟡 Concern — Verifieer widget-kind 'procest-werkvoorraad' op typo — src/pages/apps/openregister.mdx:207

De Nederlandse term is 'proces' (één s), wat 'proces-werkvoorraad' als kind-identifier zou suggereren. Als de geëxporteerde kind-naam in @conduction/docusaurus-preset 2.6.0 inderdaad proces-werkvoorraad is, dan rendert deze widget silent leeg op productie.

Impact: Een kale showcase widget op de OpenRegister pagina als de typo aan deze kant zit; geen runtime error.

Suggested fix: Check de geëxporteerde kind-name in de preset's component registry (b.v. node_modules/@conduction/docusaurus-preset/dist/components/registry.{js,d.ts}) en corrigeer zo nodig. Deploy preview kan dit ook bevestigen voor merge.

2. 🟢 Minor — Ongebruikte import AppMock — src/pages/apps/openregister.mdx:7

AppMock zit nog in de import-destructure maar wordt na deze PR nergens meer gebruikt — de twee tabs gebruiken nu <MockScene> en de LLMs-tab gebruikt <AgentTrace>. Strict MDX/ESLint configs waarschuwen op deze unused.

Impact: Geen runtime impact, alleen ruis op de importregel.

Suggested fix: Verwijder AppMock uit de destructure.

3. 🟢 Minor — Mogelijke right-edge clipping van de widget op x:480 — src/pages/apps/openregister.mdx:207

Scene-breedte is 680px; widget staat op x:480. Een sm widget van ~200px bereikt exact 680px — geen marge. Afhankelijk van MockScene's overflow-handling kan dit clipping of een horizontale scrollbar opleveren.

Impact: Mogelijk visuele glitch op het showcase blok.

Suggested fix: Check de deploy preview voor clipping; shift de background widget 20-40px links indien nodig.

4. 🟢 Minor — Geen ARIA-label op MockScene composities — src/pages/apps/openregister.mdx:189

Geen van beide MockScene-usages geeft aria-label, role, of een alt-equivalent prop mee. Als MockScene als decoratief rendert, hoort er aria-hidden="true" op om screenreaders niet lastig te vallen met layout-elementen.

Impact: Mogelijk schermlezer-ruis op de showcase tabs.

Suggested fix: Check de default ARIA-handling van MockScene in de preset; voeg aria-hidden="true" toe aan beide usages als de preset het niet zelf doet.


Geconsolideerde review via /review-pr — Thorough mode.

Copy link
Copy Markdown
Member

@MWest2020 MWest2020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zie consolidated review comment voor complimenten, findings en suggested fixes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants