fix: Update Stores + Storybook builds as part of CI (#1986)

- Update Storybook configuration
- Update TypeScript and Webpack support
- Update to Node 14
- Polish stories some more
- Update stories for new API usages

.github/CONTRIBUTING.md

@@ -97,9 +97,9 @@ public someFunction() {...}
 
 #### Code Organization
 
-Excalibur uses an AMD bundler using TypeScript to generate a browser self-bootstrapping bundle.
+Excalibur uses Webpack with TypeScript to bundle code.
 
-The Excalibur public API (i.e. `ex.*`) is defined in `src/engine/index.ts`. Any new classes or APIs that should be made available publicly should be exported there. The AMD bundler will then ensure the APIs or classes are exposed in the browser.
+The Excalibur public API (i.e. `ex.*`) is defined in `src/engine/index.ts`. Any new classes or APIs that should be made available publicly should be exported there. The bundler will then ensure the APIs or classes are exposed in the browser.
 
 An example of exporting all public members from a new `MyClass.ts` that contains a `MyClass` ES6 class:
 
@@ -123,9 +123,9 @@ export { feature as Feature };
 
 A number of our code formatting rules are enforced via linting. When you build Excalibur on your computer, the linter will make sure that certain aspects of your code are formatted properly. Additionally:
 
-- Use 3 spaces for indenting
+- Use 2 spaces for indenting
 - All methods must explicitly specify their access modifier (public, private, etc.)
-- Use the CamelCase naming convention, with a lowercase first letter for variables.
+- Use the `TitleCase` naming convention for classes/interfaces, with a lowercase first letter for variables (`camelCase`).
 
 #### Commit Messages
 
@@ -187,6 +187,12 @@ describe('a monkey', () => {
 });
 ```
 
+#### Visual Examples
+
+Excalibur uses Storybook for writing visual tests and examples. These can be interactive and showcase different parts of the engine or specific features. We sometimes embed these examples in the documentation site.
+
+Use `npm run visual` to start Storybook. Stories are written in the `src/stories` directory.
+
 #### Documentation
 
 - Add JSDoc comments to all public and protected methods

.github/workflows/build.yml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -40,7 +40,8 @@ jobs:
           ${{ runner.os }}-node-
     - run: npm ci
     - run: npm run linux:ci
-    - name: Coveralls
+    - run: npm run build-storybook
+    - name: Coveralls 
       uses: coverallsapp/[email protected]
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
     - uses: actions/checkout@v2

.storybook/main.js

@@ -1,11 +1,19 @@
 const path = require('path');
 
 module.exports = {
-  addons: ['@storybook/addon-docs', '@storybook/addon-knobs/register', '@storybook/addon-actions/register'],
   stories: ['../src/stories/*.stories.ts'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: 'webpack5'
+  },
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({
-      test: /\.(ts|tsx)$/,
+      test: /\.glsl$/,
+      use: ['raw-loader']
+    });
+
+    config.module.rules.push({
+      test: /\.(tsx?)$/,
       use: [
         {
           loader: require.resolve('ts-loader'),
@@ -15,7 +23,13 @@ module.exports = {
         }
       ]
     });
-    config.resolve.extensions.push('.ts', '.tsx');
+
+    const sourceLoader = config.module.rules.findIndex((r) => r.loader && r.loader.includes('source-loader'));
+
+    if (sourceLoader > -1) {
+      // TODO: Investigate why source-loader is messing with graphics.add(string, object); expressions
+      config.module.rules.splice(sourceLoader, 1);
+    }
 
     if (configType === 'PRODUCTION') {
       config.mode = 'development';

README.md

@@ -85,12 +85,8 @@ npm run build
 npm test
 npm run test
 
-# Compile HTML visual tests
-# Useful to ensure HTML sandbox compiles
-npm run visual
-
-# Start sandbox dev server (long-running)
-# Run in separate terminal alongside `npm run visual`
+# Start Storybook-based sandbox
+# Used for creating interactive visual tests and examples for docs
 npm run sandbox
 
 # Compile API docs