feat: create themes page

next.config.js

@@ -5,6 +5,8 @@
 const withTM = require('next-transpile-modules')([
     '@gravity-ui/page-constructor',
     '@gravity-ui/components',
+    '@gravity-ui/chartkit',
+    '@gravity-ui/yagr',
 ]);
 
 const plugins = [
@@ -57,7 +59,7 @@
                 });
 
                 if (!options.isServer) {
                     config.resolve.fallback.fs = false;
                 }
 
                 return config;

package.json

@@ -4,24 +4,27 @@
   "private": true,
   "homepage": "https://gravity-ui.com/",
   "dependencies": {
-    "@diplodoc/transform": "^4.11.0",
+    "@diplodoc/transform": "^4.26.0",
+    "@gravity-ui/chartkit": "^5.10.1",
     "@gravity-ui/components": "^3.7.0",
     "@gravity-ui/date-components": "^2.8.0",
     "@gravity-ui/icons": "^2.10.0",
+    "@gravity-ui/navigation": "^2.21.0",
     "@gravity-ui/page-constructor": "^5.2.0",
-    "@gravity-ui/uikit": "^6.22.0",
+    "@gravity-ui/uikit": "^6.23.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@octokit/rest": "^20.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bem-cn-lite": "^4.1.0",
+    "chroma-js": "^2.4.2",
     "husky": "^8.0.3",
     "i18next": "^23.8.3",
     "javascript-time-ago": "^2.5.9",
-    "landing-icons": "npm:@gravity-ui/icons@^2.8.1",
-    "landing-uikit": "npm:@gravity-ui/uikit@^6.17.0",
+    "landing-icons": "npm:@gravity-ui/icons@^2.10.0",
+    "landing-uikit": "npm:@gravity-ui/uikit@^6.23.0",
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "micromatch": "^4.0.7",
@@ -30,7 +33,7 @@
     "next-i18next": "^15.2.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-i18next": "^14.0.5",
     "react-time-ago": "^7.2.1",
     "rehype-autolink-headings": "^6.1.1",
@@ -39,7 +42,8 @@
     "remark-link-rewrite": "^1.0.7",
     "swiper": "^10.2.0",
     "typescript": "^5.1.6",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.614.0",
@@ -48,6 +52,7 @@
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@svgr/webpack": "^6.5.1",
+    "@types/chroma-js": "^2.4.4",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.197",
     "@types/micromatch": "^4.0.7",
@@ -56,6 +61,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/react-timeago": "^4.1.3",
+    "@types/uuid": "^10.0.0",
     "dotenv": "^16.0.3",
     "eslint": "^8.27.0",
     "eslint-plugin-testing-library": "^5.9.1",
@@ -73,6 +79,12 @@
     "svgo": "^3.0.2",
     "undici": "^5.14.0"
   },
