Export toolkit components as wrapped React components (#300)

Description of changes

Uses the `fast-react-wrapper` to wrap all toolkit components as React components and then exports them under the following syntax: `import { ComponentName } from '@vscode/webview-ui-toolkit/react';`

.eslintignore

@@ -4,6 +4,7 @@ node_modules
 dist
 # don't lint build folder output
 build
+react
 # don't lint coverage output
 coverage
 # don't lint storybook files

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 
 # Production
 dist/
+react/
 storybook-static/
 
 # Tests

.npmignore

@@ -28,6 +28,7 @@ storybook-static/
 babel.config.js
 tsconfig.json
 tsconfig.build.json
+tsconfig.eslint.json
 webpack.config.js
 rollup.config.js
 policheck

.prettierignore

@@ -4,6 +4,7 @@ node_modules/
 # Production
 build/
 dist/
+react/
 storybook-static/
 
 # Tests

.prettierrc

@@ -33,7 +33,7 @@
 			}
 		},
 		{
-			"files": "scripts/setup-webview-test-env.js",
+			"files": "scripts/*.js",
 			"options": {
 				"printWidth": 200
 			}

api-extractor.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-	"mainEntryPointFilePath": "dist/dts/index.d.ts",
+	"mainEntryPointFilePath": "dist/index.d.ts",
 	"apiReport": {
 		"enabled": true,
 		"reportFolder": "docs",

package.json

@@ -12,12 +12,12 @@
 		"type": "git",
 		"url": "git+https://github.com/microsoft/vscode-webview-ui-toolkit.git"
 	},
-	"main": "dist/esm/index.js",
-	"types": "dist/dts/index.d.ts",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
 	"sideEffects": false,
 	"scripts": {
 		"start": "start-storybook -p 6006",
-		"build": "rollup -c && tsc -p ./tsconfig.json && npm run doc",
+		"build": "rollup -c && tsc -p ./tsconfig.json && npm run doc && node ./scripts/move-react-build-dir.js",
 		"build:docs": "build-storybook",
 		"deploy:docs": "npm run build:docs && gh-pages -d storybook-static",
 		"doc": "api-extractor run --local",
@@ -30,8 +30,12 @@
 		"test:webview": "npm run build && node ./scripts/setup-webview-test-env.js"
 	},
 	"dependencies": {
-		"@microsoft/fast-element": "^1.6.0",
-		"@microsoft/fast-foundation": "^2.30.0"
+		"@microsoft/fast-element": "^1.6.2",
+		"@microsoft/fast-foundation": "^2.30.0",
+		"@microsoft/fast-react-wrapper": "^0.1.18"
+	},
+	"peerDependencies": {
+		"react": ">=16.9.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.14.3",

scripts/helpers.js

@@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+
+function createDir(dir) {
+	if (!fs.existsSync(dir)) {
+		fs.mkdirSync(dir);
+	}
+}
+
+function copyDir(source, target) {
+	let files = [];
+	const targetFolder = path.join(target, path.basename(source));
+	if (!fs.existsSync(targetFolder)) {
+		fs.mkdirSync(targetFolder);
+	}
+	if (fs.lstatSync(source).isDirectory()) {
+		files = fs.readdirSync(source);
+		files.forEach(function (file) {
+			const curSource = path.join(source, file);
+			if (fs.lstatSync(curSource).isDirectory()) {
+				copyDir(curSource, targetFolder);
+			} else {
+				copyFile(curSource, targetFolder);
+			}
+		});
+	}
+}
+
+function copyFile(source, target) {
+	let targetFile = target;
+	if (fs.existsSync(target)) {
+		if (fs.lstatSync(target).isDirectory()) {
+			targetFile = path.join(target, path.basename(source));
+		}
+	}
+	fs.writeFileSync(targetFile, fs.readFileSync(source));
+}
+
+const colors = {
+	reset: '\x1b[0m',
+	bold: '\x1b[1m',
+	dim: '\x1b[2m',
+	red: '\x1b[31m',
+	green: '\x1b[32m',
+	cyan: '\x1b[36m',
+};
+
+function color(opts, text) {
+	let colorString = '';
+	for (const opt of opts) {
+		colorString += colors[opt];
+	}
+	return `${colorString}${text}${colors.reset}`;
+}
+
+function delDir(path) {
+	if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) {
+		fs.readdirSync(path).forEach(function (file, index) {
+			const currPath = path + '/' + file;
+			if (fs.lstatSync(currPath).isDirectory()) {
+				delDir(currPath);
+			} else {
+				fs.unlinkSync(currPath);
+			}
+		});
+		fs.rmdirSync(path);
+	}
+}
+
+module.exports = {
+	createDir,
+	copyDir,
+	copyFile,
+	color,
+	delDir,
+};