[7567] Remove tss-react (#4315)

* Remove tss-react: AuditGrid, CharCountStatus, ConflictedPathDiffDialog, CopyDialog, CopyTokenContainer, GitForm, DialogHeader, Login * Remove tss-react: AccountManagement, ContentLocalizationDialog, ContextMenu, ItemActionsMenu, Launcher, LauncherSiteCard, PagesSearchAhead, PreviewAddressBar, PreviewPageExplorerPanel, SingleItemSelector * Remove tss-react: AuthMonitor, BrowseFilesDialogContainerSkeleton, BrowseFilesDialogUI, ConfirmDialog, DialogTitle, GroupManagement, InstallPluginDialogContainer, MediaCard, PathNavigatorBreadcrumbs, PathNavigatorList, PathNavigatorTreeUI, SearchBar, SiteSearchToolBar, TransferListColumn, UserManagement, * Remove tss-react: BlueprintForm, EncryptTool, RepoStatusUI, IconGuideDashlet, ItemPublishingTargetIcon, ItemStateIcon, LauncherOpenerButton, LegacyIFrame, LogoAndMenuBundleButton, TransferList, CrafterCMSIcon * Remove tss-react: BlueprintReview, Launcher, LoginForm, LoginView, PasswordTextField * Remove tss-react: CodeEditorDialogContainer, CreateSiteDialog, DependenciesDialog, DependenciesList, ErrorDialog, Gears, EmbeddedLegacyContainer, LegacyFormDialog, LoadingState, LoginView, QuickCreate, WidgetDialog, CrafterCMSLogo * Remove tss-react: AboutCrafterCMSView, ActionsGroup, AlertDialog, ConfirmDialog, ContentTypesFilter, CreateTokenDialogContainer, CreateUserDialogContainer, SelectionList, EditGroupDialog, EditUserDialog, PullDialogContainer, GroupsGrid, NewContentCard, ToolPanel, UsersGrid * Remove tss-react: WidgetDialog * Remove tss-react: AceEditor, AuditGridFilterPopover, ChangeContentTypeDialog, ConfigurationSamplePreviewDialog, ConflictedPathDialog, DeleteDialog, DependencySelection, GitAuthForm, PushDialog, GlobalConfigManagement, LauncherSection, LauncherTile, AudiencesPanel, PreviewDialog, SiteConfigurationManagement * Remove tss-react: DuplicateSiteDialogContainer, ItemDisplay, ItemMegaMenu, * Remove tss-react: CompareVersions, ContentTypeUsageReport, DeleteContentTypeDialog, GitManagement, GlobalAppGridCell, GlobalAllGridRow, HistoryDialog, ItemActionsSnackbar, ItemStatesGrid, LogLevelGrid, PathSelectionDialog, PreviewBrowseComponentsPanel, PreviewSearchPanel, ResizeBar, UploadDialogContainer, VersionList, LegacyVersionDialog * Remove tss-react: CompareVersionsDialogContainer, LogConsoleDetailsDialog, NewContentDialog, NewRemoteRepositoryForm, PasswordRequirementsDisplay, PluginCard, PluginDetailsView, PluginFormEngine, PluginManagement, PreviewAssetsPanel, PreviewInPageInstancesPanel, PreviewSimulatorPanel, ProgressBar, PublishDialogForm, RejectDialog, SingleFileUpload * Remove tss-react: FolderBrowserTreeView, PathNavigator, PathNavigatorTree, PreviewDropTargetsPanel, PublishDialog, PublishingQueue, PublishingStatusDialogContainer, PublishOnDemandForm, RubbishBin, SetItemStateDialogContainer, SiteSearchFilter, SiteSearchFilterCheckboxes, SiteSearchFilterRadios, SiteSearchSortBy, SiteSearchSortOrder, TokenManagement * Remove tss-react: GlobalApp, GlobalAppToolbar, ItemStateIcon, PublishOnDemandWidget, ResizeableDrawer, SearchUI, SiteCard, SiteSearchFilters, PathSelector, SiteSearchRangeSelector, SitesGrid, SiteSwitcherSelect, EmbeddedSiteTools, SiteTools, ToolsPanel, ViewToolbar, WorkflowCancellationDialog, WorkflowStateManagement * Remove tss-react: IFrame, ItemPublishingTargetIcon, PublishingStatusAvatar, PublishingStatusTile, UppyDashboard * Remove tss-react: EditModeSwitch, EmptyState, FormEngineControls, MobileStepper * Remove tss-react: CrafterThemeProvider * [7567 Fix launcher slotProps error and PublishDialogForm dateTime container padding * [7567] Fix PluginDetailsView MobileStepper dots styles, fix PathNavigatorTreeItem active style applying to all labels * [7567] Remove 'tss-react' dependency * [7567] Add types to /styles/card.ts, update types to StateStylingProps interface * [7567] CrafterCMSIcon sx types * [7567] Add back classes prop * [7567] Add back classes prop * [7567] Add back classes prop * [7567] Update CHANGELOG file * [7567] Add back classes prop - WorkflowCancellationDialogUI * [7567] Restore classes props in missing components * [7567] yarn.lock update after merging
craftercms · Jan 29, 2025 · 5c3ba7a · 5c3ba7a
1 parent a8e13cc
commit 5c3ba7a
Show file tree

Hide file tree

Showing 265 changed files with 5,701 additions and 8,132 deletions.
diff --git a/ui/app/package.json b/ui/app/package.json
@@ -103,7 +103,6 @@
     "redux-observable": "^3.0.0-rc.2",
     "rxjs": "^7.8.1",
     "slugify": "^1.6.6",
-    "tss-react": "^4.9.10",
     "typescript": "^5.7.3",
     "uppy": "^3.27.4",
     "uuid": "^10.0.0",

diff --git a/ui/app/src/CHANGELOG.md b/ui/app/src/CHANGELOG.md
@@ -6,6 +6,17 @@
   * Removed `pages/QuickCreateMenu` component.
   * Removed `SuspenseWithEmptyState` and `WithEmptyState` components.
   * Removed `resource` prop from StoreProvider
+  * Removed `styles` prop from `ErrorState`, `ApiResponseErrorState`, `BlueprintForm`, `LoadingState`, `ConfirmDialog`, `AlertDialog`
+  `LauncherSection`, `AceEditor`, `ItemDisplay`, `PasswordRequirementsDisplay`, `PublishDialogForm`, `ItemStateIcon`, `ResizeableDrawer`,
+  `GlobalAppToolbar`, `ViewToolbar`, `PublishingStatusAvatar`, `ItemPublishingTargetIcon` and `EmptyState`. Replaced by`sxs` prop.
+  * Removed `sectionStyles` and `tileStyles` props from `LauncherGlobalNav`. Replaced with `sectionSxs` and `tileSxs`.
+  * Added `sxs` prop to `CrafterCMSLogo`, `SiteSwitcherSelect`, `ConfirmDialog`, `ContextMenu`, `BlueprintForm`, `ErrorState`, 
+  `GlobalAppToolbar`, `ItemActionsMenu`, `ItemDisplay`, `ItemMegaMenuUI`, `ItemPublishingTargetIcon`, `ItemStateIcon`, `LauncherSectionUI`,
+  `LauncherSiteCard`, `LauncherTile`, `LoadingState`, `LoginForm`, `LogoAndMenuBundleButton`, `PagesSearchAhead`, `PasswordRequirementsDisplay`,
+  `PathNavigator`, `PathNavigatorBreadcrumbs`, `PathNavigatorHeader`, `PathNavigatorList`, `PathNavigatorUI`, `PathNavigatorTree`,
+  `PathNavigatorTreeItem`, `PathNavigatorTreeUI`, `PublishDialogForm`, `PublishingStatusAvatar`, `PublishingStatusTile`, `ResizeableDrawer`,
+  `SearchBar`, `SingleItemSelector`, `SiteTools`, `ToolPanel`, `ViewToolbar` and `CrafterCMSIcon`.
+  * Added `sx` prop to `FilterDropdown`, `PathNavigatorHeader`, `SiteTools`, `SiteSearchFilters` and `PublishingStatusAvatar`.
 * [hooks]
   * Removed `useLogicResource` hook.
   * Removed `useSelectorResource` hook.

diff --git a/ui/app/src/components/AboutCrafterCMSView/AboutCrafterCMSView.tsx b/ui/app/src/components/AboutCrafterCMSView/AboutCrafterCMSView.tsx
@@ -18,7 +18,6 @@ import React from 'react';
 import GlobalAppToolbar from '../GlobalAppToolbar';
 import { FormattedMessage } from 'react-intl';
 import Paper from '@mui/material/Paper';
-import useStyles from './styles';
 import CrafterCMSLogo from '../../icons/CrafterCMSLogo';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
@@ -28,29 +27,42 @@ import { useEnv } from '../../hooks/useEnv';
 
 export function AboutCrafterCMSView() {
   const env = useEnv();
-  const { classes } = useStyles();
   const localeBranch = useSelection((state) => state.uiConfig.locale);
 
   return (
     <Paper elevation={0}>
       <Box display="flex" flexDirection="column" height="calc(100vh - 215px)">
         <GlobalAppToolbar title={<FormattedMessage id="global.about" defaultMessage="About" />} />
         <Box display="flex" alignItems="center" justifyContent="center" flexGrow={[1]}>
-          <Paper className={classes.paperRoot}>
-            <CrafterCMSLogo width={250} className={classes.logo} />
-            <div className={classes.row}>
+          <Paper
+            sx={{
+              display: 'flex',
+              padding: '30px',
+              flexDirection: 'column',
+              backgroundColor: (theme) => theme.palette.background.default,
+              '& .row': {
+                display: 'flex',
+                marginTop: '10px',
+                '& .aboutLabel': {
+                  marginRight: '10px'
+                }
+              }
+            }}
+          >
+            <CrafterCMSLogo width={250} sxs={{ root: { margin: '0 auto 20px auto' } }} />
+            <div className="row">
               <Typography variant="subtitle2" className={'aboutLabel'}>
                 <FormattedMessage id="about.versionNumber" defaultMessage="Version Number" />:
               </Typography>
               <Typography variant="body2">{`${env.packageVersion}-${env.packageBuild?.substring(0, 6)}`}</Typography>
             </div>
-            <div className={classes.row}>
+            <div className="row">
               <Typography variant="subtitle2" className={'aboutLabel'}>
                 <FormattedMessage id="about.buildNumber" defaultMessage="Build Number" />:
               </Typography>
               <Typography variant="body2">{env.packageBuild}</Typography>
             </div>
-            <div className={classes.row}>
+            <div className="row">
               <Typography variant="subtitle2" className={'aboutLabel'}>
                 <FormattedMessage id="about.buildDate" defaultMessage="Build Date" />:
               </Typography>
@@ -60,7 +72,7 @@ export function AboutCrafterCMSView() {
                 )}
               </Typography>
             </div>
-            <div className={classes.externalLink}>
+            <Box sx={{ marginTop: '10px' }}>
               <Typography variant="body2">
                 <FormattedMessage
                   id="aboutView.attribution"
@@ -80,7 +92,7 @@ export function AboutCrafterCMSView() {
                   }}
                 />
               </Typography>
-            </div>
+            </Box>
           </Paper>
         </Box>
       </Box>

diff --git a/ui/app/src/components/AboutCrafterCMSView/styles.ts b/ui/app/src/components/AboutCrafterCMSView/styles.ts
diff --git a/ui/app/src/components/AccountManagement/AccountManagement.tsx b/ui/app/src/components/AccountManagement/AccountManagement.tsx
@@ -19,8 +19,7 @@ import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import GlobalAppToolbar from '../GlobalAppToolbar';
 import { Typography } from '@mui/material';
-import Paper from '@mui/material/Paper';
-import useStyles from './styles';
+import Paper, { paperClasses } from '@mui/material/Paper';
 import Avatar from '@mui/material/Avatar';
 import Container from '@mui/material/Container';
 import { dispatchLanguageChange, getCurrentLocale, setStoredLanguage } from '../../utils/i18n';
@@ -67,8 +66,6 @@ const translations = defineMessages({
 
 export function AccountManagement(props: AccountManagementProps) {
   const { passwordRequirementsMinComplexity = 4 } = props;
-
-  const { classes, cx: clsx } = useStyles();
   const user = useActiveUser();
   const [language, setLanguage] = useState(() => getCurrentLocale());
   const [languages, setLanguages] = useState<SystemLang[]>();
@@ -146,10 +143,24 @@ export function AccountManagement(props: AccountManagementProps) {
   return (
     <Paper elevation={0} sx={{ mb: 2 }}>
       <GlobalAppToolbar title={<FormattedMessage id="words.account" defaultMessage="Account" />} />
-      <Container maxWidth="md" sx={{ mb: 2, pb: 2 }}>
-        <Paper className={clsx(classes.paper, 'mt20')}>
+      <Container
+        maxWidth="md"
+        sx={{
+          mb: 2,
+          pb: 2,
+          [`& > .${paperClasses.root}`]: {
+            padding: '20px',
+            margin: '20px 0',
+            background: (theme) => theme.palette.background.default,
+            '& .mt20': {
+              marginTop: '20px'
+            }
+          }
+        }}
+      >
+        <Paper className="mt20">
           <Box display="flex" alignItems="center">
-            <Avatar className={classes.avatar}>
+            <Avatar sx={{ marginRight: '30px', width: '90px', height: '90px' }}>
               {user.firstName.charAt(0)}
               {user.lastName?.charAt(0) ?? ''}
             </Avatar>
@@ -161,7 +172,7 @@ export function AccountManagement(props: AccountManagementProps) {
             </section>
           </Box>
         </Paper>
-        <Paper className={classes.paper}>
+        <Paper>
           <Typography variant="h5">
             <FormattedMessage id="accountManagement.changeLanguage" defaultMessage="Change Language" />
           </Typography>
@@ -185,7 +196,7 @@ export function AccountManagement(props: AccountManagementProps) {
             )}
           </Box>
         </Paper>
-        <Paper className={classes.paper}>
+        <Paper>
           <Typography variant="h5">
             <FormattedMessage id="accountManagement.changePassword" defaultMessage="Change Password" />
           </Typography>
@@ -247,14 +258,14 @@ export function AccountManagement(props: AccountManagementProps) {
             />
             <PrimaryButton
               disabled={!validPassword || newPassword !== verifiedPassword || currentPassword === ''}
-              className={classes.save}
+              sx={{ marginLeft: 'auto' }}
               onClick={() => onSave()}
             >
               <FormattedMessage id="words.save" defaultMessage="Save" />
             </PrimaryButton>
           </Box>
         </Paper>
-        <Paper className={classes.paper}>
+        <Paper>
           <Typography variant="h5" mb={3}>
             <FormattedMessage defaultMessage="Stored Preferences" />
           </Typography>

diff --git a/ui/app/src/components/AccountManagement/styles.ts b/ui/app/src/components/AccountManagement/styles.ts
diff --git a/ui/app/src/components/AceEditor/AceEditor.tsx b/ui/app/src/components/AceEditor/AceEditor.tsx
@@ -15,13 +15,14 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { CSSObject as CSSProperties } from 'tss-react';
 import { useMount } from '../../hooks/useMount';
 import { useTheme } from '@mui/material/styles';
-import clsx from 'clsx';
 import { useEnhancedDialogContext } from '../EnhancedDialog/useEnhancedDialogContext';
 import MutableRef from '../../models/MutableRef';
+import { PartialSxRecord } from '../../models';
+import Box from '@mui/material/Box';
+import { SystemStyleObject } from '@mui/system/styleFunctionSx/styleFunctionSx';
+import { Theme } from '@mui/material';
 
 // @see https://github.com/ajaxorg/ace/wiki/Configuring-Ace
 export interface AceOptions {
@@ -109,13 +110,11 @@ export interface AceOptions {
 
 export type AceEditorClassKey = 'root' | 'editorRoot';
 
-export type AceEditorStyles = Partial<Record<AceEditorClassKey, CSSProperties>>;
-
 export interface AceEditorProps extends Partial<AceOptions> {
   value?: any;
-  classes?: Partial<Record<AceEditorClassKey, string>>;
   autoFocus?: boolean;
-  styles?: AceEditorStyles;
+  classes?: Partial<Record<AceEditorClassKey, string>>;
+  sxs?: PartialSxRecord<AceEditorClassKey>;
   extensions?: string[];
   onChange?(e: any): void;
   onInit?(editor: AceAjax.Editor): void;
@@ -184,38 +183,17 @@ const aceOptions: Array<keyof AceOptions> = [
 // const aceModes = [];
 // const aceThemes = [];
 
-const useStyles = makeStyles<AceEditorStyles, AceEditorClassKey>()(
-  (_theme, { root, editorRoot } = {} as AceEditorStyles) => ({
-    root: {
-      position: 'relative',
-      display: 'contents',
-      ...root
-    },
-    editorRoot: {
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      margin: 0,
-      width: '100%',
-      height: '100%',
-      ...editorRoot
-    }
-  })
-);
-
 function AceEditorComp(props: AceEditorProps, ref: MutableRef<AceAjax.Editor>) {
   const {
     value = '',
     classes: propClasses,
     autoFocus = false,
-    styles,
     extensions = [],
     onChange,
     onInit,
+    sxs,
     ...options
   } = props;
-  const { classes, cx } = useStyles(styles);
   const editorRootClasses = propClasses?.editorRoot;
   const refs = useRef({
     ace: null,
@@ -248,7 +226,7 @@ function AceEditorComp(props: AceEditorProps, ref: MutableRef<AceAjax.Editor>) {
         window.ace.require(['ace/ace', 'ace/ext/language_tools', 'ace/ext/emmet', ...extensions], (ace) => {
           if (!unmounted) {
             const pre = document.createElement('pre');
-            pre.className = cx(classes.editorRoot, editorRootClasses);
+            pre.className = editorRootClasses;
             refs.current.pre = pre;
             refs.current.elem.appendChild(pre);
             // @ts-ignore - Ace types are incorrect; they don't implement the constructor that receives options.
@@ -358,18 +336,33 @@ function AceEditorComp(props: AceEditorProps, ref: MutableRef<AceAjax.Editor>) {
     if (refs.current.pre) {
       refs.current.pre.className = `${[...refs.current.pre.classList]
         .filter((value) => !/craftercms-|makeStyles-/.test(value))
-        .join(' ')} ${clsx(classes?.editorRoot, editorRootClasses)}`;
+        .join(' ')} ${editorRootClasses}`;
     }
-  }, [classes.editorRoot, editorRootClasses]);
+  }, [editorRootClasses]);
 
   return (
-    <div
+    <Box
       ref={(e) => {
         if (e) {
           refs.current.elem = e;
         }
       }}
-      className={cx(classes.root, props.classes?.root)}
+      className={props.classes?.root}
+      sx={{
+        position: 'relative',
+        display: 'contents',
+        ...sxs?.root,
+        '& pre': {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          margin: 0,
+          width: '100%',
+          height: '100%',
+          ...(sxs?.editorRoot as SystemStyleObject<Theme>)
+        }
+      }}
     />
   );
 }