wip: Implementing New UI

[Daniel-Mendes]

Summary

This pull request is a continuation of the UX improvements initiated in #2557. It merges the work done in the v3-ui-redesign branch with the current master branch, introducing a new layout, dark mode, and a mobile-responsive design.

Preview

• Storybook (UI Components): https://decap-next-ui-storybook.netlify.app
• Demo (Dashboard Preview): https://decap-next-ui-demo.netlify.app

Features

• New Layout: A modernized interface that improves user experience.
• Dark Mode: A dark theme for better user comfort.
• Responsive Design: Optimized for mobile devices, ensuring a seamless experience across different screen sizes.

Areas for Improvement

The following features are not implemented yet but are recommended for future updates:

• Accessibility Enhancements: Improve overall accessibility to meet WCAG standards.
• RTL (Right-to-Left) Support: Add support for right-to-left languages.

Note: These improvements could be facilitated by migrating components to Radix UI or React Aria

Out of scope

The following features are not included in this pull request and will be considered in future updates:

• Theming Accent Color
• Online editing of config.yml
• Dashboard Page
• Unsplash and Pexels Media Library Addons

Roadmap

Phase 1: Components and stories migration

In this phase, the goal is to migrate all components and stories to the new UI design.

Progress Overview

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
• 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: App Core Migration

The focus of this phase is to gradually migrate the decap-cms-core code to utilize the new UI components.

Progress Overview

• Migrate components from Netlify Theme to Decap Theme

• Base Layout

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

• 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

Changes to config.yml

Breaking Changes

• Deprecating display_url: Replaced by the new resources namespace. (see below)
• Deprecating logo_url: Replaced by the new branding namespace. (see below)

New Additions

• icon Property: Allows customization of icons for collections:

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

• resources Namespace: Enables external links to resources like the main site, git repo, analytics, and deploy services.

resources: 
  - name: 'netlify'
    label: 'Netlify'
    url: 'https://app.netlify.com/sites/decap-cms/overview'
    icon: "server" # Icon value from packages/decap-cms-ui-next/src/Icon/icons

• branding Namespace: Customize the logo, title and potentially the theme in future updates.

branding:
  logo_url: 'https://admin.gov/logo.png'
  app_name: 'Admin Panel'
  theme:
    primary: '#112f4e'
    draft: '#2563eb'
    in_review: '#eab308'
    ready: '#047857'
    # Additional theme properties to be defined

• analytics Namespace: Configures dashboard analytics provider.

analytics:
  name: 'plausible'
  config:
    site_id: 'decapcms.org'
    api_key: 'as3f3rsd6734232g32'
    api_endpoint: 'https://analytics.decapcms.org/api' # Optional for self-hosted services
    is_public: true # Optional (default: false) for public analytics; no `api_key` needed

New Customisation Functions

To further extend the customization capabilities of Decap CMS, new functions have been introduced:

• registerAnalytics: Allows developers to register custom analytics providers.

CMS.registerAnalytics(name, AnalyticsClass)

• registerIcon: Enables the registration of custom icons, making it easier to expand the icon library used throughout the CMS:

CMS.registerIcon(name, icon)

• registerTheme: Facilitates the registration of custom themes, providing a way to extend or override the default theming options

CMS.registerTheme(name, theme)