@itcase/ui 1.8.27 → 1.8.30

package/dist/stories/DatePickerOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DatePickerStories from '../stories/DatePicker.stories'
+
+<Meta title="Molecules / DatePicker / Overview" />
+
+# DatePicker
+
+`DatePicker` — это календарь, который используется для выбора даты, либо диапазона дат.
+
+<Story of={DatePickerStories.Date} />
+

package/dist/stories/DatePickerPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DatePickerStories from '../stories/DatePicker.stories'
+
+<Meta title="Molecules / DatePicker / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DatePickerStories.Date} />
+<Controls of={DatePickerStories.Date} />

package/dist/stories/DividerOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DividerStories from '../stories/DividerDemo.stories'
+
+<Meta title="Atoms / Divider / Overview" />
+
+# Divider
+
+`Divider` — это горизонтальная или вертикальная полоса, которая является блочным элементом. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
+
+<Story of={DividerStories.Demo} />

package/dist/stories/DividerPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DividerStories from '../stories/DividerDemo.stories'
+
+<Meta title="Atoms / Divider / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DividerStories.Demo} />
+<Controls of={DividerStories.Demo} />

package/dist/stories/DotOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DotStories from '../stories/Dot.stories.tsx'
+
+<Meta title="Atoms / Dot / Overview" />
+
+# Dot
+
+`Dot` — используется для отображения, например, статуса
+
+<Story of={DotStories.Accent} />

package/dist/stories/DotPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DotStories from '../stories/Dot.stories.tsx'
+
+<Meta title="Atoms / Dot / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DotStories.Accent} />
+<Controls of={DotStories.Accent} />

package/dist/stories/DrawerOverview.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DrawerStories from '../stories/Drawer.stories.tsx'
+
+<Meta title="Molecules / Drawer / Overview" />
+
+# Drawer
+
+`Drawer` - это компонент в виде панели, которая выдвигается от края экрана.
+Обычно он используется для выполнения задачи или просмотра некоторых деталей,
+не покидая текущую страницу. Пользователь не взаимодействует с представлением приложения,
+пока Drawer открыт, создавая, таким образом, автономный интерфейс.
+
+<Story of={DrawerStories.Default} />

package/dist/stories/DrawerPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DrawerStories from '../stories/Drawer.stories.tsx'
+
+<Meta title="Molecules / Drawer / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DrawerStories.Default} />
+<Controls of={DrawerStories.Default} />

package/dist/stories/DropdownOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as DropdownStories from '../stories/DropdownDemo.stories'
+
+<Meta title="Molecules / Dropdown / Overview" />
+
+# Dropdown
+
+`Dropdown` отображает список вариантов для выбора.
+
+<Story of={DropdownStories.Demo} />

package/dist/stories/DropdownPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as DropdownStories from '../stories/DropdownDemo.stories'
+
+<Meta title="Molecules / Dropdown / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DropdownStories.Demo} />
+<Controls of={DropdownStories.Demo} />

package/dist/stories/FlexAlignItems.mdx

@@ -0,0 +1,73 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AlignItemsStories from '../stories/FlexAlignItems.stories.tsx'
+
+<Meta title="Layout / Flex / AlignItems" />
+
+# AlignItems
+
+Свойство `alignItems` выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
+
+```js
+<Flex alignItems="...">...</Flex>
+```
+
+## Значения
+
+- `stretch` — Элементы растянутся таким образом, чтобы занять всё доступное пространство контейнера
+- `flexStart` — Элементы будут выравнены в начале поперечной оси контейнера
+- `flexEnd` — Элементы будут выравнены в конце поперечной оси контейнера
+- `center` — Элементы будут выравнены по линии поперечной оси
+- `baseline` — Элементы будут выравнены по их базовой линии
+
+# Примеры использования
+
+### stretch
+
+Значение по умоланию. Элементы растянутся таким образом, чтобы занять всё доступное пространство контейнера
+
+```js
+<Flex alignItems="stretch">...</Flex>
+```
+
+<Canvas of={AlignItemsStories.Stretch} />
+
+### flexStart
+
+Элементы будут выравнены в начале поперечной оси контейнера
+
+```js
+<Flex alignItems="flexStart">...</Flex>
+```
+
+<Canvas of={AlignItemsStories.FlexStart} />
+
+### flexEnd
+
+Элементы будут выравнены в конце поперечной оси контейнера
+
+```js
+<Flex alignItems="flexEnd">...</Flex>
+```
+
+<Canvas of={AlignItemsStories.FlexEnd} />
+
+### center
+
+Элементы будут выравнены по линии поперечной оси
+
+```js
+<Flex alignItems="center">...</Flex>
+```
+
+<Canvas of={AlignItemsStories.Center} />
+
+### baseline
+
+Элементы будут выравнены по их базовой линии
+
+```js
+<Flex alignItems="baseline">...</Flex>
+```
+
+<Canvas of={AlignItemsStories.Baseline} />

