feat: standardize class names (#873)

packages/core/package.json

@@ -66,11 +66,10 @@
     "@emotion/css": "11.10.6",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@headlessui/react": "1.7.7",
     "@lezer/common": "1.0.2",
     "@mdx-js/mdx": "2.3.0",
     "@mdx-js/react": "2.3.0",
-    "@mui/base": "5.0.0-alpha.124",
+    "@mui/base": "5.0.0-beta.14",
     "@mui/material": "5.11.16",
     "@mui/system": "5.11.16",
     "@mui/x-date-pickers": "5.0.20",
@@ -84,9 +83,10 @@
     "@styled-icons/material-rounded": "10.47.0",
     "@styled-icons/remix-editor": "10.46.0",
     "@styled-icons/simple-icons": "10.46.0",
-    "@udecode/plate": "21.3.2",
-    "@udecode/plate-juice": "21.3.2",
-    "@udecode/plate-serializer-md": "21.3.2",
+    "@udecode/plate": "23.7.4",
+    "@udecode/plate-cursor": "23.7.4",
+    "@udecode/plate-juice": "23.7.4",
+    "@udecode/plate-serializer-md": "23.7.4",
     "@uiw/codemirror-extensions-langs": "4.19.16",
     "@uiw/react-codemirror": "4.19.16",
     "ajv": "8.12.0",
@@ -159,7 +159,7 @@
     "slate": "0.94.1",
     "slate-history": "0.93.0",
     "slate-hyperscript": "0.77.0",
-    "slate-react": "0.95.0",
+    "slate-react": "0.98.3",
     "stream-browserify": "3.0.0",
     "styled-components": "5.3.10",
     "symbol-observable": "4.0.0",

packages/core/src/__mocks__/react-polyglot.ts

@@ -12,3 +12,5 @@ export const translate = () => (Component: FC) => {
     return React.createElement(Component, { t, ...props });
   };
 };
+
+export const useTranslate = () => (key: string, _options: unknown) => key;

packages/core/src/components/App.css

@@ -0,0 +1,3 @@
+.CMS_App_root {
+  @apply h-full;
+}

packages/core/src/components/App.tsx

@@ -20,6 +20,7 @@ import { currentBackend } from '@staticcms/core/backend';
 import { changeTheme } from '../actions/globalUI';
 import { invokeEvent } from '../lib/registry';
 import { getDefaultPath } from '../lib/util/collection.util';
+import { generateClassNames } from '../lib/util/theming.util';
 import { selectTheme } from '../reducers/selectors/globalUI';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
 import CollectionRoute from './collections/CollectionRoute';
@@ -37,6 +38,10 @@ import type { RootState } from '@staticcms/core/store';
 import type { ComponentType } from 'react';
 import type { ConnectedProps } from 'react-redux';
 
