@itcase/ui 1.0.99 → 1.0.101

package/dist/stories/FormFieldMultiSelect.stories.js

@@ -0,0 +1,127 @@
+import React from 'react'
+import { formTypes, emailValidation, addRequiredFieldsParamToSchema } from '@itcase/forms'
+import * as yup from 'yup'
+
+import Form from './form.js'
+
+export default {
+  title: 'Form Field / SelectMulti',
+  component: Form,
+}
+
+import { icon16, icon24 } from '../../../icons'
+
+const Template = (args) => {
+  const DEFAULT_REQUIRED_MESSAGE = 'This field is required'
+  const DEFAULT_INVALID_EMAIL_MESSAGE = 'Username must be a valid email'
+
+  // Create validation schema with rules for form fields
+  const validationSchema = yup.object().shape({
+    formFieldSelect: yup
+      .string()
+      .test('formFieldSelect', DEFAULT_INVALID_EMAIL_MESSAGE, emailValidation)
+      .required(DEFAULT_REQUIRED_MESSAGE),
+    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
+  })
+
+  // Add "requiredFields" as new param to schema
+  if (!('requiredFields' in validationSchema)) {
+    addRequiredFieldsParamToSchema(validationSchema)
+  }
+
+  // Create form config with fields
+  const config = {
+    formFieldSelect: {
+      type: formTypes.select,
+      name: 'types',
+      fieldProps: {
+        type: 'normal',
+        width: 'fill',
+        direction: 'vertical',
+        dividerFill: 'errorPrimary',
+        fill: 'surfacePrimary',
+        label: 'Title',
+        labelTextSize: 'm',
+        labelTextColor: 'surfaceTextPrimary',
+        message: 'Help Text',
+        messageTextSize: 'xs',
+        messageTextColor: 'surfaceTextSecondary',
+        errorMessageTextSize: 'xs',
+        errorMessageTextColor: 'errorTextPrimary',
+      },
+      selectProps: {
+        elevation: 8,
+        showDivider: true,
+        dividerDirection: 'horizontal',
+        dividerFill: 'surfaceTertiary',
+        dividerSize: 'xxs',
+        size: 'normal',
+        optionFill: 'surfacePrimary',
+        optionFillHover: 'surfacePrimaryHover',
+        optionBorder: 'none',
+        optionShape: 'rounded',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextSize: 'm',
+        inputFill: 'surfacePrimary',
+        inputTextSize: 'm',
+        inputTextColor: 'surfaceTextPrimary',
+        inputCaretColor: 'secondaryItemPrimary',
+        inputShape: 'rounded',
+        inputBorderColor: 'surfaceBorderTertiary',
+
+        multipleItemFill: 'accentPrimary',
+        multipleItemFillHover: 'accentPrimaryHover',
+        multipleItemTextSize: 'm',
+        multipleItemTextColor: 'accentTextPrimary',
+
+        multipleItemIcon: icon16.Remove,
+        multipleItemIconFill: 'accentItemPrimary',
+
+        clearIcon: icon24.Clear,
+        clearIconFill: 'surfaceItemPrimary',
+
+        dropdownIcon: icon24.ChevronDownSmall,
+        dropdownIconFill: 'surfaceItemPrimary',
+
+        placeholder: 'Выбрать...',
+        placeholderTextSize: 'm',
+        placeholderTextColor: 'surfaceTextPrimary',
+
+        noOptionsText: 'Ничего не найдено...',
+        noOptionsTextSize: 'm',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        isClearable: true,
+
+        isMulti: true,
+        isSearchable: false,
+        closeMenuOnSelect: false,
+      },
+
+      options: [
+        {
+          label: 'Администратор',
+          value: 'admin',
+        },
+        {
+          label: 'Менеджер',
+          value: 'manager',
+        },
+        {
+          label: 'Модератор',
+          value: 'moderator',
+        },
+        {
+          label: 'Участник',
+          value: 'participant',
+        },
+        {
+          label: 'Сотрудник службы безопасности',
+          value: 'security',
+        },
+      ],
+    },
+  }
+  return <Form config={config} validationSchema={validationSchema} />
+}
+
+export const Normal = Template.bind({})

