Cb 3861 Migrate Simple component to CSS modules

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

@@ -9,18 +9,7 @@
   composes: theme-background-surface theme-text-on-surface from global;
   display: flex;
   position: relative;
-  flex: 1 1 0%;
-  overflow: auto;
-  z-index: 0;
 }
 .loader {
   height: 100%;
 }
-.split {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  overflow: hidden;
-  z-index: 0;
-}
-

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

@@ -29,31 +29,24 @@ export const Main = observer(function Main() {
     <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>
+          <Pane  basis="250px" main>
             <Loader suspense>
               <SideBarPanel container={leftBarPanelService.tabsContainer} />
             </Loader>
           </Pane>
           <ResizerControls />
-          <Pane className={s(styles, { pane: true })}>
-            <Split
-              className={s(styles, { split: true })}
-              {...splitRightState}
-              mode={sideBarDisabled ? 'minimize' : splitRightState.mode}
-              disable={sideBarDisabled}
-              sticky={30}
-            >
+          <Pane>
+            <Split {...splitRightState} mode={sideBarDisabled ? 'minimize' : splitRightState.mode} disable={sideBarDisabled} sticky={30}>
               <Pane className={s(styles, { pane: true })}>
                 <RightArea />
               </Pane>
               <ResizerControls />
-              <Pane basis="250px" main className={s(styles, { pane: true })}>
+              <Pane basis="250px" main >
                 <Loader suspense className={s(styles, { loader: true })}>
                   <SideBarPanel container={sideBarPanelService.tabsContainer} />
                 </Loader>

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

@@ -1,31 +1,6 @@
-.pane {
-  composes: theme-background-surface theme-text-on-surface from global;
-  display: flex;
-  overflow: auto;
-}
 .loader {
   height: 100%;
 }
 .slideBox {
   flex: 1;
 }
-.space {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  overflow: hidden;
-  height: 100%;
-}
-.split {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex: 1;
-  overflow: hidden;
-  z-index: 0;
-}
-.pane {
-  flex: 1 1 0%;
-  overflow: auto;
-  z-index: 0;
-}

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

@@ -13,7 +13,6 @@ import {
   ResizerControls,
   s,
   SlideBox,
-  SlideBoxStyles,
   SlideElement,
   SlideOverlay,
   Split,
@@ -32,7 +31,7 @@ interface Props {
 }
 
 export const RightArea = observer<Props>(function RightArea({ className }) {
-  const styles = useS(SlideBoxStyles, style);
+  const styles = useS(style);
   const toolsPanelService = useService(ToolsPanelService);
   const optionsPanelService = useService(OptionsPanelService);
   const splitState = useSplitUserState('right-area');
@@ -43,35 +42,27 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
   const toolsDisabled = activeTools.length === 0 || toolsPanelService.disabled;
 
   return (
-    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true, open: optionsPanelService.active }, className)}>
-      <SlideElement className={s(styles, { slideElement: true })}>
+    <SlideBox className={s(styles, { slideBox: true }, className)}>
+      <SlideElement open={optionsPanelService.active}>
         <Loader className={s(styles, { loader: true })} suspense>
           <OptionsPanel />
         </Loader>
       </SlideElement>
-      <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 })}>
+      <SlideElement open={optionsPanelService.active}>
+        <Split {...splitState} sticky={30} split="horizontal" mode={toolsDisabled ? 'minimize' : splitState.mode} disable={toolsDisabled} keepRatio>
+          <Pane>
             <Loader className={s(styles, { loader: true })} suspense>
               <NavigationTabsBar />
             </Loader>
           </Pane>
           <ResizerControls />
-          <Pane className={s(styles, { pane: true })} basis="30%" main>
+          <Pane basis="30%" main>
             <Loader className={s(styles, { loader: true })} suspense>
               <ToolsPanel container={toolsPanelService.tabsContainer} />
             </Loader>
           </Pane>
         </Split>
-        <SlideOverlay className={s(styles, { slideOverlay: true })} onClick={() => optionsPanelService.close()} />
+        <SlideOverlay open={optionsPanelService.active} onClick={() => optionsPanelService.close()} />
       </SlideElement>
     </SlideBox>
   );

webapp/packages/core-blocks/src/Slide/SlideBox.m.css

@@ -1,51 +1,4 @@
 .slideBox {
   overflow: hidden;
   white-space: nowrap;
-
-  & .slideElement {
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    vertical-align: top;
-    white-space: normal;
-    transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
-    transform: translateX(-100%);
-
-    &:first-child {
-      transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
-      width: 100%;
-    }
-  }
-
-  & .slideOverlay {
-    position: absolute;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    width: 0;
-    height: 0;
-    top: 0;
-    left: 0;
-    background: rgb(0 0 0 / 0%);
-    transition: background cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
-  }
-
-  &.open {
-    & .slideOverlay {
-      width: 100%;
-      height: 100%;
-      background: rgb(0 0 0 / 35%);
-
-      & > :global(div) {
-        display: flex;
-      }
-    }
-    & .slideElement {
-      transform: translateX(0%);
-
-      &:first-child {
-        width: calc(100% - 120px);
-      }
-    }
-  }
 }

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