+  "overrides": {
+    "react-split-pane": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
+    }
+  },
   "scripts": {
     "prepare": "husky install",
     "start": "next dev",

public/locales/en/common.json

@@ -8,6 +8,7 @@
     "menu_components": "Components",
     "menu_design": "Design",
     "menu_icons": "Icons",
+    "menu_themes": "Themes",
     "roadmap_inProgress": "In progress",
     "navigation_previous": "Previous",
     "navigation_next": "Next",

public/locales/en/component.json

@@ -5,6 +5,7 @@
     "color-input_validation-format-error": "Incorrect format",
     "maintainers_one": "Maintainer:",
     "maintainers_other": "Maintainers:",
+    "maintainers": "Maintainers:",
     "theme": "Switch theme",
     "rtlOn": "Switch RTL on",
     "rtlOff": "Switch RTL off",

public/locales/en/themes.json

@@ -0,0 +1,35 @@
+{
+  "title": "Themes",
+  "tags_colors": "Colors",
+  "tags_typography": "Typography",
+  "tags_borderRadius": "Border Radius",
+  "tags_preview": "Preview",
+  "btn_export_theme": "Export theme",
+  "custom_brand_palette": "Custom Brand Palette",
+  "page_background": "Page Background",
+  "brand_color": "Brand Color",
+  "hide_advanced_settings": "Hide Advanced Settings",
+  "advanced_settings": "Advanced Settings",
+  "theme": "Theme",
+  "basic_palette": "Basic Palette",
+  "add_color": "Add color",
+  "color-input_validation-format-error": "Incorrect format",
+  "palette_colors_description": "Support Colors for various cases and <br /> states",
+  "dark_theme": "Dark theme",
+  "light_theme": "Light theme",
+  "advanced_brand_palette": "Advanced Brand Palette",
+  "additional_colors": "Additional Colors",
+  "component_preview": "Component preview",
+  "is_everything_set": "Is everything set?",
+  "cancel": "Cancel",
+  "export_theme_config": "Export theme config",
+  "radius": "Radius",
+  "radius_regular": "Regular",
+  "radius_circled": "Circled",
+  "radius_squared": "Squared",
+  "radius_custom": "Custom radius",
+  "choose_border_radius": "Choose border radius",
+  "label": "Label",
+  "input_placeholder": "Content",
+  "button": "Button"
+}

public/locales/ru/common.json

@@ -8,6 +8,7 @@
     "menu_components": "Компоненты",
     "menu_design": "Дизайн",
     "menu_icons": "Иконки",
+    "menu_themes": "Темы",
     "roadmap_inProgress": "В работе",
     "navigation_previous": "Назад",
     "navigation_next": "Далее",

public/locales/ru/component.json

@@ -5,6 +5,7 @@
     "color-input_validation-format-error": "Неверный формат",
     "maintainers_one": "Maintainer:",
     "maintainers_other": "Maintainers:",
+    "maintainers": "Maintainers:",
     "theme": "Переключить тему",
     "rtlOn": "Включить RTL",
     "rtlOff": "Выключить RTL",

public/locales/ru/themes.json

@@ -0,0 +1,35 @@
+{
+  "title": "Темы",
+  "tags_colors": "Цвета",
+  "tags_typography": "Шрифты",
+  "tags_borderRadius": "Радиусы границ",
+  "tags_preview": "Предпоказ",
+  "color-input_validation-format-error": "Неверный формат",
+  "btn_export_theme": "Экспортировать тему",
+  "custom_brand_palette": "Кастомная брендовая палитра",
+  "page_background": "Цвет фона",
+  "brand_color": "Брендовый цвет",
+  "hide_advanced_settings": "Скрыть расширенные настройки",
+  "advanced_settings": "Расширенные настройки",
+  "theme": "Тема",
+  "basic_palette": "Базовая палитра",
+  "add_color": "Добавить цвет",
+  "palette_colors_description": "Поддерживаемые цвета для различных случаев и состояний",
+  "dark_theme": "Тёмная тема",
+  "light_theme": "Светлая тема",
+  "advanced_brand_palette": "Расширенная брендовая палитра",
+  "additional_colors": "Дополнительные цвета",
+  "component_preview": "Предпросмотр компонентов",
+  "is_everything_set": "Все настроили?",
+  "cancel": "Закрыть",
+  "export_theme_config": "Экспорт конфигурации темы",
+  "radius": "Радиус",
+  "radius_regular": "Стандартный",
+  "radius_circled": "Круглый",
+  "radius_squared": "Без скругления",
+  "radius_custom": "Настроить скругление",
+  "choose_border_radius": "Выберите радиус скругления",
+  "label": "Ярлык",
+  "input_placeholder": "Контент",
+  "button": "Кнопка"
+}

src/[locale]/themes/index.tsx

@@ -0,0 +1,38 @@
+import {GetStaticPaths, GetStaticProps} from 'next';
+import {useTranslation} from 'next-i18next';
+import React from 'react';
+
+import {Layout} from '../../components/Layout/Layout';
+import {Themes} from '../../components/Themes/Themes';
+import {useLocaleRedirect} from '../../hooks/useLocaleRedirect';
+import {getI18nPaths, getI18nProps} from '../../utils/i18next';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+    return {
+        paths: getI18nPaths(),
+        fallback: false,
+    };
+};
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+    const result = {
+        props: {
+            ...(await getI18nProps(ctx, ['themes'])),
+        },
+    };
+    return result;
+};
+
+export const ThemesPage = () => {
+    useLocaleRedirect();
+
+    const {t} = useTranslation();
+
+    return (
+        <Layout title={t('themes:title')}>
+            <Themes />
+        </Layout>
+    );
+};
+
+export default ThemesPage;

