gromov/nextjs-fetch-data-example
1
0
Fork 0
forked from templates/nextjs-template
Code Pull Requests Activity

refactor: привести шаблон к правилам стайлгайда

Browse Source 
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
This commit is contained in:
Сергей Громов
2026-04-30 19:24:40 +03:00
parent 1950c3612a
commit bf792f6159
27 changed files with 549 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/shared/sprites/.gitkeep
View File

7
src/shared/sprites/icons.generated.ts
View File

@@ -1,7 +0,0 @@
/**
* Имена иконок спрайта «icons».
* @generated — файл создан автоматически (npm run sprite), не редактировать вручную.
*/
export type IconsIconName =
| 'arrow-down'
| 'arrow-right'

4
src/shared/sprites/icons/arrow-down.svg
View File

@@ -1,4 +0,0 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.0701 14.4301L12.0001 20.5001L5.93005 14.4301" stroke="var(--icon-color-1, currentColor)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 3.5V20.33" stroke="var(--icon-color-1, currentColor)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 431 B

3
src/shared/sprites/icons/arrow-right.svg
View File

@@ -1,3 +0,0 @@
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2503 10.0003C18.2503 10.1992 18.1713 10.39 18.0307 10.5307L12.1973 16.364C11.9044 16.6569 11.4296 16.6569 11.1367 16.364C10.8438 16.0711 10.8438 15.5962 11.1367 15.3033L15.6897 10.7503L1.66699 10.7503C1.25278 10.7503 0.916992 10.4145 0.916992 10.0003C0.916992 9.58611 1.25278 9.25033 1.66699 9.25033L15.6897 9.25033L11.1367 4.69732C10.8438 4.40443 10.8438 3.92956 11.1367 3.63666C11.4296 3.34377 11.9044 3.34377 12.1973 3.63666L18.0307 9.47C18.1713 9.61065 18.2503 9.80141 18.2503 10.0003Z" fill="var(--icon-color-1, currentColor)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 667 B

5
src/shared/sprites/icons/clipboard-tick.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.965 22.05L16.215 24.3L22.215 18.3" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 9H21C24 9 24 7.5 24 6C24 3 22.5 3 21 3H15C13.5 3 12 3 12 6C12 9 13.5 9 15 9Z" stroke="#A93133" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 6.03003C28.995 6.30003 31.5 8.14503 31.5 15V24C31.5 30 30 33 22.5 33H13.5C6 33 4.5 30 4.5 24V15C4.5 8.16003 7.005 6.30003 12 6.03003" stroke="#A93133" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 690 B

3
src/shared/sprites/icons/doctor.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 6H7.5C6.70435 6 5.94129 6.31607 5.37868 6.87868C4.81607 7.44129 4.5 8.20435 4.5 9V14.25C4.5 16.438 5.36919 18.5365 6.91637 20.0836C8.46354 21.6308 10.562 22.5 12.75 22.5C14.938 22.5 17.0365 21.6308 18.5836 20.0836C20.1308 18.5365 21 16.438 21 14.25V9C21 8.20435 20.6839 7.44129 20.1213 6.87868C19.5587 6.31607 18.7956 6 18 6H16.5M12 22.5C12 23.6819 12.2328 24.8522 12.6851 25.9442C13.1374 27.0361 13.8003 28.0282 14.636 28.864C15.4718 29.6997 16.4639 30.3626 17.5558 30.8149C18.6478 31.2672 19.8181 31.5 21 31.5C22.1819 31.5 23.3522 31.2672 24.4442 30.8149C25.5361 30.3626 26.5282 29.6997 27.364 28.864C28.1997 28.0282 28.8626 27.0361 29.3149 25.9442C29.7672 24.8522 30 23.6819 30 22.5V18M30 18C29.2044 18 28.4413 17.6839 27.8787 17.1213C27.3161 16.5587 27 15.7956 27 15C27 14.2044 27.3161 13.4413 27.8787 12.8787C28.4413 12.3161 29.2044 12 30 12C30.7956 12 31.5587 12.3161 32.1213 12.8787C32.6839 13.4413 33 14.2044 33 15C33 15.7956 32.6839 16.5587 32.1213 17.1213C31.5587 17.6839 30.7956 18 30 18ZM16.5 4.5V7.5M9 4.5V7.5" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
src/shared/sprites/icons/people.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.455 21.66C27.51 22.005 29.775 21.645 31.365 20.58C33.48 19.17 33.48 16.86 31.365 15.45C29.76 14.385 27.465 14.025 25.41 14.385M10.5 21.66C8.44503 22.005 6.18003 21.645 4.59003 20.58C2.47503 19.17 2.47503 16.86 4.59003 15.45C6.19503 14.385 8.49003 14.025 10.545 14.385M27 10.74C26.91 10.725 26.805 10.725 26.715 10.74C24.645 10.665 22.995 8.97 22.995 6.87C22.995 4.725 24.72 3 26.865 3C29.01 3 30.735 4.74 30.735 6.87C30.72 8.97 29.07 10.665 27 10.74ZM8.95503 10.74C9.04503 10.725 9.15003 10.725 9.24003 10.74C11.31 10.665 12.96 8.97 12.96 6.87C12.96 4.725 11.235 3 9.09003 3C6.94503 3 5.22003 4.74 5.22003 6.87C5.23503 8.97 6.88503 10.665 8.95503 10.74ZM18 21.945C17.91 21.93 17.805 21.93 17.715 21.945C15.645 21.87 13.995 20.175 13.995 18.075C13.995 15.93 15.72 14.205 17.865 14.205C20.01 14.205 21.735 15.945 21.735 18.075C21.72 20.175 20.07 21.885 18 21.945ZM13.635 26.67C11.52 28.08 11.52 30.39 13.635 31.8C16.035 33.405 19.965 33.405 22.365 31.8C24.48 30.39 24.48 28.08 22.365 26.67C19.98 25.08 16.035 25.08 13.635 26.67Z" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
src/shared/sprites/icons/symptom.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0013 17.0006V17.0006C31.0013 24.7331 24.7331 31.0013 17.0006 31.0013V31.0013C9.26812 31.0013 3 24.7331 3 17.0006V17.0006C3 9.26812 9.26812 3 17.0006 3V3C24.7331 3 31.0013 9.26812 31.0013 17.0006Z" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33 33L26.9062 26.9062" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 17.0007H9.04125L12.1669 12.3132L16.3331 21.6882L19.4587 17.0007H23.625" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

