feat: add warning for TypeScript setup issues

lib/cli/package.json

@@ -51,6 +51,7 @@
     "find-up": "^4.1.0",
     "fs-extra": "^9.0.0",
     "get-port": "^5.1.1",
+    "globby": "^11.0.0",
     "inquirer": "^7.0.0",
     "jscodeshift": "^0.6.3",
     "json5": "^2.1.1",

lib/cli/src/initiate.ts

@@ -35,6 +35,7 @@ import riotGenerator from './generators/RIOT';
 import preactGenerator from './generators/PREACT';
 import svelteGenerator from './generators/SVELTE';
 import raxGenerator from './generators/RAX';
+import { warn } from './warn';
 
 const logger = console;
 
@@ -58,10 +59,11 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
     skipInstall: options.skipInstall,
   };
 
-  const defaultStoryFormat =
-    detectLanguage() === SupportedLanguage.TYPESCRIPT
-      ? StoryFormat.CSF_TYPESCRIPT
-      : StoryFormat.CSF;
+  const hasTSDependency = detectLanguage() === SupportedLanguage.TYPESCRIPT;
+
+  warn({ hasTSDependency });
+
+  const defaultStoryFormat = hasTSDependency ? StoryFormat.CSF_TYPESCRIPT : StoryFormat.CSF;
 
   const generatorOptions = {
     storyFormat: options.storyFormat || defaultStoryFormat,

lib/cli/src/warn.test.ts

@@ -0,0 +1,39 @@
+import globby from 'globby';
+import { logger } from '@storybook/node-logger';
+import { warn } from './warn';
+
+jest.mock('@storybook/node-logger');
+jest.mock('globby');
+
+describe('warn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when TypeScript is installed as a dependency', () => {
+    it('should not warn', () => {
+      warn({
+        hasTSDependency: true,
+      });
+      expect(logger.warn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when TypeScript is not installed as a dependency', () => {
+    it('should not warn if `.tsx?` files are not found', () => {
+      (globby.sync as jest.Mock).mockReturnValueOnce([]);
+      warn({
+        hasTSDependency: false,
+      });
+      expect(logger.warn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should warn if `.tsx?` files are found', () => {
+      (globby.sync as jest.Mock).mockReturnValueOnce(['a.ts']);
+      warn({
+        hasTSDependency: false,
+      });
+      expect(logger.warn).toHaveBeenCalledTimes(2);
+    });
+  });
+});

lib/cli/src/warn.ts

@@ -0,0 +1,22 @@
+import globby from 'globby';
+import { logger } from '@storybook/node-logger';
+
+interface Options {
+  hasTSDependency: boolean;
+}
+
+export const warn = ({ hasTSDependency }: Options) => {
+  if (!hasTSDependency) {
+    const hasTSFiles = !!globby.sync(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']).length;
+    if (hasTSFiles) {
+      logger.warn(
+        'We have detected TypeScript files in your project directory, however TypeScript is not listed as a project dependency.'
+      );
+      logger.warn('Storybook will continue as though this is a JavaScript project.');
+      logger.line();
+      logger.info(
+        'For more information, see: https://storybook.js.org/docs/configurations/typescript-config/'
+      );
+    }
+  }
+};