+import './App.css';
+
+export const classes = generateClassNames('App', ['root', 'content']);
+
 TopBarProgress.config({
   barColors: {
     0: '#000',
@@ -267,8 +272,8 @@ const App = ({
       <ScrollSync key="scroll-sync" enabled={scrollSyncEnabled}>
         <>
           <div key="back-to-top-anchor" id="back-to-top-anchor" />
-          <div key="cms-root" id="cms-root" className="h-full">
-            <div key="cms-wrapper" className="cms-wrapper">
+          <div key="cms-root" id="cms-root" className={classes.root}>
+            <div key="cms-wrapper" className={classes.content}>
               <Snackbars key="snackbars" />
               {content}
               <Alert key="alert" />

packages/core/src/components/ErrorBoundary.css

@@ -0,0 +1,43 @@
+.CMS_ErrorBoundary_root {
+  @apply flex
+    flex-col
+    bg-slate-50
+    dark:bg-slate-900
+    min-h-screen
+    gap-2;
+}
+
+.CMS_ErrorBoundary_header {
+  @apply flex
+    flex-col
+    py-2
+    px-4
+    gap-2;
+}
+
+.CMS_ErrorBoundary_title {
+  @apply text-2xl
+    font-bold;
+}
+
+.CMS_ErrorBoundary_report-link {
+  @apply text-blue-500
+    hover:underline;
+}
+
+.CMS_ErrorBoundary_content {
+  @apply flex
+    flex-col
+    py-2
+    px-4
+    gap-2;
+}
+
+.CMS_ErrorBoundary_details-title {
+  @apply text-xl
+    font-bold;
+}
+
+.CMS_ErrorBoundary_error-line {
+  @apply whitespace-pre;
+}

packages/core/src/components/ErrorBoundary.tsx

@@ -6,10 +6,23 @@ import { translate } from 'react-polyglot';
 import yaml from 'yaml';
 
 import { localForage } from '@staticcms/core/lib/util';
+import { generateClassNames } from '../lib/util/theming.util';
 
 import type { Config, TranslatedProps } from '@staticcms/core/interface';
 import type { ComponentClass, ReactNode } from 'react';
 
+import './ErrorBoundary.css';
+
+export const classes = generateClassNames('ErrorBoundary', [
+  'root',
+  'header',
+  'title',
+  'report-link',
+  'content',
+  'details-title',
+  'error-line',
+]);
+
 const ISSUE_URL = 'https://github.com/StaticJsCMS/static-cms/issues/new?';
 
 function getIssueTemplate(version: string, provider: string, browser: string, config: string) {
@@ -147,38 +160,17 @@ class ErrorBoundary extends Component<TranslatedProps<ErrorBoundaryProps>, Error
       return this.props.children;
     }
     return (
-      <div
-        key="error-boundary-container"
-        className="
-          flex
-          flex-col
-          bg-slate-50
-          dark:bg-slate-900
-          min-h-screen
-          gap-2
-        "
-      >
-        <div
-          className="
-            flex
-            flex-col
-            py-2
-            px-4
-            gap-2
-          "
-        >
-          <h1 className="text-2xl bold">{t('ui.errorBoundary.title')}</h1>
+      <div key="error-boundary-container" className={classes.root}>
+        <div className={classes.header}>
+          <h1 className={classes.title}>{t('ui.errorBoundary.title')}</h1>
           <p>
             <span>{t('ui.errorBoundary.details')}</span>
             <a
               href={buildIssueUrl(errorTitle, this.props.config)}
               target="_blank"
               rel="noopener noreferrer"
               data-testid="issue-url"
-              className="
-                text-blue-500
-                hover:underline
-              "
+              className={classes['report-link']}
             >
               {t('ui.errorBoundary.reportIt')}
             </a>
@@ -193,19 +185,11 @@ class ErrorBoundary extends Component<TranslatedProps<ErrorBoundaryProps>, Error
           </p>
         </div>
         <hr />
-        <div
-          className="
-            flex
-            flex-col
-            py-2
-            px-4
-            gap-2
-          "
-        >
-          <h2 className="text-xl bold">{t('ui.errorBoundary.detailsHeading')}</h2>
+        <div className={classes.content}>
+          <h2 className={classes['details-title']}>{t('ui.errorBoundary.detailsHeading')}</h2>
           <p>
             {errorMessage.split('\n').map((item, index) => [
-              <span key={`error-line-${index}`} className="whitespace-pre">
+              <span key={`error-line-${index}`} className={classes['error-line']}>
                 {item}
               </span>,
               <br key={`error-break-${index}`} />,

packages/core/src/components/MainView.css

@@ -0,0 +1,30 @@
+.CMS_MainView_root {
+  @apply flex
+    bg-slate-50
+    dark:bg-slate-900;
+}
+
+.CMS_MainView_body {
+  @apply h-main-mobile
+    md:h-main
+    relative
+    w-full;
+
+  &.CMS_MainView_show-left-nav {
+    @apply left-0
+      md:w-main;
+  }
+
+  &:not(.CMS_MainView_no-margin) {
+    @apply px-5
+      py-4;
+  }
+
+  &.CMS_MainView_no-scroll {
+    @apply overflow-hidden;
+  }
+
+  &:not(.CMS_MainView_no-scroll) {
+    @apply overflow-y-auto;
+  }
+}

packages/core/src/components/MainView.tsx

@@ -2,13 +2,24 @@ import React from 'react';
 import TopBarProgress from 'react-topbar-progress-indicator';
 
 import classNames from '../lib/util/classNames.util';
+import { generateClassNames } from '../lib/util/theming.util';
 import BottomNavigation from './navbar/BottomNavigation';
 import Navbar from './navbar/Navbar';
 import Sidebar from './navbar/Sidebar';
 
 import type { ReactNode } from 'react';
 import type { Breadcrumb, Collection } from '../interface';
 
+import './MainView.css';
+
+export const classes = generateClassNames('MainView', [
+  'root',
+  'body',
+  'show-left-nav',
+  'no-margin',
+  'no-scroll',
+]);
+
 TopBarProgress.config({
   barColors: {
     0: '#000',
@@ -46,20 +57,15 @@ const MainView = ({
         showQuickCreate={showQuickCreate}
         navbarActions={navbarActions}
       />
-      <div className="flex bg-slate-50 dark:bg-slate-900">
+      <div className={classes.root}>
         {showLeftNav ? <Sidebar /> : null}
         <div
           id="main-view"
           className={classNames(
-            showLeftNav ? ' w-full left-0 md:w-main' : 'w-full',
-            !noMargin && 'px-5 py-4',
-            noScroll ? 'overflow-hidden' : 'overflow-y-auto',
-            `
-              h-main-mobile
-              md:h-main
-              relative
-              styled-scrollbars
-            `,
+            classes.body,
+            showLeftNav && classes['show-left-nav'],
+            noMargin && classes['no-margin'],
+            noScroll && classes['no-scroll'],
           )}
         >
           {children}

packages/core/src/components/collections/Collection.classes.ts

@@ -0,0 +1,17 @@
+import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
+
+const collectionClasses = generateClassNames('Collection', [
+  'root',
+  'content',
+  'search-query',
+  'description',
+  'description-card',
+  'controls',
+  'header-wrapper',
+  'header',
+  'header-icon',
+  'header-label',
+  'new-entry-button',
+]);
+
+export default collectionClasses;

packages/core/src/components/collections/Collection.css

@@ -0,0 +1,87 @@
+.CMS_Collection_root {
+  @apply flex
+    flex-col
+    h-full
+    px-5
+    pt-4
+    overflow-hidden;
+}
+
+.CMS_Collection_content {
+  @apply flex
+    items-center
+    mb-4
+    flex-row
+    gap-4
+    sm:gap-0
+    flex-wrap
+    md:flex-nowrap;
+}
+
+.CMS_Collection_search-query {
+  @apply flex-grow;
+}
+
+.CMS_Collection_description {
+  @apply flex
+    mb-4;
+}
+
+.CMS_Collection_description-card {
+  @apply flex-grow
+    px-3.5
+    py-2.5
+    text-sm;
+}
+
+.CMS_Collection_controls {
+  @apply flex
+    items-center
+    relative
+    z-20
+    md:flex-grow-0
+    flex-grow
+    justify-end
+    gap-1.5
+    sm:w-auto
+    lg:gap-2;
+}
+
+.CMS_Collection_header-wrapper {
+  @apply flex
+    gap-2
+    sm:gap-2
+    md:gap-4
+    md:w-full
+    justify-normal
+    xs:justify-between
+    sm:justify-normal
+    truncate;
+}
+
+.CMS_Collection_header {
+  @apply text-xl
+    font-semibold
+    flex
+    items-center
+    text-gray-800
+    dark:text-gray-300
+    gap-2
+    md:w-auto;
+}
+
+.CMS_Collection_header-icon {
+  @apply flex
+    items-center;
+}
+
+.CMS_Collection_header-label {
+  @apply max-w-collection-header
+    md:flex-grow
+    truncate;
+}
+
+.CMS_Collection_new-entry-button {
+  @apply hidden
+    md:flex;
+}