@availity/mui-favorites 0.1.0

package/dist/index.mjs

@@ -0,0 +1,320 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __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/lib/Favorites.tsx
+import { createContext, useContext, useEffect, useState, useMemo } from "react";
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import avMessages2 from "@availity/message-core";
+
+// src/lib/utils.ts
+import avMessages from "@availity/message-core";
+import { avSettingsApi } from "@availity/api-axios";
+import { useMutation, useQuery, useQueryClient } from "@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 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 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 = () => useQuery(["favorites"], getFavorites);
+var useSubmitFavorites = ({ onMutationStart }) => {
+  const queryClient = useQueryClient();
+  const _a = 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) => {
+  avMessages.send({ favorites, event: AV_INTERNAL_GLOBALS.FAVORITES_UPDATE });
+};
+var openMaxModal = () => avMessages.send(AV_INTERNAL_GLOBALS.MAX_FAVORITES);
+
+// src/lib/Favorites.tsx
+import { jsx } from "react/jsx-runtime";
+var FavoritesContext = createContext(null);
+var FavoritesProvider = ({
+  children,
+  onFavoritesChange
+}) => {
+  const [lastClickedFavoriteId, setLastClickedFavoriteId] = useState("");
+  const queryClient = useQueryClient2();
+  const { data: favorites, status: queryStatus } = useFavoritesQuery();
+  const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
+    onMutationStart(targetFavoriteId) {
+      setLastClickedFavoriteId(targetFavoriteId);
+    }
+  });
+  useEffect(() => {
+    const unsubscribeFavoritesChanged = avMessages2.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 = avMessages2.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__ */ jsx(
+    FavoritesContext.Provider,
+    {
+      value: {
+        favorites,
+        queryStatus,
+        mutationStatus,
+        lastClickedFavoriteId,
+        deleteFavorite,
+        addFavorite
+      },
+      children
+    }
+  );
+};
+var noOp = () => {
+};
+var useFavorites = (id) => {
+  const context = 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 = 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
+import { Tooltip } from "@availity/mui-tooltip";
+import { HeartIcon, HeartEmptyIcon } from "@availity/mui-icon";
+import { CircularProgress } from "@availity/mui-progress";
+import { styled } from "@mui/material/styles";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var icons = {
+  spinner: /* @__PURE__ */ jsx2(CircularProgress, { "aria-hidden": true, size: "small", loadingCaption: false }),
+  unknownDisabledHeart: /* @__PURE__ */ jsx2(HeartIcon, { "aria-hidden": true, color: "disabled" }),
+  favoritedDisabledHeart: /* @__PURE__ */ jsx2(HeartIcon, { "aria-hidden": true, color: "error", opacity: "0.6" }),
+  unfavoritedDisabledHeart: /* @__PURE__ */ jsx2(HeartEmptyIcon, { "aria-hidden": true, color: "disabled", opacity: "0.6" }),
+  favoritedHeart: /* @__PURE__ */ jsx2(HeartIcon, { "aria-hidden": true, color: "error" }),
+  unfavoritedHeart: /* @__PURE__ */ jsx2(HeartEmptyIcon, { "aria-hidden": true, color: "secondary" })
+};
+var FavoriteHeartContainer = styled("div", { name: "AvFavoriteHeart", slot: "root" })({});
+var FavoriteInput = styled("input", {
+  name: "AvFavoriteHeart",
+  slot: "input"
+})({});
+var FavoriteIcon = 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__ */ jsxs(FavoriteHeartContainer, { children: [
+    /* @__PURE__ */ jsx2(FavoriteIcon, { children: icons[iconKey] }),
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsx2(FavoriteInput, __spreadValues({}, favoriteInputProps)) : /* @__PURE__ */ jsx2(Tooltip, { title: tooltipContent, placement: "top", children: /* @__PURE__ */ jsx2(FavoriteInput, __spreadValues({}, favoriteInputProps)) })
+  ] });
+};
+export {
+  FavoriteHeart,
+  FavoritesProvider,
+  useFavorites
+};

package/introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Favorites/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'favorites',
+  coverageDirectory: '../../coverage/favorites',
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@availity/mui-favorites",
+  "version": "0.1.0",
+  "description": "Availity MUI Favorites Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-favorites-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/favorites"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "@availity/api-axios": "^8.0.8",
+    "@availity/message-core": "^6.1.3",
+    "@tanstack/react-query": "^4.36.1"
+  },
+  "devDependencies": {
+    "@availity/mui-icon": "^0.8.2",
+    "@availity/mui-progress": "^0.1.8",
+    "@availity/mui-tooltip": "^0.5.8",
+    "@mui/material": "^5.15.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@availity/mui-icon": "^0.8.2",
+    "@availity/mui-progress": "^0.1.8",
+    "@availity/mui-tooltip": "^0.5.8",
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-favorites",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/favorites/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/favorites/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/favorites"],
+      "options": {
+        "jestConfig": "packages/favorites/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/Favorites';
+export * from './lib/FavoriteHeart';

package/src/lib/FavoriteHeart.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Tooltip } from '@availity/mui-tooltip';
+import { HeartIcon, HeartEmptyIcon } from '@availity/mui-icon';
+import { CircularProgress } from '@availity/mui-progress';
+import { styled } from '@mui/material/styles';
+import { useFavorites } from './Favorites';
+
+const icons = {
+  spinner: <CircularProgress aria-hidden size="small" loadingCaption={false} />,
+  unknownDisabledHeart: <HeartIcon aria-hidden color="disabled" />,
+  favoritedDisabledHeart: <HeartIcon aria-hidden color="error" opacity="0.6" />,
+  unfavoritedDisabledHeart: <HeartEmptyIcon aria-hidden color="disabled" opacity="0.6" />,
+  favoritedHeart: <HeartIcon aria-hidden color="error" />,
+  unfavoritedHeart: <HeartEmptyIcon aria-hidden color="secondary" />,
+};
+
+const FavoriteHeartContainer = styled('div', { name: 'AvFavoriteHeart', slot: 'root' })({});
+const FavoriteInput = styled('input', {
+  name: 'AvFavoriteHeart',
+  slot: 'input',
+})({});
+
+const FavoriteIcon = styled('div', {
+  name: 'AvFavoriteHeart',
+  slot: 'icon',
+})({});
+
+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.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>
+  ) => void;
+  /** What to do on click */
+  onMouseDown?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+  /** Whether or not the Favorite is disabled
+   * @default false
+   */
+  disabled?: boolean;
+};
+
+export const FavoriteHeart = ({
+  id,
+  name,
+  onChange,
+  onMouseDown,
+  disabled = false,
+}: FavoriteHeartProps): JSX.Element => {
+  const { isFavorited, isLastClickedFavorite, status, toggleFavorite } = useFavorites(id);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(isFavorited, event);
+    toggleFavorite();
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      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'
+      : undefined;
+
+  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 (
+    <FavoriteHeartContainer>
+      <FavoriteIcon>{icons[iconKey]}</FavoriteIcon>
+      <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'}
+      >
+        {isLastClickedFavorite && status === 'reloading'
+          ? 'Loading...'
+          : isLastClickedFavorite && status === 'error'
+            ? 'An error has occurred. Please try again.'
+            : ''}
+      </span>
+
+      {disabled ? (
+        <FavoriteInput {...favoriteInputProps} />
+      ) : (
+        <Tooltip title={tooltipContent} placement="top">
+          <FavoriteInput {...favoriteInputProps} />
+        </Tooltip>
+      )}
+    </FavoriteHeartContainer>
+  );
+};

package/src/lib/Favorites.stories.tsx

@@ -0,0 +1,43 @@
+import { StoryObj } from '@storybook/react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+
+import { FavoritesProvider } from './Favorites';
+import { FavoriteHeart } from './FavoriteHeart';
+
+export default {
+  title: 'Components/Favorites',
+  component: FavoriteHeart,
+};
+
+const storyFavorites = [
+  { id: '123', pos: 0, name: 'App #1' },
+  { id: '456', pos: 0, name: 'A retired app' },
+  { id: '789', pos: 0, name: 'Another retired app' },
+];
+
+export const _FavoriteHeart: StoryObj = {
+  render: () => {
+    return (
+      <QueryClientProvider
+        client={
+          new QueryClient({
+            defaultOptions: {
+              queries: {
+                refetchOnWindowFocus: false,
+              },
+            },
+          })
+        }
+      >
+        <FavoritesProvider>
+          {storyFavorites.map((fav) => (
+            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }} key={fav.id}>
+              <FavoriteHeart id={fav.id} name={fav.name} disabled={fav.name.includes('retired')} />
+              <div>{fav.name}</div>
+            </div>
+          ))}
+        </FavoritesProvider>
+      </QueryClientProvider>
+    );
+  },
+};