feat(layout): unification of Theme and Layout Providers (#1518)

Co-authored-by: Alexandr Isaev <[email protected]>

src/components/layout/LayoutProvider/LayoutProvider.tsx

@@ -6,21 +6,16 @@ import {useCurrentActiveMediaQuery} from '../hooks/useCurrentActiveMediaQuery';
 import type {LayoutTheme, MediaType, RecursivePartial} from '../types';
 import {makeLayoutDefaultTheme} from '../utils/makeLayoutDefaultTheme';
 
-interface LayoutProviderProps {
+export interface LayoutProviderProps {
     theme?: RecursivePartial<LayoutTheme>;
     /**
-     * During ssr you can override default (`s`) media screen size
+     * During ssr you can override default (`s`) media screen size if needed
      */
     initialMediaQuery?: MediaType;
     children: React.ReactNode;
 }
 
-/**
- * Provide context for layout components and current media queries.
- * ---
- * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#layoutprovider-and-layouttheme
- */
-export function LayoutProvider({
+export function PrivateLayoutProvider({
     children,
     theme: override,
     initialMediaQuery,
@@ -39,3 +34,14 @@ export function LayoutProvider({
         </LayoutContext.Provider>
     );
 }
+
+/**
+ * @deprecated - already used as part of ThemeProvider. To override layout theme use `layout` prop
+ *
+ * Provide context for layout components and current media queries.
+ * ---
+ * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#layoutprovider-and-layouttheme
+ */
+export function LayoutProvider({children}: LayoutProviderProps) {
+    return children;
+}

src/components/layout/LayoutProvider/__stories__/Layout.mdx

@@ -32,7 +32,6 @@ import {Container, Row, Col, Flex} from '@gravity-ui/uikit';
 
 ### Components:
 
--   [LayoutProvider and LayoutTheme](#layoutprovider-and-layouttheme)
 -   [Layout Grid](#layout-grid)
     -   [Row](#row)
     -   [Col](#col)
@@ -75,17 +74,17 @@ _You can override default values on project level:_
 ```
 
 ```tsx
-import {LayoutProvider, LayoutTheme} from '@gravity-ui/uikit';
+import {ThemeProvider, LayoutTheme} from '@gravity-ui/uikit';
 
-const layoutTheme: LayoutTheme = {
+const theme: LayoutTheme = {
     spaceBaseSize: 5,
 };
 
 export const App = () => {
     return (
-        <LayoutProvider theme={layoutTheme}>
+        <ThemeProvider layout={{theme}}>
             {...}
-        </LayoutProvider>
+        </ThemeProvider>
     );
 };
 ```
@@ -121,55 +120,29 @@ We use `mobile-first` approach. It means that you should adapt you app to deskto
 > To override breakpoint use `theme` breakpoints property;
 
     ```tsx
-    export const APP_LAYOUT_THEME: LayoutTheme = {
+    const APP_LAYOUT_THEME: LayoutTheme = {
+        spaceBaseSize: 4,
+        components: {
+            container: {
+                gutters: 3,
+                media: {
+                    l: {
+                        gutters: 5,
+                    },
+                },
+            },
+        },
         breakpoints: {
             s: 320,
             l: 980,
         }
     };
 
-    <LayoutProvider theme={APP_LAYOUT_THEME}>
+    <ThemeProvider layout={{theme: APP_LAYOUT_THEME}}>
         {...}
-    </LayoutProvider>
+    </ThemeProvider>
     ```
 
-## LayoutProvider and LayoutTheme
-
-Through `LayoutProvider` components can get default props which are corresponding to different screen sizes.
-
-Usage of `LayoutProvider` is optional. Use it if you need to override default spacing or add default behaviour to connected to theme compoennts (now only `Container`)
-
-### props:
-
--   `theme` - partial LayoutTheme onject that will be override original theme;
--   `initialMediaQuery` - use can directly pass initial
-
-```tsx
-import {LayoutProvider, LayoutTheme} from '@gravity-ui/uikit';
-
-export const APP_LAYOUT_THEME: LayoutTheme = {
-    spaceBaseSize: 4,
-    components: {
-        container: {
-            gutters: 3,
-            media: {
-                l: {
-                    gutters: 5,
-                },
-            },
-        },
-    },
-};
-
-export const App = () => {
-    return (
-        <LayoutProvider theme={AWESOME_LAYOUT_THEME}>
-            <Router />
-        </LayoutProvider>
-    );
-};
-```
-
 ## Box
 
 The `Box` component is a developer friend and basic block to build other components. Aware about spacing, its own sizes and most commonly used CSS properties.

src/components/layout/demo/LayoutPresenter/LayoutPresenter.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import {Text} from '../../../Text';
 import type {LayoutTheme} from '../../../layout';
+import {ThemeProvider} from '../../../theme';
 import {Flex} from '../../Flex/Flex';
-import {LayoutProvider} from '../../LayoutProvider/LayoutProvider';
 import {useLayoutContext} from '../../hooks/useLayoutContext';
 import {sp} from '../../spacing/spacing';
 
@@ -35,7 +35,7 @@ function Title({title}: {title?: string}) {
 
 export const LayoutPresenter = ({children, title, theme}: LayoutPresenterProps) => {
     return (
-        <LayoutProvider theme={theme}>
+        <ThemeProvider layout={{theme}}>
             <Title title={title} />
             <div
                 style={{
@@ -46,6 +46,6 @@ export const LayoutPresenter = ({children, title, theme}: LayoutPresenterProps)
             >
                 {children}
             </div>
-        </LayoutProvider>
+        </ThemeProvider>
     );
 };

src/components/layout/index.ts

@@ -4,7 +4,7 @@ export * from './Row/Row';
 export * from './Flex/Flex';
 export * from './Box/Box';
 export * from './Container/Container';
-export * from './LayoutProvider/LayoutProvider';
+export {LayoutProvider} from './LayoutProvider/LayoutProvider';
 export * from './spacing/spacing';
 
 export * from './hooks/useLayoutContext';

src/components/theme/ThemeProvider.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider';
+import type {LayoutProviderProps} from '../layout/LayoutProvider/LayoutProvider';
 import {block} from '../utils/cn';
 
 import {ThemeContext} from './ThemeContext';
@@ -26,6 +28,7 @@ export interface ThemeProviderProps extends React.PropsWithChildren<{}> {
     nativeScrollbar?: boolean;
     scoped?: boolean;
     rootClassName?: string;
+    layout?: Omit<LayoutProviderProps, 'children'>;
 }
 
 export function ThemeProvider({
@@ -37,6 +40,7 @@ export function ThemeProvider({
     scoped: scopedProp = false,
     rootClassName = '',
     children,
+    layout,
 }: ThemeProviderProps) {
     const parentThemeState = React.useContext(ThemeContext);
     const systemThemeState = React.useContext(ThemeSettingsContext);
@@ -86,30 +90,32 @@ export function ThemeProvider({
     );
 
     return (
-        <ThemeContext.Provider value={contextValue}>
-            <ThemeSettingsContext.Provider value={themeSettingsContext}>
-                {scoped ? (
-                    <div
-                        className={b(
-                            {
-                                theme: themeValue,
-                                'native-scrollbar': nativeScrollbar !== false,
-                            },
-                            rootClassName,
-                        )}
-                        dir={
-                            hasParentProvider && direction === parentDirection
-                                ? undefined
-                                : direction
-                        }
-                    >
-                        {children}
-                    </div>
-                ) : (
-                    children
-                )}
-            </ThemeSettingsContext.Provider>
-        </ThemeContext.Provider>
+        <PrivateLayoutProvider {...layout}>
+            <ThemeContext.Provider value={contextValue}>
+                <ThemeSettingsContext.Provider value={themeSettingsContext}>
+                    {scoped ? (
+                        <div
+                            className={b(
+                                {
+                                    theme: themeValue,
+                                    'native-scrollbar': nativeScrollbar !== false,
+                                },
+                                rootClassName,
+                            )}
+                            dir={
+                                hasParentProvider && direction === parentDirection
+                                    ? undefined
+                                    : direction
+                            }
+                        >
+                            {children}
+                        </div>
+                    ) : (
+                        children
+                    )}
+                </ThemeSettingsContext.Provider>
+            </ThemeContext.Provider>
+        </PrivateLayoutProvider>
     );
 }