From 7ad9fcf53392ad64bf911a93b0c9cf590d230af0 Mon Sep 17 00:00:00 2001
From: Brody McKee <mrmckeb@hotmail.com>
Date: Mon, 1 Jun 2020 12:40:49 +0300
Subject: [PATCH] feat: add warning for TypeScript setup issues

---
 lib/cli/package.json     |  1 +
 lib/cli/src/initiate.ts  | 10 ++++++----
 lib/cli/src/warn.test.ts | 39 +++++++++++++++++++++++++++++++++++++++
 lib/cli/src/warn.ts      | 22 ++++++++++++++++++++++
 4 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 lib/cli/src/warn.test.ts
 create mode 100644 lib/cli/src/warn.ts

diff --git a/lib/cli/package.json b/lib/cli/package.json
index b3c2bfd1fb7..01b9f84e152 100644
--- a/lib/cli/package.json
+++ b/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",
diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
index 1c080c029a0..edaf6127e75 100644
--- a/lib/cli/src/initiate.ts
+++ b/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,
diff --git a/lib/cli/src/warn.test.ts b/lib/cli/src/warn.test.ts
new file mode 100644
index 00000000000..7ce18679f21
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/lib/cli/src/warn.ts b/lib/cli/src/warn.ts
new file mode 100644
index 00000000000..a0614112ac8
--- /dev/null
+++ b/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/'
+      );
+    }
+  }
+};