package/dist/stories/FormFieldSelect.stories.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import { formTypes, emailValidation, addRequiredFieldsParamToSchema } from '@itcase/forms'
+import * as yup from 'yup'
+
+import Form from './form.js'
+
+export default {
+  title: 'Form Field / Select',
+  component: Form,
+}
+
+import { icon24 } from '../../../icons'
+
+const Template = (args) => {
+  const DEFAULT_REQUIRED_MESSAGE = 'This field is required'
+  const DEFAULT_INVALID_EMAIL_MESSAGE = 'Username must be a valid email'
+
+  // Create validation schema with rules for form fields
+  const validationSchema = yup.object().shape({
+    formFieldSelect: yup
+      .string()
+      .test('formFieldSelect', DEFAULT_INVALID_EMAIL_MESSAGE, emailValidation)
+      .required(DEFAULT_REQUIRED_MESSAGE),
+    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
+  })
+
+  // Add "requiredFields" as new param to schema
+  if (!('requiredFields' in validationSchema)) {
+    addRequiredFieldsParamToSchema(validationSchema)
+  }
+
+  // Create form config with fields
+  const config = {
+    formFieldSelect: {
+      type: formTypes.select,
+      isRequired: true,
+      name: 'formFieldSelect',
+      fieldProps: {
+        type: 'normal',
+        width: 'fill',
+        direction: 'vertical',
+        dividerFill: 'errorPrimary',
+        fill: 'surfacePrimary',
+        label: 'Title',
+        labelTextSize: 'm',
+        labelTextColor: 'surfaceTextPrimary',
+        message: 'Help Text',
+        messageTextSize: 'xs',
+        messageTextColor: 'surfaceTextSecondary',
+        errorMessageTextSize: 'xs',
+        errorMessageTextColor: 'errorTextPrimary',
+      },
+      selectProps: {
+        elevation: 8,
+        showDivider: true,
+        dividerDirection: 'horizontal',
+        dividerFill: 'surfaceTertiary',
+        dividerSize: 'xxs',
+        size: 'normal',
+        optionFill: 'surfacePrimary',
+        optionFillHover: 'surfacePrimaryHover',
+        optionBorder: 'none',
+        optionShape: 'rounded',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextSize: 'm',
+        inputFill: 'surfacePrimary',
+        inputTextSize: 'm',
+        inputTextColor: 'surfaceTextPrimary',
+        inputCaretColor: 'secondaryItemPrimary',
+        inputShape: 'rounded',
+        inputBorderColor: 'surfaceBorderTertiary',
+
+        clearIcon: icon24.Clear,
+        clearIconFill: 'surfaceItemPrimary',
+
+        dropdownIcon: icon24.ChevronDownSmall,
+        dropdownIconFill: 'surfaceItemPrimary',
+
+        placeholder: 'Выбрать...',
+        placeholderTextSize: 'm',
+        placeholderTextColor: 'surfaceTextPrimary',
+
+        noOptionsText: 'Ничего не найдено...',
+        noOptionsTextSize: 'm',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        isClearable: true,
+        isSearchable: true,
+      },
+      options: [
+        { value: 'Категория 1', label: 'Категория 1' },
+        { value: 'Категория 2', label: 'Категория 2' },
+        { value: 'Категория 3', label: 'Категория 3', editable: true },
+      ],
+    },
+  }
+  return <Form config={config} validationSchema={validationSchema} />
+}
+
+export const Normal = Template.bind({})

