wip: Implementing New UI

[Daniel-Mendes]

Summary

To continue the efforts from #2557 (Improve The Overall UX), this pull request aims is to merge the work done in the v3-ui-redesign branch with the current master branch.

Features

• New Layout
• Dark Mode
• Responsive (Mobile Version)

Not implemented (but should be done)

• Improve accessibility
• RTL support

Could be improved by migrating components to radix-ui or react-aria

Out of scope

• Theming Accent Color
• Online editing config.yml
• Dashboard Page
• Unsplash, Rawpixel media library addons

Roadmap

I want to make the minimum breaking changes to the config.yml file.

Phase 1

The goals within this step is to migrate all the components and stories.

Progress

Pages

• MediaLibrary
• Authentication Page
  • Login Button

Components

• App Bar
• App Wrap
• Avatar
• Backdrop
• Buttons Add New Button Component #3257
  • Avatar Button
  • Button
  • Button Group
  • Icon Button
• Card
• Dialog
• Editor
• Field
• Fullscreen
• Icon
• Label
• Logo
• Logo Tile
• Menu
• MediaDialog
• Modal
• NavMenu
• Notification Center
• Popover
• Portal
• Responsive Layout
• Search Bar
• Table
• Tag
• Thumbnail
• Toast
• Toggle Switch
• Tooltip
• Transitions
• Tree
• UIContext
• UserMenu

Inputs

• Boolean Input
• Date Input
• List Input
• Markdown Input
• Object Input
• Select Input
• Text Input

Phase 2

Migrating the decap-cms-core code gradually to use the new components.

Progress

• Migrate components from Netlify Theme to Decap Theme

• Base Layout

  • Nav
  • Header
    • Page Title
    • Breadcrumb
    • Search Bar
    • User Menu
    • Notification Center

• Authentication Pages

  • Backend Aws Cognito Github Proxy
  • Backend Azure
  • Backend Git Gateway
  • Backend Gitea
  • Backend Github
  • Backend Gitlab
  • Backend Proxy
  • Backend Test

• List Collection Page

• Edit Collection Page

  • Widgets
    • Widget Boolean
    • Widget Code
    • Widget Colorstring
    • Widget Datetime
    • Widget File
    • Widget Image
    • Widget List
    • Widget Map
    • Widget Markdown
    • Widget Number
    • Widget Object
    • Widget Relation
    • Widget Select
    • Widget String
    • Widget Text

• Editorial Workflow Page (no design from @austincondiff )

Breaking Changes

Propositions to allow customization to the UI.

To implement custom icons for collections:

  collections: 
  - name: 'posts'
    label: 'Posts'
    icon: 'edit-3' # Value from packages/decap-cms-ui-next/src/Icon/icons

To implement nav item position:

  collections: 
  - name: 'settings'
    label: 'Settings'
    file: "_data/meta.json"
    position: 'end' # Default value 'start'

To implement external links for other tools like, git repo, analytics, deploy service:

  collections: 
  - name: 'Analytics'
    label: 'analytics'
    url: 'https://plausible.io/plausible.io'

All changes example:

collections: 
- name: 'Netlify'
  label: 'netlify'
  url: 'https://app.netlify.com/sites/decap-www'
  icon: 'server'
  position: 'end'