1.13.4 release

karamem0 · Aug 8, 2024 · ab14fae · ab14fae
1 parent b96e70d
commit ab14fae
Show file tree

Hide file tree

Showing 33 changed files with 1,794 additions and 273 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -14,6 +14,7 @@
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:sonarjs/recommended-legacy",
+    "plugin:testing-library/react",
     "standard"
   ],
   "settings": {
@@ -45,15 +46,10 @@
       {
         "groups": [
           "useContext",
-          "useError",
-          "useMsal",
-          "useRoute",
-          "useStore",
-          "useService",
           "useReducer",
           "useState",
+          "useMemo",
           "useRef",
-          "useDispatch",
           "useCallback",
           "useEffect"
         ]
@@ -82,9 +78,9 @@
         ]
       }
     ],
-    "no-var": "error",
     "no-unused-vars": "off",
     "no-use-before-define": "off",
+    "no-var": "error",
     "operator-linebreak": [
       "error",
       "after"
@@ -147,6 +143,11 @@
             "group": "builtin",
             "position": "before"
           },
+          {
+            "pattern": "@testing-library/**",
+            "group": "builtin",
+            "position": "after"
+          },
           {
             "pattern": "@automapper/**",
             "group": "builtin",
@@ -172,6 +173,7 @@
           "react",
           "react-dom/**",
           "react**",
+          "@testing-library/**",
           "@automapper/**",
           "@fluentui/**",
           "@microsoft/**",

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -5,7 +5,7 @@ on:
       - develop
 
 env:
-  BUILD_VERSION: '1.13.3'
+  BUILD_VERSION: '1.13.4'
 
 jobs:
   select-environment:

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,4 @@
 {
-  "customSyntax": "postcss-scss",
   "extends": [
     "stylelint-config-standard-scss",
     "stylelint-config-recess-order"

diff --git a/babel.config.json b/babel.config.json
@@ -14,7 +14,6 @@
       "@babel/preset-env",
       {
         "targets": {
-          "esmodules": "false",
           "node": "current"
         }
       }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,11 +76,11 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sonarjs": "^1.0.4",
+    "eslint-plugin-testing-library": "^6.2.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "postcss": "^8.4.41",
-    "postcss-scss": "^4.0.9",
     "postcss-styled-syntax": "^0.6.4",
     "sass": "^1.77.8",
     "stylelint": "^16.8.1",

diff --git a/src/common/components/Communication.presenter.tsx b/src/common/components/Communication.presenter.tsx
@@ -28,7 +28,7 @@ function Communication(props: Readonly<CommunicationProps>) {
     title
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/common/components/ErrorNotification.presenter.tsx b/src/common/components/ErrorNotification.presenter.tsx
@@ -35,7 +35,7 @@ function ErrorNotification(props: Readonly<ErrorNotificationProps>) {
     onDismiss
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     message ? (

diff --git a/src/common/components/ProgressDialog.presenter.tsx b/src/common/components/ProgressDialog.presenter.tsx
@@ -36,7 +36,7 @@ function ProgressDialog(props: Readonly<ProgressDialogProps>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <Dialog

diff --git a/src/common/components/ScrollPanel.presenter.tsx b/src/common/components/ScrollPanel.presenter.tsx
@@ -24,7 +24,7 @@ function ScrollPanel(props: Readonly<React.PropsWithChildren<ScrollPanelProps>>,
     className
   } = props;
 
-  const { theme, themeName } = useTheme();
+  const { theme: { theme, themeName } } = useTheme();
 
   const scrollBarThumbColor = React.useMemo(() => {
     switch (themeName) {

diff --git a/src/common/components/Tree.presenter.tsx b/src/common/components/Tree.presenter.tsx
@@ -31,7 +31,7 @@ function Tree(props: Readonly<React.PropsWithChildren<TreeProps>>, ref: React.Re
     onKeyDown
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/common/components/TreeItem.presenter.tsx b/src/common/components/TreeItem.presenter.tsx
@@ -50,7 +50,7 @@ function TreeItem(props: Readonly<TreeItemProps>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/dialog/components/ThemeChangeDialog.tsx b/src/features/dialog/components/ThemeChangeDialog.tsx
@@ -18,7 +18,7 @@ import Presenter from './ThemeChangeDialog.presenter';
 function ThemeChangeDialog() {
 
   const { storage } = useService();
-  const { themeName, changeTheme } = useTheme();
+  const { theme: { themeName }, changeTheme } = useTheme();
 
   const handleChangeTheme = React.useCallback((_: Event, data?: ThemeName) => {
     changeTheme?.(data ?? ThemeName.light);

diff --git a/src/features/error/pages/Error404Page.presenter.tsx b/src/features/error/pages/Error404Page.presenter.tsx
@@ -22,7 +22,7 @@ function Error404Page() {
 
   const intl = useIntl();
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/error/pages/Error500Page.presenter.tsx b/src/features/error/pages/Error500Page.presenter.tsx
@@ -22,7 +22,7 @@ function Error500Page() {
 
   const intl = useIntl();
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/explorer/components/ExplorerFileConflictButton.presenter.tsx b/src/features/explorer/components/ExplorerFileConflictButton.presenter.tsx
@@ -32,7 +32,7 @@ function ExplorerFileConflictButton(props: Readonly<ExplorerFileConflictButtonPr
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return fileConflict ? (
     <div

diff --git a/src/features/explorer/components/ExplorerTabPanel.presenter.tsx b/src/features/explorer/components/ExplorerTabPanel.presenter.tsx
@@ -51,7 +51,7 @@ function ExplorerTabPanel(props: Readonly<ExplorerTabPanelProps>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
   const {
     isDragActive,
     getRootProps,

diff --git a/src/features/home/pages/HomePage.presenter.tsx b/src/features/home/pages/HomePage.presenter.tsx
@@ -37,7 +37,7 @@ function HomePage(props: Readonly<HomePageProps>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/main/components/AppBar.presenter.tsx b/src/features/main/components/AppBar.presenter.tsx
@@ -47,7 +47,7 @@ function AppBar(props: Readonly<AppBarProps>, ref: React.Ref<HTMLDivElement>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/main/components/AppBarButton.presenter.tsx b/src/features/main/components/AppBarButton.presenter.tsx
@@ -37,7 +37,7 @@ function AppBarButton(props: Readonly<AppBarButtonProps>) {
     onClick
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/main/components/AppBarMenuButton.presenter.tsx b/src/features/main/components/AppBarMenuButton.presenter.tsx
@@ -36,7 +36,7 @@ function AppBarMenuButton(props: Readonly<AppBarMenuButtonProps>) {
     title
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/main/components/AppTab.presenter.tsx b/src/features/main/components/AppTab.presenter.tsx
@@ -27,7 +27,7 @@ function AppTab(props: Readonly<AppTabProps>) {
     tabType
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/main/components/ContentHeader.presenter.tsx b/src/features/main/components/ContentHeader.presenter.tsx
@@ -57,7 +57,7 @@ function ContentHeader(props: Readonly<ContentHeaderProps>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return file ? (
     <div

diff --git a/src/features/main/components/ContentMarkdown.presenter.tsx b/src/features/main/components/ContentMarkdown.presenter.tsx
@@ -55,7 +55,7 @@ function ContentMarkdown(props: Readonly<ContentMarkdownProps>, ref: React.Ref<M
     onToolbarClick
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return editing ? (
     <ScrollSynchronizer

diff --git a/src/features/main/pages/MainPage.presenter.tsx b/src/features/main/pages/MainPage.presenter.tsx
@@ -36,7 +36,7 @@ function MainPage(props: Readonly<MainPageProps>) {
     loading
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return loading ? (
     <div

diff --git a/src/features/markdown/components/MarkdownCodeRenderer.presenter.tsx b/src/features/markdown/components/MarkdownCodeRenderer.presenter.tsx
@@ -25,7 +25,7 @@ function MarkdownCodeRenderer(props: Readonly<React.PropsWithChildren<MarkdownCo
     inline
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   const match = /language-(\w+)/.exec(className ?? '');
   const language = match?.at(1) ?? '';

diff --git a/src/features/markdown/components/MarkdownEditor.presenter.tsx b/src/features/markdown/components/MarkdownEditor.presenter.tsx
@@ -27,7 +27,7 @@ function MarkdownEditor(props: Readonly<MarkdownEditorProps>, ref: React.Ref<HTM
     tabOpen
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return (
     <div

diff --git a/src/features/markdown/components/MarkdownEditor.tsx b/src/features/markdown/components/MarkdownEditor.tsx
@@ -60,7 +60,7 @@ function MarkdownEditor(props: Readonly<MarkdownEditorProps>, ref: React.Ref<Mar
       tabProps
     }
   } = useStore();
-  const { theme, themeName } = useTheme();
+  const { theme: { theme, themeName } } = useTheme();
   const editorRef = React.useRef<HTMLDivElement>(null);
   const monacoRef = React.useRef<monaco.editor.IStandaloneCodeEditor>();
 

diff --git a/src/features/markdown/components/MarkdownSplitter.presenter.tsx b/src/features/markdown/components/MarkdownSplitter.presenter.tsx
@@ -31,7 +31,7 @@ function MarkdownSplitter(props: Readonly<MarkdownSplitterProps>) {
     onChangePreview
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return preview ? (
     <Button

diff --git a/src/features/markdown/components/MarkdownViewer.presenter.tsx b/src/features/markdown/components/MarkdownViewer.presenter.tsx
@@ -31,7 +31,7 @@ function MarkdownViewer(props: Readonly<MarkdownViewerProps>) {
     text
   } = props;
 
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return text ? (
     <div

diff --git a/src/features/search/components/SearchTabPanel.presenter.tsx b/src/features/search/components/SearchTabPanel.presenter.tsx
@@ -50,7 +50,7 @@ function SearchTabPanel(props: Readonly<SearchTabPanelProps>) {
   } = props;
 
   const intl = useIntl();
-  const { theme } = useTheme();
+  const { theme: { theme } } = useTheme();
 
   return form ? (
     <div

diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
@@ -17,9 +17,13 @@ import { darkTheme, lightTheme } from '../themes/Theme';
 import { InvalidOperationError } from '../types/Error';
 import { ThemeName } from '../types/Model';
 
-interface ThemeContextState {
+interface ThemeState {
   theme: Theme,
-  themeName: ThemeName,
+  themeName: ThemeName
+}
+
+interface ThemeContextState {
+  theme: ThemeState,
   changeTheme: (themeName: ThemeName) => void
 }
 
@@ -37,18 +41,24 @@ function ThemeProvider(props: Readonly<React.PropsWithChildren<unknown>>) {
 
   const { children } = props;
 
-  const [ theme, setTheme ] = React.useState<Theme>(lightTheme);
-  const [ themeName, setThemeName ] = React.useState<ThemeName>(ThemeName.light);
+  const [ theme, setTheme ] = React.useState<ThemeState>({
+    theme: lightTheme,
+    themeName: ThemeName.light
+  });
 
-  const handleChangeTheme = React.useCallback((value: ThemeName) => {
+  const handleChangeTheme = React.useMemo(() => (value: ThemeName) => {
     switch (value) {
       case ThemeName.light:
-        setTheme(() => lightTheme);
-        setThemeName(() => value);
+        setTheme(() => ({
+          theme: lightTheme,
+          themeName: value
+        }));
         break;
       case ThemeName.dark:
-        setTheme(() => darkTheme);
-        setThemeName(() => value);
+        setTheme(() => ({
+          theme: darkTheme,
+          themeName: value
+        }));
         break;
       default:
         break;
@@ -57,17 +67,15 @@ function ThemeProvider(props: Readonly<React.PropsWithChildren<unknown>>) {
 
   const value = React.useMemo<ThemeContextState>(() => ({
     theme,
-    themeName,
     changeTheme: handleChangeTheme
   }), [
     theme,
-    themeName,
     handleChangeTheme
   ]);
 
   return (
     <ThemeContext.Provider value={value}>
-      <Provider theme={value.theme}>
+      <Provider theme={value.theme.theme}>
         {children}
       </Provider>
     </ThemeContext.Provider>