@conduction/docusaurus-preset 3.31.0 → 3.33.0

package/src/components/FlowMock/FlowMock.jsx

@@ -0,0 +1,151 @@
+/**
+ * <FlowMock />
+ *
+ * Token-built abstract representation of the flow editor: white node
+ * cards on a dotted canvas, a coloured 4px left bar per node (mint =
+ * trigger, lavender = steps, vermillion = end), greeked title +
+ * mono subtitle lines, and curved grey edges with small pill labels
+ * between the nodes. Same abstraction level as <AppMock> (reference:
+ * honeycomb.io/technologies/*) — recognisable as the flow canvas,
+ * never a literal screenshot.
+ *
+ * Five nodes: trigger → two parallel steps → approval (join) → end.
+ * A mint run-line travels the trigger → step → approval → end route
+ * on a slow loop, with a subtle halo pulse on each node as the line
+ * passes. `prefers-reduced-motion: reduce` (and `running={false}`)
+ * renders the full route as a static mint path with no animation.
+ *
+ * Tokens only; no images; rectangles (the nodes *do* work, so no
+ * hexes); no orange accent used.
+ *
+ * Usage:
+ *
+ *   <FlowMock />
+ *   <FlowMock size="sm" caption="Automate" />
+ *   <FlowMock running={false} />
+ *
+ * Props:
+ *   - size:      'sm' | 'md' (default)      — frame width, as AppMock
+ *   - caption:   string | true              — small caption below the
+ *                frame; `true` renders the default "Flow editor"
+ *   - running:   boolean (default true)     — false freezes the
+ *                run-line to the static full mint path
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './FlowMock.module.css';
+
+/* The run-line route: trigger right port, up along the first edge,
+   across step A, down to the approval join, across it, into the end
+   node. pathLength="1" normalises the dash arithmetic so the CSS
+   animation is geometry-independent. */
+const RUN_PATH =
+  'M164,211 C205,211 200,91 240,91 L380,91 C420,91 416,211 456,211 L596,211 C614,211 618,211 636,211';
+
+/* Grey edges, drawn separately from the run-line so the second
+   (parallel) branch and the join edge stay visible under it. */
+const EDGES = [
+  'M164,211 C205,211 200,91 240,91',   /* trigger → step A */
+  'M164,211 C205,211 200,331 240,331', /* trigger → step B */
+  'M380,91 C420,91 416,211 456,211',   /* step A → approval */
+  'M380,331 C420,331 416,211 456,211', /* step B → approval */
+  'M596,211 C614,211 618,211 636,211', /* approval → end */
+];
+
+/* Small pill labels sitting mid-edge, greeked (a bar, not words). */
+const PILLS = [
+  {cx: 202, cy: 151},
+  {cx: 202, cy: 271},
+  {cx: 418, cy: 151},
+  {cx: 418, cy: 271},
+];
+
+/* Node cards. kind drives the left-bar colour class; pulse marks the
+   nodes the run-line passes (trigger, step A, approval, end). */
+const NODES = [
+  {x: 24,  y: 176, w: 140, h: 70, kind: 'trigger',  label: 'Trigger',  pulse: 0},
+  {x: 240, y: 56,  w: 140, h: 70, kind: 'step',     label: 'Step',     pulse: 1},
+  {x: 240, y: 296, w: 140, h: 70, kind: 'step',     label: 'Step'},
+  {x: 456, y: 172, w: 140, h: 78, kind: 'approval', label: 'Approval', pulse: 2},
+  {x: 636, y: 183, w: 62,  h: 56, kind: 'end',      label: 'End',      pulse: 3},
+];
+
+function Node({node}) {
+  const {x, y, w, h, kind, label, pulse} = node;
+  const pad = 12;
+  const compact = w < 100;
+  return (
+    <g>
+      {pulse !== undefined && (
+        <rect
+          className={[styles.halo, styles[`halo-${pulse}`]].join(' ')}
+          x={x - 3} y={y - 3} width={w + 6} height={h + 6} rx={10}
+        />
+      )}
+      <rect className={styles.card} x={x} y={y} width={w} height={h} rx={8} />
+      <rect className={[styles.bar, styles[`bar-${kind}`]].join(' ')} x={x + 3} y={y + 6} width={4} height={h - 12} rx={2} />
+      <text className={styles.kindLabel} x={x + pad} y={y + 18}>{label}</text>
+      {!compact && (
+        <>
+          <rect className={styles.titleGreek} x={x + pad} y={y + 26} width={w * 0.55} height={5} rx={1.5} />
+          <rect className={styles.subGreek} x={x + pad} y={y + 40} width={w * 0.68} height={3} rx={1} />
+          <rect className={styles.subGreek} x={x + pad} y={y + 48} width={w * 0.44} height={3} rx={1} />
+        </>
+      )}
+      {compact && (
+        <rect className={styles.subGreek} x={x + pad} y={y + 28} width={w - pad * 2} height={3} rx={1} />
+      )}
+    </g>
+  );
+}
+
+export default function FlowMock({size = 'md', caption, running = true, className}) {
+  /* Unique pattern id per instance so several mocks on one page
+     don't collide on the dot-grid <pattern>. */
+  const dotsId = `fm-dots-${React.useId().replace(/[^a-zA-Z0-9-]/g, '')}`;
+  return (
+    <div className={styles.fm}>
+      <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
+        <div className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}>
+          <svg
+            className={styles.canvas}
+            viewBox="0 0 720 450"
+            role="img"
+            aria-label="Abstract flow-editor canvas: a trigger fans out to two parallel steps, joins at an approval, and ends."
+          >
+            <defs>
+              <pattern id={dotsId} width="16" height="16" patternUnits="userSpaceOnUse">
+                <circle className={styles.dot} cx="2" cy="2" r="1" />
+              </pattern>
+            </defs>
+            <rect className={styles.surface} x="0" y="0" width="720" height="450" />
+            <rect fill={`url(#${dotsId})`} x="0" y="0" width="720" height="450" />
+
+            {EDGES.map((d, i) => (
+              <path key={i} className={styles.edge} d={d} />
+            ))}
+
+            <path className={styles.runline} d={RUN_PATH} pathLength="1" />
+
+            {PILLS.map((p, i) => (
+              <g key={i}>
+                <rect className={styles.pill} x={p.cx - 17} y={p.cy - 7} width={34} height={14} rx={7} />
+                <rect className={styles.pillGreek} x={p.cx - 9} y={p.cy - 1.5} width={18} height={3} rx={1} />
+              </g>
+            ))}
+
+            {NODES.map((n, i) => (
+              <Node key={i} node={n} />
+            ))}
+          </svg>
+        </div>
+        {caption && (
+          <figcaption className={styles.caption}>
+            {caption === true ? 'Flow editor' : caption}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+}

package/src/components/FlowMock/FlowMock.module.css

@@ -0,0 +1,164 @@
+/**
+ * <FlowMock /> styles.
+ *
+ * Every rule is scoped under a `.fm` parent, the same convention as
+ * AppMock's `.am`: React wraps the mock in `<div className={styles.fm}>`,
+ * a static-HTML specimen wraps it in `<div class="fm">` and loads this
+ * file as a plain global stylesheet (CSS Modules keeps the literal
+ * selector text). `display: contents` keeps the scope wrapper
+ * transparent to layout.
+ *
+ * Tokens only. Node bars: mint = trigger, lavender = steps/approval,
+ * vermillion = end. The run-line is mint (--c-mint-500); no orange.
+ */
+
+.fm { display: contents; }
+
+.fm .figure {
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  max-width: 100%;
+}
+
+.fm .frame {
+  width: 100%;
+  max-width: 720px;
+  aspect-ratio: 16 / 10;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  overflow: hidden;
+  position: relative;
+}
+.fm .size-sm { max-width: 480px; }
+.fm .size-md { max-width: 720px; }
+
+.fm .canvas { display: block; width: 100%; height: 100%; }
+
+.fm .caption {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--c-cobalt-400);
+  text-transform: uppercase;
+  text-align: center;
+}
+
+/* ---- Canvas ---- */
+
+.fm .surface { fill: var(--c-cobalt-50); }
+.fm .dot { fill: var(--c-cobalt-200); }
+
+/* ---- Edges + pill labels ---- */
+
+.fm .edge {
+  fill: none;
+  stroke: var(--c-cobalt-200);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.fm .pill {
+  fill: white;
+  stroke: var(--c-cobalt-100);
+  stroke-width: 1;
+}
+.fm .pillGreek { fill: var(--c-cobalt-300); }
+
+/* ---- Nodes ---- */
+
+.fm .card {
+  fill: white;
+  stroke: var(--c-cobalt-100);
+  stroke-width: 1;
+}
+
+.fm .bar { fill: var(--c-cobalt-300); }
+.fm .bar-trigger  { fill: var(--c-mint-500); }
+.fm .bar-step     { fill: var(--c-lavender-500); }
+.fm .bar-approval { fill: var(--c-lavender-500); }
+.fm .bar-end      { fill: var(--c-red-vermillion); }
+
+.fm .kindLabel {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  fill: var(--c-cobalt-400);
+}
+
+.fm .titleGreek { fill: var(--c-cobalt-700); }
+.fm .subGreek   { fill: var(--c-cobalt-200); }
+
+/* ---- Run-line animation ----
+ *
+ * The route path carries pathLength="1", so the dash arithmetic is
+ * geometry-independent: a 0.28-long mint segment on a 1.28 period
+ * travels the full route once per cycle. Animating the offset from
+ * 1.28 to 0 shifts the pattern forward exactly one period, so the
+ * loop is seamless (the segment exits the end node as its successor
+ * enters the trigger). */
+
+.fm .runline {
+  fill: none;
+  stroke: var(--c-mint-500);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 0.28 1;
+  stroke-dashoffset: 1.28;
+  animation: fmRun var(--fm-dur, 7s) linear infinite;
+}
+
+@keyframes fmRun {
+  from { stroke-dashoffset: 1.28; }
+  to   { stroke-dashoffset: 0; }
+}
+
+/* Halo pulse on the nodes the run-line passes. Delays approximate
+   where along the route each node sits (trigger 0%, step ~30%,
+   approval ~62%, end ~85% of the cycle). */
+.fm .halo {
+  fill: none;
+  stroke: var(--c-mint-500);
+  stroke-width: 2;
+  opacity: 0;
+  animation: fmPulse var(--fm-dur, 7s) linear infinite;
+}
+.fm .halo-0 { animation-delay: 0s; }
+.fm .halo-1 { animation-delay: calc(var(--fm-dur, 7s) * 0.3); }
+.fm .halo-2 { animation-delay: calc(var(--fm-dur, 7s) * 0.62); }
+.fm .halo-3 { animation-delay: calc(var(--fm-dur, 7s) * 0.85); }
+
+@keyframes fmPulse {
+  0%   { opacity: 0; }
+  4%   { opacity: 0.55; }
+  12%  { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+/* ---- Static renderings ----
+ *
+ * Both `running={false}` (the .static class) and the user's
+ * prefers-reduced-motion setting freeze the mock to the full mint
+ * route with no dash travel and no pulse. */
+
+.fm .static .runline {
+  animation: none;
+  stroke-dasharray: none;
+  stroke-dashoffset: 0;
+}
+.fm .static .halo { animation: none; opacity: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .fm .runline {
+    animation: none;
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+  }
+  .fm .halo { animation: none; opacity: 0; }
+}

package/src/components/KanbanMock/KanbanMock.jsx

@@ -0,0 +1,149 @@
+/**
+ * <KanbanMock />
+ *
+ * Token-built abstract of the pipelinq kanban board with a looping
+ * drag animation: a cursor picks up the top lead card in the first
+ * column (the card lifts), drags it to the second column, drops it,
+ * and at the drop moment the column counts nudge (3→2, 2→3) and the
+ * per-lane € KPI tiles above the board shift the moved deal's value
+ * (€ 48k→€ 30k, € 27k→€ 45k; the third lane stays € 64k). Loops
+ * every ~7 seconds and resets cleanly at loop start. Pipelinq's
+ * hero/panel illustration.
+ *
+ * Named KanbanMock rather than PipelineMock because the preset
+ * already ships a `Pipeline` component (the hex-numbered process
+ * strip) and a `cn-pipeline` diagram; this one is the *board*.
+ *
+ * Same abstraction level as <AppMock>: greeked cards, tokens only,
+ * short labels at most, no orange. `prefers-reduced-motion: reduce`
+ * (and `running={false}`) renders the static board — no cursor, no
+ * lift, the card resting in its origin column.
+ *
+ * Usage:
+ *
+ *   <KanbanMock />
+ *   <KanbanMock size="sm" caption />
+ *   <KanbanMock running={false} />
+ *
+ * Props:
+ *   - size:      'sm' | 'md' (default)  — frame width, as AppMock
+ *   - caption:   string | true          — small label below the frame;
+ *                `true` renders the default "Pipeline board"
+ *   - running:   boolean (default true) — false freezes the board
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './KanbanMock.module.css';
+
+function CardGreek({wide, dot}) {
+  return (
+    <>
+      <span className={styles.cardTop}>
+        <span className={styles.cardBar} style={{width: wide ? '72%' : '55%'}} />
+        {dot && <span className={styles.cardDot} />}
+      </span>
+      <span className={styles.cardLine} />
+      <span className={styles.cardLine} style={{width: '58%'}} />
+    </>
+  );
+}
+
+function Count({from, to}) {
+  /* Two stacked digits crossfading on the shared timeline: `from`
+     shows until the drop settles (54%), `to` after it, back again for
+     the next loop. Static renderings show `from`. */
+  return (
+    <span className={styles.count}>
+      <span className={styles.countBefore}>{from}</span>
+      <span className={styles.countAfter}>{to}</span>
+    </span>
+  );
+}
+
+function Kpi({from, to}) {
+  /* Small € tile above a lane. Reuses the count crossfade classes so
+     the value swaps at the same drop moment as the column counts and
+     shows `from` in static renderings. A `to` of undefined renders a
+     lane whose total never changes. */
+  return (
+    <div className={styles.kpi}>
+      <span className={styles.kpiBar} />
+      <span className={styles.kpiValue}>
+        {to != null ? (
+          <>
+            <span className={styles.countBefore}>{from}</span>
+            <span className={styles.countAfter}>{to}</span>
+          </>
+        ) : (
+          <span className={styles.kpiStill}>{from}</span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+export default function KanbanMock({size = 'md', caption, running = true, className}) {
+  return (
+    <div className={styles.km}>
+      <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
+        <div
+          className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}
+          role="img"
+          aria-label="Abstract kanban board: a lead card is dragged from the first column to the second; the column counts and the lane value totals update at the drop."
+        >
+          <div className={styles.board}>
+            <div className={styles.kpis}>
+              <Kpi from="€ 48k" to="€ 30k" />
+              <Kpi from="€ 27k" to="€ 45k" />
+              <Kpi from="€ 64k" />
+            </div>
+            <div className={styles.col}>
+              <div className={styles.colHead}>
+                <span className={styles.colBar} />
+                <Count from="3" to="2" />
+              </div>
+              {/* The top slot belongs to the dragged card (rendered
+                  absolutely so it can travel); it reads as an empty
+                  gap while the card is away. */}
+              <div className={styles.slotGap} />
+              <div className={styles.card}><CardGreek wide /></div>
+              <div className={styles.card}><CardGreek /></div>
+            </div>
+            <div className={styles.col}>
+              <div className={styles.colHead}>
+                <span className={styles.colBar} />
+                <Count from="2" to="3" />
+              </div>
+              <div className={styles.slotGap} />
+              <div className={styles.card}><CardGreek /></div>
+              <div className={styles.card}><CardGreek wide /></div>
+            </div>
+            <div className={styles.col}>
+              <div className={styles.colHead}>
+                <span className={styles.colBar} />
+                <span className={styles.countStatic}>4</span>
+              </div>
+              <div className={styles.card}><CardGreek /></div>
+              <div className={styles.card}><CardGreek wide /></div>
+              <div className={styles.card}><CardGreek /></div>
+            </div>
+          </div>
+
+          {/* The travelling lead card. */}
+          <div className={styles.mover}><CardGreek wide dot /></div>
+
+          {/* The cursor doing the drag. */}
+          <svg className={styles.cursor} viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+          </svg>
+        </div>
+        {caption && (
+          <figcaption className={styles.caption}>
+            {caption === true ? 'Pipeline board' : caption}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+}