update readme screenshot and examples

Author: MykolaGolubyev

README.md

@@ -1,3 +1,13 @@
+# Intro
+
+![screen example](documentation/rcv/static/screen-example.png)
+
+React Component to help with development of other react components.
+* Just a component, no build system: works with your setup seamlessly.
+* See your components at once in the different states.
+* Zoom-in into a single component for debug.
+* User defined theme switching for multi brand/theme development. 
+
 # Installation
 
 ```
@@ -6,9 +16,6 @@ npm install react-component-viewer --save-dev
 
 # React Component Viewer
 
-Is a React component to preview and develop your components.
-Use it in your CRA created app as a demo app.
-
 ```typescript 
 import * as React from 'react';
 
@@ -25,35 +32,45 @@ widgets
     .registerAsGrid('Links', 300, linksDemo)
     .registerAsTwoColumnTable('Forms', formsDemo)
     .registerAsTwoColumnTable('Buttons', buttonsDemo)
-    .registerSingle('Single Screen', profileScreenDemo)
-    .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
+    .registerAsRows('Inputs', inputsDemo);
 
 const layouts = new Registry('layouts');
-layouts
-    .registerSingle('Side by Side', sideBySideDemo);
-
-export function App() {
-    return (
-        <ComponentViewer registries={[widgets, layouts]}/>
-    );
+const endToEnd = new Registry('end to end');
+
+export class App extends React.Component {
+    render() {
+        return (
+            <ComponentViewer
+                registries={[widgets, layouts, endToEnd]}
+                dropDown={{
+                    label: 'Brand',
+                    items: [
+                        {label: 'Brand-A', hotKey: 'Alt 1'},
+                        {label: 'B-Brand', hotKey: 'Alt 2'}
+                    ],
+                    onSelect: this.onBrandSelect
+                }}
+            />
+        );
+    }
+
+    private onBrandSelect(brand: string) {
+        // ...
+    }
 }
 ```
 
-It will work with your build system, the language of your choice and style processing.
-
-![screen example](documentation/rcv/static/screen-example.png)
-
 # Demo functions
 
 Demo must be defined in a function that accepts `Registry`. Function should register components to display.
 
 ```typescript
 export function buttonsDemo(registry: Registry) {
     registry
-        .add('enabled', () => <Button label="click me" onClick={onClick}/>,
+        .add('primary', () => <Button primary label="click me" onClick={onClick}/>,
              `long description
              multiline markdown`)
-        .add('disabled', () => <Button label="click me" enabled={false} onClick={onClick}/>)
+        .add('secondary', () => <Button label="click me" onClick={onClick}/>);
 }
 ``` 
 

documentation/rcv/static/screen-example.png

@@ -16,20 +16,22 @@ widgets
     .registerAsGrid('Links', 300, linksDemo)
     .registerAsTwoColumnTable('Forms', formsDemo)
     .registerAsTwoColumnTable('Buttons', buttonsDemo)
-    .registerAsRows('Inputs', inputsDemo)
-    .registerAsTabs('Long Content', longContentDemo)
-    .registerSingle('Single Screen', profileScreenDemo)
-    .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
+    .registerAsRows('Inputs', inputsDemo);
 
 const layouts = new Registry('layouts');
 layouts
     .registerSingle('Side by Side', sideBySideDemo);
 
+const endToEnd = new Registry('end to end');
+endToEnd.registerAsTabs('Long Content', longContentDemo)
+    .registerSingle('Single Screen', profileScreenDemo)
+    .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
+
 export class App extends React.Component {
     render() {
         return (
             <ComponentViewer
-                registries={[widgets, layouts]}
+                registries={[widgets, layouts, endToEnd]}
                 dropDown={{
                     label: 'Brand',
                     items: [

src/App.tsx

@@ -1,4 +1,10 @@
 .button {
     padding: 8px;
     border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.button.primary {
+    background-color: #618be1;
+    color: #fafafa;
 }

src/demo-components/Button.css

@@ -3,13 +3,16 @@ import * as React from 'react';
 import './Button.css';
 
 export interface Props {
+    primary?: boolean;
     label: string;
     onClick: () => void;
 }
 
-export function Button({label, onClick}: Props) {
+export function Button({label, primary, onClick}: Props) {
+    const className = 'button' + (primary ? ' primary' : '');
+
     return (
-        <div className="button" onClick={onClick}>
+        <div className={className} onClick={onClick}>
             {label}
         </div>
     );

src/demo-components/Button.tsx

@@ -9,16 +9,8 @@ function onClick() {
 
 export function buttonsDemo(registry: Registry) {
     registry
-        .description(`primary buttons are used to define the main action`)
-        .add('enabled', () => <Button label="click me" onClick={onClick}/>,
+        .add('primary', () => <Button primary label="click me" onClick={onClick}/>,
              `long description
              multiline markdown`)
-        .add('disabled', () => <Button label="click me" onClick={onClick}/>)
-        .description(`
-        secondary buttons are for extra information and miscellaneous actions
-        `)
-        .add('enabled 2', () => <Button label="click me" onClick={onClick}/>,
-             `long description
-             multiline markdown`)
-        .add('disabled 2', () => <Button label="click me" onClick={onClick}/>);
+        .add('secondary', () => <Button label="click me" onClick={onClick}/>);
 }

src/demos/buttons.tsx

@@ -21,6 +21,7 @@
         "jsdoc-format": true,
         "jsx-no-lambda": false,
         "jsx-no-multiline-js": false,
+        "jsx-boolean-value": [true, "never"],
         "label-position": true,
         "max-line-length": [ true, 120 ],
         "member-ordering": [