From 1c34e840128cbde82f228ba3a6d64ad2a52fb2e2 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Thu, 1 Jun 2023 14:51:28 +0200 Subject: [PATCH 1/5] add identicon component --- package-lock.json | 14 +++++++++ package.json | 1 + src/components/Identicon/Identicon.tsx | 40 ++++++++++++++++++++++++++ src/components/Identicon/index.ts | 1 + 4 files changed, 56 insertions(+) create mode 100644 src/components/Identicon/Identicon.tsx create mode 100644 src/components/Identicon/index.ts diff --git a/package-lock.json b/package-lock.json index 1b25a358..79a9da15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "@massalabs/react-ui-kit", "version": "0.0.3", "dependencies": { + "minidenticons": "^3.1.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.8.0", @@ -13023,6 +13024,14 @@ "node": ">=4" } }, + "node_modules/minidenticons": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minidenticons/-/minidenticons-3.1.2.tgz", + "integrity": "sha512-UKMFgjagF6kZvGTV/SuMFLqvqvcnylBKLFRgpX3/1emp8zjLswZPaFbdslN81D+GsYNxwjxUkWRIo71cM3W0uA==", + "engines": { + "node": ">=15.14.0" + } + }, "node_modules/minimatch": { "version": "3.1.2", "license": "ISC", @@ -25115,6 +25124,11 @@ "version": "1.0.1", "dev": true }, + "minidenticons": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minidenticons/-/minidenticons-3.1.2.tgz", + "integrity": "sha512-UKMFgjagF6kZvGTV/SuMFLqvqvcnylBKLFRgpX3/1emp8zjLswZPaFbdslN81D+GsYNxwjxUkWRIo71cM3W0uA==" + }, "minimatch": { "version": "3.1.2", "requires": { diff --git a/package.json b/package.json index 16f5e065..d40cb48d 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "prepare": "husky install" }, "dependencies": { + "minidenticons": "^3.1.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.8.0", diff --git a/src/components/Identicon/Identicon.tsx b/src/components/Identicon/Identicon.tsx new file mode 100644 index 00000000..5bee0db7 --- /dev/null +++ b/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 const 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 ( + {username} + ); +}; diff --git a/src/components/Identicon/index.ts b/src/components/Identicon/index.ts new file mode 100644 index 00000000..ee18910d --- /dev/null +++ b/src/components/Identicon/index.ts @@ -0,0 +1 @@ +export * from './Identicon'; From 99a9b589f91a54ee3ea9ef9981c5d60fb87bbad7 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Thu, 1 Jun 2023 14:51:39 +0200 Subject: [PATCH 2/5] add identicon story --- src/components/Identicon/Identicon.stories.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/Identicon/Identicon.stories.tsx diff --git a/src/components/Identicon/Identicon.stories.tsx b/src/components/Identicon/Identicon.stories.tsx new file mode 100644 index 00000000..dca94a8b --- /dev/null +++ b/src/components/Identicon/Identicon.stories.tsx @@ -0,0 +1,14 @@ +import { Identicon } from './Identicon'; + +export default { title: 'Components/Identicon' }; + +export const _Identicon = { + render: () => ( + <> + + + + + + ), +}; From 0271a0634339b345184006f17a231c6150885ae5 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Thu, 1 Jun 2023 14:51:48 +0200 Subject: [PATCH 3/5] add identicon test --- jest.config.cjs | 6 ++++++ package.json | 3 --- src/components/Identicon/Identicon.test.tsx | 13 +++++++++++++ 3 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 jest.config.cjs create mode 100644 src/components/Identicon/Identicon.test.tsx diff --git a/jest.config.cjs b/jest.config.cjs new file mode 100644 index 00000000..8933c138 --- /dev/null +++ b/jest.config.cjs @@ -0,0 +1,6 @@ +const config = { + transformIgnorePatterns: ['node_modules/(?!minidenticons)'], + testEnvironment: 'jsdom', +}; + +module.exports = config; diff --git a/package.json b/package.json index d40cb48d..423dac69 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Identicon/Identicon.test.tsx b/src/components/Identicon/Identicon.test.tsx new file mode 100644 index 00000000..57f128e6 --- /dev/null +++ b/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(); + + let identicon = screen.getByTestId('identicon'); + + expect(identicon).toBeInTheDocument(); + }); +}); From 7f5d5d1bb9c22b482f9234adbdb7d74c5d19712d Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Thu, 1 Jun 2023 15:02:03 +0200 Subject: [PATCH 4/5] identicon: component is a function, not a const --- src/components/Identicon/Identicon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Identicon/Identicon.tsx b/src/components/Identicon/Identicon.tsx index 5bee0db7..b61e1f4c 100644 --- a/src/components/Identicon/Identicon.tsx +++ b/src/components/Identicon/Identicon.tsx @@ -14,7 +14,7 @@ export interface IdenticonProps extends ComponentPropsWithoutRef<'img'> { customClass?: string; } -export const Identicon = (props: IdenticonProps) => { +export function Identicon(props: IdenticonProps) { const { username, size, saturation, lightness, customClass, ...rest } = props; const computedSize = size?.toString() || '64'; @@ -37,4 +37,4 @@ export const Identicon = (props: IdenticonProps) => { height={computedSize} /> ); -}; +} From d26656ead1ef0ae0aee91e65c28b3a5c5dc30a40 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Thu, 1 Jun 2023 16:32:27 +0200 Subject: [PATCH 5/5] identicon: clean code --- src/components/Identicon/Identicon.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Identicon/Identicon.tsx b/src/components/Identicon/Identicon.tsx index b61e1f4c..88fba84e 100644 --- a/src/components/Identicon/Identicon.tsx +++ b/src/components/Identicon/Identicon.tsx @@ -15,9 +15,14 @@ export interface IdenticonProps extends ComponentPropsWithoutRef<'img'> { } export function Identicon(props: IdenticonProps) { - const { username, size, saturation, lightness, customClass, ...rest } = props; - - const computedSize = size?.toString() || '64'; + const { + username, + size = 64, + saturation, + lightness, + customClass, + ...rest + } = props; const svgURI = useMemo( () => @@ -32,9 +37,9 @@ export function Identicon(props: IdenticonProps) { className={`bg-neutral rounded-full ${customClass}`} src={svgURI} alt={username} + width={size.toString()} + height={size.toString()} {...rest} - width={computedSize} - height={computedSize} /> ); }