@xylabs/react-identicon 7.1.16 → 7.1.20

package/README.md

@@ -1,67 +1,27 @@
-[![logo][]](https://xylabs.com)
-
 # @xylabs/react-identicon
 
-[![npm-badge][]][npm-link]
-[![npm-downloads-badge][]][npm-link]
-[![jsdelivr-badge][]][jsdelivr-link]
-[![npm-license-badge][]](LICENSE)
-
-> XY Labs generalized React library 
-
-## Table of Contents
+[![npm][npm-badge]][npm-link]
 
--   [Description](#description)
--   [Install](#install)
--   [Maintainers](#maintainers)
--   [License](#license)
--   [Credits](#credits)
-
-## Description
-
-Common React code that is used throughout XYO projects that use React.
+> Common React library for all XY Labs projects that use React
 
 ## Install
 
-Using npm:
-
 ```sh
-npm i --save @xylabs/react-identicon
+npm install {{name}}
 ```
 
-Using yarn:
+or
 
 ```sh
-yarn add @xylabs/react-identicon
+yarn add {{name}}
 ```
 
-## Documentation
-[Developer Reference](https://xylabs.github.io/sdk-react)
-
-[Storybook](https://xylabs.github.io/sdk-react/storybook)
-
-## Maintainers
-
--   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
--   [Matt Jones](https://github.com/jonesmac)
--   [Joel Carter](https://github.com/JoelBCarter)
--   [Jordan Trouw](https://github.com/jordantrouw)
 
 ## License
 
-See the [LICENSE](LICENSE) file for license details
+See the [LICENSE](LICENSE) file for license rights and limitations (LGPL-3.0-only).
 
-## Credits
 
-[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)
-
-[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
 
 [npm-badge]: https://img.shields.io/npm/v/@xylabs/react-identicon.svg
 [npm-link]: https://www.npmjs.com/package/@xylabs/react-identicon
-
-[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-identicon
-[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-identicon
-
-[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-identicon/badge
-[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-identicon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-identicon",
-  "version": "7.1.16",
+  "version": "7.1.20",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -27,41 +27,50 @@
   "exports": {
     ".": {
       "types": "./dist/browser/index.d.ts",
+      "import": "./dist/browser/index.mjs",
       "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
-  "module": "./dist/browser/index.mjs",
   "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "workspaces": [
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/react-flexbox": "~7.1.16",
-    "md5": "~2.3.0"
+    "md5": "~2.3.0",
+    "@xylabs/react-flexbox": "~7.1.20"
   },
   "devDependencies": {
-    "@mui/material": "~7.3.7",
+    "@opentelemetry/api": "^1",
     "@types/md5": "~2.3.6",
-    "@types/react": "^19.2.10",
-    "@xylabs/ts-scripts-yarn3": "~7.3.2",
-    "@xylabs/tsconfig": "~7.3.2",
-    "@xylabs/tsconfig-dom": "~7.3.2",
-    "@xylabs/tsconfig-react": "~7.3.2",
+    "@types/react": "^19.2.14",
+    "@xylabs/ts-scripts-common": "~7.8.5",
+    "@xylabs/ts-scripts-pnpm": "~7.8.5",
+    "@xylabs/tsconfig": "~7.8",
+    "@xylabs/tsconfig-dom": "~7.8.5",
+    "@xylabs/tsconfig-react": "~7.8.5",
+    "axios": "^1",
+    "pako": "~2.1.0",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "^5.9.3"
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "typescript": "^5.9.3",
+    "zod": "^4",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20"
   },
   "peerDependencies": {
-    "@mui/material": ">=6 <8",
+    "@opentelemetry/api": "^1",
+    "axios": "^1",
     "react": "^19",
-    "react-dom": "^19"
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "zod": "^4",
+    "@xylabs/react-async-effect": "~7.1.20"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Identicon.tsx

@@ -1,105 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import md5 from 'md5'
-import React, { useEffect, useRef } from 'react'
-
-const range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {
-  return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
-}
-
-export interface IdenticonProps extends FlexBoxProps {
-  bg?: string
-  className?: string
-  count?: number
-  fg?: string
-  iconPadding?: number
-  palette?: string[]
-  size?: number
-  value?: string
-}
-
-const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement | null>, props: IdenticonProps) => {
-  const {
-    value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0,
-  } = props
-  let { fg } = props
-  const hash = md5(value)
-  const block = Math.floor(size / count)
-  const hashColor = hash.slice(0, 6)
-
-  const current = canvas?.current
-
-  if (!current) {
-    return
-  }
-
-  if (palette && palette.length > 0) {
-    const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))
-    fg = palette[index]
-  }
-
-  current.width = block * count + iconPadding
-  current.height = block * count + iconPadding
-  const arr = [...hash].map((el) => {
-    const parsedEl = Number.parseInt(el, 16)
-    return parsedEl < 8 ? 0 : 1
-  })
-
-  const 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 = current.getContext('2d')
-  if (ctx) {
-    ctx.imageSmoothingEnabled = false
-    ctx.clearRect(0, 0, current.width, current.height)
-
-    for (const [i, row] of map.entries()) {
-      for (const [j, el] of row.entries()) {
-        if (el) {
-          ctx.fillStyle = fg ?? '#' + hashColor
-          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
-        } else {
-          ctx.fillStyle = bg
-          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
-        }
-      }
-    }
-  }
-}
-
-export const Identicon: React.FC<IdenticonProps> = ({
-  size = 400,
-  className = 'identicon',
-  bg,
-  count,
-  fg,
-  iconPadding,
-  palette,
-  value,
-  ...props
-}) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    updateCanvas(canvasRef, {
-      bg, className, count, fg, iconPadding, palette, size, value,
-    })
-  })
-
-  return (
-    <FlexRow {...props}>
-      {value
-        ? (
-            <canvas
-              className={className}
-              ref={canvasRef}
-              style={{ height: size, width: size }}
-            />
-          )
-        : null}
-    </FlexRow>
-  )
-}

package/src/components/index.ts

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

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.ts'