chore: move code to Themes

src/components/Tags/Tags.tsx

@@ -7,19 +7,19 @@ import './Tags.scss';
 
 const b = block('tags');
 
-export type TagItem = {
+export type TagItem<T extends string = string> = {
     title: string;
-    value: string;
+    value: T;
 };
 
-interface TagsProps {
-    value: string;
-    items: TagItem[];
-    onChange: (newValue: string) => void;
+interface TagsProps<T extends string = string> {
+    value: T;
+    items: TagItem<T>[];
+    onChange: (newValue: T) => void;
     className?: string;
 }
 
-export const Tags = ({value, items, onChange, className}: TagsProps) => {
+export function Tags<T extends string = string>({value, items, onChange, className}: TagsProps<T>) {
     return (
         <Flex wrap="wrap" gap={2} className={b(null, className)}>
             {items.map((item) => {
@@ -39,4 +39,4 @@ export const Tags = ({value, items, onChange, className}: TagsProps) => {
             })}
         </Flex>
     );
-};
+}

src/components/Themes/Themes.tsx

@@ -1,84 +1,97 @@
 import {ArrowUpFromSquare} from '@gravity-ui/icons';
 import {Col, Grid, Row} from '@gravity-ui/page-constructor';
-import {Button, Flex, Icon, Text, ThemeProvider} from '@gravity-ui/uikit';
+import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
 import React, {useCallback, useMemo, useState} from 'react';
 
-import {DEFAULT_THEME} from '../../constants';
 import {block} from '../../utils';
 import {TagItem, Tags} from '../Tags/Tags';
 
-import {ThemeSection} from './ThemeSection/ThemeSection';
 import './Themes.scss';
-import {ThemeSectionType} from './types';
+import {DEFAULT_THEME} from './lib/constants';
+import {ColorsTab} from './ui/ColorsTab';
+import {ThemeCreatorContextProvider} from './ui/ThemeCreatorContextProvider';
 
 const b = block('themes');
 
+enum ThemeTab {
+    Colors = 'colors',
+    Typography = 'typography',
+    BorderRadius = 'borderRadius',
+    Preview = 'preview',
+}
+
+const tabToComponent: Record<ThemeTab, React.ComponentType | undefined> = {
+    [ThemeTab.Colors]: ColorsTab,
+    [ThemeTab.Typography]: () => <div>TODO Typography</div>,
+    [ThemeTab.BorderRadius]: () => <div>TODO borders</div>,
+    [ThemeTab.Preview]: () => <div>TODO preview</div>,
+};
+
 export const Themes = () => {
     const {t} = useTranslation('themes');
 
-    const tags: TagItem[] = useMemo(
+    const tags: TagItem<ThemeTab>[] = useMemo(
         () => [
             {
-                value: ThemeSectionType.Colors,
+                value: ThemeTab.Colors,
                 title: t('tags_colors'),
             },
             {
-                value: ThemeSectionType.Typography,
+                value: ThemeTab.Typography,
                 title: t('tags_typography'),
             },
             {
-                value: ThemeSectionType.BorderRadius,
+                value: ThemeTab.BorderRadius,
                 title: t('tags_borderRadius'),
             },
             {
-                value: ThemeSectionType.Preview,
+                value: ThemeTab.Preview,
                 title: t('tags_preview'),
             },
         ],
         [t],
     );
 
-    const [activeTag, setActiveTag] = useState<string>(tags[0].value);
+    const [activeTab, setActiveTab] = useState<ThemeTab>(ThemeTab.Colors);
 
     const onExportButtonClick = useCallback(() => {
         //TODO add logic here
     }, []);
 
+    const TabComponent = tabToComponent[activeTab];
+
     return (
-        <Grid className={b()}>
-            <Row className={b('title')}>
-                <Col sizes={12}>
-                    <Text className={b('title__text')}>{t('title')}</Text>
-                </Col>
-            </Row>
-            <Flex className={b('header-actions')}>
-                <Tags
-                    className={b('tabs')}
-                    items={tags}
-                    value={activeTag}
-                    onChange={setActiveTag}
-                />
+        <ThemeCreatorContextProvider initialTheme={DEFAULT_THEME}>
+            <Grid className={b()}>
+                <Row className={b('title')}>
+                    <Col sizes={12}>
+                        <Text className={b('title__text')}>{t('title')}</Text>
+                    </Col>
+                </Row>
+                <Flex className={b('header-actions')}>
+                    <Tags
+                        className={b('tabs')}
+                        items={tags}
+                        value={activeTab}
+                        onChange={setActiveTab}
+                    />
 
-                <Button
-                    className={b('export-theme-btn')}
-                    view="action"
-                    size="xl"
-                    onClick={onExportButtonClick}
-                >
-                    <Icon data={ArrowUpFromSquare} />
-                    <Text>{t('btn_export_theme')}</Text>
-                </Button>
-            </Flex>
+                    <Button
+                        className={b('export-theme-btn')}
+                        view="action"
+                        size="xl"
+                        onClick={onExportButtonClick}
+                    >
+                        <Icon data={ArrowUpFromSquare} />
+                        <Text>{t('btn_export_theme')}</Text>
+                    </Button>
+                </Flex>
 
-            <Row className={b('content')}>
-                <Col sizes={12}>
-                    {/*TODO: need to pass correct theme from context*/}
-                    <ThemeProvider theme={DEFAULT_THEME} scoped>
-                        <ThemeSection sectionType={activeTag as ThemeSectionType} />
-                    </ThemeProvider>
-                </Col>
-            </Row>
-        </Grid>
+                <Row className={b('content')}>
+                    <Col sizes={12}>{TabComponent ? <TabComponent /> : null}</Col>
+                </Row>
+            </Grid>
+        </ThemeCreatorContextProvider>
     );
 };