package/dist/stories/FlexAlignSelf.mdx

@@ -0,0 +1,84 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as AlignSelfStories from '../stories/FlexAlignSelf.stories.tsx'
+
+<Meta title="Layout / Flex / AlignSelf" />
+
+# AlignSelf
+
+Свойство `alignSelf` устанавливает выравнивание отдельного `FlexItem` вдоль поперечной оси, переопределяя значение свойства `alignItems`.
+
+```js
+<FlexItem alignSelf="...">...</FlexItem>
+```
+
+## Значения
+
+- `auto` — Вычисляет значение `alignItems` родительского объекта
+- `stretch` — Элемент растянется таким образом, чтобы занять всё доступное пространство контейнера
+- `flexStart` — Элемент будет располагаться в начале поперечной оси контейнера
+- `flexEnd` — Элемент будет располагаться в конце поперечной оси контейнера
+- `center` — Элемент будет располагаться по центральной линии на поперечной оси
+- `baseline` — Элемент выравнивается по базовой линии контейнера
+
+# Примеры использования
+
+### auto
+
+Вычисляет значение `alignItems` родительского объекта
+
+```js
+<FlexItem alignSelf="auto">...</FlexItem>
+```
+
+<Canvas of={AlignSelfStories.Auto} />
+
+### stretch
+
+Элемент растянется таким образом, чтобы занять всё доступное пространство контейнера
+
+```js
+<FlexItem alignSelf="stretch">...</FlexItem>
+```
+
+<Canvas of={AlignSelfStories.Stretch} />
+
+### flexStart
+
+Элемент будет располагаться в начале поперечной оси контейнера
+
+```js
+<FlexItem alignSelf="flexStart">...</FlexItem>
+```
+
+<Canvas of={AlignSelfStories.FlexStart} />
+
+### flexEnd
+
+Элемент будет располагаться в конце поперечной оси контейнера
+
+```js
+<FlexItem alignSelf="flexEnd">...</FlexItem>
+```
+
+<Canvas of={AlignSelfStories.FlexEnd} />
+
+### center
+
+Элемент будет располагаться по центральной линии на поперечной оси
+
+```js
+<FlexItem alignSelf="center">...</FlexItem>
+```
+
+<Canvas of={AlignSelfStories.Center} />
+
+### baseline
+
+Элемент выравнивается по базовой линии контейнера
+
+```js
+<FlexItem alignSelf="baseline">...</FlexItem>
+```
+
+<Canvas of={AlignSelfStories.Baseline} />

package/dist/stories/FlexDirection.mdx

@@ -0,0 +1,106 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DirectionStories from '../stories/FlexDirection.stories.tsx'
+
+<Meta title="Layout / Flex / Direction" />
+
+# Direction
+
+Свойство `direction` указывает, как элементы располагаются в контейнере по главной оси и направлению (обычном или обратном).
+
+```js
+<Flex direction="...">...</Flex>
+```
+
+## Значения
+
+- `row` — Элементы будут располагаться в строку (горизонтально)
+- `rowReverse` — Элементы будут располагаться в строку (горизонтально), но в обратном направлении
+- `column` — Элементы будут располагаться в строку (вертикально)
+- `columnReverse` — Элементы будут располагаться в строку (вертикально), но в обратном направлении
+- `horizontal` — Элементы будут располагаться в строку (горизонтально)
+- `horizontalReverse` — Элементы будут располагаться в строку (горизонтально), но в обратном направлении
+- `vertical` — Элементы будут располагаться в строку (вертикально)
+- `verticalReverse` — Элементы будут располагаться в строку (вертикально), но в обратном направлении
+
+# Примеры использования
+
+### row
+
+Элементы будут располагаться в строку (горизонтально)
+
+```js
+<Flex direction="row">...</Flex>
+```
+
+<Canvas of={DirectionStories.Row} />
+
+### rowReverse
+
+Элементы будут располагаться в строку (горизонтально), но в обратном направлении
+
+```js
+<Flex direction="rowReverse">...</Flex>
+```
+
+<Canvas of={DirectionStories.RowReverse} />
+
+### column
+
+Элементы будут располагаться в строку (вертикально)
+
+```js
+<Flex direction="column">...</Flex>
+```
+
+<Canvas of={DirectionStories.Column} />
+
+### columnReverse
+
+Элементы будут располагаться в строку (вертикально), но в обратном направлении
+
+```js
+<Flex direction="columnReverse">...</Flex>
+```
+
+<Canvas of={DirectionStories.ColumnReverse} />
+
+### horizontal
+
+Элементы будут располагаться в строку (горизонтально)
+
+```js
+<Flex direction="horizontal">...</Flex>
+```
+
+<Canvas of={DirectionStories.Horizontal} />
+
+### horizontalReverse
+
+Элементы будут располагаться в строку (горизонтально), но в обратном направлении
+
+```js
+<Flex direction="horizontalReverse">...</Flex>
+```
+
+<Canvas of={DirectionStories.HorizontalReverse} />
+
+### vertical
+
+Элементы будут располагаться в строку (вертикально)
+
+```js
+<Flex direction="vertical">...</Flex>
+```
+
+<Canvas of={DirectionStories.Vertical} />
+
+### verticalReverse
+
+Элементы будут располагаться в строку (вертикально), но в обратном направлении
+
+```js
+<Flex direction="verticalReverse">...</Flex>
+```
+
+<Canvas of={DirectionStories.VerticalReverse} />

