@sproutsocial/seeds-react-avatar 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-avatar/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     5.61 KB
+CJS dist/index.js.map 7.10 KB
+CJS ⚡️ Build success in 69ms
+ESM dist/esm/index.js     3.51 KB
+ESM dist/esm/index.js.map 7.00 KB
+ESM ⚡️ Build success in 75ms
+DTS Build start
+DTS ⚡️ Build success in 10367ms
+DTS dist/index.d.ts  1.53 KB
+DTS dist/index.d.mts 1.53 KB
+Done in 12.80s.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @sproutsocial/seeds-react-avatar
+
+## 1.0.0
+
+### Major Changes
+
+- 426f572: Migrated Avatar and Image components into their own packages
+
+### Patch Changes
+
+- Updated dependencies [426f572]
+  - @sproutsocial/seeds-react-image@1.0.0

package/dist/esm/index.js

@@ -0,0 +1,132 @@
+// src/Avatar.tsx
+import { useState, useCallback, useMemo, memo, useEffect } from "react";
+import styled, { css } from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import Image from "@sproutsocial/seeds-react-image";
+import Text from "@sproutsocial/seeds-react-text";
+import { BORDER } from "@sproutsocial/seeds-react-system-props";
+import { jsx } from "react/jsx-runtime";
+var defaultType = "neutral";
+var AvatarText = styled(({ fontSize, ...rest }) => /* @__PURE__ */ jsx(Text, { ...rest }))`
+  font-size: ${(props) => props.fontSize}px;
+  color: ${({ theme, type, color }) => color ? color : theme.colors.text.decorative[type]};
+`;
+var Container = styled(Box)`
+  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`
+    background: ${$displayFallback ? bg ? bg : theme.colors.container.background.decorative[$type] : "none"};
+    border: ${$displayFallback ? `1px solid` : "none"};
+    border-color: ${borderColor ? borderColor : theme.colors.container.border.decorative[$type]};
+    color: ${theme.colors.text.decorative[$type]};
+  `}
+
+  ${BORDER}
+`;
+var getInitials = (name, fallback = "?") => {
+  if (!name || typeof name !== "string")
+    return fallback;
+  return name.replace(/\s+/, " ").split(" ").slice(0, 2).map((v) => v && v[0]?.toUpperCase()).join("");
+};
+var getAvatarColor = (name, type) => {
+  if (type !== "auto") {
+    return type;
+  }
+  const colors = [
+    "purple",
+    "green",
+    "blue",
+    "yellow",
+    "red",
+    "orange"
+  ];
+  const seed = name.split("").reduce((seed2, char) => {
+    return seed2 + char.charCodeAt(0);
+  }, 0);
+  return colors[seed % colors.length] || "neutral";
+};
+var Avatar = ({
+  appearance = "circle",
+  name = "",
+  src,
+  type = defaultType,
+  size = "40px",
+  bg,
+  color,
+  initials,
+  ...rest
+}) => {
+  const colorType = getAvatarColor(name, type);
+  const [imageFailedLoading, setImageFailedLoading] = useState(false);
+  useEffect(() => {
+    setImageFailedLoading(false);
+  }, [src]);
+  const displayInitials = useMemo(
+    () => initials || getInitials(name),
+    [initials, name]
+  );
+  const handleError = useCallback(() => {
+    setImageFailedLoading(true);
+  }, [setImageFailedLoading]);
+  const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      size,
+      overflow: "hidden",
+      borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
+      position: "relative",
+      display: "flex",
+      flexShrink: 0,
+      justifyContent: "center",
+      alignItems: "center",
+      title: name,
+      bg,
+      $type: colorType,
+      "data-qa-user-avatar": name,
+      $displayFallback: !src || imageFailedLoading,
+      ...rest,
+      children: !src || imageFailedLoading ? /* @__PURE__ */ jsx(
+        AvatarText,
+        {
+          lineHeight: size,
+          fontWeight: "semibold",
+          fontSize,
+          type: colorType,
+          color,
+          children: displayInitials
+        }
+      ) : /* @__PURE__ */ jsx(
+        Image,
+        {
+          alt: name,
+          width: "auto",
+          height: "100%",
+          src,
+          onError: handleError,
+          m: 0
+        }
+      )
+    }
+  );
+};
+var Avatar_default = memo(Avatar);
+
+// src/constants.ts
+var AvatarColorOptions = {
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange"
+};
+
+// src/index.ts
+var src_default = Avatar_default;
+export {
+  Avatar_default as Avatar,
+  AvatarColorOptions,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          alt={name}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}

