Feature/typescript conversion (#44)

dev-test/index.js

@@ -1,35 +1,4 @@
 // Register all the things
-window.CMS.registerBackend('git-gateway', window.CMS.GitGatewayBackend);
-window.CMS.registerBackend('proxy', window.CMS.ProxyBackend);
-window.CMS.registerBackend('test-repo', window.CMS.TestBackend);
-window.CMS.registerWidget([
-  window.CMS.StringWidget.Widget(),
-  window.CMS.NumberWidget.Widget(),
-  window.CMS.TextWidget.Widget(),
-  window.CMS.ImageWidget.Widget(),
-  window.CMS.FileWidget.Widget(),
-  window.CMS.SelectWidget.Widget(),
-  window.CMS.MarkdownWidget.Widget(),
-  window.CMS.ListWidget.Widget(),
-  window.CMS.ObjectWidget.Widget(),
-  window.CMS.RelationWidget.Widget(),
-  window.CMS.BooleanWidget.Widget(),
-  window.CMS.DateTimeWidget.Widget(),
-  window.CMS.ColorStringWidget.Widget(),
-]);
-window.CMS.registerEditorComponent(window.CMS.imageEditorComponent);
-window.CMS.registerEditorComponent({
-  id: 'code-block',
-  label: 'Code Block',
-  widget: 'code',
-  type: 'code-block',
-});
-window.CMS.registerLocale('en', window.CMS.locales.en);
-
-Object.keys(window.CMS.images).forEach(iconName => {
-  window.CMS.registerIcon(iconName, window.h(window.CMS.Icon, { type: iconName }));
-});
-
 window.CMS.init();
 
 const PostPreview = window.createClass({
@@ -41,10 +10,10 @@ const PostPreview = window.createClass({
       window.h(
         'div',
         { className: 'cover' },
-        window.h('h1', {}, entry.getIn(['data', 'title'])),
+        window.h('h1', {}, entry.data.title),
         this.props.widgetFor('image'),
       ),
-      window.h('p', {}, window.h('small', {}, 'Written ' + entry.getIn(['data', 'date']))),
+      window.h('p', {}, window.h('small', {}, 'Written ' + entry.data.date)),
       window.h('div', { className: 'text' }, this.props.widgetFor('body')),
     );
   },
@@ -53,9 +22,9 @@ const PostPreview = window.createClass({
 const GeneralPreview = window.createClass({
   render: function () {
     const entry = this.props.entry;
-    const title = entry.getIn(['data', 'site_title']);
-    const posts = entry.getIn(['data', 'posts']);
-    const thumb = posts && posts.get('thumb');
+    const title = entry.data.site_title;
+    const posts = entry.data.posts;
+    const thumb = posts && posts.thumb;
 
     return window.h(
       'div',
@@ -65,10 +34,10 @@ const GeneralPreview = window.createClass({
         'dl',
         {},
         window.h('dt', {}, 'Posts on Frontpage'),
-        window.h('dd', {}, this.props.widgetsFor('posts').getIn(['widgets', 'front_limit']) || 0),
+        window.h('dd', {}, this.props.widgetsFor('posts').widgets.front_limit || 0),
 
         window.h('dt', {}, 'Default Author'),
-        window.h('dd', {}, this.props.widgetsFor('posts').getIn(['data', 'author']) || 'None'),
+        window.h('dd', {}, this.props.widgetsFor('posts').data.author || 'None'),
 
         window.h('dt', {}, 'Default Thumbnail'),
         window.h(
@@ -91,8 +60,8 @@ const AuthorsPreview = window.createClass({
           'div',
           { key: index },
           window.h('hr', {}),
-          window.h('strong', {}, author.getIn(['data', 'name'])),
-          author.getIn(['widgets', 'description']),
+          window.h('strong', {}, author.data.name),
+          author.widgets.description,
         );
       }),
     );
@@ -108,49 +77,31 @@ const RelationKitchenSinkPostPreview = window.createClass({
     // the title of the selected post, since our `value_field` in the config
     // is "title".
     const { value, fieldsMetaData } = this.props;
-    const post = fieldsMetaData && fieldsMetaData.getIn(['posts', value]);
+    const post = fieldsMetaData && fieldsMetaData.posts.value;
     const style = { border: '2px solid #ccc', borderRadius: '8px', padding: '20px' };
     return post
       ? window.h(
           'div',
           { style: style },
           window.h('h2', {}, 'Related Post'),
-          window.h('h3', {}, post.get('title')),
-          window.h('img', { src: post.get('image') }),
-          window.h('p', {}, post.get('body', '').slice(0, 100) + '...'),
+          window.h('h3', {}, post.title),
+          window.h('img', { src: post.image }),
+          window.h('p', {}, (post.body ?? '').slice(0, 100) + '...'),
         )
       : null;
   },
 });
 
-const previewStyles = `
-  html,
-  body {
-    color: #444;
-    font-size: 14px;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
-
-  body {
-    padding: 20px;
-  }
-
-  h1 {
-    margin-top: 20px;
-    color: #666;
-    font-weight: bold;
-    font-size: 32px;
-  }
-
-  img {
-    max-width: 100%;
-  }
-`;
-
 window.CMS.registerPreviewTemplate('posts', PostPreview);
 window.CMS.registerPreviewTemplate('general', GeneralPreview);
 window.CMS.registerPreviewTemplate('authors', AuthorsPreview);
-window.CMS.registerPreviewStyle(previewStyles, { raw: true });
 // Pass the name of a registered control to reuse with a new widget preview.
 window.CMS.registerWidget('relationKitchenSinkPost', 'relation', RelationKitchenSinkPostPreview);
-window.CMS.registerAdditionalLink('example', 'Example.com', 'https://example.com', 'page');
+window.CMS.registerAdditionalLink({
+  id: 'example',
+  title: 'Example.com',
+  data: 'https://example.com',
+  options: {
+    icon: 'page',
+  },
+});