From b7c559a08630ece739508fe7bd0460852633a287 Mon Sep 17 00:00:00 2001 From: Mark Melior Date: Wed, 8 Jan 2025 11:41:08 +0300 Subject: [PATCH 1/3] VEES-17 | Add themes modal --- README.md | 5 +- .../settings/ui/SettingsContent.tsx | 110 +++++++++--------- src/features/FiltersModal/FiltersModal.tsx | 8 +- src/features/SortModal/SortModal.tsx | 8 +- src/features/ThemesModal/ThemesModal.tsx | 16 +++ src/features/ThemesModal/index.ts | 1 + src/shared/ui/Modal/ui/Base/Base.tsx | 35 +++--- src/shared/ui/Modal/ui/Modal/Modal.tsx | 5 +- .../ui/Modal/ui/Modal/modal.global.scss | 1 - src/shared/ui/Section/Section.tsx | 73 ------------ src/shared/ui/Section/index.ts | 2 +- src/shared/ui/Section/ui/Item/Item.tsx | 57 +++++++++ .../Item/item.module.scss} | 12 +- src/shared/ui/Section/ui/Section/Section.tsx | 17 +++ .../ui/Section/ui/Section/section.module.scss | 5 + src/widgets/AddExerciseModal/model/mock.ts | 15 ++- .../AddExerciseModal/ui/AddExerciseModal.tsx | 7 +- 17 files changed, 203 insertions(+), 174 deletions(-) create mode 100644 src/features/ThemesModal/ThemesModal.tsx create mode 100644 src/features/ThemesModal/index.ts delete mode 100644 src/shared/ui/Section/Section.tsx create mode 100644 src/shared/ui/Section/ui/Item/Item.tsx rename src/shared/ui/Section/{section.module.scss => ui/Item/item.module.scss} (75%) create mode 100644 src/shared/ui/Section/ui/Section/Section.tsx create mode 100644 src/shared/ui/Section/ui/Section/section.module.scss diff --git a/README.md b/README.md index 275bacb..8a76403 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ > Самое удобное приложение для записи результатов тренировок (: +⠀ + - ✨🎨 Разработан [дизайн в Figma](https://www.figma.com/design/l7WmZZ7WKEr3YnVNdibxGD/Mobile-App?node-id=250-793&t=7fycS0Obh0DIcwXF-1) - Собственный [UI Kit](/src/shared/ui/) - Серверный рендеринг и [AppRouter](https://nextjs.org/docs/app) @@ -16,6 +18,7 @@ ![Next.js 15](https://img.shields.io/badge/Next.js_15-000?logo=nextdotjs&logoColor=fff&style=for-the-badge) ![React 19](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![TypeScript 5](https://img.shields.io/badge/TypeScript_5-007ACC?style=for-the-badge&logo=typescript&logoColor=white) +![Feature-Sliced Design](https://img.shields.io/badge/FSD-3481FE?style=for-the-badge&logo=flat&logoColor=white) ![Module SCSS](https://img.shields.io/badge/module_scss-CC6699?style=for-the-badge&logo=sass&logoColor=white) ![GIT](https://img.shields.io/badge/CI_/_CD-000000?style=for-the-badge&logo=github&logoColor=white) ![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=ESLint&logoColor=white) @@ -27,7 +30,7 @@ > Продемонстрировать свои навыки, это не про «усложнить проект»... > *(всевозможные самописные утилиты, хуки, размазывание не переиспользуемого функционала по всей архитектуре, тесты на всё подряд)*. -> ⠀ +> ~ > Настоящее мастерство находится в простоте `^-^` ⠀ diff --git a/src/app/(with-navbar)/settings/ui/SettingsContent.tsx b/src/app/(with-navbar)/settings/ui/SettingsContent.tsx index 790e1a3..eab4d20 100644 --- a/src/app/(with-navbar)/settings/ui/SettingsContent.tsx +++ b/src/app/(with-navbar)/settings/ui/SettingsContent.tsx @@ -11,68 +11,62 @@ import { } from '@/shared/icons'; import { Button, Section } from '@/shared/ui'; +import { ThemesModal } from '@/features/ThemesModal'; + import styles from './settingsContent.module.scss'; export const SettingsContent = () => ( <> -
, - onClick: () => { /* void */ }, - title: 'Тренировки', - }, - { - color: '#FFB21A', - icon: , - onClick: () => { /* void */ }, - title: 'Настроить группы', - }, - { - color: '#FA4838', - icon: , - onClick: () => { /* void */ }, - title: 'Упражнения', - }, - ]} - /> -
, - onClick: () => { /* void */ }, - rightText: 'Русский', - title: 'Язык', - }, - { - color: '#5AADF2', - icon: , - onClick: () => { /* void */ }, - rightText: 'Как в системе', - title: 'Оформление', - }, - ]} - /> -
, - onClick: () => { /* void */ }, - title: 'Импорт настроек', - }, - { - color: '#D15347', - description: 'Сохранить файл', - icon: , - onClick: () => { /* void */ }, - title: 'Экспорт настроек', - }, - ]} - /> +
+ } + title="Тренировки" + /> + } + title="Настроить группы" + /> + } + showDivider={false} + title="Упражнения" + /> +
+
+ } + rightText="Русский" + title="Язык" + /> + + } + rightText="Как в системе" + showDivider={false} + title="Оформление" + /> + +
+
+ } + title="Импорт настроек" + /> + } + showDivider={false} + title="Экспорт настроек" + /> +
+ {action ? ( + + ) : null} ); diff --git a/src/shared/ui/Modal/ui/Modal/Modal.tsx b/src/shared/ui/Modal/ui/Modal/Modal.tsx index 2faa122..2af12f5 100644 --- a/src/shared/ui/Modal/ui/Modal/Modal.tsx +++ b/src/shared/ui/Modal/ui/Modal/Modal.tsx @@ -1,6 +1,5 @@ 'use client'; -import { clsx } from 'clsx'; import { cloneElement, isValidElement, useCallback, useState } from 'react'; import { createPortal } from 'react-dom'; @@ -16,7 +15,6 @@ export interface IModal { closeOnClickOverlay?: boolean onClickOverlay?: () => void onClose?: () => void - pointerEvents?: boolean } export const Modal = ({ @@ -25,7 +23,6 @@ export const Modal = ({ closeOnClickOverlay = true, onClickOverlay, onClose, - pointerEvents = true, }: IModal) => { const [isMount, setMount] = useState(false); @@ -72,7 +69,7 @@ export const Modal = ({ className={styles.wrapper} justify="center" > -
+
{children}
diff --git a/src/shared/ui/Modal/ui/Modal/modal.global.scss b/src/shared/ui/Modal/ui/Modal/modal.global.scss index ff2ca26..c2a6fd1 100644 --- a/src/shared/ui/Modal/ui/Modal/modal.global.scss +++ b/src/shared/ui/Modal/ui/Modal/modal.global.scss @@ -1,4 +1,3 @@ - .overlay { position: fixed; top: 0; diff --git a/src/shared/ui/Section/Section.tsx b/src/shared/ui/Section/Section.tsx deleted file mode 100644 index e842218..0000000 --- a/src/shared/ui/Section/Section.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Fragment } from 'react'; - -import { ArrowDropdownIcon } from '@/shared/icons'; -import type { TLinkOrClick } from '@/shared/types'; -import { Button, Divider, Flex, Text } from '@/shared/ui'; - -import { Background } from '../Background'; - -import styles from './section.module.scss'; - -interface ISectionBaseItem { - color: string - description?: string - icon: React.ReactNode - rightText?: string - title: string -} - -type TSectionItem = TLinkOrClick; - -interface ISection { - items: TSectionItem[] -} - -export const Section = ({ items }: ISection) => ( - - {items.map(({ - color, - description, - href, - icon, - onClick, - rightText, - title, - }, index) => ( - - - {index !== items.length - 1 ? : null} - - ))} - -); diff --git a/src/shared/ui/Section/index.ts b/src/shared/ui/Section/index.ts index 8b51c65..4dd37c9 100644 --- a/src/shared/ui/Section/index.ts +++ b/src/shared/ui/Section/index.ts @@ -1 +1 @@ -export { Section } from './Section'; +export { Section } from './ui/Section/Section'; diff --git a/src/shared/ui/Section/ui/Item/Item.tsx b/src/shared/ui/Section/ui/Item/Item.tsx new file mode 100644 index 0000000..787b77b --- /dev/null +++ b/src/shared/ui/Section/ui/Item/Item.tsx @@ -0,0 +1,57 @@ +import { ArrowDropdownIcon } from '@/shared/icons'; +import { Button, Divider, Flex, Text } from '@/shared/ui'; + +import styles from './item.module.scss'; + +interface ISectionItemBaseItem { + color: string + description?: string + icon: React.ReactNode + onClick?: () => void + rightText?: string + showDivider?: boolean + title: string +} + +export const SectionItem = ({ + color, + description, + icon, + onClick, + rightText, + showDivider = true, + title, +}: ISectionItemBaseItem) => ( + +); diff --git a/src/shared/ui/Section/section.module.scss b/src/shared/ui/Section/ui/Item/item.module.scss similarity index 75% rename from src/shared/ui/Section/section.module.scss rename to src/shared/ui/Section/ui/Item/item.module.scss index 1978826..f6d399a 100644 --- a/src/shared/ui/Section/section.module.scss +++ b/src/shared/ui/Section/ui/Item/item.module.scss @@ -1,10 +1,5 @@ -.wrapper { - overflow: clip; - - animation: var(--anim-scale-fade-in); -} - .item { + position: relative; padding: 12px 16px; &:hover { @@ -22,9 +17,10 @@ } .divider { + position: absolute; + right: 0; + bottom: -0.5px; width: calc(100% - 56px); - margin-top: -0.5px; - margin-left: auto; } .title { diff --git a/src/shared/ui/Section/ui/Section/Section.tsx b/src/shared/ui/Section/ui/Section/Section.tsx new file mode 100644 index 0000000..8639c64 --- /dev/null +++ b/src/shared/ui/Section/ui/Section/Section.tsx @@ -0,0 +1,17 @@ +import { Background } from '@/shared/ui/Background'; + +import { SectionItem } from '../Item/Item'; + +import styles from './section.module.scss'; + +interface ISection { + children: React.ReactNode +} + +export const Section = ({ children }: ISection) => ( + + {children} + +); + +Section.Item = SectionItem; diff --git a/src/shared/ui/Section/ui/Section/section.module.scss b/src/shared/ui/Section/ui/Section/section.module.scss new file mode 100644 index 0000000..cdda253 --- /dev/null +++ b/src/shared/ui/Section/ui/Section/section.module.scss @@ -0,0 +1,5 @@ +.content { + overflow: clip; + + animation: var(--anim-scale-fade-in); +} \ No newline at end of file diff --git a/src/widgets/AddExerciseModal/model/mock.ts b/src/widgets/AddExerciseModal/model/mock.ts index 4e18f48..b0049ca 100644 --- a/src/widgets/AddExerciseModal/model/mock.ts +++ b/src/widgets/AddExerciseModal/model/mock.ts @@ -8,17 +8,26 @@ export const mockAddExerciseModal: IGroupExercises[] = [ }, { color: '#FA4838', - exercises: ['1', '2'], + exercises: ['Разведения в кроссовере на одну руку', 'Разведение гантелей в стороны'], name: 'Средние дельты', }, { color: '#00FF80', - exercises: ['1', '2', '3'], + exercises: [ + 'Французский жим лёжа', + 'Жим лёжа узким хватом', + 'Брусья с доп. весом', // TODO: Синхронизировать по ID + ], name: 'Трицепс', }, { color: '#1A80E5', - exercises: ['1', '2', '3', '4', '5', '6'], + exercises: [ + 'Жим штанги', + 'Жим гантелей в наклоне', + 'Жим штанги в наклоне', + 'Брусья с доп. весом', // TODO: Синхронизировать по ID + ], name: 'Грудь', }, { diff --git a/src/widgets/AddExerciseModal/ui/AddExerciseModal.tsx b/src/widgets/AddExerciseModal/ui/AddExerciseModal.tsx index e9df064..2914cc2 100644 --- a/src/widgets/AddExerciseModal/ui/AddExerciseModal.tsx +++ b/src/widgets/AddExerciseModal/ui/AddExerciseModal.tsx @@ -35,15 +35,18 @@ export const AddExerciseModal = ({ items }: IAddExerciseModal) => { return ( , + onClick: () => { /* Redirect в настройки */ }, + text: 'Настроить', + }} button={( )} closeOnClickOverlay={!selectedGroup} - iconAction={} onClickOverlay={() => setSelectedGroup(null)} - textAction="Настроить" title={( <>
From 6bcf0e26aaf4e8e7a6e8e2c1bb9942cf9bb0433e Mon Sep 17 00:00:00 2001 From: Mark Melior Date: Wed, 8 Jan 2025 16:18:35 +0300 Subject: [PATCH 2/3] VEES-17 | Add `ThemesModal` --- .../AddExerciseModal/client.ts | 0 .../AddExerciseModal/model/mock.ts | 0 .../AddExerciseModal/ui/AddExerciseModal.tsx | 0 .../ui/addExerciseModal.module.scss | 0 src/features/ThemesModal/ThemesModal.tsx | 28 +++++++++++++++++-- .../ThemesModal/themesModal.module.scss | 18 ++++++++++++ src/shared/ui/Modal/ui/Modal/Modal.tsx | 8 ++---- .../ui/Modal/ui/Modal/modal.module.scss | 2 +- .../ui/ExercisesList/ExercisesList.tsx | 6 ++-- 9 files changed, 51 insertions(+), 11 deletions(-) rename src/{widgets => features}/AddExerciseModal/client.ts (100%) rename src/{widgets => features}/AddExerciseModal/model/mock.ts (100%) rename src/{widgets => features}/AddExerciseModal/ui/AddExerciseModal.tsx (100%) rename src/{widgets => features}/AddExerciseModal/ui/addExerciseModal.module.scss (100%) create mode 100644 src/features/ThemesModal/themesModal.module.scss diff --git a/src/widgets/AddExerciseModal/client.ts b/src/features/AddExerciseModal/client.ts similarity index 100% rename from src/widgets/AddExerciseModal/client.ts rename to src/features/AddExerciseModal/client.ts diff --git a/src/widgets/AddExerciseModal/model/mock.ts b/src/features/AddExerciseModal/model/mock.ts similarity index 100% rename from src/widgets/AddExerciseModal/model/mock.ts rename to src/features/AddExerciseModal/model/mock.ts diff --git a/src/widgets/AddExerciseModal/ui/AddExerciseModal.tsx b/src/features/AddExerciseModal/ui/AddExerciseModal.tsx similarity index 100% rename from src/widgets/AddExerciseModal/ui/AddExerciseModal.tsx rename to src/features/AddExerciseModal/ui/AddExerciseModal.tsx diff --git a/src/widgets/AddExerciseModal/ui/addExerciseModal.module.scss b/src/features/AddExerciseModal/ui/addExerciseModal.module.scss similarity index 100% rename from src/widgets/AddExerciseModal/ui/addExerciseModal.module.scss rename to src/features/AddExerciseModal/ui/addExerciseModal.module.scss diff --git a/src/features/ThemesModal/ThemesModal.tsx b/src/features/ThemesModal/ThemesModal.tsx index 382a634..4948b09 100644 --- a/src/features/ThemesModal/ThemesModal.tsx +++ b/src/features/ThemesModal/ThemesModal.tsx @@ -1,6 +1,8 @@ 'use client'; -import { ModalBase } from '@/shared/ui'; +import { Button, Flex, ModalBase } from '@/shared/ui'; + +import styles from './themesModal.module.scss'; interface IThemesModal { children: React.ReactElement<{ onClick?: () => void }> @@ -11,6 +13,28 @@ export const ThemesModal = ({ children }: IThemesModal) => ( button={children} title="Выбери тему" > - Здесь будет список тем + + + + + ); diff --git a/src/features/ThemesModal/themesModal.module.scss b/src/features/ThemesModal/themesModal.module.scss new file mode 100644 index 0000000..a475786 --- /dev/null +++ b/src/features/ThemesModal/themesModal.module.scss @@ -0,0 +1,18 @@ +.button { + display: flex; + justify-content: space-between; + position: relative; + padding: 20px 26px; + + background: theme('colors.base.900 / 75%'); + border-radius: 1.25rem; + overflow: clip; + + animation: var(--anim-scale-fade-in); + + @apply border border-base-400/15; + + &:hover { + background: theme('colors.base.900 / 50%'); + } +} \ No newline at end of file diff --git a/src/shared/ui/Modal/ui/Modal/Modal.tsx b/src/shared/ui/Modal/ui/Modal/Modal.tsx index 2af12f5..f160f15 100644 --- a/src/shared/ui/Modal/ui/Modal/Modal.tsx +++ b/src/shared/ui/Modal/ui/Modal/Modal.tsx @@ -15,6 +15,7 @@ export interface IModal { closeOnClickOverlay?: boolean onClickOverlay?: () => void onClose?: () => void + placement?: 'start' | 'center' | 'end' } export const Modal = ({ @@ -23,6 +24,7 @@ export const Modal = ({ closeOnClickOverlay = true, onClickOverlay, onClose, + placement = 'start', }: IModal) => { const [isMount, setMount] = useState(false); @@ -64,11 +66,7 @@ export const Modal = ({ {isMount && portalTarget ? createPortal( <>
- +
{children}
diff --git a/src/shared/ui/Modal/ui/Modal/modal.module.scss b/src/shared/ui/Modal/ui/Modal/modal.module.scss index f2e1e93..56dfadc 100644 --- a/src/shared/ui/Modal/ui/Modal/modal.module.scss +++ b/src/shared/ui/Modal/ui/Modal/modal.module.scss @@ -12,7 +12,7 @@ position: relative; width: 100%; max-width: theme('screens.sm'); - margin: 4rem 2rem; + margin: 6rem 2rem; &.pointerEvents { pointer-events: auto; diff --git a/src/widgets/Headers/ui/ExercisesList/ExercisesList.tsx b/src/widgets/Headers/ui/ExercisesList/ExercisesList.tsx index c1fcac4..cbc8797 100644 --- a/src/widgets/Headers/ui/ExercisesList/ExercisesList.tsx +++ b/src/widgets/Headers/ui/ExercisesList/ExercisesList.tsx @@ -1,10 +1,10 @@ -import { AddExerciseModal } from '@/widgets/AddExerciseModal/client'; -import { mockAddExerciseModal } from '@/widgets/AddExerciseModal/model/mock'; - import { AppRoutes } from '@/shared/constants'; import { ArrowLeftIcon, FinishOutlineIcon } from '@/shared/icons'; import { Button, Header } from '@/shared/ui'; +import { AddExerciseModal } from '@/features/AddExerciseModal/client'; +import { mockAddExerciseModal } from '@/features/AddExerciseModal/model/mock'; + export const ExercisesList = () => (
Date: Fri, 10 Jan 2025 14:29:21 +0300 Subject: [PATCH 3/3] VEES-17 | Add theme switcher --- .stylelintrc.mjs | 10 +- README.md | 13 +- config/stylelint/restrict-apply.js | 4 +- config/tailwind/colors.ts | 9 ++ eslint.config.mjs | 7 +- .../settings/ui/SettingsContent.tsx | 143 ++++++++++-------- src/app/globals.scss | 5 - src/app/layout.tsx | 3 +- .../ui/addExerciseModal.module.scss | 6 +- src/features/ThemesModal/ThemesModal.tsx | 74 +++++---- .../ThemesModal/themesModal.module.scss | 6 +- src/features/Timer/ui/Timer.tsx | 2 +- src/features/Timer/ui/timer.module.scss | 17 ++- src/shared/constants/index.ts | 8 +- src/shared/constants/routes.ts | 7 - src/shared/styles/theme.scss | 23 +++ src/shared/styles/utils.scss | 24 +++ src/shared/ui/Background/Background.tsx | 1 + .../ui/Background/background.module.scss | 15 +- src/shared/ui/Button/button.module.scss | 4 + src/shared/ui/Checkbox/Checkbox.tsx | 21 +++ src/shared/ui/Checkbox/checkbox.module.scss | 20 +++ src/shared/ui/Checkbox/index.ts | 1 + src/shared/ui/Chip/chip.module.scss | 3 +- src/shared/ui/Header/header.module.scss | 2 +- src/shared/ui/Input/input.module.scss | 8 +- src/shared/ui/Light/light.module.scss | 4 + src/shared/ui/Modal/ui/Base/base.module.scss | 20 ++- .../ui/Section/ui/Item/item.module.scss | 4 + src/shared/ui/Skeleton/skeleton.module.scss | 3 +- src/shared/ui/Text/Text.tsx | 4 +- src/shared/ui/index.ts | 1 + .../Card/ui/VeesItem/veesItem.module.scss | 16 +- .../Card/ui/VeesList/veesList.module.scss | 5 +- tailwind.config.ts | 24 +-- 35 files changed, 338 insertions(+), 179 deletions(-) create mode 100644 config/tailwind/colors.ts delete mode 100644 src/shared/constants/routes.ts create mode 100644 src/shared/styles/theme.scss create mode 100644 src/shared/styles/utils.scss create mode 100644 src/shared/ui/Checkbox/Checkbox.tsx create mode 100644 src/shared/ui/Checkbox/checkbox.module.scss create mode 100644 src/shared/ui/Checkbox/index.ts diff --git a/.stylelintrc.mjs b/.stylelintrc.mjs index 99ae9d3..8190971 100644 --- a/.stylelintrc.mjs +++ b/.stylelintrc.mjs @@ -7,14 +7,7 @@ const config = { ], plugins: ['stylelint-order', './config/stylelint/restrict-apply.js'], rules: { - 'custom-rules/restrict-apply': [ - true, { - allowedPatterns: [ - '^text-(sm|base|lg|xl|\\d+)$', - '^border', - ], - }, - ], + 'custom-rules/restrict-apply': [true, { allowedPatterns: [] }], 'declaration-empty-line-before': null, 'function-no-unknown': [ true, @@ -104,7 +97,6 @@ const config = { { ignoreAtRules: [ 'tailwind', - 'apply', 'include', 'variants', 'responsive', diff --git a/README.md b/README.md index 8a76403..5241b00 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,8 @@ ![Next.js 15](https://img.shields.io/badge/Next.js_15-000?logo=nextdotjs&logoColor=fff&style=for-the-badge) ![React 19](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![TypeScript 5](https://img.shields.io/badge/TypeScript_5-007ACC?style=for-the-badge&logo=typescript&logoColor=white) -![Feature-Sliced Design](https://img.shields.io/badge/FSD-3481FE?style=for-the-badge&logo=flat&logoColor=white) ![Module SCSS](https://img.shields.io/badge/module_scss-CC6699?style=for-the-badge&logo=sass&logoColor=white) +![Feature-Sliced Design](https://img.shields.io/badge/FSD-3481FE?style=for-the-badge&logo=flat&logoColor=white) ![GIT](https://img.shields.io/badge/CI_/_CD-000000?style=for-the-badge&logo=github&logoColor=white) ![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=ESLint&logoColor=white) ![stylelint](https://img.shields.io/badge/stylelint-263238?style=for-the-badge&logo=stylelint&logoColor=white) @@ -58,10 +58,13 @@ ##### SCSS -- [[custom-rules/restrict-apply](./config/stylelint/restrict-apply.js)] `@apply` можно использовать только для: - - размера текста: `text-sm` | `text-base` и т.п. - - border: `border...` и т.п. -- [[custom-rules/scss-import-name](./config/eslint/scss-import-name.js)] Импорт стилей из `.module.scss` нужно называть `styles` +- [[custom-rules/restrict-apply](./config/stylelint/restrict-apply.js)] `@apply` запрещено использовать; +- [[custom-rules/scss-import-name](./config/eslint/scss-import-name.js)] Импорт стилей из `.module.scss` нужно называть `styles`. + +##### Tailwind + +- Добавлять пользовательские цвета нужно в `/shared/theme.scss` формата RGB! Далее нужно добавить этот цвет в `/tailwind.config.ts`. + - Использовать переменную цвета нужно строго через `theme('colors.base.{50-950}')`. Через `var(--color-base-{50-950})` использовать запрещено! --- diff --git a/config/stylelint/restrict-apply.js b/config/stylelint/restrict-apply.js index 363b1a0..25ea263 100644 --- a/config/stylelint/restrict-apply.js +++ b/config/stylelint/restrict-apply.js @@ -3,7 +3,7 @@ const stylelint = require('stylelint'); const ruleName = 'custom-rules/restrict-apply'; const messages = stylelint.utils.ruleMessages(ruleName, { - invalid: value => `The class "${value}" is not allowed in @apply.`, + invalid: (value) => `The class "${value}" is not allowed in @apply.`, }); module.exports = stylelint.createPlugin( @@ -21,7 +21,7 @@ module.exports = stylelint.createPlugin( classes.forEach((className) => { const isAllowed = allowedPatterns.some( - pattern => new RegExp(pattern).test(className), + (pattern) => new RegExp(pattern).test(className), ); if (!isAllowed) { diff --git a/config/tailwind/colors.ts b/config/tailwind/colors.ts new file mode 100644 index 0000000..2232579 --- /dev/null +++ b/config/tailwind/colors.ts @@ -0,0 +1,9 @@ +export const withOpacity = (variable: string): string => + // @ts-ignore + (test) => { + if (test.opacityValue === undefined) { + return `rgb(var(--color-${variable}))`; + } + + return `rgba(var(--color-${variable}), ${test.opacityValue})`; + }; diff --git a/eslint.config.mjs b/eslint.config.mjs index 2b470e1..87bbbf2 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -222,8 +222,11 @@ const eslintConfig = [ rules: { 'max-len': 'off' }, }, { - files: ['**/config/**/*.js'], - rules: { '@typescript-eslint/no-require-imports': 'off' }, + files: ['**/config/**/*.{js,ts}'], + rules: { + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/no-require-imports': 'off', + }, }, ]; diff --git a/src/app/(with-navbar)/settings/ui/SettingsContent.tsx b/src/app/(with-navbar)/settings/ui/SettingsContent.tsx index eab4d20..fe31df5 100644 --- a/src/app/(with-navbar)/settings/ui/SettingsContent.tsx +++ b/src/app/(with-navbar)/settings/ui/SettingsContent.tsx @@ -1,5 +1,7 @@ 'use client'; +import { useTheme } from 'next-themes'; + import { ExportOutlineIcon, FlashOutlineIcon, @@ -15,68 +17,85 @@ import { ThemesModal } from '@/features/ThemesModal'; import styles from './settingsContent.module.scss'; -export const SettingsContent = () => ( - <> -
- } - title="Тренировки" - /> - } - title="Настроить группы" - /> - } - showDivider={false} - title="Упражнения" - /> -
-
- } - rightText="Русский" - title="Язык" - /> - +const getThemeName = (theme: string | undefined) => { + switch (theme) { + case 'system': + return 'Как в системе'; + case 'dark': + return 'Темная тема'; + case 'light': + return 'Светлая тема'; + default: + return 'Тема не выбрана'; + } +}; + +export const SettingsContent = () => { + const { theme } = useTheme(); + + return ( + <> +
+ } + title="Тренировки" + /> + } + title="Настроить группы" + /> + } + showDivider={false} + title="Упражнения" + /> +
+
+ } + rightText="Русский" + title="Язык" + /> + + } + rightText={getThemeName(theme)} + showDivider={false} + title="Оформление" + /> + +
+
+ } + title="Импорт настроек" + /> } - rightText="Как в системе" + color="#D15347" + description="Сохранить файл" + icon={} showDivider={false} - title="Оформление" + title="Экспорт настроек" /> - -
-
- } - title="Импорт настроек" - /> - } - showDivider={false} - title="Экспорт настроек" - /> -
- - -); +
+ + + ); +}; diff --git a/src/app/globals.scss b/src/app/globals.scss index 22076b1..5595a42 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -7,11 +7,6 @@ body { background: linear-gradient(90deg, theme('colors.base.950') 15px, transparent 1%) 50%, linear-gradient(theme('colors.base.950') 15px, theme('colors.base.800') 1%) 0, hsl(0deg 0% 100% / 16%); background-size: 16px 16px; - - [data-mode="light"] & { - background: linear-gradient(90deg, theme('colors.base.100') 15px, transparent 1%) 50%, linear-gradient(theme('colors.base.100') 15px, theme('colors.base.300') 1%) 0, hsl(0deg 0% 100% / 16%); - background-size: 16px 16px; - } } ::-webkit-scrollbar { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7b8273e..4b15250 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,6 +7,7 @@ import type { Metadata } from 'next'; import './globals.scss'; import '@/shared/styles/custom.scss'; +import '@/shared/styles/theme.scss'; const inter = Inter({ subsets: ['cyrillic', 'latin'], @@ -26,7 +27,7 @@ const RootLayout = ({ children }: IRootLayout) => ( ( - + {children}