@conduction/docusaurus-preset 0.1.0

package/src/components/Showcase/Showcase.jsx

@@ -0,0 +1,129 @@
+/**
+ * <Showcase />
+ *
+ * Two-pane explainer: a stack of expandable items on the left, a
+ * panel on the right that reflects whichever item is open. Reference:
+ * honeycomb.io/use-cases/ai-llm-observability ("Observability with AI
+ * Agents" accordion + product-mock pattern), translated to Conduction
+ * tokens.
+ *
+ * The right panel can be anything — an <AppMock>, a custom JSX
+ * illustration, an image. The component owns nothing about the panel
+ * shape; it just swaps which one is mounted when the user expands a
+ * different item.
+ *
+ * Used for two surfaces today:
+ *   - "The Conduction Difference" (5 rules, one panel per rule)
+ *   - "Solutions for every team" (1 use case per audience tier)
+ *
+ * Same shape, different labels. Set `layout="stack"` to render the
+ * items as horizontal tabs above the panel instead of as a vertical
+ * accordion left of it (the "Solutions for every team" variant).
+ *
+ * Usage in MDX:
+ *
+ *   <Showcase
+ *     eyebrow="The Conduction Difference"
+ *     title="Five rules, one workspace."
+ *     items={[
+ *       {
+ *         id: 'open',
+ *         title: 'Open by default.',
+ *         summary: 'Every line is EUPL-1.2 on GitHub.',
+ *         cta: {label: 'Browse on GitHub', href: 'https://github.com/ConductionNL'},
+ *         panel: <AppMock app="opencatalogi" />,
+ *       },
+ *       ...
+ *     ]}
+ *     defaultOpen="open"
+ *   />
+ */
+
+import React, {useState} from 'react';
+import styles from './Showcase.module.css';
+
+export default function Showcase({
+  eyebrow,
+  title,
+  lede,
+  items = [],
+  defaultOpen,
+  layout = 'side',
+  className,
+}) {
+  const initialId = defaultOpen || items[0]?.id;
+  const [openId, setOpenId] = useState(initialId);
+  /* The right-side panel always shows *something*. When the user toggles
+     the open item closed, fall back to the most recently opened panel
+     so the showcase doesn't go blank. lastPanelId tracks that. */
+  const [lastPanelId, setLastPanelId] = useState(initialId);
+  const open = items.find(it => it.id === openId) || null;
+  const panelItem = items.find(it => it.id === (openId || lastPanelId)) || items[0];
+
+  const toggle = (id) => {
+    if (openId === id) {
+      setOpenId(null);
+    } else {
+      setOpenId(id);
+      setLastPanelId(id);
+    }
+  };
+
+  return (
+    <section className={[styles.showcase, styles[`layout-${layout}`], className].filter(Boolean).join(' ')}>
+      {(eyebrow || title || lede) && (
+        <header className={styles.head}>
+          {eyebrow && <div className={styles.eyebrow}><span className={styles.h}></span>{eyebrow}</div>}
+          {title && <h2 className={styles.title}>{title}</h2>}
+          {lede && <p className={styles.lede}>{lede}</p>}
+        </header>
+      )}
+      <div className={styles.body}>
+        <div className={styles.list} role="tablist" aria-orientation={layout === 'side' ? 'vertical' : 'horizontal'}>
+          {items.map((it) => {
+            const isOpen = it.id === open?.id;
+            return (
+              <div key={it.id} className={[styles.item, isOpen && styles.itemOpen].filter(Boolean).join(' ')}>
+                <button
+                  role="tab"
+                  aria-selected={isOpen}
+                  aria-expanded={isOpen}
+                  aria-controls={`showcase-panel-${it.id}`}
+                  className={styles.itemHead}
+                  onClick={() => toggle(it.id)}
+                  type="button"
+                >
+                  <span className={styles.titleGroup}>
+                    {it.icon && (
+                      <span className={styles.itemIcon} aria-hidden="true">
+                        {typeof it.icon === 'string'
+                          ? <img src={it.icon} alt="" className={styles.itemIconImg} />
+                          : it.icon}
+                      </span>
+                    )}
+                    <h3 className={styles.itemTitle}>{it.title}</h3>
+                  </span>
+                  <span className={styles.chevron} aria-hidden="true">{isOpen ? '−' : '+'}</span>
+                </button>
+                {isOpen && (
+                  <div className={styles.itemBody}>
+                    {it.summary && <p className={styles.itemSummary}>{it.summary}</p>}
+                    {it.cta && (
+                      <a href={it.cta.href} className={styles.cta}>
+                        {it.cta.label}
+                      </a>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className={styles.panel} role="tabpanel" id={`showcase-panel-${panelItem?.id}`} aria-label={panelItem?.title}>
+          <div className={styles.panelHexBg} aria-hidden="true"></div>
+          <div className={styles.panelInner}>{panelItem?.panel}</div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/Showcase/Showcase.module.css

@@ -0,0 +1,168 @@
+/**
+ * <Showcase /> styles. Two layouts share the same atoms:
+ *   layout="side"  → accordion left, panel right (Conduction Difference)
+ *   layout="stack" → tabs on top, panel below (Solutions for every team)
+ */
+
+.showcase {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-12) var(--space-12);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+/* ---------- Header ---------- */
+.head { max-width: 70ch; margin: 0 0 var(--space-8); }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--c-orange-knvb);
+  margin-bottom: var(--space-3);
+}
+.eyebrow .h { width: 10px; height: 12px; clip-path: var(--hex-pointy-top); background: var(--c-orange-knvb); }
+.title {
+  font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
+  line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+}
+.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+
+/* ---------- Body ---------- */
+.body { display: grid; gap: var(--space-8); align-items: stretch; }
+.layout-side  .body { grid-template-columns: 1fr 1.2fr; }
+.layout-stack .body { grid-template-columns: 1fr; gap: var(--space-6); }
+@media (max-width: 900px) { .layout-side .body { grid-template-columns: 1fr; } }
+
+/* ---------- List of items ---------- */
+.list { display: flex; flex-direction: column; gap: var(--space-3); }
+.layout-stack .list {
+  flex-direction: row; flex-wrap: wrap; gap: var(--space-2);
+}
+
+.item {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4) var(--space-5);
+  transition: border-color 160ms, box-shadow 160ms, background 160ms;
+  display: flex; flex-direction: column; gap: var(--space-3);
+}
+.item:hover { border-color: var(--c-cobalt-300); }
+
+.itemHead {
+  /* button reset */
+  appearance: none; -webkit-appearance: none;
+  background: transparent; border: 0; padding: 0;
+  font: inherit; color: inherit; cursor: pointer;
+  width: 100%;
+  text-align: left;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
+}
+.itemHead:focus-visible { outline: 2px solid var(--c-orange-knvb); outline-offset: 2px; border-radius: var(--radius-sm); }
+
+.titleGroup {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.itemIcon {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 36px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-50);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--c-cobalt-700);
+  transition: background 160ms, color 160ms;
+}
+.itemIcon svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.itemIconImg {
+  max-width: 60%;
+  max-height: 60%;
+  object-fit: contain;
+}
+.itemOpen .itemIcon { background: var(--c-blue-cobalt); color: white; }
+
+.itemTitle { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-cobalt-900); margin: 0; }
+.chevron {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 22px; line-height: 1; color: var(--c-cobalt-400);
+  width: 22px; text-align: center;
+}
+
+.itemOpen {
+  border-color: var(--c-blue-cobalt);
+  box-shadow: var(--shadow-2);
+}
+.itemOpen .chevron { color: var(--c-blue-cobalt); }
+.itemOpen .itemTitle { color: var(--c-blue-cobalt); }
+
+.itemBody { display: flex; flex-direction: column; gap: var(--space-3); }
+.itemSummary { font-size: 14px; line-height: 1.55; color: var(--c-cobalt-700); margin: 0; }
+
+.cta {
+  align-self: flex-start;
+  display: inline-flex; align-items: center;
+  background: var(--c-blue-cobalt); color: white;
+  padding: 9px 16px;
+  border-radius: var(--radius-md);
+  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: background 160ms;
+}
+.cta:hover { background: var(--c-cobalt-700); color: white; }
+
+/* Stack-layout tabs are denser */
+.layout-stack .item { flex: 1 1 180px; padding: var(--space-3) var(--space-4); }
+.layout-stack .itemTitle { font-size: 15px; }
+.layout-stack .itemBody { display: none; }
+
+/* ---------- Right panel ---------- */
+.panel {
+  background: var(--c-cobalt-50);
+  border-radius: var(--radius-xl);
+  padding: var(--space-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  min-height: 360px;
+  overflow: hidden;
+}
+
+/* Big pointy-top hex sitting behind the panel content. The hex is
+   over-sized and pushed up so its top point and shoulder corners
+   crest the panel's top edge — two of the hex's six corners visibly
+   poke up into the layout, brand-identifying without being literal.
+   The lower half of the hex provides the cobalt-100 wash behind the
+   AppMock. */
+.panelHexBg {
+  position: absolute;
+  width: 130%;
+  aspect-ratio: 1 / 1.155;
+  top: -22%;
+  left: 50%;
+  transform: translateX(-50%);
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-100);
+  z-index: 0;
+  pointer-events: none;
+}
+.panelInner {
+  position: relative; z-index: 1;
+  width: 100%;
+  display: flex; align-items: center; justify-content: center;
+}

package/src/components/SolutionCard/SolutionCard.jsx

@@ -0,0 +1,83 @@
+/**
+ * <SolutionCard /> + <SolutionGrid />
+ *
+ * Solution card from preview/components/solution-cards.html.
+ *
+ * A card represents a *solution*, never an app. The visual structure:
+ *
+ *   ┌─────────────────────────────┐
+ *   │  ⬢ icon-hex     SECTOR-TAG  │  ← top row
+ *   │                             │
+ *   │  Title goes here.           │
+ *   │  Outcome paragraph below.   │
+ *   │  ──────────────             │  ← divider above pills
+ *   │  ⬢ App  ⬢ App  ⬢ App        │  ← built-on pills
+ *   └─────────────────────────────┘
+ *
+ * Sector tints the icon-hex (public=cobalt, mkb=cobalt-700, health=
+ * orange) but everything else stays the same.
+ *
+ * Usage in MDX:
+ *
+ *   <SolutionGrid columns={2}>
+ *     <SolutionCard
+ *       href="/solutions/woo"
+ *       sector="public"
+ *       sectorLabel="Publieke sector"
+ *       icon={<svg>...</svg>}
+ *       title="WOO compliance, by Friday."
+ *       outcome={<>A live WOO portal at your <span className="next-blue">Nextcloud</span>-hosted domain.</>}
+ *       builtOn={['OpenCatalogi', 'OpenRegister', 'OpenConnector']}
+ *     />
+ *   </SolutionGrid>
+ */
+
+import React from 'react';
+import Pill from '../primitives/Pill';
+import styles from './SolutionCard.module.css';
+
+const SECTOR_DEFAULT_LABELS = {
+  public: 'Publieke sector',
+  mkb: 'MKB',
+  health: 'Zorg',
+};
+
+export function SolutionGrid({columns = 2, children, className}) {
+  const classes = [styles.grid, styles['cols-' + columns], className].filter(Boolean).join(' ');
+  return <div className={classes}>{children}</div>;
+}
+
+export default function SolutionCard({
+  href,
+  sector = 'public',
+  sectorLabel,
+  icon,
+  title,
+  outcome,
+  builtOn = [],
+  className,
+}) {
+  const composed = [styles.card, styles['sector-' + sector], className].filter(Boolean).join(' ');
+  const Tag = href ? 'a' : 'div';
+  return (
+    <Tag href={href} className={composed}>
+      <div className={styles.top}>
+        <div className={styles.iconHex}>{icon}</div>
+        <span className={styles.sectorTag}>
+          {sectorLabel || SECTOR_DEFAULT_LABELS[sector] || sector}
+        </span>
+      </div>
+
+      {title && <h3 className={styles.title}>{title}</h3>}
+      {outcome && <p className={styles.outcome}>{outcome}</p>}
+
+      {builtOn.length > 0 && (
+        <div className={styles.builtOn}>
+          {builtOn.map((app, i) => (
+            <Pill key={i} bullet bulletColor="var(--c-blue-cobalt)">{app}</Pill>
+          ))}
+        </div>
+      )}
+    </Tag>
+  );
+}

package/src/components/SolutionCard/SolutionCard.module.css

@@ -0,0 +1,99 @@
+/**
+ * <SolutionCard /> styles. Mirrors solution-cards.css exactly.
+ */
+
+.grid { display: grid; gap: 20px; }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+
+.card {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  transition: all 160ms ease;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.card:hover {
+  border-color: var(--c-blue-cobalt);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-2);
+  text-decoration: none;
+  color: inherit;
+}
+
+.top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.iconHex {
+  width: 56px;
+  height: 64px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-blue-cobalt);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.iconHex svg {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+}
+
+.sector-public  .iconHex { background: var(--c-blue-cobalt); }
+.sector-mkb     .iconHex { background: var(--c-cobalt-700); }
+.sector-health  .iconHex { background: var(--c-orange-knvb); }
+
+.sectorTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-700);
+  background: var(--c-cobalt-50);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+}
+
+.outcome {
+  font-size: 15px;
+  color: var(--c-cobalt-700);
+  line-height: 1.55;
+  margin: 0;
+}
+.outcome :global(.next-blue) { color: var(--c-nextcloud-blue); }
+.outcome :global(.cg-yellow) { color: var(--c-commonground-yellow); }
+
+.builtOn {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: auto;
+  padding-top: 18px;
+  border-top: 1px solid var(--c-cobalt-100);
+}

package/src/components/StatsStrip/StatsStrip.jsx

@@ -0,0 +1,38 @@
+/**
+ * <StatsStrip />
+ *
+ * Four-up tile of headline numbers, sub-hero band on cobalt-50.
+ * Each stat is { value, label }; label can be a string or ReactNode
+ * (so MDX can pass <>line one<br/>line two</> for the two-line look).
+ *
+ * Mirrors preview/components/stats-strip.html.
+ *
+ * Usage in MDX:
+ *
+ *   <StatsStrip stats={[
+ *     { value: '24', label: <>apps in the ecosystem,<br/>all open-source</> },
+ *     { value: '2 min', label: 'install time' },
+ *     { value: '€0', label: 'license fee, support is optional' },
+ *     { value: 'EUPL', label: 'no vendor lock-in' },
+ *   ]} />
+ */
+
+import React from 'react';
+import styles from './StatsStrip.module.css';
+
+export default function StatsStrip({stats = []}) {
+  if (!stats.length) return null;
+
+  return (
+    <section className={styles.strip} aria-label="Key statistics">
+      <div className={styles.inner} style={{'--stats-count': stats.length}}>
+        {stats.map((stat, i) => (
+          <div key={i} className={styles.stat}>
+            <div className={styles.value}>{stat.value}</div>
+            <div className={styles.label}>{stat.label}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/StatsStrip/StatsStrip.module.css

@@ -0,0 +1,53 @@
+/**
+ * <StatsStrip /> styles. Mirrors the .strip section in
+ * preview/pages/landing.html: cobalt-50 band with top + bottom
+ * cobalt-100 borders, four-up grid inside a 1280px max-width
+ * inner container.
+ */
+
+.strip {
+  background: var(--c-cobalt-50);
+  border-top: 1px solid var(--c-cobalt-100);
+  border-bottom: 1px solid var(--c-cobalt-100);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 48px 64px;
+  display: grid;
+  grid-template-columns: repeat(var(--stats-count, 4), minmax(0, 1fr));
+  gap: 32px;
+}
+
+@media (max-width: 1100px) {
+  .inner {
+    grid-template-columns: repeat(min(var(--stats-count, 4), 4), minmax(0, 1fr));
+  }
+}
+@media (max-width: 900px) {
+  .inner {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 32px 24px;
+    gap: 24px;
+  }
+}
+@media (max-width: 500px) {
+  .inner { grid-template-columns: 1fr; }
+}
+
+.value {
+  font-size: 42px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--c-blue-cobalt);
+  line-height: 1;
+}
+
+.label {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  margin-top: 8px;
+  line-height: 1.4;
+}

package/src/components/WidgetShelf/WidgetShelf.jsx

@@ -0,0 +1,67 @@
+/**
+ * <WidgetShelf />
+ *
+ * Section that lists the dashboard widgets a Conduction app ships
+ * for Nextcloud. Each widget gets a small token-built preview, a
+ * headline, and a one-sentence description. Used on every app
+ * detail page to show "what widgets you get on the home screen
+ * the moment this app is installed".
+ *
+ * Each Conduction app that registers a Nextcloud-dashboard widget
+ * shows up automatically in MyDash; this section makes that promise
+ * concrete by drawing the widgets the app actually contributes.
+ *
+ * Usage in MDX:
+ *
+ *   <WidgetShelf
+ *     eyebrow="Widgets we ship"
+ *     title="On every Nextcloud dashboard."
+ *     lede="Install Procest and your team gets these widgets..."
+ *     widgets={[
+ *       {
+ *         title: 'Werkvoorraad',
+ *         desc: 'Active cases for the logged-in case-worker...',
+ *         panel: <div className="w w-werkvoorraad">...</div>,
+ *       },
+ *       ...
+ *     ]}
+ *   />
+ *
+ * Layout: 2 or 3 columns depending on widget count, responsive
+ * to viewport. Each card has the panel (preview) at the top,
+ * title + description below.
+ */
+
+import React from 'react';
+import styles from './WidgetShelf.module.css';
+
+export default function WidgetShelf({
+  eyebrow,
+  title,
+  lede,
+  widgets = [],
+  columns,
+  className,
+}) {
+  const cols = columns || (widgets.length >= 4 ? 3 : Math.min(widgets.length, 3));
+  return (
+    <section className={[styles.shelf, className].filter(Boolean).join(' ')}>
+      {(eyebrow || title || lede) && (
+        <header className={styles.head}>
+          {eyebrow && <div className={styles.eyebrow}><span className={styles.h}></span>{eyebrow}</div>}
+          {title && <h2 className={styles.title}>{title}</h2>}
+          {lede && <p className={styles.lede}>{lede}</p>}
+        </header>
+      )}
+      <div className={[styles.grid, styles[`cols-${cols}`]].join(' ')}>
+        {widgets.map((w, i) => (
+          <article key={i} className={styles.card}>
+            <div className={styles.panel}>{w.panel}</div>
+            {w.title && <h3 className={styles.cardTitle}>{w.title}</h3>}
+            {w.desc && <p className={styles.cardDesc}>{w.desc}</p>}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}