@pezkuwi/ui-shared 3.16.6

package/build/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+require("./packageDetect.js");
+tslib_1.__exportStar(require("./bundle.js"), exports);

package/build/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/build/cjs/packageDetect.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/packageDetect.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("@pezkuwi/util");
+const packageInfo_js_1 = require("./packageInfo.js");
+(0, util_1.detectPackage)(packageInfo_js_1.packageInfo, null, []);

package/build/cjs/packageInfo.d.ts

@@ -0,0 +1,6 @@
+export declare const packageInfo: {
+    name: string;
+    path: string;
+    type: string;
+    version: string;
+};

package/build/cjs/packageInfo.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageInfo = void 0;
+exports.packageInfo = { name: '@pezkuwi/ui-shared', path: typeof __dirname === 'string' ? __dirname : 'auto', type: 'cjs', version: '3.16.6' };

package/build/icons/beachball/README.md

@@ -0,0 +1,19 @@
+# @pezkuwi/ui-shared/beachball
+
+Adapted from [Jazzicon](https://github.com/danfinlay/jazzicon) by Dan Finlay with the following changes -
+
+- Random values now is read from the Uint8Array supplied (as opposed to having the seed as a number). This allows us to give an publicKey/address as an input and use those values in the pattern generation.
+- Upgrade to the underlying [color](https://github.com/Qix-/color) library
+- Generate circles as shapes (instead of rectangles)
+- Interface updated to take in optional className & style
+- Update everywhere to use ES6
+- Split source into self-contained functions (TODO: future testing)
+- Everything has been updated to use flow
+- Test the library functions
+- Copyright headers added (original also under Apache-2.0)
+
+## Usage
+
+Also see [src/demo.js](src/demo.js) for a randomly generated example.
+
+![demo](https://raw.githubusercontent.com/pezkuwichain/ui/master/packages/ui-shared/demo.png)

package/build/icons/beachball/colors.d.ts

@@ -0,0 +1,2 @@
+import type { ColorGen, Seeder } from './types.js';
+export declare function colors(seeder: Seeder): ColorGen;

package/build/icons/beachball/colors.js

@@ -0,0 +1,13 @@
+import { colord } from 'colord';
+import { COLORS } from './defaults.js';
+const WOBBLE = 30;
+export function colors(seeder) {
+    const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
+    const all = COLORS.map((hex) => colord(hex).rotate(amount));
+    return (alpha = 1) => {
+        const index = Math.floor(all.length * seeder());
+        return all.splice(index, 1)[0]
+            .alpha(alpha)
+            .toHslString();
+    };
+}

package/build/icons/beachball/container.d.ts

@@ -0,0 +1 @@
+export declare function container(diameter: number, background?: string, className?: string, _style?: Record<string, string>): HTMLElement;

package/build/icons/beachball/container.js

@@ -0,0 +1,19 @@
+export function container(diameter, background = 'white', className = '', _style = {}) {
+    const element = document.createElement('div');
+    const style = Object.assign({
+        background,
+        borderRadius: `${diameter / 2}px`,
+        display: 'inline-block',
+        height: `${diameter}px`,
+        margin: '0px',
+        overflow: 'hidden',
+        padding: '0px',
+        width: `${diameter}px`
+    }, _style);
+    element.className = className;
+    element.style.background = background;
+    Object.keys(style).forEach((key) => {
+        element.style[key] = style[key];
+    });
+    return element;
+}

package/build/icons/beachball/defaults.d.ts

@@ -0,0 +1,2 @@
+export declare const COLORS: readonly string[];
+export declare const SHAPE_COUNT: 5;

package/build/icons/beachball/defaults.js

@@ -0,0 +1,5 @@
+export const COLORS = [
+    // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
+    '#ffe119', '#4363d8', '#f58231', '#fabebe', '#e6beff', '#800000', '#000075', '#a9a9a9', '#ffffff', '#000000'
+];
+export const SHAPE_COUNT = 5;

package/build/icons/beachball/demo.d.ts

@@ -0,0 +1 @@
+export {};

package/build/icons/beachball/demo.js

@@ -0,0 +1,19 @@
+import { isNull } from '@pezkuwi/util';
+import { encodeAddress, randomAsU8a } from '@pezkuwi/util-crypto';
+import { beachballIcon } from './index.js';
+const element = document.getElementById('demo');
+function generateIcon(seed = encodeAddress(randomAsU8a(32))) {
+    const start = Date.now();
+    if (isNull(element)) {
+        throw new Error('Unable to find #demo element');
+    }
+    element.appendChild(beachballIcon(seed, { isAlternative: false, size: 100 }, 'padded'));
+    console.log(`Icon generated in ${(Date.now() - start)}ms`);
+}
+function generateIcons(count = 512) {
+    generateIcon(encodeAddress(new Uint8Array(32)));
+    for (let index = 1; index < count; index++) {
+        generateIcon();
+    }
+}
+generateIcons();

package/build/icons/beachball/index.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from '../types.js';
+export declare function beachballIcon(seed: string | Uint8Array, { size }: Options, className?: string, style?: Record<string, string>): HTMLElement;

package/build/icons/beachball/index.js

@@ -0,0 +1,21 @@
+import { circle } from './shape/circle.js';
+import { element } from './svg/element.js';
+import { colors } from './colors.js';
+import { container as newContainer } from './container.js';
+import { SHAPE_COUNT } from './defaults.js';
+import { seeder as newSeeder } from './seeder.js';
+export function beachballIcon(seed, { size = 256 }, className = '', style) {
+    const seeder = newSeeder(seed);
+    const colorGen = colors(seeder);
+    const outer = newContainer(size, 'white', className, style);
+    const container = newContainer(size, colorGen());
+    const svg = element(size);
+    outer.appendChild(container);
+    container.appendChild(svg);
+    for (let count = 0; count < SHAPE_COUNT; count++) {
+        const fill = colorGen();
+        const shape = circle(seeder, fill, size, count);
+        svg.appendChild(shape);
+    }
+    return outer;
+}

package/build/icons/beachball/seeder.d.ts

@@ -0,0 +1,2 @@
+import type { Seeder } from './types.js';
+export declare function seeder(_seed?: string | Uint8Array): Seeder;

package/build/icons/beachball/seeder.js

@@ -0,0 +1,18 @@
+import { isU8a, stringToU8a } from '@pezkuwi/util';
+const DIVISOR = 256 * 256;
+export function seeder(_seed = new Uint8Array(32)) {
+    const seed = isU8a(_seed)
+        ? _seed
+        : stringToU8a(_seed);
+    let index = (seed[Math.floor(seed.length / 2)] % seed.length) - 1;
+    const next = () => {
+        index += 1;
+        if (index === seed.length) {
+            index = 0;
+        }
+        return seed[index];
+    };
+    return () => {
+        return ((next() * 256) + next()) / DIVISOR;
+    };
+}

package/build/icons/beachball/shape/circle.d.ts

@@ -0,0 +1,2 @@
+import type { Seeder } from '../types.js';
+export declare function circle(seeder: Seeder, fill: string, diameter: number, count: number): Element;

package/build/icons/beachball/shape/circle.js

@@ -0,0 +1,13 @@
+import { SHAPE_COUNT } from '../defaults.js';
+import { circle as newCircle } from '../svg/circle.js';
+export function circle(seeder, fill, diameter, count) {
+    const center = diameter / 2;
+    const angle = seeder() * 360;
+    const radius = (((SHAPE_COUNT - count) / SHAPE_COUNT) * (diameter / 2)) + ((diameter / 8) * seeder());
+    const offset = (diameter / 4) * (seeder() + ((count + 1) / SHAPE_COUNT));
+    const cx = (offset * Math.sin(angle)) + center;
+    const cy = (offset * Math.cos(angle)) + center;
+    const svg = newCircle(radius, cx, cy);
+    svg.setAttributeNS('', 'fill', fill);
+    return svg;
+}

package/build/icons/beachball/shape/square.d.ts

@@ -0,0 +1,2 @@
+import type { Seeder } from '../types.js';
+export declare function square(seeder: Seeder, fill: string, diameter: number, count: number): Element;

package/build/icons/beachball/shape/square.js

@@ -0,0 +1,16 @@
+import { SHAPE_COUNT } from '../defaults.js';
+import { rect as newRect } from '../svg/rect.js';
+export function square(seeder, fill, diameter, count) {
+    const center = diameter / 2;
+    const svg = newRect(diameter);
+    const firstRot = seeder();
+    const angle = Math.PI * 2 * firstRot;
+    const scale = count / SHAPE_COUNT;
+    const velocity = ((diameter / SHAPE_COUNT) * seeder()) + (scale * diameter);
+    const tx = (Math.cos(angle) * velocity).toFixed(3);
+    const ty = (Math.sin(angle) * velocity).toFixed(3);
+    const rot = ((firstRot * 360) + (seeder() * 180)).toFixed(1);
+    svg.setAttributeNS('', 'transform', `translate(${tx} ${ty}) rotate(${rot} ${center} ${center})`);
+    svg.setAttributeNS('', 'fill', fill);
+    return svg;
+}

package/build/icons/beachball/svg/circle.d.ts

@@ -0,0 +1 @@
+export declare function circle(r: number, cx: number, cy: number): Element;

package/build/icons/beachball/svg/circle.js

@@ -0,0 +1,8 @@
+import { svg } from './svg.js';
+export function circle(r, cx, cy) {
+    const elem = svg('circle');
+    elem.setAttributeNS('', 'cx', `${cx}`);
+    elem.setAttributeNS('', 'cy', `${cy}`);
+    elem.setAttributeNS('', 'r', `${r}`);
+    return elem;
+}

package/build/icons/beachball/svg/element.d.ts

@@ -0,0 +1 @@
+export declare function element(size: number, type?: string, x?: number, y?: number): Element;

package/build/icons/beachball/svg/element.js

@@ -0,0 +1,9 @@
+import { svg } from './svg.js';
+export function element(size, type = 'svg', x = 0, y = 0) {
+    const elem = svg(type);
+    elem.setAttributeNS('', 'x', `${x}`);
+    elem.setAttributeNS('', 'y', `${y}`);
+    elem.setAttributeNS('', 'width', `${size}`);
+    elem.setAttributeNS('', 'height', `${size}`);
+    return elem;
+}

package/build/icons/beachball/svg/rect.d.ts

@@ -0,0 +1 @@
+export declare function rect(size: number): Element;

package/build/icons/beachball/svg/rect.js

@@ -0,0 +1,7 @@
+import { element } from './element.js';
+export function rect(size) {
+    const elem = element(size, 'rect');
+    elem.setAttributeNS('', 'rx', `${size / 16}`);
+    elem.setAttributeNS('', 'ry', `${size / 16}`);
+    return elem;
+}

package/build/icons/beachball/svg/svg.d.ts

@@ -0,0 +1 @@
+export declare function svg(type: string): Element;

package/build/icons/beachball/svg/svg.js

@@ -0,0 +1,4 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+export function svg(type) {
+    return document.createElementNS(SVG_NS, type);
+}

package/build/icons/beachball/types.d.ts

@@ -0,0 +1,2 @@
+export type Seeder = () => number;
+export type ColorGen = (alpha?: number) => string;

package/build/icons/beachball/types.js

@@ -0,0 +1 @@
+export {};

package/build/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { beachballIcon } from './beachball/index.js';
+export { polkadotIcon } from './polkadot.js';

package/build/icons/index.js

@@ -0,0 +1,2 @@
+export { beachballIcon } from './beachball/index.js';
+export { polkadotIcon } from './polkadot.js';

package/build/icons/polkadot.d.ts

@@ -0,0 +1,5 @@
+import type { Circle, Options } from './types.js';
+/**
+ * @description Generates an array of the circles that make up an identicon
+ */
+export declare function polkadotIcon(address: string, { isAlternative }: Options): Circle[];

package/build/icons/polkadot.js

@@ -0,0 +1,113 @@
+import { blake2AsU8a, decodeAddress } from '@pezkuwi/util-crypto';
+const S = 64;
+const C = S / 2;
+const Z = S / 64 * 5;
+const SCHEMES = [
+    /* target  */ { colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1], freq: 1 },
+    /* cube    */ { colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5], freq: 20 },
+    /* quazar  */ { colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0], freq: 16 },
+    /* flower  */ { colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3], freq: 32 },
+    /* cyclic  */ { colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6], freq: 32 },
+    /* vmirror */ { colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10], freq: 128 },
+    /* hmirror */ { colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11], freq: 128 }
+];
+const SCHEMES_TOTAL = SCHEMES
+    .map((s) => s.freq)
+    .reduce((a, b) => a + b);
+const OUTER_CIRCLE = {
+    cx: C,
+    cy: C,
+    fill: '#eee',
+    r: C
+};
+let zeroHash = new Uint8Array();
+function getRotation(isSixPoint) {
+    const r = isSixPoint
+        ? (C / 8 * 5)
+        : (C / 4 * 3);
+    const rroot3o2 = r * Math.sqrt(3) / 2;
+    const ro2 = r / 2;
+    const rroot3o4 = r * Math.sqrt(3) / 4;
+    const ro4 = r / 4;
+    const r3o4 = r * 3 / 4;
+    return { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 };
+}
+function getCircleXY(isSixPoint = false) {
+    const { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
+    return [
+        [C, C - r],
+        [C, C - ro2],
+        [C - rroot3o4, C - r3o4],
+        [C - rroot3o2, C - ro2],
+        [C - rroot3o4, C - ro4],
+        [C - rroot3o2, C],
+        [C - rroot3o2, C + ro2],
+        [C - rroot3o4, C + ro4],
+        [C - rroot3o4, C + r3o4],
+        [C, C + r],
+        [C, C + ro2],
+        [C + rroot3o4, C + r3o4],
+        [C + rroot3o2, C + ro2],
+        [C + rroot3o4, C + ro4],
+        [C + rroot3o2, C],
+        [C + rroot3o2, C - ro2],
+        [C + rroot3o4, C - ro4],
+        [C + rroot3o4, C - r3o4],
+        [C, C]
+    ];
+}
+function findScheme(d) {
+    let cum = 0;
+    const schema = SCHEMES.find((schema) => {
+        cum += schema.freq;
+        return d < cum;
+    });
+    if (!schema) {
+        throw new Error('Unable to find schema');
+    }
+    return schema;
+}
+function addressToId(address) {
+    if (!zeroHash.length) {
+        zeroHash = blake2AsU8a(new Uint8Array(32), 512);
+    }
+    return blake2AsU8a(decodeAddress(address), 512).map((x, i) => (x + 256 - zeroHash[i]) % 256);
+}
+function getColors(address) {
+    const id = addressToId(address);
+    const d = Math.floor((id[30] + id[31] * 256) % SCHEMES_TOTAL);
+    const rot = (id[28] % 6) * 3;
+    const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
+    const scheme = findScheme(d);
+    const palette = Array.from(id).map((x, i) => {
+        const b = (x + i % 28 * 58) % 256;
+        if (b === 0) {
+            return '#444';
+        }
+        else if (b === 255) {
+            return 'transparent';
+        }
+        const h = Math.floor(b % 64 * 360 / 64);
+        const l = [53, 15, 35, 75][Math.floor(b / 64)];
+        return `hsl(${h}, ${sat}%, ${l}%)`;
+    });
+    return scheme.colors.map((_, i) => palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]);
+}
+/**
+ * @description Generates an array of the circles that make up an identicon
+ */
+export function polkadotIcon(address, { isAlternative }) {
+    const xy = getCircleXY(isAlternative);
+    let colors;
+    try {
+        // in some cases, e.g. RN where crypto may not be initialized, chaos can
+        // happen when hashing, in these cases we just fill with a placeholder
+        colors = getColors(address);
+    }
+    catch {
+        colors = new Array(xy.length).fill('#ddd');
+    }
+    return [OUTER_CIRCLE].concat(xy.map(([cx, cy], index) => ({
+        cx, cy, fill: colors[index], r: Z
+    })));
+}

package/build/icons/types.d.ts

@@ -0,0 +1,10 @@
+export interface Circle {
+    cx: number;
+    cy: number;
+    fill: string;
+    r: number;
+}
+export interface Options {
+    isAlternative?: boolean;
+    size?: number;
+}

package/build/icons/types.js

@@ -0,0 +1 @@
+export {};

package/build/index.d.ts

@@ -0,0 +1,2 @@
+import './packageDetect.js';
+export * from './bundle.js';

package/build/index.js

@@ -0,0 +1,2 @@
+import './packageDetect.js';
+export * from './bundle.js';