Skip to content

Commit

Permalink
feat: create themes page (#216)
Browse files Browse the repository at this point in the history
  • Loading branch information
bityutskiyAO authored Aug 8, 2024
1 parent 3cbc8bd commit 8db7edd
Show file tree
Hide file tree
Showing 123 changed files with 9,762 additions and 448 deletions.
2 changes: 2 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const {patchWebpackConfig} = require('next-global-css');
const withTM = require('next-transpile-modules')([
'@gravity-ui/page-constructor',
'@gravity-ui/components',
'@gravity-ui/chartkit',
'@gravity-ui/yagr',
]);

const plugins = [
Expand Down
782 changes: 657 additions & 125 deletions package-lock.json

Large diffs are not rendered by default.

24 changes: 18 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/en/component.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
35 changes: 35 additions & 0 deletions public/locales/en/themes.json
Original file line number Diff line number Diff line change
@@ -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"
}
1 change: 1 addition & 0 deletions public/locales/ru/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"menu_components": "Компоненты",
"menu_design": "Дизайн",
"menu_icons": "Иконки",
"menu_themes": "Темы",
"roadmap_inProgress": "В работе",
"navigation_previous": "Назад",
"navigation_next": "Далее",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ru/component.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"color-input_validation-format-error": "Неверный формат",
"maintainers_one": "Maintainer:",
"maintainers_other": "Maintainers:",
"maintainers": "Maintainers:",
"theme": "Переключить тему",
"rtlOn": "Включить RTL",
"rtlOff": "Выключить RTL",
Expand Down
35 changes: 35 additions & 0 deletions public/locales/ru/themes.json
Original file line number Diff line number Diff line change
@@ -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": "Кнопка"
}
38 changes: 38 additions & 0 deletions src/[locale]/themes/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 24 additions & 0 deletions src/assets/icons/gravity-ui.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/preview-card-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/preview-card-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/preview-card-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions src/blocks/Examples/components/Showcase/Showcase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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']);
Expand All @@ -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')}>
Expand Down
8 changes: 8 additions & 0 deletions src/components/ClipboardArea/ClipboardArea.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/components/ClipboardArea/ClipboardArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down
57 changes: 57 additions & 0 deletions src/components/CodeExample/CodeExample.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 8db7edd

Please sign in to comment.