@itcase/ui 1.2.19 → 1.2.20

package/dist/stories/Columns.mdx

@@ -0,0 +1,51 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as ColumnsStories from './Columns.stories.js'
+
+<Meta title="Layout / Group / Columns" />
+
+# Columns
+
+Свойство `columns` устанавливает количество столбцов, которые будут использоваться при отрисовке содержимого элемента.
+
+```js
+<Group columns="...">...</Group>
+```
+
+## Значения
+
+- `2` — Элементы будут располагаться в две колонки
+- `3` — Элементы будут располагаться в три колонки
+- `5` — Элементы будут располагаться в пять колонок
+
+# Примеры использования
+
+### Значение 2
+
+Элементы будут располагаться в две колонки
+
+```js
+<Group columns="2">...</Group>
+```
+
+<Canvas of={ColumnsStories.TwoColumns} />
+
+### Значение 3
+
+Элементы будут располагаться в три колонки
+
+```js
+<Group columns="3">...</Group>
+```
+
+<Canvas of={ColumnsStories.ThreeColumns} />
+
+### Значение 5
+
+Элементы будут располагаться в пять колонок
+
+```js
+<Group columns="5">...</Group>
+```
+
+<Canvas of={ColumnsStories.FiveColumns} />

package/dist/stories/Columns.stories.js

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Group,
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      height={args.height}
+      fill={args.fill}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      columns={args.columns}
+      direction={args.direction}
+      gap={args.gap}
+    >
+      <Group height="60" fill="accentPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </Group>
+      <Group height="60" fill="primaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          2
+        </Text>
+      </Group>
+      <Group height="60" fill="secondaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          3
+        </Text>
+      </Group>
+      <Group height="60" fill="infoPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          4
+        </Text>
+      </Group>
+      <Group height="60" fill="surfaceQuaternary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          5
+        </Text>
+      </Group>
+    </Group>
+  ),
+  title: 'Layout / Group / Variants / Columns',
+}
+
+const Default = {
+  width: '500',
+  padding: '20',
+  gap: 10,
+  borderColor: 'surfaceBorderPrimary',
+  fill: 'surfacePrimary',
+}
+
+export const TwoColumns = {
+  args: {
+    ...Default.args,
+    columns: 2,
+  },
+}
+
+export const ThreeColumns = {
+  args: {
+    ...Default.args,
+    columns: 3,
+  },
+}
+
+export const FiveColumns = {
+  args: {
+    ...Default.args,
+    columns: 5,
+  },
+}

package/dist/stories/DatePicker.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DatePickerStories from './DatePicker.stories.js'
+
+<Meta of={DatePickerStories} />
+
+# DatePicker
+
+## Date (Простой календарь с текущим месяцем)
+
+<Canvas sourceState="shown" of={DatePickerStories.Date} layout="fullscreen" />
+
+## ClearIcon (Простой календарь с текущим месяцем и кнопкой "очистить")
+
+<Canvas sourceState="shown" of={DatePickerStories.ClearIcon} layout="fullscreen" />
+
+## ClearLabel (Простой календарь с текущим месяцем и текстом "очистить")
+
+<Canvas sourceState="shown" of={DatePickerStories.ClearLabel} layout="fullscreen" />
+
+## DateTime (Календарь с текущим месяцем и выбором времени)
+
+<Canvas sourceState="shown" of={DatePickerStories.DateTime} layout="fullscreen" />
+
+## DateButton (Календарь с текущим месяцем, выбором времени и кнопкой)
+
+<Canvas sourceState="shown" of={DatePickerStories.DateButton} layout="fullscreen" />
+
+## DateMultiple (Календарь с отображением двух месяцев и выбором диапазона дат)
+
+<Canvas sourceState="shown" of={DatePickerStories.DateMultiple} layout="fullscreen" />

package/dist/stories/DatePicker.stories.js

@@ -1,79 +1,78 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
-import { Button } from '@itcase/ui/components/Button'
-import { DatePickerInput } from '@itcase/ui/components/DatePicker'
+import { defaultDatepickerProps, defaultInputProps } from '../../../config/forms'
 import {
   fillProps,
   iconSizeProps,
   textColorHoverProps,
   textColorProps,
   textSizeProps,
-} from '@itcase/ui/constants'
-
-import { defaultDatepickerProps, defaultInputProps } from 'src/config/forms'
+} from '../../../constants'
 import { icon16 } from '../../../icons'