0
src/shared/styles/.gitkeep
View File

8
src/shared/styles/global.css Normal file
View File

@@ -0,0 +1,8 @@
@import "./variables.css";
@import "./reset.css";
/* Сюда же подключаются будущие глобалы через @import:
* @import './typography.css';
* @import './themes.css';
* media.css НЕ импортируется — он работает через PostCSS.
*/

30
src/shared/styles/media.css
View File

@@ -1,15 +1,17 @@
@custom-media --xs (max-width: 575px);
@custom-media --sm (min-width: 576px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 992px);
@custom-media --xl (min-width: 1200px);
@custom-media --2xl (min-width: 1408px);
@custom-media --3xl (min-width: 1920px);
/* Ширина — Mobile First (min-width), кроме --xs (max-width) */
@custom-media --xs (max-width: 35.9375rem);
@custom-media --sm (min-width: 36rem);
@custom-media --md (min-width: 48rem);
@custom-media --lg (min-width: 62rem);
@custom-media --xl (min-width: 75rem);
@custom-media --2xl (min-width: 88rem);
@custom-media --3xl (min-width: 120rem);
@custom-media --h-xs (min-height: 667px);
@custom-media --h-sm (min-height: 702px);
@custom-media --h-md (min-height: 810px);
@custom-media --h-lg (min-height: 900px);
@custom-media --h-xl (min-height: 1000px);
@custom-media --h-xxl (min-height: 1100px);
@custom-media --h-xxxl (min-height: 1200px);
/* Высота — min-height */
@custom-media --h-xs (min-height: 41.6875rem);
@custom-media --h-sm (min-height: 43.875rem);
@custom-media --h-md (min-height: 50.625rem);
@custom-media --h-lg (min-height: 56.25rem);
@custom-media --h-xl (min-height: 62.5rem);
@custom-media --h-2xl (min-height: 68.75rem);
@custom-media --h-3xl (min-height: 75rem);

27
src/shared/styles/reset.css Normal file
View File

@@ -0,0 +1,27 @@
html {
height: 100%;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

125
src/shared/styles/variables.css
View File

@@ -1,102 +1,31 @@
:root {
/* ========================================
* Цвета
* ======================================== */
/* Цвета */
--color-primary: #3b82f6;
--color-bg: #ffffff;
--color-bg-hover: #f5f5f5;
--color-text: #1a1a1a;
--color-text-secondary: #6b7280;
--color-border: #e5e7eb;
--color-error: #fa5252;
--color-success: #40c057;
--color-warning: #fab005;
/* Фоновые */
--color-bg: #ffffff;
--color-bg-hero: #edf3f9;
--color-bg-accent: #f2f8fa;
--color-bg-dark: #08050d;
/* Отступы */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* Текстовые */
--color-text: #08050d;
--color-text-secondary: #4e5566;
--color-text-tertiary: #8a8f9c;
/* Бордеры */
--color-border: #d9dde5;
--color-border-light: #e8ebf3;
/* Скроллбар */
--color-scrollbar: #e1eff4;
/* Акцент */
--color-accent: #129d9d;
/* ========================================
* Шрифты
* ======================================== */
--font-display: 'Biocad Display', sans-serif;
--font-serif: 'Lora', serif;
--font-sans: 'Noto Sans', sans-serif;
/* ========================================
* Отступы
* ======================================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-13: 52px;
--space-14: 56px;
--space-15: 60px;
--space-16: 64px;
--space-17: 68px;
--space-18: 72px;
--space-19: 76px;
--space-20: 80px;
--space-21: 84px;
--space-22: 88px;
--space-23: 92px;
--space-24: 96px;
--space-25: 100px;
--space-26: 104px;
--space-27: 108px;
--space-28: 112px;
--space-29: 116px;
--space-30: 120px;
--space-31: 124px;
--space-32: 128px;
--space-33: 132px;
--space-34: 136px;
--space-35: 140px;
--space-36: 144px;
--space-37: 148px;
--space-38: 152px;
--space-39: 156px;
--space-40: 160px;
--space-41: 164px;
--space-42: 168px;
--space-43: 172px;
--space-44: 176px;
--space-45: 180px;
--space-46: 184px;
--space-47: 188px;
--space-48: 192px;
--space-49: 196px;
--space-50: 200px;
/* ========================================
* Скругления
* ======================================== */
--radius-1: 12px;
--radius-2: 18px;
--radius-3: 24px;
--radius-4: 36px;
--radius-full: 800px;
/* ========================================
* Layout
* ======================================== */
--content-width: 1728px;
--content-padding: 48px;
/* Скругления */
--radius-1: 4px;
--radius-2: 8px;
--radius-3: 12px;
--radius-4: 16px;
--radius-full: 9999px;
}