@microsoft/teamsfx-react 0.0.2-alpha.a4c0338b1.0

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +1,149 @@
+# TeamsFx SDK for React
+
+TeamsFx SDK provides [React hooks](https://reactjs.org/docs/hooks-intro.html) to reduce the developer tasks of integrating TeamsFx with React and leverage Teams SSO.
+
+Use the library to:
+
+- Call Graph API using an authenticated client.
+- Customize TeamsFx easily in React app.
+
+[Source code](https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk-react) |
+[Package (NPM)](https://www.npmjs.com/package/@microsoft/teamsfx-react) |
+[Samples](https://github.com/OfficeDev/TeamsFx-Samples)
+
+## Getting started
+
+> Important: Please be advised that access tokens are stored in sessionStorage for you by default. This can make it possible for malicious code in your app (or code pasted into a console on your page) to access APIs at the same privilege level as your client application. Please ensure you only request the minimum necessary scopes from your client application and perform any sensitive operations from server-side code that your client has to authenticate with.
+
+TeamsFx SDK and React hooks are pre-configured in scaffolded project using Teams Toolkit extension for Visual Studio and vscode, or the `teamsfx` cli from the `teamsfx-cli` npm package.
+Please check the [README](https://github.com/OfficeDev/TeamsFx/blob/main/packages/vscode-extension/README.md) to see how to create a Teams App project.
+
+### Prerequisites
+
+- Node.js version 10.x.x 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
+
+Install the TeamsFx SDK for TypeScript/JavaScript with `npm`:
+
+```bash
+npm install @microsoft/teamsfx-react
+```
+
+Please also install the peer dependencies if you are using npm 6.
+```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
+```
+
+### Scenario
+
+TeamsFx SDK for React is built to be used in React application. You can develop a new react web app for Teams Tab scenario.
+
+### Calling the Microsoft Graph API
+
+The SDK provides custom React hook `useGraph()` that provides an authenticated Graph client instance. Please use this hook to call Microsoft Graph API.
+
+#### 1. Implement business logic and specify resource scope
+
+Use the snippet below:
+
+```ts
+const { loading, error, data, reload } = useGraph(
+    async (graph, teamsfx, scope) => {
+      // Call graph api directly to get user profile information
+      const profile = await graph.api("/me").get();
+
+      let photoUrl = "";
+      try {
+        const photo = await graph.api("/me/photo/$value").get();
+        photoUrl = URL.createObjectURL(photo);
+      } catch {
+        // Could not fetch photo from user's profile, return empty string as placeholder.
+      }
+      return { profile, photoUrl };
+    },
+    { scope: ["User.Read"] }
+  );
+```
+
+#### 2. Render Graph data with React
+
+You can bind the `reload` function with a button to refresh data on demand.
+
+```ts
+return (
+  <div>
+    <h3>Example: Get the user's profile</h3>
+    <div className="section-margin">
+      <p>Click below to authorize button to grant permission to using Microsoft Graph.</p>
+      <Button primary content="Authorize" disabled={loading} onClick={reload} />
+      <PersonCardFluentUI loading={loading} data={data} error={error} />
+    </div>
+  </div>
+);
+```
+
+## React Hook list
+
+### useData
+Fundamental helper hook function to do asynchronized operation like fetch data from a remote database / backend API.
+It returns custom data, loading status, error object and reload function.
+By default, it will fetch the data once the component has been initialized.
+
+### 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.
+If you want to customize TeamsFx like customizing setting, please pass the config object to `useTeamsFx()`.
+
+### useGraph
+This hook function leverage `useData` to call Graph API. It will execute the fetchGraphDataAsync function that the developer passes in first.
+If user has not consented to the scopes of AAD resources, `useGraph()` will automatically call `teamsfx.login()` to pop up the consent dialog.
+So, developers can focus on the business logic of how to fetch Microsoft Graph data.
+
+## Next steps
+
+Please take a look at the [Samples](https://github.com/OfficeDev/TeamsFx-Samples) project for detailed examples on how to use this library.
+
+## Related projects
+
+- [Microsoft Teams Toolkit for Visual Studio Code](https://github.com/OfficeDev/TeamsFx/tree/main/packages/vscode-extension)
+- [TeamsFx SDK](https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk)
+
+## Data Collection.
+
+The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.
+
+## Code of Conduct
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## Contributing
+
+There are many ways in which you can participate in the project, for example:
+
+- [Submit bugs and feature requests](https://github.com/OfficeDev/TeamsFx/issues), and help us verify as they are checked in
+- Review [source code changes](https://github.com/OfficeDev/TeamsFx/pulls)
+
+If you are interested in fixing issues and contributing directly to the code base, please see the [Contributing Guide](./CONTRIBUTING.md).
+
+## Reporting Security Issues
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
+
+If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
+
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
+
+## Trademarks
+
+This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
+
+## License
+
+Copyright (c) Microsoft Corporation. All rights reserved.
+
+Licensed under the [MIT](LICENSE.txt) license.

package/build/index.d.ts

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

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"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/index.js

@@ -0,0 +1,12 @@
+"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; } });
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;;;AAElC,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,2CAA0D;AAAjD,wGAAA,UAAU,OAAA;AACnB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}

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

@@ -0,0 +1,46 @@
+"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;
+//# sourceMappingURL=useData.js.map

package/build/useData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useData.js","sourceRoot":"","sources":["../src/useData.ts"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;;;AAElC,iCAA8C;AA6B9C,MAAM,aAAa,GACjB,GAAM,EAAE,CACR,CAAC,KAAe,EAAE,MAAiB,EAAY,EAAE;IAC/C,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,SAAS;YACZ,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAC7C,KAAK,QAAQ;YACX,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACjD,KAAK,OAAO;YACV,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;KAClD;AACH,CAAC,CAAC;AAEJ;;;;;;;;GAQG;AACH,SAAgB,OAAO,CACrB,cAAgC,EAChC,OAA+B;;IAE/B,MAAM,IAAI,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAA,kBAAU,EAAC,aAAa,EAAK,EAAE;QAC1E,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IACH,SAAS,MAAM;QACb,IAAI,CAAC,OAAO;YAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAC5C,cAAc,EAAE;aACb,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;aAC1D,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC;IACD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI;YAAE,MAAM,EAAE,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC1C,CAAC;AAlBD,0BAkBC"}

package/build/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/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,CAiCT"}

package/build/useGraph.js

@@ -0,0 +1,58 @@
+"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;
+//# sourceMappingURL=useGraph.js.map

package/build/useGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraph.js","sourceRoot":"","sources":["../src/useGraph.ts"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;;;AAElC,uCAA0C;AAC1C,gDAAwF;AACxF,8EAAuE;AACvE,iCAAiC;AAOjC;;;;;;;;GAQG;AACH,SAAgB,QAAQ,CACtB,mBAAqF,EACrF,OAAqB;IAErB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAK,KAAK,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,IAAI,iBAAO,EAAE,IAAK,OAAO,CAAE,CAAC;IACxF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAA,iBAAO,EAAC,KAAK,IAAI,EAAE;;QAC1D,IAAI,WAAW,EAAE;YACf,IAAI;gBACF,MAAM,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC3B,gHAAgH;aACjH;YAAC,OAAO,GAAY,EAAE;gBACrB,IAAI,GAAG,YAAY,uBAAa,KAAI,MAAA,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAA,EAAE;oBAC5E,MAAM,QAAQ,GAAG,uCAAuC,CAAC;oBACzD,GAAG,CAAC,OAAO;wBACT,kIAAkI;4BAClI,oIAAoI;4BACpI,mFAAmF,QAAQ,EAAE,CAAC;iBACjG;gBACD,MAAM,GAAG,CAAC;aACX;SACF;QACD,IAAI;YACF,MAAM,KAAK,GAAG,IAAA,oCAA0B,EAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACzD,MAAM,SAAS,GAAG,MAAM,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;YACnE,OAAO,SAAS,CAAC;SAClB;QAAC,OAAO,GAAY,EAAE;YACrB,IAAI,GAAG,YAAY,mCAAU,KAAI,MAAA,GAAG,CAAC,IAAI,0CAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAA,EAAE;gBACtE,8CAA8C;gBAC9C,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;iBAAM;gBACL,MAAM,GAAG,CAAC;aACX;SACF;IACH,CAAC,CAAC,CAAC;IACH,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AAC1C,CAAC;AApCD,4BAoCC"}

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

@@ -0,0 +1,31 @@
+"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;
+//# sourceMappingURL=useTeamsFx.js.map

package/build/useTeamsFx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTeamsFx.js","sourceRoot":"","sources":["../src/useTeamsFx.ts"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;;;AAElC,gDAAkG;AAClG,+EAAwD;AAExD,uCAAoC;AAkCpC;;;;;;;GAOG;AACH,SAAgB,UAAU,CAAC,aAAsC;IAC/D,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,uCAAQ,EAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAA,iBAAO,EAAC,KAAK,IAAI,EAAE;QAClD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;YAC1C,IAAA,qBAAW,EAAC,kBAAQ,CAAC,OAAO,CAAC,CAAC;YAC9B,IAAA,wBAAc,EAAC,CAAC,KAAe,EAAE,OAAe,EAAE,EAAE;gBAClD,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,iBAAO,CAAC,sBAAY,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IACH,uBAAS,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,IAAK,MAAM,EAAG;AACtD,CAAC;AAZD,gCAYC"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@microsoft/teamsfx-react",
+  "version": "0.0.2-alpha.a4c0338b1.0",
+  "description": "React helper functions for Microsoft TeamsFx",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "license": "MIT",
+  "keywords": [
+    "teamsfx",
+    "react"
+  ],
+  "repository": "https://github.com/OfficeDev/TeamsFx",
+  "author": "Microsoft Corporation",
+  "files": [
+    "build/**/*"
+  ],
+  "scripts": {
+    "build": "rimraf build && npx tsc -p ./",
+    "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",
+    "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",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@microsoft/microsoft-graph-client": "^3.0.1",
+    "@microsoft/teams-js": "^1.9.0",
+    "@microsoft/teamsfx": "0.6.1-alpha.a4c0338b1.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/chai": "^4.3.0",
+    "@types/mocha": "^9.1.0",
+    "@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-plugin-import": "^2.25.4",
+    "eslint-plugin-no-secrets": "^0.8.9",
+    "eslint-plugin-prettier": "^4.0.0",
+    "isomorphic-fetch": "^3.0.0",
+    "lint-staged": "^12.3.4",
+    "mocha": "^9.2.1",
+    "msteams-react-base-component": "^3.1.1",
+    "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"
+  },
+  "peerDependencies": {
+    "@fluentui/react-northstar": "^0.60.1",
+    "@microsoft/microsoft-graph-client": "^3.0.1",
+    "@microsoft/teamsfx": "^0.6.0",
+    "msteams-react-base-component": "^3.1.1",
+    "react": "^16.8.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lint-staged": {
+    "*.{js,jsx,css,ts,tsx}": [
+      "npx eslint --cache --fix --quiet"
+    ]
+  },
+  "gitHead": "20dedb8423d91224ce2d78802ee5244047df7410"
+}