Add React toolkit components documentation

.gitignore

@@ -3,8 +3,11 @@ node_modules/
 
 # Production
 dist/
-react/
 storybook-static/
+react/
+
+# ensure that the react folder inside src is included
+!src/react/
 
 # Tests
 test-webview

.prettierrc

@@ -11,7 +11,7 @@
 	"arrowParens": "avoid",
 	"overrides": [
 		{
-			"files": "docs/*.md",
+			"files": ["docs/*.md", "src/**/README.md"],
 			"options": {
 				"printWidth": 130,
 				"singleQuote": false,

src/button/README.md

@@ -79,7 +79,7 @@ There are a number of visual appearances that the `vscode-button` can have. The
 <vscode-button appearance="primary">Button Text</vscode-button>
 <vscode-button appearance="secondary">Button Text</vscode-button>
 <vscode-button appearance="icon">
-	<span class="codicon codicon-check"></span>
+  <span class="codicon codicon-check"></span>
 </vscode-button>
 ```
 
@@ -109,8 +109,8 @@ An icon can be added to the left of Button text by adding an element with the at
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-button>
-	Button Text
-	<span slot="start" class="codicon codicon-add"></span>
+  Button Text
+  <span slot="start" class="codicon codicon-add"></span>
 </vscode-button>
 ```
 
@@ -132,6 +132,6 @@ For example, if you're using an icon button to confirm a state change, adding an
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-button appearance="icon" aria-label="Confirm">
-	<span class="codicon codicon-check"></span>
+  <span class="codicon codicon-check"></span>
 </vscode-button>
 ```

src/checkbox/README.md

@@ -106,7 +106,7 @@ Checkboxes can also render an indeterminate state. This is achieved by getting a
 [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-indeterminate)
 
 ```javascript
-const checkbox = document.getElementById('basic-checkbox');
+const checkbox = document.getElementById("basic-checkbox");
 checkbox.indeterminate = true;
 ```
 
@@ -120,14 +120,14 @@ Here is an example of the Visual Studio Code Checkbox and its various attributes
 
 ```html
 <form>
-	<fieldset>
-		<legend>Fieldset Legend</legend>
-		<vscode-checkbox checked required>Checked + Required</vscode-checkbox>
-		<vscode-checkbox checked readonly>Checked + Readonly</vscode-checkbox>
-		<vscode-checkbox autofocus>Autofocus</vscode-checkbox>
-		<vscode-checkbox disabled>Disabled</vscode-checkbox>
-		<vscode-checkbox value="baz">Value Set To "baz"</vscode-checkbox>
-	</fieldset>
-	<vscode-button type="submit">Submit Button</vscode-button>
+  <fieldset>
+    <legend>Fieldset Legend</legend>
+    <vscode-checkbox checked required>Checked + Required</vscode-checkbox>
+    <vscode-checkbox checked readonly>Checked + Readonly</vscode-checkbox>
+    <vscode-checkbox autofocus>Autofocus</vscode-checkbox>
+    <vscode-checkbox disabled>Disabled</vscode-checkbox>
+    <vscode-checkbox value="baz">Value Set To "baz"</vscode-checkbox>
+  </fieldset>
+  <vscode-button type="submit">Submit Button</vscode-button>
 </form>
 ```

src/data-grid/README.md

@@ -6,9 +6,9 @@ The `vscode-data-grid` enables developers to display data in a tabular layout.
 
 The data grid is created using three components that work together:
 
--   `<vscode-data-grid>`: The top level container element.
--   `<vscode-data-grid-row>`: Displays a single row of data associated with a single record or a header row.
--   `<vscode-data-grid-cell>`: Displays a single cell of data within a row.
+- `<vscode-data-grid>`: The top level container element.
+- `<vscode-data-grid-row>`: Displays a single row of data associated with a single record or a header row.
+- `<vscode-data-grid-cell>`: Displays a single cell of data within a row.
 
 ## Usage
 
@@ -70,10 +70,10 @@ Note that when using this method of data grid creation, the header row is automa
 ```javascript
 // A row is automatically generated for each object in the rowsData array.
 // A column is automatically generated for each key in the first object in the rowsData array.
-document.getElementById('basic-grid').rowsData = [
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
+document.getElementById("basic-grid").rowsData = [
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
 ];
 ```
 
@@ -83,30 +83,30 @@ Note that when using this method of data grid creation, the `generate-header` at
 
 ```html
 <vscode-data-grid generate-header="none" aria-label="Basic">
-	<vscode-data-grid-row row-type="header">
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="1">Header 1</vscode-data-grid-cell>
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="2">Header 2</vscode-data-grid-cell>
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 3</vscode-data-grid-cell>
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 4</vscode-data-grid-cell>
-	</vscode-data-grid-row>
-	<vscode-data-grid-row>
-		<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
-	</vscode-data-grid-row>
-	<vscode-data-grid-row>
-		<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
-	</vscode-data-grid-row>
-	<vscode-data-grid-row>
-		<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
-	</vscode-data-grid-row>
+  <vscode-data-grid-row row-type="header">
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="1">Header 1</vscode-data-grid-cell>
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="2">Header 2</vscode-data-grid-cell>
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 3</vscode-data-grid-cell>
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 4</vscode-data-grid-cell>
+  </vscode-data-grid-row>
+  <vscode-data-grid-row>
+    <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  </vscode-data-grid-row>
+  <vscode-data-grid-row>
+    <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  </vscode-data-grid-row>
+  <vscode-data-grid-row>
+    <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  </vscode-data-grid-row>
 </vscode-data-grid>
 ```
 
@@ -116,9 +116,9 @@ The `generate-header` attribute is applied to the `<vscode-data-grid>` component
 
 There are three values that can be passed to the attribute:
 
--   `default`: A default header row will be automatically generated. This is the default value if the `generate-header` is not defined on the component.
--   `sticky`: A sticky header row will be automatically generated.
--   `none`: No header row will be generated.
+- `default`: A default header row will be automatically generated. This is the default value if the `generate-header` is not defined on the component.
+- `sticky`: A sticky header row will be automatically generated.
+- `none`: No header row will be generated.
 
 **Important Note**
 
@@ -133,10 +133,10 @@ As shown above in the Basic Usage example, if the `vscode-data-grid` is defined
 ```
 
 ```javascript
-document.getElementById('basic-grid').rowsData = [
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
+document.getElementById("basic-grid").rowsData = [
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
 ];
 ```
 
@@ -160,27 +160,27 @@ When defined on a `<vscode-data-grid-row>` component, the value of the attribute
 
 ```html
 <vscode-data-grid
-	id="basic-grid"
-	grid-template-columns="100px 10vw 3fr 30%"
-	aria-label="Custom Column Widths"
+  id="basic-grid"
+  grid-template-columns="100px 10vw 3fr 30%"
+  aria-label="Custom Column Widths"
 ></vscode-data-grid>
 ```
 
 ```javascript
-document.getElementById('basic-grid').rowsData = [
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
+document.getElementById("basic-grid").rowsData = [
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
 ];
 ```
 
 ### Row Type Attribute
 
 The `row-type` attribute is used to define what type of row should be rendered. There are three values that can be passed to the attribute:
 
--   `default`: A default row will be rendered. This is the default value if the `row-type` is not defined on the component.
--   `header`: A header row will be rendered.
--   `sticky`: A sticky header row will be rendered.
+- `default`: A default row will be rendered. This is the default value if the `row-type` is not defined on the component.
+- `header`: A header row will be rendered.
+- `sticky`: A sticky header row will be rendered.
 
 **Usage Note**
 
@@ -196,8 +196,8 @@ Use this attribute when defining a data grid using only HTML. This attribute is
 
 The `cell-type` attribute is used to define what type of cell should be rendered. There are two values that can be passed to the attribute:
 
--   `default`: A default cell will be rendered. This is the default value if the `cell-type` is not defined on the component.
--   `columnheader`: A column header cell will be rendered.
+- `default`: A default cell will be rendered. This is the default value if the `cell-type` is not defined on the component.
+- `columnheader`: A column header cell will be rendered.
 
 **Usage Note**
 
@@ -218,10 +218,10 @@ Use this attribute when defining a data grid using only HTML. This attribute is
 
 ```html
 <vscode-data-grid-row>
-	<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-	<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-	<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-	<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
 </vscode-data-grid-row>
 ```
 
@@ -248,20 +248,20 @@ This is where you define the custom title for a given column.
 ```
 
 ```javascript
-const basicGrid = document.getElementById('basic-grid');
+const basicGrid = document.getElementById("basic-grid");
 
 // Populate grid with data
 basicGrid.rowsData = [
-	{ColumnKey1: 'Cell Data', ColumnKey2: 'Cell Data', ColumnKey3: 'Cell Data', ColumnKey4: 'Cell Data'},
-	{ColumnKey1: 'Cell Data', ColumnKey2: 'Cell Data', ColumnKey3: 'Cell Data', ColumnKey4: 'Cell Data'},
-	{ColumnKey1: 'Cell Data', ColumnKey2: 'Cell Data', ColumnKey3: 'Cell Data', ColumnKey4: 'Cell Data'},
+  { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
+  { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
+  { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
 ];
 
 // Add custom column titles to grid
 basicGrid.columnDefinitions = [
-	{columnDataKey: 'ColumnKey1', title: 'A Custom Header Title'},
-	{columnDataKey: 'ColumnKey2', title: 'Another Custom Title'},
-	{columnDataKey: 'ColumnKey3', title: 'Title Is Custom'},
-	{columnDataKey: 'ColumnKey4', title: 'Custom Title'},
+  { columnDataKey: "ColumnKey1", title: "A Custom Header Title" },
+  { columnDataKey: "ColumnKey2", title: "Another Custom Title" },
+  { columnDataKey: "ColumnKey3", title: "Title Is Custom" },
+  { columnDataKey: "ColumnKey4", title: "Custom Title" },
 ];
 ```

src/dropdown/README.md

@@ -39,9 +39,9 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -51,9 +51,9 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown disabled>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -63,9 +63,9 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown open>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -75,17 +75,17 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown position="above">
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
 ```html
 <vscode-dropdown position="below">
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -99,9 +99,9 @@ The default indicator is a downward facing chevron, but it can customized by add
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-dropdown>
-	<span slot="indicator" class="codicon codicon-settings"></span>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <span slot="indicator" class="codicon codicon-settings"></span>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```