@microsoft/teamsfx-react 1.0.6-rc.1 → 2.0.0-alpha.28543dcd0.0

package/README.md

@@ -21,7 +21,7 @@ Please check the [README](https://github.com/OfficeDev/TeamsFx/blob/main/package
 ### Prerequisites
 
 - Node.js version 10.x.x or higher
-- TeamsFx SDK version 0.6.0 or higher
+- TeamsFx SDK version 0.6.0 or higher 
 - A project created by the Teams Toolkit VS Code extension or `teamsfx` CLI tool.
 
 ### Install the `@microsoft/teamsfx-react` package
@@ -32,7 +32,12 @@ Install the TeamsFx SDK for TypeScript/JavaScript with `npm`:
 npm install @microsoft/teamsfx-react
 ```
 
-Please also install the peer dependencies if you are using npm 6.
+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
+```
+
+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:
 ```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
 ```
@@ -92,6 +97,11 @@ Fundamental helper hook function to do asynchronized operation like fetch data f
 It returns custom data, loading status, error object and reload function.
 By default, it will fetch the data once the component has been initialized.
 
+### useTeams
+The hook is based on the Microsoft Teams JavaScript SDK, the Fluent UI components and Microsoft Graph Toolkit, merged from [msteams-react-base-component](https://github.com/wictorwilen/msteams-react-base-component).
+It returns a tuple of where an object of properties are in the first field and an object of methods in the second.
+If you want to manually set the initial theme, please pass the config object to `useTeams()`.
+
 ### useTeamsFx
 Initialize TeamsFx and Teams JS SDK, in a development environment, verbose logging message will be printed to console.
 It returns the TeamsFx instance as data.

package/build/{index.d.ts → cjs/index.d.ts}

@@ -1,3 +1,4 @@
+export { useTeams } from "./useTeams";
 export { useData } from "./useData";
 export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
 export { useGraph } from "./useGraph";

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

@@ -0,0 +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,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build/{index.js → cjs/index.js}

@@ -2,7 +2,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraph = exports.useTeamsFx = exports.useData = void 0;
+exports.useGraph = 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");
 Object.defineProperty(exports, "useData", { enumerable: true, get: function () { return useData_1.useData; } });
 var useTeamsFx_1 = require("./useTeamsFx");

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

@@ -0,0 +1 @@
+{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../../src/useData.ts"],"names":[],"mappings":"AAKA,aAAK,KAAK,CAAC,CAAC,IAAI;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,oBAAY,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAeF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EACvB,cAAc,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,GAC9B,IAAI,CAAC,CAAC,CAAC,CAeT"}

package/build/cjs/useData.js

@@ -0,0 +1,47 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useData = void 0;
+var react_1 = require("react");
+var createReducer = function () {
+    return function (state, action) {
+        switch (action.type) {
+            case "loading":
+                return { data: state.data, loading: true };
+            case "result":
+                return { data: action.result, loading: false };
+            case "error":
+                return { loading: false, error: action.error };
+        }
+    };
+};
+/**
+ * Helper function to fetch data with status and error.
+ *
+ * @param fetchDataAsync - async function of how to fetch data
+ * @param options - if autoLoad is true, reload data immediately
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+function useData(fetchDataAsync, options) {
+    var _a;
+    var auto = (_a = options === null || options === void 0 ? void 0 : options.autoLoad) !== null && _a !== void 0 ? _a : true;
+    var _b = (0, react_1.useReducer)(createReducer(), {
+        loading: auto,
+    }), _c = _b[0], data = _c.data, loading = _c.loading, error = _c.error, dispatch = _b[1];
+    function reload() {
+        if (!loading)
+            dispatch({ type: "loading" });
+        fetchDataAsync()
+            .then(function (data) { return dispatch({ type: "result", result: data }); })
+            .catch(function (error) { return dispatch({ type: "error", error: error }); });
+    }
+    (0, react_1.useEffect)(function () {
+        if (auto)
+            reload();
+    }, []);
+    return { data: data, loading: loading, error: error, reload: reload };
+}
+exports.useData = useData;

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT"}

package/build/cjs/useGraph.js

@@ -0,0 +1,72 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraph = void 0;
+var tslib_1 = require("tslib");
+var useData_1 = require("./useData");
+var teamsfx_1 = require("@microsoft/teamsfx");
+var microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
+var react_1 = require("react");
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - teamsfx instance and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+function useGraph(fetchGraphDataAsync, options) {
+    var _this = this;
+    var _a = tslib_1.__assign({ scope: ["User.Read"], teamsfx: new teamsfx_1.TeamsFx() }, options), scope = _a.scope, teamsfx = _a.teamsfx;
+    var _b = (0, react_1.useState)(false), needConsent = _b[0], setNeedConsent = _b[1];
+    var _c = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var err_1, helpLink, graph, graphData, err_2;
+        var _a, _b;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!needConsent) return [3 /*break*/, 4];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, teamsfx.login(scope)];
+                case 2:
+                    _c.sent();
+                    setNeedConsent(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _c.sent();
+                    if (err_1 instanceof teamsfx_1.ErrorWithCode && ((_a = err_1.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                        err_1.message +=
+                            '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
+                                "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
+                                "cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ".concat(helpLink);
+                    }
+                    throw err_1;
+                case 4:
+                    _c.trys.push([4, 6, , 7]);
+                    graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
+                    return [4 /*yield*/, fetchGraphDataAsync(graph, teamsfx, scope)];
+                case 5:
+                    graphData = _c.sent();
+                    return [2 /*return*/, graphData];
+                case 6:
+                    err_2 = _c.sent();
+                    if (err_2 instanceof microsoft_graph_client_1.GraphError && ((_b = err_2.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                        // Silently fail for user didn't consent error
+                        setNeedConsent(true);
+                    }
+                    else {
+                        throw err_2;
+                    }
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }), data = _c.data, error = _c.error, loading = _c.loading, reload = _c.reload;
+    return { data: data, error: error, loading: loading, reload: reload };
+}
+exports.useGraph = useGraph;

package/build/cjs/useTeams.d.ts

@@ -0,0 +1,31 @@
+import { app } from "@microsoft/teams-js";
+import { ThemePrepared } from "@fluentui/react-northstar";
+/**
+ * Microsoft Teams React hook
+ * @param options optional options
+ * @returns A tuple with properties and methods
+ * properties:
+ *  - inTeams: boolean = true if inside Microsoft Teams
+ *  - fullscreen: boolean = true if in full screen mode
+ *  - theme: Fluent UI Theme
+ *  - themeString: string - representation of the theme (default, dark or contrast)
+ *  - context - the Microsoft Teams JS SDK context
+ * methods:
+ *  - setTheme - manually set the theme
+ */
+export declare function useTeams(options?: {
+    initialTheme?: string;
+    setThemeHandler?: (theme?: string) => void;
+}): [
+    {
+        inTeams?: boolean;
+        fullScreen?: boolean;
+        theme: ThemePrepared;
+        themeString: string;
+        context?: app.Context;
+    },
+    {
+        setTheme: (theme: string | undefined) => void;
+    }
+];
+//# sourceMappingURL=useTeams.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTeams.d.ts","sourceRoot":"","sources":["../../src/useTeams.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAS,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAIL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAQnC;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,GAAG;IACF;QACE,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,EAAE,aAAa,CAAC;QACrB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;KACvB;IACD;QACE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;KAC/C;CACF,CA4DA"}

package/build/cjs/useTeams.js

@@ -0,0 +1,82 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeams = void 0;
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var teams_js_1 = require("@microsoft/teams-js");
+var react_northstar_1 = require("@fluentui/react-northstar");
+var getTheme = function () {
+    var urlParams = new URLSearchParams(window.location.search);
+    var theme = urlParams.get("theme");
+    return theme == null ? undefined : theme;
+};
+/**
+ * Microsoft Teams React hook
+ * @param options optional options
+ * @returns A tuple with properties and methods
+ * properties:
+ *  - inTeams: boolean = true if inside Microsoft Teams
+ *  - fullscreen: boolean = true if in full screen mode
+ *  - theme: Fluent UI Theme
+ *  - themeString: string - representation of the theme (default, dark or contrast)
+ *  - context - the Microsoft Teams JS SDK context
+ * methods:
+ *  - setTheme - manually set the theme
+ */
+function useTeams(options) {
+    var _a = (0, react_1.useState)(undefined), inTeams = _a[0], setInTeams = _a[1];
+    var _b = (0, react_1.useState)(undefined), fullScreen = _b[0], setFullScreen = _b[1];
+    var _c = (0, react_1.useState)(react_northstar_1.teamsTheme), theme = _c[0], setTheme = _c[1];
+    var _d = (0, react_1.useState)("default"), themeString = _d[0], setThemeString = _d[1];
+    var initialTheme = (0, react_1.useState)(options && options.initialTheme ? options.initialTheme : getTheme())[0];
+    var _e = (0, react_1.useState)(undefined), context = _e[0], setContext = _e[1];
+    var themeChangeHandler = function (theme) {
+        setThemeString(theme || "default");
+        switch (theme) {
+            case "dark":
+                setTheme(react_northstar_1.teamsDarkTheme);
+                break;
+            case "contrast":
+                setTheme(react_northstar_1.teamsHighContrastTheme);
+                break;
+            case "default":
+            default:
+                setTheme(react_northstar_1.teamsTheme);
+        }
+    };
+    var overrideThemeHandler = (options === null || options === void 0 ? void 0 : options.setThemeHandler)
+        ? options.setThemeHandler
+        : themeChangeHandler;
+    (0, react_1.useEffect)(function () {
+        // set initial theme based on options or query string
+        overrideThemeHandler(initialTheme);
+        teams_js_1.app
+            .initialize()
+            .then(function () {
+            teams_js_1.app
+                .getContext()
+                .then(function (context) {
+                (0, react_dom_1.unstable_batchedUpdates)(function () {
+                    setInTeams(true);
+                    setContext(context);
+                    setFullScreen(context.page.isFullScreen);
+                });
+                overrideThemeHandler(context.app.theme);
+                teams_js_1.app.registerOnThemeChangeHandler(overrideThemeHandler);
+                teams_js_1.pages.registerFullScreenHandler(function (isFullScreen) {
+                    setFullScreen(isFullScreen);
+                });
+            })
+                .catch(function () {
+                setInTeams(false);
+            });
+        })
+            .catch(function () {
+            setInTeams(false);
+        });
+    }, []);
+    return [{ inTeams: inTeams, fullScreen: fullScreen, theme: theme, context: context, themeString: themeString }, { setTheme: overrideThemeHandler }];
+}
+exports.useTeams = useTeams;

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../../src/useTeamsFx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,cAAc,GAAG;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAYjF"}

package/build/cjs/useTeamsFx.js

@@ -0,0 +1,34 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeamsFx = void 0;
+var tslib_1 = require("tslib");
+var teamsfx_1 = require("@microsoft/teamsfx");
+var useTeams_1 = require("./useTeams");
+var useData_1 = require("./useData");
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+function useTeamsFx(teamsfxConfig) {
+    var _this = this;
+    var result = (0, useTeams_1.useTeams)({})[0];
+    var _a = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            if (process.env.NODE_ENV === "development") {
+                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
+                (0, teamsfx_1.setLogFunction)(function (level, message) {
+                    console.log(message);
+                });
+            }
+            return [2 /*return*/, new teamsfx_1.TeamsFx(teamsfx_1.IdentityType.User, teamsfxConfig)];
+        });
+    }); }), data = _a.data, error = _a.error, loading = _a.loading;
+    return tslib_1.__assign({ teamsfx: data, error: error, loading: loading }, result);
+}
+exports.useTeamsFx = useTeamsFx;

