CB-3864 migrate tree to css modules (#2003)

* CB-3864 migrate tree to css modules * CB-3864 migrate extra components * CB-3864 review fixes * CB-3864 move editing and dragging props from base nav components * CB-3864 add styles to renderer * CB-3864 fix aws styles * CB-3864 remove padding in projects renderer * CB-3864 fix node hover effect * CB-3864 remove custom tags * CB-3864 remove config changes * CB-3864 review fixes * CB-3864 move NavigationNodeControl styles closer to the component * CB-3864 chore: code cleanup --------- Co-authored-by: Alexey <[email protected]> Co-authored-by: EvgeniaBzzz <[email protected]> Co-authored-by: mr-anton-t <[email protected]>
dbeaver · Sep 27, 2023 · 571d6b7 · 571d6b7
1 parent a2d9fdd
commit 571d6b7
Show file tree

Hide file tree

Showing 68 changed files with 841 additions and 861 deletions.
diff --git a/webapp/packages/core-blocks/src/ActionIconButton.m.css b/webapp/packages/core-blocks/src/ActionIconButton.m.css
@@ -0,0 +1,10 @@
+.actionIconButton {
+  composes: theme-form-element-radius theme-ripple from global;
+
+  padding: 4px !important;
+  margin: 2px !important;
+  width: 24px !important;
+  height: 24px !important;
+  overflow: hidden;
+  flex-shrink: 0;
+}
diff --git a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.m.css b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.m.css
@@ -0,0 +1,16 @@
+.status {
+  composes: theme-background-positive from global;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  bottom: 0;
+  right: 0;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+
+  &.connected {
+    opacity: 1;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
@@ -5,32 +5,18 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css, use } from 'reshadow';
+import { observer } from 'mobx-react-lite';
 
-const styles = css`
-  status {
-    composes: theme-background-positive from global;
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    bottom: 0;
-    right: 0;
-    box-sizing: border-box;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-
-    &[|connected] {
-      opacity: 1;
-    }
-  }
-`;
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './ConnectionMark.m.css';
 
 interface Props {
   connected: boolean;
   className?: string;
 }
 
-export const ConnectionMark: React.FC<Props> = function ConnectionMark({ connected, className }) {
-  return styled(styles)(<status {...use({ connected })} className={className} />);
-};
+export const ConnectionMark: React.FC<Props> = observer(function ConnectionMark({ connected, className }) {
+  const styles = useS(style);
+  return <div className={s(styles, { status: true, connected }, className)} />;
+});
diff --git a/webapp/packages/core-blocks/src/IconButton.m.css b/webapp/packages/core-blocks/src/IconButton.m.css
@@ -14,4 +14,4 @@
     width: 100%;
     height: 100%;
   }
-}
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.m.css
@@ -0,0 +1,5 @@
+.node {
+  box-sizing: border-box;
+  width: inherit;
+  min-width: 100%;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
@@ -8,14 +8,14 @@
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { forwardRef } from 'react';
-import styled, { use } from 'reshadow';
 
-import { getComputed } from '../../getComputed';
+import { s } from '../../s';
 import { useObjectRef } from '../../useObjectRef';
 import { useObservableRef } from '../../useObservableRef';
+import { useS } from '../../useS';
 import type { ITreeNodeState } from './ITreeNodeState';
+import style from './TreeNode.m.css';
 import { ITreeNodeContext, TreeNodeContext } from './TreeNodeContext';
-import { TREE_NODE_STYLES } from './TreeNodeStyles';
 
 interface Props extends ITreeNodeState {
   className?: string;
@@ -48,6 +48,7 @@ export const TreeNode = observer<Props, HTMLDivElement | null>(
     },
     ref,
   ) {
+    const styles = useS(style);
     const handlersRef = useObjectRef(handlers);
 
     async function processAction(action: () => Promise<void>) {
@@ -113,12 +114,10 @@ export const TreeNode = observer<Props, HTMLDivElement | null>(
       },
     );
 
-    const elementExpanded = getComputed(() => nodeContext.externalExpanded ?? nodeContext.expanded);
-
-    return styled(TREE_NODE_STYLES)(
-      <node {...use({ expanded: elementExpanded })} ref={ref} className={className}>
+    return (
+      <div ref={ref} className={s(styles, { node: true }, className)}>
         <TreeNodeContext.Provider value={nodeContext}>{children}</TreeNodeContext.Provider>
-      </node>,
+      </div>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.m.css
@@ -0,0 +1,24 @@
+.treeNodeControl {
+  composes: theme-ripple theme-ripple-selectable from global;
+  box-sizing: border-box;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  padding: 2px 0 2px 0;
+  user-select: none;
+  white-space: nowrap;
+  position: initial !important;
+  outline: none;
+
+  &::before {
+    left: 0 !important;
+    top: auto !important;
+    height: inherit !important;
+    width: 100% !important;
+  }
+
+  & > * {
+    margin-right: 0;
+    margin-left: 4px;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
@@ -10,11 +10,14 @@ import React, { forwardRef, useContext } from 'react';
 
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 
+import { s } from '../../s';
+import { useS } from '../../useS';
 import { EventTreeNodeClickFlag } from './EventTreeNodeClickFlag';
 import { EventTreeNodeExpandFlag } from './EventTreeNodeExpandFlag';
 import { EventTreeNodeSelectFlag } from './EventTreeNodeSelectFlag';
 import type { ITreeNodeState } from './ITreeNodeState';
 import { TreeNodeContext } from './TreeNodeContext';
+import style from './TreeNodeControl.m.css';
 
 const KEY = {
   ENTER: 'Enter',
@@ -25,15 +28,15 @@ interface Props extends ITreeNodeState {
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
   className?: string;
-  big?: boolean;
   children?: React.ReactNode;
 }
 
 export const TreeNodeControl = observer<Props & React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>(
   forwardRef(function TreeNodeControl(
-    { title, group, disabled, loading, selected, expanded, externalExpanded, leaf, onClick, onMouseDown, className, children, big, ...rest },
+    { title, group, disabled, loading, selected, expanded, externalExpanded, leaf, onClick, onMouseDown, className, children, ...rest },
     ref,
   ) {
+    const styles = useS(style);
     const context = useContext(TreeNodeContext);
 
     if (!context) {
@@ -112,7 +115,7 @@ export const TreeNodeControl = observer<Props & React.HTMLAttributes<HTMLDivElem
         tabIndex={0}
         title={title}
         aria-selected={context.selected}
-        className={className}
+        className={s(styles, { treeNodeControl: true }, className)}
         onClick={handleClick}
         onMouseDown={handleMouseDown}
         onKeyDown={handleEnter}

diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.m.css
@@ -0,0 +1,23 @@
+.treeNodeExpand {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  opacity: 0.5;
+  width: 16px;
+  height: 16px;
+  transform: rotate(-90deg);
+  &.small {
+    display: block;
+  }
+
+  &.expanded {
+    transform: rotate(0deg);
+  }
+}
+
+.icon {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx
@@ -7,24 +7,18 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled, { css } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { getComputed } from '../../getComputed';
 import { Icon } from '../../Icon';
 import { Loader } from '../../Loader/Loader';
+import { s } from '../../s';
+import { useS } from '../../useS';
 import { useStateDelay } from '../../useStateDelay';
 import { EventTreeNodeExpandFlag } from './EventTreeNodeExpandFlag';
 import { TreeNodeContext } from './TreeNodeContext';
-
-const styles = css`
-  Icon {
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-  }
-`;
+import style from './TreeNodeExpand.m.css';
 
 interface Props {
   leaf?: boolean;
@@ -35,6 +29,7 @@ interface Props {
 }
 
 export const TreeNodeExpand = observer<Props>(function TreeNodeExpand({ leaf, big, filterActive, disabled, className }) {
+  const styles = useS(style);
   const context = useContext(TreeNodeContext);
 
   if (!context) {
@@ -90,10 +85,14 @@ export const TreeNodeExpand = observer<Props>(function TreeNodeExpand({ leaf, bi
     }
   }
 
-  return styled(styles)(
-    <arrow className={className} onClick={handleExpand} onDoubleClick={handleDbClick}>
+  return (
+    <div
+      className={s(styles, { treeNodeExpand: true, expanded: context.expanded, big }, className)}
+      onClick={handleExpand}
+      onDoubleClick={handleDbClick}
+    >
       {loading && <Loader small fullSize />}
-      {expandable && <Icon name={iconName} viewBox={viewBox} />}
-    </arrow>,
+      {expandable && <Icon name={iconName} className={s(styles, { icon: true })} viewBox={viewBox} />}
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.m.css
@@ -0,0 +1,12 @@
+.treeNodeIcon {
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.staticImage {
+  position: relative;
+  height: 100%;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeIcon.tsx
@@ -5,30 +5,25 @@
  * 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';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
+import { observer } from 'mobx-react-lite';
 
+import { s } from '../../s';
 import { StaticImage } from '../../StaticImage';
-import { useStyles } from '../../useStyles';
-
-const styles = css`
-  StaticImage {
-    height: 100%;
-  }
-`;
+import { useS } from '../../useS';
+import style from './TreeNodeIcon.m.css';
 
 interface Props {
   icon?: string;
-  style?: ComponentStyle;
   className?: string;
 }
 
-export const TreeNodeIcon: React.FC<React.PropsWithChildren<Props>> = function TreeNodeIcon({ icon, style, className, children }) {
-  return styled(useStyles(styles, style))(
-    <icon className={className}>
-      {icon && <StaticImage icon={icon} />}
+export const TreeNodeIcon: React.FC<React.PropsWithChildren<Props>> = observer(function TreeNodeIcon({ icon, className, children }) {
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { treeNodeIcon: true }, className)}>
+      {icon && <StaticImage className={s(styles, { staticImage: true })} icon={icon} />}
       {children}
-    </icon>,
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.m.css
@@ -0,0 +1,8 @@
+.treeNodeName {
+  position: relative;
+  box-sizing: border-box;
+  padding-right: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeName.tsx
@@ -5,15 +5,22 @@
  * 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 './TreeNodeName.m.css';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-export const TreeNodeName: React.FC<Props> = function TreeNodeName({ className, children, ...rest }) {
+export const TreeNodeName: React.FC<Props> = observer(function TreeNodeName({ className, children, ...rest }) {
+  const styles = useS(style);
+
   return (
-    <div className={className} {...rest}>
+    <div className={s(styles, { treeNodeName: true }, className)} {...rest}>
       {children}
     </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNested.m.css
@@ -0,0 +1,10 @@
+.treeNodeNested {
+  box-sizing: border-box;
+  padding-left: 8px;
+  display: none;
+
+  &.root {
+    padding: 0;
+    display: block;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,4 @@ @@
         width: 100%;
         height: 100%;
       }
-    }
+    }