add option to wrap components per registry

Author: MykolaGolubyev

src/App.tsx

@@ -10,7 +10,7 @@ import { sideBySideDemo } from './demos/sideBySide';
 import { longContentDemo } from './demos/longContent';
 import { inputsDemo } from './demos/inputs';
 
-const widgets = new Registry('widgets');
+const widgets = new Registry('widgets', {componentWrapper: DemoWrapper});
 widgets
     .registerAsGrid('Links', 300, linksDemo)
     .registerAsTwoColumnTable('Forms', formsDemo)
@@ -44,4 +44,16 @@ export class App extends React.Component {
     private onBrandSelect(brand: string) {
         console.log('selected brand', brand);
     }
+}
+
+interface Props {
+    children: JSX.Element | JSX.Element[];
+}
+
+function DemoWrapper({children}: Props) {
+    return (
+        <div className="component-demo-local-wrapper">
+            {children}
+        </div>
+    );
 }

src/components/registry/Registry.ts

@@ -6,16 +6,24 @@ import { TabsLayout } from '../layouts/TabsLayout';
 import { LayoutProps } from '../layouts/LayoutProps';
 import { LabelInstanceTableLayout } from '../layouts/LabelInstanceTableLayout';
 import { SingleItemLayout } from '../layouts/SingleItemLayout';
+import { wrapComponent } from './componentWrapper';
+
+export interface RegistryConfig {
+    componentWrapper?: React.ComponentType;
+}
 
 class Registry {
-    name: string;
-    _usedNames: string[] = [];
+    private readonly config?: RegistryConfig;
+    private readonly usedNames: string[] = [];
+    private readonly demoEntries: DemoEntry[] = [];
 
-    _demoEntries: DemoEntry[] = [];
-    _currentDemo?: DemoEntry;
+    private currentDemo?: DemoEntry;
 
-    constructor(name: string) {
+    readonly name: string;
+
+    constructor(name: string, config?: RegistryConfig) {
         this.name = name;
+        this.config = config;
     }
 
     registerAsGrid(name: string, minWidth: number, componentRegistrator: (registry: Registry) => void) {
@@ -49,27 +57,27 @@ class Registry {
              urlPrefix: string = '',
              layoutOpts: object = {}) {
 
-        if (this._usedNames.indexOf(name) !== -1) {
+        if (this.usedNames.indexOf(name) !== -1) {
             throw new Error(`name ${name} was already used`);
         }
 
-        this._currentDemo = new DemoEntry(name, layoutComponent, urlPrefix, layoutOpts);
-        this._demoEntries.push(this._currentDemo);
+        this.currentDemo = new DemoEntry(name, layoutComponent, urlPrefix, layoutOpts);
+        this.demoEntries.push(this.currentDemo);
 
-        this._usedNames.push(name);
+        this.usedNames.push(name);
 
         componentRegistrator(this);
 
         return this;
     }
 
     get names(): string[] {
-        return this._usedNames;
+        return this.usedNames;
     }
 
     description(markdown: string) {
-        if (this._currentDemo) {
-            this._currentDemo.description(markdown);
+        if (this.currentDemo) {
+            this.currentDemo.description(markdown);
         } else {
             throw new Error('call register method prior setting the description');
         }
@@ -78,8 +86,12 @@ class Registry {
     }
 
     add(title: string, component: React.ComponentType, description: string = '') {
-        if (this._currentDemo) {
-            this._currentDemo.add(title, description, component);
+        const componentToRegister = this.config && this.config.componentWrapper ?
+            wrapComponent(this.config.componentWrapper, component) :
+            component;
+
+        if (this.currentDemo) {
+            this.currentDemo.add(title, description, componentToRegister);
         } else {
             throw new Error('call register method prior adding elements');
         }
@@ -88,14 +100,14 @@ class Registry {
     }
 
     firstMiniAppByUrl(url: string): DemoEntry | null {
-        const byUrl = this._demoEntries
+        const byUrl = this.demoEntries
             .filter(entry => entry.isMiniApp() && url.startsWith(entry.urlPrefix));
 
         return byUrl.length > 0 ? byUrl[0] : null;
     }
 
     findByName(name: string): DemoEntry | null {
-        const byName = this._demoEntries
+        const byName = this.demoEntries
             .filter(entry => entry.name === name);
 
         if (byName.length === 0) {

src/components/registry/componentWrapper.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export function wrapComponent(Wrapper: React.ComponentType, Component: React.ComponentType) {
+    return () => (
+        <Wrapper>
+            <Component/>
+        </Wrapper>
+    );
+}

src/components/viewer/ComponentViewer.tsx

@@ -45,7 +45,8 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
         this.state = this.stateFromUrl();
         this.hotKeyBoundActions = {
             'Alt F': this.onFullScreenToggle,
-            ...this.dropDownKeyBoundActions()};
+            ...this.dropDownKeyBoundActions()
+        };
     }
 
     render() {

tslint.json

@@ -25,7 +25,6 @@
         "max-line-length": [ true, 120 ],
         "member-ordering": [
             true,
-            "public-before-private",
             "static-before-instance",
             "variables-before-functions"
         ],