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",
-  "types": "dist/types",
+  "main": "src/index.ts",
   "scripts": {
     "test": "tsc --noEmit"
   },

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import DeleteButton from './DeleteButton';
+import { shallow } from 'enzyme';
+
+describe('DeleteButton', () => {
+  let wrapper;
+  let deleted;
+
+  beforeAll(() => {
+    deleted = false;
+
+    function deleteItem() {
+      deleted = true;
+    }
+    wrapper = shallow(<DeleteButton onConfirmDelete={() => deleteItem()} />);
+  });
+
+  it('should show confirm delete when clicked', () => {
+    expect(wrapper.state().showConfirm).toBe(false);
+    wrapper.find('.delete-button').simulate('click');
+    expect(wrapper.state().showConfirm).toBe(true);
+  });
+
+  it('should hide confirm delete when clicked', () => {
+    wrapper.find('.delete-button').simulate('click');
+    expect(wrapper.state().showConfirm).toBe(true);
+    wrapper
+      .find('.confirm-delete')
+      .find('.btn')
+      .at(0)
+      .simulate('click');
+    expect(wrapper.state().showConfirm).toBe(false);
+  });
+
+  it('should show confirm delete when clicked', () => {
+    expect(deleted).toBe(false);
+    wrapper
+      .find('.confirm-delete')
+      .find('.btn')
+      .at(1)
+      .simulate('click');
+    expect(deleted).toBe(true);
+  });
+});

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

@@ -0,0 +1,66 @@
+import React, { PureComponent } from 'react';
+
+interface Props {
+  onConfirm();
+}
+
+interface State {
+  showConfirm: boolean;
+}
+
+export class DeleteButton extends PureComponent<Props, State> {
+  state: State = {
+    showConfirm: false,
+  };
+
+  onClickDelete = event => {
+    if (event) {
+      event.preventDefault();
+    }
+
+    this.setState({
+      showConfirm: true,
+    });
+  };
+
+  onClickCancel = event => {
+    if (event) {
+      event.preventDefault();
+    }
+    this.setState({
+      showConfirm: false,
+    });
+  };
+
+  render() {
+    const { onConfirm } = this.props;
+    let showConfirm;
+    let showDeleteButton;
+
+    if (this.state.showConfirm) {
+      showConfirm = 'show';
+      showDeleteButton = 'hide';
+    } else {
+      showConfirm = 'hide';
+      showDeleteButton = 'show';
+    }
+
+    return (
+      <span className="delete-button-container">
+        <a className={'delete-button ' + showDeleteButton + ' btn btn-danger btn-small'} onClick={this.onClickDelete}>
+          <i className="fa fa-remove" />
+        </a>
+        <span className="confirm-delete-container">
+          <span className={'confirm-delete ' + showConfirm}>
+            <a className="btn btn-small" onClick={this.onClickCancel}>
+              Cancel
+            </a>
+            <a className="btn btn-danger btn-small" onClick={onConfirm}>
+              Confirm Delete
+            </a>
+          </span>
+        </span>
+      </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';
-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 };
+export * from './components';

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;
-}