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

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

Inputs

• [x] Boolean Input
• [x] Date Input
• [ ] List Input
• [x] Markdown Input
• [x] Object Input
• [x] Select Input
• [x] 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

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

• [ ] Authentication Pages

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

• [x] List Collection Page

• [ ] Edit Collection Page

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

• [x] 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'

[martinjagodic]

@Daniel-Mendes this is a huge job done, thanks! 🙏 This will take some time to review, so I ask for some patience 😅

We will not merge this to master but create a next environment like you proposed. There we can start porting other components and doing work that could go into the next release.

Is this ready for review or still draft like it's tagged?

[Daniel-Mendes]

@Daniel-Mendes this is a huge job done, thanks! 🙏 This will take some time to review, so I ask for some patience 😅

We will not merge this to master but create a next environment like you proposed. There we can start porting other components and doing work that could go into the next release.

Is this ready for review or still draft like it's tagged?

I couldn't make a PR to the 'next' branch as it doesn't exist for now.

This is still in draft status (to keep track)

[Daniel-Mendes]

In the next branch, we should implement a storybook.decapcms.org (same as storybook.netlifycms.org) and next.decapcms.org (same as demo.decapcms.org), so everyone can follow the current progress.

[Daniel-Mendes]

What's new:

• Newest Layout
• Dark Mode Switch
• Quick Add
• Custom icon, position, url for collections (should be renamed to resources maybe)

https://github.com/decaporg/decap-cms/assets/28825568/43509bd2-95bb-4371-afb8-4ed7f372441b