Cb 3963 migrate core view to css modules

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

@@ -0,0 +1,30 @@
+.message {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-radius: var(--theme-group-element-radius);
+  height: 50px;
+  padding: 8px 12px;
+}
+
+.errorIcon {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+
+.messageBody {
+  composes: theme-typography--body2 from global;
+  max-height: 100%;
+  line-height: 1.2;
+  box-sizing: border-box;
+  flex: 1;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.messageActions {
+  margin-left: 16px;
+}

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

@@ -6,43 +6,13 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
-
 import { Button } from './Button';
 import { IconOrImage } from './IconOrImage';
 import { useTranslate } from './localization/useTranslate';
+import { useS } from './useS';
 
-const styles = css`
-  message {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    border-radius: var(--theme-group-element-radius);
-    height: 50px;
-    padding: 8px 12px;
-  }
-
-  IconOrImage {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-  }
-
-  message-body {
-    composes: theme-typography--body2 from global;
-    max-height: 100%;
-    line-height: 1.2;
-    box-sizing: border-box;
-    flex: 1;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  message-actions {
-    margin-left: 16px;
-  }
-`;
+import styles from './ErrorMessage.m.css';
+import { s } from './s';
 
 interface Props {
   hasDetails?: boolean;
@@ -53,18 +23,19 @@ interface Props {
 
 export const ErrorMessage = observer<Props>(function ErrorMessage({ text, className, hasDetails, onShowDetails }) {
   const translate = useTranslate();
+  const style = useS(styles);
 
-  return styled(styles)(
-    <message className={className}>
-      <IconOrImage icon="/icons/error_icon_sm.svg" />
-      <message-body title={text}>{text}</message-body>
-      <message-actions>
+  return (
+    <div className={s(style, { message: true }, className)}>
+      <IconOrImage className={s(style, { errorIcon: true })} icon="/icons/error_icon_sm.svg" />
+      <div className={s(style, { messageBody: true })} title={text}>{text}</div>
+      <div className={s(style, { messageActions: true })}>
         {hasDetails && (
           <Button type="button" mod={['outlined']} onClick={onShowDetails}>
             {translate('ui_errors_details')}
           </Button>
         )}
-      </message-actions>
-    </message>,
+      </div>
+    </div>
   );
 });

webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 import { useCallback, useRef, useState } from 'react';
-import { use } from 'reshadow';
 
 import { IconButton } from '../IconButton';
 import { useTranslate } from '../localization/useTranslate';
@@ -67,7 +66,6 @@ export const ItemListSearch: React.FC<IProps> = function ItemListSearch({ value,
           autoComplete="off"
           disabled={disabled}
           onChange={event => changeHandler(event.target.value)}
-          {...use({ mod: 'surface' })}
         />
         <div className={s(styles, { actionButton: true })}>
           {!onSearch && inputValue ? (

webapp/packages/core-blocks/src/Slide/SlideOverlay.tsx

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import { Icon } from '../Icon';
 import { s } from '../s';

webapp/packages/core-blocks/src/Table/TableItemSelect.m.css

@@ -0,0 +1,4 @@
+.checkbox {
+  margin-left: -10px;
+  margin-right: -10px;
+}

webapp/packages/core-blocks/src/Table/TableItemSelect.tsx

@@ -7,14 +7,16 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled, { css } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { Checkbox } from '../FormControls/Checkboxes/Checkbox';
 import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag';
 import { TableContext } from './TableContext';
 import { TableItemContext } from './TableItemContext';
+import { useS } from '../useS';
+import styles from './TableItemSelect.m.css';
+import { s } from '../s';
 
 interface Props {
   checked?: boolean;
@@ -23,17 +25,11 @@ interface Props {
   className?: string;
 }
 
-const styles = css`
-  Checkbox {
-    margin-left: -10px;
-    margin-right: -10px;
-  }
-`;
-
 export const TableItemSelect = observer<Props>(function TableItemSelect({ checked, disabled, tooltip, className }) {
   const tableContext = useContext(TableContext);
   const context = useContext(TableItemContext);
   const selected = checked ?? context?.isSelected();
+  const style = useS(styles);
 
   function handleClick(event: React.MouseEvent<HTMLInputElement>) {
     if (!context) {
@@ -48,7 +44,13 @@ export const TableItemSelect = observer<Props>(function TableItemSelect({ checke
     return null;
   }
 
-  return styled(styles)(
-    <Checkbox className={className} title={tooltip} disabled={context.selectDisabled || disabled} checked={selected} onClick={handleClick} />,
+  return (
+    <Checkbox 
+      className={s(style, { checkbox: true }, className)}
+      title={tooltip}
+      disabled={context.selectDisabled || disabled}
+      checked={selected}
+      onClick={handleClick} 
+    />
   );
 });

webapp/packages/core-blocks/src/layout/TopAppBar.m.css

@@ -0,0 +1,10 @@
+.header {
+  composes: theme-text-on-primary theme-typography--body2 from global;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 8px;
+  background-color: #2a7cb4;
+  z-index: 1;
+  flex-shrink: 0;
+}

webapp/packages/core-blocks/src/layout/TopAppBar.tsx

@@ -5,25 +5,17 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
 
-export const topAppBarStyles = css`
-  header {
-    composes: theme-text-on-primary theme-typography--body2 from global;
-    display: flex;
-    align-items: center;
-    height: 48px;
-    padding: 0 8px;
-    background-color: #2a7cb4;
-    z-index: 1;
-    flex-shrink: 0;
-  }
-`;
+import { s } from '../s';
+import { useS } from '../useS';
+import styles from './TopAppBar.m.css';
 
 interface Props extends React.PropsWithChildren {
   className?: string;
 }
 
 export const TopAppBar: React.FC<Props> = function TopAppBar({ children, className }) {
-  return styled(topAppBarStyles)(<header className={className}>{children}</header>);
+  const style = useS(styles);
+
+  return (<header className={s(style, { header: true }, className)}>{children}</header>);
 };

webapp/packages/core-bootstrap/src/renderLayout.m.css

@@ -0,0 +1,3 @@
+.loader {
+  height: 100vh;
+}

webapp/packages/core-bootstrap/src/renderLayout.tsx

@@ -7,11 +7,11 @@
  */
 import { Suspense } from 'react';
 import { createRoot, Root } from 'react-dom/client';
-import styled from 'reshadow';
 
 import { Body } from '@cloudbeaver/core-app';
-import { DisplayError, ErrorBoundary, Loader } from '@cloudbeaver/core-blocks';
+import { DisplayError, ErrorBoundary, Loader, s } from '@cloudbeaver/core-blocks';
 import { AppContext, IServiceInjector } from '@cloudbeaver/core-di';
+import styles from './renderLayout.m.css';
 
 interface IRender {
   initRoot(): Root;
@@ -46,18 +46,14 @@ export function renderLayout(serviceInjector: IServiceInjector): IRender {
     },
     renderApp() {
       this.initRoot().render(
-        styled`
-          Loader {
-            height: 100vh;
-          }
-        `(
+        (
           <AppContext app={serviceInjector}>
             <ErrorBoundary root>
-              <Suspense fallback={<Loader />}>
+              <Suspense fallback={<Loader className={s(styles, { loader: true })} />}>
                 <Body />
               </Suspense>
             </ErrorBoundary>
-          </AppContext>,
+          </AppContext>
         ),
       );
     },

webapp/packages/core-view/src/View/CaptureView.m.css

@@ -0,0 +1,3 @@
+.container {
+  outline: none;
+}