package/build/esm/index.d.ts

@@ -0,0 +1,5 @@
+export { useTeams } from "./useTeams";
+export { useData } from "./useData";
+export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
+export { useGraph } from "./useGraph";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/build/esm/index.js

@@ -0,0 +1,6 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+export { useTeams } from "./useTeams";
+export { useData } from "./useData";
+export { useTeamsFx } from "./useTeamsFx";
+export { useGraph } from "./useGraph";

package/build/esm/useData.d.ts

@@ -0,0 +1,34 @@
+declare type State<T> = {
+    /**
+     * User data.
+     */
+    data?: T;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error?: unknown;
+};
+export declare type Data<T> = State<T> & {
+    /**
+     * reload function.
+     */
+    reload: () => void;
+};
+/**
+ * Helper function to fetch data with status and error.
+ *
+ * @param fetchDataAsync - async function of how to fetch data
+ * @param options - if autoLoad is true, reload data immediately
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useData<T>(fetchDataAsync: () => Promise<T>, options?: {
+    autoLoad: boolean;
+}): Data<T>;
+export {};
+//# sourceMappingURL=useData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../../src/useData.ts"],"names":[],"mappings":"AAKA,aAAK,KAAK,CAAC,CAAC,IAAI;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,oBAAY,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAeF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EACvB,cAAc,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,GAC9B,IAAI,CAAC,CAAC,CAAC,CAeT"}

package/build/esm/useData.js

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { useEffect, useReducer } from "react";
+var createReducer = function () {
+    return function (state, action) {
+        switch (action.type) {
+            case "loading":
+                return { data: state.data, loading: true };
+            case "result":
+                return { data: action.result, loading: false };
+            case "error":
+                return { loading: false, error: action.error };
+        }
+    };
+};
+/**
+ * Helper function to fetch data with status and error.
+ *
+ * @param fetchDataAsync - async function of how to fetch data
+ * @param options - if autoLoad is true, reload data immediately
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export function useData(fetchDataAsync, options) {
+    var _a;
+    var auto = (_a = options === null || options === void 0 ? void 0 : options.autoLoad) !== null && _a !== void 0 ? _a : true;
+    var _b = useReducer(createReducer(), {
+        loading: auto,
+    }), _c = _b[0], data = _c.data, loading = _c.loading, error = _c.error, dispatch = _b[1];
+    function reload() {
+        if (!loading)
+            dispatch({ type: "loading" });
+        fetchDataAsync()
+            .then(function (data) { return dispatch({ type: "result", result: data }); })
+            .catch(function (error) { return dispatch({ type: "error", error: error }); });
+    }
+    useEffect(function () {
+        if (auto)
+            reload();
+    }, []);
+    return { data: data, loading: loading, error: error, reload: reload };
+}

package/build/esm/useGraph.d.ts

@@ -0,0 +1,19 @@
+import { Data } from "./useData";
+import { TeamsFx } from "@microsoft/teamsfx";
+import { Client } from "@microsoft/microsoft-graph-client";
+declare type GraphOption = {
+    scope?: string[];
+    teamsfx?: TeamsFx;
+};
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - teamsfx instance and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useGraph<T>(fetchGraphDataAsync: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: GraphOption): Data<T>;
+export {};
+//# sourceMappingURL=useGraph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT"}

package/build/esm/useGraph.js

@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { __assign, __awaiter, __generator } from "tslib";
+import { useData } from "./useData";
+import { TeamsFx, createMicrosoftGraphClient, ErrorWithCode } from "@microsoft/teamsfx";
+import { GraphError } from "@microsoft/microsoft-graph-client";
+import { useState } from "react";
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - teamsfx instance and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export function useGraph(fetchGraphDataAsync, options) {
+    var _this = this;
+    var _a = __assign({ scope: ["User.Read"], teamsfx: new TeamsFx() }, options), scope = _a.scope, teamsfx = _a.teamsfx;
+    var _b = useState(false), needConsent = _b[0], setNeedConsent = _b[1];
+    var _c = useData(function () { return __awaiter(_this, void 0, void 0, function () {
+        var err_1, helpLink, graph, graphData, err_2;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!needConsent) return [3 /*break*/, 4];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, teamsfx.login(scope)];
+                case 2:
+                    _c.sent();
+                    setNeedConsent(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _c.sent();
+                    if (err_1 instanceof ErrorWithCode && ((_a = err_1.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                        err_1.message +=
+                            '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
+                                "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
+                                "cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ".concat(helpLink);
+                    }
+                    throw err_1;
+                case 4:
+                    _c.trys.push([4, 6, , 7]);
+                    graph = createMicrosoftGraphClient(teamsfx, scope);
+                    return [4 /*yield*/, fetchGraphDataAsync(graph, teamsfx, scope)];
+                case 5:
+                    graphData = _c.sent();
+                    return [2 /*return*/, graphData];
+                case 6:
+                    err_2 = _c.sent();
+                    if (err_2 instanceof GraphError && ((_b = err_2.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                        // Silently fail for user didn't consent error
+                        setNeedConsent(true);
+                    }
+                    else {
+                        throw err_2;
+                    }
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }), data = _c.data, error = _c.error, loading = _c.loading, reload = _c.reload;
+    return { data: data, error: error, loading: loading, reload: reload };
+}

package/build/esm/useTeams.d.ts

@@ -0,0 +1,31 @@
+import { app } from "@microsoft/teams-js";
+import { ThemePrepared } from "@fluentui/react-northstar";
+/**
+ * Microsoft Teams React hook
+ * @param options optional options
+ * @returns A tuple with properties and methods
+ * properties:
+ *  - inTeams: boolean = true if inside Microsoft Teams
+ *  - fullscreen: boolean = true if in full screen mode
+ *  - theme: Fluent UI Theme
+ *  - themeString: string - representation of the theme (default, dark or contrast)
+ *  - context - the Microsoft Teams JS SDK context
+ * methods:
+ *  - setTheme - manually set the theme
+ */
+export declare function useTeams(options?: {
+    initialTheme?: string;
+    setThemeHandler?: (theme?: string) => void;
+}): [
+    {
+        inTeams?: boolean;
+        fullScreen?: boolean;
+        theme: ThemePrepared;
+        themeString: string;
+        context?: app.Context;
+    },
+    {
+        setTheme: (theme: string | undefined) => void;
+    }
+];
+//# sourceMappingURL=useTeams.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTeams.d.ts","sourceRoot":"","sources":["../../src/useTeams.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAS,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAIL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAQnC;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,GAAG;IACF;QACE,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,EAAE,aAAa,CAAC;QACrB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;KACvB;IACD;QACE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;KAC/C;CACF,CA4DA"}

package/build/esm/useTeams.js

@@ -0,0 +1,78 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { useEffect, useState } from "react";
+import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
+import { app, pages } from "@microsoft/teams-js";
+import { teamsDarkTheme, teamsHighContrastTheme, teamsTheme, } from "@fluentui/react-northstar";
+var getTheme = function () {
+    var urlParams = new URLSearchParams(window.location.search);
+    var theme = urlParams.get("theme");
+    return theme == null ? undefined : theme;
+};
+/**
+ * Microsoft Teams React hook
+ * @param options optional options
+ * @returns A tuple with properties and methods
+ * properties:
+ *  - inTeams: boolean = true if inside Microsoft Teams
+ *  - fullscreen: boolean = true if in full screen mode
+ *  - theme: Fluent UI Theme
+ *  - themeString: string - representation of the theme (default, dark or contrast)
+ *  - context - the Microsoft Teams JS SDK context
+ * methods:
+ *  - setTheme - manually set the theme
+ */
+export function useTeams(options) {
+    var _a = useState(undefined), inTeams = _a[0], setInTeams = _a[1];
+    var _b = useState(undefined), fullScreen = _b[0], setFullScreen = _b[1];
+    var _c = useState(teamsTheme), theme = _c[0], setTheme = _c[1];
+    var _d = useState("default"), themeString = _d[0], setThemeString = _d[1];
+    var initialTheme = useState(options && options.initialTheme ? options.initialTheme : getTheme())[0];
+    var _e = useState(undefined), context = _e[0], setContext = _e[1];
+    var themeChangeHandler = function (theme) {
+        setThemeString(theme || "default");
+        switch (theme) {
+            case "dark":
+                setTheme(teamsDarkTheme);
+                break;
+            case "contrast":
+                setTheme(teamsHighContrastTheme);
+                break;
+            case "default":
+            default:
+                setTheme(teamsTheme);
+        }
+    };
+    var overrideThemeHandler = (options === null || options === void 0 ? void 0 : options.setThemeHandler)
+        ? options.setThemeHandler
+        : themeChangeHandler;
+    useEffect(function () {
+        // set initial theme based on options or query string
+        overrideThemeHandler(initialTheme);
+        app
+            .initialize()
+            .then(function () {
+            app
+                .getContext()
+                .then(function (context) {
+                batchedUpdates(function () {
+                    setInTeams(true);
+                    setContext(context);
+                    setFullScreen(context.page.isFullScreen);
+                });
+                overrideThemeHandler(context.app.theme);
+                app.registerOnThemeChangeHandler(overrideThemeHandler);
+                pages.registerFullScreenHandler(function (isFullScreen) {
+                    setFullScreen(isFullScreen);
+                });
+            })
+                .catch(function () {
+                setInTeams(false);
+            });
+        })
+            .catch(function () {
+            setInTeams(false);
+        });
+    }, []);
+    return [{ inTeams: inTeams, fullScreen: fullScreen, theme: theme, context: context, themeString: themeString }, { setTheme: overrideThemeHandler }];
+}

package/build/esm/useTeamsFx.d.ts

@@ -0,0 +1,42 @@
+import { TeamsFx } from "@microsoft/teamsfx";
+import { ThemePrepared } from "@fluentui/react-northstar";
+export declare type TeamsFxContext = {
+    /**
+     * Instance of TeamsFx.
+     */
+    teamsfx?: TeamsFx;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error: unknown;
+    /**
+     * Indicates that current environment is in Teams
+     */
+    inTeams?: boolean;
+    /**
+     * Teams theme.
+     */
+    theme: ThemePrepared;
+    /**
+     * Teams theme string.
+     */
+    themeString: string;
+    /**
+     * Teams context object.
+     */
+    context?: any;
+};
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+export declare function useTeamsFx(teamsfxConfig?: Record<string, string>): TeamsFxContext;
+//# sourceMappingURL=useTeamsFx.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../../src/useTeamsFx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,cAAc,GAAG;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAYjF"}

package/build/esm/useTeamsFx.js

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { __assign, __awaiter, __generator } from "tslib";
+import { LogLevel, setLogLevel, setLogFunction, TeamsFx, IdentityType } from "@microsoft/teamsfx";
+import { useTeams } from "./useTeams";
+import { useData } from "./useData";
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+export function useTeamsFx(teamsfxConfig) {
+    var _this = this;
+    var result = useTeams({})[0];
+    var _a = useData(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (process.env.NODE_ENV === "development") {
+                setLogLevel(LogLevel.Verbose);
+                setLogFunction(function (level, message) {
+                    console.log(message);
+                });
+            }
+            return [2 /*return*/, new TeamsFx(IdentityType.User, teamsfxConfig)];
+        });
+    }); }), data = _a.data, error = _a.error, loading = _a.loading;
+    return __assign({ teamsfx: data, error: error, loading: loading }, result);
+}

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@microsoft/teamsfx-react",
-  "version": "1.0.6-rc.1",
+  "version": "2.0.0-alpha.28543dcd0.0",
   "description": "React helper functions for Microsoft TeamsFx",
