[MI-2711]: Create Countdown component

src/components/Countdown/Countdown.d.ts

@@ -38,4 +38,4 @@ export interface CountdownProps {
      * To be called when countdown is over
      */
     onFinished?: () => void;
-}
+}

src/components/Countdown/Countdown.stories.tsx

@@ -14,15 +14,14 @@ const CountdownTemplate: Story<CountdownProps> = (args) => <Countdown {...args}/
 // Default
 export const Default = CountdownTemplate.bind({});
 Default.args = {
-    endTime: 1676007000000, // 2023/02/10 11:00
+    endTime: Date.now() + 172800000, // Today + 2 Days
 };
 
 // Custom countdown
 export const Custom = CountdownTemplate.bind({});
 Custom.args = {
-    endTime: 1676007000000, // 2023/02/10 11:00
+    endTime: Date.now() + 172800000,
     showDays: true,
     showHours: true,
     showMinutes: true,
 };
-

src/components/Countdown/Countdown.styles.ts

@@ -3,50 +3,42 @@ import styled from 'styled-components';
 import Colors from '@Styles/colorsForJs.module.scss';
 
 // Styles from card wrapper
-export const CountdownWrapper = styled.div(() => {
-    return {
-        display: 'flex',
-        flexDirection: 'column' as const,
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: Colors.centerChannel_4,
-        borderRadius: '4px',
-        padding: 16,
-        minWidth: 'fit-content',
-    };
+export const CountdownWrapper = styled.div({
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: Colors.centerChannel_4,
+    borderRadius: '4px',
+    padding: 16,
+    minWidth: 'fit-content',
 });
 
 // Styles for timer
-export const Timer = styled.h2(() => {
-    return {
-        fontWeight: 600,
-        fontSize: '22px',
-        lineHeight: '28px',
-        color: Colors.centerChannel,
-        letterSpacing: '0.09em',
-        marginBottom: '4px',
-        minWidth: 'max-content',
-        minHeight: '28px',
-    };
+export const Timer = styled.h2({
+    fontWeight: 600,
+    fontSize: '22px',
+    lineHeight: '28px',
+    color: Colors.centerChannel,
+    letterSpacing: '1.4px',
+    marginBottom: '4px',
+    minWidth: 'max-content',
+    minHeight: '28px',
 });
 
 // Styles for time label
-export const TimeLabel = styled.p(() => {
-    return {
-        fontWeight: 400,
-        fontSize: '12px',
-        lineHeight: '20px',
-        color: Colors.centerChannel_72,
-        minWidth: '22px',
-        margin: 0,
-    };
+export const TimeLabel = styled.p({
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '20px',
+    color: Colors.centerChannel_72,
+    minWidth: '22px',
+    margin: 0,
 });
 
 // Styles for time label wrapper
-export const TimeLabelWrapper = styled.div(() => {
-    return {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 30,
-    };
-});
+export const TimeLabelWrapper = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 30,
+});

src/components/Countdown/index.ts

@@ -1 +1 @@
-export {Countdown} from './Countdown.component';
+export {Countdown} from './Countdown.component';

src/components/Input/Input.component.tsx

@@ -5,6 +5,8 @@ import {extendClassname} from '@Utils';
 
 import {InputErrorMessage} from 'commonStyledComponents/InputErrorMessage/InputErrorMessage.styles';
 
+import colors from '@Styles/colorsForJs.module.scss';
+
 import {InputProps} from './Input';
 import {
     StyledInput,
@@ -74,36 +76,48 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         }
     };
 
+    /**
+     * Handle focus event on input element
+     */
+    const handleOnInputFocus = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (onInputFocus) {
+            onInputFocus();
+        }
+        togglePlaceholderValue(event, 'focus');
+    };
+
+    /**
+     * Handle blur event on input element
+     */
+    const handleOnInputBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
+        togglePlaceholderValue(event, 'blur');
+    };
+
     return (
         <div>
             <StyledInputContainer
                 className={`mm-input ${className}`}
                 fullWidth={fullWidth}
             >
-                {iconName && <Icon
-                    name={iconName}
-                    size={16}
-                             />}
+                {iconName && (
+                    <Icon
+                        name={iconName}
+                        size={16}
+                    />
+                )}
                 <StyledInput
                     ref={ref}
                     placeholder={inputLabel}
-                    onFocus={(event: React.ChangeEvent<HTMLInputElement>) => {
-                        if (onInputFocus) {
-                            onInputFocus();
-                        }
-                        togglePlaceholderValue(event, 'focus');
-                    }}
-                    onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
-                        togglePlaceholderValue(event, 'blur')
-                    }
+                    onFocus={handleOnInputFocus}
+                    onBlur={handleOnInputBlur}
                     {...restProps}
                 />
                 {searchQuery && (
                     <StyledIconButton onClick={onClose}>
                         <Icon
                             name='Close'
                             size={14}
-                            iconColor='#ffffff'
+                            iconColor={colors.white}
                         />
                     </StyledIconButton>
                 )}

src/components/MMSearch/MMSearch.component.tsx

@@ -6,6 +6,8 @@ import {AutoCompleteWrapper} from '@Components/AutoComplete/AutoComplete.styles'
 
 import {Constants} from '@Constants';
 
+import {ListItemType} from '@Components/List/List';
+
 import {MMSearchProps} from './MMSearch';
 
 /**
@@ -64,7 +66,7 @@ export const MMSearch = (props: MMSearchProps) => {
     } = props;
 
     const [searchQuery, setSearchQuery] = useState<string>('');
-    const [open, setOpen] = useState<boolean>(openOptions);
+    const [isOpen, setIsOpen] = useState<boolean>(openOptions);
     const [active, setActive] = useState<number>(0);
 
     const inputRef = useRef<HTMLInputElement>(null);
@@ -78,7 +80,7 @@ export const MMSearch = (props: MMSearchProps) => {
     const onDropDownCloseHandler = (e: MouseEvent) => {
         e.stopPropagation();
         if (e.target instanceof HTMLElement && !inputRef.current?.contains(e.target) && e.target !== inputRef.current) {
-            setOpen(false);
+            setIsOpen(false);
         }
     };
 
@@ -99,23 +101,21 @@ export const MMSearch = (props: MMSearchProps) => {
      * If 'isOpen' is true and 'value' is empty, then set the active index to 0 and scroll the list to (0,0)
      */
     useEffect(() => {
-        if (open) {
+        if (isOpen) {
             setActive(0);
-            if (typeof listRef.current?.scrollTo === 'function') {
-                listRef.current.scrollTo(0, 0);
-            }
+            listRef.current.scrollTo(0, 0);
         }
-    }, [open]);
+    }, [isOpen]);
 
     /**
      * The function is called when an event is detected on the keyboard,
      * so you can browse through the list and select one.
      */
     const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-        if (!filteredOptions.length || !open) {
+        if (!filteredOptions.length || !isOpen) {
             return;
         }
-        if (event.key === 'Enter') {
+        if (event.key === Constants.KeyboardEvent.ENTER) {
             event.preventDefault();
             const option = filteredOptions[active];
 
@@ -126,29 +126,57 @@ export const MMSearch = (props: MMSearchProps) => {
             setActive(0);
             return;
         }
-        if (event.key === 'ArrowUp') {
+        if (event.key === Constants.KeyboardEvent.ARROW_UP) {
             event.preventDefault();
             if (active === 0) {
                 return;
             }
             setActive((prev) => prev - 1);
-            if (typeof listRef.current?.scrollBy === 'function') {
-                listRef.current.scrollBy(0, -Constants.ITEM_HEIGHT);
-            }
+
+            listRef.current.scrollBy(0, -Constants.ITEM_HEIGHT);
+
             if (inputRef.current) {
                 inputRef.current.focus();
             }
             return;
         }
-        if (event.key === 'ArrowDown') {
+        if (event.key === Constants.KeyboardEvent.ARROW_DOWN) {
             event.preventDefault();
             if (active === filteredOptions.length - 1) {
                 return;
             }
             setActive((prev) => prev + 1);
-            if (typeof listRef.current.scrollBy === 'function') {
-                listRef.current.scrollBy(0, Constants.ITEM_HEIGHT);
-            }
+
+            listRef.current.scrollBy(0, Constants.ITEM_HEIGHT);
+        }
+    };
+
+    const handleOnClose = () => {
+        if (onClearInput) {
+            onClearInput();
+        }
+        if (inputRef?.current) {
+            inputRef.current.focus();
+        }
+        setIsOpen(true);
+        setSearchValue('');
+        setSearchQuery('');
+    };
+
+    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setIsOpen(true);
+        setSearchQuery(e.target.value);
+        setSearchValue(e.target.value);
+    };
+
+    const handleItemClick = (event: React.MouseEvent<HTMLLIElement>, option: ListItemType) => {
+        setActive(0);
+        if (onSelect) {
+            onSelect(event, option);
+        }
+        setIsOpen(true);
+        if (inputRef.current) {
+            inputRef.current.focus();
         }
     };
 
@@ -165,40 +193,17 @@ export const MMSearch = (props: MMSearchProps) => {
                 value={searchValue}
                 label={label}
                 iconName={leadingIcon}
-                onClose={() => {
-                    if (onClearInput) {
-                        onClearInput();
-                    }
-                    if (inputRef?.current) {
-                        inputRef.current.focus();
-                    }
-                    setOpen(true);
-                    setSearchValue('');
-                    setSearchQuery('');
-                }}
-                onChange={(e) => {
-                    setOpen(true);
-                    setSearchQuery(e.target.value);
-                    setSearchValue(e.target.value);
-                }}
-                onInputFocus={() => setOpen(true)}
+                onClose={handleOnClose}
+                onChange={handleOnChange}
+                onInputFocus={() => setIsOpen(true)}
                 {...restProps}
             />
             {Boolean(filteredOptions.length) && (
                 <List
                     ref={listRef}
-                    isOpen={open}
+                    isOpen={isOpen}
                     listItems={filteredOptions}
-                    handleItemClick={(event, option) => {
-                        setActive(0);
-                        if (onSelect) {
-                            onSelect(event, option);
-                        }
-                        setOpen(true);
-                        if (inputRef.current) {
-                            inputRef.current.focus();
-                        }
-                    }}
+                    handleItemClick={handleItemClick}
                     value={searchQuery}
                     loading={optionsLoading}
                     isAutocomplete={true}

src/components/MMSearch/MMSearch.d.ts

@@ -83,6 +83,7 @@ export interface MMSearchProps {
 
     /**
      * Flag used to open options
+     * @default false
      */
     openOptions?: boolean;
 

src/components/MMSearch/MMSearch.stories.tsx

@@ -11,9 +11,7 @@ export default {
     args: {
         label: 'Search...',
         searchValue: '',
-        setSearchValue: (val: string) => {
-            console.log(val);
-        },
+        setSearchValue: (val: string) => val,
         items: [{label: 'koko 1', value: 'Value 1'}],
     },
 } as Meta;

src/components/MultiProgress/MultiProgress.d.ts

@@ -1,4 +1,4 @@
-export interface ProgressBarProps {
+export type ProgressBarProps = {
 
     /**
 	 * Value of the progress in percentage of linear progress bar component
@@ -11,7 +11,7 @@ export interface ProgressBarProps {
     color: string;
 }
 
-export interface MultiProgressBarProps {
+export type MultiProgressBarProps = {
 
     /**
      * Configuration array for the multiple progress bars