Cleanup shared, consistency with standards (#309)

* Cleanup shared, consistency with standards

* Re-add item

* Cleanup webpack demos

package.json

@@ -18,13 +18,13 @@
     "docs:release": "polkadot-ci-ghact-docs",
     "lint": "polkadot-dev-run-lint",
     "clean": "polkadot-dev-clean-build",
-    "demo:identicon:react": "yarn build:ts && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080",
-    "demo:identicon:vue": "yarn build:ts && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080",
-    "example:rn:packager": "yarn build:split:code && cd packages/exampleReactNative && yarn copy-workspace-packages && yarn start",
+    "demo:identicon:react": "yarn build && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080",
+    "demo:identicon:vue": "yarn build && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080",
+    "example:rn:packager": "yarn build && cd packages/exampleReactNative && yarn copy-workspace-packages && yarn start",
     "example:rn:ios": "cd packages/exampleReactNative && cd ios && pod install && cd .. && yarn ios",
     "example:rn:android": "cd packages/exampleReactNative && yarn android",
-    "example:react": "yarn build:ts && cd packages/example-react && webpack --config webpack.config.js",
-    "example:vue": "yarn build:ts && cd packages/example-vue && webpack --config webpack.config.js",
+    "example:react": "yarn build && cd packages/example-react && webpack --config webpack.config.js",
+    "example:vue": "yarn build && cd packages/example-vue && webpack --config webpack.config.js",
     "postinstall": "polkadot-dev-yarn-only",
     "test": "polkadot-dev-run-test --coverage --runInBand",
     "test:one": "polkadot-dev-run-test"
@@ -41,6 +41,7 @@
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
     "react-native": "^0.62.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "webpack-serve": "^3.2.0"
   }
 }

packages/react-identicon/index.html

@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="demo"></div>
-    <script src="./demo.js"></script>
+    <script src="./build/Demo.js"></script>
   </body>
 </html>

packages/react-identicon/src/Demo.tsx

@@ -20,13 +20,28 @@ export default class Demo extends React.PureComponent {
       );
     }
 
-    return identities.map((value, index): React.ReactNode => (
-      <IdentityIcon
-        key={value.toString()}
-        theme={THEMES[index % THEMES.length] as 'empty'}
-        value={value}
-      />
-    ));
+    return (
+      <div>
+        <div>
+          {identities.map((value, index): React.ReactNode => (
+            <IdentityIcon
+              key={value.toString()}
+              theme={THEMES[index % THEMES.length] as 'empty'}
+              value={value}
+            />
+          ))}
+        </div>
+        <div>
+          {THEMES.map((theme): React.ReactNode => (
+            <IdentityIcon
+              key={theme}
+              theme={theme as 'empty'}
+              value='5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'
+            />
+          ))}
+        </div>
+      </div>
+    );
   }
 }
 

packages/react-identicon/src/icons/Beachball.tsx

@@ -5,13 +5,13 @@
 import { Props } from '../types';
 
 import React, { useCallback } from 'react';
