[MI-2711]: Create Countdown component

src/components/Countdown/Countdown.component.tsx

@@ -0,0 +1,155 @@
+import React, {useState, useRef, useEffect} from 'react';
+
+import {CountdownProps} from './Countdown';
+import {CountdownWrapper, TimeLabel, Timer, TimeLabelWrapper} from './Countdown.styles';
+
+/**
+ * Countdown component
+ *
+ * @example Correct usage for showing full time
+ *
+ * ```ts
+ * <Countdown endTime={1675488600000}  onFinished={()=>{}}/>
+ * ```
+ *
+ * @example Correct usage when showing custom fields
+ *
+ * ```ts
+ * <Countdown
+ *    endTime={1675488600000}
+ *    showHours={true}
+ *    showMinutes={true}
+ *    onFinished={()=>{}}
+ * />
+ * ```
+ *
+ * @param props CountdownProps
+ * @returns JSX.Element
+ */
+export const Countdown = (props: CountdownProps) => {
+    const {endTime,
+        showDays = false,
+        showHours = false,
+        showMinutes = false,
+        showSeconds = false,
+        className = '',
+        onFinished,
+    } = props;
+
+    // Check if full time is shown or not
+    const showingFullTime = () => {
+        return (showDays || showHours || showMinutes || showSeconds);
+    };
+
+    // Make time string
+    const getTimeString = () => {
+        const timerProps = [!showDays, !showHours, !showMinutes, !showSeconds].filter((value) => !value);
+        const timerString = timerProps.join(' : ').replaceAll('false', '00');
+        return timerString;
+    };
+
+    // We need ref in this, because we are dealing
+    // with JS setInterval to keep track of it and
+    // stop it when needed
+    const Ref = useRef<number>(0);
+
+    // The state for our timer
+    const [timer, setTimer] = useState(showingFullTime() ? getTimeString() : '00 : 00 : 00 : 00');
+
+    // Remaining time for countdown
+    const getTimeRemaining = (e: Date) => {
+        const total = Date.parse(e.toUTCString()) - Date.now();
+        const seconds = Math.floor((total / 1000) % 60);
+        const minutes = Math.floor((total / 1000 / 60) % 60);
+        const hours = Math.floor((total / 1000 / 60 / 60) % 24);
+        const days = Math.floor(total / (1000 * 60 * 60 * 24));
+        return {
+            total, hours, minutes, seconds, days,
+        };
+    };
+
+    // Update time every second
+    const startTimer = (e: Date) => {
+        const {total, hours, minutes, seconds, days} =
+                    getTimeRemaining(e);
+
+        if (total >= 0) {
+            // if any of these is true show that
+            if (showingFullTime()) {
+                let timeArray = [(showDays) && days.toString().padStart(2, '0'),
+                    (showHours) && hours.toString().padStart(2, '0'),
+                    (showMinutes) && minutes.toString().padStart(2, '0'),
+                    (showSeconds) && seconds.toString().padStart(2, '0'),
+                ];
+
+                // remove false values
+                timeArray = timeArray.filter((value) => value);
+                setTimer(timeArray.join(' : '));
+            } else {
+                // show full timer
+                setTimer(
+                    `${days.toString().padStart(2, '0')} : ${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')} `,
+                );
+            }
+        } else {
+            clearInterval(Ref.current);
+            if (onFinished) {
+                onFinished();
+            }
+        }
+    };
+
+    const clearTimer = (e: Date) => {
+        // reset initial time
+        if (showingFullTime()) {
+            setTimer(getTimeString());
+        } else {
+            setTimer('00 : 00 : 00 : 00');
+        }
+
+        // If you try to remove this line the
+        // updating of timer Variable will be
+        // after 1000ms or 1sec
+        if (Ref.current) {
+            clearInterval(Ref.current);
+        }
+        const id = window.setInterval(() => {
+            startTimer(e);
+        }, 1000);
+
+        Ref.current = id;
+    };
+
+    // start the timer when component mounts
+    useEffect(() => {
+        clearTimer(new Date(endTime));
+    }, [showDays, showHours, showMinutes, showSeconds]);
+
+    return (
+        <CountdownWrapper className={`mm-countdown ${className}`}>
+            <Timer>
+                {timer}
+            </Timer>
+            <TimeLabelWrapper>
+                {
+                    (showingFullTime()) ? (
+                        <>
+                            {showDays && <TimeLabel>{'Days'}</TimeLabel>}
+                            {showHours && <TimeLabel>{'Hrs'}</TimeLabel>}
+                            {showMinutes && <TimeLabel>{'Mins'}</TimeLabel>}
+                            {showSeconds && <TimeLabel>{'Sec'}</TimeLabel>}
+                        </>
+                    ) : (
+                        <>
+                            <TimeLabel>{'Days'}</TimeLabel>
+                            <TimeLabel>{'Hrs'}</TimeLabel>
+                            <TimeLabel>{'Mins'}</TimeLabel>
+                            <TimeLabel>{'Sec'}</TimeLabel>
+                        </>
+                    )
+                }
+
+            </TimeLabelWrapper>
+        </CountdownWrapper>
+    );
+};

