Build: Ignore ts stories in cra/default-js sandbox

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

@@ -319,7 +319,7 @@ export class ConfigFile {
     return _getPathProperties(rest, exported);
   }
 
-  getFieldValue(path: string[]) {
+  getFieldValue<T = any>(path: string[]): T | undefined {
     const node = this.getFieldNode(path);
     if (node) {
       const { code } = generate(node, {});

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

@@ -3,7 +3,7 @@ import type { StoryId, ComponentTitle, StoryName, Parameters, Tag, Path } from '
 type ExportName = string;
 type MetaId = string;
 
-interface StoriesSpecifier {
+export interface StoriesSpecifier {
   /**
    * When auto-titling, what to prefix all generated titles with (default: '')
    */

code/lib/cli/src/generators/configure.test.ts

@@ -29,7 +29,7 @@ describe('configureMain', () => {
     expect(mainConfigContent).toMatchInlineSnapshot(`
       "/** @type { import('@storybook/react-vite').StorybookConfig } */
       const config = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
         addons: [],
         framework: {
           name: '@storybook/react-vite',
@@ -95,7 +95,7 @@ describe('configureMain', () => {
 
       /** @type { import('@storybook/react-webpack5').StorybookConfig } */
       const config = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
         addons: [
           path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),

code/lib/cli/src/generators/configure.ts

@@ -49,8 +49,6 @@ const sanitizeFramework = (framework: string) => {
   return matches[0];
 };
 
-const typescriptExtensions = ['ts', 'tsx', 'mts', 'cts'];
-
 export async function configureMain({
   addons,
   extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'],
@@ -59,14 +57,10 @@ export async function configureMain({
   prefixes = [],
   ...custom
 }: ConfigureMainOptions) {
-  const isLanguageJavascript = language === SupportedLanguage.JAVASCRIPT;
-  const filteredExtensions = extensions.filter((extension) =>
-    isLanguageJavascript ? !typescriptExtensions.includes(extension) : true
-  );
   const srcPath = path.resolve(storybookConfigFolder, '../src');
   const prefix = (await fse.pathExists(srcPath)) ? '../src' : '../stories';
   const config = {
-    stories: [`${prefix}/**/*.mdx`, `${prefix}/**/*.stories.@(${filteredExtensions.join('|')})`],
+    stories: [`${prefix}/**/*.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
     addons,
     ...custom,
   };

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

@@ -1,4 +1,5 @@
-import type { StorybookConfigRaw } from '@storybook/core/types';
+import type { StoriesEntry, StorybookConfigRaw } from '@storybook/core/types';
+import type { ConfigFile } from '@storybook/core/csf-tools';
 
 export type SkippableTask =
   | 'smoke-test'
@@ -70,7 +71,9 @@ export type Template = {
    */
   modifications?: {
     skipTemplateStories?: boolean;
-    mainConfig?: Partial<StorybookConfigRaw>;
+    mainConfig?:
+      | Partial<StorybookConfigRaw>
+      | ((config: ConfigFile) => Partial<StorybookConfigRaw>);
     testBuild?: boolean;
     disableDocs?: boolean;
     extraDependencies?: string[];
@@ -100,6 +103,20 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
+    modifications: {
+      mainConfig: (config) => {
+        const stories = config.getFieldValue<Array<StoriesEntry>>(['stories']);
+        return {
+          stories: stories?.map((s) => {
+            if (typeof s === 'string') {
+              return s.replace(/\|(tsx?|ts)\b|\b(tsx?|ts)\|/g, '');
+            } else {
+              return s;
+            }
+          }),
+        };
+      },
+    },
   },
   'cra/default-ts': {
     name: 'Create React App Latest (Webpack | TypeScript)',

scripts/tasks/sandbox-parts.ts

@@ -42,6 +42,7 @@ import { workspacePath } from '../utils/workspace';
 import { babelParse } from '../../code/core/src/csf-tools/babelParse';
 import { CODE_DIRECTORY, REPROS_DIRECTORY } from '../utils/constants';
 import type { TemplateKey } from '../../code/lib/cli/src/sandbox-templates';
+import { isFunction } from 'lodash';
 
 const logger = console;
 
@@ -278,7 +279,9 @@ function addStoriesEntry(mainConfig: ConfigFile, path: string, disableDocs: bool
   const entry = {
     directory: slash(join('../template-stories', path)),
     titlePrefix: slash(path),
-    files: disableDocs ? '**/*.stories.@(js|jsx|ts|tsx)' : '**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+    files: disableDocs
+      ? '**/*.stories.@(js|jsx|mjs|ts|tsx)'
+      : '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))',
   };
 
   mainConfig.setFieldValue(['stories'], [...stories, entry]);
@@ -536,7 +539,9 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d
     addRefs(mainConfig);
   }
 
-  const templateConfig = template.modifications?.mainConfig || {};
+  const templateConfig = isFunction(template.modifications?.mainConfig)
+    ? template.modifications?.mainConfig(mainConfig)
+    : template.modifications?.mainConfig || {};
   const configToAdd = {
     ...templateConfig,
     features: {