Introduce new fluent shared components; conditionally load them from existing shared components if useFluent context is true

.eslintrc.js

@@ -416,6 +416,16 @@ const rules = {
                             match: true,
                         },
                     },
+                    {
+                        // Exception for hooks which start with 'use'
+                        selector: "variable",
+                        format: ["strictCamelCase"],
+                        modifiers: ["global"],
+                        filter: {
+                            regex: "^use",
+                            match: true,
+                        },
+                    },
                     {
                         selector: "variable",
                         format: ["PascalCase"],

packages/dev/buildTools/src/generateDeclaration.ts

@@ -112,7 +112,7 @@ function GetModuleDeclaration(
                                 // not a dev dependency
                                 // TODO - make a list of external dependencies per package
                                 // for now - we support react
-                                if (match[1] !== "react") {
+                                if (match[1] !== "react" /* && !match[1].startsWith("@fluentui")*/) {
                                     // check what the line imports
                                     line = "";
                                 }
@@ -163,9 +163,9 @@ function GetModuleDeclaration(
         // TODO - make a list of dependencies that are accepted by each package
         if (!devPackageName) {
             if (externalName) {
-                if (externalName === "@fortawesome" || externalName === "react-contextmenu") {
+                if (externalName === "@fortawesome" || externalName === "react-contextmenu" || externalName === "@fluentui") {
                     // replace with any
-                    const matchRegex = new RegExp(`([ <])(${alias}[^;\n ]*)([^\\w])`, "g");
+                    const matchRegex = new RegExp(`([ <])(${alias}[^,;\n> ]*)([^\\w])`, "g");
                     processedLines = processedLines.replace(matchRegex, `$1any$3`);
                     return;
                 }
@@ -399,9 +399,9 @@ function GetPackageDeclaration(
             // TODO - make a list of dependencies that are accepted by each package
             if (!localDevPackageMap) {
                 if (externalName) {
-                    if (externalName === "@fortawesome" || externalName === "react-contextmenu") {
+                    if (externalName === "@fortawesome" || externalName === "react-contextmenu" || externalName === "@fluentui") {
                         // replace with any
-                        const matchRegex = new RegExp(`([ <])(${alias}[^;\n ]*)([^\\w])`, "g");
+                        const matchRegex = new RegExp(`([ <])(${alias}[^,;\n> ]*)([^\\w])`, "g");
                         processedSource = processedSource.replace(matchRegex, `$1any$3`);
                         return;
                     } else if (externalName === "react") {

packages/dev/inspector/src/components/actionTabs/tabs/propertyGridTabComponent.tsx

@@ -116,6 +116,7 @@ import { SkyMaterialPropertyGridComponent } from "./propertyGrids/materials/skyM
 import { Tags } from "core/Misc/tags";
 import { LineContainerComponent } from "shared-ui-components/lines/lineContainerComponent";
 import type { RectAreaLight } from "core/Lights/rectAreaLight";
+import { FluentToolWrapper } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 
 export class PropertyGridTabComponent extends PaneComponent {
     private _timerIntervalId: number;
@@ -774,15 +775,17 @@ export class PropertyGridTabComponent extends PaneComponent {
         const entity = this.props.selectedEntity || {};
         const entityHasMetadataProp = Object.prototype.hasOwnProperty.call(entity, "metadata");
         return (
-            <div className="pane">
-                {this.renderContent()}
-                {Tags.HasTags(entity) && (
-                    <LineContainerComponent title="TAGS" selection={this.props.globalState}>
-                        <div className="tagContainer">{this.renderTags()}</div>
-                    </LineContainerComponent>
-                )}
-                {entityHasMetadataProp && <MetadataGridComponent globalState={this.props.globalState} entity={entity} />}
-            </div>
+            <FluentToolWrapper>
+                <div className="pane">
+                    {this.renderContent()}
+                    {Tags.HasTags(entity) && (
+                        <LineContainerComponent title="TAGS" selection={this.props.globalState}>
+                            <div className="tagContainer">{this.renderTags()}</div>
+                        </LineContainerComponent>
+                    )}
+                    {entityHasMetadataProp && <MetadataGridComponent globalState={this.props.globalState} entity={entity} />}
+                </div>
+            </FluentToolWrapper>
         );
     }
 }

packages/dev/sharedUiComponents/package.json

@@ -24,6 +24,8 @@
         "@fortawesome/fontawesome-svg-core": "^6.1.0",
         "@fortawesome/free-solid-svg-icons": "^6.1.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@fluentui/react-components": "^9.62.0",
+        "@fluentui/react-icons": "^2.0.271",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.2.0",
@@ -38,6 +40,8 @@
         "@fortawesome/fontawesome-svg-core": "^6.1.0",
         "@fortawesome/free-solid-svg-icons": "^6.0.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@fluentui/react-components": "^9.62.0",
+        "@fluentui/react-icons": "^2.0.271",
         "sass": "^1.62.1"
     },
     "sideEffects": false,

packages/dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx

@@ -0,0 +1,40 @@
+import type { FunctionComponent } from "react";
+
+import type { PropertyLineProps } from "./propertyLine";
+import { PropertyLine } from "./propertyLine";
+import { SyncedSliderLine } from "./syncedSliderLine";
+
+import type { Color3 } from "core/Maths/math.color";
+import { Color4 } from "core/Maths/math.color";
+
+type ColorSliderProps = {
+    color: Color3 | Color4;
+};
+
+const ColorSliders: FunctionComponent<ColorSliderProps> = (props) => {
+    return (
+        <>
+            <SyncedSliderLine label="R" propertyKey="r" target={props.color} min={0} max={255} />
+            <SyncedSliderLine label="G" propertyKey="g" target={props.color} min={0} max={255} />
+            <SyncedSliderLine label="B" propertyKey="b" target={props.color} min={0} max={255} />
+            {props.color instanceof Color4 && <SyncedSliderLine label="A" propertyKey="a" target={props.color} min={0} max={1} />}
+        </>
+    );
+};
+
+/**
+ * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
+ * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
+ * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
+ * @returns Component wrapping a colorPicker component (coming soon) with a property line
+ */
+export const ColorPropertyLine: FunctionComponent<ColorSliderProps & PropertyLineProps> = (props) => {
+    return (
+        <PropertyLine {...props} expandedContent={<ColorSliders {...props} />}>
+            {
+                props.color.toString()
+                // Will replace with colorPicker in future PR
+            }
+        </PropertyLine>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/hoc/fluentToolWrapper.tsx

@@ -0,0 +1,32 @@
+import type { PropsWithChildren, FunctionComponent } from "react";
+import { createContext } from "react";
+import type { Theme } from "@fluentui/react-components";
+import { FluentProvider, webDarkTheme } from "@fluentui/react-components";
+
+export type ToolHostProps = {
+    /**
+     * Allows host to pass in a theme
+     */
+    customTheme?: Theme;
+};
+
+export const ToolContext = createContext({ useFluent: false as boolean } as const);
+
+/**
+ * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
+ * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy
+ * @param props
+ * @returns
+ */
+export const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>> = (props) => {
+    const url = new URL(window.location.href);
+    const enableFluent = url.searchParams.has("newUX") || url.hash.includes("newUX");
+
+    return enableFluent ? (
+        <FluentProvider theme={props.customTheme || webDarkTheme}>
+            <ToolContext.Provider value={{ useFluent: true }}>{props.children}</ToolContext.Provider>
+        </FluentProvider>
+    ) : (
+        props.children
+    );
+};

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx

@@ -0,0 +1,108 @@
+import { Body1Strong, Button, InfoLabel, makeStyles, tokens } from "@fluentui/react-components";
+import { Add24Filled, Copy24Regular, Subtract24Filled } from "@fluentui/react-icons";
+import type { FunctionComponent, PropsWithChildren } from "react";
+import { useState } from "react";
+import { copyCommandToClipboard } from "../../copyCommandToClipboard";
+
+const usePropertyLineStyles = makeStyles({
+    container: {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column", // Stack line + expanded content
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    },
+    line: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: `${tokens.spacingVerticalXS} 0px`,
+        width: "100%",
+    },
+    label: {
+        width: "33%",
+        textAlign: "left",
+    },
+    rightContent: {
+        width: "67%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+    },
+    button: {
+        marginLeft: tokens.spacingHorizontalXXS,
+        width: "100px",
+    },
+    fillRestOfRightContentWidth: {
+        flex: 1,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+    },
+    expandedContent: {
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+});
+
+export type PropertyLineProps = {
+    /**
+     * The name of the property to display in the property line.
+     */
+    label: string;
+    /**
+     * Optional description for the property, shown on hover of the info icon
+     */
+    description?: string;
+    /**
+     * Optional function returning a string to copy to clipboard.
+     */
+    onCopy?: () => string;
+    /**
+     * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
+     */
+    expandedContent?: JSX.Element;
+};
+
+/**
+ * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
+ *
+ * @param props - The properties for the PropertyLine component.
+ * @returns A React element representing the property line.
+ *
+ */
+export const PropertyLine: FunctionComponent<PropsWithChildren<PropertyLineProps>> = (props) => {
+    const classes = usePropertyLineStyles();
+    const [expanded, setExpanded] = useState(false);
+
+    const { label, description, onCopy, expandedContent, children } = props;
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.line}>
+                <InfoLabel className={classes.label} info={description}>
+                    <Body1Strong>{label}</Body1Strong>
+                </InfoLabel>
+                <div className={classes.rightContent}>
+                    <div className={classes.fillRestOfRightContentWidth}>{children}</div>
+
+                    {expandedContent && (
+                        <Button
+                            appearance="subtle"
+                            icon={expanded ? <Subtract24Filled /> : <Add24Filled />}
+                            className={classes.button}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setExpanded((expanded) => !expanded);
+                            }}
+                        />
+                    )}
+
+                    {onCopy && (
+                        <Button className={classes.button} id="copyProperty" icon={<Copy24Regular />} onClick={() => copyCommandToClipboard(onCopy())} title="Copy to clipboard" />
+                    )}
+                </div>
+            </div>
+
+            {expanded && expandedContent && <div className={classes.expandedContent}>{expandedContent}</div>}
+        </div>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/hoc/syncedSliderLine.tsx

@@ -0,0 +1,45 @@
+import { PropertyLine } from "./propertyLine";
+import type { PropertyLineProps } from "./propertyLine";
+import { SyncedSliderInput } from "../primitives/syncedSlider";
+import type { SyncedSliderProps } from "../primitives/syncedSlider";
+
+export type SyncedSliderLineProps<O, K> = PropertyLineProps &
+    Omit<SyncedSliderProps, "value" | "onChange"> & {
+        /**
+         * String key
+         */
+        propertyKey: K;
+        /**
+         * target where O[K] is a number
+         */
+        target: O;
+        /**
+         * Callback when either the slider or input value changes
+         */
+        onChange?: (value: number) => void;
+    };
+
+/**
+ * Renders a SyncedSlider within a PropertyLine for a given key/value pair, where the value is number (ex: can be used for a color's RGBA values, a vector's XYZ values, etc)
+ * When value changes, updates the object with the new value and calls the onChange callback.
+ *
+ * Example usage looks like
+ *    \<SyncedSliderLine propertyKey="x" target=\{vector\} /\>
+ *    \<SyncedSliderLine propertyKey="r" target=\{color\} /\>
+ * @param props
+ * @returns
+ */
+export const SyncedSliderLine = <O extends Record<K, number>, K extends PropertyKey>(props: SyncedSliderLineProps<O, K>): React.ReactElement => {
+    return (
+        <PropertyLine {...props}>
+            <SyncedSliderInput
+                {...props}
+                value={props.target[props.propertyKey]}
+                onChange={(val) => {
+                    props.target[props.propertyKey] = val as O[K];
+                    props.onChange?.(val);
+                }}
+            />
+        </PropertyLine>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx

@@ -0,0 +1,43 @@
+import type { FunctionComponent } from "react";
+
+import { Body1 } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine";
+import type { PropertyLineProps } from "./propertyLine";
+
+import { SyncedSliderLine } from "./syncedSliderLine";
+
+import { Vector4 } from "core/Maths/math.vector";
+import type { Vector3 } from "core/Maths/math.vector";
+
+type VectorSliderProps = {
+    vector: Vector3 | Vector4;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+
+const VectorSliders: FunctionComponent<VectorSliderProps> = (props) => {
+    const { vector, ...sliderProps } = props;
+    return (
+        <>
+            <SyncedSliderLine label="X" propertyKey="x" target={vector} {...sliderProps} />
+            <SyncedSliderLine label="Y" propertyKey="y" target={vector} {...sliderProps} />
+            <SyncedSliderLine label="Z" propertyKey="z" target={vector} {...sliderProps} />
+            {vector instanceof Vector4 && <SyncedSliderLine label="W" propertyKey="w" target={vector} {...sliderProps} />}
+        </>
+    );
+};
+
+/**
+ * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
+ * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
+ * @param props
+ * @returns
+ */
+export const VectorPropertyLine: FunctionComponent<VectorSliderProps & PropertyLineProps> = (props) => {
+    return (
+        <PropertyLine {...props} expandedContent={<VectorSliders {...props} />}>
+            <Body1>{props.vector.toString()}</Body1>
+        </PropertyLine>
+    );
+};