Cleanup shared, consistency with standards (#309)

* Cleanup shared, consistency with standards * Re-add item * Cleanup webpack demos
2026-04-21 23:47:58 +00:00 · 2020-04-12 09:06:32 +02:00
parent a1aa280cb9
commit 7251b1f763
46 changed files with 688 additions and 112 deletions
@@ -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"
  }
 }
@@ -12,6 +12,6 @@
  </head>
  <body>
    <div id="demo"></div>
-    <script src="./demo.js"></script>
+    <script src="./build/Demo.js"></script>
  </body>
 </html>
@@ -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>
+    );
  }
 }

@@ -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]
@@ -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>
  );
@@ -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.

@@ -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: {
@@ -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>
  );
@@ -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.

@@ -5,8 +5,6 @@
 import { KeyringItemType, KeyringStruct } from '../types';

 export interface KeyringSectionOption {
-  className?: string;
-  disabled?: boolean;
  key: string | null;
  name: string;
  value: string | null;
@@ -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.
@@ -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`);
@@ -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>'
@@ -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);
  }
@@ -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';
@@ -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 },
@@ -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
    }))
  );
@@ -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;
+}
@@ -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';
@@ -12,6 +12,6 @@
  </head>
  <body>
    <div id="demo"></div>
-    <script src="./build/demo.js"></script>
+    <script src="./build/Demo.js"></script>
  </body>
 </html>
@@ -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'],
@@ -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('');