Address feedback

Author: kasperpeulen

code/.storybook/main.ts

@@ -138,7 +138,6 @@ const config = defineMain({
  developmentModeForBuild: true,
  experimentalTestSyntax: true,
  experimentalComponentsManifest: true,
- experimentalCodeExamples: true,
  },
  staticDirs: [{ from: './bench/bundle-analyzer', to: '/bundle-analyzer' }],
  viteFinal: async (viteConfig, { configType }) => {

code/core/src/core-server/manifest.ts

@@ -15,7 +15,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  const totals = {
  components: entries.length,
  componentsWithPropTypeError: analyses.filter((a) => a.hasPropTypeError).length,
- warnings: analyses.filter((a) => a.hasWarns).length,
+ infos: analyses.filter((a) => a.hasWarns).length,
  stories: analyses.reduce((sum, a) => sum + a.totalStories, 0),
  storyErrors: analyses.reduce((sum, a) => sum + a.storyErrors, 0),
  };
@@ -26,9 +26,9 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  totals.componentsWithPropTypeError > 0
  ? `<a class="filter-pill err" data-k="errors" href="#filter-errors">${totals.componentsWithPropTypeError}/${totals.components} prop type ${plural(totals.componentsWithPropTypeError, 'error')}</a>`
  : `<span class="filter-pill ok" aria-disabled="true">${totals.components} components ok</span>`;
- const compWarningsPill =
- totals.warnings > 0
- ? `<a class="filter-pill warn" data-k="warnings" href="#filter-warnings">${totals.warnings}/${totals.components} ${plural(totals.warnings, 'warning')}</a>`
+ const compInfosPill =
+ totals.infos > 0
+ ? `<a class="filter-pill info" data-k="infos" href="#filter-infos">${totals.infos}/${totals.components} ${plural(totals.infos, 'info', 'infos')}</a>`
  : '';
  const storiesPill =
  totals.storyErrors > 0
@@ -78,10 +78,10 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  --muted: #9aa0a6;
  --fg: #e8eaed;
  --ok: #22c55e;
- --warn: #b08900;
+ --info: #1e88e5;
  --err: #c62828;
  --ok-bg: #0c1a13;
- --warn-bg: #1a1608;
+ --info-bg: #0c1624;
  --err-bg: #1a0e0e;
  --chip: #1f2330;
  --border: #2b2f3a;
@@ -157,10 +157,10 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  background: color-mix(in srgb, var(--ok) 18%, #000);
  }
 
- .filter-pill.warn {
- color: #ffd666;
- border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
- background: var(--warn-bg);
+ .filter-pill.info {
+ color: #b3d9ff;
+ border-color: color-mix(in srgb, var(--info) 55%, var(--border));
+ background: var(--info-bg);
  }
 
  .filter-pill.err {
@@ -189,7 +189,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  /* Selected top pill ring via :target */
  #filter-all:target ~ header .filter-pill[data-k='all'],
  #filter-errors:target ~ header .filter-pill[data-k='errors'],
- #filter-warnings:target ~ header .filter-pill[data-k='warnings'],
+ #filter-infos:target ~ header .filter-pill[data-k='infos'],
  #filter-story-errors:target ~ header .filter-pill[data-k='story-errors'] {
  box-shadow: 0 0 0 var(--active-ring) currentColor;
  border-color: currentColor;
@@ -198,7 +198,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  /* Hidden targets for filtering */
  #filter-all,
  #filter-errors,
- #filter-warnings,
+ #filter-infos,
  #filter-story-errors {
  display: none;
  }
@@ -294,9 +294,9 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  }
 
- .badge.warn {
- color: #ffd666;
- border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
+ .badge.info {
+ color: #b3d9ff;
+ border-color: color-mix(in srgb, var(--info) 55%, var(--border));
  }
 
  .badge.err {
@@ -310,7 +310,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
 
  /* 1px ring on active toggle */
  .tg-err:checked + label.as-toggle,
- .tg-warn:checked + label.as-toggle,
+ .tg-info:checked + label.as-toggle,
  .tg-stories:checked + label.as-toggle,
  .tg-props:checked + label.as-toggle {
  box-shadow: 0 0 0 var(--active-ring) currentColor;
@@ -331,7 +331,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  display: grid;
  }
 
- .tg-warn:checked ~ .panels .panel-warn {
+ .tg-info:checked ~ .panels .panel-info {
  display: grid;
  gap: 8px;
  }
@@ -345,7 +345,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  display: grid;
  }
 
- /* Colored notes for prop type error + warnings */
+ /* Colored notes for prop type error + info */
  .note {
  padding: 12px;
  border: 1px solid var(--border);
@@ -358,10 +358,10 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  color: #ffd1d4;
  }
 
- .note.warn {
- border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
- background: var(--warn-bg);
- color: #ffe9a6;
+ .note.info {
+ border-color: color-mix(in srgb, var(--info) 55%, var(--border));
+ background: var(--info-bg);
+ color: #d6e8ff;
  }
 
  .note.ok {
@@ -493,7 +493,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  display: none;
  }
 
- #filter-warnings:target ~ main .card:not(.has-warn) {
+ #filter-infos:target ~ main .card:not(.has-info) {
  display: none;
  }
 
@@ -520,7 +520,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  display: grid;
  }
  
- .card > .tg-warn:checked ~ .panels .panel-warn {
+ .card > .tg-info:checked ~ .panels .panel-info {
  display: grid;
  }
  
@@ -530,7 +530,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
 
  /* Add vertical spacing around panels only when any panel is visible */
  .card > .tg-err:checked ~ .panels,
- .card > .tg-warn:checked ~ .panels,
+ .card > .tg-info:checked ~ .panels,
  .card > .tg-stories:checked ~ .panels,
  .card > .tg-props:checked ~ .panels {
  margin: 10px 0;
@@ -539,7 +539,7 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
  /* Optional: a subtle 1px ring on the active badge, using :has() if available */
  @supports selector(.card:has(.tg-err:checked)) {
  .card:has(.tg-err:checked) label[for$='-err'],
- .card:has(.tg-warn:checked) label[for$='-warn'],
+ .card:has(.tg-info:checked) label[for$='-info'],
  .card:has(.tg-stories:checked) label[for$='-stories'],
  .card:has(.tg-props:checked) label[for$='-props'] {
  box-shadow: 0 0 0 1px currentColor;
@@ -571,12 +571,12 @@ export function renderManifestComponentsPage(manifest: ComponentsManifest) {
 <!-- Hidden targets for the top-level filters -->
 <span id="filter-all"></span>
 <span id="filter-errors"></span>
-<span id="filter-warnings"></span>
+<span id="filter-infos"></span>
 <span id="filter-story-errors"></span>
 <header>
  <div class="wrap">
  <h1>Components Manifest</h1>
- <div class="summary">${allPill}${compErrorsPill}${compWarningsPill}${storiesPill}</div>
+ <div class="summary">${allPill}${compErrorsPill}${compInfosPill}${storiesPill}</div>
  </div>
 </header>
 <main>
@@ -609,6 +609,10 @@ function analyzeComponent(c: ComponentManifest) {
  const hasPropTypeError = !!c.error;
  const warns: string[] = [];
 
+ if (!c.description?.trim()) {
+ warns.push('No description found. Write a jsdoc comment such as /** Component description */.');
+ }
+
  if (!c.import?.trim()) {
  warns.push(
  `Specify an @import jsdoc tag on your component or your stories meta such as @import import { ${c.name} } from 'my-design-system';`
@@ -632,7 +636,7 @@ function analyzeComponent(c: ComponentManifest) {
  };
 }
 
-function note(title: string, bodyHTML: string, kind: 'warn' | 'err') {
+function note(title: string, bodyHTML: string, kind: 'info' | 'err') {
  return `
  <div class="note ${kind}">
  <div class="note-title">${esc(title)}</div>
@@ -656,8 +660,8 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
  ? `<label for="${slug}-err" class="badge err as-toggle">prop type error</label>`
  : '';
 
- const warningsBadge = a.hasWarns
- ? `<label for="${slug}-warn" class="badge warn as-toggle">${a.warns.length} ${plural(a.warns.length, 'warning')}</label>`
+ const infosBadge = a.hasWarns
+ ? `<label for="${slug}-info" class="badge info as-toggle">${a.warns.length} ${plural(a.warns.length, 'info', 'infos')}</label>`
  : '';
 
  const storiesBadge =
@@ -710,7 +714,7 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
 <article
  class="card 
  ${a.hasPropTypeError ? 'has-error' : 'no-error'} 
- ${a.hasWarns ? 'has-warn' : 'no-warn'} 
+ ${a.hasWarns ? 'has-info' : 'no-info'} 
  ${a.storyErrors ? 'has-story-error' : 'no-story-error'}"
  role="listitem"
  aria-label="${esc(c.name || key)}">
@@ -719,7 +723,7 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
  <h2><span class="status-dot ${statusDot}"></span> ${esc(c.name || key)}</h2>
  <div class="badges">
  ${primaryBadge}
- ${warningsBadge}
+ ${infosBadge}
  ${storiesBadge}
  </div>
  </div>
@@ -731,7 +735,7 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
 
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
  ${a.hasPropTypeError ? `<input id="${slug}-err" class="tg tg-err" type="checkbox" hidden />` : ''}
- ${a.hasWarns ? `<input id="${slug}-warn" class="tg tg-warn" type="checkbox" hidden />` : ''}
+ ${a.hasWarns ? `<input id="${slug}-info" class="tg tg-info" type="checkbox" hidden />` : ''}
  ${a.totalStories > 0 ? `<input id="${slug}-stories" class="tg tg-stories" type="checkbox" hidden />` : ''}
  ${!a.hasPropTypeError && propEntries.length > 0 ? `<input id="${slug}-props" class="tg tg-props" type="checkbox" hidden />` : ''}
 
@@ -747,8 +751,8 @@ function renderComponentCard(key: string, c: ComponentManifest, id: string) {
  ${
  a.hasWarns
  ? `
- <div class="panel panel-warn">
- ${a.warns.map((w) => note('Warning', esc(w), 'warn')).join('')}
+ <div class="panel panel-info">
+ ${a.warns.map((w) => note('Info', esc(w), 'info')).join('')}
  </div>`
  : ''
  }

code/renderers/react/src/componentManifest/getComponentImports.ts

@@ -35,24 +35,27 @@ const addUniqueBy = <T>(arr: T[], item: T, eq: (a: T) => boolean) => {
 };
 
 /**
- * Collects all React component references used by a CSF story file and resolves as much
- * import and docgen information as possible.
+ * Collects all React component references used by a CSF story file and resolves as much import and
+ * docgen information as possible.
  *
  * Behavior:
+ *
  * - Scans the AST for JSX opening elements and meta.component to discover component identifiers.
  * - Filters out components that are locally defined without an import (these are not public imports).
  * - Maps local identifiers back to their import source/specifier when available.
  * - Optionally resolves the absolute file path of each component import (using storyFilePath) and
  * augments the result with react-docgen info and an import override tag when present.
  *
  * Notes:
+ *
  * - Member expressions like Foo.Bar are supported; namespace imports are represented accordingly.
  * - If react-docgen determines a package import override, it is stored in `importOverride`.
  *
- * @public
  * @param csf The parsed CSF file instance whose AST will be inspected.
- * @param storyFilePath Optional absolute path of the story file to resolve relative imports against.
+ * @param storyFilePath Optional absolute path of the story file to resolve relative imports
+ * against.
  * @returns An array of component references sorted by componentName.
+ * @public
  */
 export const getComponents = ({
  csf,
@@ -218,21 +221,24 @@ export const getComponents = ({
  * Builds a minimal, deduplicated list of import declarations required for the given components.
  *
  * Behavior:
+ *
  * - Components are grouped by their (possibly rewritten) source package/path.
  * - If `packageName` is provided, relative imports are rewritten to that package name.
  * - If a component provides `importOverride`, its source and specifier are respected.
  * - Namespace imports are preserved unless a rewrite forces them to named members actually used.
  * - Default imports rewritten to a package become named imports using their local identifier.
  *
  * Output order:
+ *
  * - Buckets preserve first-seen order of sources to keep declarations stable between runs.
  * - Within a bucket, namespace imports are emitted first (optionally coalesced with a default),
  * followed by named-only, then any remaining defaults/namespaces one-per-declaration.
  *
- * @public
- * @param components Component references to emit imports for. Only those with an importId are considered.
+ * @param components Component references to emit imports for. Only those with an importId are
+ *   considered.
  * @param packageName Optional package name to rewrite relative imports to.
  * @returns An array of import declaration strings, formatted by recast.
+ * @public
  */
 export const getImports = ({
  components,
@@ -497,11 +503,12 @@ export const getImports = ({
  * import declarations for those components, applying the same rewrite/override rules as
  * `getImports`.
  *
- * @public
  * @param csf The parsed CSF file instance.
  * @param packageName Optional package name used to rewrite relative imports.
- * @param storyFilePath Optional absolute path of the story file for resolving component import paths.
+ * @param storyFilePath Optional absolute path of the story file for resolving component import
+ * paths.
  * @returns An object containing the discovered components and the corresponding import statements.
+ * @public
  */
 export function getComponentData({
  csf,