Cb 3861 Migrate Simple component to CSS modules

webapp/packages/core-app/src/AppScreen/Main.m.css

@@ -0,0 +1,12 @@
+.space {
+  composes: theme-typography--body2 theme-background-primary from global;
+}
+.pane {
+  composes: theme-background-surface theme-text-on-surface from global;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+.loader {
+  height: 100%;
+}

webapp/packages/core-app/src/AppScreen/Main.tsx

@@ -6,65 +6,62 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { getComputed, Loader, Pane, ResizerControls, Split, splitStyles, useSplitUserState, useStyles } from '@cloudbeaver/core-blocks';
+import { getComputed, Loader, Pane, ResizerControls, s, Split, SplitStyles, useS, useSplitUserState } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { LeftBarPanelService, SideBarPanel, SideBarPanelService } from '@cloudbeaver/core-ui';
 
+import style from './Main.m.css';
 import { RightArea } from './RightArea';
 
-const mainStyles = css`
-  space {
-    composes: theme-typography--body2 theme-background-primary from global;
-  }
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-  }
-  Loader {
-    height: 100%;
-  }
-`;
-
 export const Main = observer(function Main() {
+  const styles = useS(SplitStyles, style);
   const sideBarPanelService = useService(SideBarPanelService);
   const leftBarPanelService = useService(LeftBarPanelService);
 
-  const styles = useStyles(mainStyles, splitStyles);
   const splitMainState = useSplitUserState('main');
   const splitRightState = useSplitUserState('main-right');
 
   const sideBarDisabled = getComputed(() => sideBarPanelService.tabsContainer.getDisplayed().length === 0);
   const leftBarDisabled = getComputed(() => leftBarPanelService.tabsContainer.getDisplayed().length === 0);
 
-  return styled(styles)(
-    <Loader suspense>
-      <space as="main">
-        <Split {...splitMainState} sticky={30} mode={leftBarDisabled ? 'minimize' : splitMainState.mode} disable={leftBarDisabled}>
-          <Pane basis="250px" main>
+  return (
+    <Loader className={s(styles, { loader: true })} suspense>
+      <main className={s(styles, { space: true })}>
+        <Split
+          className={s(styles, { split: true })}
+          {...splitMainState}
+          sticky={30}
+          mode={leftBarDisabled ? 'minimize' : splitMainState.mode}
+          disable={leftBarDisabled}
+        >
+          <Pane className={s(styles, { pane: true })} basis="250px" main>
             <Loader suspense>
               <SideBarPanel container={leftBarPanelService.tabsContainer} />
             </Loader>
           </Pane>
-          <ResizerControls />
-          <Pane>
-            <Split {...splitRightState} mode={sideBarDisabled ? 'minimize' : splitRightState.mode} disable={sideBarDisabled} sticky={30}>
-              <Pane>
+          <ResizerControls className={s(styles, { resizerControls: true })} />
+          <Pane className={s(styles, { pane: true })}>
+            <Split
+              className={s(styles, { split: true })}
+              {...splitRightState}
+              mode={sideBarDisabled ? 'minimize' : splitRightState.mode}
+              disable={sideBarDisabled}
+              sticky={30}
+            >
+              <Pane className={s(styles, { pane: true })}>
                 <RightArea />
               </Pane>
-              <ResizerControls />
-              <Pane basis="250px" main>
-                <Loader suspense>
+              <ResizerControls className={s(styles, { resizerControls: true })} />
+              <Pane basis="250px" main className={s(styles, { pane: true })}>
+                <Loader suspense className={s(styles, { loader: true })}>
                   <SideBarPanel container={sideBarPanelService.tabsContainer} />
                 </Loader>
               </Pane>
             </Split>
           </Pane>
         </Split>
-      </space>
-    </Loader>,
+      </main>
+    </Loader>
   );
 });

webapp/packages/core-app/src/AppScreen/RightArea.m.css

@@ -0,0 +1,11 @@
+.pane {
+  composes: theme-background-surface theme-text-on-surface from global;
+  display: flex;
+  overflow: auto;
+}
+.loader {
+  height: 100%;
+}
+.slideBox {
+  flex: 1;
+}

webapp/packages/core-app/src/AppScreen/RightArea.tsx

@@ -6,46 +6,35 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import {
   Loader,
   Pane,
   ResizerControls,
+  s,
   SlideBox,
-  slideBoxStyles,
+  SlideBoxStyles,
   SlideElement,
   SlideOverlay,
   Split,
-  splitHorizontalStyles,
-  splitStyles,
+  SplitHorizontalStyles,
+  SplitStyles,
+  useS,
   useSplitUserState,
-  useStyles,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { OptionsPanelService } from '@cloudbeaver/core-ui';
 import { NavigationTabsBar } from '@cloudbeaver/plugin-navigation-tabs';
 import { ToolsPanel, ToolsPanelService } from '@cloudbeaver/plugin-tools-panel';
 
-const styles = css`
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-    display: flex;
-    overflow: auto;
-  }
-  Loader {
-    height: 100%;
-  }
-  SlideBox {
-    flex: 1;
-  }
-`;
+import style from './RightArea.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const RightArea = observer<Props>(function RightArea({ className }) {
+  const styles = useS(SplitStyles, SplitHorizontalStyles, SlideBoxStyles, style);
   const toolsPanelService = useService(ToolsPanelService);
   const optionsPanelService = useService(OptionsPanelService);
   const splitState = useSplitUserState('right-area');
@@ -55,29 +44,37 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
 
   const toolsDisabled = activeTools.length === 0 || toolsPanelService.disabled;
 
-  return styled(useStyles(styles, splitStyles, splitHorizontalStyles, slideBoxStyles))(
-    <SlideBox open={optionsPanelService.active} className={className}>
-      <SlideElement>
-        <Loader suspense>
+  return (
+    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true, open: optionsPanelService.active }, className)}>
+      <SlideElement className={s(styles, { slideElement: true })}>
+        <Loader className={s(styles, { loader: true })} suspense>
           <OptionsPanel />
         </Loader>
       </SlideElement>
-      <SlideElement>
-        <Split {...splitState} sticky={30} split="horizontal" mode={toolsDisabled ? 'minimize' : splitState.mode} disable={toolsDisabled} keepRatio>
-          <Pane>
-            <Loader suspense>
+      <SlideElement className={s(styles, { slideElement: true })}>
+        <Split
+          className={s(styles, { split: true })}
+          {...splitState}
+          sticky={30}
+          split="horizontal"
+          mode={toolsDisabled ? 'minimize' : splitState.mode}
+          disable={toolsDisabled}
+          keepRatio
+        >
+          <Pane className={s(styles, { pane: true })}>
+            <Loader className={s(styles, { loader: true })} suspense>
               <NavigationTabsBar />
             </Loader>
           </Pane>
-          <ResizerControls />
-          <Pane basis="30%" main>
-            <Loader suspense>
+          <ResizerControls className={s(styles, { resizerControls: true })} />
+          <Pane className={s(styles, { pane: true })} basis="30%" main>
+            <Loader className={s(styles, { loader: true })} suspense>
               <ToolsPanel container={toolsPanelService.tabsContainer} />
             </Loader>
           </Pane>
         </Split>
-        <SlideOverlay onClick={() => optionsPanelService.close()} />
+        <SlideOverlay className={s(styles, { slideOverlay: true })} onClick={() => optionsPanelService.close()} />
       </SlideElement>
-    </SlideBox>,
+    </SlideBox>
   );
 });

