Add component-gallery-react sample (microsoft#146)

Description of changes

Add `component-gallery-react` sample, which demonstrates the usage of every React component available in the toolkit.

README.md

@@ -30,14 +30,15 @@ Don't see a demonstration for your desired use case, VS Code API, etc.? Open an
 
 A set of sample extensions that demonstrate how to use various web frameworks to render the webview UI.
 
-| Sample extension                                              | Description                                                           |
-| --------------------------------------------------------------| --------------------------------------------------------------------- |
-| [hello-world-angular](./frameworks/hello-world-angular)       | A basic hello-world starter extension using Angular.                  |
-| [hello-world-react-cra](./frameworks/hello-world-react-cra)   | A basic hello-world starter extension using React + Create React App. |
-| [hello-world-react-vite](./frameworks/hello-world-react-vite) | A basic hello-world starter extension using React + Vite.             |
-| [hello-world-solidjs](./frameworks/hello-world-solidjs)       | A basic hello-world starter extension using SolidJS.                  |
-| [hello-world-svelte](./frameworks/hello-world-svelte)         | A basic hello-world starter extension using Svelte.                   |
-| [hello-world-vue](./frameworks/hello-world-vue)               | A basic hello-world starter extension using Vue.                      |
+| Sample extension                                                | Description                                                           |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------- |
+| [component-gallery-react](./frameworks/component-gallery-react) | Demonstrates every React component in the Webview UI Toolkit.                  |
+| [hello-world-angular](./frameworks/hello-world-angular)         | A basic hello-world starter extension using Angular.                  |
+| [hello-world-react-cra](./frameworks/hello-world-react-cra)     | A basic hello-world starter extension using React + Create React App. |
+| [hello-world-react-vite](./frameworks/hello-world-react-vite)   | A basic hello-world starter extension using React + Vite.             |
+| [hello-world-solidjs](./frameworks/hello-world-solidjs)         | A basic hello-world starter extension using SolidJS.                  |
+| [hello-world-svelte](./frameworks/hello-world-svelte)           | A basic hello-world starter extension using Svelte.                   |
+| [hello-world-vue](./frameworks/hello-world-vue)                 | A basic hello-world starter extension using Vue.                      |
 
 ## Contributing
 

default/component-gallery/src/panels/demos/panels.ts

@@ -32,18 +32,18 @@ export const panelsDemo = /*html*/ `
       <vscode-panels aria-label="With Badge">
         <vscode-panel-tab id="tab-1">
           PROBLEMS
-          <vscode-badge appearance="secondary">1</vscode-badge>
+          <vscode-badge>1</vscode-badge>
         </vscode-panel-tab>
         <vscode-panel-tab id="tab-2">
           OUTPUT
-          <vscode-badge appearance="secondary">1</vscode-badge>
+          <vscode-badge>1</vscode-badge>
         </vscode-panel-tab>
         <vscode-panel-tab id="tab-3">
           DEBUG CONSOLE
         </vscode-panel-tab>
         <vscode-panel-tab id="tab-4">
           TERMINAL
-          <vscode-badge appearance="secondary">1</vscode-badge>
+          <vscode-badge>1</vscode-badge>
         </vscode-panel-tab>
         <vscode-panel-view id="view-1"> Problems Content </vscode-panel-view>
         <vscode-panel-view id="view-2"> Output Content </vscode-panel-view>

frameworks/component-gallery-react/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  },
+  "ignorePatterns": ["webview-ui/**"]
+}

frameworks/component-gallery-react/.prettierignore

@@ -0,0 +1,22 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frameworks/component-gallery-react/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "consistent",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "always"
+}

frameworks/component-gallery-react/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint"
+	]
+}

frameworks/component-gallery-react/.vscode/launch.json

@@ -0,0 +1,34 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		},
+		{
+			"name": "Extension Tests",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/test/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

frameworks/component-gallery-react/.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

frameworks/component-gallery-react/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

frameworks/component-gallery-react/.vscodeignore

@@ -0,0 +1,32 @@
+# This file contains all the files/directories that should
+# be ignored (i.e. not included) in the final packaged extension.
+
+# Ignore extension configs
+.vscode/**
+
+# Ignore test files
+.vscode-test/**
+out/test/**
+
+# Ignore source code
+src/**
+
+# Ignore all webview-ui files except the build directory
+webview-ui/src/**
+webview-ui/public/**
+webview-ui/scripts/**
+webview-ui/index.html
+webview-ui/README.md
+webview-ui/package.json
+webview-ui/package-lock.json
+webview-ui/node_modules/**
+
+# Ignore Misc
+.yarnrc
+vsc-extension-quickstart.md
+**/.gitignore
+**/tsconfig.json
+**/vite.config.ts
+**/.eslintrc.json
+**/*.map
+**/*.ts

frameworks/component-gallery-react/README.md

@@ -0,0 +1,29 @@
+# Component Gallery (React)
+
+This sample extension demonstrates every React component in the Webview UI Toolkit for Visual Studio Code.
+
+![A screenshot of the sample extension.](./assets/component-gallery-react.png)
+
+## Run The Sample
+
+```bash
+# Copy sample extension locally
+npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/component-gallery-react component-gallery-react
+
+# Navigate into sample directory
+cd component-gallery-react
+
+# Install dependencies for both the extension and webview UI source code
+npm run install:all
+
+# Build webview UI source code
+npm run build:webview
+
+# Open sample in VS Code
+code .
+```
+
+Once the sample is open inside VS Code you can run the extension by doing the following:
+
+1. Press `F5` to open a new Extension Development Host window
+2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Component Gallery (React): Show`