feat: ui overhaul (#676)

packages/demo/config-overrides.js

@@ -0,0 +1,3 @@
+const { removeModuleScopePlugin } = require("customize-cra");
+
+module.exports = removeModuleScopePlugin();

packages/demo/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build"
+    "dev": "react-app-rewired start",
+    "build": "react-app-rewired build"
   },
   "dependencies": {
     "@babel/eslint-parser": "7.21.3",
@@ -18,16 +18,21 @@
     "@babel/core": "7.21.3",
     "@babel/plugin-syntax-flow": "7.18.6",
     "@babel/plugin-transform-react-jsx": "7.21.0",
+    "autoprefixer": "10.4.13",
     "copy-webpack-plugin": "11.0.0",
+    "customize-cra": "1.0.0",
+    "eslint": "8.36.0",
     "eslint-import-resolver-typescript": "3.5.3",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-unicorn": "46.0.0",
-    "eslint": "8.36.0",
+    "postcss": "8.4.21",
+    "postcss-scss": "4.0.6",
     "prettier": "2.8.4",
+    "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "typescript": "4.9.5",
     "webpack": "5.76.2"

packages/demo/public/config.yml

@@ -3,6 +3,19 @@ backend:
 site_url: 'https://staticcms.org/'
 media_folder: assets/uploads
 locale: en
+i18n:
+  # Required and can be one of multiple_folders, multiple_files or single_file
+  # multiple_folders - persists files in `<folder>/<locale>/<slug>.<extension>`
+  # multiple_files - persists files in `<folder>/<slug>.<locale>.<extension>`
+  # single_file - persists a single file in `<folder>/<slug>.<extension>`
+  structure: multiple_files
+
+  # Required - a list of locales to show in the editor UI
+  locales: [en, de, fr]
+
+  # Optional, defaults to the first item in locales.
+  # The locale to be used for fields validation and as a baseline for the entry.
+  defaultLocale: en
 collections:
   - name: posts
     label: Posts
@@ -12,7 +25,10 @@ collections:
       and editing guidelines that are specific to a collection.
     folder: _posts
     slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
-    summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
+    summary_fields:
+      - title
+      - date
+      - draft
     sortable_fields:
       fields:
         - title
@@ -206,7 +222,7 @@ collections:
             time_format: 'h:mm aaa'
             required: false
           - name: date_and_time_with_default
-            label: Date and Time With Deafult
+            label: Date and Time With Default
             widget: datetime
             format: 'MMM d, yyyy h:mm aaa'
             date_format: 'MMM d, yyyy'
@@ -217,25 +233,28 @@ collections:
             label: Date
             widget: datetime
             format: 'MMM d, yyyy'
-            date_format: 'MMM d, yyyy'
+            time_format: false
             required: false
           - name: date_with_default
-            label: Date With Deafult
+            label: Date With Default
             widget: datetime
             format: 'MMM d, yyyy'
             date_format: 'MMM d, yyyy'
+            time_format: false
             required: false
             default: 'Jan 12, 2023'
           - name: time
             label: Time
             widget: datetime
             format: 'h:mm aaa'
+            date_format: false
             time_format: 'h:mm aaa'
             required: false
           - name: time_with_default
-            label: Time With Deafult
+            label: Time With Default
             widget: datetime
             format: 'h:mm aaa'
+            date_format: false
             time_format: 'h:mm aaa'
             required: false
             default: '12:00 am'
@@ -593,6 +612,27 @@ collections:
                 name: thumb
                 widget: image
                 required: false
+          - label: Collapsed, optional with required children
+            name: collapsed_optional_with_required_children
+            widget: object
+            required: false
+            collapsed: true
+            fields:
+              - name: layout
+                widget: hidden
+                default: post
+              - label: Number of posts on frontpage
+                name: front_limit
+                widget: number
+                required: true
+              - label: Author
+                name: author
+                widget: string
+                required: true
+              - label: Thumbnail
+                name: thumb
+                widget: image
+                required: true
       - name: relation
         label: Relation
         file: _widgets/relation.json
@@ -607,7 +647,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
           - label: Required With Default
             name: with_default
@@ -618,7 +658,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
             default: This is a YAML front matter post
           - label: Optional Validation
@@ -631,7 +671,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
           - label: Multiple
             name: multiple
@@ -644,7 +684,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
           - label: Multiple With Default
             name: multiple_with_default
@@ -660,7 +700,7 @@ collections:
               - date
             search_fields:
               - title
-              - body
+              - date
             value_field: title
       - name: select
         label: Select
@@ -1188,3 +1228,24 @@ collections:
               - label: File
                 name: file
                 widget: file
+  - name: i18n_playground
+    label: i18n Playground
+    i18n: true
+    folder: _i18n_playground
+    identifier_field: slug
+    create: true
+    fields:
+      # The slug field will be omitted from the translation.
+      - name: slug
+        label: Slug
+        widget: string
+      # same as 'i18n: translate'. Allows translation of the description field
+      - name: description
+        label: Description
+        widget: text
+        i18n: true
+      # The date field will be duplicated from the default locale.
+      - name: date
+        label: Date
+        widget: datetime
+        i18n: duplicate

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.

packages/demo/src/index.js

@@ -1,11 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 
-import './cms';
+import "../../core/src/styles/main.css";
+import "./cms";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <div />
-  </React.StrictMode>,
+  </React.StrictMode>
 );

packages/demo/tailwind.config.js

@@ -0,0 +1,7 @@
+const baseConfig = require('../../tailwind.base.config');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['../core/src/**/*.tsx'],
+  ...baseConfig,
+};