@tetacom/ng-components 1.1.30 → 1.1.31

package/component/date-picker/base-calendar.d.ts

@@ -44,6 +44,7 @@ export declare abstract class BaseCalendar implements OnChanges, OnDestroy {
     };
     getMothName(month: number): any;
     selectDate(date: Date): void;
+    scrollMonth: (e: any, month: number, year: number) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseCalendar, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BaseCalendar, "ng-component", never, {}, {}, never, never, false, never>;
 }

package/docs/accordionDocs.mdx

@@ -0,0 +1,118 @@
+import {Meta} from "@storybook/blocks";
+import AccordionStories from "../src/component/accordion/Accordion.stories";
+
+<Meta of={AccordionStories}/>
+
+<div class='column gap-24'>
+  <h1>Аккордеон</h1>
+  <div class='column'>
+    <p>Аккордеон — это список параметров, которые можно развернуть / свернуть, чтобы отобразить или скрыть
+      дополнительный связанный контент.</p>
+  </div>
+  <h3>Функции</h3>
+  <div class='column'>
+    <p>Аккордеон позволяет пользователю расширить и свернуть разделы контента и тем самым быстро перемещаться по
+      материалам, а также дизайнер может вмещать большие объемы информации в ограниченном пространстве.</p>
+    <p>У элемента есть возможность добавить иконку для уточнения раздела или же кнопку “Дополнительно” для уточнения
+      возможностей аккордеона.</p>
+  </div>
+  <h3>Состояния</h3>
+  <div class='column'>
+    <p>По умолчанию у аккордеона есть 3 состояния: Close, Hover и Open.</p>
+    <p>Аккордеон при наведении визуально выделяется, чтобы человек понимал, что при нажатии на этот элемент что-то
+      произойдет. После нажатия стрелка поворчаивается, показывая, что элемент был успешно развёрнут. При повторном
+      щелчке, стрелка возвращается в исходное положение, а информация сворачивается.</p>
+  </div>
+  <h3>Как пользоваться компонентом</h3>
+  <div class='column'>
+    <p>Для начала нужно создать <code> &lt;teta-accordion&gt;</code>-обертку для аккордеонов и служит для объединения аккордеонов, т.е. среди них может быть открыт только один.</p>
+    <p>Сам аккордеон создается при помощи тега <code> &lt;teta-accordion-item&gt;</code>.</p>
+    <p>Внутрь необходимо передать контент для шапки аккордеона и наполнение аккордеона. Это делается при помощи компонента <code>&lt;teta-accordion-head&gt;</code> с наполнением шапки и директивы <code>tetaAccordionContent</code></p>
+  </div>
+  <h3>Примеры кода</h3>
+    <p><pre><code>&lt;teta-accordion&gt;
+      &nbsp;&nbsp;&lt;teta-accordion-item [viewType]="'brick'"&gt;
+      &nbsp;&nbsp;&nbsp;&lt;teta-accordion-head&gt;Heading 1&lt;/teta-accordion-head&gt;
+      &nbsp;&nbsp;&nbsp;&lt;ng-template tetaAccordionContent&gt;
+      &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3 padding-h-2"&gt;I am the content 1&lt;/div&gt;
+      &nbsp;&nbsp;&nbsp;&lt;/ng-template&gt;
+      &nbsp;&nbsp;&lt;/teta-accordion-item&gt;
+      &nbsp;&nbsp;&lt;teta-accordion-item [viewType]="'rounded'"&gt;
+      &nbsp;&nbsp;&nbsp;&lt;teta-accordion-head&gt;Heading 3&lt;/teta-accordion-head&gt;
+      &nbsp;&nbsp;&nbsp;&lt;ng-template tetaAccordionContent&gt;
+      &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="padding-v-3 padding-h-5"&gt;I am the content 3&lt;/div&gt;
+      &nbsp;&nbsp;&nbsp;&lt;/ng-template&gt;
+      &nbsp;&nbsp;&lt;/teta-accordion-item&gt;
+      &lt;/teta-accordion&gt;</code></pre></p>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <h4>teta-accordion-item</h4>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>viewType</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'rounded'|'circle'|'brick'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство округления компонента.</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>open</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство позволяющее управлять состоянием аккордеона</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>disabled</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство для отключения аккордеона</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <h4>teta-accordion-head</h4>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>showToggle</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство для отображения состояния аккордеона</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/avatarDocs.mdx

