global registries config

Author: MykolaGolubyev

src/App.tsx

@@ -1,37 +1,34 @@
 import * as React from 'react';
 
-import { Registry } from './components';
+import { Registries } from './components';
 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 { longContentDemo } from './demos/longContent';
 import { inputsDemo } from './demos/inputs';
 import { WrapperProps } from './components/registry/componentWrapper';
 
-const widgets = new Registry('widgets', {componentWrapper: DemoWrapper});
-widgets
+const registries = new Registries({componentWrapper: DemoWrapper});
+registries.add('widgets')
     .registerAsGrid('Links', 300, linksDemo)
     .registerAsTwoColumnTable('Forms', formsDemo)
     .registerAsTwoColumnTable('Buttons', buttonsDemo)
     .registerAsRows('Inputs', inputsDemo);
 
-const layouts = new Registry('layouts');
-layouts
+registries.add('layouts')
     .registerSingle('Side by Side', sideBySideDemo);
 
-const endToEnd = new Registry('end to end');
-endToEnd.registerAsTabs('Long Content', longContentDemo)
+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]}
+                registries={registries}
                 dropDown={{
                     label: 'Brand',
                     items: [

src/components/registry/Registries.ts

@@ -1,12 +1,24 @@
 import { Registry } from '../';
+import { RegistryConfig } from './Registry';
 
 export class Registries {
-    public registries: Registry[];
-    private _names: string[];
+    private readonly _names: string[];
+    private readonly _config: RegistryConfig;
 
-    constructor(registries: Registry[]) {
-        this.registries = registries;
-        this._names = registries.map(r => r.name);
+    public readonly registries: Registry[];
+
+    constructor(config?: RegistryConfig) {
+        this._config = config || {};
+        this.registries = [];
+        this._names = [];
+    }
+
+    add(name: string, config?: RegistryConfig) {
+        const registry = new Registry(name, {...this._config, ...config});
+        this.registries.push(registry);
+        this._names.push(name);
+
+        return registry;
     }
 
     get first() {

src/components/viewer/ComponentViewer.tsx

@@ -29,12 +29,11 @@ import { VisualizedActions } from '../actions/VisualizedActions';
 import './ComponentViewer.css';
 
 export interface Props {
-    registries: Registry[];
+    registries: Registries;
     dropDown?: ComponentViewerDropDown;
 }
 
 class ComponentViewer extends Component<Props, ComponentViewerState> {
-    private readonly registries: Registries;
     private readonly hotKeyBoundActions: HotKeyBoundActions;
 
     private stateCreator: ComponentViewerStateCreator;
@@ -44,8 +43,7 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
 
         const {registries} = this.props;
 
-        this.registries = new Registries(registries);
-        this.stateCreator = new ComponentViewerStateCreator(this.registries);
+        this.stateCreator = new ComponentViewerStateCreator(registries);
 
         this.state = this.stateFromUrl();
         this.hotKeyBoundActions = {
@@ -81,7 +79,7 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
     }
 
     renderSelectionPanelAndDemo(demoEntry: DemoEntry | null) {
-        const {dropDown} = this.props;
+        const {registries, dropDown} = this.props;
 
         const {
             registryName,
@@ -95,7 +93,7 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
             <div className="rcv-component-viewer">
                 <div className="rcv-registry-selection-panel">
                     <RegistrySelection
-                        names={this.registries.names}
+                        names={registries.names}
                         selectedName={registryName}
                         onSelect={this.selectRegistry}
                     />
@@ -296,8 +294,9 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
     }
 
     private findSelectedRegistry() {
+        const {registries} = this.props;
         const {registryName} = this.state;
-        return this.registries.registryByName(registryName);
+        return registries.registryByName(registryName);
     }
 
     private get demoNames() {

src/components/viewer/ComponentViewerStateCreator.test.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
 
-import { Registries, Registry } from '../';
+import { Registries } from '../';
 import { ComponentViewerStateCreator } from './ComponentViewerStateCreator';
 
 describe('ComponentViewerStateCreator', () => {
-    let registryA: Registry;
-    let registryB: Registry ;
-
     let registries: Registries;
 
     beforeAll(() => {
-        registryA = new Registry('core');
-        registryA.registerSingle('FirstC', (registry => registry.add('title-c-a', () => <div/>)));
-
-        registryB = new Registry('widgets');
-        registryA.registerSingle('FirstW', (registry => registry.add('title-w-a', () => <div/>)));
+        registries = new Registries();
+        registries.add('core')
+            .registerSingle('FirstC', (registry => registry.add('title-c-a', () => <div/>)));
+        registries.add('widgets')
+            .registerSingle('FirstW', (registry => registry.add('title-w-a', () => <div/>)));
 
-        registries = new Registries([registryA, registryB]);
     });
 
     it('should pick the first registry, first demo and demo entry if url has no query params', () => {