Merge pull request #47 from Maxxnikitin/feature/update-inputs

src/__docz__/add-button.mdx

@@ -0,0 +1,22 @@
+---
+name: AddButton
+route: /add-button
+---
+
+import { Playground, Props } from 'docz'
+import { AddButton }  from '../';
+
+
+# AddButton
+
+## Properties
+
+<Props of={AddButton} />
+
+## Component
+
+<Playground>
+  <AddButton onClick={() => {}} extraClass='m-1' />
+</Playground>
+
+

src/__docz__/email-input.mdx

@@ -30,7 +30,7 @@ import { Props } from './components/props';
         };
         return (
             <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <EmailInput onChange={onChange} value={value} name={'email'} placeholder='Логин' isIcon={true} extraClass='mb-2' />
+                <EmailInput onChange={onChange} value={value} name={'email'} placeholder='Логин' isIcon={true}   checkValid={(isValid) => console.log(isValid)}extraClass='mb-2' />
                 <EmailInput onChange={onChange} value={value} name={'email'} isIcon={false} />
             </div>
         )

src/__docz__/move-button.mdx

@@ -0,0 +1,22 @@
+---
+name: MoveButton
+route: /move-button
+---
+
+import { Playground, Props } from 'docz'
+import { MoveButton }  from '../';
+
+
+# MoveButton
+
+## Properties
+
+<Props of={MoveButton} />
+
+## Component
+
+<Playground>
+  <MoveButton isUpDisabled={true} isDownDisabled={false} handleMoveDown={() => {}} handleMoveUp={() => {}} />
+</Playground>
+
+

src/__docz__/password-input.mdx

@@ -35,6 +35,7 @@ import { Props } from './components/props';
                     value={value}
                     name={'password'}
                     extraClass='mb-2'
+                    checkValid={(isValid) => console.log(isValid)}
                 />
                 <PasswordInput
                     onChange={onChange}

src/__docz__/refresh-button.mdx

@@ -0,0 +1,22 @@
+---
+name: RefreshButton
+route: /refresh-button
+---
+
+import { Playground, Props } from 'docz'
+import { RefreshButton }  from '../';
+
+
+# RefreshButton
+
+## Properties
+
+<Props of={RefreshButton} />
+
+## Component
+
+<Playground>
+  <RefreshButton onClick={() => {}} extraClass='m-1' />
+</Playground>
+
+

src/index.tsx

@@ -1,4 +1,6 @@
 import { Button } from './ui/button';
+import { AddButton } from './ui/add-button';
+import { RefreshButton } from './ui/refresh-button';
 import { Logo } from './ui/logo';
 import { ConstructorElement } from './ui/constructor-element';
 import { Tab } from './ui/tab';
@@ -7,6 +9,7 @@ import { Input } from './ui/input';
 import { Counter } from './ui/counter';
 import { EmailInput } from './ui/email-input';
 import { PasswordInput } from './ui/password-input';