-  "main": "build/index.js",
-  "types": "build/index.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/cjs/index.d.ts",
+  "sideEffects": false,
   "license": "MIT",
   "keywords": [
     "teamsfx",
@@ -15,53 +17,64 @@
     "build/**/*"
   ],
   "scripts": {
-    "build": "rimraf build && npx tsc -p ./",
+    "build": "rimraf build && npx tsc -p tsconfig.json && npx tsc -p tsconfig.es.json",
     "lint:staged": "lint-staged",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "npm run test:unit",
-    "test:unit": "nyc mocha --no-timeouts --require init.js --require ts-node/register test/**/*.test.ts ",
+    "test:unit": "jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/*.{ts,tsx,js}'",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\" \"*.{js,json}\"",
     "format-check": "prettier --list-different \"src/**/*.ts\" \"test/**/*.ts\" \"*.{js,json}\"",
     "check-sensitive": "npx eslint --plugin 'no-secrets' --cache --ignore-pattern 'package.json' --ignore-pattern 'package-lock.json'",
     "precommit": "npm run check-sensitive && lint-staged"
   },
   "devDependencies": {
-    "@fluentui/react-northstar": "^0.60.1",
+    "@fluentui/react-northstar": "^0.62.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@microsoft/microsoft-graph-client": "^3.0.1",
-    "@microsoft/teams-js": "^1.9.0",
-    "@microsoft/teamsfx": "^1.2.1-rc.1",
+    "@microsoft/teams-js": "^2.0.0",
+    "@microsoft/teamsfx": "2.0.0-alpha.28543dcd0.0",
+    "@testing-library/react": "^12.1.1",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/chai": "^4.3.0",
-    "@types/mocha": "^9.1.0",
+    "@types/enzyme": "^3.10.10",
+    "@types/jest": "^27.0.2",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
-    "@types/sinon": "^10.0.11",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
-    "chai": "^4.3.6",
-    "eslint": "^7.32.0",
+    "eslint": "^8.15.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.0",
+    "eslint-plugin-n": "^15.2.0",
     "eslint-plugin-no-secrets": "^0.8.9",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "isomorphic-fetch": "^3.0.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-junit": "^13.0.0",
+    "jwt-decode": "^3.1.2",
     "lint-staged": "^12.3.4",
-    "mocha": "^9.2.1",
-    "msteams-react-base-component": "^3.1.1",
+    "mocha": "^10.0.0",
     "nyc": "^15.1.0",
     "prettier": "^2.5.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-test-renderer": "^16.9.0",
     "rimraf": "^3.0.2",
-    "sinon": "^13.0.1"
+    "scheduler": "^0.20.2",
+    "ts-jest": "^28.0.2",
+    "typescript": "latest"
   },
   "peerDependencies": {
-    "@fluentui/react-northstar": "^0.60.1",
+    "@fluentui/react-northstar": "^0.62.0",
     "@microsoft/microsoft-graph-client": "^3.0.1",
-    "@microsoft/teamsfx": "^1.0.0",
-    "msteams-react-base-component": "^3.1.1",
-    "react": "^16.8.6"
+    "@microsoft/teams-js": "^2.0.0",
+    "@microsoft/teamsfx": ">2.0.0-alpha",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "publishConfig": {
     "access": "public"
@@ -71,5 +84,5 @@
       "npx eslint --cache --fix --quiet"
     ]
   },
