chore: improve eslint, sb, tsc configs (#483)

Summary:

This commit is a bit of a shotgun fix for various project settings.
Realistically, they could've been separate commits, but this is
convenience for just getting things into a green state to unblock
further work.

Details:

- Use our version of TS in vscode plugins
- organize vscode/settings.json
- fix tsconfig.test and tsconfig.prod (removes errors in test files)
- only use prod tsconfig in webpack
- point .eslintrc to both test and prod configs
- cleanup storybook
- running eslint in my workspace was OOMing. I configured
  maxWorkers like we had in v1 to fix this.
- remove .storybook from code coverage
- remove .js files from code coverage --> after moving away
  from Next.js, we don't allowJS in our tsconfig anymore. We only
  use JS for configurations, it's not allowed in src code!

.vscode/settings.json

@@ -1,31 +1,4 @@
 {
-  "files.exclude": {
-    "**/node_modules": true
-  },
-  "go.lintTool": "golangci-lint",
-  "go.lintFlags": ["--fast"],
-  "go.lintOnSave": "package",
-  "go.coverOnSave": true,
-  // The codersdk is used by coderd another other packages extensively.
-  // To reduce redundancy in tests, it's covered by other packages.
-  "go.testFlags": ["-coverpkg=./.,github.com/coder/coder/codersdk"],
-  "go.coverageDecorator": {
-    "type": "gutter",
-    "coveredHighlightColor": "rgba(64,128,128,0.5)",
-    "uncoveredHighlightColor": "rgba(128,64,64,0.25)",
-    "coveredBorderColor": "rgba(64,128,128,0.5)",
-    "uncoveredBorderColor": "rgba(128,64,64,0.25)",
-    "coveredGutterStyle": "blockgreen",
-    "uncoveredGutterStyle": "blockred"
-  },
-  "emeraldwalk.runonsave": {
-    "commands": [
-      {
-        "match": "database/query.sql",
-        "cmd": "make gen"
-      }
-    ]
-  },
   "cSpell.words": [
     "coderd",
     "coderdtest",
@@ -76,5 +49,35 @@
     "xerrors",
     "yamux"
   ],
-  "eslint.workingDirectories": ["./site"]
+  "emeraldwalk.runonsave": {
+    "commands": [
+      {
+        "match": "database/query.sql",
+        "cmd": "make gen"
+      }
+    ]
+  },
+  "eslint.workingDirectories": ["./site"],
+  "files.exclude": {
+    "**/node_modules": true
+  },
+  "go.lintTool": "golangci-lint",
+  "go.lintFlags": ["--fast"],
+  "go.lintOnSave": "package",
+  "go.coverOnSave": true,
+  // The codersdk is used by coderd another other packages extensively.
+  // To reduce redundancy in tests, it's covered by other packages.
+  "go.testFlags": ["-coverpkg=./.,github.com/coder/coder/codersdk"],
+  "go.coverageDecorator": {
+    "type": "gutter",
+    "coveredHighlightColor": "rgba(64,128,128,0.5)",
+    "uncoveredHighlightColor": "rgba(128,64,64,0.25)",
+    "coveredBorderColor": "rgba(64,128,128,0.5)",
+    "uncoveredBorderColor": "rgba(128,64,64,0.25)",
+    "coveredGutterStyle": "blockgreen",
+    "uncoveredGutterStyle": "blockred"
+  },
+  // We often use a version of TypeScript that's ahead of the version shipped
+  // with VS Code.
+  "typescript.tsdk": "./site/node_modules/typescript/lib"
 }

codecov.yml

@@ -35,4 +35,5 @@ ignore:
   - provisionerd/proto
   - provisionersdk/proto
   - scripts/datadog-cireport
+  - site/.storybook
   - rules.go

site/.eslintrc.yaml

@@ -17,7 +17,7 @@ extends:
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 2018
-  project: "./tsconfig.test.json"
+  project: "./tsconfig.json"
   sourceType: module
   ecmaFeatures:
     jsx: true

site/.storybook/main.js

@@ -1,16 +1,36 @@
+/**
+ * @fileoverview This file is configures Storybook
+ *
+ * @see <https://storybook.js.org/docs/react/configure/overview>
+ */
 const path = require("path")
 
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  // Automatically loads all stories in source ending in 'stories.tsx'
+  //
+  // SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+  stories: ["../src/**/*.stories.tsx"],
+
+  // addons are official and community plugins to extend Storybook.
+  //
+  // SEE: https://storybook.js.org/addons
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+
+  // Storybook uses babel under the hood, while we currently use ts-loader.
+  // Sometimes, you may encounter an error in a Storybook that contains syntax
+  // that requires a babel plugin.
+  //
+  // SEE: https://storybook.js.org/docs/react/configure/babel
   babel: async (options) => ({
     ...options,
     plugins: ["@babel/plugin-proposal-class-properties"],
-    // any extra options you want to set
   }),
+
+  // Storybook internally uses its own Webpack configuration instead of ours.
+  //
+  // SEE: https://storybook.js.org/docs/react/configure/webpack
   webpackFinal: async (config) => {
     config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"]
-
     return config
   },
 }

