Add identicon

jest.config.cjs

@@ -0,0 +1,6 @@
+const config = {
+  transformIgnorePatterns: ['node_modules/(?!minidenticons)'],
+  testEnvironment: 'jsdom',
+};
+
+module.exports = config;

package.json

@@ -3,9 +3,6 @@
   "version": "0.0.3",
   "type": "module",
   "files": ["src", "presets"],
-  "jest": {
-    "testEnvironment": "jsdom"
-  },
   "main": "src/index.ts",
   "style": "src/global.css",
   "scripts": {
@@ -22,6 +19,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "minidenticons": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",

src/components/Identicon/Identicon.stories.tsx

@@ -0,0 +1,14 @@
+import { Identicon } from './Identicon';
+
+export default { title: 'Components/Identicon' };
+
+export const _Identicon = {
+  render: () => (
+    <>
+      <Identicon size={32} username="test" />
+      <Identicon size={48} username="test2" saturation={70} />
+      <Identicon size={64} username="test3" lightness={20} />
+      <Identicon size={128} username="test4" saturation={95} lightness={30} />
+    </>
+  ),
+};

src/components/Identicon/Identicon.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Identicon } from '.';
+
+describe('Components | Fields | Identicon', () => {
+  test('it should render', () => {
+    render(<Identicon username="test" />);
+
+    let identicon = screen.getByTestId('identicon');
+
+    expect(identicon).toBeInTheDocument();
+  });
+});

src/components/Identicon/Identicon.tsx

@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+
+import { ComponentPropsWithoutRef, useMemo } from 'react';
+
+import { identicon } from 'minidenticons';
+
+export interface IdenticonProps extends ComponentPropsWithoutRef<'img'> {
+  username: string;
+  size?: number;
+  saturation?: number;
+  lightness?: number;
+  customClass?: string;
+}
+
+export function Identicon(props: IdenticonProps) {
+  const { username, size, saturation, lightness, customClass, ...rest } = props;
+
+  const computedSize = size?.toString() || '64';
+
+  const svgURI = useMemo(
+    () =>
+      'data:image/svg+xml;utf8,' +
+      encodeURIComponent(identicon(username, saturation, lightness)),
+    [username, saturation, lightness],
+  );
+
+  return (
+    <img
+      data-testid="identicon"
+      className={`bg-neutral rounded-full ${customClass}`}
+      src={svgURI}
+      alt={username}
+      {...rest}
+      width={computedSize}
+      height={computedSize}
+    />
+  );
+}

src/components/Identicon/index.ts

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