chore: add a site utilities private package to consolidate logic between the Creator and Component Explorer sites (#3030)

package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "private": true,
   "workspaces": {
-    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator"],
+    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator", "sites/site-utilities"],
     "nohoist": ["**/react-syntax-highlighter"]
   },
   "repository": {

sites/site-utilities/.eslintignore

@@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage

sites/site-utilities/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "@typescript-eslint/no-unused-vars": "off",
+        "react/display-name": "off",
+    },
+};

sites/site-utilities/.npmrc

@@ -0,0 +1 @@
+package-lock=false

sites/site-utilities/.prettierignore

@@ -0,0 +1,2 @@
+coverage/*
+dist/*

sites/site-utilities/README.md

@@ -0,0 +1,3 @@
+# Description
+
+A set of utilities shared between the Creator and Component Explorer sites.

sites/site-utilities/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                targets: {
+                    node: "current",
+                },
+                modules: false,
+            },
+        ],
+        "@babel/react",
+    ],
+    plugins: ["@babel/plugin-syntax-dynamic-import"],
+};

sites/site-utilities/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@microsoft/site-utilities",
+    "version": "0.0.0",
+    "description": "Utilities for the Creator and Component Explorer sites",
+    "sideEffects": false,
+    "private": true,
+    "scripts": {
+      "build": "tsc -p ./tsconfig.json",
+      "clean:dist": "node ../../build/clean.js dist",
+      "prepare": "yarn clean:dist && yarn build",
+      "prettier": "prettier --config ../../.prettierrc --write \"**/*.{ts,tsx}\"",
+      "prettier:diff": "prettier --config ../../.prettierrc \"**/*.{ts,tsx}\" --list-different",
+      "test": "yarn eslint && yarn build",
+      "eslint": "eslint . --ext .ts,.tsx",
+      "eslint:fix": "eslint . --ext .ts,.tsx --fix"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "lint-staged": {
+      "*.{ts,tsx,js}": [
+        "npm run prettier",
+        "git add ."
+      ]
+    },
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/Microsoft/fast-dna.git"
+    },
+    "author": "Microsoft",
+    "license": "MIT",
+    "devDependencies": {
+      "@babel/core": "^7.0.0",
+      "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+      "@babel/preset-env": "^7.1.0",
+      "@babel/preset-react": "^7.0.0",
+      "@microsoft/eslint-config-fast-dna": "^1.1.0",
+      "@types/node": "^9.6.7",
+      "@types/react": "^16.8.0",
+      "babel-core": "^7.0.0-bridge.0",
+      "babel-jest": "^25.4.0",
+      "babel-loader": "^8.0.6",
+      "csstype": "^2.5.8",
+      "eslint-config-prettier": "6.10.1",
+      "jest": "^25.4.0",
+      "jss": "^9.8.7",
+      "jss-preset-default": "^4.5.0",
+      "lint-staged": "^8.1.0",
+      "lodash-es": "^4.17.11",
+      "prettier": "^1.15.3",
+      "raf-throttle": "^2.0.3",
+      "react": "^16.8.0",
+      "ts-jest": "^25.4.0",
+      "typescript": "^3.3.3"
+    },
+    "dependencies": {
+      "@microsoft/fast-components-react-msft": "^4.30.9",
+      "@microsoft/fast-tooling": "^0.3.0",
+      "@microsoft/fast-tooling-react": "^2.0.3"
+    }
+  }
+  

sites/site-utilities/src/index.ts

@@ -0,0 +1 @@
+export * from "./react";

sites/site-utilities/src/react/index.ts

@@ -0,0 +1 @@
+export * from "./tooling-dictionaries";

sites/site-utilities/src/react/tooling-dictionaries.ts

