Skip to content

Commit edaead8

Browse files
hawkticehursthawkticehurst
authored
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.
1 parent dc61716 commit edaead8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+8779
-11
lines changed

‎README.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,15 @@ Don't see a demonstration for your desired use case, VS Code API, etc.? Open an
3030

3131
A set of sample extensions that demonstrate how to use various web frameworks to render the webview UI.
3232

33-
| Sample extension | Description |
34-
| --------------------------------------------------------------| --------------------------------------------------------------------- |
35-
| [hello-world-angular](./frameworks/hello-world-angular) | A basic hello-world starter extension using Angular. |
36-
| [hello-world-react-cra](./frameworks/hello-world-react-cra) | A basic hello-world starter extension using React + Create React App. |
37-
| [hello-world-react-vite](./frameworks/hello-world-react-vite) | A basic hello-world starter extension using React + Vite. |
38-
| [hello-world-solidjs](./frameworks/hello-world-solidjs) | A basic hello-world starter extension using SolidJS. |
39-
| [hello-world-svelte](./frameworks/hello-world-svelte) | A basic hello-world starter extension using Svelte. |
40-
| [hello-world-vue](./frameworks/hello-world-vue) | A basic hello-world starter extension using Vue. |
33+
| Sample extension | Description |
34+
| ---------------------------------------------------------------- | --------------------------------------------------------------------- |
35+
| [component-gallery-react](./frameworks/component-gallery-react) | Demonstrates every React component in the Webview UI Toolkit. |
36+
| [hello-world-angular](./frameworks/hello-world-angular) | A basic hello-world starter extension using Angular. |
37+
| [hello-world-react-cra](./frameworks/hello-world-react-cra) | A basic hello-world starter extension using React + Create React App. |
38+
| [hello-world-react-vite](./frameworks/hello-world-react-vite) | A basic hello-world starter extension using React + Vite. |
39+
| [hello-world-solidjs](./frameworks/hello-world-solidjs) | A basic hello-world starter extension using SolidJS. |
40+
| [hello-world-svelte](./frameworks/hello-world-svelte) | A basic hello-world starter extension using Svelte. |
41+
| [hello-world-vue](./frameworks/hello-world-vue) | A basic hello-world starter extension using Vue. |
4142

