From 69e851335c89a37ec630fe7642030b12d1f0ca5c Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Sun, 28 Sep 2025 22:03:51 +0530 Subject: [PATCH 1/3] refactor: migrating identicon component to typescript --- src/components/cid/Cid.js | 2 +- src/components/identicon/Identicon.js | 10 ------- ...nticon.stories.js => identicon.stories.ts} | 25 ++++++----------- src/components/identicon/identicon.tsx | 27 +++++++++++++++++++ src/types/react-identicons.d.ts | 13 +++++++++ tsconfig.json | 2 ++ 6 files changed, 51 insertions(+), 28 deletions(-) delete mode 100644 src/components/identicon/Identicon.js rename src/components/identicon/{Identicon.stories.js => identicon.stories.ts} (65%) create mode 100644 src/components/identicon/identicon.tsx create mode 100644 src/types/react-identicons.d.ts diff --git a/src/components/cid/Cid.js b/src/components/cid/Cid.js index 29bf5014d..a77299414 100644 --- a/src/components/cid/Cid.js +++ b/src/components/cid/Cid.js @@ -1,5 +1,5 @@ import React from 'react' -import { Identicon } from '../identicon/Identicon.js' +import { Identicon } from '../identicon/identicon.js' import ErrorBoundary from '../error/error-boundary.jsx' export function cidStartAndEnd (value) { diff --git a/src/components/identicon/Identicon.js b/src/components/identicon/Identicon.js deleted file mode 100644 index ddd57a7b2..000000000 --- a/src/components/identicon/Identicon.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import ReactIdenticon from 'react-identicons' -import theme from 'ipfs-css/theme.json' - -const { colors } = theme -const identiconPalette = [colors.navy, colors.aqua, colors.gray, colors.charcoal, colors.red, colors.yellow, colors.teal, colors.green] - -export const Identicon = ({ size = 14, cid, className = 'v-btm' }) => - -export default Identicon diff --git a/src/components/identicon/Identicon.stories.js b/src/components/identicon/identicon.stories.ts similarity index 65% rename from src/components/identicon/Identicon.stories.js rename to src/components/identicon/identicon.stories.ts index e1ce55e4e..f590276ed 100644 --- a/src/components/identicon/Identicon.stories.js +++ b/src/components/identicon/identicon.stories.ts @@ -1,10 +1,8 @@ // @ts-check -import { Identicon } from './Identicon.js' +import type { Meta, StoryObj } from '@storybook/react' +import { Identicon, type IdenticonProps } from './identicon' -/** - * @type {import('@storybook/react').Meta} - */ -export default { +const meta = { title: 'Identicon', component: Identicon, parameters: { @@ -13,34 +11,27 @@ export default { handles: ['click'] } }, - argTypes: { - onClick: { action: 'clicked' } - }, args: { cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', className: 'ma2', size: 14 } -} +} satisfies Meta + +export default meta -/** - * @type {import('@storybook/react').StoryObj} - */ export const Default = { args: { cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', className: 'ma2', size: 14 } -} +} as StoryObj -/** - * @type {import('@storybook/react').StoryObj} - */ export const Large = { args: { cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', className: 'ma2', size: 64 } -} +} as StoryObj diff --git a/src/components/identicon/identicon.tsx b/src/components/identicon/identicon.tsx new file mode 100644 index 000000000..d027b8255 --- /dev/null +++ b/src/components/identicon/identicon.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import ReactIdenticon from 'react-identicons' +import theme from 'ipfs-css/theme.json' + +const { colors } = theme +const identiconPalette = [colors.navy, colors.aqua, colors.gray, colors.charcoal, colors.red, colors.yellow, colors.teal, colors.green] + +export interface IdenticonProps { + size?: number + cid: string + className?: string +} + +export const Identicon: React.FC = ({ + size = 14, + cid, + className = 'v-btm' +}) => ( + +) + +export default Identicon diff --git a/src/types/react-identicons.d.ts b/src/types/react-identicons.d.ts new file mode 100644 index 000000000..ce336a967 --- /dev/null +++ b/src/types/react-identicons.d.ts @@ -0,0 +1,13 @@ +declare module 'react-identicons' { + import { FC } from 'react' + + interface ReactIdenticonProps { + string: string + size?: number + palette?: string[] + className?: string + } + + const ReactIdenticon: FC + export default ReactIdenticon +} diff --git a/tsconfig.json b/tsconfig.json index 722f98599..d0a0e68f8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -97,6 +97,8 @@ "src/components/about-webui/AboutWebUI.js", "src/components/box/Box.js", "src/components/shell/Shell.js", + "src/components/identicon/identicon.tsx", + "src/components/identicon/identicon.stories.ts", "src/i18n-decorator.js", "src/i18n.js", "src/lib/i18n-localeParser.js" From 81342e14cff66fe36cb659e97458c61724312075 Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Sun, 28 Sep 2025 22:34:43 +0530 Subject: [PATCH 2/3] refactor: failing tests fix and improvements --- src/components/identicon/identicon.stories.ts | 37 ------------------- .../identicon/identicon.stories.tsx | 23 ++++++++++++ src/types/react-identicons.d.ts | 4 +- tsconfig.json | 2 +- 4 files changed, 26 insertions(+), 40 deletions(-) delete mode 100644 src/components/identicon/identicon.stories.ts create mode 100644 src/components/identicon/identicon.stories.tsx diff --git a/src/components/identicon/identicon.stories.ts b/src/components/identicon/identicon.stories.ts deleted file mode 100644 index f590276ed..000000000 --- a/src/components/identicon/identicon.stories.ts +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -import type { Meta, StoryObj } from '@storybook/react' -import { Identicon, type IdenticonProps } from './identicon' - -const meta = { - title: 'Identicon', - component: Identicon, - parameters: { - actions: { - disable: false, - handles: ['click'] - } - }, - args: { - cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', - className: 'ma2', - size: 14 - } -} satisfies Meta - -export default meta - -export const Default = { - args: { - cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', - className: 'ma2', - size: 14 - } -} as StoryObj - -export const Large = { - args: { - cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', - className: 'ma2', - size: 64 - } -} as StoryObj diff --git a/src/components/identicon/identicon.stories.tsx b/src/components/identicon/identicon.stories.tsx new file mode 100644 index 000000000..a970be4a7 --- /dev/null +++ b/src/components/identicon/identicon.stories.tsx @@ -0,0 +1,23 @@ +// @ts-check +import { Identicon } from './identicon' + +const meta = { + title: 'Identicon', + component: Identicon, + parameters: { + actions: { disable: false, handles: ['click'] } + }, + args: { + cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', + className: 'ma2', + size: 14 + } +} as const + +export default meta + +export const Default = {} + +export const Large = { + args: { size: 64 } +} diff --git a/src/types/react-identicons.d.ts b/src/types/react-identicons.d.ts index ce336a967..92b6a522e 100644 --- a/src/types/react-identicons.d.ts +++ b/src/types/react-identicons.d.ts @@ -1,13 +1,13 @@ declare module 'react-identicons' { import { FC } from 'react' - + interface ReactIdenticonProps { string: string size?: number palette?: string[] className?: string } - + const ReactIdenticon: FC export default ReactIdenticon } diff --git a/tsconfig.json b/tsconfig.json index d0a0e68f8..28c0040b4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -98,7 +98,7 @@ "src/components/box/Box.js", "src/components/shell/Shell.js", "src/components/identicon/identicon.tsx", - "src/components/identicon/identicon.stories.ts", + "src/components/identicon/identicon.stories.tsx", "src/i18n-decorator.js", "src/i18n.js", "src/lib/i18n-localeParser.js" From 2d99e33ffa19ee8950944ea12934f9c8426612d6 Mon Sep 17 00:00:00 2001 From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com> Date: Sun, 28 Sep 2025 23:13:34 +0530 Subject: [PATCH 3/3] refactor: migrating Cid component to typescript --- npm | 0 src/components/cid/Cid.js | 40 ------------------- src/components/cid/Cid.stories.js | 62 ------------------------------ src/components/cid/cid.stories.tsx | 37 ++++++++++++++++++ src/components/cid/cid.tsx | 57 +++++++++++++++++++++++++++ src/peers/PeersTable/PeersTable.js | 2 +- src/peers/WorldMap/WorldMap.js | 2 +- 7 files changed, 96 insertions(+), 104 deletions(-) create mode 100644 npm delete mode 100644 src/components/cid/Cid.js delete mode 100644 src/components/cid/Cid.stories.js create mode 100644 src/components/cid/cid.stories.tsx create mode 100644 src/components/cid/cid.tsx diff --git a/npm b/npm new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/cid/Cid.js b/src/components/cid/Cid.js deleted file mode 100644 index a77299414..000000000 --- a/src/components/cid/Cid.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import { Identicon } from '../identicon/identicon.js' -import ErrorBoundary from '../error/error-boundary.jsx' - -export function cidStartAndEnd (value) { - const chars = value.toString().split('') - if (chars.length <= 9) return value - const start = chars.slice(0, 4).join('') - const end = chars.slice(chars.length - 4).join('') - return { - value, - start, - end - } -} - -export function shortCid (value) { - const { start, end } = cidStartAndEnd(value) - return `${start}…${end}` -} - -const Cid = React.forwardRef(({ value, title, style, identicon = false, ...props }, ref) => { - style = Object.assign({}, { - textDecoration: 'none', - marginLeft: identicon ? '5px' : null - }, style) - const { start, end } = cidStartAndEnd(value) - return ( - - { identicon && null}> } - - {start} - … - {end} - - - ) -}) - -export default Cid diff --git a/src/components/cid/Cid.stories.js b/src/components/cid/Cid.stories.js deleted file mode 100644 index 6f02de7cf..000000000 --- a/src/components/cid/Cid.stories.js +++ /dev/null @@ -1,62 +0,0 @@ -import Cid from './Cid.js' - -/** - * @type {import('@storybook/react').Meta} - */ -const CidStory = { - title: 'CID', - component: Cid, - parameters: { - actions: { - disable: false - } - }, - argTypes: { - onClick: { action: 'clicked' } - } -} -export default CidStory - -/** - * @type {import('@storybook/react').StoryObj} - */ -export const CidV0 = { - args: { - className: 'db ma2 monospace', - value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', - identicon: false - } -} - -/** - * @type {import('@storybook/react').StoryObj} - */ -export const CidV0Identicon = { - args: { - className: 'db ma2 monospace', - value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', - identicon: true - } -} - -/** - * @type {import('@storybook/react').StoryObj} - */ -export const CidV1 = { - args: { - className: 'db ma2 monospace', - value: 'zb2rhZMC2PFynWT7oBj7e6BpDpzge367etSQi6ZUA81EVVCxG', - identicon: false - } -} - -/** - * @type {import('@storybook/react').StoryObj} - */ -export const CidV1Sha3 = { - args: { - className: 'db ma2 monospace', - value: 'zB7NbGN5wyfSbNNNwo3smZczHZutiWERdvWuMcHXTj393RnbhwsHjrP7bPDRPA79YWPbS69cZLWXSANcwUMmk4Rp3hP9Y', - identicon: false - } -} diff --git a/src/components/cid/cid.stories.tsx b/src/components/cid/cid.stories.tsx new file mode 100644 index 000000000..90b1e7019 --- /dev/null +++ b/src/components/cid/cid.stories.tsx @@ -0,0 +1,37 @@ +import Cid from './cid' + +const meta = { + title: 'CID', + component: Cid, + parameters: { + actions: { disable: false } + }, + argTypes: { + onClick: { action: 'clicked' } + }, + args: { + className: 'db ma2 monospace', + value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW', + identicon: false + } +} as const + +export default meta + +export const CidV0 = {} + +export const CidV0Identicon = { + args: { identicon: true } +} + +export const CidV1 = { + args: { + value: 'zb2rhZMC2PFynWT7oBj7e6BpDpzge367etSQi6ZUA81EVVCxG' + } +} + +export const CidV1Sha3 = { + args: { + value: 'zB7NbGN5wyfSbNNNwo3smZczHZutiWERdvWuMcHXTj393RnbhwsHjrP7bPDRPA79YWPbS69cZLWXSANcwUMmk4Rp3hP9Y' + } +} diff --git a/src/components/cid/cid.tsx b/src/components/cid/cid.tsx new file mode 100644 index 000000000..b42165381 --- /dev/null +++ b/src/components/cid/cid.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import { Identicon } from '../identicon/identicon.js' +import ErrorBoundary from '../error/error-boundary.js' + +export function cidStartAndEnd (value: string | { toString(): string }) { + const valueStr = value.toString() + const chars = value.toString().split('') + if (chars.length <= 9) { + return { + value: valueStr, + start: valueStr, + end: '' + } + } + const start = chars.slice(0, 4).join('') + const end = chars.slice(chars.length - 4).join('') + return { + value, + start, + end + } +} + +export function shortCid (value: string | { toString(): string }): string { + const { start, end } = cidStartAndEnd(value) + return `${start}…${end}` +} + +export interface CidProps { + value: string | { toString(): string } + title?: string + style?: React.CSSProperties + identicon?: boolean + className?: string + onClick?: () => void +} + +const Cid = React.forwardRef(({ value, title, style, identicon = false, ...props }, ref) => { + style = Object.assign({}, { + textDecoration: 'none', + marginLeft: identicon ? '5px' : null + }, style) + const { start, end } = cidStartAndEnd(value) + const displayTitle = title || value.toString() + return ( + + { identicon && null}> } + + {start} + … + {end} + + + ) +}) + +export default Cid diff --git a/src/peers/PeersTable/PeersTable.js b/src/peers/PeersTable/PeersTable.js index e63bdd9a8..a7ed3e1c7 100644 --- a/src/peers/PeersTable/PeersTable.js +++ b/src/peers/PeersTable/PeersTable.js @@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next' import { Table, Column, AutoSizer, SortDirection } from 'react-virtualized' import CountryFlag from 'react-country-flag' import { CopyToClipboard } from 'react-copy-to-clipboard' -import Cid from '../../components/cid/Cid.js' +import Cid from '../../components/cid/cid.js' import { sortByProperty } from '../../lib/sort.js' import './PeersTable.css' diff --git a/src/peers/WorldMap/WorldMap.js b/src/peers/WorldMap/WorldMap.js index b4b8b2c92..b7ce8b19c 100644 --- a/src/peers/WorldMap/WorldMap.js +++ b/src/peers/WorldMap/WorldMap.js @@ -13,7 +13,7 @@ import Popover from '../../components/popover/Popover.js' // Styles import './WorldMap.css' -import Cid from '../../components/cid/Cid.js' +import Cid from '../../components/cid/cid.js' const calculateWidth = (windowWidth) => { // the d3 generated svg width includes a lot of ocean, that we crop for now, as it looks weird.