package/dist/index.d.mts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeContainerProps } from '@sproutsocial/seeds-react-box';
+
+declare const AvatarColorOptions: {
+    readonly auto: "auto";
+    readonly neutral: "neutral";
+    readonly purple: "purple";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly orange: "orange";
+};
+
+type TypeAvatarType = keyof typeof AvatarColorOptions;
+interface TypeAvatarProps extends TypeContainerProps {
+    /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
+    appearance?: "circle" | "leaf";
+    /** The name of the user that the avatar represents */
+    name?: string;
+    /** The initials of the user that the avatar represents.
+     *  If not provided, the first letter of the first 1-2 words of the `name` prop will be used. */
+    initials?: string;
+    /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
+    src?: string;
+    type?: TypeAvatarType;
+    size?: string;
+}
+interface TypeAvatarContainerProps extends TypeContainerProps {
+    $type: TypeAvatarType;
+    $displayFallback: boolean;
+}
+
+declare const _default: react.MemoExoticComponent<({ appearance, name, src, type, size, bg, color, initials, ...rest }: TypeAvatarProps) => react_jsx_runtime.JSX.Element>;
+
+export { _default as Avatar, AvatarColorOptions, type TypeAvatarContainerProps, type TypeAvatarProps, type TypeAvatarType, _default as default };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeContainerProps } from '@sproutsocial/seeds-react-box';
+
+declare const AvatarColorOptions: {
+    readonly auto: "auto";
+    readonly neutral: "neutral";
+    readonly purple: "purple";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly orange: "orange";
+};
+
+type TypeAvatarType = keyof typeof AvatarColorOptions;
+interface TypeAvatarProps extends TypeContainerProps {
+    /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
+    appearance?: "circle" | "leaf";
+    /** The name of the user that the avatar represents */
+    name?: string;
+    /** The initials of the user that the avatar represents.
+     *  If not provided, the first letter of the first 1-2 words of the `name` prop will be used. */
+    initials?: string;
+    /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
+    src?: string;
+    type?: TypeAvatarType;
+    size?: string;
+}
+interface TypeAvatarContainerProps extends TypeContainerProps {
+    $type: TypeAvatarType;
+    $displayFallback: boolean;
+}
+
+declare const _default: react.MemoExoticComponent<({ appearance, name, src, type, size, bg, color, initials, ...rest }: TypeAvatarProps) => react_jsx_runtime.JSX.Element>;
+
+export { _default as Avatar, AvatarColorOptions, type TypeAvatarContainerProps, type TypeAvatarProps, type TypeAvatarType, _default as default };

package/dist/index.js

@@ -0,0 +1,170 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Avatar: () => Avatar_default,
+  AvatarColorOptions: () => AvatarColorOptions,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Avatar.tsx
+var import_react = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_image = __toESM(require("@sproutsocial/seeds-react-image"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultType = "neutral";
+var AvatarText = (0, import_styled_components.default)(({ fontSize, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { ...rest }))`
+  font-size: ${(props) => props.fontSize}px;
+  color: ${({ theme, type, color }) => color ? color : theme.colors.text.decorative[type]};
+`;
+var Container = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  ${({ theme, $type, bg, borderColor, $displayFallback }) => import_styled_components.css`
+    background: ${$displayFallback ? bg ? bg : theme.colors.container.background.decorative[$type] : "none"};
+    border: ${$displayFallback ? `1px solid` : "none"};
+    border-color: ${borderColor ? borderColor : theme.colors.container.border.decorative[$type]};
+    color: ${theme.colors.text.decorative[$type]};
+  `}
+
+  ${import_seeds_react_system_props.BORDER}
+`;
+var getInitials = (name, fallback = "?") => {
+  if (!name || typeof name !== "string")
+    return fallback;
+  return name.replace(/\s+/, " ").split(" ").slice(0, 2).map((v) => v && v[0]?.toUpperCase()).join("");
+};
+var getAvatarColor = (name, type) => {
+  if (type !== "auto") {
+    return type;
+  }
+  const colors = [
+    "purple",
+    "green",
+    "blue",
+    "yellow",
+    "red",
+    "orange"
+  ];
+  const seed = name.split("").reduce((seed2, char) => {
+    return seed2 + char.charCodeAt(0);
+  }, 0);
+  return colors[seed % colors.length] || "neutral";
+};
+var Avatar = ({
+  appearance = "circle",
+  name = "",
+  src,
+  type = defaultType,
+  size = "40px",
+  bg,
+  color,
+  initials,
+  ...rest
+}) => {
+  const colorType = getAvatarColor(name, type);
+  const [imageFailedLoading, setImageFailedLoading] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setImageFailedLoading(false);
+  }, [src]);
+  const displayInitials = (0, import_react.useMemo)(
+    () => initials || getInitials(name),
+    [initials, name]
+  );
+  const handleError = (0, import_react.useCallback)(() => {
+    setImageFailedLoading(true);
+  }, [setImageFailedLoading]);
+  const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Container,
+    {
+      size,
+      overflow: "hidden",
+      borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
+      position: "relative",
+      display: "flex",
+      flexShrink: 0,
+      justifyContent: "center",
+      alignItems: "center",
+      title: name,
+      bg,
+      $type: colorType,
+      "data-qa-user-avatar": name,
+      $displayFallback: !src || imageFailedLoading,
+      ...rest,
+      children: !src || imageFailedLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AvatarText,
+        {
+          lineHeight: size,
+          fontWeight: "semibold",
+          fontSize,
+          type: colorType,
+          color,
+          children: displayInitials
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_seeds_react_image.default,
+        {
+          alt: name,
+          width: "auto",
+          height: "100%",
+          src,
+          onError: handleError,
+          m: 0
+        }
+      )
+    }
+  );
+};
+var Avatar_default = (0, import_react.memo)(Avatar);
+
+// src/constants.ts
+var AvatarColorOptions = {
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange"
+};
+
+// src/index.ts
+var src_default = Avatar_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  AvatarColorOptions
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeAvatarProps,\n  TypeAvatarContainerProps,\n  TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n  font-size: ${(props) => props.fontSize}px;\n  color: ${({ theme, type, color }) =>\n    color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n    background: ${$displayFallback\n      ? bg\n        ? bg\n        : theme.colors.container.background.decorative[$type]\n      : \"none\"};\n    border: ${$displayFallback ? `1px solid` : \"none\"};\n    border-color: ${borderColor\n      ? borderColor\n      : theme.colors.container.border.decorative[$type]};\n    color: ${theme.colors.text.decorative[$type]};\n  `}\n\n  ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n  if (!name || typeof name !== \"string\") return fallback;\n  return name\n    .replace(/\\s+/, \" \")\n    .split(\" \") // Repeated spaces results in empty strings\n    .slice(0, 2)\n    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n    .join(\"\");\n};\n\nexport const getAvatarColor = (\n  name: string,\n  type: TypeAvatarType\n): TypeAvatarType => {\n  if (type !== \"auto\") {\n    return type;\n  }\n\n  const colors: Array<TypeAvatarType> = [\n    \"purple\",\n    \"green\",\n    \"blue\",\n    \"yellow\",\n    \"red\",\n    \"orange\",\n  ];\n\n  // Condense the avatar name down into a number\n  const seed = name.split(\"\").reduce((seed, char) => {\n    return seed + char.charCodeAt(0);\n  }, 0);\n\n  // Use that seed modulo the number of available colors to generate\n  // a \"random\" color value which will always be consistent\n  // for a given string. As a failsafe, return neutral (this should never happen).\n  return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n  appearance = \"circle\",\n  name = \"\",\n  src,\n  type = defaultType,\n  size = \"40px\",\n  bg,\n  color,\n  initials,\n  ...rest\n}: TypeAvatarProps) => {\n  const colorType = getAvatarColor(name, type);\n  const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n  useEffect(() => {\n    // If the src changes, we need to invalidate the image failed to load flag\n    setImageFailedLoading(false);\n  }, [src]);\n\n  const displayInitials = useMemo(\n    () => initials || getInitials(name),\n    [initials, name]\n  );\n  const handleError = useCallback(() => {\n    setImageFailedLoading(true);\n  }, [setImageFailedLoading]);\n\n  // Font size for initials is half the size of the avatar, rounded down.\n  const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n  return (\n    <Container\n      size={size}\n      overflow=\"hidden\"\n      borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n      position=\"relative\"\n      display=\"flex\"\n      flexShrink={0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      title={name}\n      bg={bg}\n      $type={colorType}\n      data-qa-user-avatar={name}\n      $displayFallback={!src || imageFailedLoading}\n      {...rest}\n    >\n      {!src || imageFailedLoading ? (\n        <AvatarText\n          lineHeight={size}\n          fontWeight=\"semibold\"\n          fontSize={fontSize}\n          type={colorType}\n          color={color}\n        >\n          {displayInitials}\n        </AvatarText>\n      ) : (\n        <Image\n          alt={name}\n          width=\"auto\"\n          height=\"100%\"\n          src={src}\n          onError={handleError}\n          m={0}\n        />\n      )}\n    </Container>\n  );\n};\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n  auto: \"auto\",\n  neutral: \"neutral\",\n  purple: \"purple\",\n  green: \"green\",\n  blue: \"blue\",\n  yellow: \"yellow\",\n  red: \"red\",\n  orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-avatar",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sproutsocial/seeds-react-avatar",
+  "version": "1.0.0",
+  "description": "Seeds React Avatar",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-image": "*",
+    "@sproutsocial/seeds-react-text": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Avatar.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Avatar from "./Avatar";
+
+const meta: Meta<typeof Avatar> = {
+  title: "Components/Avatar",
+  component: Avatar,
+};
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    name: "Kent C. Dodds",
+  },
+};
+
+export const CustomColors: Story = {
+  args: {
+    ...Default.args,
+    bg: "purple.500",
+    color: "red.200",
+    borderColor: "green",
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    ...Default.args,
+    src: "https://github.com/kentcdodds.png",
+  },
+};
+
+export const Leaf: Story = {
+  args: {
+    ...Default.args,
+    ...WithImage.args,
+    appearance: "leaf",
+  },
+};
+
+export const WithAutoColors: Story = {
+  args: {
+    type: "auto",
+    appearance: "leaf",
+  },
+  render: (args) => (
+    <>
+      <Avatar mt={400} name="Justyn Howard" {...args} />
+      <Avatar mt={400} name="Aaron Rankin" {...args} />
+      <Avatar mt={400} name="Gil Lara" {...args} />
+      <Avatar mt={400} name="Pete Soung" {...args} />
+    </>
+  ),
+};

package/src/Avatar.tsx

@@ -0,0 +1,149 @@
+import { useState, useCallback, useMemo, memo, useEffect } from "react";
+import styled, { css } from "styled-components";
+
+import Box from "@sproutsocial/seeds-react-box";
+import Image from "@sproutsocial/seeds-react-image";
+import Text from "@sproutsocial/seeds-react-text";
+import type {
+  TypeAvatarProps,
+  TypeAvatarContainerProps,
+  TypeAvatarType,
+} from "./AvatarTypes";
+
+import { BORDER } from "@sproutsocial/seeds-react-system-props";
+
+const defaultType = "neutral";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`
+  font-size: ${(props) => props.fontSize}px;
+  color: ${({ theme, type, color }) =>
+    color ? color : theme.colors.text.decorative[type]};
+`;
+
+const Container = styled(Box)<TypeAvatarContainerProps>`
+  ${({ theme, $type, bg, borderColor, $displayFallback }) => css`
+    background: ${$displayFallback
+      ? bg
+        ? bg
+        : theme.colors.container.background.decorative[$type]
+      : "none"};
+    border: ${$displayFallback ? `1px solid` : "none"};
+    border-color: ${borderColor
+      ? borderColor
+      : theme.colors.container.border.decorative[$type]};
+    color: ${theme.colors.text.decorative[$type]};
+  `}
+
+  ${BORDER}
+`;
+
+const getInitials = (name: string, fallback = "?"): string => {
+  if (!name || typeof name !== "string") return fallback;
+  return name
+    .replace(/\s+/, " ")
+    .split(" ") // Repeated spaces results in empty strings
+    .slice(0, 2)
+    .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings
+    .join("");
+};
+
+export const getAvatarColor = (
+  name: string,
+  type: TypeAvatarType
+): TypeAvatarType => {
+  if (type !== "auto") {
+    return type;
+  }
+
+  const colors: Array<TypeAvatarType> = [
+    "purple",
+    "green",
+    "blue",
+    "yellow",
+    "red",
+    "orange",
+  ];
+
+  // Condense the avatar name down into a number
+  const seed = name.split("").reduce((seed, char) => {
+    return seed + char.charCodeAt(0);
+  }, 0);
+
+  // Use that seed modulo the number of available colors to generate
+  // a "random" color value which will always be consistent
+  // for a given string. As a failsafe, return neutral (this should never happen).
+  return colors[seed % colors.length] || "neutral";
+};
+
+export const Avatar = ({
+  appearance = "circle",
+  name = "",
+  src,
+  type = defaultType,
+  size = "40px",
+  bg,
+  color,
+  initials,
+  ...rest
+}: TypeAvatarProps) => {
+  const colorType = getAvatarColor(name, type);
+  const [imageFailedLoading, setImageFailedLoading] = useState(false);
+
+  useEffect(() => {
+    // If the src changes, we need to invalidate the image failed to load flag
+    setImageFailedLoading(false);
+  }, [src]);
+
+  const displayInitials = useMemo(
+    () => initials || getInitials(name),
+    [initials, name]
+  );
+  const handleError = useCallback(() => {
+    setImageFailedLoading(true);
+  }, [setImageFailedLoading]);
+
+  // Font size for initials is half the size of the avatar, rounded down.
+  const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
+
+  return (
+    <Container
+      size={size}
+      overflow="hidden"
+      borderRadius={appearance === "leaf" ? "40% 0 40% 0" : "50%"}
+      position="relative"
+      display="flex"
+      flexShrink={0}
+      justifyContent="center"
+      alignItems="center"
+      title={name}
+      bg={bg}
+      $type={colorType}
+      data-qa-user-avatar={name}
+      $displayFallback={!src || imageFailedLoading}
+      {...rest}
+    >
+      {!src || imageFailedLoading ? (
+        <AvatarText
+          lineHeight={size}
+          fontWeight="semibold"
+          fontSize={fontSize}
+          type={colorType}
+          color={color}
+        >
+          {displayInitials}
+        </AvatarText>
+      ) : (
+        <Image
+          alt={name}
+          width="auto"
+          height="100%"
+          src={src}
+          onError={handleError}
+          m={0}
+        />
+      )}
+    </Container>
+  );
+};
+export default memo(Avatar);

package/src/AvatarTypes.ts

@@ -0,0 +1,26 @@
+import type { TypeContainerProps as TypeBoxContainerProps } from "@sproutsocial/seeds-react-box";
+import { AvatarColorOptions } from "./constants";
+
+export type TypeAvatarType = keyof typeof AvatarColorOptions;
+
+// @ts-note: Docs indicate that only common props are accepted, but the Avatar component uses a Box component. We may want to update the docs to accurately reflect the real functionality.
+export interface TypeAvatarProps extends TypeBoxContainerProps {
+  /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
+  appearance?: "circle" | "leaf";
+
+  /** The name of the user that the avatar represents */
+  name?: string;
+  /** The initials of the user that the avatar represents.
+   *  If not provided, the first letter of the first 1-2 words of the `name` prop will be used. */
+  initials?: string;
+
+  /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
+  src?: string;
+  type?: TypeAvatarType;
+  size?: string;
+}
+
+export interface TypeAvatarContainerProps extends TypeBoxContainerProps {
+  $type: TypeAvatarType;
+  $displayFallback: boolean;
+}

package/src/__tests__/Avatar.typetest.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Avatar from "../Avatar";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function AvatarTypes() {
+  const imgSrc = "https://github.com/kentcdodds.png";
+  return (
+    <>
+      <Avatar name="" />
+      <Avatar name="John Doe" />
+      <Avatar name="John Doe" src="" />
+      <Avatar name="John Doe" src={imgSrc} />
+      <Avatar name="John Doe" appearance="leaf" />
+      <Avatar name="John Doe" size="100px" />
+      <Avatar name="John Doe" type="blue" />
+      <Avatar name="John Doe" initials="JDD" />
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <Avatar name="John Doe" type="invalid" />
+      {/* @ts-expect-error - test that invalid src is rejected */}
+      <Avatar name="John Doe" src={123} />
+      <Avatar
+        name="John Doe"
+        // @ts-expect-error - test that invalid appearance is rejected
+        appearance="invalid"
+      />
+      <Avatar
+        name="John Doe"
+        // @ts-expect-error - test that invalid size is rejected
+        size={123}
+      />
+    </>
+  );
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,161 @@
+import { useState } from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import Avatar from "../Avatar";
+
+// This top level describe should be used to describe the component and what we are testing
+describe("Avatar/features", () => {
+  // Each describe should describe an intentional feature of the component
+
+  describe("When an image is provided", () => {
+    // Each test should describe the expected behavior of the feature and its fallbacks
+    it("should render an image correctly", () => {
+      const imgSrc = "https://github.com/kentcdodds.png";
+      render(<Avatar name="John Doe" src={imgSrc} />);
+      const image = screen.getByAltText("John Doe");
+      expect(image).toHaveAttribute("src", imgSrc);
+    });
+
+    it("should not render initials", () => {
+      const imgSrc = "https://github.com/kentcdodds.png";
+      render(<Avatar name="John Doe" src={imgSrc} />);
+      const initials = screen.queryByText("JD");
+      expect(initials).not.toBeInTheDocument();
+    });
+
+    it("should render initials when image fails to load", () => {
+      render(<Avatar name="John Doe" src="" />);
+      // TODO: figure out a better way to mock image failures...
+      const image = screen.queryByRole("img");
+      const initials = screen.getByText("JD");
+      expect(image).not.toBeInTheDocument();
+      expect(initials).toBeInTheDocument();
+    });
+
+    it("should render custom initials when provided + image fails to load", () => {
+      render(<Avatar name="John Doe" src="" initials="JRD" />);
+      const image = screen.queryByRole("img");
+      const initials = screen.getByText("JRD");
+      const defaultInitials = screen.queryByText("JD");
+      expect(image).not.toBeInTheDocument();
+      expect(initials).toBeInTheDocument();
+      expect(defaultInitials).not.toBeInTheDocument();
+    });
+
+    it("should render as circle by default", () => {
+      render(<Avatar name="John Doe" />);
+      const avatar = screen.getByTitle("John Doe");
+      expect(avatar).toHaveStyleRule("border-radius", "50%");
+    });
+
+    it('should render as a leaf when appearance="leaf" ', () => {
+      render(<Avatar name="John Doe" appearance="leaf" />);
+      const avatar = screen.getByTitle("John Doe");
+      expect(avatar).toHaveStyleRule("border-radius", "40% 0 40% 0");
+    });
+
+    it("should render 40px by default", () => {
+      render(<Avatar name="John Doe" />);
+      const avatar = screen.getByTitle("John Doe");
+      expect(avatar).toHaveStyleRule("width", "40px");
+      expect(avatar).toHaveStyleRule("height", "40px");
+    });
+
+    it("should render an image correctly after an image fails to load", async () => {
+      const imgSrc =
+        "https://static01.nyt.com/images/2022/10/24/arts/24taylor-notebook3/24taylor-notebook3-superJumbo.jpg";
+      const name = "Taylor Swift";
+      const buttonName = "My Button";
+      const TestComponent = () => {
+        const [srcString, setSrcString] = useState("mybadimageurl.coco");
+        return (
+          <div>
+            <Avatar name={name} src={srcString} />
+            <button onClick={() => setSrcString(imgSrc)}>{buttonName}</button>
+          </div>
+        );
+      };
+      const { user } = render(<TestComponent />);
+
+      const firstImage = screen.getByDataQaLabel({ image: name });
+      fireEvent.error(firstImage);
+      const initials = await screen.findByText("TS");
+      expect(initials).toBeInTheDocument();
+
+      const myButton = screen.getByText(buttonName);
+      await act(async () => {
+        await user.click(myButton);
+      });
+      const secondImage = screen.getByAltText("Taylor Swift");
+      expect(secondImage).toHaveAttribute("src", imgSrc);
+    });
+  });
+
+  describe("When no image is provided", () => {
+    it("should render initials correctly", () => {
+      render(<Avatar name="John Doe" />);
+      const initials = screen.getByText("JD");
+      expect(initials).toBeInTheDocument();
+    });
+
+    it("should render single initial if only 1 name given", () => {
+      render(<Avatar name="John" />);
+      const singleInitial = screen.getByText("J");
+      expect(singleInitial).toBeInTheDocument();
+    });
+
+    it("should display first 2 initials if >3 names are provided", () => {
+      render(<Avatar name="John Doe Smith" />);
+      const initials = screen.getByText("JD");
+      expect(initials).toBeInTheDocument();
+    });
+
+    it('should render a "?" as a fallback if no name is provided', () => {
+      render(<Avatar name="" />);
+      const fallback = screen.getByText("?");
+      const initials = screen.queryByText("JD");
+      expect(fallback).toBeInTheDocument();
+      expect(initials).not.toBeInTheDocument();
+    });
+
+    it("should render custom initials even if no name is provided", () => {
+      render(<Avatar name="" initials="SU" />);
+      const fallback = screen.queryByText("?");
+      const initials = screen.getByText("SU");
+      expect(fallback).not.toBeInTheDocument();
+      expect(initials).toBeInTheDocument();
+    });
+  });
+
+  describe("When a user wants to customize Avatar", () => {
+    it("should be able to the size of Avatar", () => {
+      render(<Avatar name="John Doe" size="100px" />);
+      const avatar = screen.getByTitle("John Doe");
+      expect(avatar).toHaveStyleRule("width", "100px");
+      expect(avatar).toHaveStyleRule("height", "100px");
+    });
+
+    // Should we even test stuff like this? What's the best way for us to test intentional overrides we provide that are not a default behavior?
+    it("should render different color background when type prop is used", () => {
+      render(<Avatar name="John Doe" type="blue" />);
+      const avatar = screen.getByTitle("John Doe");
+      expect(avatar).toHaveStyleRule("background", `#deebfe`);
+    });
+  });
+
+  it("should allow border thickness to changed to 2px", () => {
+    render(<Avatar name="John Doe" border={600} />);
+    const avatar = screen.getByTitle("John Doe");
+    expect(avatar).toHaveStyleRule("border", "2px solid");
+  });
+
+  it("should allow border thickness to changed to 3px", () => {
+    render(<Avatar name="John Doe" border={700} />);
+    const avatar = screen.getByTitle("John Doe");
+    expect(avatar).toHaveStyleRule("border", "3px solid");
+  });
+});

package/src/constants.ts

@@ -0,0 +1,10 @@
+export const AvatarColorOptions = {
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange",
+} as const;

package/src/index.ts

@@ -0,0 +1,6 @@
+import Avatar from "./Avatar";
+
+export default Avatar;
+export { Avatar };
+export * from "./AvatarTypes";
+export { AvatarColorOptions } from "./constants";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));