Merge pull request #10 from MarkMelior/feature/VEES-18-reused-info-block

VEES-18 | Переиспользуемый компонент InfoBlock
MarkMelior · Jan 8, 2025 · 118f9b8 · 118f9b8
2 parents 8073940 + 842266a
commit 118f9b8
Show file tree

Hide file tree

Showing 80 changed files with 945 additions and 505 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@
 
 ⠀
 
-### 🫡 Общие правила проекта
+### 📋✏️ Общие правила проекта
 
 #### Архитектура
 
@@ -62,7 +62,9 @@
 
 ---
 
-### 👾 Скрипты
+⠀
+
+### 🎬📃 Скрипты
 
 - `yarn dev` - Запуск в Development режиме;
 - `yarn build` - Production сборка;
@@ -71,7 +73,9 @@
 
 ---
 
-### ⚡️ Архитектура проекта
+⠀
+
+### 📂⚡️ Архитектура проекта
 
 Проект написан в соответствии с архитектурной методологией [Feature-Sliced Design](https://feature-sliced.design/docs/get-started/tutorial) и [AppRouter](https://nextjs.org/docs/app) Next.js 15.
 

diff --git a/docs/naming-conventions.md b/docs/naming-conventions.md
@@ -0,0 +1,6 @@
+- Vees — Тренировка
+- All Vees — Все тренировки
+- Exercise — Упражнение
+- Muscle — Группа мышц
+- Vees Template - Шаблон тренировки
+- Approach - Подход
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -49,6 +49,14 @@ const eslintCommonRules = {
     },
     { blankLine: 'always', next: 'return', prev: '*' },
   ],
