@xylabs/react-identicon 3.0.17 → 3.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +20 -49
  2. package/package.json +4 -4
  3. package/dist/browser/components/Identicon.cjs +0 -105
  4. package/dist/browser/components/Identicon.cjs.map +0 -1
  5. package/dist/browser/components/Identicon.js +0 -74
  6. package/dist/browser/components/Identicon.js.map +0 -1
  7. package/dist/browser/components/index.cjs +0 -107
  8. package/dist/browser/components/index.cjs.map +0 -1
  9. package/dist/browser/components/index.js +0 -74
  10. package/dist/browser/components/index.js.map +0 -1
  11. package/dist/node/components/Identicon.cjs +0 -109
  12. package/dist/node/components/Identicon.cjs.map +0 -1
  13. package/dist/node/components/Identicon.js +0 -74
  14. package/dist/node/components/Identicon.js.map +0 -1
  15. package/dist/node/components/index.cjs +0 -111
  16. package/dist/node/components/index.cjs.map +0 -1
  17. package/dist/node/components/index.js +0 -74
  18. package/dist/node/components/index.js.map +0 -1
package/README.md CHANGED
@@ -1,14 +1,11 @@
1
1
  [![logo][]](https://xylabs.com)
2
2
 
3
- # @xylabs/sdk-react
3
+ # @xylabs/react-identicon
4
4
 
5
- [![main-build][]][main-build-link]
6
- [![beta-build][]][beta-build-link]
7
5
  [![npm-badge][]][npm-link]
8
- [![bch-badge][]][bch-link]
9
- [![codacy-badge][]][codacy-link]
10
- [![codeclimate-badge][]][codeclimate-link]
11
- [![snyk-badge][]][snyk-link]
6
+ [![npm-downloads-badge][]][npm-link]
7
+ [![jsdelivr-badge][]][jsdelivr-link]
8
+ [![npm-license-badge][]](LICENSE)
12
9
 
13
10
  > XY Labs generalized React library
14
11
 
@@ -16,53 +13,39 @@
16
13
 
17
14
  - [Description](#description)
18
15
  - [Install](#install)
19
- - [Scripts](#scripts)
20
16
  - [Maintainers](#maintainers)
21
17
  - [License](#license)
22
18
  - [Credits](#credits)
23
19
 
24
20
  ## Description
25
21
 
26
- Common React code that is used throughtout XYO projects that use React.
22
+ Common React code that is used throughout XYO projects that use React.
27
23
 
28
24
  ## Install
29
25
 
30
26
  Using npm:
31
27
 
32
28
  ```sh
33
- npm i --save @xylabs/sdk-react
29
+ npm i --save @xylabs/react-identicon
34
30
  ```
35
31
 
36
32
  Using yarn:
37
33
 
38
34
  ```sh
39
- yarn add @xylabs/sdk-react
35
+ yarn add @xylabs/react-identicon
40
36
  ```
41
37
 
42
- ## Scripts
38
+ ## Documentation
39
+ [Developer Reference](https://xylabs.github.io/sdk-react)
43
40
 
44
- See [ts-scripts-yarn3](https://github.com/xylabs/ts-scripts-yarn3/blob/main/README.md) for
45
- list of shared scripts. The below scripts are custom scripts for this repo.
46
-
47
- ### Build (Storybook)
48
-
49
- Build the static Storybook site
50
-
51
- ```sh
52
- yarn build-storybook
53
- ```
54
-
55
- ### Start
56
-
57
- Starts the project in the browser for testing, with auto reload using Storybook
58
-
59
- ```sh
60
- yarn start
61
- ```
41
+ [Storybook](https://xylabs.github.io/sdk-react/storybook)
62
42
 
63
43
  ## Maintainers
64
44
 
65
- - [Arie Trouw](https://github.com/arietrouw) [arietrouw.com](https://arietrouw.com)
45
+ - [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
46
+ - [Matt Jones](https://github.com/jonesmac)
47
+ - [Joel Carter](https://github.com/JoelBCarter)
48
+ - [Jordan Trouw](https://github.com/jordantrouw)
66
49
 
67
50
  ## License
68
51
 
@@ -74,23 +57,11 @@ See the [LICENSE](LICENSE) file for license details
74
57
 
75
58
  [logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
76
59
 
77
- [main-build]: https://github.com/xylabs/sdk-react/actions/workflows/build-main.yml/badge.svg
78
- [main-build-link]: https://github.com/xylabs/sdk-react/actions/workflows/build-main.yml
79
-
80
- [beta-build]: https://github.com/xylabs/sdk-react/actions/workflows/build-beta.yml/badge.svg
81
- [beta-build-link]: https://github.com/xylabs/sdk-react/actions/workflows/build-beta.yml
82
-
83
- [npm-badge]: https://img.shields.io/npm/v/@xylabs/sdk-react.svg
84
- [npm-link]: https://www.npmjs.com/package/@xylabs/sdk-react
85
-
86
- [bch-badge]: https://bettercodehub.com/edge/badge/xylabs/sdk-react?branch=main
87
- [bch-link]: https://bettercodehub.com/results/xylabs/sdk-react
88
-
89
- [codacy-badge]: https://app.codacy.com/project/badge/Grade/c2a69d4530ed4b7da6ddb070169dd339
90
- [codacy-link]: https://www.codacy.com/gh/xylabs/sdk-react/dashboard?utm_source=github.com&utm_medium=referral&utm_content=xylabs/sdk-react&utm_campaign=Badge_Grade
60
+ [npm-badge]: https://img.shields.io/npm/v/@xylabs/react-identicon.svg
61
+ [npm-link]: https://www.npmjs.com/package/@xylabs/react-identicon
91
62
 
92
- [codeclimate-badge]: https://api.codeclimate.com/v1/badges/c461e0bc2b00c0b01ac0/maintainability
93
- [codeclimate-link]: https://codeclimate.com/github/xylabs/sdk-react/maintainability
63
+ [npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-identicon
64
+ [npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-identicon
94
65
 
95
- [snyk-badge]: https://snyk.io/test/github/xylabs/sdk-react/badge.svg?targetFile=package.json
96
- [snyk-link]: https://snyk.io/test/github/xylabs/sdk-react?targetFile=package.json
66
+ [jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-identicon/badge
67
+ [jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-identicon
package/package.json CHANGED
@@ -13,14 +13,14 @@
13
13
  "packages/*"
14
14
  ],
15
15
  "dependencies": {
16
- "@xylabs/react-flexbox": "~3.0.17",
16
+ "@xylabs/react-flexbox": "~3.0.19",
17
17
  "md5": "^2.3.0"
18
18
  },
19
19
  "description": "Common React library for all XY Labs projects that use React",
20
20
  "devDependencies": {
21
21
  "@types/md5": "^2.3.3",
22
- "@xylabs/ts-scripts-yarn3": "^3.0.88",
23
- "@xylabs/tsconfig-react": "^3.0.88",
22
+ "@xylabs/ts-scripts-yarn3": "^3.1.9",
23
+ "@xylabs/tsconfig-react": "^3.1.9",
24
24
  "react": "^18.2.0",
25
25
  "react-dom": "^18.2.0",
26
26
  "typescript": "^5.2.2"
@@ -77,6 +77,6 @@
77
77
  "url": "https://github.com/xylabs/sdk-react.git"
78
78
  },
79
79
  "sideEffects": false,
80
- "version": "3.0.17",
80
+ "version": "3.0.19",
81
81
  "type": "module"
82
82
  }
package/dist/browser/components/Identicon.cjs DELETED
@@ -1,105 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/Identicon.tsx
31
- var Identicon_exports = {};
32
- __export(Identicon_exports, {
33
- Identicon: () => Identicon
34
- });
35
- module.exports = __toCommonJS(Identicon_exports);
36
- var import_react_flexbox = require("@xylabs/react-flexbox");
37
- var import_md5 = __toESM(require("md5"), 1);
38
- var import_react = require("react");
39
- var import_jsx_runtime = require("react/jsx-runtime");
40
- var range = (n, in_min, in_max, out_min, out_max) => {
41
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
42
- };
43
- var updateCanvas = (canvas, props) => {
44
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
45
- let { fg } = props;
46
- const hash = (0, import_md5.default)(value);
47
- const block = Math.floor(size / count);
48
- const hashcolor = hash.slice(0, 6);
49
- const current = canvas.current;
50
- if (!current) {
51
- return;
52
- }
53
- if (palette && palette.length) {
54
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
55
- fg = palette[index];
56
- }
57
- current.width = block * count + iconPadding;
58
- current.height = block * count + iconPadding;
59
- const arr = hash.split("").map((el) => {
60
- const parsedEl = parseInt(el, 16);
61
- if (parsedEl < 8) {
62
- return 0;
63
- } else {
64
- return 1;
65
- }
66
- });
67
- const map = [];
68
- map[0] = map[4] = arr.slice(0, 5);
69
- map[1] = map[3] = arr.slice(5, 10);
70
- map[2] = arr.slice(10, 15);
71
- const ctx = current.getContext("2d");
72
- if (ctx) {
73
- ctx.imageSmoothingEnabled = false;
74
- ctx.clearRect(0, 0, current.width, current.height);
75
- map.forEach((row, i) => {
76
- row.forEach((el, j) => {
77
- if (el) {
78
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
79
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
80
- } else {
81
- ctx.fillStyle = bg;
82
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
83
- }
84
- });
85
- });
86
- }
87
- };
88
- var Identicon = ({
89
- size = 400,
90
- className = "identicon",
91
- bg,
92
- count,
93
- fg,
94
- iconPadding,
95
- palette,
96
- value,
97
- ...props
98
- }) => {
99
- const canvas = (0, import_react.useRef)(null);
100
- (0, import_react.useEffect)(() => {
101
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
102
- });
103
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
104
- };
105
- //# sourceMappingURL=Identicon.cjs.map
package/dist/browser/components/Identicon.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,WAAO,WAAAA,SAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,4CAAC,gCAAS,GAAG,OAAQ,kBAAQ,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":["md5"]}
package/dist/browser/components/Identicon.js DELETED
@@ -1,74 +0,0 @@
1
- // src/components/Identicon.tsx
2
- import { FlexRow } from "@xylabs/react-flexbox";
3
- import md5 from "md5";
4
- import { useEffect, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- var range = (n, in_min, in_max, out_min, out_max) => {
7
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
8
- };
9
- var updateCanvas = (canvas, props) => {
10
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
11
- let { fg } = props;
12
- const hash = md5(value);
13
- const block = Math.floor(size / count);
14
- const hashcolor = hash.slice(0, 6);
15
- const current = canvas.current;
16
- if (!current) {
17
- return;
18
- }
19
- if (palette && palette.length) {
20
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
21
- fg = palette[index];
22
- }
23
- current.width = block * count + iconPadding;
24
- current.height = block * count + iconPadding;
25
- const arr = hash.split("").map((el) => {
26
- const parsedEl = parseInt(el, 16);
27
- if (parsedEl < 8) {
28
- return 0;
29
- } else {
30
- return 1;
31
- }
32
- });
33
- const map = [];
34
- map[0] = map[4] = arr.slice(0, 5);
35
- map[1] = map[3] = arr.slice(5, 10);
36
- map[2] = arr.slice(10, 15);
37
- const ctx = current.getContext("2d");
38
- if (ctx) {
39
- ctx.imageSmoothingEnabled = false;
40
- ctx.clearRect(0, 0, current.width, current.height);
41
- map.forEach((row, i) => {
42
- row.forEach((el, j) => {
43
- if (el) {
44
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
45
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
46
- } else {
47
- ctx.fillStyle = bg;
48
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
49
- }
50
- });
51
- });
52
- }
53
- };
54
- var Identicon = ({
55
- size = 400,
56
- className = "identicon",
57
- bg,
58
- count,
59
- fg,
60
- iconPadding,
61
- palette,
62
- value,
63
- ...props
64
- }) => {
65
- const canvas = useRef(null);
66
- useEffect(() => {
67
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
68
- });
69
- return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
70
- };
71
- export {
72
- Identicon
73
- };
74
- //# sourceMappingURL=Identicon.js.map
package/dist/browser/components/Identicon.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}
package/dist/browser/components/index.cjs DELETED
@@ -1,107 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/index.ts
31
- var components_exports = {};
32
- __export(components_exports, {
33
- Identicon: () => Identicon
34
- });
35
- module.exports = __toCommonJS(components_exports);
36
-
37
- // src/components/Identicon.tsx
38
- var import_react_flexbox = require("@xylabs/react-flexbox");
39
- var import_md5 = __toESM(require("md5"), 1);
40
- var import_react = require("react");
41
- var import_jsx_runtime = require("react/jsx-runtime");
42
- var range = (n, in_min, in_max, out_min, out_max) => {
43
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
44
- };
45
- var updateCanvas = (canvas, props) => {
46
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
47
- let { fg } = props;
48
- const hash = (0, import_md5.default)(value);
49
- const block = Math.floor(size / count);
50
- const hashcolor = hash.slice(0, 6);
51
- const current = canvas.current;
52
- if (!current) {
53
- return;
54
- }
55
- if (palette && palette.length) {
56
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
57
- fg = palette[index];
58
- }
59
- current.width = block * count + iconPadding;
60
- current.height = block * count + iconPadding;
61
- const arr = hash.split("").map((el) => {
62
- const parsedEl = parseInt(el, 16);
63
- if (parsedEl < 8) {
64
- return 0;
65
- } else {
66
- return 1;
67
- }
68
- });
69
- const map = [];
70
- map[0] = map[4] = arr.slice(0, 5);
71
- map[1] = map[3] = arr.slice(5, 10);
72
- map[2] = arr.slice(10, 15);
73
- const ctx = current.getContext("2d");
74
- if (ctx) {
75
- ctx.imageSmoothingEnabled = false;
76
- ctx.clearRect(0, 0, current.width, current.height);
77
- map.forEach((row, i) => {
78
- row.forEach((el, j) => {
79
- if (el) {
80
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
81
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
82
- } else {
83
- ctx.fillStyle = bg;
84
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
85
- }
86
- });
87
- });
88
- }
89
- };
90
- var Identicon = ({
91
- size = 400,
92
- className = "identicon",
93
- bg,
94
- count,
95
- fg,
96
- iconPadding,
97
- palette,
98
- value,
99
- ...props
100
- }) => {
101
- const canvas = (0, import_react.useRef)(null);
102
- (0, import_react.useEffect)(() => {
103
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
104
- });
105
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
106
- };
107
- //# sourceMappingURL=index.cjs.map
package/dist/browser/components/index.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/index.ts","../../../src/components/Identicon.tsx"],"sourcesContent":["export * from './Identicon'\n","import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,WAAO,WAAAA,SAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,4CAAC,gCAAS,GAAG,OAAQ,kBAAQ,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":["md5"]}
package/dist/browser/components/index.js DELETED
@@ -1,74 +0,0 @@
1
- // src/components/Identicon.tsx
2
- import { FlexRow } from "@xylabs/react-flexbox";
3
- import md5 from "md5";
4
- import { useEffect, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- var range = (n, in_min, in_max, out_min, out_max) => {
7
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
8
- };
9
- var updateCanvas = (canvas, props) => {
10
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
11
- let { fg } = props;
12
- const hash = md5(value);
13
- const block = Math.floor(size / count);
14
- const hashcolor = hash.slice(0, 6);
15
- const current = canvas.current;
16
- if (!current) {
17
- return;
18
- }
19
- if (palette && palette.length) {
20
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
21
- fg = palette[index];
22
- }
23
- current.width = block * count + iconPadding;
24
- current.height = block * count + iconPadding;
25
- const arr = hash.split("").map((el) => {
26
- const parsedEl = parseInt(el, 16);
27
- if (parsedEl < 8) {
28
- return 0;
29
- } else {
30
- return 1;
31
- }
32
- });
33
- const map = [];
34
- map[0] = map[4] = arr.slice(0, 5);
35
- map[1] = map[3] = arr.slice(5, 10);
36
- map[2] = arr.slice(10, 15);
37
- const ctx = current.getContext("2d");
38
- if (ctx) {
39
- ctx.imageSmoothingEnabled = false;
40
- ctx.clearRect(0, 0, current.width, current.height);
41
- map.forEach((row, i) => {
42
- row.forEach((el, j) => {
43
- if (el) {
44
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
45
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
46
- } else {
47
- ctx.fillStyle = bg;
48
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
49
- }
50
- });
51
- });
52
- }
53
- };
54
- var Identicon = ({
55
- size = 400,
56
- className = "identicon",
57
- bg,
58
- count,
59
- fg,
60
- iconPadding,
61
- palette,
62
- value,
63
- ...props
64
- }) => {
65
- const canvas = useRef(null);
66
- useEffect(() => {
67
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
68
- });
69
- return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
70
- };
71
- export {
72
- Identicon
73
- };
74
- //# sourceMappingURL=index.js.map
package/dist/browser/components/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}
package/dist/node/components/Identicon.cjs DELETED
@@ -1,109 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/Identicon.tsx
31
- var Identicon_exports = {};
32
- __export(Identicon_exports, {
33
- Identicon: () => Identicon
34
- });
35
- module.exports = __toCommonJS(Identicon_exports);
36
- var import_react_flexbox = require("@xylabs/react-flexbox");
37
- var import_md5 = __toESM(require("md5"), 1);
38
- var import_react = require("react");
39
- var import_jsx_runtime = require("react/jsx-runtime");
40
- var range = (n, in_min, in_max, out_min, out_max) => {
41
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
42
- };
43
- var updateCanvas = (canvas, props) => {
44
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
45
- let { fg } = props;
46
- const hash = (0, import_md5.default)(value);
47
- const block = Math.floor(size / count);
48
- const hashcolor = hash.slice(0, 6);
49
- const current = canvas.current;
50
- if (!current) {
51
- return;
52
- }
53
- if (palette && palette.length) {
54
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
55
- fg = palette[index];
56
- }
57
- current.width = block * count + iconPadding;
58
- current.height = block * count + iconPadding;
59
- const arr = hash.split("").map((el) => {
60
- const parsedEl = parseInt(el, 16);
61
- if (parsedEl < 8) {
62
- return 0;
63
- } else {
64
- return 1;
65
- }
66
- });
67
- const map = [];
68
- map[0] = map[4] = arr.slice(0, 5);
69
- map[1] = map[3] = arr.slice(5, 10);
70
- map[2] = arr.slice(10, 15);
71
- const ctx = current.getContext("2d");
72
- if (ctx) {
73
- ctx.imageSmoothingEnabled = false;
74
- ctx.clearRect(0, 0, current.width, current.height);
75
- map.forEach((row, i) => {
76
- row.forEach((el, j) => {
77
- if (el) {
78
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
79
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
80
- } else {
81
- ctx.fillStyle = bg;
82
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
83
- }
84
- });
85
- });
86
- }
87
- };
88
- var Identicon = ({
89
- size = 400,
90
- className = "identicon",
91
- bg,
92
- count,
93
- fg,
94
- iconPadding,
95
- palette,
96
- value,
97
- ...props
98
- }) => {
99
- const canvas = (0, import_react.useRef)(null);
100
- (0, import_react.useEffect)(() => {
101
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
102
- });
103
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
104
- };
105
- // Annotate the CommonJS export names for ESM import in node:
106
- 0 && (module.exports = {
107
- Identicon
108
- });
109
- //# sourceMappingURL=Identicon.cjs.map
package/dist/node/components/Identicon.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,WAAO,WAAAA,SAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,4CAAC,gCAAS,GAAG,OAAQ,kBAAQ,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":["md5"]}
package/dist/node/components/Identicon.js DELETED
@@ -1,74 +0,0 @@
1
- // src/components/Identicon.tsx
2
- import { FlexRow } from "@xylabs/react-flexbox";
3
- import md5 from "md5";
4
- import { useEffect, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- var range = (n, in_min, in_max, out_min, out_max) => {
7
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
8
- };
9
- var updateCanvas = (canvas, props) => {
10
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
11
- let { fg } = props;
12
- const hash = md5(value);
13
- const block = Math.floor(size / count);
14
- const hashcolor = hash.slice(0, 6);
15
- const current = canvas.current;
16
- if (!current) {
17
- return;
18
- }
19
- if (palette && palette.length) {
20
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
21
- fg = palette[index];
22
- }
23
- current.width = block * count + iconPadding;
24
- current.height = block * count + iconPadding;
25
- const arr = hash.split("").map((el) => {
26
- const parsedEl = parseInt(el, 16);
27
- if (parsedEl < 8) {
28
- return 0;
29
- } else {
30
- return 1;
31
- }
32
- });
33
- const map = [];
34
- map[0] = map[4] = arr.slice(0, 5);
35
- map[1] = map[3] = arr.slice(5, 10);
36
- map[2] = arr.slice(10, 15);
37
- const ctx = current.getContext("2d");
38
- if (ctx) {
39
- ctx.imageSmoothingEnabled = false;
40
- ctx.clearRect(0, 0, current.width, current.height);
41
- map.forEach((row, i) => {
42
- row.forEach((el, j) => {
43
- if (el) {
44
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
45
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
46
- } else {
47
- ctx.fillStyle = bg;
48
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
49
- }
50
- });
51
- });
52
- }
53
- };
54
- var Identicon = ({
55
- size = 400,
56
- className = "identicon",
57
- bg,
58
- count,
59
- fg,
60
- iconPadding,
61
- palette,
62
- value,
63
- ...props
64
- }) => {
65
- const canvas = useRef(null);
66
- useEffect(() => {
67
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
68
- });
69
- return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
70
- };
71
- export {
72
- Identicon
73
- };
74
- //# sourceMappingURL=Identicon.js.map
package/dist/node/components/Identicon.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}
package/dist/node/components/index.cjs DELETED
@@ -1,111 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/components/index.ts
31
- var components_exports = {};
32
- __export(components_exports, {
33
- Identicon: () => Identicon
34
- });
35
- module.exports = __toCommonJS(components_exports);
36
-
37
- // src/components/Identicon.tsx
38
- var import_react_flexbox = require("@xylabs/react-flexbox");
39
- var import_md5 = __toESM(require("md5"), 1);
40
- var import_react = require("react");
41
- var import_jsx_runtime = require("react/jsx-runtime");
42
- var range = (n, in_min, in_max, out_min, out_max) => {
43
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
44
- };
45
- var updateCanvas = (canvas, props) => {
46
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
47
- let { fg } = props;
48
- const hash = (0, import_md5.default)(value);
49
- const block = Math.floor(size / count);
50
- const hashcolor = hash.slice(0, 6);
51
- const current = canvas.current;
52
- if (!current) {
53
- return;
54
- }
55
- if (palette && palette.length) {
56
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
57
- fg = palette[index];
58
- }
59
- current.width = block * count + iconPadding;
60
- current.height = block * count + iconPadding;
61
- const arr = hash.split("").map((el) => {
62
- const parsedEl = parseInt(el, 16);
63
- if (parsedEl < 8) {
64
- return 0;
65
- } else {
66
- return 1;
67
- }
68
- });
69
- const map = [];
70
- map[0] = map[4] = arr.slice(0, 5);
71
- map[1] = map[3] = arr.slice(5, 10);
72
- map[2] = arr.slice(10, 15);
73
- const ctx = current.getContext("2d");
74
- if (ctx) {
75
- ctx.imageSmoothingEnabled = false;
76
- ctx.clearRect(0, 0, current.width, current.height);
77
- map.forEach((row, i) => {
78
- row.forEach((el, j) => {
79
- if (el) {
80
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
81
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
82
- } else {
83
- ctx.fillStyle = bg;
84
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
85
- }
86
- });
87
- });
88
- }
89
- };
90
- var Identicon = ({
91
- size = 400,
92
- className = "identicon",
93
- bg,
94
- count,
95
- fg,
96
- iconPadding,
97
- palette,
98
- value,
99
- ...props
100
- }) => {
101
- const canvas = (0, import_react.useRef)(null);
102
- (0, import_react.useEffect)(() => {
103
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
104
- });
105
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexRow, { ...props, children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
106
- };
107
- // Annotate the CommonJS export names for ESM import in node:
108
- 0 && (module.exports = {
109
- Identicon
110
- });
111
- //# sourceMappingURL=index.cjs.map
package/dist/node/components/index.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/index.ts","../../../src/components/Identicon.tsx"],"sourcesContent":["export * from './Identicon'\n","import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAAsC;AACtC,iBAAgB;AAChB,mBAAyC;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,WAAO,WAAAA,SAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,4CAAC,gCAAS,GAAG,OAAQ,kBAAQ,4CAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":["md5"]}
package/dist/node/components/index.js DELETED
@@ -1,74 +0,0 @@
1
- // src/components/Identicon.tsx
2
- import { FlexRow } from "@xylabs/react-flexbox";
3
- import md5 from "md5";
4
- import { useEffect, useRef } from "react";
5
- import { jsx } from "react/jsx-runtime";
6
- var range = (n, in_min, in_max, out_min, out_max) => {
7
- return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
8
- };
9
- var updateCanvas = (canvas, props) => {
10
- const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
11
- let { fg } = props;
12
- const hash = md5(value);
13
- const block = Math.floor(size / count);
14
- const hashcolor = hash.slice(0, 6);
15
- const current = canvas.current;
16
- if (!current) {
17
- return;
18
- }
19
- if (palette && palette.length) {
20
- const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
21
- fg = palette[index];
22
- }
23
- current.width = block * count + iconPadding;
24
- current.height = block * count + iconPadding;
25
- const arr = hash.split("").map((el) => {
26
- const parsedEl = parseInt(el, 16);
27
- if (parsedEl < 8) {
28
- return 0;
29
- } else {
30
- return 1;
31
- }
32
- });
33
- const map = [];
34
- map[0] = map[4] = arr.slice(0, 5);
35
- map[1] = map[3] = arr.slice(5, 10);
36
- map[2] = arr.slice(10, 15);
37
- const ctx = current.getContext("2d");
38
- if (ctx) {
39
- ctx.imageSmoothingEnabled = false;
40
- ctx.clearRect(0, 0, current.width, current.height);
41
- map.forEach((row, i) => {
42
- row.forEach((el, j) => {
43
- if (el) {
44
- ctx.fillStyle = fg ? fg : "#" + hashcolor;
45
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
46
- } else {
47
- ctx.fillStyle = bg;
48
- ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
49
- }
50
- });
51
- });
52
- }
53
- };
54
- var Identicon = ({
55
- size = 400,
56
- className = "identicon",
57
- bg,
58
- count,
59
- fg,
60
- iconPadding,
61
- palette,
62
- value,
63
- ...props
64
- }) => {
65
- const canvas = useRef(null);
66
- useEffect(() => {
67
- updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
68
- });
69
- return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
70
- };
71
- export {
72
- Identicon
73
- };
74
- //# sourceMappingURL=index.js.map
package/dist/node/components/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n bg?: string\n className?: string\n count?: number\n fg?: string\n iconPadding?: number\n palette?: string[]\n size?: number\n value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {\n const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props\n let { fg } = props\n const hash = md5(value)\n const block = Math.floor(size / count)\n const hashcolor = hash.slice(0, 6)\n\n const current = canvas.current\n\n if (!current) {\n return\n }\n\n if (palette && palette.length) {\n const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n fg = palette[index]\n }\n\n current.width = block * count + iconPadding\n current.height = block * count + iconPadding\n const arr = hash.split('').map((el) => {\n const parsedEl = parseInt(el, 16)\n if (parsedEl < 8) {\n return 0\n } else {\n return 1\n }\n })\n\n const map = []\n\n map[0] = map[4] = arr.slice(0, 5)\n map[1] = map[3] = arr.slice(5, 10)\n map[2] = arr.slice(10, 15)\n\n const ctx = current.getContext('2d')\n if (ctx) {\n ctx.imageSmoothingEnabled = false\n ctx.clearRect(0, 0, current.width, current.height)\n\n map.forEach((row, i) => {\n row.forEach((el, j) => {\n if (el) {\n ctx.fillStyle = fg ? fg : '#' + hashcolor\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n } else {\n ctx.fillStyle = bg\n ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n }\n })\n })\n }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n size = 400,\n className = 'identicon',\n bg,\n count,\n fg,\n iconPadding,\n palette,\n value,\n ...props\n}) => {\n const canvas = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })\n })\n\n return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}