@microsoft/teamsfx-react 3.0.0-alpha.548abe451.0 → 3.0.0-alpha.557015fcd.0

package/README.md

@@ -34,10 +34,19 @@ npm install @microsoft/teamsfx-react
 
 Please also install the peer dependencies if you are using npm 6. 
 ```bash
-npm install @microsoft/teamsfx@^2.0.0 @microsoft/teams-js@^2.0.0 react@^16.8.6 react-dom@^16.8.6 @fluentui/react-northstar@^0.62.0 msteams-react-base-component@^3.1.1
+npm install @microsoft/teamsfx@^2.0.0 @microsoft/teams-js@^2.0.0 react@^18.2.0 react-dom@^18.2.0 @fluentui/react-components@^9.16.0 @microsoft/microsoft-graph-client@^3.0.1
 ```
 
-Note that for `@microsoft/teamsfx-react@^2.0.0`, it depends on `@microsoft/teamsfx@^2.0.0` and `@microsoft/teams-js@^2.0.0`. If you wish to use lower versions, please install the peer dependencies as follows:
+#### Note
+
+For `@microsoft/teamsfx-react@^3.0.0`, it migrated to use `@fluentui/react-components` and did not support `@fluentui/react-northstar` any longer. If you still wish to use `@fluentui/react-northstar`, please use `@microsoft/teamsfx-react@<3.0.0`. To install the peer dependencies, you could use the following line:
+
+```bash
+npm install @microsoft/teamsfx@^2.0.0 @microsoft/teams-js@^2.0.0 react@^16.8.6 react-dom@^16.8.6 @fluentui/react-northstar@^0.62.0 @microsoft/microsoft-graph-client@^3.0.1
+```
+
+For `@microsoft/teamsfx-react@^2.0.0` and `@microsoft/teamsfx-react@^3.0.0`, they depend on `@microsoft/teamsfx@^2.0.0` and `@microsoft/teams-js@^2.0.0`. If you wish to use lower versions, please install the peer dependencies as follows:
+
 ```bash
 npm install @microsoft/teamsfx@^0.6.0 react@^16.8.6 @fluentui/react-northstar@^0.60.1 msteams-react-base-component@^3.1.1
 ```
