@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/props/wikiWindow.ts

@@ -0,0 +1,277 @@
+import {
+  type StorybookArgsToList,
+  StorybookCategory,
+  StorybookControl
+} from '../../types/storybookTypes'
+
+/**
+ * The wikiWindow object contains descriptions of all properties for the Window component
+ *
+ * Объект wikiWindow содержит описание всех свойств для компонента Window
+ */
+export const wikiWindow: StorybookArgsToList = {
+  'window.alignment': {
+    type: StorybookControl.select,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Places a window in viewport: center, edges or corners',
+        ru: 'Позиционирует окно во вьюпорте: центр, края или углы'
+      },
+      options: []
+    }
+  },
+  'window.autoTabIndex': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.technical,
+      description: {
+        en: 'Automatically manages the tab index for the window',
+        ru: 'Автоматически управляет индексом табуляции для окна'
+      }
+    }
+  },
+  'window.axis': {
+    type: StorybookControl.select,
+    options: {
+      category: StorybookCategory.option,
+      description: {
+        en: 'Primary positioning axis relative to anchor or cursor; works only in menu mode (adaptive = "menu")',
+        ru: 'Основная ось позиционирования относительно якоря или курсора; работает только в режиме меню (adaptive = "menu")'
+      },
+      options: []
+    }
+  },
+  'window.beforeClosing': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.hook,
+      description: {
+        en: 'Hook called before closing; return false to prevent closing',
+        ru: 'Хук вызывается перед закрытием; возврат false предотвращает закрытие'
+      }
+    }
+  },
+  'window.beforeOpening': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.hook,
+      description: {
+        en: 'Hook called before opening; return false to prevent opening',
+        ru: 'Хук вызывается перед открытием; возврат false предотвращает открытие'
+      }
+    }
+  },
+  'window.inert': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Blocks interaction with external elements',
+        ru: 'Блокирует управление внешними элементами'
+      }
+    }
+  },
+  'window.closeMobileHide': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Hides close control on mobile',
+        ru: 'Скрывает управление закрытием на мобильных'
+      }
+    }
+  },
+  'window.closeOnEsc': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.technical,
+      description: {
+        en: 'Closes the window when the ESC key is pressed',
+        ru: 'Закрывает окно при нажатии клавиши ESC'
+      }
+    }
+  },
+  'window.closing': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.hook,
+      description: {
+        en: 'Hook called during closing; return false to interrupt',
+        ru: 'Хук вызывается во время закрытия; возврат false прерывает процесс'
+      }
+    }
+  },
+  'window.contextmenu': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.option,
+      description: {
+        en: 'Allows opening on right‑click (context menu)',
+        ru: 'Позволяет открывать по правому клику (контекстное меню)'
+      }
+    }
+  },
+  'window.dense': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Compact layout: reduces internal paddings for a denser window',
+        ru: 'Компактное оформление: уменьшает внутренние отступы для более плотного окна'
+      }
+    }
+  },
+  'window.divider': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Displays top/bottom divider depending on scroll position',
+        ru: 'Отображает разделитель сверху/снизу в зависимости от положения скролла'
+      }
+    }
+  },
+  'window.flash': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Disables animations for instant display',
+        ru: 'Отключает анимации для мгновенного отображения'
+      }
+    }
+  },
+  'window.fullscreen': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Fills the screen without margins',
+        ru: 'Заполняет экран без отступов'
+      }
+    },
+    isDemo: true
+  },
+  'window.imageSize': {
+    type: StorybookControl.select,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Controls the relative size of the image area in the layout without tying to concrete values',
+        ru: 'Управляет относительным размером области изображения в макете без привязки к конкретным значениям'
+      },
+      options: ['half', 'lg', 'md', 'quarter', 'sm']
+    },
+    isDemo: true,
+    demoOptions: {
+      image: 'https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924',
+      imagePosition: 'left'
+    }
+  },
+  'window.indent': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Sets offsets for positioning relative to edges or anchor; works only in menu mode (adaptive = "menu")',
+        ru: 'Задает отступы для позиционирования относительно краев или якоря; работает только в режиме меню (adaptive = "menu")'
+      }
+    }
+  },
+  'window.opening': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.hook,
+      description: {
+        en: 'Hook called during opening; return false to interrupt',
+        ru: 'Хук вызывается в процессе открытия; возврат false прерывает процесс'
+      }
+    }
+  },
+  'window.openOnArrowDown': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.technical,
+      description: {
+        en: 'Opens the window when the arrow down key is pressed',
+        ru: 'Открывает окно при нажатии клавиши стрелка вниз'
+      }
+    }
+  },
+  'window.origin': {
+    type: StorybookControl.select,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Sets transform origin for opening animation',
+        ru: 'Задает точку трансформации для анимации открытия'
+      },
+      options: []
+    }
+  },
+  'window.overElement': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.option,
+      description: {
+        en: 'Sets an anchor element for positioning',
+        ru: 'Задает опорный элемент для позиционирования'
+      }
+    }
+  },
+  'window.overscroll': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.technical,
+      description: {
+        en: 'Keeps horizontal scrolling inside the window',
+        ru: 'Удерживает горизонтальный скролл внутри окна'
+      }
+    }
+  },
+  'window.persistent': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Prevents closing when clicking outside',
+        ru: 'Предотвращает закрытие при клике за пределами окна'
+      }
+    }
+  },
+  'window.preparation': {
+    type: StorybookControl.object,
+    options: {
+      category: StorybookCategory.hook,
+      description: {
+        en: 'Hook called during preparation before opening',
+        ru: 'Хук вызывается на этапе подготовки перед открытием'
+      }
+    }
+  },
+  'window.staticMode': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.option,
+      description: {
+        en: 'Enables static mode: displays as an embedded component without modal behavior, animations, or dynamic positioning',
+        ru: 'Включает статичный режим: отображает как встроенный компонент без модального поведения, анимаций и динамического позиционирования'
+      }
+    },
+    isDemo: true,
+    demoOptions: {
+      adaptive: 'static'
+    }
+  },
+  'window.widthMatch': {
+    type: StorybookControl.boolean,
+    options: {
+      category: StorybookCategory.style,
+      description: {
+        en: 'Matches window width to control width (menu)',
+        ru: 'Подгоняет ширину окна под ширину контрола (меню)'
+      }
+    }
+  }
+}