src/blocks/Examples/components/Showcase/Showcase.tsx

@@ -44,11 +44,12 @@ const tableColumns = [
 ];
 
 export type ShowcaseProps = {
-    color: string;
+    color?: string;
     theme: Theme;
+    style?: string;
 };
 
-export const Showcase: React.FC<ShowcaseProps> = ({color, theme}) => {
+export const Showcase: React.FC<ShowcaseProps> = ({color, theme, style}) => {
     const [activeTab, setActiveTab] = React.useState(tabs[0].id);
 
     const [tableSelectedIds, setTableSelectedIds] = React.useState(['1']);
@@ -67,6 +68,9 @@ export const Showcase: React.FC<ShowcaseProps> = ({color, theme}) => {
 
     return (
         <ThemeProvider theme={theme} scoped rootClassName={`${b()} ${b({color, theme})}`}>
+            {style ? (
+                <style>{`.gravity-ui-landing-examples-showcase_theme_${theme} {${style}}`}</style>
+            ) : null}
             <div className={b('row')}>
                 <div className={b('col')}>
                     <div className={b('sub-row')}>

src/components/ClipboardArea/ClipboardArea.scss

@@ -7,6 +7,14 @@ $block: '.#{variables.$ns}clipboard-area';
 #{$block} {
     display: flex;
 
+    &__popover {
+        width: 100%;
+
+        .g-popover__handler {
+            width: 100%;
+        }
+    }
+
     &__popup {
         --g-popup-background-color: #3e3235;
         --g-popup-border-color: #3e3235;

src/components/ClipboardArea/ClipboardArea.tsx

@@ -30,6 +30,7 @@ export const ClipboardArea: React.FC<ClipboardAreaProps> = ({
 
     return isNeedPopup ? (
         <Popover
+            className={b('popover')}
             disabled={isMobile}
             tooltipClassName={b('popup')}
             content={tooltipContent ?? t('actions_copyToClipboard')}

src/components/CodeExample/CodeExample.scss

@@ -0,0 +1,57 @@
+@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}code-example';
+
+#{$block} {
+    --code-example-max-height: 300px;
+
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    background: var(--g-color-base-background);
+    border-radius: 16px;
+    padding: 16px 0 16px 16px;
+
+    &__inner {
+        width: 100%;
+        max-height: var(--code-example-max-height);
+        overflow: auto;
+        position: relative;
+        display: flex;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        #{$block}__code {
+            color: #fff;
+        }
+
+        #{$block}__copy-icon {
+            color: #fff;
+        }
+    }
+
+    &__code {
+        @include pcStyles.text-size(code-2);
+        padding-right: 24px;
+        flex-grow: 1;
+        font-family: var(--g-font-family-monospace);
+        color: rgba(255, 255, 255, 0.7);
+        margin-right: 12px;
+        white-space: pre-wrap;
+        transition: color 0.1s ease-in-out;
+
+        &_copied {
+            color: #fff;
+        }
+    }
+
+    &__copy-button {
+        position: sticky;
+        right: 16px;
+        top: 0;
+    }
+}