kamotive_ui 1.2.0 → 1.2.2

package/dist/components/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,266 @@
+.story--wrapper-colorpicker {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+  width: 900px;
+}
+
+.colorPicker {
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 50%;
+  border: none;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16.5px;
+  font-size: 16px;
+}
+
+.colorPicker:hover{
+  box-shadow: 0px 0px 2.9px rgba(0, 0, 0, 0.1);
+  background-color: var(--white);
+  border-radius: 50%;
+  padding: 0;
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16.5px;
+  font-size: 16px;
+
+}
+.colorPicker--defaultColor{
+  background: conic-gradient(
+    rgba(255, 59, 48) 0deg,
+    rgb(255, 59, 48) 35deg,
+    rgb(255, 204, 0) 70deg,
+    rgba(255, 255, 56) 105deg,
+    rgba(52, 199, 89) 140deg,
+    rgb(49, 255, 49) 185deg,
+    rgb(48, 176, 199) 210deg,
+    rgb(0, 122, 255) 245deg,
+    rgb(88, 86, 214) 290deg,
+    rgba(175, 82, 222) 325deg,
+    rgba(255, 59, 48) 360deg
+  );
+}
+/* .colorPicker--default::before {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  background: conic-gradient(
+    rgba(255, 59, 48) 0deg,
+    rgb(255, 59, 48) 35deg,
+    rgb(255, 204, 0) 70deg,
+    rgba(255, 255, 56) 105deg,
+    rgba(52, 199, 89) 140deg,
+    rgb(49, 255, 49) 185deg,
+    rgb(48, 176, 199) 210deg,
+    rgb(0, 122, 255) 245deg,
+    rgb(88, 86, 214) 290deg,
+    rgba(175, 82, 222) 325deg,
+    rgba(255, 59, 48) 360deg
+  );
+} */
+
+
+
+/* Обертка для всех цветов */
+.colorPickerWrapper {
+  display: flex;
+  gap: 5px;
+  width: fit-content;
+  align-items: center;
+  border-radius: 6px;
+  justify-content: center;
+  box-shadow: 0px 0px 2.9px rgba(0, 0, 0, 0.1);
+  background-color: var(--white);
+  padding: 5px;
+}
+
+
+/* Обертка для каждого цвета */
+.circle {
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  position: relative;
+  /* margin: 3px; */
+}
+
+
+/* Заданный основной цвет */
+.mainColor {
+  position: relative;
+  margin-right: 5px;
+}
+
+.mainColor::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: -6px;
+  transform: translateY(-50%);
+  width: 1px; 
+  height: 20px;
+  background-color: var(--grey-light); 
+}
+
+/* Обертка для выбора цветов */
+.colorPicker{
+  position: relative;
+  display: inline-block;
+}
+
+/* Радужный цветовой круг для незаданного цвета */
+.colorCircleDefault {
+  background: conic-gradient(
+    rgba(255, 59, 48) 0deg,
+    rgb(255, 59, 48) 35deg,
+    rgb(255, 204, 0) 70deg,
+    rgba(255, 255, 56) 105deg,
+    rgba(52, 199, 89) 140deg,
+    rgb(49, 255, 49) 185deg,
+    rgb(48, 176, 199) 210deg,
+    rgb(0, 122, 255) 245deg,
+    rgb(88, 86, 214) 290deg,
+    rgba(175, 82, 222) 325deg,
+    rgba(255, 59, 48) 360deg
+  );
+}
+/* Обертка для выпадающего списка цветов */
+.popover {
+  position: absolute;
+  left: 0;
+  z-index: 100;
+}
+
+.w-color-swatch{
+  padding: 10px !important;
+  border-radius: 10px !important;
+  width: fit-content !important;
+  height: fit-content !important;
+  margin: 10px 0 !important;
+  position: relative;
+  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2) !important;
+  --github-border: 0px !important;
+}
+
+.w-color-swatch > div:nth-child(1),
+.w-color-swatch > div:nth-child(2){
+ display: none !important;
+}
+.w-color-swatch > div:nth-child(3) {
+  width: 195px !important;
+  height: 195px !important;
+  border-radius: 10px !important;
+}
+
+.w-color-swatch > div:nth-child(4){
+  gap: 15px !important;
+  padding: 10px 0 !important;
+  /* width: 80%; */
+}
+.w-color-swatch > div:nth-child(5){
+  padding: 0 !important;
+
+}
+.w-color-swatch > div:nth-child(5) > div:nth-child(2){
+  display: none !important;
+  /* width: 80%; */
+}
+/* Для всех инпутов в пикере */
+.w-color-chrome .w-color-editable-input input {
+  font-family: 'Raleway' !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 14px !important;
+  font-size: 12px !important;
+  margin: 0 !important;
+}
+.w-color-editable-input{
+  margin: 0 !important;
+  max-width: 30px !important;
+  flex-direction: column-reverse !important;
+  --editable-input-box-shadow : none !important;
+}
+.w-color-editable-input-rgba{
+  justify-content: end !important;
+}
+
+.w-color-editable-input > span {
+  padding-top: 0 !important;
+}
+.w-color-editable-input:nth-child(1)> input{
+  border-radius: 10px 0 0 10px !important;
+border: 1px solid var(--grey-light) !important;
+}
+.w-color-editable-input:nth-child(2)> input{
+  border-radius: 0 0 0 0px !important;
+border: 1px solid var(--grey-light) !important;
+border-left: none !important;
+}
+.w-color-editable-input:nth-child(3)> input{
+  border-radius: 0 0 0 0px !important;
+
+  border: 1px solid var(--grey-light) !important;
+  border-left: none !important; 
+}
+.w-color-editable-input:nth-child(4)> input{
+  border-radius: 0px 10px 10px 0px !important;
+  border: 1px solid var(--grey-light) !important;
+  border-left: none !important; 
+}
+/* Для лейблов */
+.w-color-chrome-fields.w-color-editable-input label {
+  font-family: 'Raleway' !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 16.5px !important;
+  font-size: 16px !important;
+}
+
+.w-color-alpha-horizontal > div.w-color-interactive{
+  border-radius: 8px !important;
+}
+.w-color-alpha-horizontal:first-of-type > div:first-child{
+  border-radius: 50px !important;
+}
+.w-color-alpha-horizontal:nth-of-type(2) > div:first-child{
+  border-radius: 50px !important;
+}
+
+.colorPickerIcon {
+  position: absolute;
+  top: 68%;
+  left: 8px;
+  z-index: 200;
+  padding: 10px;
+}
+
+.hex{
+  position: absolute;
+  bottom: 20px;
+  left: -10px;
+}
+.hex .w-color-editable-input{
+    border-radius: 10px !important; 
+}
+.hex > .w-color-editable-input > input {
+  /* padding: 0 !important; */
+  font-size: 12px !important;
+  font-family: 'Raleway' !important;
+  padding: 5px !important;
+  width: 70px !important;
+  height: 45px !important;
+  border-radius: 10px !important; 
+  text-align: center !important;
+}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { DropdownProps } from 'kamotive_ui';
+/**
+ * Компонент Dropdown позволяет пользователям выбирать однин вариант из выпадающего меню
+*/
+export interface DropdownListItemProps {
+    item: DropdownProps['items'][number];
+    size: 'sm' | 'md' | 'lg';
+    selectedItem: DropdownProps['items'][number] | null | string | number;
+    style?: 'default' | 'text';
+    onChange: (value: DropdownProps['items'][number]) => void;
+}
+export declare const DropdownListItem: FC<DropdownListItemProps>;
+export declare const Dropdown: FC<DropdownProps>;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Dropdown.module.css';
+import classNames from 'classnames';
+import { ChevronDown10 } from '../../Icons/ChevronDown/ChevronDown10';
+import { ChevronUp10 } from '../../Icons/ChevronUp/ChevronUp10';
+import { IconCheck10 } from '../../Icons/IconCheck/IconCheck10';
+export const DropdownListItem = ({ item, size = 'md', selectedItem, style, onChange }) => {
+    var _a;
+    const handleItemClick = (item, disabled) => {
+        if (!disabled) {
+            onChange(item);
+        }
+    };
+    const itemClassess = classNames(styles[`item-block`], styles[`button--${size}`], { 'item-block--selected': (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) || (typeof selectedItem === 'string' || typeof selectedItem === 'number') && selectedItem === item }, { 'item-block--disabled': item === null || item === void 0 ? void 0 : item.disabled });
+    const itemBlock = classNames(styles[`item-block`], styles[`item-block-${style}`], { [`item-block-${style}--selected`]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value }, { 'item-block--disabled': item.disabled });
+    return (React.createElement("div", { className: styles[`item--container`] },
+        React.createElement("div", { className: styles[itemClassess], onClick: () => handleItemClick(item, item.disabled) },
+            React.createElement("div", { className: itemBlock },
+                style === 'default' && item.icon && React.cloneElement(item.icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' }),
+                React.createElement("div", { className: styles["item"] },
+                    React.createElement("span", null, (item === null || item === void 0 ? void 0 : item.value) || item)),
+                (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value && React.createElement(IconCheck10, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: '#0D99FF' })),
+            item.isDivider && React.createElement("div", { className: styles["divider"] })),
+        (item === null || item === void 0 ? void 0 : item.children) && (React.createElement("div", { className: styles["nestedMenu"] }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => (React.createElement(DropdownListItem, { key: index, item: child, size: size, selectedItem: selectedItem, onChange: onChange })))))));
+};
+export const Dropdown = ({ id, name, label, size = 'md', disabled, className, defaultValue, items, isOpened = false, style = 'default', readOnly = false, isLeftLabel = false }) => {
+    const [isOpen, setIsOpen] = useState(isOpened);
+    const [selectedItem, setSelectedItem] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(undefined);
+    const icon = !isOpen ? React.createElement(ChevronDown10, null) : React.createElement(ChevronUp10, null);
+    const handleToggle = () => {
+        setIsOpen(prev => !prev);
+    };
+    const onChange = (item) => {
+        if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== item.value) {
+            setSelectedItem(item);
+            setIsOpen(false);
+        }
+        else {
+            setSelectedItem(null);
+        }
+    };
+    const wrapperClassess = classNames(styles[`dropdown--container`], {
+        'wrapper--left': isLeftLabel,
+    });
+    const buttonClassess = classNames(styles['button'], className, styles[`button--${size}`], { 'button-item--selected': (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !disabled }, { 'button--readOnly': readOnly }, { 'button--disabled': disabled });
+    const dropdownClassess = classNames(styles['dropdown'], className, {
+        'dropdown--disabled': disabled,
+    });
+    const labelClasses = classNames(styles['label'], { 'label--default': !isLeftLabel,
+        'label--left': isLeftLabel,
+    });
+    const checkItem = (item) => {
+        if (typeof item === 'object') {
+            if (item.value) {
+                return item;
+            }
+            else if (item.name && !item.value) {
+                return Object.assign(Object.assign({}, item), { value: name });
+            }
+            else if (item.description && !item.value) {
+                return Object.assign(Object.assign({}, item), { value: item.description });
+            }
+            else {
+                const keys = Object.keys(item);
+                if (keys.length) {
+                    const firstValue = item[keys[0]];
+                    return Object.assign(Object.assign({}, item), { value: firstValue });
+                }
+            }
+        }
+        else if (typeof item === 'string' || typeof item === 'number') {
+            return { value: item };
+        }
+        else {
+            return null;
+        }
+    };
+    const getDropdownMenu = () => {
+        // const menu = withPortal ? (
+        //   ReactDOM.createPortal(<DropdownMenu withPortal >{children}</DropdownMenu>, portalContainer)
+        // ) : <DropdownMenu>{children}</DropdownMenu>
+        const menu = isOpen && React.createElement("div", { className: styles[dropdownClassess] }, items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            var _a;
+            const modifiedItem = checkItem(item);
+            return (React.createElement(DropdownListItem, { key: (_a = item === null || item === void 0 ? void 0 : item.key) !== null && _a !== void 0 ? _a : index, item: modifiedItem, size: size, selectedItem: selectedItem, style: style, onChange: onChange }));
+        }));
+        return isOpen ? menu : null;
+    };
+    useEffect(() => {
+        if (containerRef.current) {
+            const textWidth = Math.max(name === null || name === void 0 ? void 0 : name.length, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.length) || 0);
+            let newWidth;
+            if (textWidth === (name === null || name === void 0 ? void 0 : name.length)) {
+                const inPixel = size === 'sm' ? 11 : size === 'md' ? 12 : 14;
+                newWidth = selectedItem ? textWidth * inPixel : textWidth * inPixel;
+            }
+            else {
+                const inPixel = size === 'sm' ? 9 : size === 'md' ? 10 : 12;
+                newWidth = textWidth * inPixel;
+            }
+            setContainerWidth(newWidth);
+        }
+    }, [selectedItem, name, isOpen, size]);
+    return (React.createElement("div", { className: styles[wrapperClassess], ref: containerRef, style: { width: containerWidth ? `${containerWidth}px` : 'auto' } },
+        selectedItem && label && (React.createElement("label", { className: labelClasses, htmlFor: id }, label)),
+        React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled },
+            React.createElement("div", { className: style === 'default' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) ? styles[`button--default--item-selected`] : '' },
+                style === 'default' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) && React.cloneElement(selectedItem.icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' }),
+                selectedItem ? selectedItem.value : name),
+            icon && React.cloneElement(icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' })),
+        getDropdownMenu()));
+};

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

