@microsoft/teamsfx-react 2.0.0-beta.1 → 2.0.0-rc.0

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": "2.0.0-beta.1",
+  "version": "2.0.0-rc.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,11 +17,11 @@
     "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'",
@@ -29,39 +31,50 @@
     "@fluentui/react-northstar": "^0.62.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@microsoft/microsoft-graph-client": "^3.0.1",
-    "@microsoft/teams-js": "^2.2.0",
-    "@microsoft/teamsfx": "2.0.0-beta.0",
+    "@microsoft/teams-js": "^2.0.0",
+    "@microsoft/teamsfx": "^2.0.0-rc.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": "^4.0.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.62.0",
     "@microsoft/microsoft-graph-client": "^3.0.1",
-    "@microsoft/teamsfx": "2.0.0-beta.0",
-    "msteams-react-base-component": "4.0.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"
@@ -70,5 +83,6 @@
     "*.{js,jsx,css,ts,tsx}": [
       "npx eslint --cache --fix --quiet"
     ]
-  }
+  },
+  "gitHead": "7ee811aedc0f9ec4d093974bb0c1041d336da62e"
 }

package/CHANGELOG.md

@@ -1,4 +0,0 @@
-# 0.1.0
-Initial release of the SDK for React Hook.
-
-- Add 3 React Hook functions: useTeamsFx, useGraph and useData