Merge pull request #22375 from storybookjs/norbert/fix-22348

CLI: Fix copyTemplate failures on `init`

code/lib/cli/src/generators/ANGULAR/index.ts

@@ -79,8 +79,15 @@ const generator: Generator<{ projectName: string }> = async (
     });
   }
 
-  const templateDir = join(getCliDir(), 'templates', 'angular', projectType || 'application');
-  copyTemplate(templateDir, root || undefined);
+  let projectTypeValue = projectType || 'application';
+  if (projectTypeValue !== 'application' && projectTypeValue !== 'library') {
+    projectTypeValue = 'application';
+  }
+
+  const templateDir = join(getCliDir(), 'templates', 'angular', projectTypeValue);
+  if (templateDir) {
+    copyTemplate(templateDir, root || undefined);
+  }
 
   return {
     projectName: angularProjectName,

code/lib/cli/src/generators/AURELIA/index.ts

@@ -25,8 +25,11 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'aurelia', {
     extraPackages: ['aurelia'],
   });
+
   const templateDir = join(getCliDir(), 'templates', 'aurelia');
-  copyTemplate(templateDir);
+  if (templateDir) {
+    copyTemplate(templateDir);
+  }
 };
 
 export default generator;

code/lib/cli/src/generators/SERVER/index.ts

@@ -1,16 +1,10 @@
-import { join } from 'path';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
-import { copyTemplate } from '../../helpers';
-import { getCliDir } from '../../dirs';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'server', {
     extensions: ['json'],
   });
-
-  const templateDir = join(getCliDir(), 'templates', 'server');
-  copyTemplate(templateDir);
 };
 
 export default generator;

code/lib/cli/src/sandbox-templates.ts

@@ -454,6 +454,17 @@ const internalTemplates = {
       },
     },
   },
+  'internal/server-webpack5': {
+    name: 'Server Webpack5',
+    script: 'yarn init -y',
+    expected: {
+      framework: '@storybook/server-webpack5',
+      renderer: '@storybook/server',
+      builder: '@storybook/builder-webpack5',
+    },
+    isInternal: true,
+    inDevelopment: true,
+  },
   // 'internal/pnp': {
   //   ...baseTemplates['cra/default-ts'],
   //   name: 'PNP (cra/default-ts)',

code/renderers/server/package.json

@@ -31,6 +31,11 @@
       "require": "./dist/config.js",
       "import": "./dist/config.mjs"
     },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -49,9 +54,12 @@
   },
   "dependencies": {
     "@storybook/core-client": "7.0.9",
+    "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "7.0.9",
     "@storybook/types": "7.0.9",
+    "@types/fs-extra": "^11.0.1",
+    "fs-extra": "^11.1.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -66,7 +74,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/config.ts",
+      "./src/preset.ts"
     ],
     "platform": "browser"
   },

code/renderers/server/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/renderers/server/src/preset.ts

@@ -0,0 +1,33 @@
+import fs from 'fs-extra';
+import { toId } from '@storybook/csf';
+import type { StaticMeta } from '@storybook/csf-tools';
+import type { IndexerOptions, IndexedStory, StoryIndexer } from '@storybook/types';
+
+export const storyIndexers = (indexers: StoryIndexer[] | null) => {
+  const jsonIndexer = async (fileName: string, opts: IndexerOptions) => {
+    const json = await fs.readJson(fileName, 'utf-8');
+    const meta: StaticMeta = {
+      title: json.title,
+    };
+    const stories: IndexedStory[] = json.stories.map((story: { name: string }) => {
+      const id = toId(meta.title, story.name);
+      const { name } = story;
+      const indexedStory: IndexedStory = {
+        id,
+        name,
+      };
+      return indexedStory;
+    });
+    return {
+      meta,
+      stories,
+    };
+  };
+  return [
+    {
+      test: /(stories|story)\.json$/,
+      indexer: jsonIndexer,
+    },
+    ...(indexers || []),
+  ];
+};

code/renderers/server/template/cli/button.stories.json

@@ -1,7 +1,10 @@
 {
   "title": "Example/Button",
   "parameters": {
-    "server": { "id": "button" }
+    "server": {
+      "url": "https://storybook-server-demo.netlify.app/api",
+      "id": "button"
+    }
   },
   "args": { "label": "Button" },
   "argTypes": {

code/renderers/server/template/cli/header.stories.json

@@ -1,7 +1,10 @@
 {
   "title": "Example/Header",
   "parameters": {
-    "server": { "id": "header" }
+    "server": {
+      "url": "https://storybook-server-demo.netlify.app/api",
+      "id": "header"
+    }
   },
   "stories": [
     {

code/renderers/server/template/cli/page.stories.json

@@ -1,7 +1,10 @@
 {
   "title": "Example/Page",
   "parameters": {
-    "server": { "id": "page" }
+    "server": {
+      "url": "https://storybook-server-demo.netlify.app/api",
+      "id": "page"
+    }
   },
   "stories": [
     {

code/yarn.lock

@@ -6973,9 +6973,12 @@ __metadata:
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
     "@storybook/core-client": 7.0.9
+    "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
     "@storybook/preview-api": 7.0.9
     "@storybook/types": 7.0.9
+    "@types/fs-extra": ^11.0.1
+    fs-extra: ^11.1.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   languageName: unknown

scripts/sandbox/generate.ts

@@ -132,7 +132,9 @@ const runGenerators = async (
   await Promise.all(
     generators.map(({ dirName, name, script, expected }) =>
       limit(async () => {
-        const flags = expected.renderer === '@storybook/html' ? ['--type html'] : [];
+        let flags: string[] = [];
+        if (expected.renderer === '@storybook/html') flags = ['--type html'];
+        else if (expected.renderer === '@storybook/server') flags = ['--type server'];
 
         const time = process.hrtime();
         console.log(`🧬 Generating ${name}`);

scripts/tasks/sandbox-parts.ts

@@ -100,7 +100,9 @@ export const install: Task['run'] = async (
     );
   }
 
-  const extra = template.expected.renderer === '@storybook/html' ? { type: 'html' } : {};
+  let extra = {};
+  if (template.expected.renderer === '@storybook/html') extra = { type: 'html' };
+  else if (template.expected.renderer === '@storybook/server') extra = { type: 'server' };
 
   await executeCLIStep(steps.init, {
     cwd,
@@ -367,7 +369,10 @@ export const addStories: Task['run'] = async (
   const packageJson = await import(join(cwd, 'package.json'));
   updateStoriesField(mainConfig, detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT);
 
-  const isCoreRenderer = template.expected.renderer.startsWith('@storybook/');
+  const isCoreRenderer =
+    template.expected.renderer.startsWith('@storybook/') &&
+    template.expected.renderer !== '@storybook/server';
+
   if (isCoreRenderer) {
     // Link in the template/components/index.js from store, the renderer and the addons
     const rendererPath = await workspacePath('renderer', template.expected.renderer);