@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/Header/index.tsx

@@ -1,200 +0,0 @@
-import { useRef, useState } from 'react';
-import { DownOutlined, UpOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { HeaderProps, MenuItem } from './Header.types';
-import { getMenuTopList, getMenuBottomList } from './Header.data';
-import { BellNotifications } from '../BellNotifications';
-import { getCompanyLogos } from '../../constants/logoCompanyHelper';
-
-/**
- * Header component to display navigation bar with dropdown menus and action button.
- * @param {HeaderProps} props - Properties passed to the component.
- */
-export const Header = ({
-    menuList,
-    actionButton,
-    logout,
-    homeUrl,
-    profileUrl,
-    onLeavingPage,
-    userName,
-    pageTitle,
-    onFilterChange,
-    notifications,
-    onNotificationClick,
-    handleMarkAllAsRead,
-    shouldConfirmNavigation,
-    customLogoClass,
-    companyName = 'omnium',
-}: HeaderProps) => {
-
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
-    const headerRef = useRef<HTMLDivElement>(null);
-    const overlayRef = useRef<HTMLDivElement>(null);
-    const companyLogos = getCompanyLogos(companyName);
-
-    /**
-     * Handle the logout action. If no logout function is provided, redirect to home as discussed in a meet
-     */
-    const onLogout = () => {
-        if (shouldConfirmNavigation) {
-            onLeavingPage!('/logout');
-        } else if (logout) {
-            logout();
-        } else {
-            onHome();
-        }
-    };
-
-    /**
-     * Navigate to the profile URL.
-     */
-    const onProfile = () => {
-        if (shouldConfirmNavigation) {
-            onLeavingPage!('/profile');
-        } else {
-            window.location.href = profileUrl;
-        }
-    };
-
-    /**
-     * Navigate to the home URL.
-     */
-    const onHome = () => {
-        if (shouldConfirmNavigation) {
-            onLeavingPage!('/home');
-        } else {
-            window.location.href = homeUrl;
-        }
-    };
-
-    const menuTopList = getMenuTopList(
-        onHome,
-    );
-
-    const menuBottomList = getMenuBottomList(
-        onProfile,
-        onLogout,
-        userName
-    );
-
-    const combinedMenuList = [...menuTopList, ...(menuList || []), ...menuBottomList];
-
-    /**
-     * Toggle the menu open and closed state.
-     */
-    const onToggleMenu = () => {
-        setIsMenuOpen(!isMenuOpen);
-    };
-
-    /**
-     * Handle dropdown click to toggle the active dropdown menu.
-     * @param {any} e - The event object.
-     * @param {number} index - The index of the dropdown menu.
-     */
-    const handleDropdownClick = (e: any, index: number) => {
-        e.stopPropagation();
-        setActiveDropdown(activeDropdown === index ? null : index);
-    };
-
-    /**
-     * Render the menu items, including dropdown menus.
-     * @param {MenuItem[]} menuList - The list of menu items to render.
-     * @returns {JSX.Element[]} The rendered menu items.
-     */
-    const renderMenu = (menuList: MenuItem[]) => {
-        return menuList.map((link, index) => (
-            <li
-                key={link.name}
-                data-index={index}
-                className={classNames(styles.listItem, {
-                    [styles.hasDropdown]: link.dropdownMenu,
-                    [styles.dropdownActive]: activeDropdown === index
-                })}
-            >
-                <div
-                    className={styles.listName}
-                    onClick={() => {
-                        if (onLeavingPage && link.targetRoute) {
-                            onLeavingPage(link.targetRoute);
-                        } else {
-                            link.action();
-                        }
-                    }}
-                >
-                    <p
-                        className={styles.name}
-                        dangerouslySetInnerHTML={{ __html: link.name }}></p>
-
-                    {
-                        link.dropdownMenu && link.dropdownMenu.length > 0 && <div className={styles.arrow} onClick={(event) => handleDropdownClick(event, index)}>
-                            {
-                                activeDropdown === index ?
-                                    <UpOutlined className={styles.arrowIcon} /> :
-                                    <DownOutlined className={styles.arrowIcon} />
-                            }
-                        </div>
-                    }
-                </div>
-                {link.dropdownMenu && link.dropdownMenu.length > 0 && (
-                    <ul
-                        className={styles.dropdownMenu}
-                    >
-                        {link.dropdownMenu.map((dropdownLink) => (
-                            <li key={dropdownLink.name} onClick={() => {
-                                if (onLeavingPage && dropdownLink.targetRoute) {
-                                    onLeavingPage(dropdownLink.targetRoute);
-                                } else {
-                                    dropdownLink.action();
-                                }
-                            }} className={styles.listItem}>
-                                <div className={styles.listName}>{dropdownLink.name}</div>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-            </li>
-        ));
-    };
-
-    return (
-        <div className={styles.header} ref={headerRef}>
-            <BarsOutlined onClick={onToggleMenu} className={styles.toggleMenuOpen} />
-
-            <div className={styles.logoContainer}>
-                {
-                    pageTitle
-                        ? <p className={styles.title}>{pageTitle}</p>
-                        : <img src={companyLogos.normal} alt={companyLogos.alt} />
-                }
-            </div>
-
-            {notifications &&
-                <BellNotifications onFilterChange={onFilterChange!} notifications={notifications} onNotificationClick={onNotificationClick!} handleMarkAllAsRead={handleMarkAllAsRead!} />
-            }
-
-            <div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
-                <div className={styles.head}>
-                    <p className={styles.logoWrapper}>
-                        <img className={customLogoClass} src={companyLogos.white} alt={companyLogos.alt} />
-                    </p>
-                    <CloseOutlined color={'#FFFFFF'} className={styles.toggleMenuClose} onClick={onToggleMenu} />
-                </div>
-                <div className={styles.menuList}>
-                    {renderMenu(combinedMenuList)}
-                </div>
-            </div>
-            <div ref={overlayRef} className={classNames(styles.overlay, { [styles.active]: isMenuOpen })} onClick={onToggleMenu}></div>
-
-            {actionButton && actionButton.visibility && (
-                <div className={styles.actionButton} onClick={actionButton.action}>
-                    {actionButton.element}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default Header;

package/src/components/Header/styles.module.scss

@@ -1,216 +0,0 @@
-:root {
-    --color-grey: #e4e4e4;
-    --color-grey-100: #E5E5E5;
-}
-
-.header {
-    display: flex;
-    align-items: center;
-    padding: 13px 20px;
-    box-sizing: border-box;
-    height: 72px;
-
-    * {
-        box-sizing: border-box;
-    }
-}
-
-.logoContainer {
-    display: flex;
-    flex-grow: 1;
-    align-items: flex-end;
-    justify-content: center;
-    max-width: calc(100% - 60px);
-
-    img {
-        max-width: 196px;
-        max-height: 50px;
-    }
-
-    .title {
-        font-weight: var(--font-weight-semibold);
-        text-transform: uppercase;
-        color: var(--color-black);
-    }
-}
-
-.toggleMenuOpen {
-    cursor: pointer;
-    padding: 4px 4px 4px 0;
-    font-size: 20px;
-    width: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.menu {
-    position: fixed;
-    top: 0;
-    left: -100%;
-    bottom: 0;
-    width: 100%;
-    max-width: 430px;
-    background-color: var(--color-white);
-    padding-inline: 15px;
-    z-index: 999;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
-    transition: 0.6s ease-out;
-
-    &.active {
-        left: 0;
-        transition: 0.3s ease-in;
-    }
-}
-
-.overlay {
-    background-color: rgba(0, 0, 0, .3);
-    backdrop-filter: blur(1px);
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 998;
-    pointer-events: none;
-    opacity: 0;
-    transition: 0.3s;
-
-    &.active {
-        opacity: 1;
-        pointer-events: all;
-    }
-}
-
-.head {
-    width: calc(100% + 30px);
-    margin-left: -15px;
-    background-color: var(--color-orange);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.logoWrapper {
-    img {
-        max-width: 160px;
-        max-height: 50px;
-    }
-}
-
-.toggleMenuClose {
-    position: absolute;
-    top: 23px;
-    right: 15px;
-    font-size: 25px;
-    cursor: pointer;
-    color: var(--color-white);
-}
-
-.menuList {
-    overflow-y: auto;
-    height: calc(100% - 51px);
-    margin: 0;
-    padding: 0;
-}
-
-.listName {
-    height: 60px;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--color-black);
-    cursor: pointer;
-    transition: 0.3s;
-    text-transform: uppercase;
-    width: 100%;
-
-    &:hover {
-        background-color: var(--color-grey);
-        color: var(--color-black);
-    }
-}
-
-.listItem {
-    list-style: none;
-
-    &.hasDropdown {
-        height: auto;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        padding-bottom: 0;
-
-        >.listName {
-            position: relative;
-
-            .arrow {
-                position: absolute;
-                width: 60px;
-                height: 100%;
-                background: var(--color-black);
-                right: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                &:hover {
-                    background-color: var(--color-orange);
-                }
-            }
-
-            .arrowIcon {
-                color: var(--color-white);
-            }
-        }
-
-        &.dropdownActive {
-            background: var(--color-grey);
-
-            .arrow {
-                background-color: var(--color-orange);
-            }
-
-            .dropdownMenu {
-                height: auto;
-                /* Arbitrary large value to allow smooth transition */
-                opacity: 1;
-            }
-        }
-    }
-}
-
-.dropdownMenu {
-    padding: 0;
-    width: 100%;
-    margin: 0;
-    background-color: var(--color-orange);
-    color: var(--color-white);
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    transition: height 0.3s ease, opacity 0.3s ease;
-
-    .listName {
-        min-height: 60px;
-        height: auto;
-        padding-inline: 40px;
-    }
-}
-
-.actionButton {
-    cursor: pointer;
-}
-
-.listName {
-    .name {
-        span {
-            margin-left: 8px;
-            transform: translateY(-2px);
-            display: inline-block;
-            font-size: var(--font-size-body-3);
-            text-transform: capitalize;
-        }
-    }
-}

package/src/components/Input/Input.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { FormInputField, FormInputFieldProps } from '.';
-
-export default {
-    title: 'FormInputField',
-    component: FormInputField,
-} as Meta;
-
-const Template: StoryFn<FormInputFieldProps> = (args: any) => <FormInputField {...args}></FormInputField>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/Input/index.tsx

@@ -1,31 +0,0 @@
-import { Form, FormItemProps, Input, InputProps } from 'antd';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-
-export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
-    name: string;
-    inputProps?: InputProps;
-}
-
-export interface inputPropsCustom extends InputProps {
-    customClass?: string;
-}
-
-export const InputField = ({customClass, ...inputProps}: inputPropsCustom) => {
-    const inputClasses = { 
-        [styles.input]: true,
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        <Input className={classNames(inputClasses)} {...inputProps} />
-    );
-}
-
-export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
-    return (
-        <Form.Item {...itemProps}>
-            <InputField {...inputProps} />
-        </Form.Item>
-    )
-};

package/src/components/Input/styles.module.scss

@@ -1,8 +0,0 @@
-.input {
-    border-color: rgba(var(--color-black-rgb), .5);
-    height: 50px;
-    font-size: var(--font-size-body-3);
-    line-height: 100%;
-    color: var(--color-black);
-    border-radius: 5px;
-}

package/src/components/InputCountryCode/index.tsx

@@ -1,79 +0,0 @@
-import { useCallback, useState, useEffect } from 'react';
-import { Form, FormItemProps, Input, InputProps, SelectProps } from 'antd';
-import { InputField } from '../Input';
-import { Select } from '../Select';
-import styles from './styles.module.scss';
-
-export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
-    name?: string;
-    selectProps?: SelectProps;
-    inputProps?: InputProps;
-    inputWithSelectBoxValue?: string;
-    value?: string;
-    onChange?: (value: any) => void;
-    dialCode?: string;
-}
-
-interface CountryCodeProps {
-    value?: string | { Number: string; CountryISO2: string };
-    onChange?: (value: any) => void;
-    selectProps?: SelectProps;
-    inputProps?: InputProps;
-    dialCode?: string;
-}
-
-const CountryCode = ({ value, onChange, selectProps, inputProps, dialCode }: CountryCodeProps) => {
-    const [inputDefaultValue, setInputDefaultValue] = useState<any>(inputProps?.defaultValue);
-    const [countryCode, setCountryCode] = useState(selectProps?.defaultValue);
-
-    useEffect(() => {
-        setInputDefaultValue(inputProps?.defaultValue);
-    }, []);
-
-    useEffect(() => {
-        if (value && typeof value === 'object') {
-            setInputDefaultValue(value.Number);
-            setCountryCode(value.CountryISO2);
-        }
-    }, [value]);
-
-    const changeLocalValue = useCallback(
-        (value: string | number, element: string) => {
-            if (element !== 'countryCode') {
-                setInputDefaultValue(value);
-                onChange?.({ Number: value, CountryISO2: countryCode }); // Update this line
-                return;
-            }
-
-            setCountryCode(value);
-            onChange?.({ Number: inputDefaultValue, CountryISO2: value }); // Update this line
-        },
-        [onChange, countryCode, inputDefaultValue],
-    );
-
-    const inputValueWithDialCode = dialCode ? `${dialCode} ${inputDefaultValue}` : inputDefaultValue;
-
-    return (
-        <Input.Group compact className={styles.inputGroup}>
-            <Select
-                {...selectProps}
-                value={countryCode || selectProps?.defaultValue}
-                onChange={(value) => changeLocalValue(value, 'countryCode')}
-            ></Select>
-            <InputField
-                {...inputProps}
-                value={inputValueWithDialCode}
-                onChange={(event) => changeLocalValue(event.target.value, 'phoneNumber')}
-            />
-        </Input.Group>
-    );
-};
-
-export const InputCountryCode = ({ inputProps, selectProps, name, inputWithSelectBoxValue, value, onChange, ...itemProps }: FormInputCountryCodeProps) => {
-    return (
-        <Form.Item name={name} {...itemProps}>
-            <CountryCode inputProps={inputProps} selectProps={selectProps} value={value} onChange={onChange} />
-        </Form.Item>
-    )
-}
-

package/src/components/InputCountryCode/inputCountryCode.stories.tsx

@@ -1,55 +0,0 @@
-import { Form, Button } from 'antd';
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { InputCountryCode, FormInputCountryCodeProps } from '.';
-
-export default {
-    title: 'InputCountryCode',
-    component: InputCountryCode,
-} as Meta;
-
-const Template: StoryFn<FormInputCountryCodeProps> = (args: any) => {
-    return (
-        <Form>
-            <InputCountryCode {...args}></InputCountryCode>
-
-            <Form.Item name={["testitem"]}>
-                <InputCountryCode
-                    selectProps={{
-                        options: [
-                            {
-                                label: 'PT',
-                                value: '+351',
-                            },
-                            {
-                                label: 'KZ',
-                                value: '94',
-                            },
-                        ],
-                        defaultValue: 'KZ',
-                    }} inputProps={{ defaultValue: '919767347' }} />
-            </Form.Item>
-
-        </Form>
-    )
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    name: "test",
-    inputProps: {
-        defaultValue: 961303639,
-    },
-    selectProps: {
-        defaultValue: 'PT',
-        options: [
-            {
-                label: 'PT',
-                value: '+351',
-            },
-            {
-                label: 'KZ',
-                value: '94',
-            },
-        ]
-    }
-};

package/src/components/InputCountryCode/styles.module.scss

@@ -1,3 +0,0 @@
-.inputGroup {
-    display: flex !important;
-}

package/src/components/Label/Label.stories.tsx

@@ -1,21 +0,0 @@
-import {Meta, StoryFn} from "@storybook/react-webpack5";
-import { Label, LabelProps } from '.';
-
-export default {
-    title: 'Label',
-    component: Label,
-} as Meta;
-
-const Template: StoryFn<LabelProps> = (args: any) => <Label {...args}></Label>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    forAttribute: 'Label',
-    children: 'Label',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    forAttribute: 'someinputname',
-    children: 'Label',
-};

package/src/components/Label/index.tsx

@@ -1,19 +0,0 @@
-import classNames from 'classnames';
-import styles from './styles.module.scss';
-export interface LabelProps {
-    forAttribute?: string;
-    children?: any;
-    customStyle?: string;
-    isUppercase?: boolean;
-}
-
-export const Label = (props: LabelProps) => {
-    const { forAttribute, children, customStyle, isUppercase } = props;
-    
-    const labelClasses = classNames({
-        [styles.label]: true,
-        [styles.uppercase]: isUppercase,
-    });
-        
-    return <label className={ classNames(labelClasses, customStyle) } htmlFor={ forAttribute }>{ children }</label>
-};

package/src/components/Label/styles.module.scss

@@ -1,17 +0,0 @@
-
-.label {
-    display: block;
-    color: var(--color-black);
-    text-transform: capitalize;
-    font-size: var(--font-size-body-base);
-    line-height: 125%;
-    font-weight: var(--font-weight-semibold);
-
-    &:not(:first-child) {
-        margin-top: 8px;
-    }
-}
-
-.uppercase {
-    text-transform: uppercase;
-}

package/src/components/Link/Link.stories.tsx

@@ -1,30 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Link, CustomLinkProps } from '.';
-import { SearchOutlined } from '@ant-design/icons';
-
-export default {
-    title: 'Link',
-    component: Link,
-} as Meta;
-
-const Template: StoryFn<CustomLinkProps> = (args: any) => <Link {...args}> this is a link </Link>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    href: '#',
-};
-
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    href: '#',
-    linkSecondary: true
-};
-
-export const iconAlignRight = Template.bind({});
-iconAlignRight.args = {
-    href: '#',
-    iconAlignRight: true,
-    linkSecondary: true,
-    icon: <SearchOutlined />
-};