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

package/build/index.d.ts

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

package/build/index.js

@@ -1,11 +1,11 @@
-"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 = 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; } });

package/build/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/useData.js

@@ -1,45 +1,45 @@
-"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;
+"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

@@ -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/useGraph.js

@@ -1,57 +1,57 @@
-"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);
-                // 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;
+"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);
+                // 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

@@ -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/useTeamsFx.js

@@ -1,30 +1,30 @@
-"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;
+"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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/teamsfx-react",
-  "version": "1.0.4-rc.0",
+  "version": "2.0.0-beta.1",
   "description": "React helper functions for Microsoft TeamsFx",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -19,18 +19,18 @@
     "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": "nyc mocha --no-timeouts --require init.js --require ts-node/register test/**/*.test.ts",
     "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.1.1-rc.0",
+    "@microsoft/teams-js": "^2.2.0",
+    "@microsoft/teamsfx": "2.0.0-beta.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/chai": "^4.3.0",
     "@types/mocha": "^9.1.0",
@@ -47,7 +47,7 @@
     "isomorphic-fetch": "^3.0.0",
     "lint-staged": "^12.3.4",
     "mocha": "^9.2.1",
-    "msteams-react-base-component": "^3.1.1",
+    "msteams-react-base-component": "^4.0.1",
     "nyc": "^15.1.0",
     "prettier": "^2.5.1",
     "react": "^16.9.0",
@@ -57,10 +57,10 @@
     "sinon": "^13.0.1"
   },
   "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",
+    "@microsoft/teamsfx": "2.0.0-beta.0",
+    "msteams-react-base-component": "4.0.1",
     "react": "^16.8.6"
   },
   "publishConfig": {
@@ -70,6 +70,5 @@
     "*.{js,jsx,css,ts,tsx}": [
       "npx eslint --cache --fix --quiet"
     ]
-  },
-  "gitHead": "9c0b3bc030a4cbc070b45d4dae186c097bb9b98e"
+  }
 }