fix: code-review

gravity-ui · Dec 25, 2023 · 22f293b · 22f293b
1 parent 654f35a
commit 22f293b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,15 @@ or add specific CSS-classes to the root node:
 </html>
 ```
 
+it is possible to generate initial CSS-classes during SSR:
+
+```js
+import {getInitialRootClassName} from '@gravity-ui/uikit';
+
+const theme = 'light';
+const rootClassName = getInitialRootClassName(theme);
+```
+
 ```js
 // index.js
 import {createRoot} from 'react-dom/client';

diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {ThemeContext} from './ThemeContext';
 import {ThemeSettingsContext} from './ThemeSettingsContext';
 import {DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_THEME} from './constants';
-import {getBodyRootClassName, getDeprecatedBodyRootClassName} from './getBodyClassName';
+import {getDeprecatedRootClassName, getRootClassName} from './getBodyClassName';
 import type {RealTheme, Theme} from './types';
 import {updateBodyClassName} from './updateBodyClassName';
 import {useSystemTheme} from './useSystemTheme';
@@ -62,10 +62,10 @@ export function ThemeProvider({
             <ThemeSettingsContext.Provider value={themeSettingsContext}>
                 {scoped ? (
                     <div
-                        className={getBodyRootClassName(
+                        className={getRootClassName(
                             {theme: themeValue, 'native-scrollbar': nativeScrollbar},
                             [
-                                getDeprecatedBodyRootClassName({
+                                getDeprecatedRootClassName({
                                     theme: themeValue,
                                     'native-scrollbar': nativeScrollbar,
                                 }),

diff --git a/src/components/theme/getBodyClassName.ts b/src/components/theme/getBodyClassName.ts
@@ -8,18 +8,18 @@ const ROOT_CLASS_NAME = 'root';
 const bNew = blockNew(ROOT_CLASS_NAME);
 const b = block(ROOT_CLASS_NAME);
 
-export function getDeprecatedBodyRootClassName(
+export function getDeprecatedRootClassName(
     modifier?: Partial<BodyClassNameModifiers & {theme: RealTheme | boolean}>,
 ) {
     return b(modifier);
 }
-export function getBodyRootClassName(
+export function getRootClassName(
     modifier?: Partial<BodyClassNameModifiers & {theme: RealTheme | boolean}>,
     addition?: string[],
 ) {
     return bNew(modifier, addition);
 }
 
-export function getBaseBodyRootClassName(theme?: RealTheme) {
-    return getBodyRootClassName({theme});
+export function getInitialRootClassName(theme?: RealTheme) {
+    return getRootClassName({theme});
 }
diff --git a/src/components/theme/index.ts b/src/components/theme/index.ts
@@ -8,5 +8,5 @@ export * from './useThemeType';
 export * from './withTheme';
 export * from './withThemeValue';
 export * from './getThemeType';
-export {getBaseBodyRootClassName} from './getBodyClassName';
+export {getInitialRootClassName} from './getBodyClassName';
 export type {Theme, RealTheme, ThemeType} from './types';
diff --git a/src/components/theme/updateBodyClassName.ts b/src/components/theme/updateBodyClassName.ts
@@ -1,10 +1,10 @@
 import {modsClassName} from '../utils/cn';
 
-import {getBodyRootClassName, getDeprecatedBodyRootClassName} from './getBodyClassName';
+import {getDeprecatedRootClassName, getRootClassName} from './getBodyClassName';
 import type {RealTheme} from './types';
 
-const rootClassName = getDeprecatedBodyRootClassName();
-const rootNewClassName = getBodyRootClassName();
+const rootClassName = getDeprecatedRootClassName();
+const rootNewClassName = getRootClassName();
 
 export type BodyClassNameModifiers = {
     'native-scrollbar': boolean;
@@ -39,22 +39,19 @@ export function updateBodyClassName(
     }
 
     [...bodyEl.classList].forEach((cls) => {
-        if (cls.startsWith(modsClassName(getDeprecatedBodyRootClassName({theme: true})))) {
+        if (cls.startsWith(modsClassName(getDeprecatedRootClassName({theme: true})))) {
             bodyEl.classList.remove(cls);
         }
 
-        if (cls.startsWith(modsClassName(getBodyRootClassName({theme: true})))) {
+        if (cls.startsWith(modsClassName(getRootClassName({theme: true})))) {
             bodyEl.classList.remove(cls);
         }
     });
-    bodyEl.classList.add(modsClassName(getDeprecatedBodyRootClassName({theme: newTheme})));
-    bodyEl.classList.add(modsClassName(getBodyRootClassName({theme: newTheme})));
+    bodyEl.classList.add(modsClassName(getDeprecatedRootClassName({theme: newTheme})));
+    bodyEl.classList.add(modsClassName(getRootClassName({theme: newTheme})));
 
     for (const [key, value] of Object.entries({...defaultModifiers, ...modifiers})) {
-        bodyEl.classList.toggle(
-            modsClassName(getDeprecatedBodyRootClassName({[key]: true})),
-            value,
-        );
-        bodyEl.classList.toggle(modsClassName(getBodyRootClassName({[key]: true})), value);
+        bodyEl.classList.toggle(modsClassName(getDeprecatedRootClassName({[key]: true})), value);
+        bodyEl.classList.toggle(modsClassName(getRootClassName({[key]: true})), value);
     }
 }