@@ -0,0 +1,99 @@
+import {Meta} from "@storybook/blocks";
+import * as  AvatarStories from "../src/component/avatar/avatar.stories";
+
+<Meta of={AvatarStories}/>
+
+<div class='column gap-24'>
+  <h1>Аватар</h1>
+  <div class='column'>
+    <p>Аватар — графическое изображение пользователя, фотография или рисунок. Он нужен, чтобы быстро узнавать
+      пользователя (например, в ветке комментариев), а ещё — чтобы пользователь мог узнать сам себя. Например,
+      проверить, что вошёл в аккаунт под нужным логином.</p>
+    <p>В библиотеке существует два вида аватаров: изображения и цветные буквенные. Также, они различаются по размерам и
+      скруглениям.</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для создания аватара используется <code>teta-avatar</code></p>
+    <p>Аватар нужен в случаях:</p>
+    <ul>
+      <li>Если на странице есть возможность добавить комментарий;</li>
+      <li>Отображение профиля в хедере или же в других компонентах.</li>
+    </ul>
+  </div>
+  <div class='column'>
+    <h3>Скругления и размеры</h3>
+    <div>
+      <p>В основном, в наших продуктах используются круглые аватары (type: round) с размером 28x28.</p>
+    </div>
+  </div>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td  class='text-align-center'>
+          <p>viewType</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'rounded'|'circle'|'brick'</code>
+        </td>
+        <td  class='text-align-center'>
+            <p>Свойство округления компонента.</p>
+        </td>
+      </tr>
+      <tr>
+        <td  class='text-align-center'>
+          <p>size</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'24' | '28' | '32' | '44' | '64' | '128' | '200'</code>
+        </td>
+        <td  class='text-align-center'>
+          <p>Размер компонента</p>
+        </td>
+      </tr>
+      <tr>
+        <td  class='text-align-center'>
+          <p>photo</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string | ArrayBuffer</code>
+        </td>
+        <td  class='text-align-center'>
+          <p>Изображение для фона компонента</p>
+        </td>
+      </tr>
+      <tr>
+        <td  class='text-align-center'>
+          <p>id</p>
+        </td>
+        <td class='text-align-center'>
+          <code>number</code>
+        </td>
+        <td  class='text-align-center'>
+          <p>Свойство, которое отвечает за цвет фона компонента</p>
+        </td>
+      </tr>
+      <tr>
+        <td  class='text-align-center'>
+          <p>name</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string</code>
+        </td>
+        <td  class='text-align-center'>
+          <p>Отображаемый текст</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/badgeDocs.mdx

@@ -0,0 +1,24 @@
+import {Meta} from "@storybook/blocks";
+import BadgeStories from "../src/component/badge/Badge.stories";
+
+<Meta of={BadgeStories}/>
+
+<div class='column gap-24'>
+  <h1>Badge</h1>
+  <div class='column'>
+    <p>Badge — показывает статус объекта, например, им можно показать разные этапы какого-то процесса:</p>
+    <ul>
+      <li>Запланированно</li>
+      <li>В работе</li>
+      <li>Завершено</li>
+    </ul>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>У Badge есть 2 варианта отображения:</p>
+    <ul>
+      <li>Обводка- реализуется добавлением класса <code>badge</code></li>
+      <li>Заливка - необходимо добавить класс <code>badge</code> и <code>badge-"палитра"_filled</code>  (Пример: badge-green_filled)</li>
+    </ul>
+  </div>
+</div>

package/docs/buttonDocs.mdx