package/dist/stories/FormFieldSelectGroup.stories.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import { formTypes, emailValidation, addRequiredFieldsParamToSchema } from '@itcase/forms'
+import * as yup from 'yup'
+
+import Form from './form.js'
+
+export default {
+  title: 'Form Field / SelectGroup',
+  component: Form,
+}
+
+import { defaultSelectProps, defaultFieldProps  } from 'src/config/forms'
+
+import { icon24 } from '../../../icons'
+
+const Template = (args) => {
+  const DEFAULT_REQUIRED_MESSAGE = 'This field is required'
+  const DEFAULT_INVALID_EMAIL_MESSAGE = 'Username must be a valid email'
+
+  // Create validation schema with rules for form fields
+  const validationSchema = yup.object().shape({
+    formFieldSelect: yup
+      .string()
+      .test('formFieldSelect', DEFAULT_INVALID_EMAIL_MESSAGE, emailValidation)
+      .required(DEFAULT_REQUIRED_MESSAGE),
+    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
+  })
+
+  // Add "requiredFields" as new param to schema
+  if (!('requiredFields' in validationSchema)) {
+    addRequiredFieldsParamToSchema(validationSchema)
+  }
+
+  const colourOptions = [
+    { value: 'ocean', label: 'Ocean', color: '#00B8D9' },
+    { value: 'blue', label: 'Blue', color: '#0052CC' },
+    { value: 'purple', label: 'Purple', color: '#5243AA' },
+    { value: 'red', label: 'Red', color: '#FF5630' },
+    { value: 'orange', label: 'Orange', color: '#FF8B00' },
+    { value: 'yellow', label: 'Yellow', color: '#FFC400' },
+    { value: 'green', label: 'Green', color: '#36B37E' },
+    { value: 'forest', label: 'Forest', color: '#00875A' },
+    { value: 'slate', label: 'Slate', color: '#253858' },
+    { value: 'silver', label: 'Silver', color: '#666666' },
+  ]
+
+  const flavourOptions = [
+    { value: 'vanilla', label: 'Vanilla', rating: 'safe' },
+    { value: 'chocolate', label: 'Chocolate', rating: 'good' },
+    { value: 'strawberry', label: 'Strawberry', rating: 'wild' },
+    { value: 'salted-caramel', label: 'Salted Caramel', rating: 'crazy' },
+  ]
+
+  // Create form config with fields
+  const config = {
+    formFieldSelect: {
+      type: formTypes.select,
+      isRequired: true,
+      name: 'formFieldSelect',
+      fieldProps: {
+        ...defaultFieldProps,
+        label: 'Title',
+        message: 'Help Text',
+      },
+      selectProps: {
+        ...defaultSelectProps
+      },
+
+      options: [
+        {
+          label: '5555555',
+          options: colourOptions,
+        },
+        {
+          label: '7777777',
+          options: flavourOptions,
+        },
+      ],
+    },
+  }
+  return <Form config={config} validationSchema={validationSchema} />
+}
+
+export const Normal = Template.bind({})

package/dist/stories/Icon.stories.js

