kamotive_ui 1.2.2 → 1.2.4

package/dist/components/Dropdown/Dropdown.module.css

@@ -1,72 +1,69 @@
-.story--wrapper-dropdown {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
+.dropdown--container {
+  position: relative;
+  width: 100%;
+  max-width: 260px;
 }
-.option--wrapper{
+.dropdown--container-left {
   display: flex;
+  gap: 20px;
   align-items: center;
-  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: fit-content;
+  max-width: none;
 }
-.option--icon{
-  margin-left: 8px;
+.dropdown--container-label {
+  margin-top: 20px;
 }
-.dropdown--container{
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  display: inline-block;
-  position: relative;
+.dropdown--container-helperText {
+  margin-bottom: 15px;
 }
-.wrapper--left {
+
+.option--wrapper {
   display: flex;
-  flex-direction: row;
-  gap: 20px;
   align-items: center;
-  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.option--icon {
+  margin-left: 8px;
 }
 
 .button {
-  font-family: 'Raleway';
+  font-family: var(--font-family-main);
   font-style: normal;
   font-weight: 400;
   line-height: 16.5px;
- 
   border-radius: 10px;
   cursor: pointer;
-  /* padding: 0.5em 1em; */
   padding: 10px 15px;
   transition: all 0.3s ease;
-  width: 100%;
-  /* background-color: var(--white); */
   background-color: transparent;
-  color: rgba(60, 60, 67, 0.6);
+  color: var(--text-dark);
   border: 1px solid var(--grey-light);
+  /* mix-blend-mode: multiply; */
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 20px;
   justify-content: space-between;
-  min-width: fit-content;
- 
+  /* min-width: fit-content; */
+  position: relative;
+  width: 100%;
 }
-.button:hover{
+.button:hover {
   border: 1px solid #0d9aff00;
   box-shadow: 0px 0px 2px var(--blue-main);
 }
 .button:focus,
-.button:active{
+.button:active {
   border-color: var(--blue-main);
   box-shadow: none;
-  
 }
-.button--disabled{
+.button--disabled {
   background-color: rgba(120, 120, 128, 0.08);
   border: 1px solid #0d9aff00;
   color: rgba(60, 60, 67, 0.3);
 }
-.button--readOnly{
+.button--readOnly {
   background-color: rgba(120, 120, 128, 0.08);
   border: 1px solid #0d9aff00;
   color: var(--text-dark);
@@ -76,48 +73,74 @@
 .button--disabled:active,
 .button--readOnly:hover,
 .button--readOnly:focus,
-.button--readOnly:active{
+.button--readOnly:active {
   box-shadow: none;
   border: 1px solid #0d9aff00;
 }
-.button--default--item-selected{
+.button--error {
+  border-color: var(--error-main);
+  color: var(--error-main);
+}
+.button--icons--item-selected {
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.button-item--selected{
+.button-item--selected {
   color: var(--text-dark);
 }
 
 /* Размеры кнопок */
-.button--sm {
-  /* font-size: 0.8rem; */
-  font-size: 12px; 
-}
 .button--md {
-  /* font-size: 1rem; */
-  font-size: 14px; 
+  font-size: 12px;
 }
 .button--lg {
-  /* font-size: 1.2rem; */
-  font-size: 16px; 
-}
-
-.dropdown{
- position: absolute;
-display: flex;
-margin-top: 5px;
-flex-direction: column;
-align-items: flex-start;
-padding: 10px 0px;
-max-height: 175px;
-width: 100%;
-background: #FFFFFF;
-box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
-border-radius: 12px;
-overflow-y: auto;
-z-index: 1000;
-overflow-x: hidden;
+  font-size: 14px;
+}
+.button:focus-visible {
+  outline: none;
+}
+
+.resetButton,
+.dropdownIcon {
+  position: absolute;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.resetButton{
+  right: 35px;
+}
+.dropdownIcon{
+  right: 5px;
+}
+.resetButton:hover,
+.dropdownIcon:hover {
+  background-color: rgba(120, 120, 128, 0.08);
+  border-radius: 50%;
+}
+
+.dropdown {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  display: flex;
+  margin-top: 5px;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px 0px;
+  max-height: 175px;
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  overflow-y: auto;
+  z-index: 1000;
+  overflow-x: hidden;
 }
 
 .item--container {
@@ -126,13 +149,12 @@ overflow-x: hidden;
   margin: auto;
 }
 
-.item--container:hover{
+.item--container:hover,
+.item--container--active {
   background-color: rgba(120, 120, 128, 0.08);
   border-radius: 5px;
-  width: 87%;
   margin: auto;
-  }
-
+}
 
 .item-block {
   cursor: pointer;
@@ -141,30 +163,19 @@ overflow-x: hidden;
 }
 .item-block--disabled {
   color: var(--text-light);
-  cursor: not-allowed ;
+  cursor: not-allowed;
 }
-.item-block-default,
+.item-block-icons,
 .item-block-text {
   display: grid;
   grid-template-columns: auto 1fr;
   justify-content: flex-start;
   align-items: center;
-  gap:10px;
-}
-.item-block-default--selected {
-  display: grid;
-  grid-template-columns: auto 1fr 20px;
-  justify-content: space-between;
-  align-items: center;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   gap: 10px;
-  color: var(--text-dark);
 }
-.item-block-text--selected{
+.item-block-icons--selected {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto 1fr 20px;
   justify-content: space-between;
   align-items: center;
   overflow-x: hidden;
@@ -174,24 +185,21 @@ overflow-x: hidden;
   color: var(--text-dark);
 }
 
-
-.item {  
+.item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%
+  max-width: 100%;
+  justify-self: self-start;
 }
 
 .label {
-  line-height: 14px;
-  font-weight: 400;
   transition: 0.3ms ease-out;
   /* color: var(--text-grey); */
 }
 .label--default {
-  font-size: 12px;
   position: absolute;
-  top: -20px;
+  top: -18px;
   cursor: text;
   white-space: nowrap;
   overflow: hidden;
@@ -199,9 +207,64 @@ overflow-x: hidden;
   max-width: calc(100% - 32px);
   color: var(--text-grey);
 }
+.label--default.lg {
+  font-size: 12px;
+}
+.label--default.md {
+  font-size: 10px;
+}
+
 .label--left {
-  font-size: 13px;
   color: var(--text-dark);
   min-width: fit-content;
 }
+.label--left.lg {
+  font-size: 14px;
+}
+.label--left.md {
+  font-size: 12px;
+}
+/* Стили для обязательного поля */
+.label--default.label--required {
+  position: relative;
+  top: 0;
+}
+.label--required::after {
+  content: '*';
+  color: var(--error-main);
+  position: absolute;
+  margin-left: 2px;
+  top: 2px;
+  font-size: 22px;
+}
+
+.item-selected {
+  color: var(--text-dark);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-placeholder {
+  color: var(--text-grey);
+  transition: 0.3ms ease-out;
+}
 
+.helperText.md {
+  font-size: 10px;
+}
+
+.helperText.lg {
+  font-size: 12px;
+}
+.helperText {
+  position: absolute;
+  left: 0px;
+  bottom: -17px;
+  cursor: text;
+  transition: 0.3ms ease-out;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--error-main);
+}

package/dist/components/FileAttach/FileAttach.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FileAttachProps } from '../../types';
+export declare const FileAttach: FC<FileAttachProps>;

package/dist/components/FileAttach/FileAttach.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import styles from './FileAttach.module.css';
+import { Typography } from '../Typography/Typography';
+import { IconUpload } from '../../Icons';
+import { Loader } from '../Loader/Loader';
+export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
+    'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
+    'application/pdf': ['.pdf'],
+    'application/msword': ['.doc', '.docx'],
+}, addedFiles, setAddedFiles, disabled = false, }) => {
+    const [errorFiles, setErrorFiles] = useState([]);
+    const fileValidator = (file) => {
+        if (file.size > maxFileSize * 1024 * 1024 * 1024) {
+            return {
+                code: 'name-too-large',
+                message: `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
+            };
+        }
+        if (addedFiles.find((addedFile) => addedFile.name === file.name)) {
+            return {
+                code: 'repeating-file-name',
+                message: `Файл уже добавлен`,
+            };
+        }
+        if (addedFiles.length > maxFileCount - 1) {
+            return {
+                code: 'files-count-too-large',
+                message: `Максимальное количество файлов ${maxFileCount}`,
+            };
+        }
+        return null;
+    };
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop: (acceptedFiles, fileRejections) => {
+            setAddedFiles([...addedFiles, ...acceptedFiles]);
+            setErrorFiles([...errorFiles, ...fileRejections]);
+        },
+        validator: fileValidator,
+        accept: acceptedFormats,
+        maxFiles: maxFileCount,
+        disabled: disabled,
+    });
+    const acceptedFileItems = addedFiles.map((file, index) => (React.createElement(Loader, { name: file.name, size: file.size, onClick: () => deleteAcceptedFile(addedFiles, setAddedFiles, file.name), key: index })));
+    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(Loader, { name: file.name, size: file.size, error: errors[0].message, onClick: () => deleteRejectedFile(errorFiles, setErrorFiles, file.name), key: file.path })));
+    const deleteAcceptedFile = (addedFiles, setAddedFiles, fileName) => {
+        setAddedFiles(addedFiles.filter((file) => file.name !== fileName));
+    };
+    const deleteRejectedFile = (errorFiles, setErrorFiles, fileName) => {
+        setErrorFiles(errorFiles.filter(({ file }) => file.name !== fileName));
+    };
+    // Функция для получения всех доступных форматов в виде строки
+    const getAcceptedFormatsString = (acceptedFormats) => {
+        const formats = [];
+        for (const key in acceptedFormats) {
+            if (acceptedFormats.hasOwnProperty(key)) {
+                formats.push(...acceptedFormats[key].map(format => format.replace('.', '')));
+            }
+        }
+        return formats.join(', ');
+    };
+    return (React.createElement("section", { className: styles['fileAttach'] },
+        React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${disabled ? styles['disabled'] : ''}` })),
+            React.createElement("input", Object.assign({}, getInputProps())),
+            React.createElement(IconUpload, { htmlColor: disabled ? 'var(--grey-medium)' : 'var(--icons-grey)' }),
+            React.createElement(Typography, { variant: "Body2-Medium", color: disabled ? 'var(--grey-medium)' : 'var(--text-dark)' },
+                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043D\u0430 \u043E\u0431\u043B\u0430\u0441\u0442\u044C"),
+                React.createElement("span", null, " \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B")),
+            React.createElement("div", null,
+                maxFileSize && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" },
+                    `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
+                    " ",
+                    React.createElement("br", null))),
+                maxFileCount && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)))),
+        acceptedFormats && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `Поддерживаемые форматы: ${getAcceptedFormatsString(acceptedFormats)}`)),
+        (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
+            acceptedFileItems,
+            fileRejectionItems)) : (React.createElement(Typography, { variant: "Body2-Medium", color: "var(--text-dark)" }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B"))));
+};

package/dist/components/FileAttach/FileAttach.module.css

@@ -0,0 +1,36 @@
+.fileAttach {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    gap: 10px; 
+}
+
+.dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    gap: 10px; 
+    padding: 30px 20px;
+    border: 1px dashed var(--blue-main);
+    border-radius: 15px;
+    cursor: pointer;
+  }
+
+  .dropzone:hover {
+    background-color: var(--fills-active);
+  }
+
+  .dropzone.disabled {
+    background-color: var(--fills-disabled);
+    border-color: var(--grey-medium);
+    cursor: not-allowed;
+  }
+
+  .addedFiles {
+    display: flex;
+    flex-direction: column;
+    gap: 10px; 
+    overflow-y: auto;
+  }

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { InputProps } from 'kamotive_ui';
+import { InputProps } from '../../types';
 /**
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */

package/dist/components/Input/Input.js

@@ -1,37 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
+;
 import styles from './Input.module.css';
 import classNames from 'classnames';
+import { Typography } from '../Typography/Typography';
 /**
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */
-export const Input = ({ id, className, value, label, placeholder, size = 'md', onChange, icon, hasError = false, helperText, disabled = false, readOnly = false, isLeftLabel = false, multiline = false, resize = false, }) => {
-    const handleChange = (e) => {
-        if (onChange) {
-            onChange(e);
+export const Input = ({ id, label, placeholder, size = 'lg', value, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, required = false, }) => {
+    const [inputLabel, setInputLabel] = useState(label);
+    const handleChange = (event) => {
+        event.stopPropagation();
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (label) {
+            setInputLabel(label);
+        }
+        else if (placeholder && event.target.value) {
+            setInputLabel(placeholder);
+        }
+        else {
+            setInputLabel('');
         }
     };
-    const wrapperClassess = classNames(styles['wrapper'], {
-        'wrapper--left': isLeftLabel,
-    });
-    const inputWrapperClassess = classNames(styles['wrapper--input']);
-    const inputClassess = classNames(styles['inputText'], size, className, {
-        'input--error': hasError,
-        'readOnly': readOnly,
-        'input--withIcon': icon,
-        'textarea': multiline,
-        'resize': resize,
+    const wrapperClassess = classNames(styles['wrapper--input'], {
+        [styles['wrapper--left']]: isLeftLabel,
+        [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
+        [styles['wrapper--input-helperText']]: error,
     });
-    const labelClasses = classNames(styles['label'], {
-        'label--default': !isLeftLabel,
-        'label--left': isLeftLabel,
+    const inputClassess = classNames(styles.input, styles[size], className, {
+        [styles['input--error']]: error,
+        [styles['readOnly']]: readOnly,
+        [styles['input--withIcon']]: icon,
+        [styles['textarea']]: multiline,
+        // [styles['textarea-rows-&{rows}']]: multiline && rows,
+        [styles['resize']]: resize,
+        [styles['input--left']]: isLeftLabel,
     });
-    const iconClassess = classNames(styles['icon'], {
-        'input--withIcon': multiline,
+    const labelClasses = classNames(styles.label, styles[size], {
+        [styles['label--default']]: !isLeftLabel,
+        [styles['label--left']]: isLeftLabel,
+        [styles['label--required']]: required,
     });
     return (React.createElement("div", { className: wrapperClassess },
-        ((value && !isLeftLabel) || isLeftLabel) && (React.createElement("label", { className: labelClasses, htmlFor: id }, label)),
-        React.createElement("div", { className: inputWrapperClassess },
-            icon && React.createElement("div", { className: iconClassess }, icon),
-            multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly }))),
-        hasError && helperText && React.createElement("div", { className: "helperText" }, helperText)));
+        inputLabel && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, inputLabel)),
+        icon && React.createElement("div", { className: styles.icon }, icon),
+        multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, style: { height: `${rows * 20}px` } })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly })),
+        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
 };