src/components/Countdown/Countdown.d.ts

@@ -0,0 +1,41 @@
+export interface CountdownProps {
+
+    /**
+     * Time at which countdown will end in milliseconds
+     */
+    endTime: number;
+
+    /**
+     * Flag to show days in timer
+     * @default false
+     */
+    showDays?: boolean;
+
+    /**
+     * Flag to show hours in timer
+     * @default false
+     */
+    showHours?: boolean;
+
+    /**
+     * Flag to show minutes in timer
+     * @default false
+     */
+    showMinutes?: boolean;
+
+    /**
+     * Flag to show seconds in timer
+     * @default false
+     */
+    showSeconds?: boolean;
+
+    /**
+	 * To override or extend the styles applied to the component
+	 */
+    className?: string;
+
+    /**
+     * To be called when countdown is over
+     */
+    onFinished?: () => void;
+}

src/components/Countdown/Countdown.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Story, Meta} from '@storybook/react';
+
+import {Countdown} from './Countdown.component';
+import {CountdownProps} from './Countdown';
+
+export default {
+    title: 'Component/Countdown',
+    component: Countdown,
+} as Meta<typeof Countdown>;
+
+const CountdownTemplate: Story<CountdownProps> = (args) => <Countdown {...args}/>;
+
+// Default
+export const Default = CountdownTemplate.bind({});
+Default.args = {
+    endTime: 1676007000000, // 2023/02/10 11:00
+};
+
+// Custom countdown
+export const Custom = CountdownTemplate.bind({});
+Custom.args = {
+    endTime: 1676007000000, // 2023/02/10 11:00
+    showDays: true,
+    showHours: true,
+    showMinutes: true,
+};
+

src/components/Countdown/Countdown.styles.ts

@@ -0,0 +1,52 @@
+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',
+    };
+});
+
+// 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',
+    };
+});
+
+// Styles for time label
+export const TimeLabel = styled.p(() => {
+    return {
+        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,
+    };
+});

src/components/Countdown/index.ts

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

src/components/MultiProgress/MultiProgress.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {ProgressBar} from 'react-bootstrap';
+
+import {MultiProgressBarProps, ProgressBarProps} from './MultiProgress';
+import {StyledMultiProgressBarContainer} from './MultiProgress.styles';
+
+/**
+ * MultiProgress Component
+ *
+ * @example Correct usage for MultiProgress
+ *
+ * ```ts
+ * <MultiProgress
+ *      progressBarConfig={[{value: 10, color: 'red'}, {value: 7, color: 'blue'}, {value: 3, color: 'green'}]}
+ * />
+ * ```
+ *
+ */
+export const MultiProgress = (props: MultiProgressBarProps) => {
+    const {progressBarConfig, className} = props;
+
+    // get percentage of progress of a progress bar with respect to progress of all the progress bars
+    const getBarFraction = (value: number) => {
+        let total = 0;
+        progressBarConfig.forEach((bar: ProgressBarProps) => {
+            total += bar.value;
+        });
+        return (value / total) * 100;
+    };
+
+    return (
+        <StyledMultiProgressBarContainer>
+            <ProgressBar className={`mm-multiProgress ${className}`}>
+                {progressBarConfig.map((bar: ProgressBarProps, index: number) => (
+                    <ProgressBar
+                        key={index}
+                        now={getBarFraction(bar.value)}
+                        style={{
+                            backgroundColor: bar.color,
+                        }}
+                    />
+                ))}
+            </ProgressBar>
+        </StyledMultiProgressBarContainer>
+    );
+};

src/components/MultiProgress/MultiProgress.d.ts

@@ -0,0 +1,25 @@
+export interface ProgressBarProps {
+
+    /**
+	 * Value of the progress in percentage of linear progress bar component
+	 */
+    value: number;
+
+    /**
+	 * Color of the spinner based on available options
+	 */
+    color: string;
+}
+
+export interface MultiProgressBarProps {
+
+    /**
+     * Configuration array for the multiple progress bars
+     */
+    progressBarConfig: ProgressBarProps[];
+
+    /**
+	 * To override or extend the styles applied to the component
+	 */
+    className: string;
+}

src/components/MultiProgress/MultiProgress.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Story, Meta} from '@storybook/react';
+
+import {MultiProgress} from './MultiProgress.component';
+import {MultiProgressBarProps} from './MultiProgress';
+
+export default {
+    title: ' Component/MultiProgress',
+    component: MultiProgress,
+} as Meta;
+
+const MultiProgressTemplate: Story<MultiProgressBarProps> = (args) => <MultiProgress {...args}/>;
+
+// Default
+export const Default = MultiProgressTemplate.bind({});
+Default.args = {
+    progressBarConfig: [
+        {
+            value: 10,
+            color: 'green',
+        },
+        {
+            value: 7,
+            color: 'blue',
+        },
+        {
+            value: 3,
+            color: 'red',
+        },
+        {
+            value: 4,
+            color: 'orange',
+        },
+    ],
+};