@itcase/ui 1.0.99 → 1.0.101

package/dist/stories/Segmented.stories.js

@@ -0,0 +1,110 @@
+import { Segmented } from '@itcase/ui/components/Segmented'
+
+import {
+  borderColorProps,
+  borderTypeProps,
+  borderWidthProps,
+  fillProps,
+  fillHoverProps,
+  shapeProps,
+  textColorProps,
+  textSizeProps,
+  textWrapProps,
+  widthProps,
+} from '@itcase/ui/constants'
+
+export default {
+  title: 'Atoms / Segmented',
+  component: Segmented,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    name: {
+      if: { arg: 'advancedProps' },
+    },
+    type: {
+      if: { arg: 'advancedProps' },
+    },
+    setActiveSegment: {
+      if: { arg: 'advancedProps' },
+    },
+    indicatorFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    borderWidth: {
+      options: borderWidthProps,
+      control: 'inline-radio',
+    },
+    borderType: {
+      options: borderTypeProps,
+      control: 'inline-radio',
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    size: {
+      options: ['normal', 'compact'],
+      control: 'inline-radio',
+    },
+    labelTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelTextActiveColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    labelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    labelTextWrap: {
+      options: textWrapProps,
+      control: 'inline-radio',
+    },
+    width: {
+      options: widthProps,
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    width: 'fill',
+    size: 'normal',
+    fill: 'surfaceSecondary',
+    fillHover: 'surfacePrimaryHover',
+    shape: 'rounded',
+    indicatorFill: 'accentPrimary',
+    labelTextActiveColor: 'accentTextPrimary',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 'm',
+    labelTextWrap: 'wrap',
+    segments: [
+      { value: 1, label: 'Label 1 Lorem ipsum dolor sit amet' },
+      { value: 2, label: 'Label 2' },
+      { value: 3, label: 'Label 3' },
+      { value: 4, label: 'Label 4' },
+    ],
+    activeSegment: {
+      value: 1,
+    },
+  },
+}

package/dist/stories/Select.stories.js

@@ -0,0 +1,280 @@
+import { Select } from '@itcase/ui/components/Select'
+import { Button } from '@itcase/ui/components/Button'
+import { Loader } from '@itcase/ui/components/Loader'
+
+import {
+  borderColorProps,
+  borderColorHoverProps,
+  fillProps,
+  fillHoverProps,
+  textColorProps,
+  textSizeProps,
+  sizeProps,
+  strokeColorProps,
+} from '@itcase/ui/constants'
+
+import { defaultSelectProps } from 'src/config/forms'
+
+import { icon14, 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,
+      },
+    },
+  },
+  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',
+    },
+    optionFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    optionTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    optionTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    clearIcon: {
+      if: { arg: 'isClearable', eq: true },
+    },
+    clearIconFill: {
+      if: { arg: 'isClearable', eq: true },
+      options: fillProps,
+      control: 'select',
+    },
+    clearIconStroke: {
+      if: { arg: 'isClearable', eq: true },
+      options: strokeColorProps,
+      control: 'select',
+    },
+    isClearable: {
+      control: 'boolean',
+    },
+    inputFill: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: fillProps,
+      control: 'select',
+    },
+    inputTextSize: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    inputTextColor: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textColorProps,
+      control: 'select',
+    },
+    inputBorderColor: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: borderColorProps,
+      control: 'select',
+    },
+    inputBorderColorHover: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: borderColorHoverProps,
+      control: 'select',
+    },
+    dropdownIconFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    dropdownIconStroke: {
+      options: strokeColorProps,
+      control: 'select',
+    },
+    placeholder: {
+      if: { arg: 'hideValueContainer', neq: true },
+    },
+    placeholderTextSize: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    placeholderTextColor: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textColorProps,
+      control: 'select',
+    },
+    noOptionsTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    noOptionsTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    multipleItemFill: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: fillProps,
+      control: 'select',
+    },
+    multipleItemFillHover: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: fillHoverProps,
+      control: 'select',
+    },
+    multipleItemTextSize: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    multipleItemTextColor: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: textColorProps,
+      control: 'select',
+    },
+    multipleItemIcon: {
+      if: { arg: 'hideValueContainer', neq: true },
+    },
+    multipleItemIconFill: {
+      if: { arg: 'hideValueContainer', neq: true },
+      options: fillProps,
+      control: 'select',
+    },
+    isMulti: {
+      control: 'boolean',
+    },
+    isSearchable: {
+      control: 'boolean',
+    },
+    hideSelectedOptions: {
+      control: 'boolean',
+    },
+    hideValueContainer: {
+      control: 'boolean',
+    },
+    menuItemSize: {
+      options: ['xs', 's', 'm', 'l', 'xl', 'xxl'],
+      control: 'inline-radio',
+    },
+    dividerDirection: {
+      if: { arg: 'advancedProps' },
+    },
+    dividerFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    dividerSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+  },
+  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,
+  },
+}
+
+export const Default = {
+  args: {},
+}
+
+export const WithSearch = {
+  args: {
+    ...Default.args,
+    isSearchable: true,
+  },
+}
+
+export const Multi = {
+  args: {
+    ...Default.args,
+    isMulti: true,
+  },
+}
+
+export const NoInput = {
+  args: {
+    ...Default.args,
+    isClearable: false,
+    isMulti: true,
+    hideValueContainer: true,
+    dropdownIcon: icon16.Filter,
+    menuAfter: (
+      <Button
+        appearance="surfaceSecondary"
+        label="Очистить"
+        labelTextSize="m"
+        size="l"
+        width="fill"
+      />
+    ),
+    size: 'none',
+    showDivider: true,
+  },
+}

package/dist/stories/Switch.stories.js

@@ -0,0 +1,84 @@
+import { Switch } from '@itcase/ui/components/Switch'
+
+export default {
+  title: 'Atoms / Switch ',
+  component: Switch,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    id: {
+      if: { arg: 'advancedProps' },
+    },
+    set: {
+      if: { arg: 'advancedProps' },
+    },
+    onChange: {
+      if: { arg: 'advancedProps' },
+    },
+    size: {
+      options: ['normal', 'compact'],
+      control: 'inline-radio',
+    },
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    disabled: false,
+    checked: false,
+    size: 'normal',
+  },
+}
+
+export const Active = {
+  args: {
+    ...Default.args,
+    disabled: false,
+    checked: false,
+  },
+}
+export const ActiveChecked = {
+  args: {
+    ...Default.args,
+    disabled: false,
+    checked: true,
+  },
+}
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    checked: false,
+  },
+}
+export const DisabledChecked = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    checked: true,
+  },
+}
+
+export const Normal = {
+  args: {
+    size: 'normal',
+    disabled: false,
+    checked: true,
+  },
+}
+
+export const Compact = {
+  args: {
+    size: 'compact',
+    disabled: false,
+    checked: true,
+  },
+}