+import { MoveButton } from './ui/move-button';
 import {
     BurgerIcon,
     CloseIcon,
@@ -33,6 +36,8 @@ import './ui/box.css';
 
 export {
     Button,
+    AddButton,
+    RefreshButton,
     Logo,
     ConstructorElement,
     Tab,
@@ -58,4 +63,5 @@ export {
     ArrowUpIcon,
     ArrowDownIcon,
     MenuIcon,
+    MoveButton,
 };

src/ui/add-button.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import React, { FC, ButtonHTMLAttributes } from 'react';
+import './common-button.css';
+import { PlusIcon } from './icons';
+
+type TProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    text?: string;
+    extraClass?: string;
+};
+
+export const AddButton: FC<TProps> = ({
+    text = 'Добавить',
+    type = 'button',
+    extraClass,
+    className,
+    ...rest
+}) => {
+    const classNames = clsx('common_button', extraClass, className);
+
+    return (
+        <button type={type} className={classNames} {...rest}>
+            <PlusIcon type="primary" />
+            {text}
+        </button>
+    );
+};

src/ui/common-button.css

@@ -0,0 +1,23 @@
+.common_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: var(--common-transition);
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  color: var(--text-primary-color);
+
+  font-family: "Jet Brains Mono";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.common_button:hover {
+  opacity: 0.9;
+}

src/ui/email-input.tsx

@@ -13,11 +13,15 @@ interface TEmailInputInterface
     placeholder?: string;
     isIcon?: boolean;
     extraClass?: string;
+    errorText?: string;
+    checkValid?: (isValid: boolean) => void;
     onChange(e: React.ChangeEvent<HTMLInputElement>): void;
 }
 
 export const EmailInput: React.FC<TEmailInputInterface> = ({
     value,
+    errorText = 'Ой, произошла ошибка!',
+    checkValid,
     onChange,
     size = 'default',
     placeholder = 'E-mail',
@@ -37,7 +41,9 @@ export const EmailInput: React.FC<TEmailInputInterface> = ({
     };
 
     const validateField = (value: string) => {
-        setError(!validateEmail(value));
+        const isValid = validateEmail(value);
+        setError(!isValid);
+        checkValid?.(isValid);
     };
 
     const onFocus = () => {
@@ -52,6 +58,7 @@ export const EmailInput: React.FC<TEmailInputInterface> = ({
         }
         isIcon && setDisabled(true);
     };
+
     return (
         <Input
             type="email"
@@ -65,7 +72,7 @@ export const EmailInput: React.FC<TEmailInputInterface> = ({
             error={error}
             disabled={fieldDisabled}
             onIconClick={onIconClick}
-            errorText={'Ой, произошла ошибка!'}
+            errorText={errorText}
             size={size}
             extraClass={extraClass}
             {...rest}

src/ui/icons/arrow-down-icon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const ArrowDownIcon = ({ type, onClick }: TIconProps) => {
+export const ArrowDownIcon: FC<TIconProps> = ({ type, className, onClick }) => {
     return (
         <svg
             width="24"
@@ -10,6 +10,7 @@ export const ArrowDownIcon = ({ type, onClick }: TIconProps) => {
             fill={getIconColor(type)}
             onClick={onClick}
             xmlns="http://www.w3.org/2000/svg"
+            className={className}
         >
             <path
                 d="M10.9541 15.6475C11.5164 16.1175 12.4836 16.1175 13.0459 15.6475L17.6243 11.8214C18.4585 11.1242 17.8129 10 16.5783 10H7.42166C6.1871 10 5.54152 11.1242 6.37574 11.8214L10.9541 15.6475Z"

src/ui/icons/arrow-up-icon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const ArrowUpIcon = ({ type, onClick }: TIconProps) => {
+export const ArrowUpIcon: FC<TIconProps> = ({ type, className, onClick }) => {
     return (
         <svg
             width="24"
@@ -10,6 +10,7 @@ export const ArrowUpIcon = ({ type, onClick }: TIconProps) => {
             fill={getIconColor(type)}
             onClick={onClick}
             xmlns="http://www.w3.org/2000/svg"
+            className={className}
         >
             <path
                 d="M10.9541 10.3525C11.5164 9.88251 12.4836 9.88251 13.0459 10.3525L17.6243 14.1786C18.4585 14.8758 17.8129 16 16.5783 16H7.42166C6.1871 16 5.54152 14.8758 6.37574 14.1786L10.9541 10.3525Z"

src/ui/icons/burger-icon.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const BurgerIcon = ({ type }: TIconProps) => {
+export const BurgerIcon: FC<TIconProps> = ({ type, className }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
+            className={className}
         >
             <path
                 fillRule="evenodd"

src/ui/icons/check-mark-icon.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const CheckMarkIcon = ({ type }: TIconProps) => {
+export const CheckMarkIcon: FC<TIconProps> = ({ type, className }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
+            className={className}
         >
             <path
                 fillRule="evenodd"

src/ui/icons/close-icon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const CloseIcon = ({ type, onClick }: TIconProps) => {
+export const CloseIcon: FC<TIconProps> = ({ type, className, onClick }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -10,6 +10,7 @@ export const CloseIcon = ({ type, onClick }: TIconProps) => {
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
             onClick={onClick}
+            className={className}
         >
             <path
                 fillRule="evenodd"

src/ui/icons/currency-icon.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const CurrencyIcon = ({ type }: TIconProps) => {
+export const CurrencyIcon: FC<TIconProps> = ({ type, className }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
+            className={className}
         >
             <path d="M10.3849 2.65561C10.5818 2.18895 10.0397 1.75899 9.63011 2.05689L1.41184 8.03382C1.15309 8.222 1.00001 8.52262 1.00001 8.84256V13.4828C1.00001 13.6932 1.13171 13.8811 1.32948 13.9529L4.15637 14.9785C4.65685 15.1601 5.21185 14.9177 5.41879 14.4271L10.3849 2.65561Z" />
             <path d="M1.62116 15.9076C1.32217 15.7916 1.00001 16.0122 1 16.3329C1 16.4889 1.07968 16.634 1.21127 16.7178L10.2307 22.4574C10.3326 22.5223 10.4408 22.3844 10.3536 22.3008L5.22556 17.3879C5.13043 17.2968 5.01823 17.2254 4.89541 17.1777L1.62116 15.9076Z" />

src/ui/icons/delete-icon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const DeleteIcon = ({ type, onClick }: TIconProps) => {
+export const DeleteIcon: FC<TIconProps> = ({ type, className, onClick }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -10,6 +10,7 @@ export const DeleteIcon = ({ type, onClick }: TIconProps) => {
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
             onClick={onClick}
+            className={className}
         >
             <path
                 d="M18.9391 8.69713C19.1384 8.69713 19.3193 8.78413 19.4623 8.93113C19.5955 9.08813 19.6626 9.28313 19.6432 9.48913C19.6432 9.55712 19.1102 16.2971 18.8058 19.134C18.6152 20.875 17.4929 21.932 15.8094 21.961C14.5149 21.99 13.2496 22 12.0038 22C10.6811 22 9.38763 21.99 8.13206 21.961C6.50498 21.922 5.38168 20.846 5.20079 19.134C4.88763 16.2871 4.36439 9.55712 4.35467 9.48913C4.34494 9.28313 4.41108 9.08813 4.54529 8.93113C4.67756 8.78413 4.86818 8.69713 5.06852 8.69713H18.9391ZM14.0647 2C14.9488 2 15.7385 2.61699 15.967 3.49699L16.1304 4.22698C16.2627 4.82197 16.7781 5.24297 17.3714 5.24297H20.2871C20.6761 5.24297 21 5.56596 21 5.97696V6.35696C21 6.75795 20.6761 7.09095 20.2871 7.09095H3.71385C3.32386 7.09095 3 6.75795 3 6.35696V5.97696C3 5.56596 3.32386 5.24297 3.71385 5.24297H6.62957C7.22185 5.24297 7.7373 4.82197 7.87054 4.22798L8.02323 3.54598C8.26054 2.61699 9.0415 2 9.93527 2H14.0647Z"

src/ui/icons/drag-icon.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const DragIcon = ({ type }: TIconProps) => {
+export const DragIcon: FC<TIconProps> = ({ type, className }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
+            className={className}
         >
             <path
                 fillRule="evenodd"

src/ui/icons/edit-icon.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const EditIcon = ({ type }: TIconProps) => {
+export const EditIcon: FC<TIconProps> = ({ type, className }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
+            className={className}
         >
             <path
                 fillRule="evenodd"

src/ui/icons/hide-icon.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { getIconColor, TIconProps } from './utils';
 
-export const HideIcon = ({ type }: TIconProps) => {
+export const HideIcon: FC<TIconProps> = ({ type, className }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill={getIconColor(type)}
+            className={className}
         >
             <path d="M19.1704 3.21413C19.4631 2.92862 19.9217 2.92862 20.2046 3.21413C20.4974 3.49964 20.4974 3.9722 20.2046 4.25771L18.4288 6.04952C19.8436 7.34907 21.0438 9.10149 21.9415 11.2083C22.0195 11.3954 22.0195 11.612 21.9415 11.7892C19.8534 16.6921 16.1358 19.6259 11.9987 19.6259H11.9889C10.1058 19.6259 8.30063 19.0056 6.71018 17.8735L4.81725 19.7834C4.67089 19.9311 4.4855 20 4.30011 20C4.11472 20 3.91957 19.9311 3.78297 19.7834C3.53903 19.5373 3.5 19.1435 3.69515 18.858L3.72442 18.8186L18.1556 4.25771C18.1751 4.23802 18.1946 4.21833 18.2044 4.19864C18.2239 4.17895 18.2434 4.15926 18.2532 4.13957L19.1704 3.21413ZM12.0013 3.38534C13.3966 3.38534 14.7529 3.72007 16.0018 4.35015L12.7429 7.63841C12.5087 7.59903 12.255 7.5695 12.0013 7.5695C9.84494 7.5695 8.09836 9.33177 8.09836 11.5075C8.09836 11.7635 8.12764 12.0195 8.16667 12.2558L4.55643 15.8984C3.5807 14.7564 2.7318 13.3781 2.05854 11.793C1.98049 11.6158 1.98049 11.3992 2.05854 11.2122C4.14662 6.30933 7.86419 3.38534 11.9916 3.38534H12.0013ZM15.2186 9.28855L14.1551 10.3617C14.3307 10.6964 14.4283 11.0902 14.4283 11.5037C14.4283 12.8525 13.3354 13.9551 11.9987 13.9551C11.5889 13.9551 11.1986 13.8567 10.8668 13.6795L9.80327 14.7526C10.4277 15.1759 11.1888 15.4319 11.9987 15.4319C14.1453 15.4319 15.8919 13.6696 15.8919 11.5037C15.8919 10.6865 15.6382 9.91863 15.2186 9.28855Z" />
         </svg>