feat: implement avatar component

src/static/icons/index.ts

@@ -10,3 +10,4 @@ export { default as IconEyeOpened } from './eye-opened.svg';
 export { default as IconPlus } from './plus.svg';
 export { default as IconSearch } from './search.svg';
 export { default as IconFilledUnchecked } from './check-filled-unchecked.svg';
+export { default as IconProfile } from './profile.svg';

src/ui/atoms/avatar/index.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import styled, { StyledComponent, css } from 'styled-components';
+import { IconProfile } from 'static/icons';
+import { Variant } from 'lib/types';
+
+import { useImageLoad } from './use-image-load';
+
+interface Size {
+  size?: 'default' | 'small';
+}
+
+const AvatarContainer = styled.div.attrs(({ size }: Size) => ({
+  'data-size': size ?? 'default',
+}))`
+  --local-size: 68px;
+
+  &[data-size='small'] {
+    --local-size: 30px;
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--local-size);
+  height: var(--local-size);
+` as StyledComponent<'div', Record<string, unknown>, Size>;
+
+const imgStyles = css`
+  --local-border-radius: 50%;
+
+  width: 100%;
+  height: 100%;
+
+  border-radius: var(--local-border-radius);
+`;
+
+const AvatarImage = styled.img`
+  ${imgStyles}
+`;
+
+const FallbackContainer = styled.div.attrs(({ size, variant }: Size & Variant) => ({
+  'data-size': size ?? 'default',
+  'data-variant': variant ?? 'default',
+}))`
+  --local-shape-color: var(--woly-shape-text-disabled);
+  --local-svg-size: 36px;
+
+  &[data-size='small'] {
+    --local-svg-size: 24px;
+  }
+
+  ${imgStyles}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(--local-shape-color);
+
+  & > svg {
+    width: var(--local-svg-size);
+    height: var(--local-svg-size);
+  }
+` as StyledComponent<'div', Record<string, unknown>, Size & Variant>;
+
+interface AvatarProps {
+  alt?: string;
+  src?: string;
+  srcSet?: string;
+  children?: React.ReactNode;
+}
+
+export const Avatar: React.FC<AvatarProps & Size & Variant> = ({
+  alt,
+  src,
+  srcSet,
+  size = 'default',
+  variant = 'default',
+  children: childrenProp,
+}) => {
+  const loadFailed = useImageLoad({ src, srcSet });
+  const hasImg = src || srcSet;
+  let children = null;
+
+  if (hasImg && !loadFailed) {
+    children = <AvatarImage alt={alt} src={src} srcSet={srcSet} />;
+  } else if (childrenProp) {
+    children = childrenProp;
+  } else {
+    // render fallback if image loading failed or no src attributes / children provided
+    children = (
+      <FallbackContainer variant={variant} size={size}>
+        <IconProfile />
+      </FallbackContainer>
+    );
+  }
+
+  return <AvatarContainer size={size}>{children}</AvatarContainer>;
+};

src/ui/atoms/avatar/usage.mdx

@@ -0,0 +1,35 @@
+---
+name: avatar
+category: atoms
+package: woly
+---
+
+import {Avatar} from 'ui'
+import {Playground} from 'lib/playground'
+
+`Avatar` shows user avatar
+
+### Example
+
+<Playground>
+  <Avatar src="https://image.flaticon.com/icons/png/512/168/168726.png" />
+  <Avatar size="small" src="https://image.flaticon.com/icons/png/512/168/168726.png" />
+</Playground>
+
+### Fallback
+
+<Playground>
+  <Avatar src="http://broken.url/image" />
+  <Avatar size="small" src="http://broken.url/image" />
+</Playground>
+
+### Props
+
+| Name       | Type                     | Default     | Description                              |
+| ---------- | ------------------------ | ----------- | ---------------------------------------- |
+| `size`     | `'default'` or `'small'` | `'default'` | avatar size                              |
+| `src`      | `string`                 | `''`        | avatar src                               |
+| `srcSet`   | `string`                 | `''`        | avatar src set for multiple screen sizes |
+| `alt`      | `string`                 | `''`        | text description of the image            |
+| `variant`  | `string`                 | `'default'` | affetcs only avatar fallback color       |
+| `children` | `React.ReactNode`        | `undefined` | use if no src attributes provided        |

src/ui/atoms/avatar/use-image-load.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+export function useImageLoad({ src, srcSet }: { src?: string; srcSet?: string }) {
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!src && !srcSet) {
+      return;
+    }
+
+    setFailed(false);
+
+    let active = true;
+
+    const image = new Image();
+    image.src = src ?? '';
+    image.srcset = srcSet ?? '';
+
+    image.addEventListener('load', () => {
+      if (!active) {
+        return;
+      }
+      setFailed(false);
+    });
+
+    image.addEventListener('error', () => {
+      if (!active) {
+        return;
+      }
+      setFailed(true);
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [src, srcSet]);
+
+  return failed;
+}

src/ui/atoms/index.ts

@@ -15,3 +15,4 @@ export { Text } from './text';
 export { TextArea } from './text-area';
 export { Tooltip } from './tooltip';
 export { UploadArea } from './upload-area';
+export { Avatar } from './avatar';