@pezkuwi/ui-shared 3.16.6

package/src/icons/beachball/container.spec.ts

@@ -0,0 +1,46 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import { container } from './container.js';
+
+describe('container', (): void => {
+  it('applies default styles', (): void => {
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
+      (container(100).style as any)._values
+    ).toMatchObject({
+      background: 'white',
+      'border-radius': '50px',
+      display: 'inline-block',
+      height: '100px',
+      margin: '0px',
+      overflow: 'hidden',
+      padding: '0px',
+      width: '100px'
+    });
+  });
+
+  it('overrides with supplied styles', (): void => {
+    expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
+      (container(50, 'black', '', { display: 'block' }).style as any)._values
+    ).toMatchObject({
+      background: 'black',
+      'border-radius': '25px',
+      display: 'block',
+      height: '50px',
+      margin: '0px',
+      overflow: 'hidden',
+      padding: '0px',
+      width: '50px'
+    });
+  });
+
+  it('applies the specified className', (): void => {
+    expect(
+      container(100, 'blue', 'testClass').className
+    ).toEqual('testClass');
+  });
+});

package/src/icons/beachball/container.ts

@@ -0,0 +1,27 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+export function container (diameter: number, background = 'white', className = '', _style: Record<string, string> = {}): HTMLElement {
+  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: unknown): void => {
+    element.style[key as number] = style[key as number];
+  });
+
+  return element;
+}

package/src/icons/beachball/defaults.ts

@@ -0,0 +1,11 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+export const COLORS: readonly string[] = [
+  // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
+  '#ffe119', '#4363d8', '#f58231', '#fabebe', '#e6beff', '#800000', '#000075', '#a9a9a9', '#ffffff', '#000000'
+] as const;
+
+export const SHAPE_COUNT = 5 as const;

package/src/icons/beachball/demo.ts

@@ -0,0 +1,35 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+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: string = encodeAddress(randomAsU8a(32))): void {
+  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): void {
+  generateIcon(encodeAddress(new Uint8Array(32)));
+
+  for (let index = 1; index < count; index++) {
+    generateIcon();
+  }
+}
+
+generateIcons();

package/src/icons/beachball/index.spec.ts

@@ -0,0 +1,36 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import xmlserializer from 'xmlserializer';
+
+import { beachballIcon } from './index.js';
+
+describe('identicon', (): void => {
+  it('generates a basic [0,..,0] identicon', (): void => {
+    expect(
+      xmlserializer.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 256 }) as any
+      )
+    ).toEqual(
+      // with original color ...
+      // '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
+      '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(255, 167, 26); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212, 66%, 55%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(10, 91%, 58%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 86%, 86%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(262, 100%, 87%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
+    );
+  });
+
+  it('allows overrides', (): void => {
+    expect(
+      xmlserializer.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 100 }, 'testClass', { display: 'block' }) as any
+      )
+    ).toEqual(
+      // with original color ...
+      // '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="50" cy="60" r="40" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="50" cy="70" r="20" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
+      '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(255, 167, 26); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212, 66%, 55%)"/><circle cx="50" cy="60" r="40" fill="hsl(10, 91%, 58%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 86%, 86%)"/><circle cx="50" cy="70" r="20" fill="hsl(262, 100%, 87%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
+    );
+  });
+});

package/src/icons/beachball/index.ts

