Grafana ui library poc

package.json

 {
 {
+  "private": true,
   "author": {
   "author": {
     "name": "Torkel Ödegaard",
     "name": "Torkel Ödegaard",
     "company": "Grafana Labs"
     "company": "Grafana Labs"
@@ -178,5 +179,6 @@
   "resolutions": {
   "resolutions": {
     "caniuse-db": "1.0.30000772",
     "caniuse-db": "1.0.30000772",
     "**/@types/react": "16.7.6"
     "**/@types/react": "16.7.6"
-  }
+  },
+  "workspaces": ["packages/grafana-ui"]
 }
 }

packages/grafana-ui/index.ts

+export class Google {
+  hello() {
+    return 'hello';
+  }
+}
+
+class Singleton {
+  constructor(private state) {}
+
+  hello() {
+    return this.state;
+  }
+
+  change() {
+    this.state = 'mod2';
+  }
+}
+
+const singletonSrv = new Singleton('hello');
+
+export { singletonSrv };

packages/grafana-ui/package.json

+{
+  "name": "grafana-ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -7,6 +7,9 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
 import classNames from 'classnames';
 import classNames from 'classnames';
 import sizeMe from 'react-sizeme';
 import sizeMe from 'react-sizeme';
+import { Google } from 'grafana-ui';
+
+console.log(Google);
 
 
 let lastGridWidth = 1200;
 let lastGridWidth = 1200;
 let ignoreNextWidthChange = false;
 let ignoreNextWidthChange = false;

public/app/features/plugins/plugin_loader.ts

@@ -26,6 +26,7 @@ import * as ticks from 'app/core/utils/ticks';
 import impressionSrv from 'app/core/services/impression_srv';
 import impressionSrv from 'app/core/services/impression_srv';
 import builtInPlugins from './built_in_plugins';
 import builtInPlugins from './built_in_plugins';
 import * as d3 from 'd3';
 import * as d3 from 'd3';
+import * as grafanaUI from 'grafana-ui';
 
 
 // rxjs
 // rxjs
 import { Observable } from 'rxjs/Observable';
 import { Observable } from 'rxjs/Observable';
@@ -71,6 +72,7 @@ function exposeToPlugin(name: string, component: any) {
   });
   });
 }
 }
 
 
+exposeToPlugin('grafana-ui', grafanaUI);
 exposeToPlugin('lodash', _);
 exposeToPlugin('lodash', _);
 exposeToPlugin('moment', moment);
 exposeToPlugin('moment', moment);
 exposeToPlugin('jquery', jquery);
 exposeToPlugin('jquery', jquery);