diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx index 85a8be3cb10..005e29e4762 100644 --- a/src/components/Tags/Tags.tsx +++ b/src/components/Tags/Tags.tsx @@ -7,19 +7,19 @@ import './Tags.scss'; const b = block('tags'); -export type TagItem = { +export type TagItem = { title: string; - value: string; + value: T; }; -interface TagsProps { - value: string; - items: TagItem[]; - onChange: (newValue: string) => void; +interface TagsProps { + value: T; + items: TagItem[]; + onChange: (newValue: T) => void; className?: string; } -export const Tags = ({value, items, onChange, className}: TagsProps) => { +export function Tags({value, items, onChange, className}: TagsProps) { return ( {items.map((item) => { @@ -39,4 +39,4 @@ export const Tags = ({value, items, onChange, className}: TagsProps) => { })} ); -}; +} diff --git a/src/components/Theme/Theme.tsx b/src/components/Theme/Theme.tsx deleted file mode 100644 index f233209e552..00000000000 --- a/src/components/Theme/Theme.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import {Col, Grid, Row} from '@gravity-ui/page-constructor'; -import React from 'react'; - -import {DEFAULT_THEME} from './lib/constants'; -import {ColorsTab} from './ui/ColorsTab'; -import {ThemeCreatorContextProvider} from './ui/ThemeCreatorContextProvider'; - -export const Theme = () => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/Themes/ThemeSection/ThemeSection.scss b/src/components/Themes/ThemeSection/ThemeSection.scss deleted file mode 100644 index 1431ac96ea8..00000000000 --- a/src/components/Themes/ThemeSection/ThemeSection.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '../../../variables'; - -$block: '.#{variables.$ns}theme-section'; - -#{$block} { -} diff --git a/src/components/Themes/ThemeSection/ThemeSection.tsx b/src/components/Themes/ThemeSection/ThemeSection.tsx deleted file mode 100644 index 494e626a90c..00000000000 --- a/src/components/Themes/ThemeSection/ThemeSection.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; - -import {block} from '../../../utils'; -import {ThemeSectionType} from '../types'; - -import './ThemeSection.scss'; - -export interface ThemeSectionProps { - sectionType: ThemeSectionType; -} - -const b = block('theme-section'); - -//TODO: need to create section logic -const config = { - [ThemeSectionType.Colors]: { - Component: () => color, - }, - [ThemeSectionType.Typography]: { - Component: () => Typography, - }, - [ThemeSectionType.BorderRadius]: { - Component: () => BorderRadius, - }, - [ThemeSectionType.Preview]: { - Component: () => Preview, - }, -}; - -const useSectionConfig = (sectionType: ThemeSectionType) => { - return config[sectionType]; -}; - -export const ThemeSection = ({sectionType}: ThemeSectionProps) => { - const {Component} = useSectionConfig(sectionType); - return ( -
- -
- ); -}; diff --git a/src/components/Themes/Themes.tsx b/src/components/Themes/Themes.tsx index b9e7169b7f3..fd89b805794 100644 --- a/src/components/Themes/Themes.tsx +++ b/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.Colors]: ColorsTab, + [ThemeTab.Typography]: () =>
TODO Typography
, + [ThemeTab.BorderRadius]: () =>
TODO borders
, + [ThemeTab.Preview]: () =>
TODO preview
, +}; + export const Themes = () => { const {t} = useTranslation('themes'); - const tags: TagItem[] = useMemo( + const tags: TagItem[] = 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(tags[0].value); + const [activeTab, setActiveTab] = useState(ThemeTab.Colors); const onExportButtonClick = useCallback(() => { //TODO add logic here }, []); + const TabComponent = tabToComponent[activeTab]; + return ( - - - - {t('title')} - - - - + + + + + {t('title')} + + + + - - + + - - - {/*TODO: need to pass correct theme from context*/} - - - - - - + + {TabComponent ? : null} + + + ); }; diff --git a/src/components/Theme/hooks/index.ts b/src/components/Themes/hooks/index.ts similarity index 100% rename from src/components/Theme/hooks/index.ts rename to src/components/Themes/hooks/index.ts diff --git a/src/components/Theme/hooks/useThemeCreator.ts b/src/components/Themes/hooks/useThemeCreator.ts similarity index 100% rename from src/components/Theme/hooks/useThemeCreator.ts rename to src/components/Themes/hooks/useThemeCreator.ts diff --git a/src/components/Theme/hooks/useThemePalette.ts b/src/components/Themes/hooks/useThemePalette.ts similarity index 100% rename from src/components/Theme/hooks/useThemePalette.ts rename to src/components/Themes/hooks/useThemePalette.ts diff --git a/src/components/Theme/hooks/useThemePrivateColorOptions.ts b/src/components/Themes/hooks/useThemePrivateColorOptions.ts similarity index 100% rename from src/components/Theme/hooks/useThemePrivateColorOptions.ts rename to src/components/Themes/hooks/useThemePrivateColorOptions.ts diff --git a/src/components/Theme/hooks/useThemeUtilityColor.ts b/src/components/Themes/hooks/useThemeUtilityColor.ts similarity index 100% rename from src/components/Theme/hooks/useThemeUtilityColor.ts rename to src/components/Themes/hooks/useThemeUtilityColor.ts diff --git a/src/components/Theme/lib/constants.ts b/src/components/Themes/lib/constants.ts similarity index 100% rename from src/components/Theme/lib/constants.ts rename to src/components/Themes/lib/constants.ts diff --git a/src/components/Theme/lib/privateColors/constants.ts b/src/components/Themes/lib/privateColors/constants.ts similarity index 100% rename from src/components/Theme/lib/privateColors/constants.ts rename to src/components/Themes/lib/privateColors/constants.ts diff --git a/src/components/Theme/lib/privateColors/index.ts b/src/components/Themes/lib/privateColors/index.ts similarity index 100% rename from src/components/Theme/lib/privateColors/index.ts rename to src/components/Themes/lib/privateColors/index.ts diff --git a/src/components/Theme/lib/privateColors/utils.ts b/src/components/Themes/lib/privateColors/utils.ts similarity index 100% rename from src/components/Theme/lib/privateColors/utils.ts rename to src/components/Themes/lib/privateColors/utils.ts diff --git a/src/components/Theme/lib/themeCreatorContext.ts b/src/components/Themes/lib/themeCreatorContext.ts similarity index 100% rename from src/components/Theme/lib/themeCreatorContext.ts rename to src/components/Themes/lib/themeCreatorContext.ts diff --git a/src/components/Theme/lib/themeCreatorExport.ts b/src/components/Themes/lib/themeCreatorExport.ts similarity index 100% rename from src/components/Theme/lib/themeCreatorExport.ts rename to src/components/Themes/lib/themeCreatorExport.ts diff --git a/src/components/Theme/lib/themeCreatorImport.ts b/src/components/Themes/lib/themeCreatorImport.ts similarity index 100% rename from src/components/Theme/lib/themeCreatorImport.ts rename to src/components/Themes/lib/themeCreatorImport.ts diff --git a/src/components/Theme/lib/themeCreatorUtils.ts b/src/components/Themes/lib/themeCreatorUtils.ts similarity index 100% rename from src/components/Theme/lib/themeCreatorUtils.ts rename to src/components/Themes/lib/themeCreatorUtils.ts diff --git a/src/components/Theme/lib/types.ts b/src/components/Themes/lib/types.ts similarity index 100% rename from src/components/Theme/lib/types.ts rename to src/components/Themes/lib/types.ts diff --git a/src/components/Themes/types.ts b/src/components/Themes/types.ts deleted file mode 100644 index f545542e01a..00000000000 --- a/src/components/Themes/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export enum ThemeSectionType { - Colors = 'colors', - Typography = 'typography', - BorderRadius = 'borderRadius', - Preview = 'preview', -} diff --git a/src/components/Theme/ui/BasicPalette/BasicPalette.tsx b/src/components/Themes/ui/BasicPalette/BasicPalette.tsx similarity index 100% rename from src/components/Theme/ui/BasicPalette/BasicPalette.tsx rename to src/components/Themes/ui/BasicPalette/BasicPalette.tsx diff --git a/src/components/Theme/ui/BasicPalette/PaletteColors.scss b/src/components/Themes/ui/BasicPalette/PaletteColors.scss similarity index 100% rename from src/components/Theme/ui/BasicPalette/PaletteColors.scss rename to src/components/Themes/ui/BasicPalette/PaletteColors.scss diff --git a/src/components/Theme/ui/BasicPalette/PaletteColors.tsx b/src/components/Themes/ui/BasicPalette/PaletteColors.tsx similarity index 100% rename from src/components/Theme/ui/BasicPalette/PaletteColors.tsx rename to src/components/Themes/ui/BasicPalette/PaletteColors.tsx diff --git a/src/components/Theme/ui/BasicPalette/ThemePaletteCard.scss b/src/components/Themes/ui/BasicPalette/ThemePaletteCard.scss similarity index 100% rename from src/components/Theme/ui/BasicPalette/ThemePaletteCard.scss rename to src/components/Themes/ui/BasicPalette/ThemePaletteCard.scss diff --git a/src/components/Theme/ui/BasicPalette/ThemePaletteCard.tsx b/src/components/Themes/ui/BasicPalette/ThemePaletteCard.tsx similarity index 100% rename from src/components/Theme/ui/BasicPalette/ThemePaletteCard.tsx rename to src/components/Themes/ui/BasicPalette/ThemePaletteCard.tsx diff --git a/src/components/Theme/ui/ColorsTab/index.tsx b/src/components/Themes/ui/ColorsTab/index.tsx similarity index 100% rename from src/components/Theme/ui/ColorsTab/index.tsx rename to src/components/Themes/ui/ColorsTab/index.tsx diff --git a/src/components/Theme/ui/MainSettings/MainSettings.scss b/src/components/Themes/ui/MainSettings/MainSettings.scss similarity index 100% rename from src/components/Theme/ui/MainSettings/MainSettings.scss rename to src/components/Themes/ui/MainSettings/MainSettings.scss diff --git a/src/components/Theme/ui/MainSettings/MainSettings.tsx b/src/components/Themes/ui/MainSettings/MainSettings.tsx similarity index 100% rename from src/components/Theme/ui/MainSettings/MainSettings.tsx rename to src/components/Themes/ui/MainSettings/MainSettings.tsx diff --git a/src/components/Theme/ui/PrivateColorSelect/PrivateColorSelect.scss b/src/components/Themes/ui/PrivateColorSelect/PrivateColorSelect.scss similarity index 100% rename from src/components/Theme/ui/PrivateColorSelect/PrivateColorSelect.scss rename to src/components/Themes/ui/PrivateColorSelect/PrivateColorSelect.scss diff --git a/src/components/Theme/ui/PrivateColorSelect/PrivateColorSelect.tsx b/src/components/Themes/ui/PrivateColorSelect/PrivateColorSelect.tsx similarity index 100% rename from src/components/Theme/ui/PrivateColorSelect/PrivateColorSelect.tsx rename to src/components/Themes/ui/PrivateColorSelect/PrivateColorSelect.tsx diff --git a/src/components/Theme/ui/PrivateColorSelect/PrivateColorSelectPopupContent.scss b/src/components/Themes/ui/PrivateColorSelect/PrivateColorSelectPopupContent.scss similarity index 100% rename from src/components/Theme/ui/PrivateColorSelect/PrivateColorSelectPopupContent.scss rename to src/components/Themes/ui/PrivateColorSelect/PrivateColorSelectPopupContent.scss diff --git a/src/components/Theme/ui/PrivateColorSelect/PrivateColorSelectPopupContent.tsx b/src/components/Themes/ui/PrivateColorSelect/PrivateColorSelectPopupContent.tsx similarity index 100% rename from src/components/Theme/ui/PrivateColorSelect/PrivateColorSelectPopupContent.tsx rename to src/components/Themes/ui/PrivateColorSelect/PrivateColorSelectPopupContent.tsx diff --git a/src/components/Theme/ui/PrivateColorSelect/index.ts b/src/components/Themes/ui/PrivateColorSelect/index.ts similarity index 100% rename from src/components/Theme/ui/PrivateColorSelect/index.ts rename to src/components/Themes/ui/PrivateColorSelect/index.ts diff --git a/src/components/Theme/ui/PrivateColorSelect/types.ts b/src/components/Themes/ui/PrivateColorSelect/types.ts similarity index 100% rename from src/components/Theme/ui/PrivateColorSelect/types.ts rename to src/components/Themes/ui/PrivateColorSelect/types.ts diff --git a/src/components/Theme/ui/PrivateColorsSettings/PrivateColorsSettings.scss b/src/components/Themes/ui/PrivateColorsSettings/PrivateColorsSettings.scss similarity index 100% rename from src/components/Theme/ui/PrivateColorsSettings/PrivateColorsSettings.scss rename to src/components/Themes/ui/PrivateColorsSettings/PrivateColorsSettings.scss diff --git a/src/components/Theme/ui/PrivateColorsSettings/PrivateColorsSettings.tsx b/src/components/Themes/ui/PrivateColorsSettings/PrivateColorsSettings.tsx similarity index 100% rename from src/components/Theme/ui/PrivateColorsSettings/PrivateColorsSettings.tsx rename to src/components/Themes/ui/PrivateColorsSettings/PrivateColorsSettings.tsx diff --git a/src/components/Theme/ui/PrivateColorsSettings/index.ts b/src/components/Themes/ui/PrivateColorsSettings/index.ts similarity index 100% rename from src/components/Theme/ui/PrivateColorsSettings/index.ts rename to src/components/Themes/ui/PrivateColorsSettings/index.ts diff --git a/src/components/Theme/ui/ThemeCreatorContextProvider.tsx b/src/components/Themes/ui/ThemeCreatorContextProvider.tsx similarity index 100% rename from src/components/Theme/ui/ThemeCreatorContextProvider.tsx rename to src/components/Themes/ui/ThemeCreatorContextProvider.tsx diff --git a/src/components/Theme/ui/ThemePicker/ThemePicker.scss b/src/components/Themes/ui/ThemePicker/ThemePicker.scss similarity index 100% rename from src/components/Theme/ui/ThemePicker/ThemePicker.scss rename to src/components/Themes/ui/ThemePicker/ThemePicker.scss diff --git a/src/components/Theme/ui/ThemePicker/ThemePicker.tsx b/src/components/Themes/ui/ThemePicker/ThemePicker.tsx similarity index 100% rename from src/components/Theme/ui/ThemePicker/ThemePicker.tsx rename to src/components/Themes/ui/ThemePicker/ThemePicker.tsx diff --git a/src/components/Theme/ui/ThemePicker/index.ts b/src/components/Themes/ui/ThemePicker/index.ts similarity index 100% rename from src/components/Theme/ui/ThemePicker/index.ts rename to src/components/Themes/ui/ThemePicker/index.ts diff --git a/src/pages/_theme.tsx b/src/pages/_theme.tsx deleted file mode 100644 index 6d1568a7249..00000000000 --- a/src/pages/_theme.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import {Layout} from '../components/Layout/Layout'; -import {Theme} from '../components/Theme/Theme'; - -export const ThemePage = () => { - return ( - - - - ); -}; - -export default ThemePage;