@@ -0,0 +1,184 @@
+import {
+    AccentButton,
+    accentButtonSchema2,
+    ActionToggle,
+    actionToggleSchema2,
+    ActionTrigger,
+    actionTriggerSchema2,
+    AutoSuggest,
+    AutoSuggestOption,
+    autoSuggestOptionSchema2,
+    autoSuggestSchema2,
+    Badge,
+    badgeSchema2,
+    Breadcrumb,
+    breadcrumbSchema2,
+    Button,
+    buttonSchema2,
+    CallToAction,
+    callToActionSchema2,
+    Caption,
+    captionSchema2,
+    Card,
+    cardSchema2,
+    Carousel,
+    carouselSchema2,
+    Checkbox,
+    checkboxSchema2,
+    ContextMenu,
+    ContextMenuItem,
+    contextMenuItemSchema2,
+    contextMenuSchema2,
+    Dialog,
+    dialogSchema2,
+    Divider,
+    dividerSchema,
+    Flipper,
+    flipperSchema2,
+    Heading,
+    headingSchema2,
+    Hypertext,
+    hypertextSchema2,
+    Image,
+    imageSchema,
+    Label,
+    labelSchema2,
+    LightweightButton,
+    lightweightButtonSchema2,
+    Metatext,
+    metatextSchema2,
+    NeutralButton,
+    neutralButtonSchema2,
+    NumberField,
+    numberFieldSchema,
+    OutlineButton,
+    outlineButtonSchema2,
+    Paragraph,
+    paragraphSchema2,
+    Pivot,
+    pivotSchema2,
+    Progress,
+    progressSchema2,
+    Radio,
+    radioSchema2,
+    Select,
+    SelectOption,
+    selectOptionSchema2,
+    selectSchema2,
+    Slider,
+    SliderLabel,
+    sliderLabelSchema2,
+    sliderSchema2,
+    StealthButton,
+    stealthButtonSchema2,
+    Subheading,
+    subheadingSchema2,
+    TextAction,
+    textActionSchema2,
+    TextArea,
+    textAreaSchema,
+    TextField,
+    textFieldSchema,
+    Toggle,
+    toggleSchema2,
+    TreeView,
+    TreeViewItem,
+    treeViewItemSchema2,
+    treeViewSchema2,
+    Typography,
+    typographySchema2,
+} from "@microsoft/fast-components-react-msft";
+import { ComponentDictionary } from "@microsoft/fast-tooling-react";
+import { SchemaDictionary } from "@microsoft/fast-tooling";
+
+export const reactComponentSchemaDictionary: SchemaDictionary = {
+    [accentButtonSchema2.id]: accentButtonSchema2,
+    [actionToggleSchema2.id]: actionToggleSchema2,
+    [actionTriggerSchema2.id]: actionTriggerSchema2,
+    [autoSuggestOptionSchema2.id]: autoSuggestOptionSchema2,
+    [autoSuggestSchema2.id]: autoSuggestSchema2,
+    [badgeSchema2.id]: badgeSchema2,
+    [breadcrumbSchema2.id]: breadcrumbSchema2,
+    [buttonSchema2.id]: buttonSchema2,
+    [callToActionSchema2.id]: callToActionSchema2,
+    [captionSchema2.id]: captionSchema2,
+    [cardSchema2.id]: cardSchema2,
+    [carouselSchema2.id]: carouselSchema2,
+    [checkboxSchema2.id]: checkboxSchema2,
+    [contextMenuItemSchema2.id]: contextMenuItemSchema2,
+    [contextMenuSchema2.id]: contextMenuSchema2,
+    [dialogSchema2.id]: dialogSchema2,
+    [dividerSchema.id]: dividerSchema,
+    [flipperSchema2.id]: flipperSchema2,
+    [headingSchema2.id]: headingSchema2,
+    [hypertextSchema2.id]: hypertextSchema2,
+    [imageSchema.id]: imageSchema,
+    [labelSchema2.id]: labelSchema2,
+    [lightweightButtonSchema2.id]: lightweightButtonSchema2,
+    [metatextSchema2.id]: metatextSchema2,
+    [neutralButtonSchema2.id]: neutralButtonSchema2,
+    [outlineButtonSchema2.id]: outlineButtonSchema2,
+    [paragraphSchema2.id]: paragraphSchema2,
+    [pivotSchema2.id]: pivotSchema2,
+    [progressSchema2.id]: progressSchema2,
+    [radioSchema2.id]: radioSchema2,
+    [selectOptionSchema2.id]: selectOptionSchema2,
+    [selectSchema2.id]: selectSchema2,
+    [sliderLabelSchema2.id]: sliderLabelSchema2,
+    [sliderSchema2.id]: sliderSchema2,
+    [stealthButtonSchema2.id]: stealthButtonSchema2,
+    [subheadingSchema2.id]: subheadingSchema2,
+    [textActionSchema2.id]: textActionSchema2,
+    [textAreaSchema.id]: textAreaSchema,
+    [textFieldSchema.id]: textFieldSchema,
+    [toggleSchema2.id]: toggleSchema2,
+    [treeViewItemSchema2.id]: treeViewItemSchema2,
+    [treeViewSchema2.id]: treeViewSchema2,
+    [typographySchema2.id]: typographySchema2,
+};
+
+export const reactComponentDictionary: ComponentDictionary = {};
+reactComponentDictionary[accentButtonSchema2.id] = AccentButton;
+reactComponentDictionary[actionToggleSchema2.id] = ActionToggle;
+reactComponentDictionary[actionTriggerSchema2.id] = ActionTrigger;
+reactComponentDictionary[autoSuggestOptionSchema2.id] = AutoSuggestOption;
+reactComponentDictionary[autoSuggestSchema2.id] = AutoSuggest;
+reactComponentDictionary[badgeSchema2.id] = Badge;
+reactComponentDictionary[breadcrumbSchema2.id] = Breadcrumb;
+reactComponentDictionary[buttonSchema2.id] = Button;
+reactComponentDictionary[callToActionSchema2.id] = CallToAction;
+reactComponentDictionary[captionSchema2.id] = Caption;
+reactComponentDictionary[cardSchema2.id] = Card;
+reactComponentDictionary[carouselSchema2.id] = Carousel;
+reactComponentDictionary[checkboxSchema2.id] = Checkbox;
+reactComponentDictionary[contextMenuItemSchema2.id] = ContextMenuItem;
+reactComponentDictionary[contextMenuSchema2.id] = ContextMenu;
+reactComponentDictionary[dialogSchema2.id] = Dialog;
+reactComponentDictionary[dividerSchema.id] = Divider;
+reactComponentDictionary[flipperSchema2.id] = Flipper;
+reactComponentDictionary[headingSchema2.id] = Heading;
+reactComponentDictionary[hypertextSchema2.id] = Hypertext;
+reactComponentDictionary[imageSchema.id] = Image;
+reactComponentDictionary[labelSchema2.id] = Label;
+reactComponentDictionary[lightweightButtonSchema2.id] = LightweightButton;
+reactComponentDictionary[metatextSchema2.id] = Metatext;
+reactComponentDictionary[neutralButtonSchema2.id] = NeutralButton;
+reactComponentDictionary[numberFieldSchema.id] = NumberField;
+reactComponentDictionary[outlineButtonSchema2.id] = OutlineButton;
+reactComponentDictionary[paragraphSchema2.id] = Paragraph;
+reactComponentDictionary[pivotSchema2.id] = Pivot;
+reactComponentDictionary[progressSchema2.id] = Progress;
+reactComponentDictionary[radioSchema2.id] = Radio;
+reactComponentDictionary[selectOptionSchema2.id] = SelectOption;
+reactComponentDictionary[selectSchema2.id] = Select;
+reactComponentDictionary[sliderLabelSchema2.id] = SliderLabel;
+reactComponentDictionary[sliderSchema2.id] = Slider;
+reactComponentDictionary[stealthButtonSchema2.id] = StealthButton;
+reactComponentDictionary[subheadingSchema2.id] = Subheading;
+reactComponentDictionary[textActionSchema2.id] = TextAction;
+reactComponentDictionary[textAreaSchema.id] = TextArea;
+reactComponentDictionary[textFieldSchema.id] = TextField;
+reactComponentDictionary[toggleSchema2.id] = Toggle;
+reactComponentDictionary[treeViewItemSchema2.id] = TreeViewItem;
+reactComponentDictionary[treeViewSchema2.id] = TreeView;
+reactComponentDictionary[typographySchema2.id] = Typography;

sites/site-utilities/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist",
+        "moduleResolution": "node",
+        "module": "ES6",
+        "target": "ES6",
+        "baseUrl": "./",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "**/*.spec.tsx",
+        "**/__tests__/**"
+    ]
+  }