package/src/media/styles/en/about.mdx

@@ -0,0 +1,79 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/en/About'/>
+
+# @dxtmisha/styles
+
+SCSS utilities library for DXT UI ecosystem. Contains ready-made mixins and functions for styling with CSS Custom Properties support, automatic RTL handling, and responsive design patterns.
+
+## Package Contents
+
+### Color Management
+
+- **Color Functions** — validation, conversion, palette management, opacity handling
+- **getColor** — color value extraction with opacity support
+- **getPalette** — palette color management
+- **toColorRbg** — color conversion to RGB format
+- **toGradient** — color to gradient conversion
+
+### Layout & Positioning
+
+- **Flexbox Mixins** — horizontal/vertical layouts, centering, spacing presets
+- **Position Mixins** — absolute/relative positioning with automatic RTL support via inset-inline
+- **Dimension Mixins** — width, height, aspect ratio, viewport units (dvw/dvh)
+- **Margin & Padding** — spacing utilities with RTL support via margin-inline/padding-inline
+
+### Typography
+
+- **Font Mixins** — font size, line height, paragraph spacing with CSS variables
+- **Text Alignment** — automatic RTL text alignment inversion
+- **Text Overflow** — truncate, clamp, ellipsis handling
+- **Text Transformation** — uppercase, lowercase, capitalize utilities
+
+### Direction & RTL Support
+
+- **Dir System** — automatic LTR/RTL direction management via CSS variables
+- **initDir** — initialization with --d-dir multiplier (1 for LTR, -1 for RTL)
+- **dirLeft/dirRight** — automatic value inversion for RTL
+- **dirFlexLeft/dirFlexRight** — flex alignment with RTL support
+
+### Responsive Design
+
+- **Media Queries** — min/max width breakpoints from design system
+- **Container Queries** — responsive components based on parent container size
+- **mediaMinWidth/mediaMaxWidth** — convenient media query wrappers
+- **containerMinWidth/containerMaxWidth** — container query utilities
+
+### Transform & Animation
+
+- **Transform Mixins** — translateX/Y, scale, rotate with CSS variables
+- **transformInit** — applies all transforms with automatic RTL for translateX
+- **translateInit** — translate-only transforms
+
+### Interactive States
+
+- **Selector Mixins** — hover, active, focus, disabled, readonly states
+- **enabled** — automatic exclusion of disabled/readonly/loading states
+- **focus** — includes :focus, :focus-within, and BEM modifier support
+
+### Utilities
+
+- **Content Visibility** — performance optimization for off-screen content
+- **Scrollbar** — hide scrollbar while keeping scroll functionality
+- **Rules** — map operations, string manipulation, selector utilities
+- **Custom Properties** — CSS variable management and validation
+
+## Key Features
+
+**RTL Support:** Automatic right-to-left layout support through CSS Logical Properties (margin-inline, padding-inline, inset-inline) and direction system integration
+
+**CSS Custom Properties:** All sizing, spacing, and transform values stored as CSS variables for dynamic theming
+
+**Design System Integration:** Breakpoints, colors, and spacing values from centralized design tokens
+
+**Performance:** Content visibility optimizations, efficient selector generation, minimal CSS output
+
+**Type Safety:** Validation functions for colors, custom properties, and data types
+
+**BEM Compatible:** All mixins work seamlessly with BEM methodology
+