Merge pull request #320 from code0-tech/feat/#271

New Avatar component

Author: nicosammito

package-lock.json

@@ -46,9 +46,11 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-image-snapshot": "^6.4.0",
     "merge-props": "^6.0.0",
+    "overlap-area": "^1.1.0",
     "playwright": "1.51.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-zoom-pan-pinch": "^3.7.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.34.8",
     "rollup-plugin-dts": "^6.1.1",
@@ -61,8 +63,7 @@
     "storybook": "^8.6.3",
     "style-loader": "^4.0.0",
     "typescript": "^5.7.3",
-    "overlap-area": "^1.1.0",
-    "react-zoom-pan-pinch": "^3.7.0"
+    "js-md5": "^0.8.3"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -74,10 +75,11 @@
     "@ariakit/react": "^0.4.5",
     "@tabler/icons-react": "^3.5.0",
     "merge-props": "^6.0.0",
+    "overlap-area": "^1.1.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-zoom-pan-pinch": "^3.6.1",
-    "overlap-area": "^1.1.0"
+    "js-md5": "^0.8.3"
   },
   "publishConfig": {
     "access": "public"

package.json

@@ -0,0 +1,19 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import Avatar from "./Avatar";
+import Flex from "../flex/Flex";
+
+const meta: Meta = {
+    title: "Avatar",
+    component: Avatar
+}
+
+export default meta
+
+export const AvatarExample = () => {
+    return <Flex style={{gap: ".35rem"}}>
+        <Avatar identifier={"nsammito@code0.tech"}/>
+        <Avatar src={"https://avatars.githubusercontent.com/u/60352747?v=4"}/>
+        <Avatar identifier={"rgoetz@code0.tech"}/>
+    </Flex>
+}

src/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,15 @@
+@import "../../styles/helpers";
+
+.avatar {
+  @include box(false);
+  aspect-ratio: 50 / 50;
+  padding: $xxs;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  &--image {
+    padding: 0;
+  }
+}

src/components/avatar/Avatar.style.scss

@@ -0,0 +1,99 @@
+import React from "react";
+import {Code0Component} from "../../utils/types";
+import {md5} from 'js-md5';
+import "./Avatar.style.scss"
+import {mergeCode0Props} from "../../utils/utils";
+
+interface AvatarImageProps {
+    src: string
+    size: number
+}
+
+interface AvatarIdenticonProps {
+    identifier: string
+    size: number
+}
+
+export interface AvatarProps extends Code0Component<HTMLDivElement> {
+    identifier?: string
+    src?: string
+    size?: number
+}
+
+const AvatarImage: React.FC<AvatarImageProps> = ({src, size}) => {
+    return <img src={src} width={size} height={size} alt="Avatar image"/>
+}
+
+const AvatarIdenticon: React.FC<AvatarIdenticonProps> = ({identifier, size}) => {
+    const canvas = React.useRef<HTMLCanvasElement>(null);
+
+    React.useEffect(() => {
+        updateCanvas()
+    })
+
+    const updateCanvas = () => {
+        const hash = md5(identifier)
+        const block = Math.floor(size / 5)
+        const hashColor = hash.slice(0, 6)
+
+        canvas.current!!.width = block * 5
+        canvas.current!!.height = block * 5
+
+        let arr = hash.split('').map((el: number | string) => {
+            el = parseInt(el as string, 16);
+            if (el < 8) {
+                return 0;
+            } else {
+                return 1;
+            }
+        });
+
+        let map = [];
+
+        map[0] = map[4] = arr.slice(0, 5);
+        map[1] = map[3] = arr.slice(5, 10);
+        map[2] = arr.slice(10, 15);
+
+        const ctx = canvas.current!!.getContext('2d');
+        ctx!!.imageSmoothingEnabled = false;
+        ctx!!.clearRect(0, 0, canvas.current!!.width, canvas.current!!.height);
+
+        map.forEach((row, i) => {
+            row.forEach((el, j) => {
+                if (el) {
+                    ctx!!.fillStyle = '#' + hashColor;
+                    ctx!!.fillRect(
+                        block * i,
+                        block * j,
+                        block,
+                        block
+                    );
+                } else {
+                    ctx!!.fillStyle = "transparent";
+                    ctx!!.fillRect(
+                        block * i,
+                        block * j,
+                        block,
+                        block
+                    );
+                }
+            });
+        });
+    };
+
+    return <canvas ref={canvas}/>
+}
+
+const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
+
+    const {identifier, src, size = 25, ...rest} = props
+
+    return <div {...mergeCode0Props(`avatar ${!identifier && src ? "avatar--image" : ""}`, rest)}>
+        {identifier ?
+            <AvatarIdenticon identifier={identifier} size={size}/> :
+            src ? <AvatarImage src={src} size={size + 13}/> : null
+        }
+    </div>
+}
+
+export default Avatar