Merge pull request #49 from aleksgrin/main

Select mobile view and small fixes
ostis-ai · Feb 1, 2024 · 78fb80e · 78fb80e
2 parents b85a678 + 66e0819
commit 78fb80e
Show file tree

Hide file tree

Showing 23 changed files with 440 additions and 155 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -105,3 +105,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Toasts Animation
 - Custom Toast positions
 - Tooltip classname
+
+## [v0.2.0] - 13.12.2023
+
+### Added
+
+- Theming for Chips, Popup, DropdownOption
+- Select mobile version
diff --git a/src/StorybookInit.tsx b/src/StorybookInit.tsx
@@ -12,6 +12,7 @@ import {
   AsyncMultipleSelectStory,
   AsyncSingleSelectStory,
   CustomChipsStory,
+  MobileMultipleSelectStory,
   MultiSearchSelectStory,
   SearchSelectStory,
   SelectPlaygroundStory,
@@ -46,7 +47,7 @@ export const StorybookInit = () => {
           <Global />
           <Storybook>
             <StoryHeader header="Select">
-              <StoryItem name="Select Playground">
+              <StoryItem name="Select playground">
                 <SelectPlaygroundStory />
               </StoryItem>
               <StoryItem name="Simple select">
@@ -70,12 +71,15 @@ export const StorybookInit = () => {
               <StoryItem name="Async single select">
                 <AsyncSingleSelectStory />
               </StoryItem>
-              <StoryItem name="Async miltiple select">
+              <StoryItem name="Async multiple select">
                 <AsyncMultipleSelectStory />
               </StoryItem>
+              <StoryItem name="Mobile multiple select">
+                <MobileMultipleSelectStory />
+              </StoryItem>
             </StoryHeader>
             <StoryHeader header="Toast">
-              <StoryItem name="Toast Playground">
+              <StoryItem name="Toast playground">
                 <ToastProvider>
                   <ToastPlaygroundStory />
                 </ToastProvider>

diff --git a/src/assets/close.svg b/src/assets/close.svg
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,7 +3,7 @@ import { ButtonProps } from './types';
 
 export const Button = ({ variant = 'contained', color = 'primary', size = 'lg', children, ...props }: ButtonProps) => {
   return (
-    <Styled.Button variant={variant} color={color} size={size} {...props}>
+    <Styled.Button $variant={variant} $color={color} $size={size} {...props}>
       {children}
     </Styled.Button>
   );

diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts
@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
 
 type ButtonProps = {
-  variant: 'contained' | 'outlined';
-  color: 'primary' | 'secondary';
-  size: 'lg' | 'md' | 'sm';
+  $variant: 'contained' | 'outlined';
+  $color: 'primary' | 'secondary';
+  $size: 'lg' | 'md' | 'sm';
 };
 
 export const Button = styled.button<ButtonProps>`
@@ -27,30 +27,30 @@ export const Button = styled.button<ButtonProps>`
 
   /* Variants */
   ${(props) =>
-    props.variant === 'contained' &&
+    props.$variant === 'contained' &&
     css`
       border: none;
     `}
 
   /* Sizes */
   ${(props) =>
-    props.size === 'lg' &&
+    props.$size === 'lg' &&
     css`
       padding: ${({ theme }) => theme.button.size.large.padding};
       font-size: ${({ theme }) => theme.button.font.large.fontSize};
       line-height: ${({ theme }) => theme.button.font.large.lineHeight};
     `}
 
   ${(props) =>
-    props.size === 'md' &&
+    props.$size === 'md' &&
     css`
       padding: ${({ theme }) => theme.button.size.medium.padding};
       font-size: ${({ theme }) => theme.button.font.medium.fontSize};
       line-height: ${({ theme }) => theme.button.font.medium.lineHeight};
     `}
 
   ${(props) =>
-    props.size === 'sm' &&
+    props.$size === 'sm' &&
     css`
       padding: ${({ theme }) => theme.button.size.small.padding};
       font-size: ${({ theme }) => theme.button.font.small.fontSize};

diff --git a/src/components/DropdownOption/styled.ts b/src/components/DropdownOption/styled.ts
@@ -5,16 +5,16 @@ export const Option = styled.div`
   flex: 0 0 auto;
   align-items: center;
 
-  font-family: 'Roboto';
-  font-size: 20px;
-  line-height: 24px;
-  color: #454545;
+  font-family: ${({ theme }) => theme.dropdownOption.font.fontFamily};
+  font-size: ${({ theme }) => theme.dropdownOption.font.fontSize};
+  line-height: ${({ theme }) => theme.dropdownOption.font.lineHeight};
+  color: ${({ theme }) => theme.dropdownOption.colors.text};
 
   word-break: break-word;
 
-  padding: 8px 16px;
+  padding: ${({ theme }) => theme.dropdownOption.size.padding};
 
   background-color: transparent;
-  
+
   cursor: pointer;
 `;
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,20 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+import { TSize } from './model';
+import { Wrapper } from './styled';
+
+export interface IIconButtonProps {
+  children: ReactNode;
+  size?: TSize;
+  disabled?: boolean;
+  className?: string;
+  onClick?: MouseEventHandler;
+}
+
+export const IconButton = ({ children, className, size = 'l', disabled, onClick }: IIconButtonProps) => {
+  return (
+    <Wrapper className={className} $size={size} disabled={disabled} onClick={onClick} type="button">
+      {children}
+    </Wrapper>
+  );
+};
diff --git a/src/components/IconButton/index.ts b/src/components/IconButton/index.ts
@@ -0,0 +1 @@
+export * from './IconButton'
diff --git a/src/components/IconButton/model.ts b/src/components/IconButton/model.ts
@@ -0,0 +1 @@
+export type TSize = 's' | 'm' | 'l' | 'xl';
diff --git a/src/components/IconButton/styled.ts b/src/components/IconButton/styled.ts
@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+
+import { TSize } from './model';
+
+export const Wrapper = styled.button<{ $size: TSize }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  outline: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 10px;
+
+  background: #fff;
+
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: #ebebeb;
+  }
+
+  &:active {
+    box-shadow: inset 0 0 0 2px #dadada;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    background-color: #ebebeb;
+
+    pointer-events: none;
+  }
+
+  /* Sizes */
+  ${(props) =>
+    props.$size === 's' &&
+    css`
+      width: 24px;
+      height: 24px;
+
+      border-radius: 4px;
+
+      &:active {
+        border: 1px solid #dadada;
+      }
+    `}
+
+  ${(props) =>
+    props.$size === 'm' &&
+    css`
+      width: 36px;
+      height: 36px;
+
+      padding: 6px;
+      border-radius: 8px;
+    `}
+  
+	${(props) =>
+    props.$size === 'l' &&
+    css`
+      width: 42px;
+      height: 42px;
+      padding: 9px;
+
+      border-radius: 10px;
+    `}
+  
+	${(props) =>
+    props.$size === 'xl' &&
+    css`
+      width: 48px;
+      height: 48px;
+      padding: 12px;
+
+      border-radius: 10px;
+    `}
+`;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -7,14 +7,29 @@ import * as Styled from './styled';
 export interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
   iconLeft?: ReactNode;
   iconRight?: ReactNode;
+  showPasswordIcon?: ReactNode;
+  hidePasswordIcon?: ReactNode;
   status?: InputStatus;
   inputClassName?: string;
   isSearch?: boolean;
 }
 
 export const Input = forwardRef<HTMLInputElement, IInputProps>(
   (
-    { iconLeft, iconRight, type, status, className, inputClassName, isSearch = false, disabled, style, ...restProps },
+    {
+      iconLeft,
+      iconRight,
+      type,
+      status,
+      className,
+      inputClassName,
+      isSearch = false,
+      disabled,
+      style,
+      showPasswordIcon = <Styled.ShowPassword />,
+      hidePasswordIcon = <Styled.HidePassword />,
+      ...restProps
+    },
     ref,
   ) => {
     const [isFocused, setIsFocused] = useState(false);
@@ -52,10 +67,10 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
 
     return (
       <Styled.Wrapper
-        isSearch={isSearch}
-        isFocused={isFocused}
-        isError={status === 'error'}
-        isDisabled={disabled}
+        $isSearch={isSearch}
+        $isFocused={isFocused}
+        $isError={status === 'error'}
+        $isDisabled={disabled}
         className={className}
         style={style}
         onClick={onWrapperClick}
@@ -76,8 +91,16 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
         />
         {(iconRight || isPassword) && (
           <Styled.RightIcon>
-            {isPassword && isShowPassword && <Styled.ShowPassword onClick={onMakePasswordVisible} />}
-            {isPassword && !isShowPassword && <Styled.HidePassword onClick={onMakePasswordVisible} />}
+            {isPassword && isShowPassword && (
+              <Styled.PasswordIconWrapper onClick={onMakePasswordVisible}>
+                {showPasswordIcon}
+              </Styled.PasswordIconWrapper>
+            )}
+            {isPassword && !isShowPassword && (
+              <Styled.PasswordIconWrapper onClick={onMakePasswordVisible}>
+                {hidePasswordIcon}
+              </Styled.PasswordIconWrapper>
+            )}
             {iconRight}
           </Styled.RightIcon>
         )}

diff --git a/src/components/Input/styled.ts b/src/components/Input/styled.ts
@@ -4,10 +4,10 @@ import AuthPassword from './assets/authorization-password.svg';
 import AuthPasswordCrossed from './assets/eyeCrossed.svg';
 
 type WrapperProps = {
-  isFocused: boolean;
-  isDisabled?: boolean;
-  isSearch: boolean;
-  isError: boolean;
+  $isFocused: boolean;
+  $isDisabled?: boolean;
+  $isSearch: boolean;
+  $isError: boolean;
 };
 
 export const Wrapper = styled.div<WrapperProps>`
@@ -37,7 +37,7 @@ export const Wrapper = styled.div<WrapperProps>`
   }
 
   ${(props) =>
-    props.isFocused &&
+    props.$isFocused &&
     css`
       border-color: ${({ theme }) => theme.input.colors.borderFocused};
 
@@ -47,7 +47,7 @@ export const Wrapper = styled.div<WrapperProps>`
     `}
 
   ${(props) =>
-    props.isError &&
+    props.$isError &&
     css`
       border-color: ${({ theme }) => theme.input.colors.borderError};
 
@@ -57,7 +57,7 @@ export const Wrapper = styled.div<WrapperProps>`
     `}
 
 	${(props) =>
-    props.isDisabled &&
+    props.$isDisabled &&
     css`
       background-color: ${({ theme }) => theme.input.colors.disabled.background};
       border-color: ${({ theme }) => theme.input.colors.disabled.border};
@@ -111,6 +111,10 @@ export const RightIcon = styled.div`
   align-items: center;
 `;
 
+export const PasswordIconWrapper = styled.div`
+  flex-shrink: 0;
+`;
+
 export const HidePassword = styled(AuthPassword)`
   flex-shrink: 0;
   padding: 0px 1px;

diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -3,13 +3,12 @@ import ReactDOM from 'react-dom';
 
 import { ModalWrap, Overlay } from './styled';
 
-const body = document.body;
-
-interface IProps {
+export interface IPopupProps {
   onClose: () => void;
+  className?: string;
 }
 
-export const Popup = ({ children, onClose }: PropsWithChildren<IProps>) => {
+export const Popup = ({ children, className, onClose }: PropsWithChildren<IPopupProps>) => {
   const closeByEscape = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -20,15 +19,17 @@ export const Popup = ({ children, onClose }: PropsWithChildren<IProps>) => {
   );
 
   useEffect(() => {
-    window.addEventListener('keydown', (e) => closeByEscape(e));
-    return window.removeEventListener('keydown', (e) => closeByEscape(e));
+    window.addEventListener('keydown', closeByEscape);
+    return () => {
+      window.removeEventListener('keydown', closeByEscape);
+    };
   }, [onClose, closeByEscape]);
 
   return ReactDOM.createPortal(
     <>
-      <Overlay onClick={() => onClose()} />
-      <ModalWrap>{children}</ModalWrap>
+      <Overlay onClick={onClose} />
+      <ModalWrap className={className}>{children}</ModalWrap>
     </>,
-    body,
+    document.body,
   );
 };