@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/Select.stories.js

@@ -1,233 +1,233 @@
-import { Select } from '@itcase/ui/components/Select'
-import { Button } from '@itcase/ui/components/Button'
-import { Loader } from '@itcase/ui/components/Loader'
-
+import { defaultSelectProps } from '../../../config/forms'
 import {
-  borderColorProps,
   borderColorHoverProps,
-  fillProps,
+  borderColorProps,
   fillHoverProps,
+  fillProps,
+  sizeProps,
   textColorProps,
   textSizeProps,
-  sizeProps,
-} from '@itcase/ui/constants'
+} from '../../../constants'
+import { Button } from '../../Button'
+import { Loader } from '../../Loader'
+import { Select } from '../index'
 
-import { defaultSelectProps } from 'src/config/forms'
+// import { Select } from '../Select'
 
-import { icon14, icon16 } from 'src/icons'
+// import { icon16 } from 'src/icons'
 
 export default {
-  title: 'Atoms / Select',
-  component: Select,
-  parameters: {
-    controls: {
-      exclude: [
-        'optionShape',
-        'inputCaretColor',
-        'inputShape',
-        'animationOpen',
-        'animationClose',
-        'optionFillHover',
-        'headingFill',
-        'headingTextColor',
-        'headingTextSize',
-        'headingTextWeight',
-        'filterOption',
-        'initialValue',
-        'set',
-        'onChange',
-        'openMenuOnClick',
-      ],
-    },
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 800,
-      },
-    },
+  args: {
+    ...defaultSelectProps,
+    isClearable: true,
+    isMulti: false,
+    isSearchable: false,
+    dropdownIconFill: 'surfaceItemPrimary',
+    hideSelectedOptions: false,
+    menuItemSize: 'l',
+    noOptionsText: (
+      <Loader
+        width="fill"
+        height="fill"
+        fill="surfacePrimary"
+        position="absolute"
+        left="0px"
+        right="0px"
+        zIndex="1"
+        itemFill="surfaceItemAccent"
+        set="simple"
+      />
+    ),
+    optionFill: 'surfacePrimary',
+    optionFillHover: 'surfacePrimaryHover',
+    options: [
+      { label: 'Завершены', value: 'completed' },
+      { label: 'Идут торги', value: 'active' },
+      { label: 'Остановлены', value: 'stopped' },
+      { label: 'Отменены', value: 'canceled' },
+      { label: 'Планируемые', value: 'planned' },
+      { label: 'Продолжены', value: 'continued' },
+    ],
+    optionTextColor: 'surfaceTextPrimary',
+    optionTextSize: 'l',
+    showDivider: false,
   },
   argTypes: {
-    advancedProps: { control: 'boolean' },
-    className: {
-      if: { arg: 'advancedProps' },
-    },
-    inputBefore: {
-      if: { arg: 'advancedProps' },
-    },
-    inputAfter: {
-      if: { arg: 'advancedProps' },
-    },
-    closeMenuOnSelect: {
-      control: 'boolean',
-    },
     elevation: {
-      options: [1, 2, 4, 6, 8, 12, 16, 24],
       control: 'inline-radio',
+      options: [1, 2, 4, 6, 8, 12, 16, 24],
     },
-    optionFill: {
-      options: fillProps,
-      control: 'select',
+    isClearable: {
+      control: 'boolean',
     },
-    optionTextColor: {
-      options: textColorProps,
-      control: 'select',
+    isMulti: {
+      control: 'boolean',
     },
-    optionTextSize: {
-      options: textSizeProps,
-      control: 'inline-radio',
+    isSearchable: {
+      control: 'boolean',
+    },
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
     },
     clearIcon: {
       if: { arg: 'isClearable', eq: true },
     },
     clearIconFill: {
+      control: 'select',
       if: { arg: 'isClearable', eq: true },
       options: fillProps,
-      control: 'select',
     },
-    isClearable: {
+    closeMenuOnSelect: {
       control: 'boolean',
     },
-    inputFill: {
-      if: { arg: 'hideValueContainer', neq: true },
-      options: fillProps,
+    dividerDirection: {
+      if: { arg: 'advancedProps' },
+    },
+    dividerFill: {
       control: 'select',
+      options: fillProps,
     },
-    inputTextSize: {
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textSizeProps,
+    dividerSize: {
       control: 'inline-radio',
+      options: sizeProps,
     },
-    inputTextColor: {
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textColorProps,
+    dropdownIconFill: {
       control: 'select',
+      options: fillProps,
+    },
+    hideSelectedOptions: {
+      control: 'boolean',
+    },
+    hideValueContainer: {
+      control: 'boolean',
+    },
+    inputAfter: {
+      if: { arg: 'advancedProps' },
+    },
+    inputBefore: {
+      if: { arg: 'advancedProps' },
     },
     inputBorderColor: {
+      control: 'select',
       if: { arg: 'hideValueContainer', neq: true },
       options: borderColorProps,
-      control: 'select',
     },
     inputBorderColorHover: {
+      control: 'select',
       if: { arg: 'hideValueContainer', neq: true },
       options: borderColorHoverProps,
-      control: 'select',
     },
-    dropdownIconFill: {
-      options: fillProps,
+    inputFill: {
       control: 'select',
-    },
-    placeholder: {
       if: { arg: 'hideValueContainer', neq: true },
+      options: fillProps,
     },
-    placeholderTextSize: {
-      if: { arg: 'hideValueContainer', neq: true },
-      options: textSizeProps,
-      control: 'inline-radio',
-    },
-    placeholderTextColor: {
+    inputTextColor: {
+      control: 'select',
       if: { arg: 'hideValueContainer', neq: true },
       options: textColorProps,
-      control: 'select',
     },
-    noOptionsTextSize: {
-      options: textSizeProps,
+    inputTextSize: {
       control: 'inline-radio',
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textSizeProps,
     },
-    noOptionsTextColor: {
-      options: textColorProps,
-      control: 'select',
+    menuItemSize: {
+      control: 'inline-radio',
+      options: ['xs', 's', 'm', 'l', 'xl', 'xxl'],
     },
     multipleItemFill: {
+      control: 'select',
       if: { arg: 'hideValueContainer', neq: true },
       options: fillProps,
-      control: 'select',
     },
     multipleItemFillHover: {
+      control: 'select',
       if: { arg: 'hideValueContainer', neq: true },
       options: fillHoverProps,
-      control: 'select',
     },
-    multipleItemTextSize: {
+    multipleItemIcon: {
       if: { arg: 'hideValueContainer', neq: true },
-      options: textSizeProps,
-      control: 'inline-radio',
+    },
+    multipleItemIconFill: {
+      control: 'select',
+      if: { arg: 'hideValueContainer', neq: true },
+      options: fillProps,
     },
     multipleItemTextColor: {
+      control: 'select',
       if: { arg: 'hideValueContainer', neq: true },
       options: textColorProps,
-      control: 'select',
     },
-    multipleItemIcon: {
+    multipleItemTextSize: {
+      control: 'inline-radio',
       if: { arg: 'hideValueContainer', neq: true },
+      options: textSizeProps,
     },
-    multipleItemIconFill: {
-      if: { arg: 'hideValueContainer', neq: true },
-      options: fillProps,
+    noOptionsTextColor: {
       control: 'select',
+      options: textColorProps,
     },
-    isMulti: {
-      control: 'boolean',
-    },
-    isSearchable: {
-      control: 'boolean',
+    noOptionsTextSize: {
+      control: 'inline-radio',
+      options: textSizeProps,
     },
-    hideSelectedOptions: {
-      control: 'boolean',
+    optionFill: {
+      control: 'select',
+      options: fillProps,
     },
-    hideValueContainer: {
-      control: 'boolean',
+    optionTextColor: {
+      control: 'select',
+      options: textColorProps,
     },
-    menuItemSize: {
-      options: ['xs', 's', 'm', 'l', 'xl', 'xxl'],
+    optionTextSize: {
       control: 'inline-radio',
+      options: textSizeProps,
     },
-    dividerDirection: {
-      if: { arg: 'advancedProps' },
+    placeholder: {
+      if: { arg: 'hideValueContainer', neq: true },
     },
-    dividerFill: {
-      options: fillProps,
+    placeholderTextColor: {
       control: 'select',
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textColorProps,
     },
-    dividerSize: {
-      options: sizeProps,
+    placeholderTextSize: {
       control: 'inline-radio',
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textSizeProps,
     },
   },
-  args: {
-    ...defaultSelectProps,
-    noOptionsText: (
-      <Loader
-        fill="surfacePrimary"
-        height="fill"
-        itemFill="surfaceItemAccent"
-        left="0px"
-        position="absolute"
-        right="0px"
-        set="simple"
-        width="fill"
-        zIndex="1"
-      />
-    ),
-    optionFill: 'surfacePrimary',
-    optionFillHover: 'surfacePrimaryHover',
-    optionTextColor: 'surfaceTextPrimary',
-    optionTextSize: 'l',
-    options: [
-      { label: 'Завершены', value: 'completed' },
-      { label: 'Идут торги', value: 'active' },
-      { label: 'Остановлены', value: 'stopped' },
-      { label: 'Отменены', value: 'canceled' },
-      { label: 'Планируемые', value: 'planned' },
-      { label: 'Продолжены', value: 'continued' },
-    ],
-    dropdownIconFill: 'surfaceItemPrimary',
-    menuItemSize: 'l',
-    hideSelectedOptions: false,
-    isClearable: true,
-    isMulti: false,
-    isSearchable: false,
-    showDivider: false,
+  component: Select,
+  parameters: {
+    controls: {
+      exclude: [
+        'optionShape',
+        'inputCaretColor',
+        'inputShape',
+        'animationOpen',
+        'animationClose',
+        'optionFillHover',
+        'headingFill',
+        'headingTextColor',
+        'headingTextSize',
+        'headingTextWeight',
+        'filterOption',
+        'initialValue',
+        'set',
+        'onChange',
+        'openMenuOnClick',
+      ],
+    },
+    docs: {
+      story: {
+        iframeHeight: 800,
+        inline: false,
+      },
+    },
   },
+  title: 'Atoms / Select',
 }
 
 export const Default = {
@@ -253,18 +253,18 @@ export const NoInput = {
     ...Default.args,
     isClearable: false,
     isMulti: true,
+    // dropdownIcon: icon16.Filter,
     hideValueContainer: true,
-    dropdownIcon: icon16.Filter,
     menuAfter: (
       <Button
+        width="fill"
+        labelTextSize="m"
         appearance="surfaceSecondary"
         label="Очистить"
-        labelTextSize="m"
         size="l"
-        width="fill"
       />
     ),
-    size: 'none',
     showDivider: true,
+    size: 'none',
   },
 }

package/dist/stories/Size.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as SizeStories from './Size.stories.js'
+
+<Meta title="Atoms / Tab / Size" />
+
+# Size
+
+## XXS
+
+<Canvas sourceState="shown" of={SizeStories.SizeXXS} />
+
+## XS
+
+<Canvas sourceState="shown" of={SizeStories.SizeXS} />
+
+## S
+
+<Canvas sourceState="shown" of={SizeStories.SizeS} />
+
+## M
+
+<Canvas sourceState="shown" of={SizeStories.SizeM} />
+
+## L
+
+<Canvas sourceState="shown" of={SizeStories.SizeL} />
+
+## XL
+
+<Canvas sourceState="shown" of={SizeStories.SizeXL} />
+
+## XXL
+
+<Canvas sourceState="shown" of={SizeStories.SizeXXL} />

package/dist/stories/Size.stories.js

@@ -0,0 +1,101 @@
+import { badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import tabAppearance from '../appearance.json'
+import { Tab, tabConfig } from '../Tab'
+import { argTypes } from './args'
+
+badgeConfig.setAppearance(badgeAppearance)
+
+tabConfig.setAppearance(tabAppearance)
+
+export default {
+  argTypes: {
+    ...argTypes,
+  },
+  component: Tab,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  title: 'Atoms / Tab / Size',
+}
+
+export const Default = {
+  args: {
+    appearance: 'primary',
+    badge: true,
+    badgeAppearance: 'accent',
+    badgeSize: 'xs',
+    badgeTextSize: 'xs',
+    badgeValue: '3',
+    label: 'Label',
+    labelTextSize: 'm',
+    size: 'm',
+  },
+}
+
+export const SizeXXS = {
+  args: {
+    ...Default.args,
+    size: 'xxs',
+  },
+}
+
+export const SizeXS = {
+  args: {
+    ...Default.args,
+    size: 'xs',
+  },
+}
+
+export const SizeS = {
+  args: {
+    ...Default.args,
+    size: 's',
+  },
+}
+
+export const SizeM = {
+  args: {
+    ...Default.args,
+    size: 'm',
+  },
+}
+
+export const SizeL = {
+  args: {
+    ...Default.args,
+    size: 'l',
+  },
+}
+
+export const SizeXL = {
+  args: {
+    ...Default.args,
+    size: 'xl',
+  },
+}
+
+export const SizeXXL = {
+  args: {
+    ...Default.args,
+    size: 'xxl',
+  },
+}

package/dist/stories/Skeleton.mdx

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

package/dist/stories/State.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as StateStories from './State.stories.js'
+
+<Meta title="Atoms / Tab / State" />
+
+# State
+
+## Normal
+
+<Canvas sourceState="shown" of={StateStories.Normal} />
+
+## Active
+
+<Canvas sourceState="shown" of={StateStories.Active} />
+
+## Disabled
+
+<Canvas sourceState="shown" of={StateStories.Disabled} />

package/dist/stories/State.stories.js

@@ -0,0 +1,70 @@
+
+import { badgeConfig } from '../../Badge'
+import badgeAppearance from '../../Badge/appearance.json'
+import tabAppearance from '../appearance.json'
+import { Tab, tabConfig } from '../Tab'
+import { argTypes } from './args'
+
+badgeConfig.setAppearance(badgeAppearance)
+
+tabConfig.setAppearance(tabAppearance)
+
+export default {
+  args: {
+    badge: true,
+    badgeAppearance: 'accent',
+    badgeSize: 'xs',
+    badgeTextSize: 'xs',
+    badgeValue: '3',
+    label: 'Label',
+    labelTextSize: 'm',
+    size: 'normal',
+  },
+  argTypes: {
+    ...argTypes,
+  },
+  component: Tab,
+  parameters: {
+    controls: {
+      exclude: [
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'linkFillDesktop',
+        'linkFillMobile',
+        'linkFillTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'typeDesktop',
+        'typeMobile',
+        'typeTablet',
+      ],
+    },
+  },
+  title: 'Atoms / Tab / State',
+}
+
+export const Normal = {
+  args: {
+    appearance: 'any',
+  },
+}
+
+export const Active = {
+  args: {
+    isActive: true,
+    appearance: 'surfacePrimary',
+  },
+}
+
+export const Disabled = {
+  args: {
+    isDisabled: true,
+    appearance: 'surfacePrimary',
+    badgeAppearance: 'disabled',
+  },
+}

package/dist/stories/Switch.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as SwitchStories from './Switch.stories.js'
+
+<Meta of={SwitchStories} />
+
+# Switch
+
+## Active
+
+<Canvas sourceState="shown" of={SwitchStories.Active} />
+
+## ActiveChecked
+
+<Canvas sourceState="shown" of={SwitchStories.ActiveChecked} />
+
+## Disabled
+
+<Canvas sourceState="shown" of={SwitchStories.Disabled} />
+
+## DisabledChecked
+
+<Canvas sourceState="shown" of={SwitchStories.DisabledChecked} />