Swap to eslint (#154)

* 311 problems (173 errors, 138 warnings)

* Make a start...

* swap to react config

* Literally a handful left

* Clean.

* any removal

* Use Record

* Adjust versions

* Update with latest eslint-standard ruleset

* Update defaults.ts

packages/ui-identicon/src/Demo.tsx

@@ -9,8 +9,8 @@ import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto';
 import IdentityIcon from '.';
 
 export default class Demo extends React.PureComponent {
-  render () {
-    const identities: Array<string> = [];
+  public render (): React.ReactNode {
+    const identities: string[] = [];
 
     while (identities.length !== 50) {
       identities.push(
@@ -18,7 +18,7 @@ export default class Demo extends React.PureComponent {
       );
     }
 
-    return identities.map((value) => (
+    return identities.map((value): React.ReactNode => (
       <IdentityIcon
         key={value.toString()}
         theme='jdenticon'

packages/ui-identicon/src/Identicon.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Prefix } from '@polkadot/util-crypto/address/types';
-import { IdentityProps as Props } from './types';
+import { IdentityProps as Props, Props as ComponentProps } from './types';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -16,17 +16,17 @@ import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
 
 const Fallback = Beachball;
 
-type State = {
-  address: string,
-  publicKey: string
-};
+interface State {
+  address: string;
+  publicKey: string;
+}
 
 const DEFAULT_SIZE = 64;
-const Components: { [index: string]: React.ComponentType<any> } = {
-  'beachball': Beachball,
-  'jdenticon': Jdenticon,
-  'polkadot': Polkadot,
-  'substrate': Jdenticon
+const Components: { [index: string]: React.ComponentType<ComponentProps> } = {
+  beachball: Beachball,
+  jdenticon: Jdenticon,
+  polkadot: Polkadot,
+  substrate: Jdenticon
 };
 const Wrapper = styled.div`
   cursor: copy;
@@ -59,18 +59,18 @@ const Wrapper = styled.div`
 `;
 
 export default class IdentityIcon extends React.PureComponent<Props, State> {
-  state: State = {
+  public state: State = {
     address: '',
     publicKey: '0x'
   };
 
   private static prefix?: Prefix = undefined;
 
-  static setDefaultPrefix (prefix: Prefix) {
+  public static setDefaultPrefix (prefix: Prefix): void {
     IdentityIcon.prefix = prefix;
   }
 
-  static getDerivedStateFromProps ({ prefix = IdentityIcon.prefix, value }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ prefix = IdentityIcon.prefix, value }: Props, prevState: State): State | null {
     try {
       const address = isU8a(value) || isHex(value)
         ? encodeAddress(value, prefix)
@@ -91,7 +91,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     }
   }
 
-  render () {
+  public render (): React.ReactNode {
     const { address } = this.state;
     const wrapped = this.getWrapped(this.state);
 
@@ -107,7 +107,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
       );
   }
 
-  private getWrapped ({ address, publicKey }: State) {
+  private getWrapped ({ address, publicKey }: State): React.ReactNode {
     const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
     const Component = !address
       ? Empty

packages/ui-identicon/src/beachball/colors.spec.ts

@@ -7,14 +7,14 @@ import { ColorGen } from './types';
 import newSeeder from './seeder';
 import newColors from './colors';
 
-describe('colors', () => {
+describe('colors', (): void => {
   let colors: ColorGen;
 
-  beforeEach(() => {
+  beforeEach((): void => {
     colors = newColors(newSeeder());
   });
 
-  it('generates using default alpha', () => {
+  it('generates using default alpha', (): void => {
     expect(
       colors()
     ).toEqual(
@@ -23,7 +23,7 @@ describe('colors', () => {
     );
   });
 
-  it('applies specified alpha', () => {
+  it('applies specified alpha', (): void => {
     expect(
       colors(0.5)
     ).toEqual(
@@ -32,7 +32,7 @@ describe('colors', () => {
     );
   });
 
-  it('rolates colors', () => {
+  it('rolates colors', (): void => {
     colors();
 
     expect(
@@ -40,7 +40,7 @@ describe('colors', () => {
     ).not.toEqual('hsla(166.70000000000005, 98.6%, 27.6%, 0.9)');
   });
 
-  it('works in edge conditions (0xff)', () => {
+  it('works in edge conditions (0xff)', (): void => {
     const u8a = new Uint8Array(32);
 
     u8a.fill(255);

packages/ui-identicon/src/beachball/colors.ts

@@ -13,7 +13,7 @@ const WOBBLE = 30;
 
 export default function colors (seeder: Seeder): ColorGen {
   const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
-  const all = COLORS.map((hex) =>
+  const all = COLORS.map((hex): Color =>
     Color(hex).rotate(amount)
   );
 

packages/ui-identicon/src/beachball/container.spec.ts

@@ -4,38 +4,40 @@
 
 import container from './container';
 
-describe('container', () => {
-  it('applies default styles', () => {
+describe('container', (): void => {
+  it('applies default styles', (): void => {
     expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (container(100).style as any)._values
     ).toMatchObject({
-      'background': 'white',
+      background: 'white',
       'border-radius': '50px',
-      'display': 'inline-block',
-      'height': '100px',
-      'margin': '0px',
-      'overflow': 'hidden',
-      'padding': '0px',
-      'width': '100px'
+      display: 'inline-block',
+      height: '100px',
+      margin: '0px',
+      overflow: 'hidden',
+      padding: '0px',
+      width: '100px'
     });
   });
 
-  it('overrides with supplied styles', () => {
+  it('overrides with supplied styles', (): void => {
     expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (container(50, 'black', '', { display: 'block' }).style as any)._values
     ).toMatchObject({
-      'background': 'black',
+      background: 'black',
       'border-radius': '25px',
-      'display': 'block',
-      'height': '50px',
-      'margin': '0px',
-      'overflow': 'hidden',
-      'padding': '0px',
-      'width': '50px'
+      display: 'block',
+      height: '50px',
+      margin: '0px',
+      overflow: 'hidden',
+      padding: '0px',
+      width: '50px'
     });
   });
 
-  it('applies the specified className', () => {
+  it('applies the specified className', (): void => {
     expect(
       container(100, 'blue', 'testClass').className
     ).toEqual('testClass');

packages/ui-identicon/src/beachball/container.ts

@@ -19,8 +19,8 @@ export default function container (diameter: number, background: string = 'white
   element.className = className;
   element.style.background = background;
 
-  Object.keys(style).forEach((key: any) => {
-    element.style[key] = style[key];
+  Object.keys(style).forEach((key: unknown): void => {
+    element.style[key as number] = style[key as number];
   });
 
   return element;

packages/ui-identicon/src/beachball/defaults.ts

@@ -3,17 +3,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-const COLORS: Array<string> = [
-  // '#01888C', // teal
-  // '#FC7500', // bright orange
-  // '#034F5D', // dark teal
-  // '#F73F01', // orangered
-  // '#FC1960', // magenta
-  // '#C7144C', // raspberry
-  // '#F3C100', // goldenrod
-  // '#1598F2', // lightning blue
-  // '#2465E1', // sail blue
-  // '#F19E02' // gold
+const COLORS: string[] = [
   // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
   '#ffe119', '#4363d8', '#f58231', '#fabebe', '#e6beff', '#800000', '#000075', '#a9a9a9', '#ffffff', '#000000'
 ];

packages/ui-identicon/src/beachball/index.spec.ts

@@ -6,8 +6,8 @@ import xmlserializer from 'xmlserializer';
 
 import identicon from '.';
 
-describe('identicon', () => {
-  it('generates a basic [0,..,0] identicon', () => {
+describe('identicon', (): void => {
+  it('generates a basic [0,..,0] identicon', (): void => {
     expect(
       xmlserializer.serializeToString(
         identicon(new Uint8Array(32))
@@ -17,7 +17,7 @@ describe('identicon', () => {
     );
   });
 
-  it('allows overrides', () => {
+  it('allows overrides', (): void => {
     expect(
       xmlserializer.serializeToString(
         identicon(new Uint8Array(32), 100, 'testClass', { display: 'block' })

packages/ui-identicon/src/beachball/seeder.spec.ts

@@ -6,20 +6,20 @@ import { Seeder } from './types';
 
 import newSeeder from './seeder';
 
-describe('seeder', () => {
+describe('seeder', (): void => {
   let seeder: Seeder;
 
-  beforeEach(() => {
+  beforeEach((): void => {
     seeder = newSeeder(new Uint8Array([1, 2, 3, 4]));
   });
 
-  it('generates numbers using 2 spaces', () => {
+  it('generates numbers using 2 spaces', (): void => {
     expect(
       seeder()
     ).toEqual(0.0156402587890625);
   });
 
-  it('generates numbers using 2 spaces (incremented)', () => {
+  it('generates numbers using 2 spaces (incremented)', (): void => {
     seeder();
 
     expect(

packages/ui-identicon/src/beachball/seeder.ts

@@ -15,7 +15,7 @@ export default function seeder (_seed: string | Uint8Array = new Uint8Array(32))
 
   let index = (seed[Math.floor(seed.length / 2)] % seed.length) - 1;
 
-  const next = () => {
+  const next = (): number => {
     index += 1;
 
     if (index === seed.length) {

packages/ui-identicon/src/beachball/shape/circle.spec.ts

@@ -7,8 +7,8 @@ import xmlserializer from 'xmlserializer';
 import seeder from '../seeder';
 import circle from './circle';
 
-describe('circle', () => {
-  it('creates a circle shape', () => {
+describe('circle', (): void => {
+  it('creates a circle shape', (): void => {
     expect(
       xmlserializer.serializeToString(
         circle(seeder(), 'blue', 50, 2)

packages/ui-identicon/src/beachball/svg/circle.spec.ts

@@ -6,8 +6,8 @@ import xmlserializer from 'xmlserializer';
 
 import circle from './circle';
 
-describe('circle', () => {
-  it('creates a basic SVG circle element', () => {
+describe('circle', (): void => {
+  it('creates a basic SVG circle element', (): void => {
     expect(
       xmlserializer.serializeToString(
         circle(123, 12, 34)

packages/ui-identicon/src/beachball/svg/element.spec.ts

@@ -6,8 +6,8 @@ import xmlserializer from 'xmlserializer';
 
 import element from './element';
 
-describe('element', () => {
-  it('creates a basic SVG element', () => {
+describe('element', (): void => {
+  it('creates a basic SVG element', (): void => {
     expect(
       xmlserializer.serializeToString(
         element(123)

packages/ui-identicon/src/beachball/svg/rect.spec.ts

@@ -6,8 +6,8 @@ import xmlserializer from 'xmlserializer';
 
 import rect from './rect';
 
-describe('rect', () => {
-  it('creates a basic SVG rect element', () => {
+describe('rect', (): void => {
+  it('creates a basic SVG rect element', (): void => {
     expect(
       xmlserializer.serializeToString(
         rect(123)

packages/ui-identicon/src/beachball/svg/svg.spec.ts

@@ -6,8 +6,8 @@ import xmlserializer from 'xmlserializer';
 
 import svg from './svg';
 
-describe('svg', () => {
-  it('creates a basic SVG element', () => {
+describe('svg', (): void => {
+  it('creates a basic SVG element', (): void => {
     expect(
       xmlserializer.serializeToString(
         svg('rect')

packages/ui-identicon/src/beachball/types.ts

@@ -4,6 +4,6 @@
 
 export type Seeder = () => number;
 
-export type ColorGen = {
-  (alpha?: number): string
-};
+export interface ColorGen {
+  (alpha?: number): string;
+}

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

@@ -9,7 +9,7 @@ import React from 'react';
 import identicon from '../beachball';
 
 export default class Beachball extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, style } = this.props;
 
     return (

packages/ui-identicon/src/icons/Empty.tsx

@@ -7,7 +7,7 @@ import { Props } from '../types';
 import React from 'react';
 
 export default class Empty extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, size, style } = this.props;
 
     return (

packages/ui-identicon/src/icons/Jdenticon.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import jdenticon from 'jdenticon';
 
 export default class Jdenticon extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { className, publicKey, size, style } = this.props;
 
     return (

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

@@ -21,16 +21,16 @@ import { Props as BaseProps } from '../types';
 import React from 'react';
 import { blake2AsU8a, decodeAddress } from '@polkadot/util-crypto';
 
-type Props = BaseProps & {
-  sixPoint?: boolean
-};
+interface Props extends BaseProps {
+  sixPoint?: boolean;
+}
 
-type Scheme = {
-  freq: number,
-  colors: Array<number>
-};
+interface Scheme {
+  freq: number;
+  colors: number[];
+}
 
-const blake2 = (value: Uint8Array) =>
+const blake2 = (value: Uint8Array): Uint8Array =>
   blake2AsU8a(value, 512);
 
 const s = 64;
@@ -49,7 +49,7 @@ const schema: { [index: string]: Scheme } = {
 };
 
 export default class Identicon extends React.PureComponent<Props> {
-  render () {
+  public render (): React.ReactNode {
     const { address, className, size, style } = this.props;
     const xy = this.getCircleXY();
     const colors = this.getColors();
@@ -68,7 +68,7 @@ export default class Identicon extends React.PureComponent<Props> {
         >
           {this.renderCircle(s / 2, s / 2, s / 2, '#eee', -1)}
           {
-            xy.map(([x, y], index) =>
+            xy.map(([x, y], index): React.ReactNode =>
               this.renderCircle(x, y, z, colors[index], index)
             )
           }
@@ -77,7 +77,7 @@ export default class Identicon extends React.PureComponent<Props> {
     );
   }
 
-  private renderCircle (cx: number, cy: number, r: number, fill: string, key: number) {
+  private renderCircle (cx: number, cy: number, r: number, fill: string, key: number): React.ReactNode {
     return (
       <circle
         key={key}
@@ -89,7 +89,7 @@ export default class Identicon extends React.PureComponent<Props> {
     );
   }
 
-  private getCircleXY () {
+  private getCircleXY (): [number, number][] {
     const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation();
 
     return [
@@ -115,7 +115,7 @@ export default class Identicon extends React.PureComponent<Props> {
     ];
   }
 
-  private getRotation () {
+  private getRotation (): { r: number; ro2: number; r3o4: number; ro4: number; rroot3o2: number; rroot3o4: number } {
     const { sixPoint = false } = this.props;
     const r = sixPoint
       ? (s / 2 / 8 * 5)
@@ -129,15 +129,15 @@ export default class Identicon extends React.PureComponent<Props> {
     return { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 };
   }
 
-  private getColors () {
+  private getColors (): string[] {
     const { address } = this.props;
-    const total = Object.keys(schema).map(k => schema[k].freq).reduce((a, b) => a + b);
-    const id = Array.from(blake2(decodeAddress(address))).map((x, i) => (x + 256 - zero[i]) % 256);
+    const total = Object.keys(schema).map((k): number => schema[k].freq).reduce((a, b): number => a + b);
+    const id = Array.from(blake2(decodeAddress(address))).map((x, i): number => (x + 256 - zero[i]) % 256);
     const d = Math.floor((id[30] + id[31] * 256) % total);
     const rot = (id[28] % 6) * 3;
     const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
     const scheme = this.findScheme(d);
-    const palette = Array.from(id).map((x, i) => {
+    const palette = Array.from(id).map((x, i): string => {
       const b = (x + i % 28 * 58) % 256;
 
       if (b === 0) {
@@ -152,7 +152,7 @@ export default class Identicon extends React.PureComponent<Props> {
       return `hsl(${h}, ${sat}%, ${l}%)`;
     });
 
-    return scheme.colors.map((_, i) =>
+    return scheme.colors.map((_, i): string =>
       palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]
     );
   }
@@ -161,7 +161,7 @@ export default class Identicon extends React.PureComponent<Props> {
     let cum = 0;
     const ks = Object.keys(schema);
 
-    for (let i in ks) {
+    for (const i in ks) {
       cum += schema[ks[i]].freq;
 
       if (d < cum) {

packages/ui-identicon/src/index.ts

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { default as Identicon } from './Identicon';
+import Identicon from './Identicon';
 export * from './icons';
 
 export default Identicon;

packages/ui-identicon/src/types.ts

@@ -4,24 +4,23 @@
 
 import { Prefix } from '@polkadot/util-crypto/address/types';
 
-export type BaseProps = {
-  className?: string,
-  style?: {
-    [index: string]: any
-  }
-};
+export interface BaseProps {
+  className?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  style?: Record<string, any>;
+}
 
-export type Props = BaseProps & {
-  address: string,
-  publicKey: string,
-  size: number
-};
+export interface Props extends BaseProps {
+  address: string;
+  publicKey: string;
+  size: number;
+}
 
-export type IdentityProps = BaseProps & {
-  isHighlight?: boolean,
-  onCopy?: (value: string) => void,
-  prefix?: Prefix,
-  size?: number,
-  theme?: 'beachball' | 'jdenticon' | 'polkadot' | 'substrate',
-  value?: string | Uint8Array | null
-};
+export interface IdentityProps extends BaseProps {
+  isHighlight?: boolean;
+  onCopy?: (value: string) => void;
+  prefix?: Prefix;
+  size?: number;
+  theme?: 'beachball' | 'jdenticon' | 'polkadot' | 'substrate';
+  value?: string | Uint8Array | null;
+}

packages/ui-identicon/webpack.config.js

@@ -2,6 +2,7 @@
 // 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';