@availity/mui-avatar 0.1.19 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-avatar@0.2.0...@availity/mui-avatar@0.2.1) (2024-08-05)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.2.0`
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-avatar@0.1.19...@availity/mui-avatar@0.2.0) (2024-08-01)
+
+
+### Features
+
+* **mui-avatar:** get the user's avatar by default ([3a3e2e7](https://github.com/Availity/element/commit/3a3e2e7da6912d2e9e7d69f676a3e16a8838bfc7))
+
 ## [0.1.19](https://github.com/Availity/element/compare/@availity/mui-avatar@0.1.18...@availity/mui-avatar@0.1.19) (2024-07-22)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -5,6 +5,6 @@ interface AvatarProps extends Omit<AvatarProps$1, 'variant'> {
      * @default xl */
     size?: 'xs' | 's' | 'm' | 'l' | 'xl';
 }
-declare const Avatar: ({ children, size, sx, ...rest }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ children, size, src, sx, ...rest }: AvatarProps) => JSX.Element;
 
 export { Avatar, type AvatarProps };

package/dist/index.d.ts

@@ -5,6 +5,6 @@ interface AvatarProps extends Omit<AvatarProps$1, 'variant'> {
      * @default xl */
     size?: 'xs' | 's' | 'm' | 'l' | 'xl';
 }
-declare const Avatar: ({ children, size, sx, ...rest }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ children, size, src, sx, ...rest }: AvatarProps) => JSX.Element;
 
 export { Avatar, type AvatarProps };

package/dist/index.js

@@ -55,6 +55,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   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 = {};
@@ -65,7 +85,10 @@ module.exports = __toCommonJS(src_exports);
 
 // src/lib/Avatar.tsx
 var import_Avatar = __toESM(require("@mui/material/Avatar"));
+var import_react = __toESM(require("react"));
 var import_design_tokens = require("@availity/design-tokens");
+var import_api_axios = require("@availity/api-axios");
+var import_mui_icon = require("@availity/mui-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
 var sizeStyling = {
   xs: { width: 18, height: 18, fontSize: import_design_tokens.tokens.fontSizesCaption },
@@ -87,13 +110,27 @@ var formatChildren = (children, size) => {
   return children;
 };
 var Avatar = (_a) => {
-  var _b = _a, { children, size = "xl", sx } = _b, rest = __objRest(_b, ["children", "size", "sx"]);
+  var _b = _a, { children, size = "xl", src, sx } = _b, rest = __objRest(_b, ["children", "size", "src", "sx"]);
+  const [avatar, setAvatar] = import_react.default.useState();
+  (0, import_react.useEffect)(() => {
+    const fetchAvatar = () => __async(void 0, null, function* () {
+      if (src) {
+        setAvatar(src);
+      } else {
+        const resp = yield import_api_axios.avSettingsApi.getApplication("AVATAR");
+        const avi = resp.data.settings[0].avatar;
+        setAvatar(avi);
+      }
+    });
+    fetchAvatar();
+  }, [src]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Avatar.default,
     __spreadProps(__spreadValues({}, rest), {
       variant: "circular",
+      src: children ? void 0 : avatar,
       sx: __spreadValues(__spreadValues({}, sx), sizeStyling[size] || sizeStyling.xl),
-      children: formatChildren(children, size)
+      children: children ? formatChildren(children, size) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.UserIcon, {})
     })
   );
 };

package/dist/index.mjs

@@ -29,10 +29,33 @@ var __objRest = (source, exclude) => {
     }
   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/Avatar.tsx
 import { default as MuiAvatar } from "@mui/material/Avatar";
+import React, { useEffect } from "react";
 import { tokens } from "@availity/design-tokens";
+import { avSettingsApi } from "@availity/api-axios";
+import { UserIcon } from "@availity/mui-icon";
 import { jsx } from "react/jsx-runtime";
 var sizeStyling = {
   xs: { width: 18, height: 18, fontSize: tokens.fontSizesCaption },
@@ -54,13 +77,27 @@ var formatChildren = (children, size) => {
   return children;
 };
 var Avatar = (_a) => {
-  var _b = _a, { children, size = "xl", sx } = _b, rest = __objRest(_b, ["children", "size", "sx"]);
+  var _b = _a, { children, size = "xl", src, sx } = _b, rest = __objRest(_b, ["children", "size", "src", "sx"]);
+  const [avatar, setAvatar] = React.useState();
+  useEffect(() => {
+    const fetchAvatar = () => __async(void 0, null, function* () {
+      if (src) {
+        setAvatar(src);
+      } else {
+        const resp = yield avSettingsApi.getApplication("AVATAR");
+        const avi = resp.data.settings[0].avatar;
+        setAvatar(avi);
+      }
+    });
+    fetchAvatar();
+  }, [src]);
   return /* @__PURE__ */ jsx(
     MuiAvatar,
     __spreadProps(__spreadValues({}, rest), {
       variant: "circular",
+      src: children ? void 0 : avatar,
       sx: __spreadValues(__spreadValues({}, sx), sizeStyling[size] || sizeStyling.xl),
-      children: formatChildren(children, size)
+      children: children ? formatChildren(children, size) : /* @__PURE__ */ jsx(UserIcon, {})
     })
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-avatar",
-  "version": "0.1.19",
+  "version": "0.2.1",
   "description": "Availity MUI Avatar Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,7 +32,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@availity/mui-icon": "^0.9.0",
+    "@availity/mui-icon": "^0.10.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -40,6 +40,7 @@
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
+    "@availity/mui-icon": "^0.10.0",
     "@mui/material": "^5.11.9",
     "react": ">=16.3.0"
   },
@@ -47,6 +48,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@availity/api-axios": "^9.0.0",
     "@availity/design-tokens": "^0.13.2"
   }
 }

package/src/lib/Avatar.stories.tsx

@@ -20,12 +20,16 @@ export default meta;
 
 export const _Avatar: StoryObj<typeof Avatar> = {
   render: (args: AvatarProps) => <Avatar {...args} />,
+};
+
+export const _TextAvatar: StoryObj<typeof Avatar> = {
+  render: (args: AvatarProps) => <Avatar {...args} />,
   args: {
     children: 'John Doe',
   },
 };
 
-export const _ImageAvatar: StoryObj<typeof Avatar> = {
+export const _CustomSrcAvatar: StoryObj<typeof Avatar> = {
   render: (args: AvatarProps) => <Avatar {...args} />,
   args: {
     src: 'https://avatars.githubusercontent.com/u/329985?s=100',

package/src/lib/Avatar.tsx

@@ -1,6 +1,8 @@
 import { default as MuiAvatar, AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { tokens } from '@availity/design-tokens';
+import { avSettingsApi } from '@availity/api-axios';
+import { UserIcon } from '@availity/mui-icon';
 
 export interface AvatarProps extends Omit<MuiAvatarProps, 'variant'> {
   /** The size of the component.
@@ -32,17 +34,36 @@ const formatChildren = (children: React.ReactNode, size: 'xs' | 's' | 'm' | 'l'
   return children;
 };
 
-export const Avatar = ({ children, size = 'xl', sx, ...rest }: AvatarProps): JSX.Element => {
+export const Avatar = ({ children, size = 'xl', src, sx, ...rest }: AvatarProps): JSX.Element => {
+  const [avatar, setAvatar] = React.useState<string>();
+
+  useEffect(() => {
+    const fetchAvatar = async () => {
+      if (src) {
+        setAvatar(src);
+      } else {
+        const resp = await avSettingsApi.getApplication('AVATAR');
+
+        const avi = resp.data.settings[0].avatar;
+
+        setAvatar(avi);
+      }
+    };
+
+    fetchAvatar();
+  }, [src]);
+
   return (
     <MuiAvatar
       {...rest}
       variant="circular"
+      src={children ? undefined : avatar}
       sx={{
         ...sx,
         ...(sizeStyling[size] || sizeStyling.xl),
       }}
     >
-      {formatChildren(children, size)}
+      {children ? formatChildren(children, size) : <UserIcon />}
     </MuiAvatar>
   );
 };