@topvisor/ui 0.0.35 → 0.0.36

package/src/docs/CSS//320/236/320/261/321/211/320/270/320/265 /320/274/320/276/320/264/320/270/321/204/320/270/320/272/320/260/321/202/320/276/321/200/321/213.mdx"

@@ -1,156 +0,0 @@
-import { Markdown } from '@storybook/blocks';
-
-import ellipsisCSS from '@/resources/styles/core/modifiers/ellipsis.css?raw'
-
-# Общие модификаторы
-
-Формат имени класса модификатора состояний: `top-{{stateName}}`.
-
-Расположение общих модификаторов до предкомпиляции: src/resources/styles/core/modifiers/*.css.
-
-Отличие модификаторов от компонентов заключается в том, что модификаторы не являются самостоятельными и реализуются только в связке с компонентами.
-
-## Модфикаторы состояния
-
-<table>
-    <tr>
-        <th>Класс</th>
-        <th>Описание</th>
-    </tr>
-    <tr>
-        <td>.top-inited</td>
-        <td>
-            Признак готовности js, настраивается в каждом компоненте отдельно.
-            Ранее исползовался в чиcтом js для исключения скачков при загрузке страницы.
-
-            Во Vue для динамически подключаемых компонентов без SSR используется иной подход.
-
-            <details>
-                <summary>см. пример для Vue</summary>
-                
-                html:
-
-                ```html
-                <example-component></example-component> <!-- html до отрисовки Vue -->
-                <div class="top-exampleComponent"></div> <!-- html после отрисовки Vue -->
-                ```
-
-
-                Стили:
-                
-                ```css
-                example-component{ height: 200px; } /* стили для заглушки компонента до его отрисовки */
-                .top-exampleComponent{ height: 200px; } /* обычные стили компонента */
-                ```
-            </details>
-            
-        </td>
-    </tr>
-    <tr>
-        <td>.top-error</td>
-        <td>Модификатор ошибки</td>
-    </tr>
-    <tr>
-        <td>.top-changed</td>
-        <td>Модификатор изменения</td>
-    </tr>
-    <tr>
-        <td>.top-disabled</td>
-        <td>Модификатор блокированности</td>
-    </tr>
-    <tr>
-        <td>.top-active</td>
-        <td>Модификатор активности, выбора элемента</td>
-    </tr>
-    <tr>
-        <td>.top-hightlight</td>
-        <td>Модификатор подсветки</td>
-    </tr>
-</table>
-
-## Модфикаторы видимости
-
-<table>
-    <tr>
-        <th>Класс</th>
-        <th>Описание</th>
-    </tr>
-    <tr>
-        <td>.top-hidden</td>
-        <td>скрыть элемент (display: none !important)</td>
-    </tr>
-    <tr>
-        <td>.top-unvisible</td>
-        <td>скрыть элемент, элемент по прежнему будет считаться видимым</td>
-    </tr>
-    <tr>
-        <td>.top-only_admin</td>
-        <td>отображать только для админов</td>
-    </tr>
-    <tr>
-        <td>.top-only_pc</td>
-        <td>отображать только для ПК версии</td>
-    </tr>
-    <tr>
-        <td>.top-only_mobile</td>
-        <td>отображать только для мобильной версии</td>
-    </tr>
-    <tr>
-        <td>.top-only_ru</td>
-        <td>отображать только в русской языковой версии</td>
-    </tr>
-    <tr>
-        <td>.top-only_en</td>
-        <td>отображать только в английской языковой версии</td>
-    </tr>
-</table>
-
-## Модфикаторы размера
-
-<table>
-    <tr>
-        <th>Класс</th>
-        <th>Описание</th>
-    </tr>
-    <tr>
-        <td>.top-size_xs</td>
-        <td>XS</td>
-    </tr>
-    <tr>
-        <td>.top-size_s</td>
-        <td>S</td>
-    </tr>
-    <tr>
-        <td>.top-size_m</td>
-        <td>M, стандартный размер, как если бы модификатор не указывался</td>
-    </tr>
-    <tr>
-        <td>.top-size_l</td>
-        <td>L</td>
-    </tr>
-    <tr>
-        <td>.top-size_xl</td>
-        <td>XL</td>
-    </tr>
-</table>
-
-## Модфикаторы разметки
-
-<table>
-    <tr>
-        <th>Класс</th>
-        <th>Описание</th>
-    </tr>
-    <tr>
-        <td>.top-ellipsis</td>
-        <td>Оформление строк с сокращением под три точки</td>
-    </tr>
-    <tr>
-        <td>.top-ellipsis2</td>
-        <td>Оформление строк в две строки с сокращением под три точки</td>
-    </tr>
-    <tr>
-        <td>.top-ellipsis3</td>
-        <td>Оформление строк в три строки с сокращением под три точки</td>
-    </tr>
-</table>

package/src/docs/CSS//320/237/320/265/321/200/320/265/320/274/320/265/320/275/320/275/321/213/320/265.mdx

@@ -1,47 +0,0 @@
-# Переменне
-
-Правила определения переменных:
-
-- переменные задаются в `:root{ }`
-- формат имени цвета палитры: `--color-{{ colorName }}-{{ от 0 до 1000 }}`
-- формат имени цвета темы: `--color-{{ colorName }}-{{ colorModificator }}`
-- формат имени переменной компонента: `--top-{{ componentName }}-{{ cssPropertyName }}`
-
-См. также:
-
-* [Основные стили и переменные](/docs/core-base--docs)
-* [Темы](/docs/core-theme--docs)
-
-## Примеры
-
-Переменная палитры не ассоциируется с сущностью и описывает только сам цвет:
-
-```css
-/* colors.css */
-
-:root{
-    --color-blue-500: #0F0;
-}
-```
-
-Переменная темы не ассоциируется с цветом и описывает только сущность:
-
-```css
-/* light.css */
-
-:root{
-    --primary: var(--color-blue-500);
-}
-```
-
-Переменная компонента buttonExample:
-
-```css
-/* buttonExample.vue */
-
-:root{
-    --top-buttonExample-color: var(--top-color-blue-500); /* стиль color, который не зависит от темы */
-    --top-buttonExample-color: var(--top-primary); /* стиль color, который зависит от темы */
-    --top-buttonExample-font-size: 24px; /* стиль font-size */
-}
-```

package/src/docs/CSS//320/237/321/200/320/265/320/264/320/277/321/200/320/276/321/206/320/265/321/201/321/201/320/276/321/200/321/213.mdx

@@ -1,15 +0,0 @@
-# Предпроцессоры
-
-Предпроцессоры в проекте не используются.
-
-Испоьзуется css модуль: [PostCSS](https://postcss.org/).
-
-Благодаря правильно продуманной структуре компонентов и современных возможностей CSS вам
-не придется делать сложных правил CSS. Если же вы с ними столкнулись, задумайтесь, возможно что-то делаете не так.
-
-В некоторых случаях предпроцессоры могут быть полезны, например для генерации переменных на основе определенных условий
-с помощью функций, которых нет в css. Однако распространенные задачи решаются плагинами postcss, которые способны реализовать необходимый функционал.
-При этом достаточно гибко. Например: [postcss-color-mod-function](https://github.com/csstools/postcss-color-mod-function).
-
-Таким образом снимаются требования к разработчику на профильное знание css препроцессоров и снижается уровень входа.
-Одновременно с этим в проекте испоьзуются самые современные средства для работы с css.

package/src/docs/CSS//320/240/320/265/320/272/320/276/320/274/320/265/320/275/320/264/320/260/321/206/320/270/320/270 /320/221/320/255/320/234.mdx"

@@ -1,49 +0,0 @@
-# Рекомендации БЭМ
-
-Подробнее о БЭМ: [https://ru.bem.info/](https://ru.bem.info/).
-
-Проект topvisor-ui не следуют всем правилам БЭМ, но тем не менее следуют их рекомендациям.
-
-При написании компонента следует использовать рекомендации БЭМ со следующими правилами:
-
-- все классы имют префикс "top-"
-- имя блока должно соответствовать имени компонента в camelCase
-- имена сущностей (блок, элемент, имя модификатора и значение модификатора) пишутся в camelCase
-- элемент отделяется от блока нижним подчеркиванием: "_"
-- модификаторы отделяется дефисом: "-"
-- значение модификатора отделяется от имени модификатора подчеркиванием: "_"
-- булевы модификаторы рекомендуется писать без указания значения
-
-## Структура класса соответствует схеме
-
-**top-blockName_elementName-modifierName_modifierValue**
-
-## Все варианты
-
- - top-blockName
- - top-blockName-modifierName
- - top-blockName-modifierName_modifierValue
- - top-blockName_elementName
- - top-blockName_elementName-modifierName
- - top-blockName_elementName-modifierName_modifierValue
-
-## Примеры
-
-Компонент ButtonExample с подсказкой, модификаторами номера и фокуса.
-
-```css
-:root{
-   --top-buttonExample-color: var(--color-white);
-   --top-buttonExample-background-color: var(--color-primary);
-}
-
-.top-buttonExample{ } /* блок */
-.top-buttonExample_hint{ } /* элемент подсказки */
-
-.top-buttonExample-focus{ } /* модификатор фокуса на блоке */
-.top-buttonExample_hint-focus{ }  /* модификатор фокуса на элементе подсказки */
-
-.top-buttonExample-number_1{ } /* модификатор номера со значением 1 */
-.top-buttonExample-number_2{ } /* модификатор номера со значением 2 */
-.top-buttonExample-number_3{ } /* модификатор номера со значением 3 */
-```

package/src/docs/CSS//320/241/321/202/320/270/320/273/320/270.md

@@ -1,53 +0,0 @@
-# Стили
-
-Стили можно условно разделить на 3 категории:
-
-- общие стили topvisor-ui
-- стили темы
-- стили компонентнов
-
-Каждая категория будет собрана в отдельный css файл.
-Стили компонентнов могут быть разделены на несколько компонентво и могут загружаться по требованию в ленивом режиме.
-
-## Рекомендации по подключению стилей
-
-Все основные стили и стиль выбранной темы необходимо подключаться в самом начале страницы.
-
-При смене темы ее стили должны подменяться, перезагрузка страницы не требуется.
-
-В самом начале страницы необъодимо подключать только нужные стили компонентов.
-По рекомендации это стили библиотек **forms** и **content**.
-
-Подключение стилей компонентов необходимо организовывать таким образом, чтобы все нужные стили компонент загружал сам в ассинхроннорм режиме.
-При этом следует учитывать, что стили уже могут быть заранее подключены на страницу и корреткно это обрабатывать.
-
-## Общие стили
-
-Некоторые стили нужно загружать всегда, независимо от загрузки компонента.
-Такие стили выносятся в  **src/resources/styles/core/*.css** и не требуют импорта в компоненте.
-
-См. подробнее: [Основные стили и переменные](/docs/core-base--docs).
-
-Общие стили могут содержать правила для нескольких компонентов, в пользу исключения дубля кода.
-
-Добавление новых общих стилей не рекомендуется.
-
-## Классы компонентнов
-
-При указании стилей использование идентификаторов недопустимо.
-
-Все имена компонентов в пределах topvisor-ui уникальны.
-
-Классы начинаются с префикса "top-"
-
-О том как называть классы см. в разделе: [Рекомендации БЭМ](/docs/docs-css-рекомендации-бэм--docs).
-
-## Vue
-
-Vue имеет [встроенную](https://vuejs.org/api/sfc-css-features.html) встроенную поддержку css модулей.
-
-| Рекомендация | Причины |
-|--|--|
-| Не используйте scoped стили | CSS модули прекрасно справляются со своей задачей и нет никих причин усложнять код используя style scoped |
-| Не используйте :global и :local | Это усложняет написание стилей для вас и других разработчиков. Vue предоставляет необходимый функционал для работы с глобальными и локальными css модулями |
-| Не используйте composes | Используйте возможности Vue для явного добавления нужных классов к необходимым элементам на странице |

package/src/docs/CSS//320/241/321/202/320/270/320/273/320/270.mdx

@@ -1,4 +0,0 @@
-import { Markdown  } from "@storybook/blocks";
-import Стили from "./Стили.md?raw";
-
-<Markdown>{Стили}</Markdown>

package/src/docs/CSS//320/247/321/202/320/276 /321/202/320/260/320/272/320/276/320/265 css /320/274/320/276/320/264/321/203/320/273/321/214.mdx"

@@ -1,53 +0,0 @@
-# Что такое css модуль?
-
-Эта статья несет информационный характер и не связана напрямую с проектом topvisor-ui.
-
-Для удобства разработки все стили подключаются в виде css модулей. CSS модуль это прокладка в typescript между обычным импортом и css файлом.
-В результате импорта файла, объявленного как css модуль, вы получите словарь имен классов,
-ключами которого будут входящие классы, а значениями - исходящие классы.
-
-При написании шаблонов вместо вставки имен классов необходимо вставлять значения из этого словаря. Это правило не относится к глобальным классам.
-
-Преимущества использования css модуля:
-
-- при предкомпиляции классы будут автоматически заменены на другие, чтобы снизить вероятность пересечения имен с другими компонентами
-- импортируя css модуль разработчик в явном виде будет видеть, какие классы из какого файла использует
-- поддержка IDE обеспечивает быстрый переход между html шаблоном и css файлом, а также предлагает возможности автозаполнения, чтобы упростить процесс разработки
-- упрощается рефакторинг css классов
-- упрощается поиск неиспользуемых классов
-
-## Локальные и глобальные  модули
-
-Локальные и глобальные модули будут одинаково добавлены в карту css стилей приложения при сборке и сохранятся в нужные css файлы.
-
-### Локальные модули
-
-Все классы локальных модулей при сборке модифицируются таким образом, чтобы минимизировать пересечения классов в приложении.
-
-Недостатки локальных модулей:
-
-- при импорте стороннего css файла как css модуля, в js файле будут сохранены все классы импортируемого модуля, даже те, которые не используются
-- в другом приложении нельзя будет импортировать css файл с измененными классами после сборки и использовать его в другом приложении как css модуль, потому что другое приложение не обязано постоянно поддерживать актуальность имен css классов
-
-### Глобальные модули
-
-Если нам надо сделать css классы прозрачными и доступными после импорта в других приложениях, их необходимо объявить как глобальные.
-
-Недостатки глобальных модулей:
-
-- необходимо следить за именами классов и не подключать в одно приложения классы, которые пересекаются между собой
-- глобальные css классы не доступны в объекте css модуля, поэтому их нельзя будет использовать в javascript и шаблонизаторах через импорт css модуля
-
-Обратите внимание, что с ними нельзя работать как с локальными, даже если ваша IDE будет вам подсказывать имена классов,
-после сборки никаких классов на странице не появится. Опцию экспорта глобальных классов включить можно, но это не рекомендуется,
-так как все глобальные классы будут внедряться в javascript, что приведет к росту размера ваших компонентов.
-
-### Что же использовать
-
-Использовать глобальные модули, если:
-
-- другим приложениям надо использовать классы вашего приложения, в том числе менять их для себя
-- другим приложениям надо дать возможность использовать классы вашего приложения как css модули
-- классы действительно являются глобальными и не связаны с конкретным компонентом
-
-Во всех остальных случаях используйте локальные модули.

package/src/docs/ROADMAP.md

@@ -1,17 +0,0 @@
-# Roadmap
-
-- [x] icomoon
-- [x] описать ядро UI 💟
-	- [x] цвета 🎨
-	- [x] темы 🎨
-	- [x] мини компоненты, возможно deprecated 🙈
-	- [x] рекомендуемые модификаторы 🎛️
-- [x] ~~@storybook/addon-storysource 7.4.1~~ отображает только код истории, вместо кода компонента, отключен
-- [x] addon [@storybook/theming](https://storybook.js.org/docs/react/configure/theming) для оформления самого storybook (не компонентов)
-- [x] унификация имен классов компонентов, адаптация к новым именам классов в проекте topvisor.com
-- [x] упростить добавление компонента
-- [x] упростить тестирвоание сборки в другом проекте без публикации
-- [ ] библиотека helper для независимого использования 🔧
-- [ ] настроить eslint 📜
-- [ ] i18n 📚
-- [ ] Mock API 🧩

package/src/docs/Roadmap.mdx

@@ -1,4 +0,0 @@
-import { Markdown  } from "@storybook/blocks";
-import Roadmap from "./ROADMAP.md?raw";
-
-<Markdown>{Roadmap}</Markdown>