React: Add components.json for dev and build with examples snippets

code/core/src/core-server/build-static.ts

@@ -1,4 +1,4 @@
-import { cp, mkdir } from 'node:fs/promises';
+import { cp, mkdir, writeFile } from 'node:fs/promises';
 import { rm } from 'node:fs/promises';
 import { join, relative, resolve } from 'node:path';
 
@@ -18,6 +18,7 @@ import { global } from '@storybook/global';
 import picocolors from 'picocolors';
 
 import { resolvePackageDir } from '../shared/utils/module';
+import { type ComponentManifestGenerator } from '../types';
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { buildOrThrow } from './utils/build-or-throw';
 import { copyAllStaticFilesRelativeToMain } from './utils/copy-all-static-files';
@@ -163,6 +164,19 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
         initializedStoryIndexGenerator as Promise<StoryIndexGenerator>
       )
     );
+
+    const features = await presets.apply('features');
+
+    if (features?.componentManifestGenerator) {
+      const componentManifestGenerator: ComponentManifestGenerator = await presets.apply(
+        'componentManifestGenerator'
+      );
+      const indexGenerator = await initializedStoryIndexGenerator;
+      if (componentManifestGenerator && indexGenerator) {
+        const manifests = await componentManifestGenerator(indexGenerator);
+        await writeFile(join(options.outputDir, 'components.json'), JSON.stringify(manifests));
+      }
+    }
   }
 
   if (!core?.disableProjectJson) {

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

@@ -8,6 +8,7 @@ import polka from 'polka';
 import invariant from 'tiny-invariant';
 
 import { telemetry } from '../telemetry';
+import { type ComponentManifestGenerator } from '../types';
 import type { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { doTelemetry } from './utils/doTelemetry';
 import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
@@ -135,6 +136,22 @@ export async function storybookDevServer(options: Options) {
     throw indexError;
   }
 
+  app.use('/components.json', async (req, res) => {
+    const componentManifestGenerator: ComponentManifestGenerator = await options.presets.apply(
+      'componentManifestGenerator'
+    );
+    const indexGenerator = await initializedStoryIndexGenerator;
+    const features = await options.presets.apply('features');
+    if (features?.componentManifestGenerator && componentManifestGenerator && indexGenerator) {
+      const manifest = await componentManifestGenerator(indexGenerator);
+      res.setHeader('Content-Type', 'application/json');
+      res.end(JSON.stringify(manifest));
+    } else {
+      res.statusCode = 500;
+      res.end('No component manifest generator configured.');
+    }
+  });
+
   // Now the preview has successfully started, we can count this as a 'dev' event.
   doTelemetry(app, core, initializedStoryIndexGenerator, options);
 

code/core/src/csf-tools/CsfFile.ts

@@ -295,7 +295,7 @@ export class CsfFile {
 
   _metaStatement: t.Statement | undefined;
 
-  _metaNode: t.Expression | undefined;
+  _metaNode: t.ObjectExpression | undefined;
 
   _metaPath: NodePath<t.ExportDefaultDeclaration> | undefined;
 

code/core/src/types/modules/core-common.ts

@@ -6,6 +6,7 @@ import type { Server as NetServer } from 'net';
 import type { Options as TelejsonOptions } from 'telejson';
 import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest';
 
+import { type StoryIndexGenerator } from '../../core-server';
 import type { Indexer, StoriesEntry } from './indexer';
 
 /** ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now! */
@@ -343,6 +344,16 @@ export type TagsOptions = Record<Tag, Partial<TagOptions>>;
  * The interface for Storybook configuration used internally in presets The difference is that these
  * values are the raw values, AKA, not wrapped with `PresetValue<>`
  */
+
+export interface ComponentManifest {
+  id: string;
+  examples: { name: string; snippet: string }[];
+}
+
+export type ComponentManifestGenerator = (
+  storyIndexGenerator: StoryIndexGenerator
+) => Promise<Record<string, ComponentManifest>>;
+
 export interface StorybookConfigRaw {
   /**
    * Sets the addons you want to use with Storybook.
@@ -356,6 +367,7 @@ export interface StorybookConfigRaw {
    */
   addons?: Preset[];
   core?: CoreConfig;
+  componentManifestGenerator?: ComponentManifestGenerator;
   staticDirs?: (DirectoryMapping | string)[];
   logLevel?: string;
   features?: {
@@ -453,6 +465,8 @@ export interface StorybookConfigRaw {
     developmentModeForBuild?: boolean;
     /** Only show input controls in Angular */
     angularFilterNonInputControls?: boolean;
+
+    componentManifestGenerator?: boolean;
   };
 
   build?: TestBuildConfig;

code/core/src/types/modules/indexer.ts

@@ -70,6 +70,7 @@ export interface BaseIndexEntry {
   title: ComponentTitle;
   tags?: Tag[];
   importPath: Path;
+  componentPath?: Path;
 }
 export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';