@microsoft/teamsfx-react 3.0.0-alpha.46da7cd00.0 → 3.0.1-alpha.ru6q1vrv0.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

@@ -141,6 +141,12 @@ const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredent
 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()`, `useGraphWithCredential` will automatically call login function to pop up the consent dialog. So, developers can focus on the business logic of how to fetch Microsoft Graph data.
 
+### BaseDashboard
+The BaseDashboard is a React component that provides a basic dashboard layout implementation for developers to quickly build a dashboard tab for Microsoft Teams. You can inherit this class and override some methods to customize your own dashboard. For example, define the layout of the widget in your dashboard by overriding the `layout()` method, and customize the dashboard style by overriding the `styling()` method.
+
+### BaseWidget
+The BaseWidget is a React component that provides a basic widget layout implementation for developers to quickly build a widget. You can inherit this class and override some methods to customize your own widget. For example, define the header of the widget by overriding the `header()` method, and get data needed for the widget by overriding the `getData()` method, etc.
+
 ## 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.

package/build/cjs/BaseDashboard.d.ts

@@ -0,0 +1,54 @@
+import { Component, CSSProperties } from "react";
+interface BaseDashboardState {
+    isMobile?: boolean;
+    showLogin?: boolean;
+    observer?: ResizeObserver;
+}
+/**
+ * The base class for dashboard implementation.
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P The type of props.
+ * @param S The type of state.
+ */
+export declare class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
+    private ref;
+    /**
+     * Constructor for the dashboard class.
+     * @param props The properties for the dashboard.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * This method is invoked immediately when a component will be unmounted. It's a good place to clean up the resources.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Define thie dashboard default layout.
+     */
+    render(): JSX.Element;
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     */
+    protected layout(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The style for the dashboard
+     */
+    protected styling(): CSSProperties | string;
+    /**
+     * Construct CSSProperties object for styling the dashboard.
+     * @returns CSSProperties object
+     */
+    private genStyle;
+    /**
+     * Construct className string for styling the dashboard.
+     * @returns className for styling the dashboard
+     */
+    private genClassName;
+}
+export {};
+//# sourceMappingURL=BaseDashboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDashboard.d.ts","sourceRoot":"","sources":["../../src/BaseDashboard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAexD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;GAKG;AACH,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC;IAC3E,OAAO,CAAC,GAAG,CAAkC;IAE7C;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAU9B;;;OAGG;IACG,iBAAiB;IAavB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAO5B;;OAEG;IACH,MAAM;IAaN;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,aAAa,GAAG,MAAM;IAI3C;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAMhB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAGrB"}

package/build/cjs/BaseDashboard.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseDashboard = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("@fluentui/react");
+function dashboardStyle(isMobile) {
+    return (0, react_2.mergeStyles)(tslib_1.__assign({ display: "grid", gap: "20px", padding: "20px", gridTemplateRows: "1fr", gridTemplateColumns: "4fr 6fr" }, (isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {})));
+}
+/**
+ * The base class for dashboard implementation.
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P The type of props.
+ * @param S The type of state.
+ */
+var BaseDashboard = /** @class */ (function (_super) {
+    tslib_1.__extends(BaseDashboard, _super);
+    /**
+     * Constructor for the dashboard class.
+     * @param props The properties for the dashboard.
+     */
+    function BaseDashboard(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isMobile: undefined,
+            showLogin: undefined,
+            observer: undefined,
+        };
+        _this.ref = react_1.default.createRef();
+        return _this;
+    }
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    BaseDashboard.prototype.componentDidMount = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var observer;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                observer = new ResizeObserver(function (entries) {
+                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                        var entry = entries_1[_i];
+                        if (entry.target === _this.ref.current) {
+                            var width = entry.contentRect.width;
+                            _this.setState({ isMobile: width < 600 });
+                        }
+                    }
+                });
+                observer.observe(this.ref.current);
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * This method is invoked immediately when a component will be unmounted. It's a good place to clean up the resources.
+     */
+    BaseDashboard.prototype.componentWillUnmount = function () {
+        // Unobserve the dashboard div for resize events
+        if (this.state.observer && this.ref.current) {
+            this.state.observer.unobserve(this.ref.current);
+        }
+    };
+    /**
+     * Define thie dashboard default layout.
+     */
+    BaseDashboard.prototype.render = function () {
+        var root = dashboardStyle(this.state.isMobile);
+        return (react_1.default.createElement("div", { ref: this.ref, className: (0, react_2.mergeStyles)(root, this.genClassName()), style: this.genStyle() }, this.layout()));
+    };
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     */
+    BaseDashboard.prototype.layout = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The style for the dashboard
+     */
+    BaseDashboard.prototype.styling = function () {
+        return {};
+    };
+    /**
+     * Construct CSSProperties object for styling the dashboard.
+     * @returns CSSProperties object
+     */
+    BaseDashboard.prototype.genStyle = function () {
+        return typeof this.styling() === "string"
+            ? {}
+            : this.styling();
+    };
+    /**
+     * Construct className string for styling the dashboard.
+     * @returns className for styling the dashboard
+     */
+    BaseDashboard.prototype.genClassName = function () {
+        return typeof this.styling() === "string" ? this.styling() : "";
+    };
+    return BaseDashboard;
+}(react_1.Component));
+exports.BaseDashboard = BaseDashboard;

package/build/cjs/BaseWidget.d.ts

@@ -0,0 +1,63 @@
+import { Component, CSSProperties } from "react";
+interface BaseWidgetState {
+    loading?: boolean;
+}
+/**
+ * The base class for widget implementation. I
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+export declare class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
+    constructor(props: Readonly<P>);
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Define the basic layout of a widget
+     */
+    render(): JSX.Element;
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    protected getData(): Promise<S>;
+    /**
+     * Override this method to customize the widget header.
+     * @returns JSX component for the widget body
+     */
+    protected header(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the widget body.
+     * @returns JSX component for the widget body
+     */
+    protected body(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the widget footer.
+     * @returns react node for the widget footer
+     */
+    protected footer(): JSX.Element | undefined;
+    /**
+     * Override this method to customize what the widget will look like when it is loading.
+     */
+    protected loading(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the widget style.
+     * @returns custom style for the widget
+     */
+    protected styling(): CSSProperties | string;
+    /**
+     * Construct CSSProperties object for styling the widget.
+     * @returns CSSProperties object
+     */
+    private genStyle;
+    /**
+     * Construct className string for styling the widget.
+     * @returns className for styling the widget
+     */
+    private genClassName;
+}
+export {};
+//# sourceMappingURL=BaseWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseWidget.d.ts","sourceRoot":"","sources":["../../src/BaseWidget.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA0CxD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;gBACzD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAK9B;;;OAGG;IACG,iBAAiB;IAIvB;;OAEG;IACH,MAAM;IAiBN;;;OAGG;cACa,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;IAIrC;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAIzC;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;OAEG;IACH,SAAS,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI5C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,aAAa,GAAG,MAAM;IAI3C;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAIhB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAGrB"}

package/build/cjs/BaseWidget.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseWidget = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("@fluentui/react");
+var react_components_1 = require("@fluentui/react-components");
+var widgetStyle = (0, react_2.mergeStyleSets)({
+    root: {
+        display: "grid",
+        padding: "1.25rem 2rem 1.25rem 2rem",
+        backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+        border: "1px solid var(--colorTransparentStroke)",
+        boxShadow: react_components_1.tokens.shadow4,
+        borderRadius: react_components_1.tokens.borderRadiusMedium,
+        gap: react_components_1.tokens.spacingHorizontalL,
+        gridTemplateRows: "max-content 1fr max-content",
+    },
+    header: {
+        display: "grid",
+        height: "max-content",
+        "& div": {
+            display: "grid",
+            gap: react_components_1.tokens.spacingHorizontalS,
+            alignItems: "center",
+            gridTemplateColumns: "min-content 1fr min-content",
+        },
+        "& svg": {
+            height: "1.5rem",
+            width: "1.5rem",
+        },
+        "& span": {
+            fontWeight: react_components_1.tokens.fontWeightSemibold,
+            lineHeight: react_components_1.tokens.lineHeightBase200,
+            fontSize: react_components_1.tokens.fontSizeBase200,
+        },
+    },
+    footer: {
+        "& button": {
+            width: "fit-content",
+        },
+    },
+});
+/**
+ * The base class for widget implementation. I
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+var BaseWidget = /** @class */ (function (_super) {
+    tslib_1.__extends(BaseWidget, _super);
+    function BaseWidget(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { loading: undefined };
+        return _this;
+    }
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    BaseWidget.prototype.componentDidMount = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.setState;
+                        _b = [{}];
+                        return [4 /*yield*/, this.getData()];
+                    case 1:
+                        _a.apply(this, [tslib_1.__assign.apply(void 0, [tslib_1.__assign.apply(void 0, _b.concat([(_c.sent())])), { loading: false }])]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Define the basic layout of a widget
+     */
+    BaseWidget.prototype.render = function () {
+        var root = widgetStyle.root, header = widgetStyle.header, footer = widgetStyle.footer;
+        return (react_1.default.createElement("div", { className: (0, react_2.mergeStyles)(root, this.genClassName()), style: this.genStyle() },
+            this.header() && react_1.default.createElement("div", { className: header }, this.header()),
+            this.state.loading !== false && this.loading() !== undefined ? (this.loading()) : (react_1.default.createElement(react_1.default.Fragment, null,
+                this.body() !== undefined && this.body(),
+                this.footer() !== undefined && react_1.default.createElement("div", { className: footer }, this.footer())))));
+    };
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    BaseWidget.prototype.getData = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                return [2 /*return*/, undefined];
+            });
+        });
+    };
+    /**
+     * Override this method to customize the widget header.
+     * @returns JSX component for the widget body
+     */
+    BaseWidget.prototype.header = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the widget body.
+     * @returns JSX component for the widget body
+     */
+    BaseWidget.prototype.body = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the widget footer.
+     * @returns react node for the widget footer
+     */
+    BaseWidget.prototype.footer = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize what the widget will look like when it is loading.
+     */
+    BaseWidget.prototype.loading = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the widget style.
+     * @returns custom style for the widget
+     */
+    BaseWidget.prototype.styling = function () {
+        return "";
+    };
+    /**
+     * Construct CSSProperties object for styling the widget.
+     * @returns CSSProperties object
+     */
+    BaseWidget.prototype.genStyle = function () {
+        return typeof this.styling() === "string" ? undefined : this.styling();
+    };
+    /**
+     * Construct className string for styling the widget.
+     * @returns className for styling the widget
+     */
+    BaseWidget.prototype.genClassName = function () {
+        return typeof this.styling() === "string" ? this.styling() : "";
+    };
+    return BaseWidget;
+}(react_1.Component));
+exports.BaseWidget = BaseWidget;

package/build/cjs/index.d.ts

@@ -1,6 +1,8 @@
-export { useTeams } from "./useTeams";
-export { useData } from "./useData";
-export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
-export { useTeamsUserCredential, TeamsContextWithCredential } from "./useTeamsUserCredential";
-export { useGraph, useGraphWithCredential } from "./useGraph";
+export { useTeams } from "./useTeams";
+export { useData } from "./useData";
+export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
+export { useTeamsUserCredential, TeamsContextWithCredential } from "./useTeamsUserCredential";
+export { useGraph, useGraphWithCredential } from "./useGraph";
+export { BaseDashboard } from "./BaseDashboard";
+export { BaseWidget } from "./BaseWidget";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}
+{"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,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/build/cjs/index.js

@@ -1,16 +1,20 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraphWithCredential = exports.useGraph = exports.useTeamsUserCredential = 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 useTeamsUserCredential_1 = require("./useTeamsUserCredential");
-Object.defineProperty(exports, "useTeamsUserCredential", { enumerable: true, get: function () { return useTeamsUserCredential_1.useTeamsUserCredential; } });
-var useGraph_1 = require("./useGraph");
-Object.defineProperty(exports, "useGraph", { enumerable: true, get: function () { return useGraph_1.useGraph; } });
-Object.defineProperty(exports, "useGraphWithCredential", { enumerable: true, get: function () { return useGraph_1.useGraphWithCredential; } });
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseWidget = exports.BaseDashboard = exports.useGraphWithCredential = exports.useGraph = exports.useTeamsUserCredential = 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 useTeamsUserCredential_1 = require("./useTeamsUserCredential");
+Object.defineProperty(exports, "useTeamsUserCredential", { enumerable: true, get: function () { return useTeamsUserCredential_1.useTeamsUserCredential; } });
+var useGraph_1 = require("./useGraph");
+Object.defineProperty(exports, "useGraph", { enumerable: true, get: function () { return useGraph_1.useGraph; } });
+Object.defineProperty(exports, "useGraphWithCredential", { enumerable: true, get: function () { return useGraph_1.useGraphWithCredential; } });
+var BaseDashboard_1 = require("./BaseDashboard");
+Object.defineProperty(exports, "BaseDashboard", { enumerable: true, get: function () { return BaseDashboard_1.BaseDashboard; } });
+var BaseWidget_1 = require("./BaseWidget");
+Object.defineProperty(exports, "BaseWidget", { enumerable: true, get: function () { return BaseWidget_1.BaseWidget; } });

package/build/cjs/useData.d.ts

@@ -1,34 +1,34 @@
-type State<T> = {
-    /**
-     * User data.
-     */
-    data?: T;
-    /**
-     * Status of data loading.
-     */
-    loading: boolean;
-    /**
-     * Error information.
-     */
-    error?: unknown;
-};
-export 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 {};
+type State<T> = {
+    /**
+     * User data.
+     */
+    data?: T;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error?: unknown;
+};
+export 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.js

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