webapp/packages/core-app/src/Body.m.css

@@ -0,0 +1,8 @@
+.bodyContent {
+    composes: theme-background-surface theme-text-on-surface theme-typography from global;
+    height: 100vh;
+    display: flex;
+    padding: 0 !important;
+    flex-direction: column;
+    overflow: hidden;
+}

webapp/packages/core-app/src/Body.tsx

@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useLayoutEffect, useRef } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Loader, useResource, useStyles } from '@cloudbeaver/core-blocks';
+import { Loader, s, useResource, useS, useStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { DialogsPortal } from '@cloudbeaver/core-dialogs';
 import { Notifications } from '@cloudbeaver/core-notifications';
@@ -21,24 +20,12 @@ import { ThemeService } from '@cloudbeaver/core-theming';
 import { DNDProvider } from '@cloudbeaver/core-ui';
 import { useAppVersion } from '@cloudbeaver/plugin-version';
 
-const bodyStyles = css`
-  theme {
-    composes: theme-background-surface theme-text-on-surface theme-typography from global;
-    height: 100vh;
-    display: flex;
-    padding: 0 !important; /* fix additional padding with modal reakit menu */
-    flex-direction: column;
-    overflow: hidden;
-  }
-  Loader {
-    height: 100vh;
-  }
-`;
+import style from './Body.m.css';
 
 export const Body = observer(function Body() {
   // const serverConfigLoader = useResource(Body, ServerConfigResource, undefined);
+  const styles = useS(style);
   const themeService = useService(ThemeService);
-  const style = useStyles(bodyStyles);
   const ref = useRef<HTMLDivElement>(null);
   useResource(Body, SessionPermissionsResource, undefined);
   const screenService = useService(ScreenService);
@@ -56,15 +43,15 @@ export const Body = observer(function Body() {
     document.documentElement.dataset.backendVersion = backendVersion;
   });
 
-  return styled(style)(
+  return (
     <DNDProvider>
       <Loader suspense>
-        <theme ref={ref} className={`theme-${themeService.currentTheme.id}`}>
+        <div ref={ref} className={s(styles, { bodyContent: true }, `theme-${themeService.currentTheme.id}`)}>
           <Loader suspense>{Screen && <Screen {...screenService.routerService.params} />}</Loader>
           <DialogsPortal />
           <Notifications />
-        </theme>
+        </div>
       </Loader>
-    </DNDProvider>,
+    </DNDProvider>
   );
 });

webapp/packages/core-blocks/src/AppRefreshButton.m.css

@@ -0,0 +1,20 @@
+.button {
+  color: white;
+  font-weight: 500;
+  background-color: #2a7cb4;
+  padding: 5px 16px;
+  border-radius: 4px;
+  letter-spacing: 0.08929em;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
+  &:active {
+    opacity: 0.5;
+  }
+}

webapp/packages/core-blocks/src/AppRefreshButton.tsx

@@ -6,47 +6,28 @@
  * you may not use this file except in compliance with the License.
  */
 import type React from 'react';
-import styled, { css } from 'reshadow';
 
 import { App, useService } from '@cloudbeaver/core-di';
 
-const style = css`
-  button {
-    color: white;
-    font-weight: 500;
-    background-color: #2a7cb4;
-    padding: 5px 16px;
-    border-radius: 4px;
-    letter-spacing: 0.08929em;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    cursor: pointer;
-    outline: none;
-    border: none;
-    &:hover,
-    &:focus {
-      opacity: 0.8;
-    }
-    &:active {
-      opacity: 0.5;
-    }
-  }
-`;
+import style from './AppRefreshButton.m.css';
+import { s } from './s';
+import { useS } from './useS';
 
 interface IProps {
   className?: string;
 }
 
 export const AppRefreshButton: React.FC<IProps> = function AppRefreshButton({ className }) {
+  const styles = useS(style);
   const app = useService(App);
 
   function refresh() {
     app.start();
   }
 
-  return styled(style)(
-    <button className={className} onClick={refresh}>
+  return (
+    <button className={s(styles, { button: true }, className)} onClick={refresh}>
       Refresh
-    </button>,
+    </button>
   );
 };