feat: ui overhaul (#676)

This commit is contained in:
Daniel Lautzenheiser
2023-03-30 13:29:09 -04:00
committed by GitHub
parent 5c86462859
commit 66b81e9228
385 changed files with 20607 additions and 16493 deletions

View File

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

View File

@ -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"

View File

Before

Width:  |  Height:  |  Size: 808 KiB

After

Width:  |  Height:  |  Size: 808 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 808 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -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.

View File

@ -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>
);

View File

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