refactoring: move components to ui and utils to lib

src/components/Theme/Theme.tsx

@@ -1,20 +1,20 @@
 import {Col, Grid, Row} from '@gravity-ui/page-constructor';
 import React from 'react';
 
-import {ColorsTab} from './ColorsTab';
-import {ThemeCreator} from './ThemeCreator';
-import {DEFAULT_THEME} from './constants';
+import {DEFAULT_THEME} from './lib/constants';
+import {ColorsTab} from './ui/ColorsTab';
+import {ThemeCreatorContextProvider} from './ui/ThemeCreatorContextProvider';
 
 export const Theme = () => {
     return (
-        <ThemeCreator theme={DEFAULT_THEME}>
+        <ThemeCreatorContextProvider initialTheme={DEFAULT_THEME}>
             <Grid>
                 <Row>
                     <Col sizes={12}>
                         <ColorsTab />
                     </Col>
                 </Row>
             </Grid>
-        </ThemeCreator>
+        </ThemeCreatorContextProvider>
     );
 };

src/components/Theme/hooks/index.ts

@@ -0,0 +1,4 @@
+export {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
+export {useThemePalette, useThemePaletteColor} from './useThemePalette';
+export {useThemeUtilityColor} from './useThemeUtilityColor';
+export {useThemePrivateColorOptions} from './useThemePrivateColorOptions';

src/components/Theme/hooks/useThemeCreator.ts

@@ -1,65 +1,6 @@
 import React from 'react';
 
-import {ThemeCreatorContext} from '../ThemeCreator';
-import {ThemeVariant} from '../types';
-import {
-    addColorToTheme,
-    getThemeColorOptions,
-    getThemePalette,
-    removeColorFromTheme,
-    renameColorInTheme,
-    updateColorInTheme,
-} from '../utils';
-import type {AddColorToThemeParams, UpdateColorInThemeParams} from '../utils';
+import {ThemeCreatorContext, ThemeCreatorMethodsContext} from '../lib/themeCreatorContext';
 
-export const useThemeCreator = () => {
-    const {state, updateState} = React.useContext(ThemeCreatorContext);
-
-    const addColor = React.useCallback(
-        (params?: AddColorToThemeParams) => {
-            const newState = addColorToTheme(state, params);
-            updateState(newState);
-        },
-        [state],
-    );
-
-    const updateColor = React.useCallback(
-        (params: UpdateColorInThemeParams) => {
-            const newState = updateColorInTheme(state, params);
-            updateState(newState);
-        },
-        [state],
-    );
-
-    const removeColor = React.useCallback(
-        (colorTitle: string) => {
-            const newState = removeColorFromTheme(state, colorTitle);
-            updateState(newState);
-        },
-        [state],
-    );
-
-    const renameColor = React.useCallback(
-        (oldTitle: string, newTitle: string) => {
-            const newState = renameColorInTheme(state, oldTitle, newTitle);
-            updateState(newState);
-        },
-        [state],
-    );
-
-    const palette = React.useMemo(() => getThemePalette(state), [state]);
-
-    const getThemePrivateColorOptions = React.useCallback(
-        (themeVariant: ThemeVariant) => getThemeColorOptions({themeState: state, themeVariant}),
-        [state],
-    );
-
-    return {
-        addColor,
-        updateColor,
-        removeColor,
-        renameColor,
-        palette,
-        getThemePrivateColorOptions,
-    };
-};
+export const useThemeCreator = () => React.useContext(ThemeCreatorContext);
+export const useThemeCreatorMethods = () => React.useContext(ThemeCreatorMethodsContext);

src/components/Theme/hooks/useThemePalette.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {getThemePalette} from '../lib/themeCreatorUtils';
+import type {ThemeVariant} from '../lib/types';
+
+import {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
+
+export const useThemePalette = () => {
+    const themeState = useThemeCreator();
+    return React.useMemo(() => getThemePalette(themeState), [themeState]);
+};
+
+type UseThemePaletteColorParams = {
+    token: string;
+    theme: ThemeVariant;
+};
+
+export const useThemePaletteColor = ({token, theme}: UseThemePaletteColorParams) => {
+    const themeState = useThemeCreator();
+    const {updateColor} = useThemeCreatorMethods();
+
+    const value = React.useMemo(() => themeState.palette[theme][token], [themeState, token, theme]);
+
+    const updateValue = React.useCallback(
+        (newValue: string) => {
+            updateColor({
+                theme,
+                title: token,
+                value: newValue,
+            });
+        },
+        [token, theme, updateColor],
+    );
+
+    return [value, updateValue] as const;
+};

src/components/Theme/hooks/useThemePrivateColorOptions.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {getThemeColorOptions} from '../lib/themeCreatorUtils';
+import {ThemeVariant} from '../lib/types';
+
+import {useThemeCreator} from './useThemeCreator';
+
+export const useThemePrivateColorOptions = (themeVariant: ThemeVariant) => {
+    const themeState = useThemeCreator();
+
+    return React.useMemo(
+        () => getThemeColorOptions({themeState, themeVariant}),
+        [themeState, themeVariant],
+    );
+};

src/components/Theme/hooks/useThemeUtilityColor.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import type {ColorsOptions, ThemeVariant} from '../lib/types';
+
+import {useThemeCreator, useThemeCreatorMethods} from './useThemeCreator';
+
+type UseThemeColorParams = {
+    name: keyof ColorsOptions;
+    theme: ThemeVariant;
+};
+
+export const useThemeUtilityColor = ({name, theme}: UseThemeColorParams) => {
+    const themeState = useThemeCreator();
+    const {changeUtilityColor} = useThemeCreatorMethods();
+
+    const value = React.useMemo(() => themeState.colors[theme][name], [themeState, name, theme]);
+
+    const updateValue = React.useCallback(
+        (newValue: string) => {
+            changeUtilityColor({
+                themeVariant: theme,
+                name,
+                value: newValue,
+            });
+        },
+        [name, theme, changeUtilityColor],
+    );
+
+    return [value, updateValue] as const;
+};

src/components/Theme/lib/themeCreatorContext.ts

@@ -0,0 +1,32 @@
+import noop from 'lodash/noop';
+import {createContext} from 'react';
+
+import {DEFAULT_THEME} from './constants';
+import {initThemeCreator} from './themeCreatorUtils';
+import type {
+    AddColorToThemeParams,
+    ChangeUtilityColorInThemeParams,
+    RenameColorInThemeParams,
+    UpdateColorInThemeParams,
+} from './themeCreatorUtils';
+import type {ThemeCreatorState} from './types';
+
+export const ThemeCreatorContext = createContext<ThemeCreatorState>(
+    initThemeCreator(DEFAULT_THEME),
+);
+
+export interface ThemeCreatorMethodsContextType {
+    addColor: (params?: AddColorToThemeParams) => void;
+    updateColor: (params: UpdateColorInThemeParams) => void;
+    removeColor: (title: string) => void;
+    renameColor: (params: RenameColorInThemeParams) => void;
+    changeUtilityColor: (params: ChangeUtilityColorInThemeParams) => void;
+}
+
+export const ThemeCreatorMethodsContext = createContext<ThemeCreatorMethodsContextType>({
+    addColor: noop,
+    updateColor: noop,
+    removeColor: noop,
+    renameColor: noop,
+    changeUtilityColor: noop,
+});