@availity/mui-avatar 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2023-06-20)
+
+
+### Features
+
+* **mui-avatar:** initial commit ([ed356db](https://github.com/Availity/element/commit/ed356dbaeef699b1a8fb201ec3be8c0bc84d62c9))

package/README.md

@@ -0,0 +1,62 @@
+# @availity/mui-avatar
+
+> Availity MUI Avatar component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-avatar.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-avatar)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-avatar.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-avatar)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-avatar?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-avatar/package.json)
+
+- ⚠️ _needs component theme added to @availity/theme_
+- ⚠️ _needs UI Team Verification (must conform to [Availity's Figma Design Standards](https://www.figma.com/file/bf6l79hehcKdRjb5Kzq1De/Element--MUI-%F0%9F%9A%A7?node-id=4662%3A14&t=QMqHeT6daeqXbjBR-1) - private link)_
+
+## Documentation
+
+This package extends the MUI Avatar component: [MUI Avatar Docs](https://mui.com/components/avatar/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-avatar-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
+
+```bash
+npm install @availity/mui-avatar
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-avatar
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Avatar } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Avatar } from '@availity/mui-avatar';
+```

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { AvatarProps as AvatarProps$1 } from '@mui/material';
+import React from 'react';
+
+interface AvatarProps extends Omit<AvatarProps$1, 'variant'> {
+    children: React.ReactNode;
+    /** The size of the component.
+     * @default xl */
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+}
+declare const Avatar: ({ children, size, sx, ...rest }: AvatarProps) => JSX.Element;
+
+export { Avatar, AvatarProps };

package/dist/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Avatar.tsx
+var import_material = require("@mui/material");
+var import_design_tokens = require("@availity/design-tokens");
+var import_jsx_runtime = require("react/jsx-runtime");
+var sizeStyling = {
+  xs: { width: 18, height: 18, fontSize: import_design_tokens.tokens.fontSizesCaption },
+  s: { width: 24, height: 24, fontSize: import_design_tokens.tokens.fontSizesCaption },
+  m: { width: 40, height: 40, fontSize: import_design_tokens.tokens.fontSizesH5, fontWeight: import_design_tokens.tokens.fontWeightsBold },
+  l: { width: 80, height: 80, fontSize: import_design_tokens.tokens.fontSizesH3, fontWeight: import_design_tokens.tokens.fontWeightsBold },
+  xl: { width: 140, height: 140, fontSize: import_design_tokens.tokens.fontSizesH1, fontWeight: import_design_tokens.tokens.fontWeightsBold }
+};
+var getInitials = (name, size) => {
+  if (name.split(" ").length > 1 && size !== "xs") {
+    return `${name.split(" ")[0][0]}${name.split(" ")[1][0]}`;
+  }
+  return name.charAt(0);
+};
+var formatChildren = (children, size) => {
+  if (typeof children === "string") {
+    return getInitials(children, size).toUpperCase();
+  }
+  return children;
+};
+var Avatar = ({ children, size = "xl", sx, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, {
+    ...rest,
+    variant: "circular",
+    sx: {
+      ...sx,
+      ...sizeStyling[size] || sizeStyling.xl
+    },
+    children: formatChildren(children, size)
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/index.mjs

@@ -0,0 +1,37 @@
+// src/lib/Avatar.tsx
+import { Avatar as MuiAvatar } from "@mui/material";
+import { tokens } from "@availity/design-tokens";
+import { jsx } from "react/jsx-runtime";
+var sizeStyling = {
+  xs: { width: 18, height: 18, fontSize: tokens.fontSizesCaption },
+  s: { width: 24, height: 24, fontSize: tokens.fontSizesCaption },
+  m: { width: 40, height: 40, fontSize: tokens.fontSizesH5, fontWeight: tokens.fontWeightsBold },
+  l: { width: 80, height: 80, fontSize: tokens.fontSizesH3, fontWeight: tokens.fontWeightsBold },
+  xl: { width: 140, height: 140, fontSize: tokens.fontSizesH1, fontWeight: tokens.fontWeightsBold }
+};
+var getInitials = (name, size) => {
+  if (name.split(" ").length > 1 && size !== "xs") {
+    return `${name.split(" ")[0][0]}${name.split(" ")[1][0]}`;
+  }
+  return name.charAt(0);
+};
+var formatChildren = (children, size) => {
+  if (typeof children === "string") {
+    return getInitials(children, size).toUpperCase();
+  }
+  return children;
+};
+var Avatar = ({ children, size = "xl", sx, ...rest }) => {
+  return /* @__PURE__ */ jsx(MuiAvatar, {
+    ...rest,
+    variant: "circular",
+    sx: {
+      ...sx,
+      ...sizeStyling[size] || sizeStyling.xl
+    },
+    children: formatChildren(children, size)
+  });
+};
+export {
+  Avatar
+};

package/introduction.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/Avatar/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@availity/mui-avatar",
+  "version": "0.1.0",
+  "description": "Availity MUI Avatar Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-avatar-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/avatar"
+  },
+  "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",
+    "bundlesize": "bundlesize",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@availity/design-tokens": "^0.4.6"
+  }
+}

package/project.json

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

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Avatar';

package/src/lib/Avatar.stories.tsx

@@ -0,0 +1,41 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar, AvatarProps } from './Avatar';
+import { HomeIcon } from '@availity/mui-icon';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: {
+      // this guarantees the options display in the correct order
+      options: ['xs', 's', 'm', 'l', 'xl'],
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Avatar: StoryObj<typeof Avatar> = {
+  render: (args: AvatarProps) => <Avatar {...args} />,
+  args: {
+    children: 'John Doe',
+  },
+};
+
+export const _ImageAvatar: StoryObj<typeof Avatar> = {
+  render: (args: AvatarProps) => <Avatar {...args} />,
+  args: {
+    src: 'https://avatars.githubusercontent.com/u/329985?s=100',
+  },
+};
+
+export const _IconAvatar: StoryObj<typeof Avatar> = {
+  render: (args: AvatarProps) => (
+    <Avatar {...args}>
+      <HomeIcon />
+    </Avatar>
+  ),
+};

package/src/lib/Avatar.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('Avatar', () => {
+  test('should display initials when string passed as child', () => {
+    const { getByText } = render(<Avatar>Test Person</Avatar>);
+    expect(getByText('TP')).toBeTruthy();
+  });
+  test('should display first two initials when multi-word child is passed', () => {
+    const { getByText } = render(<Avatar>This is a test</Avatar>);
+    expect(getByText('TI')).toBeTruthy();
+  });
+  test('should display first initial when size is small', () => {
+    const { getByText } = render(<Avatar size="xs">This is a test</Avatar>);
+    expect(getByText('T')).toBeTruthy();
+  });
+});

package/src/lib/Avatar.tsx

@@ -0,0 +1,49 @@
+import { Avatar as MuiAvatar, AvatarProps as MuiAvatarProps } from '@mui/material';
+import React from 'react';
+import { tokens } from '@availity/design-tokens';
+
+export interface AvatarProps extends Omit<MuiAvatarProps, 'variant'> {
+  children: React.ReactNode;
+  /** The size of the component.
+   * @default xl */
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl'; // If this changes, you will need to update the story as well. Options are hardcoded to ensure order.
+}
+
+const sizeStyling = {
+  xs: { width: 18, height: 18, fontSize: tokens.fontSizesCaption },
+  s: { width: 24, height: 24, fontSize: tokens.fontSizesCaption },
+  m: { width: 40, height: 40, fontSize: tokens.fontSizesH5, fontWeight: tokens.fontWeightsBold },
+  l: { width: 80, height: 80, fontSize: tokens.fontSizesH3, fontWeight: tokens.fontWeightsBold },
+  xl: { width: 140, height: 140, fontSize: tokens.fontSizesH1, fontWeight: tokens.fontWeightsBold },
+};
+
+const getInitials = (name: string, size: 'xs' | 's' | 'm' | 'l' | 'xl'): string => {
+  if (name.split(' ').length > 1 && size !== 'xs') {
+    return `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`;
+  }
+
+  return name.charAt(0);
+};
+
+const formatChildren = (children: React.ReactNode, size: 'xs' | 's' | 'm' | 'l' | 'xl'): React.ReactNode => {
+  if (typeof children === 'string') {
+    return getInitials(children, size).toUpperCase();
+  }
+
+  return children;
+};
+
+export const Avatar = ({ children, size = 'xl', sx, ...rest }: AvatarProps): JSX.Element => {
+  return (
+    <MuiAvatar
+      {...rest}
+      variant="circular"
+      sx={{
+        ...sx,
+        ...(sizeStyling[size] || sizeStyling.xl),
+      }}
+    >
+      {formatChildren(children, size)}
+    </MuiAvatar>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}