Grafana ui lib is starting to work

packages/grafana-ui/package.json

@@ -2,8 +2,7 @@
   "name": "@grafana/ui",
   "version": "1.0.0",
   "description": "",
-  "main": "dist/index.js",
+  "main": "src/index.ts",
-  "types": "dist/types",
   "scripts": {
     "test": "tsc --noEmit"
   },

packages/grafana-ui/src/components/DeleteButton/DeleteButton.tsx

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 
-export interface DeleteButtonProps {
+interface Props {
-  onConfirmDelete();
+  onConfirm();
 }
 
-export interface DeleteButtonStates {
+interface State {
   showConfirm: boolean;
 }
 
-export default class DeleteButton extends PureComponent<DeleteButtonProps, DeleteButtonStates> {
+export class DeleteButton extends PureComponent<Props, State> {
-  state: DeleteButtonStates = {
+  state: State = {
     showConfirm: false,
   };
 
@@ -33,7 +33,7 @@ export default class DeleteButton extends PureComponent<DeleteButtonProps, Delet
   };
 
   render() {
-    const onClickConfirm = this.props.onConfirmDelete;
+    const { onConfirm } = this.props;
     let showConfirm;
     let showDeleteButton;
 
@@ -55,7 +55,7 @@ export default class DeleteButton extends PureComponent<DeleteButtonProps, Delet
             <a className="btn btn-small" onClick={this.onClickCancel}>
               Cancel
             </a>
-            <a className="btn btn-danger btn-small" onClick={onClickConfirm}>
+            <a className="btn btn-danger btn-small" onClick={onConfirm}>
               Confirm Delete
             </a>
           </span>

packages/grafana-ui/src/components/index.ts

@@ -0,0 +1 @@
+export { DeleteButton } from './DeleteButton/DeleteButton';

packages/grafana-ui/src/index.ts

@@ -1,26 +1 @@
-export { Other } from './other';
+export * from './components';
-import { TimeSeries } from '../types';
-
-export class Google {
-  data: TimeSeries;
-
-  hello() {
-    return 'hello';
-  }
-}
-
-class Singleton {
-  constructor(private state: string) {}
-
-  hello() {
-    return this.state;
-  }
-
-  change() {
-    this.state = 'mod2';
-  }
-}
-
-const singletonSrv = new Singleton('hello');
-
-export { singletonSrv };

packages/grafana-ui/src/other.ts

@@ -1,5 +0,0 @@
-export class Other {
-  static hello() {
-    return "hello from other";
-  }
-}

packages/grafana-ui/types/index.ts

@@ -1,4 +0,0 @@
-
-export interface TimeSeries {
-  name: string;
-}

public/app/features/api-keys/ApiKeysPage.tsx

@@ -13,7 +13,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
+import { DeleteButton } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
@@ -224,7 +224,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
                     <td>{key.name}</td>
                     <td>{key.role}</td>
                     <td>
-                      <DeleteButton onConfirmDelete={() => this.onDeleteApiKey(key)} />
+                      <DeleteButton onConfirm={() => this.onDeleteApiKey(key)} />
                     </td>
                   </tr>
                 );

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

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

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

@@ -15,7 +15,6 @@ import { PanelOptionSection } from './PanelOptionSection';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
-import { TimeSeries } from '@grafana/ui/types';
 
 interface Props {
   panel: PanelModel;

public/app/features/plugins/plugin_loader.ts

@@ -72,7 +72,7 @@ function exposeToPlugin(name: string, component: any) {
   });
 }
 
-exposeToPlugin('grafana-ui', grafanaUI);
+exposeToPlugin('@grafana/ui', grafanaUI);
 exposeToPlugin('lodash', _);
 exposeToPlugin('moment', moment);
 exposeToPlugin('jquery', jquery);

public/app/features/teams/TeamList.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
+import { DeleteButton } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import { NavModel, Team } from '../../types';
@@ -58,7 +58,7 @@ export class TeamList extends PureComponent<Props, any> {
           <a href={teamUrl}>{team.memberCount}</a>
         </td>
         <td className="text-right">
-          <DeleteButton onConfirmDelete={() => this.deleteTeam(team)} />
+          <DeleteButton onConfirm={() => this.deleteTeam(team)} />
         </td>
       </tr>
     );

public/app/features/teams/TeamMembers.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
-import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
+import { DeleteButton } from '@grafana/ui';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TeamMember, User } from 'app/types';
 import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
@@ -76,7 +76,7 @@ export class TeamMembers extends PureComponent<Props, State> {
         <td>{member.email}</td>
         {syncEnabled && this.renderLabels(member.labels)}
         <td className="text-right">
-          <DeleteButton onConfirmDelete={() => this.onRemoveMember(member)} />
+          <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
         </td>
       </tr>
     );