@itcase/ui 1.2.18 → 1.2.20

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} />

package/dist/stories/Dot.stories.js

@@ -1,86 +1,85 @@
-import { Dot } from '@itcase/ui/components/Dot'
-import {
-  borderColorProps,
-  borderTypeProps,
-  borderWidthProps,
-  borderColorHoverProps,
-  textColorProps,
-  fillProps,
-  sizeProps,
-  shapeProps,
-} from '@itcase/ui/constants'
+import { borderColorProps, borderTypeProps, fillProps, shapeProps } from '../../../constants'
+import { Dot } from '../Dot'
 
 export default {
-  title: 'Atoms / Dot',
-  component: Dot,
-  parameters: {
-    controls: {
-      exclude: [
-        'borderDesktop',
-        'borderMobile',
-        'borderTablet',
-        'borderTypeDesktop',
-        'borderTypeMobile',
-        'borderTypeTablet',
-        'fillDesktop',
-        'fillMobile',
-        'fillTablet',
-        'shapeDesktop',
-        'shapeMobile',
-        'shapeTablet',
-      ],
-    },
+  args: {
+    shape: 'circular',
   },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
     children: {
       if: { arg: 'advancedProps' },
     },
+    advancedProps: { control: 'boolean' },
     border: {
-      options: borderColorProps,
       control: 'select',
+      options: borderColorProps,
     },
     borderType: {
-      options: borderTypeProps,
       control: 'inline-radio',
+      options: borderTypeProps,
+    },
+    className: {
+      if: { arg: 'advancedProps' },
     },
     fill: {
-      options: fillProps,
       control: 'select',
+      options: fillProps,
     },
     shape: {
+      control: 'inline-radio',
       options: shapeProps,
+    },
+    size: {
       control: 'inline-radio',
+      options: ['s', 'm', 'l'],
     },
   },
-  args: {
-    shape: 'circular',
+  component: Dot,
+  parameters: {
+    controls: {
+      exclude: [
+        'borderDesktop',
+        'borderMobile',
+        'borderTablet',
+        'borderTypeDesktop',
+        'borderTypeMobile',
+        'borderTypeTablet',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+      ],
+    },
   },
+  title: 'Atoms / Dot',
 }
 
 export const Default = {
   args: {
     fill: 'accentPrimary',
+    size: 'm',
   },
 }
 
 export const Accent = {
   args: {
+    ...Default.args,
     fill: 'accentPrimary',
   },
 }
 
 export const Primary = {
   args: {
+    ...Default.args,
     fill: 'primaryPrimary',
   },
 }
 
 export const Secondary = {
   args: {
+    ...Default.args,
     fill: 'secondaryPrimary',
   },
 }

package/dist/stories/Drawer.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as DrawerStories from './Drawer.stories.js'
+
+<Meta of={DrawerStories} />
+
+# Drawer
+
+## Default
+
+<Canvas sourceState="shown" of={DrawerStories.Default} />