package/dist/stories/FlexJustifyContent.mdx

@@ -0,0 +1,87 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as JustifyContentStories from '../stories/FlexJustifyContent.stories.tsx'
+
+<Meta title="Layout / Flex / JustifyContent" />
+
+# JustifyContent
+
+Свойство `justifyContent` определяет, как браузер распределяет пространство вокруг флекс-элементов
+вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические
+отступы, за исключением ситуации, когда по крайней мере у одного элемента grow больше нуля.
+При этом не остаётся никакого свободного пространства для манипулирования.
+
+```js
+<Flex justifyContent="...">...</Flex>
+```
+
+## Значения
+
+- `flexStart` — Значение по умолчанию. Элементы прижаты к началу строки
+- `flexEnd` — Элементы прижаты к концу строки
+- `center` — Элементы выравниваются по центру строки
+- `spaceBetween` — Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера
+- `spaceAround` — Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами
+- `spaceEvenly` — Элементы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым
+
+# Примеры использования
+
+### flexStart
+
+Значение по умолчанию. Элементы прижаты к началу строки
+
+```js
+<Flex justifyContent="flexStart">...</Flex>
+```
+
+<Canvas of={JustifyContentStories.FlexStart} />
+
+### flexEnd
+
+Элементы прижаты к концу строки
+
+```js
+<Flex justifyContent="flexEnd">...</Flex>
+```
+
+<Canvas of={JustifyContentStories.FlexEnd} />
+
+### center
+
+Элементы выравниваются по центру строки
+
+```js
+<Flex justifyContent="center">...</Flex>
+```
+
+<Canvas of={JustifyContentStories.Center} />
+
+### spaceBetween
+
+Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера
+
+```js
+<Flex justifyContent="spaceBetween">...</Flex>
+```
+
+<Canvas of={JustifyContentStories.SpaceBetween} />
+
+### spaceAround
+
+Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами
+
+```js
+<Flex justifyContent="spaceAround">...</Flex>
+```
+
+<Canvas of={JustifyContentStories.SpaceAround} />
+
+### spaceEvenly
+
+Элементы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым
+
+```js
+<Flex justifyContent="spaceEvenly">...</Flex>
+```
+
+<Canvas of={JustifyContentStories.SpaceEvenly} />

package/dist/stories/FlexOverview.mdx

