From f1117c6936d2d5453248ed167f79d4eadfee8659 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 16:42:10 +0200 Subject: [PATCH 01/32] feat: migrate Body to css-modules --- webapp/packages/core-app/src/Body.m.css | 8 ++++++++ webapp/packages/core-app/src/Body.tsx | 27 +++++++------------------ 2 files changed, 15 insertions(+), 20 deletions(-) create mode 100644 webapp/packages/core-app/src/Body.m.css diff --git a/webapp/packages/core-app/src/Body.m.css b/webapp/packages/core-app/src/Body.m.css new file mode 100644 index 0000000000..60f9ce527a --- /dev/null +++ b/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; +} diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx index a4b52dde4d..6b8edd8dba 100644 --- a/webapp/packages/core-app/src/Body.tsx +++ b/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(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 ( - +
{Screen && } - +
- , + ); }); From 99aabb91113fbb7633a85978cbb06a4f97cc03aa Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 18:14:15 +0200 Subject: [PATCH 02/32] feat: migrate Main to css-modules --- .../core-app/src/AppScreen/Main.m.css | 52 ++++++++++++++++ .../packages/core-app/src/AppScreen/Main.tsx | 62 +++++++++---------- 2 files changed, 81 insertions(+), 33 deletions(-) create mode 100644 webapp/packages/core-app/src/AppScreen/Main.m.css diff --git a/webapp/packages/core-app/src/AppScreen/Main.m.css b/webapp/packages/core-app/src/AppScreen/Main.m.css new file mode 100644 index 0000000000..60be87b130 --- /dev/null +++ b/webapp/packages/core-app/src/AppScreen/Main.m.css @@ -0,0 +1,52 @@ +.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; + flex: 1 1 0%; + overflow: auto; + background: red; + z-index: 0; +} +.loader { + height: 100%; +} +.split { + display: flex; + flex-direction: row; + flex: 1; + overflow: hidden; + z-index: 0; +} + +.ResizerControls { + composes: theme-background-background theme-text-on-secondary from global; + position: relative; + flex: 0 1 auto; + width: 2px; + cursor: ew-resize; + user-select: none; + z-index: 1; + transition: background-color 0.3s ease-in-out; + + &:hover { + background-color: var(--theme-primary); + } +} + +.ResizerControls:before { + content: ' '; + position: absolute; + width: 4px; + height: 100%; + top: 0; + left: -1px; + cursor: ew-resize; + box-sizing: border-box; +} diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx index 5f7f3dff4b..6661e983e7 100644 --- a/webapp/packages/core-app/src/AppScreen/Main.tsx +++ b/webapp/packages/core-app/src/AppScreen/Main.tsx @@ -6,65 +6,61 @@ * 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, useStyles } 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)( - - - - + return ( + +
+ + - - - - + + + + - - - + + + - - , +
+ ); }); From 986d6b8c9b51a38ffe8bc2d3333560f7303e06cf Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 18:40:37 +0200 Subject: [PATCH 03/32] feat: migrate AppRefreshButton to css-modules --- .../core-blocks/src/AppRefreshButton.m.css | 20 +++++++++++ .../core-blocks/src/AppRefreshButton.tsx | 33 ++++--------------- 2 files changed, 27 insertions(+), 26 deletions(-) create mode 100644 webapp/packages/core-blocks/src/AppRefreshButton.m.css diff --git a/webapp/packages/core-blocks/src/AppRefreshButton.m.css b/webapp/packages/core-blocks/src/AppRefreshButton.m.css new file mode 100644 index 0000000000..5e08d0eeb3 --- /dev/null +++ b/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; + } +} diff --git a/webapp/packages/core-blocks/src/AppRefreshButton.tsx b/webapp/packages/core-blocks/src/AppRefreshButton.tsx index a9d7849d86..f0f2c07176 100644 --- a/webapp/packages/core-blocks/src/AppRefreshButton.tsx +++ b/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 = function AppRefreshButton({ className }) { + const styles = useS(style); const app = useService(App); function refresh() { app.start(); } - return styled(style)( - , + ); }; From af50248ae1047dfbde35e5e1e21fc2a2ae06295e Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 20:47:53 +0200 Subject: [PATCH 04/32] feat: migrate Button to css-modules --- webapp/packages/core-blocks/src/Button.m.css | 62 ++++++++++ webapp/packages/core-blocks/src/Button.tsx | 121 ++++++------------- 2 files changed, 101 insertions(+), 82 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Button.m.css diff --git a/webapp/packages/core-blocks/src/Button.m.css b/webapp/packages/core-blocks/src/Button.m.css new file mode 100644 index 0000000000..73d5a3c61d --- /dev/null +++ b/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; +} diff --git a/webapp/packages/core-blocks/src/Button.tsx b/webapp/packages/core-blocks/src/Button.tsx index 6bcfab94dd..d64cf046b4 100644 --- a/webapp/packages/core-blocks/src/Button.tsx +++ b/webapp/packages/core-blocks/src/Button.tsx @@ -11,86 +11,19 @@ import styled, { css, use } from 'reshadow'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; +import style from './Button.m.css'; import { IconOrImage } from './IconOrImage'; import { Loader } from './Loader/Loader'; +import { s } from './s'; import { useObjectRef } from './useObjectRef'; import { useObservableRef } from './useObservableRef'; +import { useS } from './useS'; import { useStyles } from './useStyles'; -const buttonStyles = css` - button-label { - composes: theme-button__label from global; - } - button-icon { - composes: theme-button__icon from global; - } - ripple { - composes: theme-button_ripple from global; - } - Button { - composes: theme-button from global; - display: flex; - - & IconOrImage { - width: 100%; - } - - &[disabled] IconOrImage { - opacity: 0.5; - } - - & Loader, - & button-label { - transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s; - } - - & Loader { - position: absolute; - opacity: 0 !important; - } +type buttonMod = Array<'raised' | 'unelevated' | 'outlined' | 'secondary'>; - & button-label { - line-height: 1; - opacity: 1; - } - - &[|loading] { - & Loader { - opacity: 1 !important; - } - - & button-label { - opacity: 0; - } - } - - &[href] { - text-decoration: none !important; - } - } -`; - -const buttonMod = { - raised: css` - Button { - composes: theme-button_raised from global; - } - `, - unelevated: css` - Button { - composes: theme-button_unelevated from global; - } - `, - outlined: css` - Button { - composes: theme-button_outlined from global; - } - `, - secondary: css` - Button { - composes: theme-button_secondary from global; - } - `, +type buttonModMap = { + [key in buttonMod[number]]: boolean; }; type ButtonProps = (React.ButtonHTMLAttributes & @@ -100,7 +33,7 @@ type ButtonProps = (React.ButtonHTMLAttributes; + mod?: buttonMod; tag?: 'button' | 'a' | 'div'; href?: string; target?: '_blank' | '_self' | '_parent' | '_top'; @@ -114,7 +47,7 @@ export const Button = observer(function Button({ icon, viewBox, mod, - styles, + styles: oldStyles, tag = 'button', type = 'button', disabled = false, @@ -124,6 +57,7 @@ export const Button = observer(function Button({ className, ...rest }) { + const styles = useS(style); const handlersRef = useObjectRef({ onClick }); const state = useObservableRef( () => ({ @@ -154,17 +88,40 @@ export const Button = observer(function Button({ disabled = true; } + const modMap = mod?.reduce((map, mod) => { + map[mod] = true; + return map; + }, {} as buttonModMap); + const Button = tag; - return styled(useStyles(styles, buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))( - , ); }); From b18a14177aadbf60863bd7e335e7f66e0b4aa735 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 21:08:06 +0200 Subject: [PATCH 05/32] feat: migrate Cell to css-modules --- webapp/packages/core-blocks/src/Cell.m.css | 32 ++++++++++ webapp/packages/core-blocks/src/Cell.tsx | 71 +++++----------------- 2 files changed, 46 insertions(+), 57 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Cell.m.css diff --git a/webapp/packages/core-blocks/src/Cell.m.css b/webapp/packages/core-blocks/src/Cell.m.css new file mode 100644 index 0000000000..34a58ddfbd --- /dev/null +++ b/webapp/packages/core-blocks/src/Cell.m.css @@ -0,0 +1,32 @@ +.main { + position: relative; + display: flex; + align-items: center; + padding: 8px; +} +.before { + margin-right: 16px; + width: 24px; + height: 24px; + flex-shrink: 0; +} +.after { + margin-left: 16px; + flex-shrink: 0; +} +.info { + composes: theme-typography--body2 from global; + flex: 1; + line-height: 1.4; + display: flex; + flex-direction: column; + font-weight: 500; +} +.description { + composes: theme-typography--caption from global; + line-height: 1.2; +} + +.ripple { + composes: theme-ripple from global; +} diff --git a/webapp/packages/core-blocks/src/Cell.tsx b/webapp/packages/core-blocks/src/Cell.tsx index 9c1e5b1dd4..871de7def3 100644 --- a/webapp/packages/core-blocks/src/Cell.tsx +++ b/webapp/packages/core-blocks/src/Cell.tsx @@ -5,11 +5,11 @@ * 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 { useStyles } from './useStyles'; +import style from './Cell.m.css'; +import { s } from './s'; +import { useS } from './useS'; interface Props { description?: React.ReactElement | string; @@ -20,62 +20,19 @@ interface Props { className?: string; } -const styles = css` - main { - position: relative; - display: flex; - align-items: center; - padding: 8px; - } - before { - margin-right: 16px; - width: 24px; - height: 24px; - flex-shrink: 0; - } - after { - margin-left: 16px; - flex-shrink: 0; - } - info { - composes: theme-typography--body2 from global; - flex: 1; - line-height: 1.4; - display: flex; - flex-direction: column; - font-weight: 500; - } - description { - composes: theme-typography--caption from global; - line-height: 1.2; - } -`; - -const RIPPLE_STYLES = css` - cell { - composes: theme-ripple from global; - } -`; +export const Cell: React.FC> = function Cell({ before, after, description, className, ripple = true, children }) { + const styles = useS(style); -export const Cell: React.FC> = function Cell({ - before, - after, - description, - style, - className, - ripple = true, - children, -}) { - return styled(useStyles(styles, style, ripple && RIPPLE_STYLES))( - -
- {before} - + return ( + +
+
{before}
+
{children} - {description && {description}} - - {after} + {description &&
{description}
} +
+
{after}
- , + ); }; From 5695e4dbae9f07db6312195614293704f876ab44 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 22:38:04 +0200 Subject: [PATCH 06/32] feat: migrate Code to css-modules --- webapp/packages/core-blocks/src/Code.m.css | 5 +++++ webapp/packages/core-blocks/src/Code.tsx | 20 ++++++++------------ 2 files changed, 13 insertions(+), 12 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Code.m.css diff --git a/webapp/packages/core-blocks/src/Code.m.css b/webapp/packages/core-blocks/src/Code.m.css new file mode 100644 index 0000000000..72d27418eb --- /dev/null +++ b/webapp/packages/core-blocks/src/Code.m.css @@ -0,0 +1,5 @@ +.codeContainer { + composes: theme-background-secondary theme-text-on-secondary from global; + padding: 16px; + border-radius: var(--theme-group-element-radius); +} diff --git a/webapp/packages/core-blocks/src/Code.tsx b/webapp/packages/core-blocks/src/Code.tsx index 78067153c6..030e56b65b 100644 --- a/webapp/packages/core-blocks/src/Code.tsx +++ b/webapp/packages/core-blocks/src/Code.tsx @@ -5,24 +5,20 @@ * 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 style from './Code.m.css'; +import { s } from './s'; +import { useS } from './useS'; interface Props { className?: string; } -const styles = css` - code-container { - composes: theme-background-secondary theme-text-on-secondary from global; - padding: 16px; - border-radius: var(--theme-group-element-radius); - } -`; - export const Code: React.FC> = function Code({ children, className }) { - return styled(styles)( - + const styles = useS(style); + + return ( +
{children} - , +
); }; From 4b169423cfa5988be2f34c7a19ad546b6ba541e0 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 22:38:11 +0200 Subject: [PATCH 07/32] feat: migrate DisplayError to css-modules --- .../core-blocks/src/DisplayError.m.css | 25 +++++++++ .../packages/core-blocks/src/DisplayError.tsx | 56 +++++++------------ 2 files changed, 45 insertions(+), 36 deletions(-) create mode 100644 webapp/packages/core-blocks/src/DisplayError.m.css diff --git a/webapp/packages/core-blocks/src/DisplayError.m.css b/webapp/packages/core-blocks/src/DisplayError.m.css new file mode 100644 index 0000000000..a9dca10b17 --- /dev/null +++ b/webapp/packages/core-blocks/src/DisplayError.m.css @@ -0,0 +1,25 @@ +.error { + width: 100%; + height: 100%; + display: flex; + overflow: auto; + + &.root { + height: 100vh; + } +} +.errorInnerBlock { + display: flex; + margin: auto; + padding: 16px 24px; + flex-direction: column; + align-items: center; +} +.notificationMark { + width: 40px; + height: 40px; +} +.details { + padding: 8px 16px; + white-space: pre-wrap; +} diff --git a/webapp/packages/core-blocks/src/DisplayError.tsx b/webapp/packages/core-blocks/src/DisplayError.tsx index f3d130246c..2da745075c 100644 --- a/webapp/packages/core-blocks/src/DisplayError.tsx +++ b/webapp/packages/core-blocks/src/DisplayError.tsx @@ -12,36 +12,12 @@ import { ENotificationType } from '@cloudbeaver/core-events'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { AppRefreshButton } from './AppRefreshButton'; +import style from './DisplayError.m.css'; +import { s } from './s'; import { NotificationMark } from './Snackbars/NotificationMark'; +import { useS } from './useS'; import { useStyles } from './useStyles'; -const style = css` - error { - width: 100%; - height: 100%; - display: flex; - overflow: auto; - - &[|root] { - height: 100vh; - } - } - error-inner-block { - display: flex; - margin: auto; - padding: 16px 24px; - flex-direction: column; - align-items: center; - } - NotificationMark { - width: 40px; - height: 40px; - } - details { - padding: 8px 16px; - } -`; - interface Props { root?: boolean; error?: Error; @@ -50,24 +26,32 @@ interface Props { styles?: ComponentStyle; } -export const DisplayError: React.FC> = function DisplayError({ root, children, error, errorInfo, className, styles }) { +export const DisplayError: React.FC> = function DisplayError({ + root, + children, + error, + errorInfo, + className, + styles: stylesProp, +}) { + const styles = useS(style); const stack = errorInfo?.componentStack || error?.stack; - return styled(useStyles(style, styles))( - - - + return styled(useStyles(stylesProp))( +
+
+

Something went wrong.

{root && } {children} {error && ( -
+
{error.toString()} {stack &&
} {stack} -
+
)} - - , +
+ , ); }; From f518c8b35777a7d645562ea5a391fe54c3be2e79 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Tue, 19 Sep 2023 23:20:16 +0200 Subject: [PATCH 08/32] feat: migrate ErrorBoundary to css-modules --- .../packages/core-blocks/src/DisplayError.tsx | 17 ++--------- .../core-blocks/src/ErrorBoundary.m.css | 3 ++ .../core-blocks/src/ErrorBoundary.tsx | 28 +++++++------------ 3 files changed, 16 insertions(+), 32 deletions(-) create mode 100644 webapp/packages/core-blocks/src/ErrorBoundary.m.css diff --git a/webapp/packages/core-blocks/src/DisplayError.tsx b/webapp/packages/core-blocks/src/DisplayError.tsx index 2da745075c..8b932b87d4 100644 --- a/webapp/packages/core-blocks/src/DisplayError.tsx +++ b/webapp/packages/core-blocks/src/DisplayError.tsx @@ -6,38 +6,27 @@ * you may not use this file except in compliance with the License. */ import type React from 'react'; -import styled, { css, use } from 'reshadow'; import { ENotificationType } from '@cloudbeaver/core-events'; -import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { AppRefreshButton } from './AppRefreshButton'; import style from './DisplayError.m.css'; import { s } from './s'; import { NotificationMark } from './Snackbars/NotificationMark'; import { useS } from './useS'; -import { useStyles } from './useStyles'; interface Props { root?: boolean; error?: Error; errorInfo?: React.ErrorInfo; className?: string; - styles?: ComponentStyle; } -export const DisplayError: React.FC> = function DisplayError({ - root, - children, - error, - errorInfo, - className, - styles: stylesProp, -}) { +export const DisplayError: React.FC> = function DisplayError({ root, children, error, errorInfo, className }) { const styles = useS(style); const stack = errorInfo?.componentStack || error?.stack; - return styled(useStyles(stylesProp))( + return (
@@ -52,6 +41,6 @@ export const DisplayError: React.FC> = function D
)}
- , + ); }; diff --git a/webapp/packages/core-blocks/src/ErrorBoundary.m.css b/webapp/packages/core-blocks/src/ErrorBoundary.m.css new file mode 100644 index 0000000000..0db5ac2ab6 --- /dev/null +++ b/webapp/packages/core-blocks/src/ErrorBoundary.m.css @@ -0,0 +1,3 @@ +.action { + padding: 8px 16px; +} diff --git a/webapp/packages/core-blocks/src/ErrorBoundary.tsx b/webapp/packages/core-blocks/src/ErrorBoundary.tsx index 907e9b1eb6..95e042db91 100644 --- a/webapp/packages/core-blocks/src/ErrorBoundary.tsx +++ b/webapp/packages/core-blocks/src/ErrorBoundary.tsx @@ -6,29 +6,21 @@ * you may not use this file except in compliance with the License. */ import React, { ErrorInfo } from 'react'; -import styled, { css } from 'reshadow'; -import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { errorOf, LoadingError } from '@cloudbeaver/core-utils'; import { Button } from './Button'; import { DisplayError } from './DisplayError'; +import style from './ErrorBoundary.m.css'; import { ErrorContext, IExceptionContext } from './ErrorContext'; import { ExceptionMessage } from './ExceptionMessage'; -const style = css` - action { - padding: 8px 16px; - } -`; - interface Props { icon?: boolean; root?: boolean; inline?: boolean; remount?: boolean; className?: string; - styles?: ComponentStyle; onClose?: () => any; onRefresh?: () => any; } @@ -48,6 +40,7 @@ export class ErrorBoundary extends React.Component + return ( + {onClose && ( - +
- +
)} {this.canRefresh && ( - +
- +
)} - , + ); } else { return ( @@ -100,7 +93,6 @@ export class ErrorBoundary extends React.Component From 6861539e9ec61d4c87aa19c6dcb5edb25d65b104 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Wed, 20 Sep 2023 01:11:03 +0200 Subject: [PATCH 09/32] feat: migrate ExceptionMessage to css-modules --- .../core-blocks/src/ExceptionMessage.m.css | 107 ++++++++++++++++++ .../core-blocks/src/ExceptionMessage.tsx | 98 ++++------------ 2 files changed, 129 insertions(+), 76 deletions(-) create mode 100644 webapp/packages/core-blocks/src/ExceptionMessage.m.css diff --git a/webapp/packages/core-blocks/src/ExceptionMessage.m.css b/webapp/packages/core-blocks/src/ExceptionMessage.m.css new file mode 100644 index 0000000000..6001353799 --- /dev/null +++ b/webapp/packages/core-blocks/src/ExceptionMessage.m.css @@ -0,0 +1,107 @@ +.errorName { + composes: theme-typography--headline6 from global; +} + +.error { + flex: 1; + display: flex; + padding: 24px; + + &.icon { + padding: 0; + height: 100%; + width: 100%; + max-height: 24px; + max-width: 24px; + + & .errorIcon { + display: flex; + align-items: center; + align-content: center; + + & .iconOrImage { + height: 100%; + width: 100%; + } + } + } + + & .errorData { + padding: 0 16px; + + & .errorName { + height: 40px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin: 0; + + & span { + display: inline-block; + vertical-align: middle; + line-height: normal; + } + } + + .errorMessage { + flex: 1; + overflow: auto; + white-space: pre-wrap; + } + + .errorActions { + display: flex; + flex-shrink: 0; + align-items: center; + margin-top: 16px; + gap: 16px; + } + } + + &.inline { + align-items: center; + height: 38px; + padding: 0; + + & .errorData { + display: flex; + align-items: center; + padding: 0; + } + + & .errorIcon { + display: flex; + align-items: center; + align-content: center; + + & .iconOrImage { + height: 24px; + width: 24px; + } + } + + & .errorMessage { + line-height: 1.2; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + padding: 0 16px; + } + & .errorName { + display: none; + } + & .errorActions { + margin-top: 0; + } + } + + .errorActionClose { + cursor: pointer; + width: 18px; + height: 18px; + flex-shrink: 0; + } +} + + diff --git a/webapp/packages/core-blocks/src/ExceptionMessage.tsx b/webapp/packages/core-blocks/src/ExceptionMessage.tsx index 1b1a847d11..cd2a3fd2c5 100644 --- a/webapp/packages/core-blocks/src/ExceptionMessage.tsx +++ b/webapp/packages/core-blocks/src/ExceptionMessage.tsx @@ -11,52 +11,16 @@ import styled, { css, use } from 'reshadow'; import type { ComponentStyle } from '@cloudbeaver/core-theming'; import { Button } from './Button'; +import style from './ExceptionMessage.m.css'; import { Icon } from './Icon'; import { IconOrImage } from './IconOrImage'; import { useTranslate } from './localization/useTranslate'; +import { s } from './s'; import { useErrorDetails } from './useErrorDetails'; +import { useS } from './useS'; import { useStyles } from './useStyles'; -const style = css` - error { - flex: 1; - display: flex; - padding: 24px; - } - - error-name { - composes: theme-typography--headline6 from global; - height: 40px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - margin: 0; - - & span { - display: inline-block; - vertical-align: middle; - line-height: normal; - } - } - - error-data { - padding: 0 16px; - } - - error-message { - flex: 1; - overflow: auto; - white-space: pre-wrap; - } - - error-actions { - display: flex; - flex-shrink: 0; - align-items: center; - margin-top: 16px; - gap: 16px; - } - +const oldStyle = css` error[|inline] { align-items: center; height: 38px; @@ -92,24 +56,6 @@ const style = css` margin-top: 0; } } - error[|icon] { - padding: 0; - height: 100%; - width: 100%; - max-height: 24px; - max-width: 24px; - - & error-icon { - display: flex; - align-items: center; - align-content: center; - - & IconOrImage { - height: 100%; - width: 100%; - } - } - } error-action-close { cursor: pointer; width: 18px; @@ -123,12 +69,12 @@ interface Props { icon?: boolean; inline?: boolean; className?: string; - styles?: ComponentStyle; onRetry?: () => void; onClose?: () => void; } -export const ExceptionMessage = observer(function ExceptionMessage({ exception = null, icon, inline, className, styles, onRetry, onClose }) { +export const ExceptionMessage = observer(function ExceptionMessage({ exception = null, icon, inline, className, onRetry, onClose }) { + const styles = useS(style); const translate = useTranslate(); const error = useErrorDetails(exception); @@ -141,21 +87,21 @@ export const ExceptionMessage = observer(function ExceptionMessage({ exce }; } - return styled(useStyles(style, styles))( - - - - + return ( +
+
+ +
{!icon && ( <> - - +
+

{translate('core_blocks_exception_message_error_title')} - - +

+
{translate('core_blocks_exception_message_error_message')} {onRetry && translate('ui_please_retry')} - - +
+
@@ -164,15 +110,15 @@ export const ExceptionMessage = observer(function ExceptionMessage({ exce {translate('ui_processing_retry')} )} - - +
+
{onClose && ( - +
- +
)} )} - , +
); }); From 37a40a667a6a12298446c50e12af64776dbb5414 Mon Sep 17 00:00:00 2001 From: Dmitry Osipov Date: Wed, 20 Sep 2023 01:15:05 +0200 Subject: [PATCH 10/32] feat: migrate Iframe to css-modules --- webapp/packages/core-blocks/src/Iframe.m.css | 4 ++++ webapp/packages/core-blocks/src/Iframe.tsx | 16 ++++++---------- 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Iframe.m.css diff --git a/webapp/packages/core-blocks/src/Iframe.m.css b/webapp/packages/core-blocks/src/Iframe.m.css new file mode 100644 index 0000000000..856823a939 --- /dev/null +++ b/webapp/packages/core-blocks/src/Iframe.m.css @@ -0,0 +1,4 @@ +.iframe { + composes: theme-border-color-background from global; + border: 1px solid; +} diff --git a/webapp/packages/core-blocks/src/Iframe.tsx b/webapp/packages/core-blocks/src/Iframe.tsx index e29cff1f53..8479f13b02 100644 --- a/webapp/packages/core-blocks/src/Iframe.tsx +++ b/webapp/packages/core-blocks/src/Iframe.tsx @@ -6,17 +6,13 @@ * you may not use this file except in compliance with the License. */ import type { DetailedHTMLProps, IframeHTMLAttributes } from 'react'; -import styled, { css } from 'reshadow'; -import { useStyles } from './useStyles'; - -const styles = css` - iframe { - composes: theme-border-color-background from global; - border: 1px solid; - } -`; +import style from './iframe.m.css'; +import { s } from './s'; +import { useS } from './useS'; export const Iframe: React.FC, HTMLIFrameElement>> = function Iframe(props) { - return styled(useStyles(styles))(