feat: add fluent UI to Creator (#4965)

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This change adds the Fluent UI web component library to Creator. There is a slight issue in Fluent UI which means the build will fail until a publish in Fluent UI fixes the issue. See microsoft/fluentui#18987.

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->
Once this is unblocked by microsoft/fluentui#18987 you will see that two buttons now show up in the left tab, FAST components and Fluent UI components. Both can be added, there are a few caveats however, we are using the Design Tokens from FAST for editing in the right pane. This means that when adding Fluent UI components, the accent color is available but will not affect any components. Additionally, if both component libraries are added, there may be some discrepancies between packages. There is also an issue where both libraries have components that are named the same. This will need to be resolved by prefixing or affixing the library name. See next steps for a future resolution.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->

- Allow libraries to add an additional pane to the right rail for configuration, this will be used for the Design Tokens for FAST and Fluent UI component libraries but should be open ended enough to allow for any extra library configuration to take place
- Prefix or affix the library name to the component name in the Form and Navigation

sites/fast-component-explorer/app/explorer.props.ts

@@ -1,6 +1,6 @@
 import { Direction } from "@microsoft/fast-web-utilities";
 import { StandardLuminance } from "@microsoft/fast-components";
-import { DataDictionary } from "@microsoft/fast-tooling";
+import { DataDictionary, SchemaDictionary } from "@microsoft/fast-tooling";
 import { EditorState } from "@microsoft/site-utilities";
 import { ComponentViewConfig } from "./fast-components/configs/data.props";
 
@@ -73,6 +73,11 @@ export interface ExplorerState extends EditorState {
      */
     dataDictionary: DataDictionary<unknown>;
 
+    /**
+     * The schema dictionary
+     */
+    schemaDictionary?: SchemaDictionary;
+
     /**
      * The active pivot tab
      */

sites/fast-creator/app/configs/fast/index.ts

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

sites/fast-creator/app/configs/library.fast.examples.ts → sites/fast-creator/app/configs/fast/library.fast.examples.ts

@@ -1,5 +1,10 @@
 import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import { uniqueId } from "lodash-es";
+import {
+    heading2Example,
+    imageExample,
+    paragraphExample,
+} from "../native/library.native.examples";
 import {
     fastAnchorTag,
     fastBadgeTag,
@@ -24,11 +29,6 @@ import {
     fastTextAreaTag,
     fastTextFieldTag,
 } from "./library.fast.tags";
-import {
-    heading2Example,
-    imageExample,
-    paragraphExample,
-} from "./library.native.examples";
 
 export const fastAnchorExample = {
     schemaId: fastComponentSchemas[fastAnchorTag].id,
@@ -109,6 +109,13 @@ export const fastCheckboxExample = {
     schemaId: fastComponentSchemas[fastCheckboxTag].id,
     data: {},
     dataLocation: "Slot",
+    linkedData: [
+        {
+            schemaId: textSchema.id,
+            data: "Lorem ipsum",
+            dataLocation: "Slot",
+        },
+    ],
 };
 export const fastDialogExample = {
     schemaId: fastComponentSchemas[fastDialogTag].id,

sites/fast-creator/app/configs/fast/library.fast.registry.ts

@@ -0,0 +1,15 @@
+import { DesignSystem } from "@microsoft/fast-foundation";
+import { allComponents } from "@microsoft/fast-components";
+import { setupFASTComponentDesignSystem } from "./library.fast.design-system.mapping";
+
+export function registerFASTComponents(): void {
+    setupFASTComponentDesignSystem(document.body);
+
+    DesignSystem.getOrCreate()
+        .withPrefix("fast")
+        .register(
+            Object.values(allComponents).map((component: () => void) => {
+                return component();
+            })
+        );
+}

sites/fast-creator/app/configs/library.fast.ts → sites/fast-creator/app/configs/fast/library.fast.ts

@@ -1,10 +1,11 @@
 import { fastComponentSchemas } from "@microsoft/site-utilities";
-import { WebComponentLibraryDefinition } from "./typings";
+import { WebComponentLibraryDefinition } from "../typings";
 import {
     fastAnchorExample,
     fastBadgeExample,
     fastButtonExample,
     fastCardExample,
+    fastCheckboxExample,
     fastDialogExample,
     fastDividerExample,
     fastFlipperExample,
@@ -82,7 +83,7 @@ export const fastComponentLibrary: WebComponentLibraryDefinition = {
         [fastComponentSchemas[fastCheckboxTag].$id]: {
             displayName: fastComponentSchemas[fastCheckboxTag].title,
             schema: fastComponentSchemas[fastCheckboxTag],
-            example: fastCardExample,
+            example: fastCheckboxExample,
         },
         [fastComponentSchemas[fastDialogTag].$id]: {
             displayName: fastComponentSchemas[fastDialogTag].title,

sites/fast-creator/app/configs/fluent-ui/index.ts

@@ -0,0 +1 @@
+export * from "./library.fluent-ui";

sites/fast-creator/app/configs/fluent-ui/library.fluent-ui.design-system.mapping.ts

@@ -0,0 +1,49 @@
+import {
+    baseLayerLuminance,
+    controlCornerRadius,
+    disabledOpacity,
+    fillColor,
+    focusStrokeWidth,
+    neutralForegroundRest,
+    strokeWidth,
+    SwatchRGB,
+} from "@fluentui/web-components";
+
+export function setupFluentUIComponentDesignSystem(element: HTMLElement) {
+    element.style.setProperty("background-color", `var(${fillColor.cssCustomProperty})`);
+    element.style.setProperty("color", `var(${neutralForegroundRest.cssCustomProperty})`);
+}
+
+export function mapFluentUIComponentsDesignSystem(
+    element: HTMLElement,
+    designSystem: {
+        [key: string]: any;
+    }
+): void {
+    Object.entries(designSystem).forEach(([attribute, value]: [string, any]) => {
+        switch (attribute) {
+            case "fill-color":
+                fillColor.setValueFor(element, value);
+                break;
+            case "base-layer-luminance":
+                baseLayerLuminance.setValueFor(element, value);
+                break;
+            case "control-corner-radius":
+                controlCornerRadius.setValueFor(element, value);
+                break;
+            case "stroke-width":
+                strokeWidth.setValueFor(element, value);
+                break;
+            case "focus-stroke-width":
+                focusStrokeWidth.setValueFor(element, value);
+                break;
+            case "disabled-opacity":
+                disabledOpacity.setValueFor(element, value);
+                break;
+            case "theme":
+                baseLayerLuminance.setValueFor(element, value);
+                fillColor.setValueFor(element, SwatchRGB.create(value, value, value));
+                break;
+        }
+    });
+}

sites/fast-creator/app/configs/fluent-ui/library.fluent-ui.design-tokens.schema.json

@@ -0,0 +1,66 @@
+{
+    "$schema": "http://json-schema.org/schema#",
+    "title": "Fluent UI Design Tokens",
+    "description": "The Fluent UI Design Tokens definition.",
+    "type": "object",
+    "id": "fluentUIDesignTokens",
+    "properties": {
+        "fill-color": {
+            "formControlId": "fill-color",
+            "title": "Fill color",
+            "type": "string"
+        },
+        "base-layer-luminance": {
+            "formControlId": "base-layer-luminance",
+            "title": "Base layer luminance",
+            "type": "number",
+            "default": 0.23
+        },
+        "control-corner-radius": {
+            "formControlId": "control-corner-radius",
+            "title": "Control corner radius",
+            "description": "The corner radius value for controls",
+            "type": "number",
+            "default": 3
+        },
+        "stroke-width": {
+            "formControlId": "stroke-width",
+            "title": "Stroke width",
+            "type": "number",
+            "default": 1
+        },
+        "focus-stroke-width": {
+            "formControlId": "focus-stroke-width",
+            "title": "Focus stroke width",
+            "description": "The stroke width of elements when focused",
+            "type": "number",
+            "default": 2
+        },
+        "disabled-opacity": {
+            "formControlId": "disabled-opacity",
+            "title": "disabled opacity",
+            "type": "number",
+            "default": 0.3
+        },
+        "direction": {
+            "formControlId": "direction",
+            "title": "The left/right reflow direction",
+            "type": "string",
+            "enum": [
+                "ltr",
+                "rtl"
+            ],
+            "default": "ltr"
+        },
+        "theme": {
+            "formControlId": "theme",
+            "title": "The dark or light theme",
+            "type": "number",
+            "enum": [
+                0.23,
+                1
+            ],
+            "default": "1"
+        }
+    }
+}