-  "gitHead": "4a129d1ba158b94149387811fe2d58e6a2ef1801"
+  "gitHead": "a3291f6e8d183a96b18d79f27689e9687eb36e1a"
 }

package/build/index.d.ts.map

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

package/build/useData.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useData.d.ts","sourceRoot":"","sources":["../src/useData.ts"],"names":[],"mappings":"AAKA,aAAK,KAAK,CAAC,CAAC,IAAI;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,oBAAY,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAeF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EACvB,cAAc,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAChC,OAAO,CAAC,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,GAC9B,IAAI,CAAC,CAAC,CAAC,CAeT"}

package/build/useData.js

@@ -1,45 +0,0 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useData = void 0;
-const react_1 = require("react");
-const createReducer = () => (state, action) => {
-    switch (action.type) {
-        case "loading":
-            return { data: state.data, loading: true };
-        case "result":
-            return { data: action.result, loading: false };
-        case "error":
-            return { loading: false, error: action.error };
-    }
-};
-/**
- * Helper function to fetch data with status and error.
- *
- * @param fetchDataAsync - async function of how to fetch data
- * @param options - if autoLoad is true, reload data immediately
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-function useData(fetchDataAsync, options) {
-    var _a;
-    const auto = (_a = options === null || options === void 0 ? void 0 : options.autoLoad) !== null && _a !== void 0 ? _a : true;
-    const [{ data, loading, error }, dispatch] = (0, react_1.useReducer)(createReducer(), {
-        loading: auto,
-    });
-    function reload() {
-        if (!loading)
-            dispatch({ type: "loading" });
-        fetchDataAsync()
-            .then((data) => dispatch({ type: "result", result: data }))
-            .catch((error) => dispatch({ type: "error", error }));
-    }
-    (0, react_1.useEffect)(() => {
-        if (auto)
-            reload();
-    }, []);
-    return { data, loading, error, reload };
-}
-exports.useData = useData;

package/build/useGraph.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT"}

package/build/useGraph.js

@@ -1,58 +0,0 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraph = void 0;
-const useData_1 = require("./useData");
-const teamsfx_1 = require("@microsoft/teamsfx");
-const microsoft_graph_client_1 = require("@microsoft/microsoft-graph-client");
-const react_1 = require("react");
-/**
- * Helper function to call Microsoft Graph API with authentication.
- *
- * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
- * @param options - teamsfx instance and OAuth resource scope.
- * @returns data, loading status, error and reload function
- *
- * @beta
- */
-function useGraph(fetchGraphDataAsync, options) {
-    const { scope, teamsfx } = Object.assign({ scope: ["User.Read"], teamsfx: new teamsfx_1.TeamsFx() }, options);
-    const [needConsent, setNeedConsent] = (0, react_1.useState)(false);
-    const { data, error, loading, reload } = (0, useData_1.useData)(async () => {
-        var _a, _b;
-        if (needConsent) {
-            try {
-                await teamsfx.login(scope);
-                setNeedConsent(false);
-                // Important: tokens are stored in sessionStorage, read more here: https://aka.ms/teamsfx-session-storage-notice
-            }
-            catch (err) {
-                if (err instanceof teamsfx_1.ErrorWithCode && ((_a = err.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
-                    const helpLink = "https://aka.ms/teamsfx-auth-code-flow";
-                    err.message +=
-                        '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
-                            "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
-                            `cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ${helpLink}`;
-                }
-                throw err;
-            }
-        }
-        try {
-            const graph = (0, teamsfx_1.createMicrosoftGraphClient)(teamsfx, scope);
-            const graphData = await fetchGraphDataAsync(graph, teamsfx, scope);
-            return graphData;
-        }
-        catch (err) {
-            if (err instanceof microsoft_graph_client_1.GraphError && ((_b = err.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
-                // Silently fail for user didn't consent error
-                setNeedConsent(true);
-            }
-            else {
-                throw err;
-            }
-        }
-    });
-    return { data, error, loading, reload };
-}
-exports.useGraph = useGraph;

package/build/useTeamsFx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTeamsFx.d.ts","sourceRoot":"","sources":["../src/useTeamsFx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,OAAO,EAAgB,MAAM,oBAAoB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,cAAc,GAAG;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,cAAc,CAYjF"}

package/build/useTeamsFx.js

@@ -1,30 +0,0 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTeamsFx = void 0;
-const teamsfx_1 = require("@microsoft/teamsfx");
-const msteams_react_base_component_1 = require("msteams-react-base-component");
-const useData_1 = require("./useData");
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param teamsfxConfig - custom configuration to override default ones.
- * @returns TeamsFxContext object
- *
- * @beta
- */
-function useTeamsFx(teamsfxConfig) {
-    const [result] = (0, msteams_react_base_component_1.useTeams)({});
-    const { data, error, loading } = (0, useData_1.useData)(async () => {
-        if (process.env.NODE_ENV === "development") {
-            (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
-            (0, teamsfx_1.setLogFunction)((level, message) => {
-                console.log(message);
-            });
-        }
-        return new teamsfx_1.TeamsFx(teamsfx_1.IdentityType.User, teamsfxConfig);
-    });
-    return Object.assign({ teamsfx: data, error, loading }, result);
-}
-exports.useTeamsFx = useTeamsFx;