@@ -0,0 +1,33 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+import type { Options } from '../types.js';
+
+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: string | Uint8Array, { size = 256 }: Options, className = '', style?: Record<string, string>): HTMLElement {
+  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/src/icons/beachball/seeder.spec.ts

@@ -0,0 +1,30 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import type { Seeder } from './types.js';
+
+import { seeder as newSeeder } from './seeder.js';
+
+describe('seeder', (): void => {
+  let seeder: Seeder;
+
+  beforeEach((): void => {
+    seeder = newSeeder(new Uint8Array([1, 2, 3, 4]));
+  });
+
+  it('generates numbers using 2 spaces', (): void => {
+    expect(
+      seeder()
+    ).toEqual(0.0156402587890625);
+  });
+
+  it('generates numbers using 2 spaces (incremented)', (): void => {
+    seeder();
+
+    expect(
+      seeder()
+    ).toEqual(0.0078582763671875);
+  });
+});

package/src/icons/beachball/seeder.ts

@@ -0,0 +1,30 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Seeder } from './types.js';
+
+import { isU8a, stringToU8a } from '@pezkuwi/util';
+
+const DIVISOR = 256 * 256;
+
+export function seeder (_seed: string | Uint8Array = new Uint8Array(32)): Seeder {
+  const seed: Uint8Array = isU8a(_seed)
+    ? _seed
+    : stringToU8a(_seed);
+
+  let index = (seed[Math.floor(seed.length / 2)] % seed.length) - 1;
+
+  const next = (): number => {
+    index += 1;
+
+    if (index === seed.length) {
+      index = 0;
+    }
+
+    return seed[index];
+  };
+
+  return (): number => {
+    return ((next() * 256) + next()) / DIVISOR;
+  };
+}

package/src/icons/beachball/shape/circle.spec.ts

@@ -0,0 +1,20 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import xmlserializer from 'xmlserializer';
+
+import { seeder } from '../seeder.js';
+import { circle } from './circle.js';
+
+describe('circle', (): void => {
+  it('creates a circle shape', (): void => {
+    expect(
+      xmlserializer.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        circle(seeder(), 'blue', 50, 2) as any
+      )
+    ).toEqual('<circle xmlns="http://www.w3.org/2000/svg" cx="25" cy="32.5" r="15" fill="blue"/>');
+  });
+});

package/src/icons/beachball/shape/circle.ts

@@ -0,0 +1,23 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+import type { Seeder } from '../types.js';
+
+import { SHAPE_COUNT } from '../defaults.js';
+import { circle as newCircle } from '../svg/circle.js';
+
+export function circle (seeder: Seeder, fill: string, diameter: number, count: number): Element {
+  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/src/icons/beachball/shape/square.ts

@@ -0,0 +1,26 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+import type { Seeder } from '../types.js';
+
+import { SHAPE_COUNT } from '../defaults.js';
+import { rect as newRect } from '../svg/rect.js';
+
+export function square (seeder: Seeder, fill: string, diameter: number, count: number): Element {
+  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/src/icons/beachball/svg/circle.spec.ts

@@ -0,0 +1,19 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import xs from 'xmlserializer';
+
+import { circle } from './circle.js';
+
+describe('circle', (): void => {
+  it('creates a basic SVG circle element', (): void => {
+    expect(
+      xs.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        circle(123, 12, 34) as any
+      )
+    ).toEqual('<circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="34" r="123"/>');
+  });
+});

package/src/icons/beachball/svg/circle.ts

@@ -0,0 +1,14 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { svg } from './svg.js';
+
+export function circle (r: number, cx: number, cy: number): Element {
+  const elem = svg('circle');
+
+  elem.setAttributeNS('', 'cx', `${cx}`);
+  elem.setAttributeNS('', 'cy', `${cy}`);
+  elem.setAttributeNS('', 'r', `${r}`);
+
+  return elem;
+}

package/src/icons/beachball/svg/element.spec.ts

@@ -0,0 +1,19 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import xs from 'xmlserializer';
+
+import { element } from './element.js';
+
+describe('element', (): void => {
+  it('creates a basic SVG element', (): void => {
+    expect(
+      xs.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        element(123) as any
+      )
+    ).toEqual('<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="123" height="123"/>');
+  });
+});

package/src/icons/beachball/svg/element.ts

@@ -0,0 +1,17 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+import { svg } from './svg.js';
+
+export function element (size: number, type = 'svg', x = 0, y = 0): Element {
+  const elem = svg(type);
+
+  elem.setAttributeNS('', 'x', `${x}`);
+  elem.setAttributeNS('', 'y', `${y}`);
+  elem.setAttributeNS('', 'width', `${size}`);
+  elem.setAttributeNS('', 'height', `${size}`);
+
+  return elem;
+}

package/src/icons/beachball/svg/rect.spec.ts