@@ -0,0 +1,120 @@
+import {Meta} from "@storybook/blocks";
+import * as   ButtonStories from "../src/component/button/Button.stories";
+
+<Meta of={ButtonStories}/>
+
+<div class='column gap-24'>
+  <h1>Кнопка</h1>
+  <div class='column'>
+    <p>Button (кнопка) — компонент, который призывает пользователя к совершению определенного действия в интерфейсе,
+      например: открыть следующую страницу, заказать товар или войти в свой аккаунт.</p>
+    <p>Основной призыв к действию. Предназначены для выполнения какого-либо действия в системе. </p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>За создание кнопки отвечает компонент</p>
+    <p>Основные правила применения кнопки:</p>
+    <ul>
+      <li>Текст кнопки всегда должен быть с заглавной буквы;</li>
+      <li>Текст на кнопке должен сообщать пользователю, что произойдёт, если он нажмёт на кнопку (например, Сохранить, Добавить и т. п.);</li>
+      <li>Не перенасыщать страницу большим количеством Primary кнопок. Не распологать их рядом друг с другом.</li>
+    </ul>
+  </div>
+  <div class='column'>
+    <h3>Типы кнопок</h3>
+    <div>
+      <p>В системе существуют всего 3 типа кнопок</p>
+      <ul>
+        <li>Primary (основная)</li>
+        <li>Ghost (без фона)</li>
+        <li>Outline (с обводкой)</li>
+      </ul>
+    </div>
+  </div>
+  <div class='column'>
+    <h3>Размер кнопок</h3>
+    <div>
+      <p>Есть 2 размера кнопок — m и l. В основном в проектах используются кнопки размера m. </p>
+    </div>
+  </div>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>viewType</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'rounded'|'circle'|'brick'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство округления компонента.</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>size</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'m' |'l'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Размер кнопки</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>disabled</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Отключает реакцию компонента на клик пользователя</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>palette</p>
+        </td>
+        <td class='text-align-center'>
+          <code>string</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Отвечает за цвет фона кнопки. Принимает в себя название палитры и указывает 50-й оттенок (Пример: вводим yellow- цвет будет color-yellow-50). Работает только при view="primary"</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>view</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'primary' | 'outline' | 'ghost'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство, которое отвечает за тип кнопки</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>square</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Отвечает за форму кнопки</p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/docs/chartDocs.mdx