site/jest.config.js

@@ -1,9 +1,18 @@
+// REMARK: Jest is supposed to never exceed 50% maxWorkers by default. However,
+//         there seems to be an issue with this in our Ubuntu-based workspaces.
+//         If we don't limit it, then 100% CPU and high MEM usage is hit
+//         unexpectedly, leading to OOM kills.
+//
+// SEE thread: https://github.com/coder/coder/pull/483#discussion_r829636583
+const maxWorkers = process.env.CI ? 16 : 2
+
 module.exports = {
+  maxWorkers,
   projects: [
     {
       globals: {
         "ts-jest": {
-          tsconfig: "tsconfig.test.json",
+          tsconfig: "./tsconfig.test.json",
         },
       },
       coverageReporters: ["text", "lcov"],
@@ -28,9 +37,10 @@ module.exports = {
     },
   ],
   collectCoverageFrom: [
-    "<rootDir>/**/*.js",
+    // included files
     "<rootDir>/**/*.ts",
     "<rootDir>/**/*.tsx",
+    // excluded files
     "!<rootDir>/**/*.stories.tsx",
     "!<rootDir>/_jest/**/*.*",
     "!<rootDir>/api.ts",

site/src/components/CodeBlock/index.stories.tsx

@@ -9,7 +9,7 @@ Started container user
 Using user 'coder' with shell '/bin/bash'`.split("\n")
 
 export default {
-  title: "CodeBlock",
+  title: "CodeBlock/CodeBlock",
   component: CodeBlock,
   argTypes: {
     lines: { control: "text", defaultValue: sampleLines },

site/src/components/CodeExample/CodeExample.stories.tsx

@@ -5,7 +5,7 @@ import { CodeExample, CodeExampleProps } from "./CodeExample"
 const sampleCode = `echo "Hello, world"`
 
 export default {
-  title: "CodeExample",
+  title: "CodeBlock/CodeExample",
   component: CodeExample,
   argTypes: {
     code: { control: "string", defaultValue: sampleCode },

site/src/components/Workspace/Workspace.stories.tsx

@@ -4,7 +4,7 @@ import { Workspace, WorkspaceProps } from "./Workspace"
 import { MockOrganization, MockProject, MockWorkspace } from "../../test_helpers"
 
 export default {
-  title: "Workspace",
+  title: "Workspaces/Workspace",
   component: Workspace,
   argTypes: {},
 }

site/tsconfig.json

@@ -16,5 +16,5 @@
     "target": "es5"
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "_jest", "**/*.test.tsx"]
+  "exclude": ["node_modules", "_jest"]
 }

site/tsconfig.prod.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "_jest", "**/*.stories.tsx", "**/*.test.tsx"]
+}

site/tsconfig.test.json

@@ -1,4 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "_jest"]
+  "exclude": ["node_modules", "_jest"],
+  "include": ["**/*.stories.tsx", "**/*.test.tsx"]
 }

site/webpack.common.ts

@@ -30,7 +30,14 @@ export const commonWebpackConfig: Configuration = {
     rules: [
       {
         test: /\.tsx?$/,
-        use: ["ts-loader"],
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              configFile: "tsconfig.prod.json",
+            },
+          },
+        ],
         exclude: [/node_modules/],
       },
     ],