Docs (#31)

Author: MykolaGolubyev

README.md

@@ -14,49 +14,39 @@ React Component to help with development of other react components.
 npm install react-component-viewer --save-dev 
 ```
 
-# React Component Viewer
+# CRA Example
 
-```typescript 
+``` typescript
 import * as React from 'react';
 
-import { Registry, ComponentViewer } from 'react-component-viewer';
+import { Registries, ComponentViewer } from 'react-component-viewer';
 
 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';
 
-const widgets = new Registry('widgets');
-widgets
+const registries = new Registries();
+registries.add('widgets')
     .registerAsGrid('Links', 300, linksDemo)
     .registerAsTwoColumnTable('Forms', formsDemo)
     .registerAsTwoColumnTable('Buttons', buttonsDemo)
     .registerAsRows('Inputs', inputsDemo);
 
-const layouts = new Registry('layouts');
-const endToEnd = new Registry('end to end');
+registries.add('layouts')
+    .registerSingle('Side by Side', sideBySideDemo);
+
+registries.add('end to end')
+    .registerSingle('Single Screen', profileScreenDemo)
+    .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
 
 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
-                }}
-            />
+            <ComponentViewer registries={registries}/>
         );
     }
-
-    private onBrandSelect(brand: string) {
-        // ...
-    }
 }
 ```
 

documentation/rcv/package-lock.json

@@ -9,20 +9,26 @@
     "start": "npm run develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
+    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
+    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
   },
   "dependencies": {
     "gatsby": "^2.0.76",
+    "gatsby-plugin-react-helmet": "^3.0.6",
     "marked": "^0.6.0",
     "prismjs": "^1.15.0",
     "react": "^16.5.1",
-    "react-dom": "^16.5.1"
+    "react-dom": "^16.5.1",
+    "react-helmet": "^5.2.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
   },
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "devDependencies": {
+    "gh-pages": "^2.0.1"
   }
 }

documentation/rcv/package.json

@@ -7,10 +7,11 @@ import {Zoomable} from "./Zoomable";
 import './Image.css'
 
 export function Image({path, description}) {
+    const fullPath = withPrefix(path);
     return (
         <Zoomable>
             <div className="image">
-                <img src={withPrefix(path)} alt={description}/>
+                <img src={fullPath} srcSet={fullPath + " 2x"} alt={description}/>
             </div>
         </Zoomable>
     )