Cleanup shared, consistency with standards (#309)

* Cleanup shared, consistency with standards

* Re-add item

* Cleanup webpack demos

packages/ui-shared/src/icons/beachball/demo.ts

@@ -18,7 +18,7 @@ function generateIcon (seed: string = encodeAddress(randomAsU8a(32))): void {
   }
 
   element.appendChild(
-    identicon(seed, 100, 'padded')
+    identicon(seed, { isAlternative: false, size: 100 }, 'padded')
   );
 
   console.log(`Icon generated in ${(Date.now() - start)}ms`);

packages/ui-shared/src/icons/beachball/index.spec.ts

@@ -4,13 +4,13 @@
 
 import xmlserializer from 'xmlserializer';
 
-import identicon from '.';
+import generate from '.';
 
 describe('identicon', (): void => {
   it('generates a basic [0,..,0] identicon', (): void => {
     expect(
       xmlserializer.serializeToString(
-        identicon(new Uint8Array(32))
+        generate(new Uint8Array(32), { isAlternative: false, size: 256 })
       )
     ).toEqual(
       '<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>'
@@ -20,7 +20,7 @@ describe('identicon', (): void => {
   it('allows overrides', (): void => {
     expect(
       xmlserializer.serializeToString(
-        identicon(new Uint8Array(32), 100, 'testClass', { display: 'block' })
+        generate(new Uint8Array(32), { isAlternative: false, size: 100 }, 'testClass', { display: 'block' })
       )
     ).toEqual(
       '<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>'

packages/ui-shared/src/icons/beachball/index.ts

@@ -3,6 +3,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { Options } from '../types';
+
 import colors from './colors';
 import newContainer from './container';
 import newSeeder from './seeder';
@@ -10,19 +12,19 @@ import newShape from './shape/circle';
 import newElement from './svg/element';
 import { SHAPE_COUNT } from './defaults';
 
-export default function identicon (seed: string | Uint8Array, diameter = 256, className = '', style?: { [index: string]: string }): HTMLElement {
+export default function generate (seed: string | Uint8Array, { size = 256 }: Options, className = '', style?: { [index: string]: string }): HTMLElement {
   const seeder = newSeeder(seed);
   const colorGen = colors(seeder);
-  const outer = newContainer(diameter, 'white', className, style);
-  const container = newContainer(diameter, colorGen());
-  const svg = newElement(diameter);
+  const outer = newContainer(size, 'white', className, style);
+  const container = newContainer(size, colorGen());
+  const svg = newElement(size);
 
   outer.appendChild(container);
   container.appendChild(svg);
 
   for (let count = 0; count < SHAPE_COUNT; count++) {
     const fill = colorGen();
-    const shape = newShape(seeder, fill, diameter, count);
+    const shape = newShape(seeder, fill, size, count);
 
     svg.appendChild(shape);
   }

packages/ui-shared/src/icons/index.ts

@@ -0,0 +1,6 @@
+// Copyright 2018-2020 @polkadot/ui-shared authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export { default as beachballIcon } from './beachball';
+export { default as polkadotIcon } from './polkadot';

packages/ui-shared/src/icons/polkadot.spec.ts

@@ -1,13 +1,13 @@
-// Copyright 2018 @polkadot/ui-shared authors & contributors
+// Copyright 2018-2020 @polkadot/ui-shared authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import generate from './polkadotIcon';
+import generate from './polkadot';
 
 describe('polkadotIcon', (): void => {
   it('generates the correct points from known', (): void => {
     expect(
-      generate('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX', { isSixPoint: false })
+      generate('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX', { isAlternative: false })
     ).toEqual([
       { cx: 32, cy: 32, fill: '#eee', r: 32 },
       { cx: 32, cy: 8, fill: 'hsl(196, 65%, 53%)', r: 5 },

packages/ui-shared/src/icons/polkadot.ts

@@ -1,5 +1,5 @@
 // Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
-// Copyright 2018 @polkadot/ui-shared authors & contributors
+// Copyright 2018-2020 @polkadot/ui-shared authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -7,14 +7,10 @@
 //
 // https://github.com/paritytech/oo7/blob/251ba2b7c45503b68eab4320c270b5afa9bccb60/packages/polkadot-identicon/src/index.jsx
 
-import { Circle } from './types';
+import { Circle, Options } from './types';
 
 import { blake2AsU8a, decodeAddress } from '@polkadot/util-crypto';
 
-interface Options {
-  isSixPoint: boolean;
-}
-
 interface Scheme {
   freq: number;
   colors: number[];
@@ -135,11 +131,11 @@ function getColors (address: string): string[] {
 /**
  * @description Generate a array of the circles that make up an identicon
  */
-export default function generate (address: string, { isSixPoint }: Options): Circle[] {
+export default function generate (address: string, { isAlternative }: Options): Circle[] {
   const colors = getColors(address);
 
   return [OUTER_CIRCLE].concat(
-    getCircleXY(isSixPoint).map(([cx, cy], index): Circle => ({
+    getCircleXY(isAlternative).map(([cx, cy], index): Circle => ({
       cx, cy, fill: colors[index], r: Z
     }))
   );

packages/ui-shared/src/icons/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2018 @polkadot/ui-shared authors & contributors
+// Copyright 2018-2020 @polkadot/ui-shared authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -8,3 +8,8 @@ export interface Circle {
   fill: string;
   r: number;
 }
+
+export interface Options {
+  isAlternative: boolean;
+  size?: number;
+}

packages/ui-shared/src/index.ts

@@ -0,0 +1,5 @@
+// Copyright 2018-2020 @polkadot/ui-shared authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export * from './icons';