4243
## Contributing
4344

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,18 @@ export const panelsDemo = /*html*/ `
3232
<vscode-panels aria-label="With Badge">
3333
<vscode-panel-tab id="tab-1">
3434
PROBLEMS
35-
<vscode-badge appearance="secondary">1</vscode-badge>
35+
<vscode-badge>1</vscode-badge>
3636
</vscode-panel-tab>
3737
<vscode-panel-tab id="tab-2">
3838
OUTPUT
39-
<vscode-badge appearance="secondary">1</vscode-badge>
39+
<vscode-badge>1</vscode-badge>
4040
</vscode-panel-tab>
4141
<vscode-panel-tab id="tab-3">
4242
DEBUG CONSOLE
4343
</vscode-panel-tab>
4444
<vscode-panel-tab id="tab-4">
4545
TERMINAL
46-
<vscode-badge appearance="secondary">1</vscode-badge>
46+
<vscode-badge>1</vscode-badge>
4747
</vscode-panel-tab>
4848
<vscode-panel-view id="view-1"> Problems Content </vscode-panel-view>
4949
<vscode-panel-view id="view-2"> Output Content </vscode-panel-view>

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"root": true,
3+
"parser": "@typescript-eslint/parser",
4+
"parserOptions": {
5+
"ecmaVersion": 6,
6+
"sourceType": "module"
7+
},
8+
"plugins": ["@typescript-eslint"],
9+
"rules": {
10+
"@typescript-eslint/naming-convention": "warn",
11+
"@typescript-eslint/semi": "warn",
12+
"curly": "warn",
13+
"eqeqeq": "warn",
14+
"no-throw-literal": "warn",
15+
"semi": "off"
16+
},
17+
"ignorePatterns": ["webview-ui/**"]
18+
}

‎frameworks/component-gallery-react/.prettierignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# dependencies
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
/dist
12+
13+
# misc
14+
.DS_Store
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎frameworks/component-gallery-react/.prettierrc

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"printWidth": 100,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"quoteProps": "consistent",
8+
"jsxSingleQuote": false,
9+
"trailingComma": "es5",
10+
"bracketSpacing": true,
11+
"jsxBracketSameLine": true,
12+
"arrowParens": "always"
13+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
// See http://go.microsoft.com/fwlink/?LinkId=827846
3+
// for the documentation about the extensions.json format
4+
"recommendations": [
5+
"dbaeumer.vscode-eslint"
6+
]
7+
}

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// A launch configuration that compiles the extension and then opens it inside a new window
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
{
6+
"version": "0.2.0",
7+
"configurations": [
8+
{
9+
"name": "Run Extension",
10+
"type": "extensionHost",
11+
"request": "launch",
12+
"args": [
13+
"--extensionDevelopmentPath=${workspaceFolder}"
14+
],
15+
"outFiles": [
16+
"${workspaceFolder}/out/**/*.js"
17+
],
18+
"preLaunchTask": "${defaultBuildTask}"
19+
},
20+
{
21+
"name": "Extension Tests",
22+
"type": "extensionHost",
23+
"request": "launch",
24+
"args": [
25+
"--extensionDevelopmentPath=${workspaceFolder}",
26+
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
27+
],
28+
"outFiles": [
29+
"${workspaceFolder}/out/test/**/*.js"
30+
],
31+
"preLaunchTask": "${defaultBuildTask}"
32+
}
33+
]
34+
}

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

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

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// See https://go.microsoft.com/fwlink/?LinkId=733558
2+
// for the documentation about the tasks.json format
3+
{
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"type": "npm",
8+
"script": "watch",
9+
"problemMatcher": "$tsc-watch",
10+
"isBackground": true,
11+
"presentation": {
12+
"reveal": "never"
13+
},
14+
"group": {
15+
"kind": "build",
16+
"isDefault": true
17+
}
18+
}
19+
]
20+
}

‎frameworks/component-gallery-react/.vscodeignore

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# This file contains all the files/directories that should
2+
# be ignored (i.e. not included) in the final packaged extension.
3+
4+
# Ignore extension configs
5+
.vscode/**
6+
7+
# Ignore test files
8+
.vscode-test/**
9+
out/test/**
10+
11+
# Ignore source code
12+
src/**
13+
14+
# Ignore all webview-ui files except the build directory
15+
webview-ui/src/**
16+
webview-ui/public/**
17+
webview-ui/scripts/**
18+
webview-ui/index.html
19+
webview-ui/README.md
20+
webview-ui/package.json
21+
webview-ui/package-lock.json
22+
webview-ui/node_modules/**
23+
24+
# Ignore Misc
25+
.yarnrc
26+
vsc-extension-quickstart.md
27+
**/.gitignore
28+
**/tsconfig.json
29+
**/vite.config.ts
30+
**/.eslintrc.json
31+
**/*.map
32+
**/*.ts

‎frameworks/component-gallery-react/README.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Component Gallery (React)
2+
3+
This sample extension demonstrates every React component in the Webview UI Toolkit for Visual Studio Code.
4+
5+
![A screenshot of the sample extension.](./assets/component-gallery-react.png)
6+
7+
## Run The Sample
8+
9+
```bash
10+
# Copy sample extension locally
11+
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/component-gallery-react component-gallery-react
12+
13+
# Navigate into sample directory
14+
cd component-gallery-react
15+
16+
# Install dependencies for both the extension and webview UI source code
17+
npm run install:all
18+
19+
# Build webview UI source code
20+
npm run build:webview
21+
22+
# Open sample in VS Code
23+
code .
24+
```
25+
26+
Once the sample is open inside VS Code you can run the extension by doing the following:
27+
28+
1. Press `F5` to open a new Extension Development Host window
29+
2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Component Gallery (React): Show`

‎frameworks/component-gallery-react/assets/component-gallery-react.png

1.18 MB
Loading

0 commit comments

Comments
 (0)