@itcase/ui 1.2.19 → 1.2.21

package/dist/stories/FormFieldFileInput.stories.js

@@ -1,58 +0,0 @@
-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 / File Input',
-  component: Form,
-}
-
-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({
-    formFieldInput: yup
-      .string()
-      .test('formFieldInput', 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 = {
-    formFieldInput: {
-      type: formTypes.fileInput,
-      isRequired: true,
-      isPreviews: true,
-      showFilename: true,
-      size: 'normal',
-      name: 'formFieldInput',
-      hintTitle: 'Перетащите изображение или выберите файл с компьютера ',
-      hintTitleTextSize: 'm',
-      hintTitleTextColor: 'surfaceTextPrimary',
-      fill: 'surfacePrimary',
-      fillHover: 'surfacePrimaryHover',
-      borderColor: 'surfaceBorderTertiary',
-      thumbNameTextSize: 'm',
-      thumbNameTextColor: 'surfaceTextPrimary',
-      removeThumbText: 'удалить',
-      removeThumbTextSize: 's',
-      removeThumbTextColor: 'errorTextPrimary',
-      removeThumbTextHoverColor: 'errorTextPrimaryHover',
-      thumbBorderWidth: 1,
-      thumbBorderColor: 'surfaceBorderTertiary',
-    },
-  }
-  return <Form config={config} validationSchema={validationSchema} />
-}
-
-export const Normal = Template.bind({})

package/dist/stories/FormFieldInput.stories.js

@@ -1,66 +0,0 @@
-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 / Input',
-  component: Form,
-}
-
-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({
-    formFieldInput: yup
-      .string()
-      .test('formFieldInput', 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 = {
-    formFieldInput: {
-      type: formTypes.text,
-      isRequired: true,
-      name: 'formFieldInput',
-      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',
-      },
-      inputProps: {
-        width: 'fill',
-        caret: 'secondaryItemSecondary',
-        placeholder: 'Placeholder',
-        placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
-        borderColor: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
-        textSize: 'm',
-      },
-    },
-  }
-  return <Form config={config} validationSchema={validationSchema} />
-}
-
-export const Normal = Template.bind({})

package/dist/stories/FormFieldInputPassword.stories.js

@@ -1,66 +0,0 @@
-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 / Password',
-  component: Form,
-}
-
-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({
-    formFieldInput: yup
-      .string()
-      .test('formFieldInput', 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 = {
-    formFieldInput: {
-      type: formTypes.text,
-      isRequired: true,
-      name: 'formFieldInput',
-      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',
-      },
-      inputProps: {
-        width: 'fill',
-        caret: 'secondaryItemSecondary',
-        placeholder: 'Placeholder',
-        placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
-        borderColor: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
-        textSize: 'm',
-      },
-    },
-  }
-  return <Form config={config} validationSchema={validationSchema} />
-}
-
-export const Normal = Template.bind({})

package/dist/stories/FormFieldMultiBadgeSelect.stories.js

@@ -1,132 +0,0 @@
-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 / SelectBadgeMulti',
-  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',
-
-        showBadge: true,
-        badgeAppearance: 'accent',
-        badgeSize: 'm',
-        badgeTextSize: 'm',
-
-        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/FormFieldMultiSelect.stories.js

@@ -1,127 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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({})