Update generated widgets for packaged kitto library

installer/templates/new/package.json

@@ -21,6 +21,7 @@
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
+    "kitto": "file:deps/kitto",
     "webpack": "^1.12.13",
     "webpack-merge": "^0.15.0",
     "compression-webpack-plugin": "0.3.1",

installer/templates/new/widgets/clock/clock.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import Widget from '../../assets/javascripts/widget';
+import {Widget} from 'kitto';
 
 import './clock.scss';
 
-Widget.mount(class Clock extends Widget {
+class Clock extends Widget {
   constructor(props) {
     super(props);
     this.state = Clock.dateTime()
@@ -32,4 +32,7 @@ Widget.mount(class Clock extends Widget {
       date: today.toDateString(),
     }
   }
-});
+};
+
+Widget.mount(Clock);
+export default Clock;

installer/templates/new/widgets/graph/graph.js

@@ -2,12 +2,11 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import 'd3';
 import 'rickshaw';
-import Widget from '../../assets/javascripts/widget';
-import {prettyNumber, prepend} from '../../assets/javascripts/helpers';
+import {Kitto, Widget} from 'kitto';
 
 import './graph.scss';
 
-Widget.mount(class Graph extends Widget {
+class Graph extends Widget {
   static get defaultProps() {
     return { graphType: 'area' };
   }
@@ -20,7 +19,8 @@ Widget.mount(class Graph extends Widget {
   renderGraph() {
     let container = this.$node.parent();
     let $gridster = $('.gridster');
-    let widget_base_dimensions = $gridster.data('widget_base_dimensions');
+    let config = Kitto.config();
+    let widget_base_dimensions = config.widget_base_dimensions;
     let width = (widget_base_dimensions[0] *
                  container.data('sizex')) + 5 * 2 * (container.data('sizex') - 1);
     let height = (widget_base_dimensions[1] * container.data('sizey'));
@@ -44,7 +44,7 @@ Widget.mount(class Graph extends Widget {
     this.graph.render();
   }
   currentValue() {
-    return prettyNumber(prepend(this.current));
+    return this.prettyNumber(this.prepend(this.current));
   }
   render() {
     return (
@@ -55,4 +55,7 @@ Widget.mount(class Graph extends Widget {
       </div>
     );
   }
-});
+};
+
+Widget.mount(Graph);
+export default Graph;

installer/templates/new/widgets/image/image.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import Widget from '../../assets/javascripts/widget';
+import {Widget} from 'kitto';
 
 import './image.scss';
 
 const placeholder = '/assets/images/placeholder.png';
 
-Widget.mount(class Image extends Widget {
+class Image extends Widget {
   image() {
     return {
       backgroundImage: `url(${this.state.image || placeholder})`
@@ -16,4 +16,7 @@ Widget.mount(class Image extends Widget {
       <div style={this.image()} className={this.props.className}></div>
     );
   }
-});
+};
+
+Widget.mount(Image);
+export default Image;

installer/templates/new/widgets/list/list.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import Widget from '../../assets/javascripts/widget';
-import {updatedAt,truncate} from '../../assets/javascripts/helpers';
+import {Widget, Helpers} from 'kitto';
 
 import './list.scss';
 
@@ -9,10 +8,10 @@ class ListItem extends React.Component {
     return (
       <li>
         <span className="label">
-          {truncate(this.props.label, this.props.labelLength || 80)}
+          {Helpers.truncate(this.props.label, this.props.labelLength || 80)}
         </span>
         <span className="value">
-          {truncate(this.props.value, this.props.valueLength)}
+          {Helpers.truncate(this.props.value, this.props.valueLength)}
         </span>
       </li>
     );
@@ -41,10 +40,11 @@ export class List extends Widget {
           {this.renderList(this.renderItems(this.state.items || []))}
         </ul>
         <p className="more-info">{this.props.moreinfo}</p>
-        <p className="updated-at">{updatedAt(this.state.updated_at)}</p>
+        <p className="updated-at">{this.updatedAt(this.state.updated_at)}</p>
       </div>
     );
   }
 };
 
 Widget.mount(List);
+export default List;

installer/templates/new/widgets/meter/meter.js

@@ -1,12 +1,11 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import Knob from 'jquery-knob';
-import Widget from '../../assets/javascripts/widget';
-import {updatedAt} from '../../assets/javascripts/helpers';
+import {Widget} from 'kitto';
 
 import './meter.scss';
 
-Widget.mount(class Meter extends Widget {
+class Meter extends Widget {
   componentDidMount() {
     this.state = { value: 0 };
     this.$node = $(ReactDOM.findDOMNode(this));
@@ -31,8 +30,11 @@ Widget.mount(class Meter extends Widget {
                data-angleoffset="-125"
                data-anglearc="250"
                data-width="200"/>
-        <p className="updated-at">{updatedAt(this.state.updated_at)}</p>
+        <p className="updated-at">{this.updatedAt(this.state.updated_at)}</p>
       </div>
     );
   }
-});
+};
+
+Widget.mount(Meter);
+export default Meter;

installer/templates/new/widgets/number/number.js

@@ -1,13 +1,9 @@
 import React from 'react';
-import Widget from '../../assets/javascripts/widget';
-import {updatedAt,
-        append,
-        prepend,
-        shortenedNumber} from '../../assets/javascripts/helpers';
+import {Widget} from 'kitto';
 
 import './number.scss';
 
-Widget.mount(class Number extends Widget {
+class Number extends Widget {
   constructor(props) {
     super(props);
 
@@ -18,8 +14,9 @@ Widget.mount(class Number extends Widget {
     this.lastValue = this.state.value;
   }
   decorateValue(value) {
-    return append(prepend(shortenedNumber(this.state.value), this.props.prefix),
-                  this.props.suffix);
+    let number = this.shortenedNumber(this.state.value);
+
+    return this.append(this.prepend(number, this.props.prefix), this.props.suffix);
   }
   arrow() {
     if (this.state.value > this.lastValue) {
@@ -52,8 +49,11 @@ Widget.mount(class Number extends Widget {
         <h2 className="value"> {this.decorateValue(this.state.value)}</h2>
         <p className="more-info">{this.props.moreinfo}</p>
         {this.changeRate()}
-        <p className="updated-at">{updatedAt(this.state.updated_at)}</p>
+        <p className="updated-at">{this.updatedAt(this.state.updated_at)}</p>
       </div>
     );
   }
-});
+};
+
+Widget.mount(Number);
+export default Number;

installer/templates/new/widgets/text/text.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import Widget from '../../assets/javascripts/widget';
-import {updatedAt} from '../../assets/javascripts/helpers';
+import {Widget} from 'kitto';
 
 import './text.scss';
 
-Widget.mount(class Text extends Widget {
+class Text extends Widget {
   status() {
     if (!this.state.status) { return ""; }
 
@@ -17,8 +16,11 @@ Widget.mount(class Text extends Widget {
         <h1 className="title">{this.state.title || this.props.title}</h1>
         <h3>{this.state.text || this.props.text}</h3>
         <p className="more-info">{this.state.moreinfo || this.props.moreinfo}</p>
-        <p className="updated-at">{updatedAt(this.state.updated_at)}</p>
+        <p className="updated-at">{this.updatedAt(this.state.updated_at)}</p>
       </div>
     );
   }
-});
+};
+
+Widget.mount(Text);
+export default Text;