Add example-{react, vue} (#209)

* Add example-{react, vue}

* Update CHANGELOG.md

* Update README.md

packages/ui-keyring/src/options/KeyPair.tsx

@@ -1,77 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-keyring 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 React from 'react';
-import styled from 'styled-components';
-import IdentityIcon from '@polkadot/react-identicon';
-
-interface Props {
-  address: string;
-  className?: string;
-  isUppercase: boolean;
-  name: string;
-  style?: Record<string, string>;
-}
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  position: relative;
-  white-space: nowrap;
-
-  > .address {
-    display: inline-block;
-    flex: 1;
-    font-family: monospace;
-    margin-left: 1rem;
-    opacity: 0.5;
-    overflow: hidden;
-    text-align: right;
-    text-overflow: ellipsis;
-  }
-
-  > .icon {
-    position: absolute;
-    top: -9px;
-    left: 0;
-  }
-
-  > .name {
-    display: inline-block;
-    flex: 1 0;
-    margin-left: 3rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.uppercase {
-      text-transform: uppercase;
-    }
-  }
-`;
-
-export default class KeyPair extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { address, className, isUppercase, name, style } = this.props;
-
-    return (
-      <Wrapper
-        className={['ui--KeyPair', className].join(' ')}
-        style={style}
-      >
-        <IdentityIcon
-          className='icon'
-          size={32}
-          value={address}
-        />
-        <div className={`name ${isUppercase ? 'uppercase' : 'normalcase'}`}>
-          {name}
-        </div>
-        <div className='address'>
-          {address}
-        </div>
-      </Wrapper>
-    );
-  }
-}

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

@@ -40,10 +40,8 @@ class KeyringOption implements KeyringOptionInstance {
 
   public createOptionHeader (name: string): KeyringSectionOption {
     return {
-      className: 'header disabled',
       name,
       key: `header-${name.toLowerCase()}`,
-      text: name,
       value: null
     };
   }

packages/ui-keyring/src/options/item.tsx

@@ -4,12 +4,9 @@
 
 import { KeyringSectionOption } from './types';
 
-import React from 'react';
 import { isUndefined } from '@polkadot/util';
 
-import KeyPair from './KeyPair';
-
-export default function createItem (address: string, _name?: string, isUppercase = true): KeyringSectionOption {
+export default function createItem (address: string, _name?: string): KeyringSectionOption {
   const name = isUndefined(_name)
     ? (
       (address.length > 15)
@@ -21,13 +18,6 @@ export default function createItem (address: string, _name?: string, isUppercase
   return {
     key: address,
     name,
-    text: (
-      <KeyPair
-        address={address}
-        isUppercase={isUppercase}
-        name={name}
-      />
-    ),
     value: address
   };
 }

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

@@ -4,15 +4,11 @@
 
 import { KeyringItemType, KeyringStruct } from '../types';
 
-import React from 'react';
-
 export interface KeyringSectionOption {
   className?: string;
   disabled?: boolean;
-  content?: React.ReactNode;
   key: string | null;
   name: string;
-  text: React.ReactNode;
   value: string | null;
 }