@@ -0,0 +1,208 @@
+import { Badge } from '@itcase/ui/components/Badge'
+import { Icon, iconConfig } from '@itcase/ui/components/Icon'
+import {
+  borderColorHoverProps,
+  borderColorProps,
+  borderTypeProps,
+  borderWidthProps,
+  fillHoverProps,
+  fillProps,
+  shapeProps,
+  sizePXProps,
+  strokeColorProps,
+} from '@itcase/ui/constants'
+
+import iconAppearance from 'src/components/Icon/appearance.json'
+
+iconConfig.setAppearance(iconAppearance)
+
+export default {
+  title: 'Atoms / Icon',
+  component: Icon,
+  parameters: {
+    controls: {
+      exclude: [
+        'textColor',
+        'textColorHover',
+        'fillDesktop',
+        'fillMobile',
+        'fillTablet',
+        'fillSizeDesktop',
+        'fillSizeMobile',
+        'fillSizeTablet',
+        'shapeDesktop',
+        'shapeMobile',
+        'shapeTablet',
+        'size',
+        'sizeDesktop',
+        'sizeMobile',
+        'sizeTablet',
+        'iconStrokeDesktop',
+        'iconStrokeMobile',
+        'iconStrokeTablet',
+        'height',
+        'href',
+        'link',
+        'linkRel',
+        'linkTarget',
+        'strokeDesktop',
+        'strokeMobile',
+        'strokeTablet',
+        'width',
+      ],
+    },
+  },
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    fill: {
+      options: fillProps,
+      control: 'select',
+    },
+    fillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    fillSize: {
+      options: sizePXProps,
+      control: 'select',
+    },
+    iconFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    iconFillHover: {
+      options: fillProps,
+      control: 'select',
+    },
+    iconSize: {
+      options: sizePXProps,
+      control: 'select',
+    },
+    iconStroke: {
+      options: strokeColorProps,
+      control: 'select',
+    },
+    iconStrokeHover: {
+      options: strokeColorProps,
+      control: 'select',
+    },
+    borderType: {
+      options: borderTypeProps,
+      control: 'inline-radio',
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    borderColorHover: {
+      options: borderColorHoverProps,
+      control: 'select',
+    },
+    borderWidth: {
+      options: borderWidthProps,
+      control: 'select',
+    },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    dataTour: {
+      if: { arg: 'advancedProps' },
+    },
+    onClick: {
+      if: { arg: 'advancedProps' },
+    },
+    LinkComponent: {
+      if: { arg: 'advancedProps' },
+    },
+    SvgImage: {
+      if: { arg: 'advancedProps' },
+    },
+    shape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    iconStroke: 'surfaceItemPrimary',
+    imageSrc: 'assets/24/Bell.svg',
+    fill: 'surfaceSecondary',
+    fillHover: 'surfaceSecondaryHover',
+    fillSize: '40',
+    iconSize: '24',
+    shape: 'circular',
+  },
+}
+
+export const WithBadge = {
+  args: {
+    imageSrc: 'assets/24/Bell.svg',
+    fill: 'surfaceSecondary',
+    fillHover: 'surfaceSecondaryHover',
+    fillSize: '40',
+    iconSize: '24',
+    iconStroke: 'surfaceItemPrimary',
+    shape: 'circular',
+    Badge: <Badge appearance="accent" position="absolute" size="xs" textSize="xxs" value={3} />,
+  },
+}
+
+export const WithTooltip = {
+  args: {
+    width: '16',
+    iconFill: 'surfaceItemPrimary',
+    imageSrc: 'assets/16/Search.svg',
+    tooltipText: 'Search',
+    tooltipTextSize: 'm',
+    showTooltip: true,
+    tooltipAppearance: 'surfaceTertiary',
+    alignment: 'topRight',
+  },
+}
+
+export const Size14 = {
+  args: {
+    imageSrc: 'assets/14/Remove.svg',
+    fill: 'surfaceSecondary',
+    fillHover: 'surfaceSecondaryHover',
+    fillSize: '24',
+    iconSize: '14',
+    iconFill: 'surfaceItemPrimary',
+    shape: 'circular',
+  },
+}
+
+export const Size16 = {
+  args: {
+    imageSrc: 'assets/16/Search.svg',
+    fill: 'surfaceSecondary',
+    fillHover: 'surfaceSecondaryHover',
+    fillSize: '32',
+    iconSize: '16',
+    iconFill: 'surfaceItemPrimary',
+    shape: 'circular',
+  },
+}
+
+export const Size24 = {
+  args: {
+    imageSrc: 'assets/24/Delete.svg',
+    fill: 'surfaceSecondary',
+    fillHover: 'surfaceSecondaryHover',
+    fillSize: '40',
+    iconSize: '24',
+    iconFill: 'surfaceItemPrimary',
+    shape: 'circular',
+  },
+}
+
+export const Size40 = {
+  args: {
+    imageSrc: 'assets/40/close.svg',
+    fillHover: 'surfaceSecondaryHover',
+    iconSize: '40',
+    shape: 'circular',
+  },
+}

package/dist/stories/Input.stories.js

@@ -0,0 +1,124 @@
+import { Input, inputConfig } from '@itcase/ui/components/Input'
+import inputState from 'src/components/Input/state.json'
+import { borderColorProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
+
+inputConfig.setState(inputState)
+
+export default {
+  title: 'Atoms / Input',
+  component: Input,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    className: {
+      if: { arg: 'advancedProps' },
+    },
+    checked: {
+      if: { arg: 'advancedProps' },
+      control: 'boolean',
+    },
+    id: {
+      if: { arg: 'advancedProps' },
+    },
+    onBlur: {
+      if: { arg: 'advancedProps' },
+    },
+    onKeyDown: {
+      if: { arg: 'advancedProps' },
+    },
+    borderColor: {
+      options: borderColorProps,
+      control: 'select',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    shape: {
+      options: [null, 'rounded', 'underline'],
+      control: 'inline-radio',
+    },
+    state: {
+      options: [
+        null,
+        'normal',
+        'filled',
+        'active',
+        'activeFilled',
+        'error',
+        'errorFilled',
+        'readonly',
+        'disabled',
+        'success',
+        'require',
+      ],
+      control: 'inline-radio',
+    },
+    size: {
+      options: [null, 'xs', 's', 'm', 'l', 'xl', 'xxl', 'tiny', 'compact', 'normal', 'large'],
+      control: 'inline-radio',
+    },
+    textColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    textSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    type: {
+      options: ['text', 'number', 'password'],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    borderColor: 'surfaceBorderTertiary',
+    placeholder: 'Placeholder',
+    shape: 'rounded',
+    textSize: 'm',
+    value: 'Filled',
+  },
+}
+
+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',
+  },
+}