+import { Button } from '../../Button'
+import { DatePickerInput } from '../DatePicker'
 
 export default {
-  title: 'Atoms / DatePicker',
-  component: (props) => {
-    const [value, setValue] = useState(undefined)
-    return <DatePickerInput {...props} value={value} onChange={setValue} />
-  },
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 900,
+  args: {
+    clearLabel: '',
+    clearLabelTextColor: 'surfaceTextPrimary',
+    clearLabelTextColorHover: 'surfaceTextPrimaryHover',
+    clearLabelTextSize: 'm',
+    datePickerProps: {
+      ...defaultDatepickerProps,
+      isClearable: true,
+      isStartDefaultNull: true,
+      readOnly: false,
+      onKeyDown: (e) => {
+        e.preventDefault()
       },
     },
+    inputProps: defaultInputProps,
   },
   argTypes: {
-    clearIconSrc: {
-      options: [null, 'assets/16/Clear.svg'],
-      control: 'inline-radio',
+    clearIconItemFill: {
+      control: 'select',
+      if: { arg: 'clearIconSrc', neq: null },
+      options: fillProps,
     },
     clearIconSize: {
-      options: iconSizeProps,
       control: 'inline-radio',
       if: { arg: 'clearIconSrc', neq: null },
+      options: iconSizeProps,
     },
-    clearIconItemFill: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'clearIconSrc', neq: null },
-    },
-    clearLabelTextSize: {
-      options: textSizeProps,
-      control: 'select',
-      if: { arg: 'clearLabel', neq: '' },
+    clearIconSrc: {
+      control: 'inline-radio',
+      options: [null, 'assets/16/Clear.svg'],
     },
     clearLabelTextColor: {
-      options: textColorProps,
       control: 'select',
       if: { arg: 'clearLabel', neq: '' },
+      options: textColorProps,
     },
     clearLabelTextColorHover: {
+      control: 'select',
+      if: { arg: 'clearLabel', neq: '' },
       options: textColorHoverProps,
+    },
+    clearLabelTextSize: {
       control: 'select',
       if: { arg: 'clearLabel', neq: '' },
+      options: textSizeProps,
     },
   },
-  args: {
-    clearLabel: '',
-    clearLabelTextSize: 'm',
-    clearLabelTextColor: 'surfaceTextPrimary',
-    clearLabelTextColorHover: 'surfaceTextPrimaryHover',
-    inputProps: defaultInputProps,
-    datePickerProps: {
-      ...defaultDatepickerProps,
-      isStartDefaultNull: true,
-      isClearable: true,
-      readOnly: false,
-      onKeyDown: (e) => {
-        e.preventDefault()
+  component: (props) => {
+    const [value, setValue] = useState(undefined)
+    return <DatePickerInput {...props} value={value} onChange={setValue} />
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 900,
+        inline: false,
       },
     },
   },
+  title: 'Molecules / DatePicker',
 }
 
 export const Default = {
@@ -89,13 +88,13 @@ export const Date = {
 export const ClearIcon = {
   args: {
     clearIcon: icon16.Clear,
-    clearIconSize: 16,
     clearIconItemFill: 'surfaceItemTertiary',
     clearIconItemFillHover: 'surfaceItemPrimary',
+    clearIconSize: 16,
     datePickerProps: {
       ...defaultDatepickerProps,
-      isStartDefaultNull: true,
       isClearable: true,
+      isStartDefaultNull: true,
       readOnly: false,
       onKeyDown: (e) => {
         e.preventDefault()
@@ -107,13 +106,13 @@ export const ClearIcon = {
 export const ClearLabel = {
   args: {
     clearLabel: 'Clear',
-    clearLabelTextSize: 'm',
     clearLabelTextColor: 'surfaceTextPrimary',
     clearLabelTextColorHover: 'surfaceTextAccent',
+    clearLabelTextSize: 'm',
     datePickerProps: {
       ...defaultDatepickerProps,
-      isStartDefaultNull: true,
       isClearable: true,
+      isStartDefaultNull: true,
       readOnly: false,
       onKeyDown: (e) => {
         e.preventDefault()
@@ -127,10 +126,10 @@ export const DateTime = {
     datePickerProps: {
       ...defaultDatepickerProps,
       dateFormat: 'dd-MM-yyyy hh:mm',
+      showTimeSelect: true,
+      timeCaption: 'Время',
       timeFormat: 'p',
       timeIntervals: 15,
-      timeCaption: 'Время',
-      showTimeSelect: true,
     },
   },
 }
@@ -139,8 +138,8 @@ export const DateMultiple = {
   args: {
     datePickerProps: {
       ...defaultDatepickerProps,
-      placeholderText: 'Start – End (m/d/yyyy)',
       monthsShown: 2,
+      placeholderText: 'Start – End (m/d/yyyy)',
       selectsRange: true,
     },
   },
@@ -150,23 +149,23 @@ export const DateButton = {
   args: {
     datePickerProps: {
       ...defaultDatepickerProps,
-      dateFormat: 'dd-MM-yyyy hh:mm',
-      timeFormat: 'p',
-      timeIntervals: 15,
-      timeCaption: 'Время',
-      showTimeSelect: true,
-      showTimeInput: true,
-      timeInputLabel: null,
       customTimeInput: (
         <Button
+          width="fill"
+          labelTextSize="l"
           appearance="accent"
           label="OK"
-          labelTextSize="l"
           shape="rounded"
           size="xl"
-          width="fill"
         />
       ),
+      dateFormat: 'dd-MM-yyyy hh:mm',
+      showTimeInput: true,
+      showTimeSelect: true,
+      timeCaption: 'Время',
+      timeFormat: 'p',
+      timeInputLabel: null,
+      timeIntervals: 15,
     },
   },
 }

package/dist/stories/Dev.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as TitleStories from './Title.stories.js'
+
+<Meta title="Atoms / Title / Dev Mode" />
+
+# Dev
+
+<Canvas sourceState="shown" of={TitleStories.Dev} />

package/dist/stories/DevMode.mdx

@@ -0,0 +1,8 @@
+import { Meta, Story  } from '@storybook/blocks'
+
+import * as ResponseStories from './Response.stories.js'
+
+<Meta title="Molecules / Response / Dev Mode" />
+
+# Dev
+<Story of={ResponseStories.Dev} />

package/dist/stories/Direction.mdx

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

package/dist/stories/Direction.stories.js

@@ -0,0 +1,93 @@
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { argTypes } from './args'
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Group,
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      height={args.height}
+      fill={args.fill}
+      padding={args.padding}
+      borderColor={args.borderColor}
+      direction={args.direction}
+    >
+      <Group width="60" height="60" fill="accentPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="accentTextPrimary">
+          1
+        </Text>
+      </Group>
+      <Group width="60" height="60" fill="primaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="primaryTextPrimary">
+          2
+        </Text>
+      </Group>
+      <Group width="60" height="60" fill="secondaryPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="secondaryTextPrimary">
+          3
+        </Text>
+      </Group>
+      <Group width="60" height="60" fill="infoPrimary" padding="20" textAlign="center">
+        <Text size="xl" textColor="infoTextPrimary">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+  title: 'Layout / Group / Variants / Direction',
+}
+
+const Default = {
+  args: {
+    width: '500',
+    padding: '20',
+    borderColor: 'surfaceBorderPrimary',
+    fill: 'surfacePrimary',
+  },
+}
+
+export const Row = {
+  args: {
+    ...Default.args,
+    direction: 'row',
+  },
+}
+
+export const RowReverse = {
+  args: {
+    ...Default.args,
+    direction: 'row-reverse',
+  },
+}
+
+export const Column = {
+  args: {
+    ...Default.args,
+    direction: 'column',
+  },
+}
+
+export const ColumnReverse = {
+  args: {
+    ...Default.args,
+    direction: 'column-reverse',
+  },
+}
+
+export const Horizontal = {
+  args: {
+    ...Default.args,
+    direction: 'horizontal',
+  },
+}
+
+export const Vertical = {
+  args: {
+    ...Default.args,
+    direction: 'vertical',
+  },
+}

package/dist/stories/Divider.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DividerStories from './Divider.stories.js'
+
+<Meta of={DividerStories} />
+
+# Divider
+
+## SurfacePrimary
+
+<Canvas sourceState="shown" of={DividerStories.SurfacePrimary} />
+
+## SurfaceSecondary
+
+<Canvas sourceState="shown" of={DividerStories.SurfaceSecondary} />
+
+## SurfaceTertiary
+
+<Canvas sourceState="shown" of={DividerStories.SurfaceTertiary} />
+
+## SurfaceQuaternary
+
+<Canvas sourceState="shown" of={DividerStories.SurfaceQuaternary} />
+
+## AccentPrimary
+
+<Canvas sourceState="shown" of={DividerStories.AccentPrimary} />
+
+## PrimaryPrimary
+
+<Canvas sourceState="shown" of={DividerStories.PrimaryPrimary} />
+
+## SecondaryPrimary
+
+<Canvas sourceState="shown" of={DividerStories.SecondaryPrimary} />

package/dist/stories/Divider.stories.js

@@ -1,9 +1,32 @@
-import { Divider } from '@itcase/ui/components/Divider'
-
-import { fillHoverProps } from '@itcase/ui/constants'
+import { fillHoverProps } from '../../../constants'
+import { Divider } from '../Divider'
 
 export default {
-  title: 'Atoms / Divider',
+  argTypes: {
+    children: {
+      if: { arg: 'advancedProps' },
+    },
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    fill: {
+      control: 'inline-radio',
+      options: [
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceQuaternary',
+        'accentPrimary',
+        'primaryPrimary',
+        'secondaryPrimary',
+      ],
+    },
+    fillHover: {
+      control: 'select',
+      options: fillHoverProps,
+    },
+  },
   component: Divider,
   parameters: {
     controls: {
@@ -25,31 +48,7 @@ export default {
       ],
     },
   },
-  argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    children: {
-      if: { arg: 'advancedProps' },
-    },
-    fill: {
-      options: [
-        'surfacePrimary',
-        'surfaceSecondary',
-        'surfaceTertiary',
-        'surfaceQuaternary',
-        'accentPrimary',
-        'primaryPrimary',
-        'secondaryPrimary',
-      ],
-      control: 'inline-radio',
-    },
-    fillHover: {
-      options: fillHoverProps,
-      control: 'select',
-    },
-  },
+  title: 'Atoms / Divider',
 }
 
 export const Horizontal = {

package/dist/stories/Dot.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DotStories from './Dot.stories.js'
+
+<Meta of={DotStories} />
+
+# Dot
+
+## Accent
+
+<Canvas sourceState="shown" of={DotStories.Accent} />
+
+## Primary
+
+<Canvas sourceState="shown" of={DotStories.Primary} />
+
+## Secondary
+
+<Canvas sourceState="shown" of={DotStories.Secondary} />