@conduction/docusaurus-preset 3.33.0 → 3.35.0

package/src/components/WidgetMock/WidgetMock.jsx

@@ -29,7 +29,19 @@
  *   - caption: boolean                                — adds a small
  *                                                       label below
  *                                                       the frame
+ *   - running: boolean (default true) — false freezes the widget's
+ *              animation on its meaningful static end state (same
+ *              rendering `prefers-reduced-motion: reduce` gives).
+ *              The CSS `.static` class on the frame stops keyframes.
  *   - className: string
+ *
+ * Every list-shaped variant (VARIANTS entries with `list: true`)
+ * shares one refresh primitive, styled in AppMock.module.css under
+ * `.wmLive`: a new row slides in at the top, the bottom row clips
+ * out, and the unread badge on the frame bumps as the row lands.
+ * Non-list variants (calendar grid, decks columns, activity graph,
+ * anonymise dropzone) opt out; the dropzone has its own `.zoneLive`
+ * marching-ants + file-drop treatment inside the variant itself.
  */
 
 import React from 'react';
@@ -53,22 +65,22 @@ import NextcloudRss            from './variants/NextcloudRss.jsx';
 
 const VARIANTS = {
   'docudesk-anonymise':       { Component: DocuDeskAnonymise,       label: 'DocuDesk · Anonymise drop' },
-  'docudesk-pending-sign':    { Component: DocuDeskPendingSign,     label: 'DocuDesk · Pending signatures' },
-  'procest-werkvoorraad':     { Component: ProcestWerkvoorraad,     label: 'Procest · Werkvoorraad' },
-  'procest-due-today':        { Component: ProcestDueToday,         label: 'Procest · Due today' },
+  'docudesk-pending-sign':    { Component: DocuDeskPendingSign,     label: 'DocuDesk · Pending signatures', list: true },
+  'procest-werkvoorraad':     { Component: ProcestWerkvoorraad,     label: 'Procest · Werkvoorraad', list: true },
+  'procest-due-today':        { Component: ProcestDueToday,         label: 'Procest · Due today', list: true },
   'openregister-activity':    { Component: OpenRegisterActivity,    label: 'OpenRegister · Activity' },
-  'opencatalogi-publications':{ Component: OpenCatalogiPublications,label: 'OpenCatalogi · Recent publications' },
-  'openconnector-runs':       { Component: OpenConnectorRuns,       label: 'OpenConnector · Recent runs' },
-  'decidesk-actions':         { Component: DeciDeskActions,         label: 'DeciDesk · Action items' },
-  'pipelinq-deals':           { Component: PipelinQDeals,           label: 'PipelinQ · Deals closing' },
-  'nextcloud-mail':           { Component: NextcloudMail,           label: 'Nextcloud · Important mail' },
+  'opencatalogi-publications':{ Component: OpenCatalogiPublications,label: 'OpenCatalogi · Recent publications', list: true },
+  'openconnector-runs':       { Component: OpenConnectorRuns,       label: 'OpenConnector · Recent runs', list: true },
+  'decidesk-actions':         { Component: DeciDeskActions,         label: 'DeciDesk · Action items', list: true },
+  'pipelinq-deals':           { Component: PipelinQDeals,           label: 'PipelinQ · Deals closing', list: true },
+  'nextcloud-mail':           { Component: NextcloudMail,           label: 'Nextcloud · Important mail', list: true },
   'nextcloud-calendar':       { Component: NextcloudCalendar,       label: 'Nextcloud · Calendar' },
-  'nextcloud-files':          { Component: NextcloudFiles,          label: 'Nextcloud · Recent files' },
+  'nextcloud-files':          { Component: NextcloudFiles,          label: 'Nextcloud · Recent files', list: true },
   'nextcloud-decks':          { Component: NextcloudDecks,          label: 'Nextcloud · Decks' },
-  'nextcloud-rss':            { Component: NextcloudRss,            label: 'Nextcloud · RSS feed' },
+  'nextcloud-rss':            { Component: NextcloudRss,            label: 'Nextcloud · RSS feed', list: true },
 };
 