@@ -0,0 +1,19 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import xs from 'xmlserializer';
+
+import { rect } from './rect.js';
+
+describe('rect', (): void => {
+  it('creates a basic SVG rect element', (): void => {
+    expect(
+      xs.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        rect(123) as any
+      )
+    ).toEqual('<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="123" height="123" rx="7.6875" ry="7.6875"/>');
+  });
+});

package/src/icons/beachball/svg/rect.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { element } from './element.js';
+
+export function rect (size: number): Element {
+  const elem = element(size, 'rect');
+
+  elem.setAttributeNS('', 'rx', `${size / 16}`);
+  elem.setAttributeNS('', 'ry', `${size / 16}`);
+
+  return elem;
+}

package/src/icons/beachball/svg/svg.spec.ts

@@ -0,0 +1,19 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import xs from 'xmlserializer';
+
+import { svg } from './svg.js';
+
+describe('svg', (): void => {
+  it('creates a basic SVG element', (): void => {
+    expect(
+      xs.serializeToString(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        svg('rect') as any
+      )
+    ).toEqual('<rect xmlns="http://www.w3.org/2000/svg"/>');
+  });
+});

package/src/icons/beachball/svg/svg.ts

@@ -0,0 +1,10 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+export function svg (type: string): Element {
+  return document.createElementNS(SVG_NS, type);
+}

package/src/icons/beachball/types.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export type Seeder = () => number;
+
+export type ColorGen = (alpha?: number) => string;

package/src/icons/index.ts

@@ -0,0 +1,5 @@
+// Copyright 2018-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { beachballIcon } from './beachball/index.js';
+export { polkadotIcon } from './polkadot.js';

package/src/icons/polkadot.spec.ts

@@ -0,0 +1,35 @@
+// Copyright 2018-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import { polkadotIcon } from './polkadot.js';
+
+describe('polkadotIcon', (): void => {
+  it('generates the correct points from known', (): void => {
+    expect(
+      polkadotIcon('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX', { isAlternative: false })
+    ).toEqual([
+      { cx: 32, cy: 32, fill: '#eee', r: 32 },
+      { cx: 32, cy: 8, fill: 'hsl(196, 65%, 53%)', r: 5 },
+      { cx: 32, cy: 20, fill: 'hsl(320, 65%, 53%)', r: 5 },
+      { cx: 21.607695154586736, cy: 14, fill: 'transparent', r: 5 },
+      { cx: 11.215390309173472, cy: 20, fill: 'hsl(112, 65%, 15%)', r: 5 },
+      { cx: 21.607695154586736, cy: 26, fill: 'hsl(22, 65%, 15%)', r: 5 },
+      { cx: 11.215390309173472, cy: 32, fill: 'hsl(213, 65%, 15%)', r: 5 },
+      { cx: 11.215390309173472, cy: 44, fill: 'hsl(163, 65%, 53%)', r: 5 },
+      { cx: 21.607695154586736, cy: 38, fill: 'hsl(213, 65%, 53%)', r: 5 },
+      { cx: 21.607695154586736, cy: 50, fill: 'hsl(185, 65%, 75%)', r: 5 },
+      { cx: 32, cy: 56, fill: 'hsl(163, 65%, 53%)', r: 5 },
+      { cx: 32, cy: 44, fill: 'hsl(213, 65%, 53%)', r: 5 },
+      { cx: 42.392304845413264, cy: 50, fill: 'hsl(213, 65%, 15%)', r: 5 },
+      { cx: 52.78460969082653, cy: 44, fill: 'hsl(112, 65%, 15%)', r: 5 },
+      { cx: 42.392304845413264, cy: 38, fill: 'hsl(22, 65%, 15%)', r: 5 },
+      { cx: 52.78460969082653, cy: 32, fill: 'transparent', r: 5 },
+      { cx: 52.78460969082653, cy: 20, fill: 'hsl(196, 65%, 53%)', r: 5 },
+      { cx: 42.392304845413264, cy: 26, fill: 'hsl(320, 65%, 53%)', r: 5 },
+      { cx: 42.392304845413264, cy: 14, fill: 'hsl(11, 65%, 35%)', r: 5 },
+      { cx: 32, cy: 32, fill: 'hsl(309, 65%, 53%)', r: 5 }
+    ]);
+  });
+});