Setup Storybook for testing UI components

This sets up Storybook for testing of React components. It adds stories
for some of the MRVA components. It does not add stories for the main
MRVA views since those are not independent of VSCode and need to be run
from within VSCode.

Author: koesie10

.vscode/launch.json

@@ -124,6 +124,14 @@
       "outFiles": [
         "${workspaceRoot}/extensions/ql-vscode/out/**/*.js",
       ],
+    },
+    {
+      "name": "Launch Storybook",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}/extensions/ql-vscode",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "storybook"]
     }
   ]
 }

CONTRIBUTING.md

@@ -77,6 +77,18 @@ $ vscode/scripts/code-cli.sh --install-extension dist/vscode-codeql-*.vsix # if
 
 You can use VS Code to debug the extension without explicitly installing it. Just open this directory as a workspace in VS Code, and hit `F5` to start a debugging session.
 
+### Storybook
+
+You can use [Storybook](https://storybook.js.org/) to preview React components outside VSCode. Inside the `extensions/ql-vscode` directory, run:
+
+```shell
+npm run storybook
+```
+
+Your browser should automatically open to the Storybook UI. Stories live in the `src/stories` directory.
+
+Alternatively, you can start Storybook inside of VSCode. There is a VSCode launch configuration for starting Storybook. It can be found in the debug view.
+
 ### Running the unit tests and integration tests that do not require a CLI instance
 
 Unit tests and many integration tests do not require a copy of the CodeQL CLI.

extensions/ql-vscode/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

extensions/ql-vscode/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+};

extensions/ql-vscode/.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+  enableShortcuts: false,
+});

extensions/ql-vscode/.storybook/preview.js

@@ -0,0 +1,33 @@
+import { themes } from '@storybook/theming';
+
+// Allow all stories/components to use Codicons
+import '@vscode/codicons/dist/codicon.css';
+
+import '../src/stories/vscode-theme.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: {
+    theme: themes.dark,
+  },
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'dark',
+        value: '#1e1e1e',
+      },
+    ],
+  },
+  options: {
+    storySort: {
+      order: ['WebView UI Toolkit', 'MRVA'],
+    },
+  },
+};