-import generate from '@polkadot/ui-shared/beachballIcon';
+import { beachballIcon } from '@polkadot/ui-shared';
 
 function Beachball ({ address, className, size, style }: Props): React.ReactElement<Props> {
   const updateElem = useCallback(
     (node: HTMLDivElement): void => {
       node && node.appendChild(
-        generate(address, size)
+        beachballIcon(address, { isAlternative: false, size })
       );
     },
     [address, size]

packages/react-identicon/src/icons/Polkadot.tsx

@@ -1,5 +1,5 @@
 // Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
-// Copyright 2018 @polkadot/react-identicon authors & contributors
+// Copyright 2018-2020 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -16,11 +16,11 @@
 //   - Move constants to file-level
 //   - Overall it is now just a static component, expecting an address as an input value
 
-import { Circle } from '@polkadot/ui-shared/types';
+import { Circle } from '@polkadot/ui-shared/icons/types';
 import { Props as BaseProps } from '../types';
 
 import React from 'react';
-import generateIcon from '@polkadot/ui-shared/polkadotIcon';
+import { polkadotIcon } from '@polkadot/ui-shared';
 
 interface Props extends BaseProps {
   isAlternative?: boolean;
@@ -51,7 +51,7 @@ function Identicon ({ address, className, isAlternative = false, size, style }:
         viewBox='0 0 64 64'
         width={size}
       >
-        {generateIcon(address, { isSixPoint: isAlternative }).map(renderCircle)}
+        {polkadotIcon(address, { isAlternative }).map(renderCircle)}
       </svg>
     </div>
   );

packages/react-identicon/src/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2018 @polkadot/react-identicon authors & contributors
+// Copyright 2018-2020 @polkadot/react-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-identicon/webpack.config.js

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
 
 const ENV = process.env.NODE_ENV || 'development';
@@ -25,8 +24,8 @@ module.exports = {
     ]
   },
   output: {
-    filename: './demo.js',
-    path: __dirname
+    filename: './Demo.js',
+    path: path.join(__dirname, 'build')
   },
   plugins: [],
   resolve: {

packages/reactnative-identicon/src/icons/Polkadot.tsx

@@ -1,14 +1,14 @@
-// Copyright 2018 @polkadot/reactnative-identicon authors & contributors
+// Copyright 2018-2020 @polkadot/reactnative-identicon 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 { Circle as CircleType } from '@polkadot/ui-shared/types';
+import { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
 import { Props as BaseProps } from '../types';
 
 import React from 'react';
 import { View } from 'react-native';
 import Svg, { Circle as SvgCircle } from 'react-native-svg';
-import generateIcon from '@polkadot/ui-shared/polkadotIcon';
+import { polkadotIcon } from '@polkadot/ui-shared';
 
 interface Props extends BaseProps {
   isAlternative?: boolean;
@@ -35,7 +35,7 @@ export default function Identicon ({ address, isAlternative = false, size }: Pro
         viewBox='0 0 64 64'
         width={size}
       >
-        {generateIcon(address, { isSixPoint: isAlternative }).map(renderCircle)}
+        {polkadotIcon(address, { isAlternative }).map(renderCircle)}
       </Svg>
     </View>
   );

packages/reactnative-identicon/src/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2018 @polkadot/reactnative-identicon authors & contributors
+// Copyright 2018-2020 @polkadot/reactnative-identicon authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/ui-keyring/src/options/types.ts

@@ -5,8 +5,6 @@
 import { KeyringItemType, KeyringStruct } from '../types';
 
 export interface KeyringSectionOption {
-  className?: string;
-  disabled?: boolean;
   key: string | null;
   name: string;
   value: string | null;

packages/ui-shared/README.md

@@ -1,3 +1,3 @@
 # @polkadot/ui-shared
 
-Shared logic for various logic, i.e. for identicon generation
+Shared logic for various logic. For identicon generation used inside the `@polkadot/{react, reactnative, vue}-identicon` icons.

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';

packages/vue-identicon/index.html

@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="demo"></div>
-    <script src="./build/demo.js"></script>
+    <script src="./build/Demo.js"></script>
   </body>
 </html>

packages/vue-identicon/src/icons/Beachball.ts

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import Vue from 'vue';
-import generate from '@polkadot/ui-shared/beachballIcon';
+import { beachballIcon } from '@polkadot/ui-shared';
 
 interface Data {
   html: string;
@@ -25,7 +25,7 @@ export const Beachball = Vue.extend({
   },
   methods: {
     createHtml: function (): void {
-      this.html = generate(this.address, this.size).outerHTML;
+      this.html = beachballIcon(this.address, this.size).outerHTML;
     }
   },
   props: ['address', 'size'],

packages/vue-identicon/src/icons/Polkadot.ts

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import Vue from 'vue';
-import generateIcon from '@polkadot/ui-shared/polkadotIcon';
+import { polkadotIcon } from '@polkadot/ui-shared';
 
 interface Data {
   svgHtml: string;
@@ -25,7 +25,7 @@ export const Polkadot = Vue.extend({
   },
   methods: {
     createSvgHtml: function (): void {
-      const circles = generateIcon(this.address, { isSixPoint: this.isAlternative || false }).map(({ cx, cy, fill, r }) =>
+      const circles = polkadotIcon(this.address, { isAlternative: this.isAlternative || false }).map(({ cx, cy, fill, r }) =>
         `<circle cx=${cx} cy=${cy} fill="${fill}" r=${r} />`
       ).join('');