feat: ui overhaul (#676)

packages/demo/src/cms.jsx

@@ -63,6 +63,40 @@ const PostPreviewCard = ({ entry, widgetFor, viewStyle }) => {
   );
 };
 
+const PostDateFieldPreview = ({ value }) => {
+  const date = new Date(value);
+
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
+  return h(
+    'div',
+    {},
+    `${date.getFullYear()}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`,
+  );
+};
+
+const PostDraftFieldPreview = ({ value }) => {
+  return h(
+    'div',
+    {
+      style: {
+        backgroundColor: value === true ? 'rgb(37 99 235)' : 'rgb(22 163 74)',
+        color: 'white',
+        border: 'none',
+        padding: '2px 6px',
+        textAlign: 'center',
+        textDecoration: 'none',
+        display: 'inline-block',
+        cursor: 'pointer',
+        borderRadius: '4px',
+        fontSize: '14px',
+      },
+    },
+    value === true ? 'Draft' : 'Published',
+  );
+};
+
 const GeneralPreview = ({ widgetsFor, entry }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;
@@ -134,6 +168,8 @@ const CustomPage = () => {
 cms.registerPreviewStyle(".toastui-editor-contents h1 { color: blue }", { raw: true });
 cms.registerPreviewTemplate("posts", PostPreview);
 CMS.registerPreviewCard("posts", PostPreviewCard);
+CMS.registerFieldPreview('posts', 'date', PostDateFieldPreview);
+CMS.registerFieldPreview('posts', 'draft', PostDraftFieldPreview);
 cms.registerPreviewTemplate("general", GeneralPreview);
 cms.registerPreviewTemplate("authors", AuthorsPreview);
 // Pass the name of a registered control to reuse with a new widget preview.