@@ -5,14 +5,19 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
 import { useEffect, useRef } from 'react';
 
+import { s, useS } from '../index';
+import style from './SlideBox.m.css';
+
 interface Props {
-  open?: boolean;
   className?: string;
+  children?: React.ReactNode;
 }
 
-export const SlideBox: React.FC<React.PropsWithChildren<Props>> = function SlideBox({ children, className }) {
+export const SlideBox = observer<Props>(function SlideBox({ children, className }) {
+  const styles = useS(style);
   const divRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -37,8 +42,8 @@ export const SlideBox: React.FC<React.PropsWithChildren<Props>> = function Slide
   }, []);
 
   return (
-    <div ref={divRef} className={className}>
+    <div ref={divRef} className={s(styles, { slideBox: true }, className)}>
       {children}
     </div>
   );
-};
+});

webapp/packages/core-blocks/src/Slide/SlideElement.m.css

@@ -0,0 +1,22 @@
+.slideElement {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+  transform: translateX(-100%);
+
+  &:first-child {
+    transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+    width: 100%;
+  }
+
+  &.open {
+    transform: translateX(0%);
+
+    &:first-child {
+      width: calc(100% - 120px);
+    }
+  }
+}

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

@@ -5,11 +5,20 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './SlideElement.m.css';
 
 interface Props {
   className?: string;
+  children?: React.ReactNode;
+  open?: boolean;
 }
 
-export const SlideElement: React.FC<React.PropsWithChildren<Props>> = function SlideElement({ children, className }) {
-  return <div className={className}>{children}</div>;
-};
+export const SlideElement = observer<Props>(function SlideElement({ children,open, className }) {
+  const styles = useS(style);
+
+  return <div className={s(styles, { slideElement: true, open }, className)}>{children}</div>;
+});

webapp/packages/core-blocks/src/Slide/SlideOverlay.m.css

@@ -0,0 +1,40 @@
+.slideOverlay {
+  z-index: 1;
+  position: absolute;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  background: rgb(0 0 0 / 0%);
+  transition: background cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+
+  &.open {
+    width: 100%;
+    height: 100%;
+    background: rgb(0 0 0 / 35%);
+
+    & > :global(div) {
+      display: flex;
+    }
+  }
+}
+
+.iconBtn {
+  composes: theme-background-surface theme-text-on-surface theme-ripple from global;
+  box-sizing: border-box;
+  margin-left: 36px;
+  width: 48px;
+  height: 48px;
+  padding: 16px;
+  border-radius: 50%;
+  display: none;
+  overflow: hidden;
+  align-items: center;
+  transform: rotate(90deg);
+}
+.icon {
+  width: 100%;
+}

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

@@ -5,43 +5,28 @@
  * Licensed under the Apache License, Version 2.0.
  * 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';
+import { useS } from '../useS';
+import style from './SlideOverlay.m.css';
 
 interface Props {
   className?: string;
   onClick?: () => void;
+  open?: boolean;
 }
 
-const styles = css`
-  div {
-    z-index: 1;
-  }
-  icon-btn {
-    composes: theme-background-surface theme-text-on-surface theme-ripple from global;
-    box-sizing: border-box;
-    margin-left: 36px;
-    width: 48px;
-    height: 48px;
-    padding: 16px;
-    border-radius: 50%;
-    display: none;
-    overflow: hidden;
-    align-items: center;
-    transform: rotate(90deg);
-  }
-  Icon {
-    width: 100%;
-  }
-`;
+export const SlideOverlay = observer<Props>(function SlideOverlay({ className, open, onClick }) {
+  const styles = useS(style);
 
-export const SlideOverlay: React.FC<Props> = function SlideOverlay({ className, onClick }) {
-  return styled(styles)(
-    <div className={className} onClick={onClick}>
-      <icon-btn>
-        <Icon name="angle" viewBox="0 0 15 8" />
-      </icon-btn>
-    </div>,
+  return (
+    <div className={s(styles, { slideOverlay: true, open }, className)} onClick={onClick}>
+      <div className={s(styles, { iconBtn: true })}>
+        <Icon className={s(styles, { icon: true })} name="angle" viewBox="0 0 15 8" />
+      </div>
+    </div>
   );
-};
+});

webapp/packages/core-blocks/src/Split/Pane.m.css

@@ -0,0 +1,7 @@
+.pane {
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+  composes: theme-background-surface theme-text-on-surface from global;
+  display: flex;
+}