@dxtmisha/wiki 0.39.4 → 0.39.6

package/src/media/functional/ui/properties/type-media/type-media.en.mdx

@@ -54,3 +54,32 @@ Adaptive queries can be initialized using the `|` separator shortcut (e.g., `med
   }
 }
 ```
+
+### Group Formation (Media Group)
+
+The specialized types `media-group`, `media-max-group`, `container-group`, and `container-max-group` allow for the automatic generation of a set of adaptive rules for all available breakpoints defined in the system.
+
+This eliminates the need to manually write each media query when the adaptation logic is the same for different sizes but must be encapsulated into separate selectors.
+
+**Example Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "group|icon": {
+      "_type": "media-group",
+      "padding": "8px"
+    }
+  }
+}
+```
+
+**Compiled Output (SCSS):**
+When using `media-group`, the system creates nested classes for each breakpoint by adding a suffix (e.g., `iconSm`, `iconMd`):
+```scss
+.button {
+  &--iconSm { @media (min-width: 640px) { padding: 8px; } }
+  &--iconMd { @media (min-width: 768px) { padding: 8px; } }
+  &--iconLg { @media (min-width: 1024px) { padding: 8px; } }
+  // and so on for all breakpoints...
+}
+```

package/src/media/functional/ui/properties/type-media/type-media.ru.mdx

@@ -54,3 +54,32 @@ import {Meta} from '@storybook/addon-docs/blocks'
   }
 }
 ```
+
+### Групповое формирование (Media Group)
+
+Специальные типы `media-group`, `media-max-group`, `container-group` и `container-max-group` позволяют автоматически генерировать набор адаптивных правил для всех доступных точек останова (breakpoints), определенных в системе.
+
+Это избавляет от необходимости вручную прописывать каждый медиа-запрос, если логика адаптации одинакова для разных размеров, но должна быть инкапсулирована в отдельные селекторы.
+
+**Пример конфигурации (`properties.json`):**
+```json
+{
+  "button": {
+    "group|icon": {
+      "_type": "media-group",
+      "padding": "8px"
+    }
+  }
+}
+```
+
+**Результат генерации (SCSS):**
+При использовании `media-group` система создаст вложенные классы для каждого брейкпоинта, добавляя суффикс (например, `iconSm`, `iconMd`):
+```scss
+.button {
+  &--iconSm { @media (min-width: 640px) { padding: 8px; } }
+  &--iconMd { @media (min-width: 768px) { padding: 8px; } }
+  &--iconLg { @media (min-width: 1024px) { padding: 8px; } }
+  // и так далее для всех точек останова...
+}
+```

package/src/media/functional/ui/properties/type-media/type-media.vi.mdx

@@ -54,3 +54,32 @@ Truy vấn thích ứng có thể được thiết lập thông qua phím tắt
   }
 }
 ```
+
+### Tạo nhóm thích ứng (Media Group)
+
+Các loại đặc biệt `media-group`, `media-max-group`, `container-group`, và `container-max-group` cho phép tự động tạo ra một tập hợp các quy tắc thích ứng cho tất cả các điểm dừng (breakpoints) có sẵn được định nghĩa trong hệ thống.
+
+Điều này giúp loại bỏ việc phải viết thủ công từng truy vấn media khi logic thích ứng giống nhau cho các kích thước khác nhau nhưng cần được đóng gói vào các bộ chọn (selectors) riêng biệt.
+
+**Ví dụ cấu hình (`properties.json`):**
+```json
+{
+  "button": {
+    "group|icon": {
+      "_type": "media-group",
+      "padding": "8px"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch (SCSS):**
+Khi sử dụng `media-group`, hệ thống sẽ tạo ra các lớp lồng nhau cho mỗi breakpoint bằng cách thêm hậu tố (ví dụ: `iconSm`, `iconMd`):
+```scss
+.button {
+  &--iconSm { @media (min-width: 640px) { padding: 8px; } }
+  &--iconMd { @media (min-width: 768px) { padding: 8px; } }
+  &--iconLg { @media (min-width: 1024px) { padding: 8px; } }
+  // và cứ thế cho tất cả các breakpoints...
+}
+```

package/src/documentation/storybook/StorybookDescriptions.tsx

@@ -1,25 +0,0 @@
-/** @jsxImportSource react */
-
-import React from 'react'
-
-import { WikiStorybookDescriptions } from '../../classes/WikiStorybookDescriptions'
-
-/**
- * Component for displaying Storybook component descriptions in the wiki
- *
- * Компонент для отображения описаний компонентов Storybook в вики
- * @param componentName - Name of the component to find in the descriptions/ Имя компонента для поиска в описаниях
- * @param type - Type of the description to retrieve/ тип описания для получения
- */
-export const StorybookDescriptions = (
-  {
-    componentName,
-    type
-  }: {
-    componentName: string
-    type: string
-  }
-): React.ReactNode => {
-  return new WikiStorybookDescriptions(componentName)
-    .getDescriptionByType(type)
-}

package/src/documentation/storybook/StorybookMain.tsx

@@ -1,28 +0,0 @@
-/** @jsxImportSource react */
-
-import React from 'react'
-import {
-  Canvas,
-  Controls,
-  Subtitle,
-  Title
-} from '@storybook/addon-docs/blocks'
-
-export const StorybookMain = (
-  {
-    name,
-    description,
-    story
-  }: {
-    name: string
-    description: string
-    story: any
-  }
-): React.ReactNode => (
-  <>
-    <Title children={name} />
-    <Subtitle children={description} />
-    <Canvas of={story} />
-    <Controls of={story} />
-  </>
-)

package/src/media.ts

@@ -1,15 +0,0 @@
-import _image1 from './assets/image/image-1.jpeg'
-import _image2 from './assets/image/image-2.jpeg'
-import _phone1 from './assets/image/phone-1.png'
-import _phone2 from './assets/image/phone-2.png'
-import _phone3 from './assets/image/phone-3.png'
-
-import _demoPdf from './assets/demo/demo-pdf.pdf'
-
-export const image1 = _image1
-export const image2 = _image2
-export const phone1 = _phone1
-export const phone2 = _phone2
-export const phone3 = _phone3
-
-export const demoPdf = _demoPdf

package/src/storybook.tsx

@@ -1,4 +0,0 @@
-export * from './documentation/storybook/StorybookMain'
-
-// Event
-export * from './documentation/storybook/StorybookDescriptions'