@@ -0,0 +1,207 @@
+.story--wrapper-dropdown {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+  width: 900px;
+}
+.option--wrapper{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.option--icon{
+  margin-left: 8px;
+}
+.dropdown--container{
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16.5px;
+  display: inline-block;
+  position: relative;
+}
+.wrapper--left {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.button {
+  font-family: 'Raleway';
+  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);
+  border: 1px solid var(--grey-light);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+  min-width: fit-content;
+ 
+}
+.button:hover{
+  border: 1px solid #0d9aff00;
+  box-shadow: 0px 0px 2px var(--blue-main);
+}
+.button:focus,
+.button:active{
+  border-color: var(--blue-main);
+  box-shadow: none;
+  
+}
+.button--disabled{
+  background-color: rgba(120, 120, 128, 0.08);
+  border: 1px solid #0d9aff00;
+  color: rgba(60, 60, 67, 0.3);
+}
+.button--readOnly{
+  background-color: rgba(120, 120, 128, 0.08);
+  border: 1px solid #0d9aff00;
+  color: var(--text-dark);
+}
+.button--disabled:hover,
+.button--disabled:focus,
+.button--disabled:active,
+.button--readOnly:hover,
+.button--readOnly:focus,
+.button--readOnly:active{
+  box-shadow: none;
+  border: 1px solid #0d9aff00;
+}
+.button--default--item-selected{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.button-item--selected{
+  color: var(--text-dark);
+}
+
+/* Размеры кнопок */
+.button--sm {
+  /* font-size: 0.8rem; */
+  font-size: 12px; 
+}
+.button--md {
+  /* font-size: 1rem; */
+  font-size: 14px; 
+}
+.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;
+}
+
+.item--container {
+  padding: 0.5em 0.5em;
+  width: 87%;
+  margin: auto;
+}
+
+.item--container:hover{
+  background-color: rgba(120, 120, 128, 0.08);
+  border-radius: 5px;
+  width: 87%;
+  margin: auto;
+  }
+
+
+.item-block {
+  cursor: pointer;
+  color: var(--text-grey);
+  transition: background-color 0.2s ease;
+}
+.item-block--disabled {
+  color: var(--text-light);
+  cursor: not-allowed ;
+}
+.item-block-default,
+.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{
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: space-between;
+  align-items: center;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  gap: 10px;
+  color: var(--text-dark);
+}
+
+
+.item {  
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%
+}
+
+.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;
+  cursor: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 32px);
+  color: var(--text-grey);
+}
+.label--left {
+  font-size: 13px;
+  color: var(--text-dark);
+  min-width: fit-content;
+}
+

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

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

package/dist/components/Input/Input.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styles from './Input.module.css';
+import classNames from 'classnames';
+/**
+ * Компонент 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);
+        }
+    };
+    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 labelClasses = classNames(styles['label'], {
+        'label--default': !isLeftLabel,
+        'label--left': isLeftLabel,
+    });
+    const iconClassess = classNames(styles['icon'], {
+        'input--withIcon': multiline,
+    });
+    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)));
+};