create-nadvan-app 1.0.0

package/src/template/src/app/styles/_mixins.scss

@@ -0,0 +1,243 @@
+// =============================================================================
+// MIXINS — переиспользуемые блоки стилей
+// Требует: _variables.scss
+// =============================================================================
+
+// ─── Утилиты ──────────────────────────────────────────────────────────────────
+
+// Конвертация px → rem
+@function rem($px) {
+  @return calc(#{$px} / 16 * 1rem);
+}
+
+// ─── Брейкпоинты ──────────────────────────────────────────────────────────────
+// Использование: @include mobile { ... }
+
+@mixin mobile {
+  @media (max-width: #{$bp-mobile-max}) { @content; }
+}
+
+@mixin tablet {
+  @media (min-width: #{$bp-tablet}) and (max-width: #{$bp-tablet-max}) { @content; }
+}
+
+@mixin tablet-up {
+  @media (min-width: #{$bp-tablet}) { @content; }
+}
+
+@mixin laptop {
+  @media (min-width: #{$bp-laptop}) and (max-width: #{$bp-laptop-max}) { @content; }
+}
+
+@mixin laptop-up {
+  @media (min-width: #{$bp-laptop}) { @content; }
+}
+
+@mixin desktop-m {
+  @media (min-width: #{$bp-desktop-m}) and (max-width: #{$bp-desktop-m-max}) { @content; }
+}
+
+@mixin desktop-m-up {
+  @media (min-width: #{$bp-desktop-m}) { @content; }
+}
+
+@mixin desktop-l {
+  @media (min-width: #{$bp-desktop-l}) and (max-width: #{$bp-desktop-l-max}) { @content; }
+}
+
+@mixin desktop-xl {
+  @media (min-width: #{$bp-desktop-xl}) { @content; }
+}
+
+@mixin landscape {
+  @media (orientation: landscape) { @content; }
+}
+
+@mixin portrait {
+  @media (orientation: portrait) { @content; }
+}
+
+// ─── Контейнер ────────────────────────────────────────────────────────────────
+@mixin container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: $grid-margin-mobile;
+
+  @include tablet-up {
+    padding-inline: $grid-margin-tablet;
+  }
+
+  @include laptop-up {
+    padding-inline: $grid-margin-laptop;
+  }
+
+  @include desktop-m-up {
+    max-width: $container-max-desktop-m;
+    padding-inline: $grid-margin-desktop-m;
+  }
+
+  @include desktop-l {
+    max-width: $container-max-desktop-l;
+    padding-inline: $grid-margin-desktop-l;
+  }
+}
+
+// ─── Типографика ──────────────────────────────────────────────────────────────
+@mixin text-h1 {
+  font-family: $font-primary;
+  font-size: $font-size-h1-mobile;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-heading;
+  letter-spacing: $letter-spacing-heading;
+
+  @include tablet-up  { font-size: $font-size-h1-tablet; }
+  @include desktop-m-up { font-size: $font-size-h1-desktop; }
+}
+
+@mixin text-h2 {
+  font-family: $font-primary;
+  font-size: $font-size-h2-mobile;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-heading;
+  letter-spacing: $letter-spacing-heading;
+
+  @include tablet-up  { font-size: $font-size-h2-tablet; }
+  @include desktop-m-up { font-size: $font-size-h2-desktop; }
+}
+
+@mixin text-h3 {
+  font-family: $font-primary;
+  font-size: $font-size-h3-mobile;
+  font-weight: $font-weight-semibold;
+  line-height: $line-height-heading;
+
+  @include tablet-up  { font-size: $font-size-h3-tablet; }
+  @include desktop-m-up { font-size: $font-size-h3-desktop; }
+}
+
+@mixin text-h4 {
+  font-family: $font-primary;
+  font-size: $font-size-h4-mobile;
+  font-weight: $font-weight-semibold;
+  line-height: $line-height-heading;
+
+  @include desktop-m-up { font-size: $font-size-h4-desktop; }
+}
+
+@mixin text-body {
+  font-family: $font-primary;
+  font-size: $font-size-body-mobile;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-body;
+
+  @include desktop-m-up { font-size: $font-size-body-desktop; }
+}
+
+@mixin text-small {
+  font-family: $font-primary;
+  font-size: $font-size-small;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-caption;
+}
+
+@mixin text-caption {
+  font-family: $font-primary;
+  font-size: $font-size-small;
+  line-height: $line-height-caption;
+  letter-spacing: $letter-spacing-wide;
+
+  @include desktop-m-up { font-size: $font-size-caption-desktop; }
+}
+
+// ─── Доступность ──────────────────────────────────────────────────────────────
+
+// Визуально скрыт, но доступен для скринридеров
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Стандартный фокус-ринг
+@mixin focus-ring($color: var(--color-focus, #3b82f6), $offset: 2px) {
+  &:focus-visible {
+    outline: 2px solid $color;
+    outline-offset: $offset;
+    border-radius: $radius-sm;
+  }
+}
+
+// ─── Текстовые утилиты ────────────────────────────────────────────────────────
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+}
+
+// ─── Flex-утилиты ─────────────────────────────────────────────────────────────
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// ─── Интерактивные состояния ──────────────────────────────────────────────────
+@mixin interactive {
+  cursor: pointer;
+  transition: opacity $transition-base;
+
+  &:hover { opacity: 0.85; }
+  &:active { opacity: 0.7; }
+  &:disabled, &[aria-disabled='true'] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  @include focus-ring;
+}
+
+// ─── Сброс стилей ────────────────────────────────────────────────────────────
+@mixin reset-button {
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  appearance: none;
+}
+
+@mixin reset-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@mixin reset-link {
+  color: inherit;
+  text-decoration: none;
+}

package/src/template/src/app/styles/_typography.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// ТИПОГРАФИКА — семантические теги и утилитарные классы
+// Миксины подключаются автоматически через vite.config.ts (additionalData)
+// =============================================================================
+
+h1, .h1 { @include text-h1; }
+h2, .h2 { @include text-h2; }
+h3, .h3 { @include text-h3; }
+h4, .h4 { @include text-h4; }
+
+p,
+.body {
+  @include text-body;
+
+  margin-block: 0;
+}
+
+small,
+.small { @include text-small; }
+
+.caption { @include text-caption; }
+
+// Начертания
+b, strong { font-weight: $font-weight-bold; }
+em, i     { font-style: italic; }
+u         { text-decoration: underline; }
+
+// Ссылки
+a {
+  color: var(--color-link, inherit);
+  text-decoration: underline;
+  transition: color $transition-base;
+
+  @include focus-ring;
+
+  &:hover { opacity: 0.8; }
+}
+
+// Утилиты выравнивания
+.text-left   { text-align: left; }
+.text-center { text-align: center; }
+.text-right  { text-align: right; }
+
+// Утилиты веса
+.font-regular  { font-weight: $font-weight-regular; }
+.font-medium   { font-weight: $font-weight-medium; }
+.font-semibold { font-weight: $font-weight-semibold; }
+.font-bold     { font-weight: $font-weight-bold; }
+
+// Утилиты обрезки
+.truncate    { @include truncate; }
+.line-clamp-2 { @include line-clamp(2); }
+.line-clamp-3 { @include line-clamp(3); }

package/src/template/src/app/styles/_variables.scss

@@ -0,0 +1,124 @@
+// =============================================================================
+// DESIGN TOKENS — единственный источник истины для всех стилей проекта
+// Все значения берутся отсюда. Магические числа в компонентах запрещены.
+// =============================================================================
+
+// ─── Брейкпоинты ──────────────────────────────────────────────────────────────
+$bp-mobile-max:    767px;
+$bp-tablet:        768px;
+$bp-tablet-max:    1023px;
+$bp-laptop:        1024px;
+$bp-laptop-max:    1279px;
+$bp-desktop-m:     1280px;
+$bp-desktop-m-max: 1599px;
+$bp-desktop-l:     1600px;
+$bp-desktop-l-max: 1919px;
+$bp-desktop-xl:    1920px;
+
+// ─── Сетка ────────────────────────────────────────────────────────────────────
+$grid-columns: 12;
+
+$grid-gutter-mobile:    16px;
+$grid-gutter-tablet:    24px;
+$grid-gutter-desktop:   32px;
+
+$grid-margin-mobile:    16px;
+$grid-margin-tablet:    32px;
+$grid-margin-laptop:    40px;
+$grid-margin-desktop-m: 64px;
+$grid-margin-desktop-l: 80px;
+
+$container-max-desktop-m: 1280px;
+$container-max-desktop-l: 1440px;
+
+// ─── Шкала отступов (base 8px) ────────────────────────────────────────────────
+$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;
+$space-20: 80px;
+$space-24: 96px;
+$space-32: 128px;
+
+// ─── Типографика ──────────────────────────────────────────────────────────────
+$font-size-base: 16px; // = 1rem
+
+// Семейства (переопределяются в проекте)
+$font-primary:   'Inter', sans-serif;
+$font-secondary: 'Georgia', serif;
+
+// Размеры по адаптивам (в rem)
+$font-size-h1-mobile:  1.75rem;   // 28px
+$font-size-h1-tablet:  2.25rem;   // 36px
+$font-size-h1-desktop: 3rem;      // 48px
+
+$font-size-h2-mobile:  1.375rem;  // 22px
+$font-size-h2-tablet:  1.75rem;   // 28px
+$font-size-h2-desktop: 2.25rem;   // 36px
+
+$font-size-h3-mobile:  1.125rem;  // 18px
+$font-size-h3-tablet:  1.375rem;  // 22px
+$font-size-h3-desktop: 1.75rem;   // 28px
+
+$font-size-h4-desktop: 1.25rem;   // 20px
+$font-size-h4-mobile:  1rem;      // 16px
+
+$font-size-body-desktop: 1rem;    // 16px
+$font-size-body-mobile:  0.875rem; // 14px
+
+$font-size-small:          0.75rem;  // 12px
+$font-size-caption-desktop: 0.875rem; // 14px
+
+// Жирность
+$font-weight-regular:  400;
+$font-weight-medium:   500;
+$font-weight-semibold: 600;
+$font-weight-bold:     700;
+
+// Межстрочный интервал
+$line-height-heading: 1.2;
+$line-height-body:    1.6;
+$line-height-caption: 1.4;
+
+// Межбуквенный интервал
+$letter-spacing-normal:  0;
+$letter-spacing-wide:    0.02em;
+$letter-spacing-heading: -0.01em;
+
+// ─── Радиусы скруглений ───────────────────────────────────────────────────────
+$radius-xs: 2px;
+$radius-sm: 4px;
+$radius-md: 8px;
+$radius-lg: 16px;
+$radius-xl: 24px;
+$radius-2xl: 32px;
+$radius-full: 9999px;
+
+// ─── Тени ─────────────────────────────────────────────────────────────────────
+$shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
+$shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);
+$shadow-lg: 0 8px 24px rgb(0 0 0 / 0.1), 0 4px 8px rgb(0 0 0 / 0.04);
+$shadow-xl: 0 20px 40px rgb(0 0 0 / 0.12);
+
+// ─── Анимации ─────────────────────────────────────────────────────────────────
+$transition-fast:   100ms ease;
+$transition-base:   200ms ease;
+$transition-slow:   400ms ease;
+$transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+// ─── Z-index ──────────────────────────────────────────────────────────────────
+$z-below:    -1;
+$z-base:      0;
+$z-raised:    10;
+$z-dropdown:  100;
+$z-sticky:    200;
+$z-overlay:   300;
+$z-modal:     400;
+$z-toast:     500;
+$z-tooltip:   600;

package/src/template/src/app/styles/global.scss

@@ -0,0 +1,96 @@
+// =============================================================================
+// GLOBAL STYLES — базовый сброс + глобальные переменные
+// Подключается один раз в src/app/index.tsx
+// =============================================================================
+
+@use 'variables' as *;
+@use 'mixins' as *;
+@use 'typography';
+
+// ─── CSS Custom Properties (runtime tokens) ───────────────────────────────────
+:root {
+  // Цвета — переопределяются в теме проекта
+  --color-focus: #3b82f6;
+  --color-link: inherit;
+
+  // Сетка
+  --grid-columns: #{$grid-columns};
+  --container-max: #{$container-max-desktop-l};
+
+  // Отступы (удобно для JS)
+  --space-1:  #{$space-1};
+  --space-2:  #{$space-2};
+  --space-4:  #{$space-4};
+  --space-6:  #{$space-6};
+  --space-8:  #{$space-8};
+  --space-12: #{$space-12};
+  --space-16: #{$space-16};
+}
+
+// ─── Сброс ────────────────────────────────────────────────────────────────────
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: $font-size-base;
+  scroll-behavior: smooth;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: $font-primary;
+  font-size: $font-size-body-desktop;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-body;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// ─── Медиа ────────────────────────────────────────────────────────────────────
+img,
+video,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+// ─── Форма ────────────────────────────────────────────────────────────────────
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+// ─── Утилиты ──────────────────────────────────────────────────────────────────
+.container {
+  @include container;
+}
+
+.visually-hidden {
+  @include visually-hidden;
+}
+
+// Сброс анимаций для пользователей с настройкой «уменьшить движение»
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important; // stylelint-disable-line declaration-no-important
+    animation-iteration-count: 1 !important; // stylelint-disable-line declaration-no-important
+    transition-duration: 0.01ms !important; // stylelint-disable-line declaration-no-important
+    scroll-behavior: auto !important; // stylelint-disable-line declaration-no-important
+  }
+}

package/src/template/src/shared/config/breakpoints.ts

@@ -0,0 +1,36 @@
+// =============================================================================
+// BREAKPOINTS — зеркало значений из _variables.scss для использования в JS/TS
+// Используется в хуках (useMediaQuery), тестах и утилитах
+// =============================================================================
+
+export const BREAKPOINTS = {
+  mobileMax:    767,
+  tablet:       768,
+  tabletMax:    1023,
+  laptop:       1024,
+  laptopMax:    1279,
+  desktopM:     1280,
+  desktopMMax:  1599,
+  desktopL:     1600,
+  desktopLMax:  1919,
+  desktopXL:    1920,
+} as const;
+
+export type BreakpointKey = keyof typeof BREAKPOINTS;
+
+// Готовые медиа-строки для matchMedia / CSS-in-JS
+export const MEDIA = {
+  mobile:       `(max-width: ${BREAKPOINTS.mobileMax}px)`,
+  tablet:       `(min-width: ${BREAKPOINTS.tablet}px) and (max-width: ${BREAKPOINTS.tabletMax}px)`,
+  tabletUp:     `(min-width: ${BREAKPOINTS.tablet}px)`,
+  laptop:       `(min-width: ${BREAKPOINTS.laptop}px) and (max-width: ${BREAKPOINTS.laptopMax}px)`,
+  laptopUp:     `(min-width: ${BREAKPOINTS.laptop}px)`,
+  desktopM:     `(min-width: ${BREAKPOINTS.desktopM}px) and (max-width: ${BREAKPOINTS.desktopMMax}px)`,
+  desktopMUp:   `(min-width: ${BREAKPOINTS.desktopM}px)`,
+  desktopL:     `(min-width: ${BREAKPOINTS.desktopL}px) and (max-width: ${BREAKPOINTS.desktopLMax}px)`,
+  desktopXL:    `(min-width: ${BREAKPOINTS.desktopXL}px)`,
+  landscape:    `(orientation: landscape)`,
+  portrait:     `(orientation: portrait)`,
+} as const;
+
+export type MediaKey = keyof typeof MEDIA;

package/src/template/src/shared/config/tokens.ts

@@ -0,0 +1,79 @@
+// =============================================================================
+// DESIGN TOKENS — зеркало _variables.scss для JS/TS
+// =============================================================================
+
+export const SPACING = {
+  1:  4,
+  2:  8,
+  3:  12,
+  4:  16,
+  5:  20,
+  6:  24,
+  8:  32,
+  10: 40,
+  12: 48,
+  16: 64,
+  20: 80,
+  24: 96,
+  32: 128,
+} as const satisfies Record<number, number>;
+
+export type SpacingKey = keyof typeof SPACING;
+
+// ─── Типографика ──────────────────────────────────────────────────────────────
+export const FONT_SIZE = {
+  h1: { mobile: 28, tablet: 36, desktop: 48 },
+  h2: { mobile: 22, tablet: 28, desktop: 36 },
+  h3: { mobile: 18, tablet: 22, desktop: 28 },
+  h4: { mobile: 16, desktop: 20 },
+  body: { mobile: 14, desktop: 16 },
+  small: 12,
+  captionDesktop: 14,
+} as const;
+
+export const FONT_WEIGHT = {
+  regular:  400,
+  medium:   500,
+  semibold: 600,
+  bold:     700,
+} as const;
+
+export const LINE_HEIGHT = {
+  heading: 1.2,
+  body:    1.6,
+  caption: 1.4,
+} as const;
+
+// ─── Радиусы ──────────────────────────────────────────────────────────────────
+export const RADIUS = {
+  xs:   2,
+  sm:   4,
+  md:   8,
+  lg:   16,
+  xl:   24,
+  '2xl': 32,
+  full: 9999,
+} as const;
+
+// ─── Z-index ──────────────────────────────────────────────────────────────────
+export const Z_INDEX = {
+  below:    -1,
+  base:     0,
+  raised:   10,
+  dropdown: 100,
+  sticky:   200,
+  overlay:  300,
+  modal:    400,
+  toast:    500,
+  tooltip:  600,
+} as const;
+
+export type ZIndexKey = keyof typeof Z_INDEX;
+
+// ─── Анимации ─────────────────────────────────────────────────────────────────
+export const TRANSITION = {
+  fast:   '100ms ease',
+  base:   '200ms ease',
+  slow:   '400ms ease',
+  spring: '300ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+} as const;

package/src/template/src/shared/lib/hooks/index.ts

@@ -0,0 +1 @@
+export { useMediaQuery } from './useMediaQuery';

package/src/template/src/shared/lib/hooks/useMediaQuery.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+import { MEDIA, type MediaKey } from '@shared/config/breakpoints';
+
+/**
+ * Хук для реактивного отслеживания медиа-запросов.
+ *
+ * @example
+ * const isMobile = useMediaQuery('mobile');
+ * const isTabletUp = useMediaQuery('tabletUp');
+ */
+export function useMediaQuery(key: MediaKey): boolean {
+  const query = MEDIA[key];
+
+  const [matches, setMatches] = useState<boolean>(
+    () => window.matchMedia(query).matches,
+  );
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    const listener = (e: MediaQueryListEvent) => { setMatches(e.matches); };
+
+    media.addEventListener('change', listener);
+    setMatches(media.matches);
+
+    return () => { media.removeEventListener('change', listener); };
+  }, [query]);
+
+  return matches;
+}