@@ -0,0 +1,48 @@
+import { ArgTypes, Meta, Story } from '@storybook/blocks'
+
+import * as Flex from '../stories/Flex.stories.tsx'
+
+<Meta title="Layout / Flex / Overview" />
+
+# Flex
+
+Набор компонентов реализующий `CSS Flexible Box Layout`
+
+- [Спецификация](https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Примеры использования](https://yoksel.github.io/flex-cheatsheet/)
+
+## Компоненты
+
+- `Flex` — контейнер содержащий вложенные компоненты `FlexItem`
+- `FlexItem` — элемент контейнера `Flex`
+
+Пример использования
+
+```jsx
+<Flex direction="horizontal" flex="1" maxWidthWrapper="100%">
+  <FlexItem maxWidth="260px" fill="infoPrimary" padding="20">
+    <Text size="xl" textColor="infoTextPrimary">
+      Menu
+    </Text>
+  </FlexItem>
+  <FlexItem direction="vertical" grow={1}>
+    <Group fill="accentPrimary" padding="20">
+      <Text size="xl" textColor="accentTextPrimary">
+        Header
+      </Text>
+    </Group>
+    <Group fill="primaryPrimary" padding="20">
+      <Text size="xl" textColor="primaryTextPrimary">
+        Component
+      </Text>
+    </Group>
+    <Group fill="secondaryPrimary" padding="20">
+      <Text size="xl" textColor="secondaryTextPrimary">
+        Footer
+      </Text>
+    </Group>
+  </FlexItem>
+</Flex>
+```
+
+<Story of={Flex.Default} />

package/dist/stories/FlexPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as FlexStories from '../stories/FlexDirection.stories.tsx'
+
+<Meta title="Layout / Flex / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={FlexStories.Row} />
+<Controls of={FlexStories.Row} />

package/dist/stories/FlexWrap.mdx

@@ -0,0 +1,60 @@
+import { ArgTypes, Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as WrapStories from '../stories/FlexWrap.stories.tsx'
+
+<Meta title="Layout / Flex / Wrap" />
+
+# Wrap
+
+Свойство `wrap` указывает, следует ли элементам располагаться в одну строку или можно занять несколько строк.
+Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
+
+```js
+<Flex wrap="...">...</Flex>
+```
+
+## Значения
+
+- `nowrap` — значение по умолчанию. Элементы выстраиваются в одну линию без переноса
+- `wrap` — элементы выстраиваются в несколько строк, их направление задаётся свойством `direction` по умолчанию `horizontal`
+- `wrapReverse` — элементы выстраиваются в несколько строк, в направлении, противоположном `direction` по умолчанию `horizontal`
+
+# Примеры использования
+
+### nowrap
+
+Значение по умолчанию. Элементы выстраиваются в одну линию
+
+```js
+<Flex wrap="nowrap">...</Flex>
+```
+
+<Canvas of={WrapStories.NoWrap} />
+
+### wrap
+
+Элементы выстраиваются в несколько строк, их направление задаётся свойством `direction`
+
+```js
+<Flex wrap="wrap">...</Flex>
+```
+
+<Canvas of={WrapStories.Wrap} />
+
+### wrapReverse
+
+Элементы выстраиваются в несколько строк, в направлении, противоположном `direction`
+
+```js
+<Flex wrap="wrapReverse">...</Flex>
+```
+
+<Canvas of={WrapStories.WrapReverse} />
+
+```js
+<Flex wrap="wrapReverse" direction="vertical">
+  ...
+</Flex>
+```
+
+<Canvas of={WrapStories.WrapVerticalReverse} />

package/dist/stories/GridOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as GridStories from '../stories/Grid.stories.tsx'
+
+<Meta title="Layout / Grid / Overview" />
+
+# Grid
+
+`Grid` - это набор горизонтальных и вертикальных линий, создающих шаблон. Они помогают создавать элементы не меняющие ширину
+при переходе от страницы к странице, обеспечивая большую согласованность на наших сайтах.
+
+<Story of={GridStories.Regular} />

package/dist/stories/GridPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as GridStories from '../stories/Grid.stories.tsx'
+
+<Meta title="Layout / Grid / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={GridStories.Regular} />
+<Controls of={GridStories.Regular} />

package/dist/stories/GroupOverview.mdx

@@ -0,0 +1,22 @@
+import { ArgTypes, Meta, Story } from '@storybook/blocks'
+
+import * as GroupStories from '../stories/Direction.stories.tsx'
+
+<Meta title="Layout / Group / Overview" />
+
+# Group
+
+`Group` - группа элементов, текстов, блоков и таких же групп.
+
+## Cвойства
+
+- `alignItems`
+- `alignSelf`
+- `columns`
+- `direction`
+- `justyfyContent`
+- `wrap`
+
+<ArgTypes of={GroupStories} />
+
+<Story of={GroupStories.Row} />

package/dist/stories/GroupPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+
+import * as GroupStories from '../stories/Direction.stories.tsx'
+
+<Meta title="Layout / Group / Playground" />
+
+# Playground
+
+<Canvas of={GroupStories.Row} />
+<Controls of={GroupStories.Row} />

package/dist/stories/HTMLContentOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as HTMLContentStories from '../stories/HTMLContent.stories'
+
+<Meta title="Components / HTMLContent / Overview" />
+
+# HTMLContent
+
+`HTMLContent` — это контейнер, который рендерит html контент из строки через `dangerouslySetInnerHTML`
+
+<Story of={HTMLContentStories.Demo} />