@itcase/ui-web 1.9.77

package/dist/stories/DropdownPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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/DropzoneOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DropzoneStories from '../stories/DropzoneDemo.stories.tsx'
+
+<Meta title="Molecules / Dropzone / Overview" />
+
+# Dropzone
+
+`Dropzone` — компонент, позволяющий загружать изображения путем перетаскивания их в область компонента или клика на сам компонент.
+
+<Story of={DropzoneStories.Default} />

package/dist/stories/DropzonePlayground.mdx

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

package/dist/stories/FlexAlignContent.mdx

@@ -0,0 +1,85 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks'
+
+import * as AlignContentStories from '../stories/FlexAlignContent.stories.tsx'
+
+<Meta title="Layout / Flex / AlignContent" />
+
+# AlignContent
+
+Свойство `alignContent` распределяет пространство между и вокруг элементов вдоль поперечной оси контейнера.
+
+```js
+<Flex alignContent="...">...</Flex>
+```
+
+## Значения
+
+- `flexStart` — Элементы будут расположены вплотную друг к другу, в начале поперечной оси
+- `flexEnd` — Элементы будут расположены вплотную друг к другу, начиная с конца поперечной оси
+- `center` — Элементы будут расположены по центру контейнера
+- `spaceBetween` — Элементы будут равномерно распределяться в контейнере и расстояние между ними одинаково
+- `spaceAround` — Элементы будут расположены таким образом, чтобы пространство между двумя соседними элементами было одинаковым. Пустое пространство перед первым элементом и после последнего равно половине пространства между двумя соседними элементами
+- `stretch` — Элементы равномерно растягиваются, заполняя свободное пространство
+
+# Примеры использования
+
+### flexStart
+
+Элементы будут расположены вплотную друг к другу, в начале поперечной оси
+
+```js
+<Flex alignContent="flexStart">...</Flex>
+```
+
+<Canvas of={AlignContentStories.FlexStart} />
+
+### flexEnd
+
+Элементы будут расположены вплотную друг к другу, начиная с конца поперечной оси
+
+```js
+<Flex alignContent="flexEnd">...</Flex>
+```
+
+<Canvas of={AlignContentStories.FlexEnd} />
+
+### center
+
+Элементы будут расположены по центру контейнера
+
+```js
+<Flex alignContent="center">...</Flex>
+```
+
+<Canvas of={AlignContentStories.Center} />
+
+### spaceBetween
+
+Элементы будут равномерно распределяться в контейнере и расстояние между ними одинаково
+
+```js
+<Flex alignContent="spaceBetween">...</Flex>
+```
+
+<Canvas of={AlignContentStories.SpaceBetween} />
+
+### spaceAround
+
+Элементы будут расположены таким образом, чтобы пространство между двумя соседними элементами было одинаковым.
+Пустое пространство перед первым элементом и после последнего равно половине пространства между двумя соседними элементами
+
+```js
+<Flex alignContent="spaceAround">...</Flex>
+```
+
+<Canvas of={AlignContentStories.SpaceAround} />
+
+### stretch
+
+Элементы равномерно растягиваются, заполняя свободное пространство
+
+```js
+<Flex alignContent="stretch">...</Flex>
+```
+
+<Canvas of={AlignContentStories.Stretch} />

package/dist/stories/FlexAlignItems.mdx

@@ -0,0 +1,73 @@
+import { Canvas, Meta } from '@storybook/addon-docs/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/addon-docs/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/addon-docs/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/FlexGrow.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks'
+
+import * as GrowStories from '../stories/FlexGrow.stories.tsx'
+
+<Meta title="Layout / Flex / Grow" />
+
+# Grow
+
+Свойство `grow` определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу. Отрицательное значение не валидно.
+
+```js
+<FlexItem grow="...">...</FlexItem>
+```
+
+## Значения
+
+- `0` — Значение по умолчанию. Элемент займет нужное пространство, не больше своей ширины
+- `1` — Элемент займет все свободное оставшееся пространство
+
+# Примеры использования
+
+### Значение 0
+
+Значение по умолчанию. Элемент займет нужное пространство, не больше своей ширины
+
+```js
+<FlexItem grow="0">...</FlexItem>
+```
+
+<Canvas of={GrowStories.Regular} />
+
+### Значение 1
+
+Элемент займет все свободное оставшееся пространство
+
+```js
+<FlexItem grow="1">...</FlexItem>
+```
+
+<Canvas of={GrowStories.One} />

package/dist/stories/FlexJustifyContent.mdx

@@ -0,0 +1,87 @@
+import { Canvas, Meta } from '@storybook/addon-docs/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/FlexOrder.mdx

@@ -0,0 +1,52 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks'
+
+import * as OrderStories from '../stories/FlexOrder.stories.tsx'
+
+<Meta title="Layout / Flex / Order" />
+
+# Order
+
+Свойство `order` определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему.
+При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
+
+```js
+<FlexItem order="...">...</FlexItem>
+```
+
+## Значения
+
+- `-1` — Элемент выведется первым
+- `0` — Значение по умолчанию. Элемент будет располагаться в том порядке, в каком появляется в исходном коде
+- `1` — Элемент выведется последним
+
+# Примеры использования
+
+### Значение -1
+
+Элемент выведется первым
+
+```js
+<FlexItem order="-1">...</FlexItem>
+```
+
+<Canvas of={OrderStories.First} />
+
+### Значение 0
+
+Значение по умолчанию. Элемент будет располагаться в том порядке, в каком появляется в исходном коде
+
+```js
+<FlexItem order="0">...</FlexItem>
+```
+
+<Canvas of={OrderStories.Regular} />
+
+### Значение 1
+
+Элемент выведется последним
+
+```js
+<FlexItem order="1">...</FlexItem>
+```
+
+<Canvas of={OrderStories.Last} />

package/dist/stories/FlexOverview.mdx

@@ -0,0 +1,48 @@
+import { ArgTypes, Meta, Story } from '@storybook/addon-docs/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="specialPrimary" padding="20">
+      <Text size="xl" textColor="specialTextPrimary">
+        Component
+      </Text>
+    </Group>
+    <Group fill="extraPrimary" padding="20">
+      <Text size="xl" textColor="extraTextPrimary">
+        Footer
+      </Text>
+    </Group>
+  </FlexItem>
+</Flex>
+```
+
+<Story of={Flex.Default} />

package/dist/stories/FlexPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/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} />