updated readme

Author: MykolaGolubyev

README.md

@@ -1,12 +1,15 @@
 # Intro
 
+```typescript
+import { ComponentViewer } from 'react-component-viewer';
+```
+
 ![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. 
+React Component to help you with development of other React components.
+* just a component, no separate build system,
+* observe component states all at once or zoom into a single component or a screen for debugging,
+* user defined theme switching for multi brand/theme development. 
 
 # Installation
 
@@ -16,7 +19,7 @@ npm install react-component-viewer --save-dev
 
 # CRA Example
 
-``` typescript
+```typescript
 import * as React from 'react';
 
 import { Registries, ComponentViewer } from 'react-component-viewer';
@@ -27,17 +30,16 @@ import { profileScreenDemo } from './demos/profileScreen';
 import { formsDemo } from './demos/forms';
 import { sideBySideDemo } from './demos/sideBySide';
 
-const registries = new Registries();
-registries.add('widgets')
+const registries = new Registries({componentWrapper: DemoWrapper});
+registries.add('components')
     .registerAsGrid('Links', 300, linksDemo)
-    .registerAsTwoColumnTable('Forms', formsDemo)
     .registerAsTwoColumnTable('Buttons', buttonsDemo)
     .registerAsRows('Inputs', inputsDemo);
 
 registries.add('layouts')
-    .registerSingle('Side by Side', sideBySideDemo);
+    .registerAsRows('Side by Side', sideBySideDemo);
 
-registries.add('end to end')
+registries.add('screens')
     .registerSingle('Single Screen', profileScreenDemo)
     .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
 
@@ -50,29 +52,7 @@ export class App extends React.Component {
 }
 ```
 
-# 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('primary', () => <Button primary label="click me" onClick={onClick}/>,
-             `long description
-             multiline markdown`)
-        .add('secondary', () => <Button label="click me" onClick={onClick}/>);
-}
-``` 
-
-# Registration methods
-
-`registerAsGrid` name, minWidth, demoFunction
-
-`registerAsRows` name, demoFunction
-
-`registerAsTwoColumnTable` name, demoFunction
-
-`registerAsTabs` name, demoFunction
+# Read more
 
-`registerAsSingle` name, demoFunction
+[More details explanation](https://medium.com/@mykolagolubyev/react-component-viewer-ff7cf793695a) 
 

documentation/rcv/static/screen-example.png

@@ -5,22 +5,20 @@ import { ComponentViewer } from './components';
 import { buttonsDemo } from './demos/buttons';
 import { linksDemo } from './demos/links';
 import { profileScreenDemo } from './demos/profileScreen';
-import { formsDemo } from './demos/forms';
 import { sideBySideDemo } from './demos/sideBySide';
 import { inputsDemo } from './demos/inputs';
 import { WrapperProps } from './components/registry/componentWrapper';
 
 const registries = new Registries({componentWrapper: DemoWrapper});
-registries.add('widgets')
+registries.add('components')
     .registerAsGrid('Links', 300, linksDemo)
-    .registerAsTwoColumnTable('Forms', formsDemo)
     .registerAsTwoColumnTable('Buttons', buttonsDemo)
     .registerAsRows('Inputs', inputsDemo);
 
 registries.add('layouts')
-    .registerSingle('Side by Side', sideBySideDemo);
+    .registerAsRows('Side by Side', sideBySideDemo);
 
-registries.add('end to end')
+registries.add('screens')
     .registerSingle('Single Screen', profileScreenDemo)
     .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);