@availity/mui-favorites 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-06-27)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.1.0`
+* `mui-progress` updated to version `0.1.0`
+* `mui-tooltip` updated to version `0.1.0`
+
+### Features
+
+* **mui-favorites:** init commit ([9cab4fa](https://github.com/Availity/element/commit/9cab4fab7f8611407d12042f6ad60a4b247dcad9))

package/README.md

@@ -0,0 +1,59 @@
+# @availity/mui-favorites
+
+> Availity MUI Favorites component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-favorites.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-favorites)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-favorites.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-favorites)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-favorites?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-favorites/package.json)
+
+## Documentation
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-favorites-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
+
+```bash
+npm install @availity/mui-favorites
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-favorites
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { FavoritesProvider, FavoriteHeart, useFavorites } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { FavoritesProvider, FavoriteHeart, useFavorites } from '@availity/mui-favorites';
+```

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+import React$1 from 'react';
+
+type Favorite = {
+    id: string;
+    pos: number;
+};
+
+declare const FavoritesProvider: ({ children, onFavoritesChange, }: {
+    children: React.ReactNode;
+    onFavoritesChange?: (favorites: Favorite[]) => void;
+}) => JSX.Element;
+type MergedStatusUnion = 'initLoading' | 'reloading' | 'error' | 'success';
+declare const useFavorites: (id: string) => {
+    isFavorited: boolean;
+    status: MergedStatusUnion;
+    isLastClickedFavorite: boolean;
+    toggleFavorite: () => void;
+};
+
+type FavoriteHeartProps = {
+    /** The configuration's id */
+    id: string;
+    /** The name of the configuration */
+    name: string;
+    /** What to do on Favorite Toggle */
+    onChange?: (isFavorited: boolean, event: React$1.ChangeEvent<HTMLInputElement> | React$1.KeyboardEvent<HTMLInputElement>) => void;
+    /** What to do on click */
+    onMouseDown?: (event: React$1.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /** Whether or not the Favorite is disabled
+     * @default false
+     */
+    disabled?: boolean;
+};
+declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, }: FavoriteHeartProps) => JSX.Element;
+
+export { FavoriteHeart, FavoritesProvider, useFavorites };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import React$1 from 'react';
+
+type Favorite = {
+    id: string;
+    pos: number;
+};
+
+declare const FavoritesProvider: ({ children, onFavoritesChange, }: {
+    children: React.ReactNode;
+    onFavoritesChange?: (favorites: Favorite[]) => void;
+}) => JSX.Element;
+type MergedStatusUnion = 'initLoading' | 'reloading' | 'error' | 'success';
+declare const useFavorites: (id: string) => {
+    isFavorited: boolean;
+    status: MergedStatusUnion;
+    isLastClickedFavorite: boolean;
+    toggleFavorite: () => void;
+};
+
+type FavoriteHeartProps = {
+    /** The configuration's id */
+    id: string;
+    /** The name of the configuration */
+    name: string;
+    /** What to do on Favorite Toggle */
+    onChange?: (isFavorited: boolean, event: React$1.ChangeEvent<HTMLInputElement> | React$1.KeyboardEvent<HTMLInputElement>) => void;
+    /** What to do on click */
+    onMouseDown?: (event: React$1.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /** Whether or not the Favorite is disabled
+     * @default false
+     */
+    disabled?: boolean;
+};
+declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, }: FavoriteHeartProps) => JSX.Element;
+
+export { FavoriteHeart, FavoritesProvider, useFavorites };

package/dist/index.js

@@ -0,0 +1,356 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FavoriteHeart: () => FavoriteHeart,
+  FavoritesProvider: () => FavoritesProvider,
+  useFavorites: () => useFavorites
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Favorites.tsx
+var import_react = require("react");
+var import_react_query2 = require("@tanstack/react-query");
+var import_message_core2 = __toESM(require("@availity/message-core"));
+
+// src/lib/utils.ts
+var import_message_core = __toESM(require("@availity/message-core"));
+var import_api_axios = require("@availity/api-axios");
+var import_react_query = require("@tanstack/react-query");
+
+// src/lib/constants.tsx
+var MAX_FAVORITES = 60;
+var NAV_APP_ID = "Gateway-AvNavigation";
+var AV_INTERNAL_GLOBALS = {
+  FAVORITES_UPDATE: "av:favorites:update",
+  FAVORITES_CHANGED: "av:favorites:changed",
+  MAX_FAVORITES: "av:favorites:maxed",
+  MY_TOP_APPS_UPDATED: "av:topApps:updated"
+};
+
+// src/lib/utils.ts
+var isFavorite = (arg) => Boolean(typeof (arg == null ? void 0 : arg.id) === "string" && typeof (arg == null ? void 0 : arg.pos) === "number");
+var validateFavorites = (unvalidatedFavorites) => {
+  const validatedFavorites = Array.isArray(unvalidatedFavorites) ? unvalidatedFavorites == null ? void 0 : unvalidatedFavorites.filter(isFavorite) : [];
+  return validatedFavorites;
+};
+var submit = (_0) => __async(void 0, [_0], function* ({ favorites, targetFavoriteId }) {
+  const response = yield import_api_axios.avSettingsApi.setApplication(NAV_APP_ID, { favorites });
+  return { favorites: response.data.favorites, targetFavoriteId };
+});
+var getFavorites = () => __async(void 0, null, function* () {
+  var _a, _b, _c;
+  const result = yield import_api_axios.avSettingsApi.getApplication(NAV_APP_ID);
+  const unvalidatedFavorites = (_c = (_b = (_a = result == null ? void 0 : result.data) == null ? void 0 : _a.settings) == null ? void 0 : _b[0]) == null ? void 0 : _c.favorites;
+  const validatedFavorites = validateFavorites(unvalidatedFavorites);
+  return validatedFavorites;
+});
+var useFavoritesQuery = () => (0, import_react_query.useQuery)(["favorites"], getFavorites);
+var useSubmitFavorites = ({ onMutationStart }) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const _a = (0, import_react_query.useMutation)(submit, {
+    onMutate(variables) {
+      onMutationStart == null ? void 0 : onMutationStart(variables.targetFavoriteId);
+    },
+    onSuccess(data) {
+      queryClient.setQueryData(["favorites"], data.favorites);
+    }
+  }), { mutateAsync: submitFavorites } = _a, rest = __objRest(_a, ["mutateAsync"]);
+  return __spreadValues({ submitFavorites }, rest);
+};
+var sendUpdateMessage = (favorites) => {
+  import_message_core.default.send({ favorites, event: AV_INTERNAL_GLOBALS.FAVORITES_UPDATE });
+};
+var openMaxModal = () => import_message_core.default.send(AV_INTERNAL_GLOBALS.MAX_FAVORITES);
+
+// src/lib/Favorites.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FavoritesContext = (0, import_react.createContext)(null);
+var FavoritesProvider = ({
+  children,
+  onFavoritesChange
+}) => {
+  const [lastClickedFavoriteId, setLastClickedFavoriteId] = (0, import_react.useState)("");
+  const queryClient = (0, import_react_query2.useQueryClient)();
+  const { data: favorites, status: queryStatus } = useFavoritesQuery();
+  const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
+    onMutationStart(targetFavoriteId) {
+      setLastClickedFavoriteId(targetFavoriteId);
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    const unsubscribeFavoritesChanged = import_message_core2.default.subscribe(
+      AV_INTERNAL_GLOBALS.FAVORITES_CHANGED,
+      (data) => {
+        if (data == null ? void 0 : data.favorites) {
+          queryClient.setQueryData(["favorites"], data == null ? void 0 : data.favorites);
+        }
+      },
+      { ignoreSameWindow: false }
+    );
+    const unsubscribeFavoritesUpdate = import_message_core2.default.subscribe(
+      AV_INTERNAL_GLOBALS.FAVORITES_UPDATE,
+      (data) => {
+        if (data == null ? void 0 : data.favorites) {
+          queryClient.setQueryData(["favorites"], data == null ? void 0 : data.favorites);
+        }
+      },
+      { ignoreSameWindow: false }
+    );
+    return () => {
+      unsubscribeFavoritesChanged();
+      unsubscribeFavoritesUpdate();
+    };
+  }, [queryClient]);
+  const deleteFavorite = (id) => __async(void 0, null, function* () {
+    if (favorites) {
+      const response = yield submitFavorites({
+        favorites: favorites.filter((favorite) => favorite.id !== id),
+        targetFavoriteId: id
+      });
+      sendUpdateMessage(response.favorites);
+      onFavoritesChange == null ? void 0 : onFavoritesChange(response.favorites);
+    }
+  });
+  const addFavorite = (id) => __async(void 0, null, function* () {
+    if (!favorites)
+      return false;
+    if (favorites.length >= MAX_FAVORITES) {
+      openMaxModal();
+      return false;
+    }
+    const maxFavorite = favorites.reduce((accum, fave) => {
+      if (!accum || fave.pos > accum.pos) {
+        accum = fave;
+      }
+      return accum;
+    }, null);
+    const newFavPos = maxFavorite ? maxFavorite.pos + 1 : 0;
+    const response = yield submitFavorites({
+      favorites: [...favorites, { id, pos: newFavPos }],
+      targetFavoriteId: id
+    });
+    sendUpdateMessage(response.favorites);
+    onFavoritesChange == null ? void 0 : onFavoritesChange(response.favorites);
+    const isFavorited = response.favorites.find((f) => f.id === id);
+    return !!isFavorited;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FavoritesContext.Provider,
+    {
+      value: {
+        favorites,
+        queryStatus,
+        mutationStatus,
+        lastClickedFavoriteId,
+        deleteFavorite,
+        addFavorite
+      },
+      children
+    }
+  );
+};
+var noOp = () => {
+};
+var useFavorites = (id) => {
+  const context = (0, import_react.useContext)(FavoritesContext);
+  if (context === null) {
+    throw new Error("useFavorites must be used within a FavoritesProvider");
+  }
+  const { favorites, queryStatus, mutationStatus, lastClickedFavoriteId, deleteFavorite, addFavorite } = context;
+  const isLastClickedFavorite = lastClickedFavoriteId === id;
+  const isFavorited = (0, import_react.useMemo)(() => {
+    const fav = favorites == null ? void 0 : favorites.find((f) => f.id === id);
+    return !!fav;
+  }, [favorites, id]);
+  const toggleFavorite = () => isFavorited ? deleteFavorite(id) : addFavorite(id);
+  const isDisabled = queryStatus === "loading" || queryStatus === "idle" || mutationStatus === "loading";
+  let status = "initLoading";
+  if (queryStatus === "loading")
+    status = "initLoading";
+  if (mutationStatus === "loading")
+    status = "reloading";
+  if (queryStatus === "error" || mutationStatus === "error")
+    status = "error";
+  if (queryStatus === "success" && (mutationStatus === "success" || mutationStatus === "idle"))
+    status = "success";
+  return {
+    isFavorited,
+    status,
+    isLastClickedFavorite,
+    toggleFavorite: isDisabled ? noOp : toggleFavorite
+  };
+};
+
+// src/lib/FavoriteHeart.tsx
+var import_mui_tooltip = require("@availity/mui-tooltip");
+var import_mui_icon = require("@availity/mui-icon");
+var import_mui_progress = require("@availity/mui-progress");
+var import_styles = require("@mui/material/styles");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var icons = {
+  spinner: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_progress.CircularProgress, { "aria-hidden": true, size: "small", loadingCaption: false }),
+  unknownDisabledHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartIcon, { "aria-hidden": true, color: "disabled" }),
+  favoritedDisabledHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartIcon, { "aria-hidden": true, color: "error", opacity: "0.6" }),
+  unfavoritedDisabledHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartEmptyIcon, { "aria-hidden": true, color: "disabled", opacity: "0.6" }),
+  favoritedHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartIcon, { "aria-hidden": true, color: "error" }),
+  unfavoritedHeart: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.HeartEmptyIcon, { "aria-hidden": true, color: "secondary" })
+};
+var FavoriteHeartContainer = (0, import_styles.styled)("div", { name: "AvFavoriteHeart", slot: "root" })({});
+var FavoriteInput = (0, import_styles.styled)("input", {
+  name: "AvFavoriteHeart",
+  slot: "input"
+})({});
+var FavoriteIcon = (0, import_styles.styled)("div", {
+  name: "AvFavoriteHeart",
+  slot: "icon"
+})({});
+var FavoriteHeart = ({
+  id,
+  name,
+  onChange,
+  onMouseDown,
+  disabled = false
+}) => {
+  const { isFavorited, isLastClickedFavorite, status, toggleFavorite } = useFavorites(id);
+  const handleChange = (event) => {
+    onChange == null ? void 0 : onChange(isFavorited, event);
+    toggleFavorite();
+  };
+  const handleKeyPress = (event) => {
+    if (event.code === "Enter" || event.key === "Enter") {
+      onChange == null ? void 0 : onChange(isFavorited, event);
+      toggleFavorite();
+    }
+  };
+  const iconKey = (() => {
+    if (status === "initLoading")
+      return "unknownDisabledHeart";
+    if (status === "reloading") {
+      if (isLastClickedFavorite)
+        return "spinner";
+      return isFavorited ? "favoritedDisabledHeart" : "unfavoritedDisabledHeart";
+    }
+    if (disabled) {
+      return isFavorited ? "favoritedDisabledHeart" : "unfavoritedDisabledHeart";
+    }
+    if (isFavorited)
+      return "favoritedHeart";
+    return "unfavoritedHeart";
+  })();
+  const cursor = disabled || !isLastClickedFavorite && (status === "initLoading" || status === "reloading") ? "not-allowed" : void 0;
+  const tooltipContent = `${isFavorited ? "Remove from" : "Add to"} My Favorites`;
+  const favoriteInputProps = {
+    onKeyDown: handleKeyPress,
+    type: "checkbox",
+    "aria-label": `Favorite ${name}`,
+    id: `av-favorite-heart-${id}`,
+    disabled,
+    checked: isFavorited,
+    onChange: handleChange,
+    onMouseDown,
+    style: { cursor }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(FavoriteHeartContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteIcon, { children: icons[iconKey] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: 0,
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          border: 0
+        },
+        "aria-live": isLastClickedFavorite && (status === "reloading" || status === "error") ? "polite" : "off",
+        children: isLastClickedFavorite && status === "reloading" ? "Loading..." : isLastClickedFavorite && status === "error" ? "An error has occurred. Please try again." : ""
+      }
+    ),
+    disabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteInput, __spreadValues({}, favoriteInputProps)) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_tooltip.Tooltip, { title: tooltipContent, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FavoriteInput, __spreadValues({}, favoriteInputProps)) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FavoriteHeart,
+  FavoritesProvider,
+  useFavorites
+});