@@ -0,0 +1,153 @@
+import {Meta} from "@storybook/blocks";
+import ChartStories from '../../chart/src/chart/stories/Chart.stories'
+
+<Meta of={ChartStories}/>
+<div class='column gap-24'>
+  <h1>Компонент 2д графика</h1>
+  <div class='column'>
+    <p>2д график представляет собой двумерное визуальное представление данных на плоскости. Он используется для отображения зависимостей между двумя переменными или для представления информации, которая имеет только два измерения.</p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Для создания 2д графика используется компонент <code>teta-svg-chart</code>. В свойство <code>data</code> необходимо передать объект с типом <code>IChartConfig</code></p>
+    <p>Этот объет включает в себя:</p>
+    <ul>
+      <li><code>noDataText</code> - текст который будет отображаться при отсутствии серий в графике.</li>
+      <li><code>name</code> - имя графика.</li>
+      <li><code>id</code> - внутренний идентификатор графика. </li>
+      <li><code>legend</code> - отвечает за отображение легенды графика. Принимает в себя объект со свойством <code>enabled</code> </li>
+      <li><code>bounds</code> - Добавляет отступ внутри графика. Принимает в себя объект со свойствами <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>. Они ждут числовые значения, которые будут использоваться для добавления соответствующих отступов в px. </li>
+      <li><code>inverted</code> - свойство, которое добавляет инвертацию осей графика.</li>
+      <li><code>height</code> - высота графика </li>
+      <li><code>width</code> - ширина графика </li>
+      <li><code>brush</code> - отвечает за отрисовку выделяемой области на графике. </li>
+      <li><code>zoom</code> - отвечает за зум графика.</li>
+      <li><code>annotations</code> - добавляет дополнительную информацию для точек на графике.</li>
+      <li><code>gridLines</code> - отвечает за отображение сетки графика.</li>
+      <li><code>tooltip</code> - отвечает за отображение туллтипа над точками графика при наведении.</li>
+      <li><code>xAxis</code> - обработка оси X</li>
+      <li><code>yAxis</code> - обработка оси Y</li>
+      <li><code>series</code> - набор данных или набор точек данных, которые отображаются на графике.</li>
+    </ul>
+    <p><code>brush</code> принимает в себя:</p>
+    <ul>
+      <li><code>enable</code> - флаг включен/отключен</li>
+      <li><code>type</code> - тип направления выделения области (x или y)</li>
+      <li><code>from</code> - начало отрисовки области</li>
+      <li><code>to</code> - окончание отрисовки области</li>
+      <li><code>min</code> - минимальное значение</li>
+      <li><code>max</code> - максимальное значение</li>
+    </ul>
+    <p><code>zoom</code> принимает в себя:</p>
+    <ul>
+      <li><code>enable</code> - флаг включен/отключен</li>
+      <li><code>type</code> - тип зума области (x или y)</li>
+      <li><code>syncChannel</code> - канал синхронизации нескольких графиков.</li>
+      <li><code>min</code> - минимальное значение</li>
+      <li><code>max</code> - максимальное значение</li>
+      <li><code>limitTranslateByData</code> - ограничение перемещения зума по данным</li>
+      <li><code>limitZoomByData</code> - ограничение приближения по данным</li>
+      <li><code>zoomBehavior</code> - тип поведения зума (onWheel , onWheel + ctrl)</li>
+      <li><code>wheelDelta</code> - коэфициент зума</li>
+      <li><code>minTranslate</code> - минимальная точка перемещения</li>
+      <li><code>maxTranslate</code> - максимальная точка перемещения</li>
+      <li><code>wheelFilter</code> - принимает функцию, которая ждет будет отдавать true/false, для реагирование зум при зажатых клавишах (допустим если требуется сделать зум только при зажатом shift)</li>
+    </ul>
+    <p><code>tooltip</code> принимает в себя:</p>
+    <ul>
+      <li><code>enable</code> - флаг включен/отключен</li>
+      <li><code>showMarkers</code> - тип зума области (x или y)</li>
+      <li><code>showLine</code> - канал синхронизации нескольких графиков.</li>
+      <li><code>showCrosshair</code> - минимальное значение</li>
+      <li><code>tracking</code> - максимальное значение</li>
+      <li><code>template</code> - ограничение перемещения зума по данным</li>
+      <li><code>format</code> - ограничение приближения по данным</li>
+      <li><code>padding</code> - тип поведения зума (onWheel , onWheel + ctrl)</li>
+   </ul>
+    <p><code>annotations</code> принимает в себя массив:</p>
+    <ul>
+      <li><code>id</code> - индентификатор</li>
+      <li><code>point</code> - позиция аннотации</li>
+      <li><code>draggable</code> - возможность двигать аннотацию</li>
+      <li><code>xAxisIndex</code> - индекс оси Х, к которой привязана аннотация</li>
+      <li><code>yAxisIndex</code> - индекс оси Y, к которой привязана аннотация</li>
+      <li><code>dx</code> - смешение аннотации по X относительно точки в px</li>
+      <li><code>dy</code> - смешение аннотации по Y относительно точки в px</li>
+      <li><code>className</code> - css класс, который применяется к аннотации</li>
+      <li><code>style</code> - css стиль, который применяется к аннотации</li>
+      <li><code>data</code> - дополнительные данные</li>
+    </ul>
+    <p><code>gridLines</code> принимает в себя:</p>
+    <ul>
+      <li><code>enable</code> - флаг включен/отключен</li>
+      <li><code>showX</code> - флаг включен/отключен X</li>
+      <li><code>showY</code> -флаг включен/отключен Y</li>
+      <li><code>x</code> - принимает объект со свойством <code>ticks</code>, которое означает количество линий по X.</li>
+      <li><code>y</code> - принимает объект со свойством <code>ticks</code>, которое означает количество линий по Y.</li>
+    </ul>
+    <p><code>xAxis</code> и <code>yAxis</code> принимают в себя массив:</p>
+    <ul>
+      <li><code>title</code> - название оси,которое выводится левее нее</li>
+      <li><code>min</code> - минимальное значение оси</li>
+      <li><code>max</code> - максимальное значение оси</li>
+      <li><code>scaleType</code> - тип значений на оси</li>
+      <li><code>visible</code> - флаг отображения оси</li>
+      <li><code>tickFormat</code> - коллбек для форматирования текста на оси.</li>
+      <li><code>inverted</code> - инверсия оси</li>
+      <li><code>opposite</code> - смена положения оси на противоположную сторону</li>
+      <li><code>niceTicks</code> - флаг округления чисел на осях</li>
+    </ul>
+    <p><code>series</code> принимают в себя массив:</p>
+    <ul>
+      <li><code>id</code> - индентификатор серии</li>
+      <li><code>color</code> - цвет серии</li>
+      <li><code>type</code> - тип серии</li>
+      <li><code>xAxisIndex</code> - индетификатор, по которому выбирается ось в массиве X и серии рисуются по ней.</li>
+      <li><code>yAxisIndex</code> - индетификатор, по которому выбирается ось в массиве Y и серии рисуются по ней.</li>
+      <li><code>fillType</code> - тип заливки серии </li>
+      <li><code>fillDirection</code> - направление заливки</li>
+      <li><code>showInLegend</code> - флаг отображения в легенде чарта.</li>
+      <li><code>clipPointsDirection</code> - отключение отрисовки точек за пределами области видимости.</li>
+      <li><code>visible</code> - отображение серии</li>
+      <li><code>name</code> - название серии</li>
+      <li><code>component</code> - свойство для добавления кастомной серии.</li>
+      <li><code>data</code> - данные, на основе которых формируется серия</li>
+    </ul>
+    <p>В зависимости от типа серии, свойсво <code>data</code> принимает разные типы данных.</p>
+    <p>В шаблонных сериях объект <code>data</code> ждет свойсва <code>x</code> и <code>y</code>. В зависимости от типа серии он может ждать: x1, y1, iconId,marker,text,color</p>
+    <p>Свойства xAxis,yAxis можно не вводить, при этом они будут генерироваться за счет свойств x,y из свойства data объекта series.</p>
+    <p>Для создания кастомной серии необходимо создать компонент, в свойстве <code>selector</code> декоратора <code>Component</code> обернуть название компонента тегом svg (<code>selector:"svg:svg[app-component]"</code>).</p>
+    <p>Для того чтобы определять положение точек, объектов на графике , необходимо из <code>scaleService</code> взять скейлы.</p>
+  </div>
+  <h3>Пример кода кастомной серии</h3>
+  <div>
+    <p>
+      <pre><code>@Component(&#123;
+        &nbsp;&nbsp;selector: 'svg:svg[teta-custom-series]',
+        &nbsp;&nbsp;templateUrl: './custom-series.component.html',
+        &nbsp;&nbsp;styleUrls: ['./custom-series.component.scss'],
+        &nbsp;&nbsp;changeDetection: ChangeDetectionStrategy.OnPush,
+        &nbsp;&#125;)
+        &nbsp;private _alive = true;
+        &nbsp;public x: Observable&lt;any&gt;;
+        &nbsp;public y: Observable&lt;any&gt;;
+        &nbsp;export class CustomSeriesComponent extends SeriesBaseComponent&lt;BasePoint&gt; implements OnInit,OnDestroy &#123;
+        &nbsp;&nbsp;public x: Observable&lt;any&gt;;
+        &nbsp;&nbsp;public x: Observable&lt;any&gt;;
+        &nbsp;&nbsp;constructor(override svc: Chart3dService, override cdr: ChangeDetectorRef,scaleService: ScaleService,zoomService: ZoomService,element: ElementRef) &#123;
+        &nbsp;&nbsp;&nbsp;super(svc, cdr, scaleService, zoomService, element);
+        &nbsp;&nbsp;&#125;
+        &nbsp;&nbsp;override ngOnInit(): void &#123;
+        &nbsp;&nbsp;&nbsp;this.x = this.scaleService.scales.pipe(
+        &nbsp;&nbsp;&nbsp;&nbsp;takeWhile(() => this.&#95;alive),
+        &nbsp;&nbsp;&nbsp;&nbsp;map(&#95; => _.x.get(this.series.xAxisIndex)?.scale)
+        &nbsp;&nbsp;&nbsp;&#125;);
+        &nbsp;&nbsp;&#125;
+        &nbsp;&nbsp; ngOnDestroy(): void &#123;
+        &nbsp;&nbsp;&nbsp;this._alive=false
+        &nbsp;&nbsp;&#125;
+        &nbsp;&#125;</code></pre>
+    </p>
+
+  </div>
+</div>

package/docs/checkboxDocs.mdx

@@ -0,0 +1,108 @@
+import {Meta} from "@storybook/blocks";
+import checkboxStories from "../src/component/checkbox/Checkbox.stories";
+
+<Meta of={checkboxStories}/>
+
+<div class='column gap-24'>
+  <h1>Чекбоксы</h1>
+  <div class='column'>
+    <p>Checkbox (чекбокс) — компонент, который позволяет пользователю выбрать опцию и может находится в состояниях
+      «выбран» (True) и «не выбран» (False).</p>
+    <p>Основной призыв к действию. Предназначены для выполнения какого-либо действия в системе. </p>
+  </div>
+  <h3>Как использовать</h3>
+  <div class='column'>
+    <p>Чекбоксы используются когда на странице есть список опций, из которых пользователь может выбрать любое
+      количество. В основном, чекбоксы не зависят друг от друга.</p>
+    <p>Не путать с Toggle, так как если нужно переключить режим, выбрать тему или же сделать какое-то внушительное
+      изменение в интерфейсе, лучше использовать его.</p>
+  </div>
+  <div class='column'>
+    <h3>Состояние выбора чекбоксов</h3>
+    <div>
+      <p>При клике пользователь переводит чекбокс из состояния False в Active. Undefined — неопределенное состояние и
+        используется только у родительских чекбоксов.</p>
+      <p>По дефолту включены состояния чекбокса <code>true</code> и <code>false</code>. Для включения состояния undefined нужно передать свойства <code>binary</code> и <code>allowNull</code> со значением <code>true</code></p>
+    </div>
+  </div>
+  <div class='column'>
+    <h3>Свойства</h3>
+    <table>
+      <thead>
+      <tr>
+        <th>Свойство</th>
+        <th>Tип</th>
+        <th>Описание</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td class='text-align-center'>
+          <p>viewType</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'rounded'|'circle'|'brick'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство округления компонента.</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>disabled</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Отключает реакцию компонента на клик пользователя</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>noLabel</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство, которое отображает/скрывает блок текста в чекбоксе</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>labelPosition</p>
+        </td>
+        <td class='text-align-center'>
+          <code>'left' | 'right'</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Позиция блока текста относительно чекбокса</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>allowNull</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство отвечающее за реагирование на null</p>
+        </td>
+      </tr>
+      <tr>
+        <td class='text-align-center'>
+          <p>binary</p>
+        </td>
+        <td class='text-align-center'>
+          <code>boolean</code>
+        </td>
+        <td class='text-align-center'>
+          <p>Свойство отвечающее за тип вводимых данных. Если <code>boolean</code>, то свойство должно быть <code>true</code></p>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>