@remember-web/primitive 0.2.5 → 0.2.6

package/dist/src/Avatars/Avatar/index.cjs.js

@@ -1,12 +1,17 @@
 "use client";
 'use strict';
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var icon = require('@remember-web/icon');
 var mixin = require('@remember-web/mixin');
 var react = require('react');
 var styles = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+
 var Avatar = function Avatar(_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
@@ -21,16 +26,23 @@ var Avatar = function Avatar(_ref, ref) {
     rounded = _ref$rounded === void 0 ? true : _ref$rounded,
     imageUrl = _ref.imageUrl,
     children = _ref.children;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    imageError = _useState2[0],
+    setImageError = _useState2[1];
   return /*#__PURE__*/jsxRuntime.jsx(styles.StyledAvatar, {
     ref: ref,
     $size: size,
     $backgroundColor: backgroundColor,
     $border: border,
     $rounded: rounded,
-    children: imageUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
+    children: !imageError && imageUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
       src: imageUrl,
       loading: "lazy",
-      alt: "avatar"
+      alt: "avatar",
+      onError: function onError() {
+        return setImageError(true);
+      }
     }) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsxRuntime.jsx(icon.IconAvatarEmpty, {
       size: "100%"
     })

package/dist/src/Avatars/Avatar/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => (\n  <StyledAvatar\n    ref={ref}\n    $size={size}\n    $backgroundColor={backgroundColor}\n    $border={border}\n    $rounded={rounded}\n  >\n    {imageUrl ? (\n      <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n    ) : (\n      children ?? <IconAvatarEmpty size=\"100%\" />\n    )}\n  </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef, useState } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => {\n  const [imageError, setImageError] = useState(false);\n  return (\n    <StyledAvatar\n      ref={ref}\n      $size={size}\n      $backgroundColor={backgroundColor}\n      $border={border}\n      $rounded={rounded}\n    >\n      {!imageError && imageUrl ? (\n        <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" onError={() => setImageError(true)} />\n      ) : (\n        children ?? <IconAvatarEmpty size=\"100%\" />\n      )}\n    </StyledAvatar>\n  )\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","children","src","loading","alt"],"mappings":";;;;;;;;;;;;;;AAcA;AAUK;AARDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;AAMF;;AAAOC;AAAYC;;AAGfC;AACAC;AACAC;AACAC;AACAC;AAAkBC;AAGXC;AAAeC;AAAeC;;;AAA+C;;AAErDf;;AAC9B;AAGP;AAEA;;"}

package/dist/src/Avatars/Avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AA4BlC,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAEhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AA+BlC,wBAAkC"}

package/dist/src/Avatars/Avatar/index.esm.js

@@ -1,7 +1,8 @@
 "use client";
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { IconAvatarEmpty } from '@remember-web/icon';
 import { bg200, divider } from '@remember-web/mixin';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { StyledAvatar } from './styles.esm.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -19,16 +20,23 @@ var Avatar = function Avatar(_ref, ref) {
     rounded = _ref$rounded === void 0 ? true : _ref$rounded,
     imageUrl = _ref.imageUrl,
     children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageError = _useState2[0],
+    setImageError = _useState2[1];
   return /*#__PURE__*/jsx(StyledAvatar, {
     ref: ref,
     $size: size,
     $backgroundColor: backgroundColor,
     $border: border,
     $rounded: rounded,
-    children: imageUrl ? /*#__PURE__*/jsx("img", {
+    children: !imageError && imageUrl ? /*#__PURE__*/jsx("img", {
       src: imageUrl,
       loading: "lazy",
-      alt: "avatar"
+      alt: "avatar",
+      onError: function onError() {
+        return setImageError(true);
+      }
     }) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsx(IconAvatarEmpty, {
       size: "100%"
     })

package/dist/src/Avatars/Avatar/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => (\n  <StyledAvatar\n    ref={ref}\n    $size={size}\n    $backgroundColor={backgroundColor}\n    $border={border}\n    $rounded={rounded}\n  >\n    {imageUrl ? (\n      <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n    ) : (\n      children ?? <IconAvatarEmpty size=\"100%\" />\n    )}\n  </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport { forwardRef, useState } from 'react';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => {\n  const [imageError, setImageError] = useState(false);\n  return (\n    <StyledAvatar\n      ref={ref}\n      $size={size}\n      $backgroundColor={backgroundColor}\n      $border={border}\n      $rounded={rounded}\n    >\n      {!imageError && imageUrl ? (\n        <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" onError={() => setImageError(true)} />\n      ) : (\n        children ?? <IconAvatarEmpty size=\"100%\" />\n      )}\n    </StyledAvatar>\n  )\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","children","src","loading","alt"],"mappings":";;;;;;;;AAcA;AAUK;AARDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;AAMF;;AAAOC;AAAYC;;AAGfC;AACAC;AACAC;AACAC;AACAC;AAAkBC;AAGXC;AAAeC;AAAeC;;;AAA+C;;AAErDf;;AAC9B;AAGP;AAEA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",

package/src/Avatars/Avatar/Avatar.stories.tsx

@@ -43,4 +43,13 @@ export const Default: Story = {
     backgroundColor: bg200,
   },
 };
+
+export const ErrorAvatar: Story = {
+  render: () => (
+    <>
+      <Avatar imageUrl='https://not-found-image-url.com' />
+    </>
+  )
+}
+
 export default meta;

package/src/Avatars/Avatar/index.tsx

@@ -3,7 +3,7 @@
 import { IconAvatarEmpty } from '@remember-web/icon';
 import { bg200, divider } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
 
 import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
@@ -22,20 +22,23 @@ const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
     children,
   }: AvatarProps,
   ref
-) => (
-  <StyledAvatar
-    ref={ref}
-    $size={size}
-    $backgroundColor={backgroundColor}
-    $border={border}
-    $rounded={rounded}
-  >
-    {imageUrl ? (
-      <img src={imageUrl} loading="lazy" alt="avatar" />
-    ) : (
-      children ?? <IconAvatarEmpty size="100%" />
-    )}
-  </StyledAvatar>
-);
+) => {
+  const [imageError, setImageError] = useState(false);
+  return (
+    <StyledAvatar
+      ref={ref}
+      $size={size}
+      $backgroundColor={backgroundColor}
+      $border={border}
+      $rounded={rounded}
+    >
+      {!imageError && imageUrl ? (
+        <img src={imageUrl} loading="lazy" alt="avatar" onError={() => setImageError(true)} />
+      ) : (
+        children ?? <IconAvatarEmpty size="100%" />
+      )}
+    </StyledAvatar>
+  )
+};
 
 export default forwardRef(Avatar);