-export default function WidgetMock({ kind, size = 'md', caption = false, className }) {
+export default function WidgetMock({ kind, size = 'md', caption = false, running = true, className }) {
   const variant = VARIANTS[kind];
   const wrap = [amStyles.am, styles.wm].filter(Boolean).join(' ');
   if (!variant) {
@@ -80,12 +92,21 @@ export default function WidgetMock({ kind, size = 'md', caption = false, classNa
       </div>
     );
   }
-  const { Component, label } = variant;
+  const { Component, label, list } = variant;
+  const frameCls = [
+    styles.wmFrame,
+    styles[`wm-size-${size}`],
+    list && amStyles.wmLive,
+    !running && amStyles.static,
+  ].filter(Boolean).join(' ');
   return (
     <div className={wrap}>
       <figure className={[styles.wmFigure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.wmFrame, styles[`wm-size-${size}`]].filter(Boolean).join(' ')}>
-          <Component />
+        <div className={frameCls}>
+          {/* Unread badge — list variants only; bumps when the fresh
+              row lands. Styled in AppMock.module.css (.wmBadge). */}
+          {list && <div className={amStyles.wmBadge}></div>}
+          <Component running={running} />
         </div>
         {caption && <figcaption className={styles.wmCaption}>{label}</figcaption>}
       </figure>

package/src/components/WidgetMock/__tests__/WidgetMock.render.test.js

@@ -0,0 +1,125 @@
+/**
+ * WidgetMock.render.test.js — renders the real <WidgetMock> JSX to
+ * static markup (the SSR path Docusaurus takes at build time) and
+ * asserts on the output: every kind renders, the wave-5 `running`
+ * plumbing puts `.static` on the frame, the ten list-shaped variants
+ * carry the shared list-refresh scope (`.wmLive`) + unread badge,
+ * the non-list variants opt out, and the anonymise dropzone exposes
+ * its marching-ants + file-drop hooks.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique
+ * as AppMock.render.test.js. CSS modules are stubbed with an identity
+ * proxy (styles.foo → 'foo').
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'WidgetMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-widget-mock-test');
+
+/* Must stay in sync with the VARIANTS map in WidgetMock.jsx. */
+const LIST_KINDS = [
+  'docudesk-pending-sign', 'procest-werkvoorraad', 'procest-due-today',
+  'opencatalogi-publications', 'openconnector-runs', 'decidesk-actions',
+  'pipelinq-deals', 'nextcloud-mail', 'nextcloud-files', 'nextcloud-rss',
+];
+const NON_LIST_KINDS = [
+  'docudesk-anonymise', 'openregister-activity', 'nextcloud-calendar',
+  'nextcloud-decks',
+];
+const KINDS = [...LIST_KINDS, ...NON_LIST_KINDS];
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let WidgetMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  WidgetMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(WidgetMock, props));
+}
+
+test('SSR smoke: every kind renders a frame, none falls through to Unknown widget', () => {
+  for (const kind of KINDS) {
+    const html = render({kind});
+    assert.match(html, /wmFrame/, `${kind}: frame missing`);
+    assert.doesNotMatch(html, /Unknown widget/, `${kind}: fell through to the unknown branch`);
+  }
+});
+
+test('running={false} adds the static class to the frame; default omits it', () => {
+  for (const kind of KINDS) {
+    assert.match(render({kind, running: false}), /wmFrame[^"]*static/, `${kind}: no static frame`);
+    assert.doesNotMatch(render({kind}), /\bstatic\b/, `${kind}: static leaked into a running frame`);
+  }
+});
+
+test('the ten list variants carry the wmLive refresh scope and the unread badge', () => {
+  for (const kind of LIST_KINDS) {
+    const html = render({kind});
+    assert.match(html, /wmFrame[^"]*wmLive/, `${kind}: missing wmLive scope`);
+    assert.match(html, /class="wmBadge"/, `${kind}: missing unread badge`);
+    assert.match(html, /class="list"/, `${kind}: wmLive on a variant without a .list`);
+  }
+});
+
+test('non-list variants opt out of the refresh primitive', () => {
+  for (const kind of NON_LIST_KINDS) {
+    const html = render({kind});
+    assert.doesNotMatch(html, /wmLive/, `${kind}: wmLive on a non-list variant`);
+    assert.doesNotMatch(html, /wmBadge/, `${kind}: badge on a non-list variant`);
+  }
+});
+
+test('docudesk-anonymise: the dropzone carries the zoneLive scope and the dropping file hex', () => {
+  const html = render({kind: 'docudesk-anonymise'});
+  assert.match(html, /w w-upload zoneLive/);
+  assert.match(html, /class="zoneFile"/);
+  assert.match(html, /class="zone"/);
+});
+
+test('caption renders the variant label', () => {
+  assert.match(render({kind: 'procest-werkvoorraad', caption: true}), /Procest · Werkvoorraad/);
+});

package/src/components/WidgetMock/variants/DocuDeskAnonymise.jsx

@@ -4,18 +4,23 @@
  * Drop a document into the dashboard tile, get back a redacted copy.
  * Visual: dashed cobalt drop-zone with a hex glyph. Status-pill is
  * absent: this widget is action-first, not status-first.
+ *
+ * Animation (wave 5, `.zoneLive`): the dashed border marches, a file
+ * hex drops into the zone, and the zone flashes mint as the redacted
+ * copy is confirmed. Static frames show the resting dropzone.
  */
 import React from 'react';
 import styles from '../../AppMock/AppMock.module.css';
 
 export default function DocuDeskAnonymise() {
   return (
-    <div className={[styles.w, styles['w-upload']].join(' ')}>
+    <div className={[styles.w, styles['w-upload'], styles.zoneLive].join(' ')}>
       <div className={styles.wHead}>
         <div className={styles.h}></div>
         <div className={styles.t}></div>
       </div>
       <div className={styles.zone}>
+        <div className={styles.zoneFile}></div>
         <div className={styles.ico}></div>
         <div className={styles.label}></div>
       </div>