@@ -111,6 +120,66 @@ return (
 );
 ```
 
+### Building a Dashboard Tab
+
+#### 1. Create a new widget
+
+Here is an example of creating a new widget:
+
+```tsx
+import { Button, Text } from "@fluentui/react-components";
+import { BaseWidget } from "@microsoft/teamsfx-react";
+import { SampleModel } from "../models/sampleModel";
+import { getSampleData } from "../services/sampleService";
+
+interface SampleWidgetState {
+  data?: SampleModel;
+}
+
+export class SampleWidget extends BaseWidget<any, SampleWidgetState> {
+  override async getData(): Promise<SampleWidgetState> {
+    return { data: getSampleData() };
+  }
+
+  override header(): JSX.Element | undefined {
+    return <Text>Sample Widget</Text>;
+  }
+
+  override body(): JSX.Element | undefined {
+    return <div>{this.state.data?.content}</div>;
+  }
+
+  override footer(): JSX.Element | undefined {
+    return <Button>View Details</Button>;
+  }
+}
+```
+
+#### 2. Create a new dashboard
+
+Here is an example of creating a new dashboard:
+
+```tsx
+import { BaseDashboard } from "@microsoft/teamsfx-react";
+import ListWidget from "../widgets/ListWidget";
+import ChartWidget from "../widgets/ChartWidget";
+
+export default class YourDashboard extends BaseDashboard<any, any> {
+  override styling(): string {
+    return "styling-class-name";
+  }
+
+  override layout(): JSX.Element | undefined {
+    return (
+      <>
+        <ListWidget />
+        <ChartWidget />
+      </>
+    );
+  }
+}
+```
+
 ## React Hook list
 
 ### useData
@@ -141,6 +210,14 @@ const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredent
 This hook function leverage `useData` to call Graph API. It will execute the fetchGraphDataAsync function that the developer passes in first.
 If user has not consented to the scopes of AAD resources, `useGraph()`, `useGraphWithCredential` will automatically call login function to pop up the consent dialog. So, developers can focus on the business logic of how to fetch Microsoft Graph data.
 
+## Dashboard Related Classes
+
+### BaseDashboard
+The BaseDashboard is a React component that provides a basic dashboard layout implementation for developers to quickly build a dashboard tab for Microsoft Teams. You can inherit this class and override some methods to customize your own dashboard. For example, define the layout of the widget in your dashboard by overriding the `layout()` method, and customize the dashboard style by overriding the `styling()` method.
+
+### BaseWidget
+The BaseWidget is a React component that provides a basic widget layout implementation for developers to quickly build a widget. You can inherit this class and override some methods to customize your own widget. For example, define the header of the widget by overriding the `header()` method, and get data needed for the widget by overriding the `getData()` method, etc.
+
 ## Next steps
 
 Please take a look at the [Samples](https://github.com/OfficeDev/TeamsFx-Samples) project for detailed examples on how to use this library.

package/build/cjs/BaseDashboard.d.ts

@@ -0,0 +1,59 @@
+import { Component } from "react";
+/**
+ * The state interface for the BaseDashboard component.
+ */
+interface BaseDashboardState {
+    /**
+     * A boolean property that indicates whether the dashboard layout should be optimized for mobile devices.
+     */
+    isMobile?: boolean;
+    /**
+     * A boolean property that indicates whether the login page should be displayed.
+     */
+    showLogin?: boolean;
+    /**
+     * The resize observer for the dashboard.
+     * @internal
+     */
+    observer?: ResizeObserver;
+}
+/**
+ * The base component that provides basic functionality to create a dashboard.
+ * @typeParam P The type of props.
+ * @typeParam S The type of state.
+ */
+export declare class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
+    /**
+     * @internal
+     */
+    private ref;
+    /**
+     * Constructor of BaseDashboard.
+     * @param {Readonly<P>} props The properties for the dashboard.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Defines the default layout for the dashboard.
+     */
+    render(): JSX.Element;
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     * @returns The layout of the widget in the dashboard.
+     */
+    protected layout(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The className for customizing the dashboard style.
+     */
+    protected styling(): string;
+}
+export {};
+//# sourceMappingURL=BaseDashboard.d.ts.map

package/build/cjs/BaseDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDashboard.d.ts","sourceRoot":"","sources":["../../src/BaseDashboard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;GAIG;AACH,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC;IAC3E;;OAEG;IACH,OAAO,CAAC,GAAG,CAAkC;IAE7C;;;OAGG;gBACgB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAUrC;;OAEG;IACU,iBAAiB;IAa9B;;OAEG;IACI,oBAAoB,IAAI,IAAI;IAOnC;;OAEG;IACI,MAAM;IAWb;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,MAAM;CAG5B"}

package/build/cjs/BaseDashboard.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseDashboard = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("@fluentui/react");
+/**
+ * Returns the CSS class name for the dashboard.
+ * @returns The CSS class name for the dashboard.
+ * @internal
+ */
+function dashboardStyle(isMobile) {
+    return (0, react_2.mergeStyles)(tslib_1.__assign({ display: "grid", gap: "20px", padding: "20px", gridTemplateRows: "1fr", gridTemplateColumns: "4fr 6fr" }, (isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {})));
+}
+/**
+ * The base component that provides basic functionality to create a dashboard.
+ * @typeParam P The type of props.
+ * @typeParam S The type of state.
+ */
+var BaseDashboard = /** @class */ (function (_super) {
+    tslib_1.__extends(BaseDashboard, _super);
+    /**
+     * Constructor of BaseDashboard.
+     * @param {Readonly<P>} props The properties for the dashboard.
+     */
+    function BaseDashboard(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isMobile: undefined,
+            showLogin: undefined,
+            observer: undefined,
+        };
+        _this.ref = react_1.default.createRef();
+        return _this;
+    }
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    BaseDashboard.prototype.componentDidMount = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var observer;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                observer = new ResizeObserver(function (entries) {
+                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                        var entry = entries_1[_i];
+                        if (entry.target === _this.ref.current) {
+                            var width = entry.contentRect.width;
+                            _this.setState({ isMobile: width < 600 });
+                        }
+                    }
+                });
+                observer.observe(this.ref.current);
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
+     */
+    BaseDashboard.prototype.componentWillUnmount = function () {
+        // Unobserve the dashboard div for resize events
+        if (this.state.observer && this.ref.current) {
+            this.state.observer.unobserve(this.ref.current);
+        }
+    };
+    /**
+     * Defines the default layout for the dashboard.
+     */
+    BaseDashboard.prototype.render = function () {
+        return (react_1.default.createElement("div", { ref: this.ref, className: (0, react_2.mergeStyles)(dashboardStyle(this.state.isMobile), this.styling()) }, this.layout()));
+    };
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     * @returns The layout of the widget in the dashboard.
+     */
+    BaseDashboard.prototype.layout = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The className for customizing the dashboard style.
+     */
+    BaseDashboard.prototype.styling = function () {
+        return null;
+    };
+    return BaseDashboard;
+}(react_1.Component));
+exports.BaseDashboard = BaseDashboard;

package/build/cjs/BaseWidget.d.ts

@@ -0,0 +1,89 @@
+import { Component } from "react";
+/**
+ * Interface for defining the class names of widget elements
+ */
+export interface IWidgetClassNames {
+    /**
+     * The class name for the root part of the widget.
+     */
+    root?: string;
+    /**
+     * The class name for the header part of the widget.
+     */
+    header?: string;
+    /**
+     * The class name for the body part of the widget.
+     */
+    body?: string;
+    /**
+     * The class name for the footer part of the widget.
+     */
+    footer?: string;
+}
+/**
+ * Interface for defining the state of the BaseWidget class
+ */
+interface BaseWidgetState {
+    loading?: boolean;
+}
+/**
+ * The base component that provides basic functionality to create a widget.
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+export declare class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
+    /**
+     * Constructor of BaseWidget.
+     * @param {Readonly<P>} props - The props of the component.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Defines the default layout for the widget.
+     */
+    render(): JSX.Element;
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    protected getData(): Promise<S>;
+    /**
+     * The purpose of this method is to provide a way for you to add custom header content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's header.
+     * If the method is not overridden, the widget will return undefined as the default value for the header, indicating that no custom header content has been defined.
+     * @returns An optional JSX.Element representing the header of the widget.
+     */
+    protected header(): JSX.Element | undefined;
+    /**
+     * The purpose of this method is to provide a way for you to add custom body content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's body.
+     * If the method is not overridden, the widget will return undefined as the default value for the body, indicating that no custom body content has been defined.
+     * @returns An optional JSX.Element representing the body of the widget.
+     */
+    protected body(): JSX.Element | undefined;
+    /**
+     * The purpose of this method is to provide a way for you to add custom footer content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's footer.
+     * If the method is not overridden, the widget will return undefined as the default value for the footer, indicating that no custom footer content has been defined.
+     * @returns An optional JSX.Element representing the footer of the widget.
+     */
+    protected footer(): JSX.Element | undefined;
+    /**
+     * This method is typically called when the widget is in the process of fetching data.
+     * The `undefined` return value is used to indicate that no loading indicator is required.
+     * If a loading indicator is required, the method can return a `JSX.Element` containing the necessary components to render the loading indicator.
+     * @returns A JSX element or `undefined` if no loading indicator is required.
+     */
+    protected loading(): JSX.Element | undefined;
+    /**
+     * Override this method to returns an object that defines the class names for the different parts of the widget.
+     * The returned object conforms to the {@link IWidgetClassNames} interface which defines the possible keys and values for the class names.
+     * @returns An object that defines the class names for the different parts of the widget.
+     */
+    protected styling(): IWidgetClassNames;
+}
+export {};
+//# sourceMappingURL=BaseWidget.d.ts.map

package/build/cjs/BaseWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseWidget.d.ts","sourceRoot":"","sources":["../../src/BaseWidget.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2CD;;GAEG;AACH,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;IACrE;;;OAGG;gBACgB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAKrC;;OAEG;IACU,iBAAiB;IAI9B;;OAEG;IACI,MAAM;IAsBb;;;OAGG;cACa,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;IAIrC;;;;;OAKG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;;OAKG;IACH,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAIzC;;;;;OAKG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;;OAKG;IACH,SAAS,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI5C;;;;OAIG;IACH,SAAS,CAAC,OAAO,IAAI,iBAAiB;CAGvC"}

package/build/cjs/BaseWidget.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseWidget = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("@fluentui/react");
+var react_components_1 = require("@fluentui/react-components");
+/**
+ * Style definitions for the widget elements
+ * @internal
+ */
+var classNames = (0, react_2.mergeStyleSets)({
+    root: {
+        display: "grid",
+        padding: "1.25rem 2rem 1.25rem 2rem",
+        backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+        border: "1px solid var(--colorTransparentStroke)",
+        boxShadow: react_components_1.tokens.shadow4,
+        borderRadius: react_components_1.tokens.borderRadiusMedium,
+        gap: react_components_1.tokens.spacingHorizontalL,
+        gridTemplateRows: "max-content 1fr max-content",
+    },
+    header: {
+        display: "grid",
+        height: "max-content",
+        "& div": {
+            display: "grid",
+            gap: react_components_1.tokens.spacingHorizontalS,
+            alignItems: "center",
+            gridTemplateColumns: "min-content 1fr min-content",
+        },
+        "& svg": {
+            height: "1.5rem",
+            width: "1.5rem",
+        },
+        "& span": {
+            fontWeight: react_components_1.tokens.fontWeightSemibold,
+            lineHeight: react_components_1.tokens.lineHeightBase200,
+            fontSize: react_components_1.tokens.fontSizeBase200,
+        },
+    },
+    footer: {
+        "& button": {
+            width: "fit-content",
+        },
+    },
+});
+/**
+ * The base component that provides basic functionality to create a widget.
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+var BaseWidget = /** @class */ (function (_super) {
+    tslib_1.__extends(BaseWidget, _super);
+    /**
+     * Constructor of BaseWidget.
+     * @param {Readonly<P>} props - The props of the component.
+     */
+    function BaseWidget(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { loading: undefined };
+        return _this;
+    }
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    BaseWidget.prototype.componentDidMount = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.setState;
+                        _b = [{}];
+                        return [4 /*yield*/, this.getData()];
+                    case 1:
+                        _a.apply(this, [tslib_1.__assign.apply(void 0, [tslib_1.__assign.apply(void 0, _b.concat([(_c.sent())])), { loading: false }])]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Defines the default layout for the widget.
+     */
+    BaseWidget.prototype.render = function () {
+        var _a = this.styling(), root = _a.root, header = _a.header, body = _a.body, footer = _a.footer;
+        var showLoading = this.state.loading !== false && this.loading() !== undefined;
+        return (react_1.default.createElement("div", { className: (0, react_2.mergeStyles)(classNames.root, root) },
+            this.header() && (react_1.default.createElement("div", { className: (0, react_2.mergeStyles)(classNames.header, header) }, this.header())),
+            showLoading ? (this.loading()) : (react_1.default.createElement(react_1.default.Fragment, null,
+                this.body() !== undefined && react_1.default.createElement("div", { className: body }, this.body()),
+                this.footer() !== undefined && (react_1.default.createElement("div", { className: (0, react_2.mergeStyles)(classNames.footer, footer) }, this.footer()))))));
+    };
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    BaseWidget.prototype.getData = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                return [2 /*return*/, undefined];
+            });
+        });
+    };
+    /**
+     * The purpose of this method is to provide a way for you to add custom header content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's header.
+     * If the method is not overridden, the widget will return undefined as the default value for the header, indicating that no custom header content has been defined.
+     * @returns An optional JSX.Element representing the header of the widget.
+     */
+    BaseWidget.prototype.header = function () {
+        return undefined;
+    };
+    /**
+     * The purpose of this method is to provide a way for you to add custom body content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's body.
+     * If the method is not overridden, the widget will return undefined as the default value for the body, indicating that no custom body content has been defined.
+     * @returns An optional JSX.Element representing the body of the widget.
+     */
+    BaseWidget.prototype.body = function () {
+        return undefined;
+    };
+    /**
+     * The purpose of this method is to provide a way for you to add custom footer content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's footer.
+     * If the method is not overridden, the widget will return undefined as the default value for the footer, indicating that no custom footer content has been defined.
+     * @returns An optional JSX.Element representing the footer of the widget.
+     */
+    BaseWidget.prototype.footer = function () {
+        return undefined;
+    };
+    /**
+     * This method is typically called when the widget is in the process of fetching data.
+     * The `undefined` return value is used to indicate that no loading indicator is required.
+     * If a loading indicator is required, the method can return a `JSX.Element` containing the necessary components to render the loading indicator.
+     * @returns A JSX element or `undefined` if no loading indicator is required.
+     */
+    BaseWidget.prototype.loading = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to returns an object that defines the class names for the different parts of the widget.
+     * The returned object conforms to the {@link IWidgetClassNames} interface which defines the possible keys and values for the class names.
+     * @returns An object that defines the class names for the different parts of the widget.
+     */
+    BaseWidget.prototype.styling = function () {
+        return {};
+    };
+    return BaseWidget;
+}(react_1.Component));
+exports.BaseWidget = BaseWidget;

package/build/cjs/index.d.ts

@@ -3,4 +3,6 @@ export { useData } from "./useData";
 export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
 export { useTeamsUserCredential, TeamsContextWithCredential } from "./useTeamsUserCredential";
 export { useGraph, useGraphWithCredential } from "./useGraph";
+export { BaseDashboard } from "./BaseDashboard";
+export { BaseWidget, IWidgetClassNames } from "./BaseWidget";
 //# sourceMappingURL=index.d.ts.map

package/build/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/build/cjs/index.js

@@ -2,7 +2,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraphWithCredential = exports.useGraph = exports.useTeamsUserCredential = exports.useTeamsFx = exports.useData = exports.useTeams = void 0;
+exports.BaseWidget = exports.BaseDashboard = exports.useGraphWithCredential = exports.useGraph = exports.useTeamsUserCredential = exports.useTeamsFx = exports.useData = exports.useTeams = void 0;
 var useTeams_1 = require("./useTeams");
 Object.defineProperty(exports, "useTeams", { enumerable: true, get: function () { return useTeams_1.useTeams; } });
 var useData_1 = require("./useData");
@@ -14,3 +14,7 @@ Object.defineProperty(exports, "useTeamsUserCredential", { enumerable: true, get
 var useGraph_1 = require("./useGraph");
 Object.defineProperty(exports, "useGraph", { enumerable: true, get: function () { return useGraph_1.useGraph; } });
 Object.defineProperty(exports, "useGraphWithCredential", { enumerable: true, get: function () { return useGraph_1.useGraphWithCredential; } });
+var BaseDashboard_1 = require("./BaseDashboard");
+Object.defineProperty(exports, "BaseDashboard", { enumerable: true, get: function () { return BaseDashboard_1.BaseDashboard; } });
+var BaseWidget_1 = require("./BaseWidget");
+Object.defineProperty(exports, "BaseWidget", { enumerable: true, get: function () { return BaseWidget_1.BaseWidget; } });

package/build/esm/BaseDashboard.d.ts

@@ -0,0 +1,59 @@
+import { Component } from "react";
+/**
+ * The state interface for the BaseDashboard component.
+ */
+interface BaseDashboardState {
+    /**
+     * A boolean property that indicates whether the dashboard layout should be optimized for mobile devices.
+     */
+    isMobile?: boolean;
+    /**
+     * A boolean property that indicates whether the login page should be displayed.
+     */
+    showLogin?: boolean;
+    /**
+     * The resize observer for the dashboard.
+     * @internal
+     */
+    observer?: ResizeObserver;
+}
+/**
+ * The base component that provides basic functionality to create a dashboard.
+ * @typeParam P The type of props.
+ * @typeParam S The type of state.
+ */
+export declare class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
+    /**
+     * @internal
+     */
+    private ref;
+    /**
+     * Constructor of BaseDashboard.
+     * @param {Readonly<P>} props The properties for the dashboard.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Defines the default layout for the dashboard.
+     */
+    render(): JSX.Element;
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     * @returns The layout of the widget in the dashboard.
+     */
+    protected layout(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The className for customizing the dashboard style.
+     */
+    protected styling(): string;
+}
+export {};
+//# sourceMappingURL=BaseDashboard.d.ts.map

package/build/esm/BaseDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDashboard.d.ts","sourceRoot":"","sources":["../../src/BaseDashboard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;GAIG;AACH,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC;IAC3E;;OAEG;IACH,OAAO,CAAC,GAAG,CAAkC;IAE7C;;;OAGG;gBACgB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAUrC;;OAEG;IACU,iBAAiB;IAa9B;;OAEG;IACI,oBAAoB,IAAI,IAAI;IAOnC;;OAEG;IACI,MAAM;IAWb;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,MAAM;CAG5B"}

package/build/esm/BaseDashboard.js

@@ -0,0 +1,86 @@
+import { __assign, __awaiter, __extends, __generator } from "tslib";
+import React, { Component } from "react";
+import { mergeStyles } from "@fluentui/react";
+/**
+ * Returns the CSS class name for the dashboard.
+ * @returns The CSS class name for the dashboard.
+ * @internal
+ */
+function dashboardStyle(isMobile) {
+    return mergeStyles(__assign({ display: "grid", gap: "20px", padding: "20px", gridTemplateRows: "1fr", gridTemplateColumns: "4fr 6fr" }, (isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {})));
+}
+/**
+ * The base component that provides basic functionality to create a dashboard.
+ * @typeParam P The type of props.
+ * @typeParam S The type of state.
+ */
+var BaseDashboard = /** @class */ (function (_super) {
+    __extends(BaseDashboard, _super);
+    /**
+     * Constructor of BaseDashboard.
+     * @param {Readonly<P>} props The properties for the dashboard.
+     */
+    function BaseDashboard(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isMobile: undefined,
+            showLogin: undefined,
+            observer: undefined,
+        };
+        _this.ref = React.createRef();
+        return _this;
+    }
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    BaseDashboard.prototype.componentDidMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var observer;
+            var _this = this;
+            return __generator(this, function (_a) {
+                observer = new ResizeObserver(function (entries) {
+                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                        var entry = entries_1[_i];
+                        if (entry.target === _this.ref.current) {
+                            var width = entry.contentRect.width;
+                            _this.setState({ isMobile: width < 600 });
+                        }
+                    }
+                });
+                observer.observe(this.ref.current);
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
+     */
+    BaseDashboard.prototype.componentWillUnmount = function () {
+        // Unobserve the dashboard div for resize events
+        if (this.state.observer && this.ref.current) {
+            this.state.observer.unobserve(this.ref.current);
+        }
+    };
+    /**
+     * Defines the default layout for the dashboard.
+     */
+    BaseDashboard.prototype.render = function () {
+        return (React.createElement("div", { ref: this.ref, className: mergeStyles(dashboardStyle(this.state.isMobile), this.styling()) }, this.layout()));
+    };
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     * @returns The layout of the widget in the dashboard.
+     */
+    BaseDashboard.prototype.layout = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The className for customizing the dashboard style.
+     */
+    BaseDashboard.prototype.styling = function () {
+        return null;
+    };
+    return BaseDashboard;
+}(Component));
+export { BaseDashboard };

package/build/esm/BaseWidget.d.ts

@@ -0,0 +1,89 @@
+import { Component } from "react";
+/**
+ * Interface for defining the class names of widget elements
+ */
+export interface IWidgetClassNames {
+    /**
+     * The class name for the root part of the widget.
+     */
+    root?: string;
+    /**
+     * The class name for the header part of the widget.
+     */
+    header?: string;
+    /**
+     * The class name for the body part of the widget.
+     */
+    body?: string;
+    /**
+     * The class name for the footer part of the widget.
+     */
+    footer?: string;
+}
+/**
+ * Interface for defining the state of the BaseWidget class
+ */
+interface BaseWidgetState {
+    loading?: boolean;
+}
+/**
+ * The base component that provides basic functionality to create a widget.
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+export declare class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
+    /**
+     * Constructor of BaseWidget.
+     * @param {Readonly<P>} props - The props of the component.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Defines the default layout for the widget.
+     */
+    render(): JSX.Element;
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    protected getData(): Promise<S>;
+    /**
+     * The purpose of this method is to provide a way for you to add custom header content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's header.
+     * If the method is not overridden, the widget will return undefined as the default value for the header, indicating that no custom header content has been defined.
+     * @returns An optional JSX.Element representing the header of the widget.
+     */
+    protected header(): JSX.Element | undefined;
+    /**
+     * The purpose of this method is to provide a way for you to add custom body content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's body.
+     * If the method is not overridden, the widget will return undefined as the default value for the body, indicating that no custom body content has been defined.
+     * @returns An optional JSX.Element representing the body of the widget.
+     */
+    protected body(): JSX.Element | undefined;
+    /**
+     * The purpose of this method is to provide a way for you to add custom footer content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's footer.
+     * If the method is not overridden, the widget will return undefined as the default value for the footer, indicating that no custom footer content has been defined.
+     * @returns An optional JSX.Element representing the footer of the widget.
+     */
+    protected footer(): JSX.Element | undefined;
+    /**
+     * This method is typically called when the widget is in the process of fetching data.
+     * The `undefined` return value is used to indicate that no loading indicator is required.
+     * If a loading indicator is required, the method can return a `JSX.Element` containing the necessary components to render the loading indicator.
+     * @returns A JSX element or `undefined` if no loading indicator is required.
+     */
+    protected loading(): JSX.Element | undefined;
+    /**
+     * Override this method to returns an object that defines the class names for the different parts of the widget.
+     * The returned object conforms to the {@link IWidgetClassNames} interface which defines the possible keys and values for the class names.
+     * @returns An object that defines the class names for the different parts of the widget.
+     */
+    protected styling(): IWidgetClassNames;
+}
+export {};
+//# sourceMappingURL=BaseWidget.d.ts.map

package/build/esm/BaseWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseWidget.d.ts","sourceRoot":"","sources":["../../src/BaseWidget.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2CD;;GAEG;AACH,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;IACrE;;;OAGG;gBACgB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAKrC;;OAEG;IACU,iBAAiB;IAI9B;;OAEG;IACI,MAAM;IAsBb;;;OAGG;cACa,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;IAIrC;;;;;OAKG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;;OAKG;IACH,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAIzC;;;;;OAKG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;;;OAKG;IACH,SAAS,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI5C;;;;OAIG;IACH,SAAS,CAAC,OAAO,IAAI,iBAAiB;CAGvC"}

package/build/esm/BaseWidget.js

@@ -0,0 +1,149 @@
+import { __assign, __awaiter, __extends, __generator } from "tslib";
+import React, { Component } from "react";
+import { mergeStyles, mergeStyleSets } from "@fluentui/react";
+import { tokens } from "@fluentui/react-components";
+/**
+ * Style definitions for the widget elements
+ * @internal
+ */
+var classNames = mergeStyleSets({
+    root: {
+        display: "grid",
+        padding: "1.25rem 2rem 1.25rem 2rem",
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: "1px solid var(--colorTransparentStroke)",
+        boxShadow: tokens.shadow4,
+        borderRadius: tokens.borderRadiusMedium,
+        gap: tokens.spacingHorizontalL,
+        gridTemplateRows: "max-content 1fr max-content",
+    },
+    header: {
+        display: "grid",
+        height: "max-content",
+        "& div": {
+            display: "grid",
+            gap: tokens.spacingHorizontalS,
+            alignItems: "center",
+            gridTemplateColumns: "min-content 1fr min-content",
+        },
+        "& svg": {
+            height: "1.5rem",
+            width: "1.5rem",
+        },
+        "& span": {
+            fontWeight: tokens.fontWeightSemibold,
+            lineHeight: tokens.lineHeightBase200,
+            fontSize: tokens.fontSizeBase200,
+        },
+    },
+    footer: {
+        "& button": {
+            width: "fit-content",
+        },
+    },
+});
+/**
+ * The base component that provides basic functionality to create a widget.
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+var BaseWidget = /** @class */ (function (_super) {
+    __extends(BaseWidget, _super);
+    /**
+     * Constructor of BaseWidget.
+     * @param {Readonly<P>} props - The props of the component.
+     */
+    function BaseWidget(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { loading: undefined };
+        return _this;
+    }
+    /**
+     * Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
+     */
+    BaseWidget.prototype.componentDidMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.setState;
+                        _b = [{}];
+                        return [4 /*yield*/, this.getData()];
+                    case 1:
+                        _a.apply(this, [__assign.apply(void 0, [__assign.apply(void 0, _b.concat([(_c.sent())])), { loading: false }])]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Defines the default layout for the widget.
+     */
+    BaseWidget.prototype.render = function () {
+        var _a = this.styling(), root = _a.root, header = _a.header, body = _a.body, footer = _a.footer;
+        var showLoading = this.state.loading !== false && this.loading() !== undefined;
+        return (React.createElement("div", { className: mergeStyles(classNames.root, root) },
+            this.header() && (React.createElement("div", { className: mergeStyles(classNames.header, header) }, this.header())),
+            showLoading ? (this.loading()) : (React.createElement(React.Fragment, null,
+                this.body() !== undefined && React.createElement("div", { className: body }, this.body()),
+                this.footer() !== undefined && (React.createElement("div", { className: mergeStyles(classNames.footer, footer) }, this.footer()))))));
+    };
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    BaseWidget.prototype.getData = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, undefined];
+            });
+        });
+    };
+    /**
+     * The purpose of this method is to provide a way for you to add custom header content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's header.
+     * If the method is not overridden, the widget will return undefined as the default value for the header, indicating that no custom header content has been defined.
+     * @returns An optional JSX.Element representing the header of the widget.
+     */
+    BaseWidget.prototype.header = function () {
+        return undefined;
+    };
+    /**
+     * The purpose of this method is to provide a way for you to add custom body content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's body.
+     * If the method is not overridden, the widget will return undefined as the default value for the body, indicating that no custom body content has been defined.
+     * @returns An optional JSX.Element representing the body of the widget.
+     */
+    BaseWidget.prototype.body = function () {
+        return undefined;
+    };
+    /**
+     * The purpose of this method is to provide a way for you to add custom footer content to the widget.
+     * By overriding this method, you can add additional functionality or styling to the widget's footer.
+     * If the method is not overridden, the widget will return undefined as the default value for the footer, indicating that no custom footer content has been defined.
+     * @returns An optional JSX.Element representing the footer of the widget.
+     */
+    BaseWidget.prototype.footer = function () {
+        return undefined;
+    };
+    /**
+     * This method is typically called when the widget is in the process of fetching data.
+     * The `undefined` return value is used to indicate that no loading indicator is required.
+     * If a loading indicator is required, the method can return a `JSX.Element` containing the necessary components to render the loading indicator.
+     * @returns A JSX element or `undefined` if no loading indicator is required.
+     */
+    BaseWidget.prototype.loading = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to returns an object that defines the class names for the different parts of the widget.
+     * The returned object conforms to the {@link IWidgetClassNames} interface which defines the possible keys and values for the class names.
+     * @returns An object that defines the class names for the different parts of the widget.
+     */
+    BaseWidget.prototype.styling = function () {
+        return {};
+    };
+    return BaseWidget;
+}(Component));
+export { BaseWidget };

package/build/esm/index.d.ts

@@ -3,4 +3,6 @@ export { useData } from "./useData";
 export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
 export { useTeamsUserCredential, TeamsContextWithCredential } from "./useTeamsUserCredential";
 export { useGraph, useGraphWithCredential } from "./useGraph";
+export { BaseDashboard } from "./BaseDashboard";
+export { BaseWidget, IWidgetClassNames } from "./BaseWidget";
 //# sourceMappingURL=index.d.ts.map

package/build/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/build/esm/index.js

@@ -5,3 +5,5 @@ export { useData } from "./useData";
 export { useTeamsFx } from "./useTeamsFx";
 export { useTeamsUserCredential } from "./useTeamsUserCredential";
 export { useGraph, useGraphWithCredential } from "./useGraph";
+export { BaseDashboard } from "./BaseDashboard";
+export { BaseWidget } from "./BaseWidget";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/teamsfx-react",
-  "version": "3.0.0-alpha.548abe451.0",
+  "version": "3.0.0-alpha.557015fcd.0",
   "description": "React helper functions for Microsoft TeamsFx",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
@@ -30,10 +30,10 @@
   "devDependencies": {
     "@fluentui/react-components": "^9.15.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@microsoft/eslint-plugin-teamsfx": "0.0.2-alpha.548abe451.0",
+    "@microsoft/eslint-plugin-teamsfx": "0.0.2-alpha.557015fcd.0",
     "@microsoft/microsoft-graph-client": "^3.0.1",
     "@microsoft/teams-js": "^2.0.0",
-    "@microsoft/teamsfx": "2.2.1-alpha.548abe451.0",
+    "@microsoft/teamsfx": "2.2.1-alpha.557015fcd.0",
     "@testing-library/react": "^13.4.0",
     "@types/enzyme": "^3.10.10",
     "@types/jest": "^29.4.0",
@@ -77,6 +77,9 @@
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0"
   },
+  "dependencies": {
+    "@fluentui/react": "^8.106.1"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -85,5 +88,5 @@
       "npx eslint --cache --fix --quiet"
     ]
   },
-  "gitHead": "6e0d11f9dd0476f1e653340bc7d93c03f544d3c6"
+  "gitHead": "2b8442c32afce47b853888d39e29d86c87739e88"
 }