@topvisor/ui 0.0.34 → 0.0.35

package/src/docs//320/222/320/262/320/265/320/264/320/265/320/275/320/270/320/265 /320/262 Storybook.mdx"

@@ -0,0 +1,323 @@
+import Styling from "@/storybook/resources/styling.png";
+import Context from "@/storybook/resources/context.png";
+import Assets from "@/storybook/resources/assets.png";
+import Docs from "@/storybook/resources/docs.png";
+import Share from "@/storybook/resources/share.png";
+import FigmaPlugin from "@/storybook/resources/figma-plugin.png";
+import Testing from "@/storybook/resources/testing.png";
+import Accessibility from "@/storybook/resources/accessibility.png";
+import Theming from "@/storybook/resources/theming.png";
+import AddonLibrary from "@/storybook/resources/addon-library.png";
+
+export const RightArrow = () => <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Введение в Storybook
+  </div>
+  
+  [Компонентный подход](https://www.componentdriven.org/)
+
+  [Учебные пособия](https://storybook.js.org/tutorials/)
+  
+  <div className="sb-section">
+    <div className="sb-section-item">
+      <img
+        src={Styling}
+        alt="A wall of logos representing different styling technologies"
+      />
+      <h4 className="sb-section-item-heading">Добавление стилей и CSS</h4>
+      <p className="sb-section-item-paragraph">Узнайте о вариантах подключения стилей в Storybook.</p>
+      <a
+        href="https://storybook.js.org/docs/vue/configure/styling-and-css"
+        target="_blank"
+      >Читать больше<RightArrow /></a>
+    </div>
+    
+    <div className="sb-section-item">
+      <img
+        src={Context}
+        alt="An abstraction representing the composition of data for a component"
+      />
+      <h4 className="sb-section-item-heading">Контекст и заглушки</h4>
+      <p className="sb-section-item-paragraph">Если ваш компонент имеет какую-то зависимость, не определенныую в Storybok, он может не отображаться.</p>
+      <a
+        href="https://storybook.js.org/docs/vue/writing-stories/decorators#context-for-mocking"
+        target="_blank"
+      >Читать больше<RightArrow /></a>
+    </div>
+    
+    <div className="sb-section-item">
+      <img src={Assets} alt="A representation of typography and image assets" />
+      <div>
+        <h4 className="sb-section-item-heading">Загрузка ресурсов</h4>
+        <p className="sb-section-item-paragraph">Чтобы связать статические файлы (например, шрифты) с вашими проектами и историями,
+        используйте `staticDirs` параметр конфигурации, чтобы указать папки для загрузки при запуске Storybook.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/configure/images-and-assets"
+          target="_blank"
+        >Читать больше<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Возможности Storybook
+
+    Теперь, когда вы знакомы с основами, давайте рассмотрим другие Возможности Storybook.
+    Вы можете настроить Storybook разными способами в соответствии со своими потребностями.
+  </div>
+
+  <div className="sb-section">
+    <div className="sb-features-grid">
+      <div className="sb-grid-item">
+        <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
+        <h4 className="sb-section-item-heading">Автодокументирвоание</h4>
+        <p className="sb-section-item-paragraph">Создавайте интерактивную справочную документацию из ваших компонентов.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/writing-docs/autodocs"
+          target="_blank"
+        >Читать больше<RightArrow /></a>
+      </div>
+
+      <div className="sb-grid-item">
+        <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" />
+        <h4 className="sb-section-item-heading">Публикация с Chromatic</h4>
+        <p className="sb-section-item-paragraph">Публикуйте storybook вместе всей командой.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/sharing/publish-storybook#publish-storybook-with-chromatic"
+          target="_blank"
+       >Читать больше<RightArrow /></a>
+      </div>
+
+      <div className="sb-grid-item">
+        <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" />
+        <h4 className="sb-section-item-heading">Плагин Figma</h4>
+        <p className="sb-section-item-paragraph">Встраивайте свои истории в Figma, чтобы создавать перекрестные
+        ссылки на дизайн и интерактивную реализацию.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          target="_blank"
+       >Читать больше<RightArrow /></a>
+      </div>
+
+      <div className="sb-grid-item">
+        <img src={Testing} alt="Screenshot of tests passing and failing" />
+        <h4 className="sb-section-item-heading">Тестирование</h4>
+        <p className="sb-section-item-paragraph">Используйте storybook для тестирования компонента во всех его вариациях независимо от сложности.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/writing-tests/introduction"
+          target="_blank"
+       >Читать больше<RightArrow /></a>
+      </div>
+
+      <div className="sb-grid-item">
+        <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
+        <h4 className="sb-section-item-heading">Доступность</h4>
+        <p className="sb-section-item-paragraph">Автоматически тестируйте свои компоненты на наличие проблем a11y.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/writing-tests/accessibility-testing"
+          target="_blank"
+       >Читать больше<RightArrow /></a>
+      </div>
+
+      <div className="sb-grid-item">
+        <img src={Theming} alt="Screenshot of Storybook in light and dark mode" />
+        <h4 className="sb-section-item-heading">Темы</h4>
+        <p className="sb-section-item-paragraph">Ознакомьтесь с возможностями настройки тем Storybook UI.</p>
+        <a
+          href="https://storybook.js.org/docs/vue/configure/theming"
+          target="_blank"
+        >Читать больше<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div className='sb-addon'>
+  <div className='sb-addon-text'>
+    <h4>Дополнения</h4>
+    <p className="sb-section-item-paragraph">Интегрируйте свои инструменты с Storybook для объединения рабочих процессов.</p>
+    <a
+        href="https://storybook.js.org/integrations/"
+        target="_blank"
+      >Смотреть все дополнения<RightArrow /></a>
+  </div>
+  <div className='sb-addon-img'>
+    <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." />
+  </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+
+  .sb-section a:not(h1 a, h2 a, h3 a) {
+    font-size: 14px;
+  }
+
+  .sb-section-item, .sb-grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sb-section-item-heading {
+    padding-top: 20px !important;
+    padding-bottom: 5px !important;
+    margin: 0 !important;
+  }
+  .sb-section-item-paragraph {
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  .sb-chevron {
+    margin-left: 5px;
+  }
+
+  .sb-features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 32px 20px;
+  }
+
+  .sb-socials {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .sb-socials p {
+    margin-bottom: 10px;
+  }
+
+  .sb-explore-image {
+    max-height: 32px;
+    align-self: flex-start;
+  }
+
+  .sb-addon {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: #EEF3F8;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    background: #EEF3F8;
+    height: 180px;
+    margin-bottom: 48px;
+    overflow: hidden;
+  }
+
+  .sb-addon-text {
+    padding-left: 48px;
+    max-width: 240px;
+  }
+
+  .sb-addon-text h4 {
+    padding-top: 0px;
+  }
+
+  .sb-addon-img {
+    position: absolute;
+    left: 345px;
+    top: 0;
+    height: 100%;
+    width: 200%;
+    overflow: hidden;
+  }
+
+  .sb-addon-img img {
+    width: 650px;
+    transform: rotate(-15deg);
+    margin-left: 40px;
+    margin-top: -72px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
+    backface-visibility: hidden;
+  }
+
+  @media screen and (max-width: 800px) {
+    .sb-addon-img {
+      left: 300px;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .sb-section {
+      flex-direction: column;
+    }
+
+    .sb-features-grid {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sb-socials {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .sb-addon {
+      height: 280px;
+      align-items: flex-start;
+      padding-top: 32px;
+      overflow: hidden;
+    }
+
+    .sb-addon-text {
+      padding-left: 24px;
+    }
+
+    .sb-addon-img {
+      right: 0;
+      left: 0;
+      top: 130px;
+      bottom: 0;
+      overflow: hidden;
+      height: auto;
+      width: 124%;
+    }
+
+    .sb-addon-img img {
+      width: 1200px;
+      transform: rotate(-12deg);
+      margin-left: 0;
+      margin-top: 48px;
+      margin-bottom: -40px;
+      margin-left: -24px;
+    }
+  }
+  `}
+</style>

package/src/docs//320/232/320/276/320/274/320/277/320/276/320/275/320/265/320/275/321/202/321/213.mdx

@@ -0,0 +1,20 @@
+# Компоненты
+
+Имена компонентов должны быть уникальны.
+
+Структура компонента:
+
+- entry файл для сборщика: `src/components/{{ libName }}/{{ componentName }}/index.ts`
+- основной файл: `src/components/{{ libName }}/{{ componentName }}/{{ componentName }}.vue`
+- инетрфейсы props, slots и emits: `src/components/{{ libName }}/{{ componentName }}.ts`
+- истории: `src/components/{{ libName }}/{{ componentName }}.stories.ts`
+- дополниетельные файлы для историй: `src/components/{{ libName }}/{{ componentName }}/stories/*`
+
+## Библиотеки компонентов
+
+Дополниетльно сборка проивзоидтся в библиотеки, для загрузки нескольких компонентов одним файлов из CDN без дополниетльной сборки.
+
+Структура библиотеки:
+
+- entry файл для сборщика: `src/components/{{ libName }}/index.ts`
+- компоненты библиотеки: `src/components/{{ libName }}/{{ componentName }}/index.ts`

package/src/docs//320/237/320/276/320/273/320/265/320/267/320/275/320/260/321/217 /320/270/320/275/321/204/320/276/321/200/320/274/320/260/321/206/320/270/321/217.mdx"

@@ -0,0 +1,8 @@
+# Полезная инфомрация
+
+- [package.json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
+- [Vite](https://vitejs.dev/)
+- [Storybook](https://storybook.js.org/)
+- пример UI-kit vue от GitLab:
+    - [Исходники](https://gitlab.com/-/ide/project/gitlab-org/gitlab-ui/edit/main/-/src/components/base/button/button.vue)
+    - [Storybook](https://gitlab-org.gitlab.io/gitlab-ui/)

package/src/docs//320/241/321/202/320/260/320/275/320/264/320/260/321/200/321/202/321/213 /320/272/320/276/320/264/320/260/IDE.mdx"

@@ -0,0 +1,42 @@
+# IDE
+
+## Visual Studio Code
+
+Все рекомендуемые настройки расположены в проекте в папке /.vscode.
+
+**Преимещуства**:
+
+- Быстрая утановка
+- Много расширений
+- Может быть встроен в браузер
+- Бесплатный
+
+**Недостатки**:
+
+- Расширения снижают скорость работы IDE
+- Нет поддержки работы с ftp из коробки
+
+## IntelliJ IDEA
+
+Все рекомендуемые настройки расположены в проекте в папке /.idea.
+
+При работе в этой IDE необходимо:
+- включить Volar
+- выключить опцию Reformat again
+
+**Преимещуства**:
+
+- Много расширений
+- Скорость работы
+
+## NetBean
+
+**Преимещуства**:
+
+- Скорость работы
+- Бесплатный
+
+**Недостатки**:
+
+- Очень мало плагинов
+- Слабая поддержка языков

package/src/docs//320/241/321/202/320/260/320/275/320/264/320/260/321/200/321/202/321/213 /320/272/320/276/320/264/320/260//320/233/320/270/320/275/321/202/320/265/321/200.mdx"

@@ -0,0 +1,72 @@
+# Линтер
+
+Для стандартизации кода используются:
+
+- линтер для javacript: [ESLint](https://eslint.org/)
+- общий линтер для работы со всеми языками: [Sonar Lint](https://www.sonarsource.com/products/sonarlint/).
+
+## Правила автоформата
+
+Каждому разработчику может быть удобно работать с разным масштабом кода и разным числом пробелов для отступов.
+
+Установка табов в качестве разделителей позволит решить данный вопрос, так как табы незаметно для разработчика будут отображаться как пробелы с учетом его настроек, не меняя при этом данные самого файла.
+
+<table>
+    <tr>
+        <th>Название</th>
+        <th>Значение</th>
+    </tr>
+    <tr>
+        <td>Отступы</td>
+        <td>tab (количество пробелов не важно)</td>
+    </tr>
+    <tr>
+        <td>Разделитель строк</td>
+        <td>\r\n</td>
+    </tr>
+    <tr>
+        <td>Стиль кода</td>
+        <td>K&R (1TBS)</td>
+    </tr>
+</table>
+
+## Правила линтера
+
+<table>
+    <tr>
+        <th>id</th>
+        <th>Правило<a href="https://rules.sonarsource.com/php/RSPEC-103/"></a></th>
+        <th>Настройка</th>
+    </tr>
+    <tr>
+        <td>php:s103</td>
+        <td>
+            [Lines should not be too long](https://rules.sonarsource.com/php/RSPEC-103/)
+        </td>
+        <td>maximumLineLength = 150</td>
+    </tr>
+    <tr>
+        <td>php:s105</td>
+        <td>
+            [Tabulation characters should not be used](https://rules.sonarsource.com/php/RSPEC-105/)
+        </td>
+        <td>Выключить</td>
+    </tr>
+    <tr>
+        <td>php:s112</td>
+        <td>
+            [Generic exceptions ErrorException, RuntimeException and Exception should not be thrown](https://rules.sonarsource.com/php/RSPEC-112/)
+        </td>
+        <td>Выключить</td>
+    </tr>
+    <tr>
+        <td>Web:S4084</td>
+        <td>Videos should have subtitles</td>
+        <td>Выключить</td>
+    </tr>
+    <tr>
+        <td></td>
+        <td>`<strong>` and `<em>` tags should be used</td>
+        <td>Выключить</td>
+    </tr>
+</table>

package/src/docs//320/241/321/202/320/260/320/275/320/264/320/260/321/200/321/202/321/213 /320/272/320/276/320/264/320/260//320/241/321/202/320/260/320/275/320/264/320/260/321/200/321/202/321/213 /320/272/320/276/320/264/320/260.mdx"

@@ -0,0 +1,29 @@
+# Стандарты кода
+
+Позвольте рассказать о стандартах js и о том, как это здорово. 👍
+
+Бытует мнение, что стандарты это набор правил, которые можно запихнуть в линтер и не думать о них.
+Давайте развенчаем этот миф и обратим внимание, что это опыт огромного сообщества разрабочтиков, который поможет избежать распространненых ошибок.
+
+- 🚀 изучив руководство ваша продуктивность написания кода увеличится;
+- 🤝 код, написанный по стандартам будет читаться проще другими разработчиками;
+- 🧐 в нем будет читаться ход ваших мыслей;
+- 💡 вероятность ошибок будет уменьшаться, так как в рекомендациях учтен опыт других разработчиков;
+- 🤖 имена переменных, группировка кода на логические блоки, выбор типа переменных и многое другое — это то, что ИИ не способно сделать правильно.
+Правила такого рода не могут быть автоформатом и должны применяться осознанно.
+
+Опыт разработчиков **Google**:
+
+- [js](https://google.github.io/styleguide/jsguide.html)
+- [js c переводом](https://rostislavdugin.github.io/styleguide/jsguide.html)
+- [html и css](https://google.github.io/styleguide/htmlcssguide.html)
+
+Опыт разработчиков **Airbnb**:
+
+- [js](https://github.com/airbnb/javascript#performance)
+- [js c переводом](https://github.com/leonidlebedev/javascript-airbnb/)
+- [html и css](https://github.com/standard/standard/blob/master/RULES.md)
+
+Рекомендации от разработчиков модуля **JavaScript Standard Style**: 
+
+- [js](https://github.com/standard/standard/blob/master/RULES.md)

package/src/globals.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />