@microsoft/teamsfx-react 2.0.0-experimental.0 → 2.0.0-rc.0

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2020 Microsoft
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2020 Microsoft
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,4 +1,5 @@
-export { useData } from "./useData";
-export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
-export { useGraph } from "./useGraph";
+export { useTeams } from "./useTeams";
+export { useData } from "./useData";
+export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
+export { useGraph } from "./useGraph";
 //# sourceMappingURL=index.d.ts.map

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}

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

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

@@ -1,34 +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 {};
+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/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/{useGraph.d.ts → cjs/useGraph.d.ts}

@@ -1,19 +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 {};
+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/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/{useTeamsFx.d.ts → cjs/useTeamsFx.d.ts}

@@ -1,42 +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;
+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/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"}