Cb 3861 Migrate Simple component to CSS modules

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

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

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

@@ -6,65 +6,55 @@
  * 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, 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(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
+          {...splitMainState}
+          sticky={30}
+          mode={leftBarDisabled ? 'minimize' : splitMainState.mode}
+          disable={leftBarDisabled}
+        >
+          <Pane  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>
+              <Pane className={s(styles, { pane: true })}>
                 <RightArea />
               </Pane>
               <ResizerControls />
-              <Pane basis="250px" main>
-                <Loader suspense>
+              <Pane basis="250px" main >
+                <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,6 @@
+.loader {
+  height: 100%;
+}
+.slideBox {
+  flex: 1;
+}

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

@@ -6,46 +6,21 @@
  * 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,
-  SlideBox,
-  slideBoxStyles,
-  SlideElement,
-  SlideOverlay,
-  Split,
-  splitHorizontalStyles,
-  splitStyles,
-  useSplitUserState,
-  useStyles,
-} from '@cloudbeaver/core-blocks';
+import { Loader, Pane, ResizerControls, s, SlideBox, SlideElement, SlideOverlay, Split, useS, useSplitUserState } 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(style);
   const toolsPanelService = useService(ToolsPanelService);
   const optionsPanelService = useService(OptionsPanelService);
   const splitState = useSplitUserState('right-area');
@@ -55,29 +30,29 @@ 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}>
+  return (
+    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true }, className)}>
       <SlideElement>
-        <Loader suspense>
+        <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>
+            <Loader className={s(styles, { loader: true })} suspense>
               <NavigationTabsBar />
             </Loader>
           </Pane>
           <ResizerControls />
           <Pane basis="30%" main>
-            <Loader suspense>
+            <Loader className={s(styles, { loader: true })} suspense>
               <ToolsPanel container={toolsPanelService.tabsContainer} />
             </Loader>
           </Pane>
         </Split>
         <SlideOverlay 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,32 +6,11 @@
  * 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';
+import { clsx } from '@cloudbeaver/core-utils';
 
-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';
 
 interface IProps {
   className?: string;
@@ -44,9 +23,9 @@ export const AppRefreshButton: React.FC<IProps> = function AppRefreshButton({ cl
     app.start();
   }
 
-  return styled(style)(
-    <button className={className} onClick={refresh}>
+  return (
+    <button className={clsx(style.button, className)} onClick={refresh}>
       Refresh
-    </button>,
+    </button>
   );
 };

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

@@ -0,0 +1,62 @@
+.buttonLabel {
+  composes: theme-button__label from global;
+}
+.buttonIcon {
+  composes: theme-button__icon from global;
+}
+.ripple {
+  composes: theme-button_ripple from global;
+}
+
+.button {
+  composes: theme-button from global;
+  display: flex;
+
+  & .buttonLabel {
+    line-height: 1;
+    opacity: 1;
+  }
+
+  & .buttonIcon {
+    & > * {
+      width: 100%;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  & .loader,
+  & .buttonLabel {
+    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  }
+
+  & .loader {
+    position: absolute;
+    opacity: 0 !important;
+  }
+
+  &.loading {
+    & .loader {
+      opacity: 1 !important;
+    }
+
+    & .buttonLabel {
+      opacity: 0;
+    }
+  }
+}
+
+.raised {
+  composes: theme-button_raised from global;
+}
+.unelevated {
+  composes: theme-button_unelevated from global;
+}
+.outlined {
+  composes: theme-button_outlined from global;
+}
+.secondary {
+  composes: theme-button_secondary from global;
+}