+  'sort-imports': [
+    'error',
+    {
+      ignoreCase: false,
+      ignoreDeclarationSort: true,
+      ignoreMemberSort: false,
+    },
+  ],
 };
 
 const eslintReactRules = {
@@ -63,6 +71,13 @@ const eslintReactRules = {
 };
 
 const eslintTypescriptRules = {
+  '@typescript-eslint/consistent-type-imports': [
+    'error',
+    {
+      disallowTypeAnnotations: false, // Позволяет аннотации через `import type`
+      prefer: 'type-imports', // Всегда использовать "import type" для типов
+    },
+  ],
   '@typescript-eslint/no-unused-vars': 'error',
 };
 

diff --git a/src/app/(with-navbar)/page.tsx b/src/app/(with-navbar)/page.tsx
@@ -1,9 +1,10 @@
+import { Card } from '@/widgets/Card';
+import { mockExerciseListItems } from '@/widgets/Card/model/mock';
 import { Headers } from '@/widgets/Headers';
-import { InfoBlock } from '@/widgets/InfoBlock/client';
-import { mockInfoBlockExercisesItems } from '@/widgets/InfoBlock/model/mock-exercises';
 
-import { ArrowLeftIcon, FilterOutlineIcon } from '@/shared/icons';
-import { Badge, Button, Flex, Layout, Separator } from '@/shared/ui';
+import { ArrowLeftIcon, FilterOutlineIcon, StopwatchOutlineIcon } from '@/shared/icons';
+import { Badge, Button, Flex, Layout, List, Separator } from '@/shared/ui';
+import { InfoBlock } from '@/shared/ui/client';
 
 import { FiltersModal } from '@/features/FiltersModal';
 import { SortModal } from '@/features/SortModal';
@@ -15,11 +16,36 @@ const Home = () => (
     <Headers.Main />
     <main>
       <Layout>
-        <InfoBlock
-          items={mockInfoBlockExercisesItems}
-          showAllCountItems={2}
-          showAllText="Показать всю статистику"
-        />
+        <InfoBlock maxHeight={126} textButton="Показать всю статистику">
+          <List.Item
+            description="~ конец в 18:36"
+            icon={<StopwatchOutlineIcon />}
+            title="Расчётное время"
+            value="~ 1 час 30 минут"
+          />
+          <List.Horizontal
+            items={[
+              {
+                title: 'Тренировка №',
+                value: '98',
+              },
+              {
+                title: 'Начало',
+                value: '17:06',
+              },
+              {
+                title: 'Упражнений',
+                value: '7',
+              },
+            ]}
+          />
+          <List.Item
+            icon={<StopwatchOutlineIcon />}
+            showDivider={false}
+            title="Пусто"
+            value="Пусто"
+          />
+        </InfoBlock>
         <Separator size={18} />
         <Flex gap={10} id="home-filters-buttons">
           <FiltersModal>
@@ -52,6 +78,10 @@ const Home = () => (
           </SortModal>
         </Flex>
       </Layout>
+      <Separator size={32} />
+      <Layout padding={false}>
+        <Card.ExercisesList items={mockExerciseListItems} />
+      </Layout>
     </main>
   </>
 );

diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -33,4 +33,8 @@ body {
 
 :disabled {
   cursor: not-allowed;
+}
+
+main > *:last-child {
+  padding-bottom: 180px;
 }
diff --git a/src/app/vees/page.tsx b/src/app/vees/page.tsx
@@ -1,10 +1,10 @@
+import { Card } from '@/widgets/Card';
+import { mockVeesListItems } from '@/widgets/Card/model/mock';
 import { Headers } from '@/widgets/Headers';
-import { InfoBlock } from '@/widgets/InfoBlock/client';
-import { mockInfoBlockVeesItems } from '@/widgets/InfoBlock/model/mock-vees';
-import { VeesList } from '@/widgets/VeesList/client';
-import { mockVeesListItems } from '@/widgets/VeesList/model/mock';
 
-import { Layout, Separator } from '@/shared/ui';
+import { PaperOutlineIcon, StopwatchOutlineIcon } from '@/shared/icons';
+import { Chip, Layout, List, Separator } from '@/shared/ui';
+import { InfoBlock } from '@/shared/ui/client';
 
 import { Timer } from '@/features/Timer/client';
 
@@ -13,11 +13,49 @@ const Vees = () => (
     <Headers.ExercisesList />
     <main>
       <Layout>
-        <InfoBlock items={mockInfoBlockVeesItems} />
+        <InfoBlock>
+          <List.Item
+            description="~ конец в 18:36"
+            icon={<StopwatchOutlineIcon />}
+            title="Расчётное время"
+            value="~ 1 час 30 минут"
+          />
+          <List.Item
+            icon={<PaperOutlineIcon />}
+            title="Тренировка"
+            value={(
+              <Chip.Category
+                className="mt-1"
+                color="text-red-500"
+                isEdited={true}
+                name="Вторник"
+                number={9}
+                size="medium"
+              />
+            )}
+          />
+          <List.Horizontal
+            items={[
+              {
+                title: 'Тренировка №',
+                value: '98',
+              },
+              {
+                title: 'Начало',
+                value: '17:06',
+              },
+              {
+                title: 'Упражнений',
+                value: '7',
+              },
+            ]}
+            showDivider={false}
+          />
+        </InfoBlock>
       </Layout>
       <Separator size={32} />
       <Layout padding={false}>
-        <VeesList items={mockVeesListItems} />
+        <Card.VeesList items={mockVeesListItems} />
       </Layout>
     </main>
     <Timer />

diff --git a/src/features/Timer/ui/Timer.tsx b/src/features/Timer/ui/Timer.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { PauseIcon, PlayIcon, StopwatchOutlineIcon } from '@/shared/icons';
 import { Background, Button, Flex, Layout, Text } from '@/shared/ui';

diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts
@@ -1 +1,5 @@
 export * from './routes';
+
+export const getErrorGroupDirectly = (text: string) => {
+  throw new Error(`The \'${text}\' component is a group and cannot be used directly.`);
+};
diff --git a/src/shared/icons/add-outline.tsx b/src/shared/icons/add-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const AddOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/arrow-dropdown.tsx b/src/shared/icons/arrow-dropdown.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const ArrowDropdownIcon = ({
   className,

diff --git a/src/shared/icons/arrow-left.tsx b/src/shared/icons/arrow-left.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const ArrowLeftIcon = ({
   className,

diff --git a/src/shared/icons/cross.tsx b/src/shared/icons/cross.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const CrossIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/drag.tsx b/src/shared/icons/drag.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const DragIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/export-outline.tsx b/src/shared/icons/export-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const ExportOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/filter-outline.tsx b/src/shared/icons/filter-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const FilterOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/finish-outline.tsx b/src/shared/icons/finish-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const FinishOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/flash-outline.tsx b/src/shared/icons/flash-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const FlashOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/folder-outline.tsx b/src/shared/icons/folder-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const FolderOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/import-outline.tsx b/src/shared/icons/import-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const ImportOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/lang.tsx b/src/shared/icons/lang.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const LangIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/logo.tsx b/src/shared/icons/logo.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const LogoIcon = ({
   className,

diff --git a/src/shared/icons/message.tsx b/src/shared/icons/message.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const MessageIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/paper-outline.tsx b/src/shared/icons/paper-outline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const PaperOutlineIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/pause.tsx b/src/shared/icons/pause.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const PauseIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/play.tsx b/src/shared/icons/play.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const PlayIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/plus.tsx b/src/shared/icons/plus.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const PlusIcon = ({
   fill = 'currentColor',

diff --git a/src/shared/icons/reset.tsx b/src/shared/icons/reset.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Icon, IIcon } from '@/shared/ui';
+import { Icon } from '@/shared/ui';
+import type { IIcon } from '@/shared/ui';
 
 export const ResetIcon = ({
   fill = 'currentColor',