@itcase/ui 1.0.100 → 1.0.102

package/dist/stories/Empty.stories.js

@@ -0,0 +1,115 @@
+import { buttonConfig } from '@itcase/ui/components/Button'
+import { Empty } from '@itcase/ui/components/Empty'
+import { Image } from '@itcase/ui/components/Image'
+import {
+  fillHoverProps,
+  fillProps,
+  shapeProps,
+  sizeProps,
+  textColorProps,
+  textSizeProps,
+  widthProps,
+} from '@itcase/ui/constants'
+
+import buttonAppearance from 'src/components/Button/appearance.json'
+
+buttonConfig.setAppearance(buttonAppearance)
+
+export default {
+  title: 'Atoms / Empty',
+  component: Empty,
+  argTypes: {
+    advancedProps: { control: 'boolean' },
+    buttonAfter: {
+      if: { arg: 'advancedProps' },
+    },
+    buttonBefore: {
+      if: { arg: 'advancedProps' },
+    },
+    buttonFill: {
+      options: fillProps,
+      control: 'select',
+    },
+    buttonFillHover: {
+      options: fillHoverProps,
+      control: 'select',
+    },
+    buttonLabelTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    buttonLabelTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    buttonShape: {
+      options: shapeProps,
+      control: 'inline-radio',
+    },
+    buttonSize: {
+      options: sizeProps,
+      control: 'inline-radio',
+    },
+    buttonWidth: {
+      options: widthProps,
+      control: 'inline-radio',
+    },
+    messageTextColor: {
+      options: textColorProps,
+      control: 'select',
+    },
+    messageTextSize: {
+      options: textSizeProps,
+      control: 'inline-radio',
+    },
+    buttonAppearance: {
+      options: [
+        null,
+        'accent',
+        'primary',
+        'secondary',
+        'surfacePrimary',
+        'surfaceSecondary',
+        'surfaceTertiary',
+        'surfaceDisabled',
+      ],
+      control: 'inline-radio',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    // before: <Image alt="search_sign" src="assets/img/search.svg" />,
+    message: 'message',
+    messageTextColor: 'surfaceTextPrimary',
+    messageTextSize: 'l',
+    buttonLabel: 'Label',
+    buttonLabelTextSize: 'm',
+    buttonShape: 'rounded',
+    buttonSize: 'xxl',
+    buttonWidth: 'fixed',
+    buttonAppearance: 'surfaceDisabled',
+  },
+}
+
+export const Accent = {
+  args: {
+    ...Default.args,
+    buttonAppearance: 'accent',
+  },
+}
+
+export const Primary = {
+  args: {
+    ...Default.args,
+    buttonAppearance: 'primary',
+  },
+}
+
+export const Secondary = {
+  args: {
+    ...Default.args,
+    buttonAppearance: 'secondary',
+  },
+}

package/dist/stories/FormFieldCheckbox.stories.js

@@ -0,0 +1,77 @@
+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 / Checkbox',
+  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({
+    formFieldCheckbox: yup
+      .string()
+      .test('formFieldCheckbox', 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 = {
+    formFieldCheckbox: {
+      type: formTypes.checkbox,
+      isRequired: true,
+      name: 'formFieldCheckbox',
+      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',
+        stateShape: 'rounded',
+        stateBorderColor: 'accentBorderSecondary',
+        stateBorderColorChecked: 'accentBorderSecondary',
+        stateBorderColorDisabled: 'accentBorderSecondary',
+        stateBorderColorDisabledChecked: 'accentBorderSecondary',
+        stateBorderWidth: 1,
+        stateFillChecked: 'accentPrimary',
+        stateFillDisabled: 'accentDisabled',
+        stateFillDisabledChecked: 'accentDisabled',
+        stateCheckmarkFill: 'accentItemPrimary',
+        stateCheckmarkFillDisabled: 'accentItemDisabled',
+      },
+    },
+  }
+  return <Form config={config} validationSchema={validationSchema} />
+}
+
+export const Normal = Template.bind({})

package/dist/stories/FormFieldChoice.stories.js

@@ -0,0 +1,75 @@
+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 / Choice',
+  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({
+    formFieldChoice: yup
+      .string()
+      .test('formFieldChoice', 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 = {
+    formFieldChoice: {
+      type: formTypes.choice,
+      isRequired: true,
+      name: 'formFieldChoice',
+      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',
+        size: 'normal',
+        shape: 'rounded',
+        borderColor: 'surfaceBorderTertiary',
+        labelTextActiveColor: 'surfaceTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'm',
+      },
+      options: [
+        { value: 1, label: 'Label 1' },
+        { value: 2, label: 'Label 2' },
+        { value: 3, label: 'Label 3' },
+        { value: 4, label: 'Label 4' },
+        { value: 5, label: 'Label 5' },
+      ],
+      active: {
+        value: 1,
+      },
+    },
+  }
+  return <Form config={config} validationSchema={validationSchema} />
+}
+
+export const Normal = Template.bind({})

package/dist/stories/FormFieldDatepicker.stories.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import * as yup from 'yup'
+
+import { formTypes } from '@itcase/forms'
+
+import Form from './form.js'
+
+import { defaultFieldProps, defaultInputProps, defaultDatepickerProps } from 'src/config/forms'
+import { DEFAULT_REQUIRED_MESSAGE } from 'src/config/forms/messages'
+
+export default {
+  title: 'Form Field / DatePicker',
+  component: Form,
+}
+
+const Template = (args) => {
+  const validationSchema = yup.object().shape({
+    formFieldDatePicker: yup.string().required(DEFAULT_REQUIRED_MESSAGE),
+    password: yup.string().trim().required(DEFAULT_REQUIRED_MESSAGE),
+  })
+
+  const config = {
+    formFieldDatePicker: {
+      type: formTypes.datePicker,
+      name: 'formFieldDatePicker',
+      fieldProps: {
+        ...defaultFieldProps,
+        label: args?.config?.fieldProps?.label || 'Дата',
+        message: 'Например: 20/06/2023',
+      },
+      inputProps: {
+        ...defaultInputProps,
+      },
+      datePickerProps: {
+        ...defaultDatepickerProps,
+      },
+    },
+  }
+  return <Form config={config} validationSchema={validationSchema} />
+}
+
+export const Date = Template.bind({})
+
+export const DateTime = Template.bind()
+DateTime.args = {
+  config: {
+    fieldProps: {
+      label: 'asdasdasdasdasd'
+    }
+  }
+}

package/dist/stories/FormFieldFileInput.stories.js

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

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

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

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