@omniumretail/shared-resources 0.0.23 → 0.0.24

package/src/components/BottomDrawer/index.tsx

@@ -1,33 +1,33 @@
-import { Drawer, DrawerProps } from "antd";
-import styles from './styles.module.scss';
-
-interface BottomDrawerProps extends DrawerProps {
-    haveReset?: boolean;
-    resetButtonName?: string;
-    closeButtonName: string;
-    onReset?: () => void;
-}
-
-export const BottomDrawer = ({ haveReset = false, resetButtonName, closeButtonName, onReset, ...restProps }: BottomDrawerProps) => {
-
-    const extraContent = haveReset ? (
-        <button
-            type="button"
-            className={ styles.resetButton }
-            onClick={onReset}
-        >
-            { resetButtonName }
-        </button>
-    ) : null;
-
-    return (
-        <Drawer
-            { ...restProps }
-            className={ styles.drawerComponent }
-            height="80%"
-            placement="bottom"
-            closeIcon={ closeButtonName }
-            extra={ extraContent }
-        />
-    );
+import { Drawer, DrawerProps } from "antd";
+import styles from './styles.module.scss';
+
+interface BottomDrawerProps extends DrawerProps {
+    haveReset?: boolean;
+    resetButtonName?: string;
+    closeButtonName: string;
+    onReset?: () => void;
+}
+
+export const BottomDrawer = ({ haveReset = false, resetButtonName, closeButtonName, onReset, ...restProps }: BottomDrawerProps) => {
+
+    const extraContent = haveReset ? (
+        <button
+            type="button"
+            className={ styles.resetButton }
+            onClick={onReset}
+        >
+            { resetButtonName }
+        </button>
+    ) : null;
+
+    return (
+        <Drawer
+            { ...restProps }
+            className={ styles.drawerComponent }
+            height="80%"
+            placement="bottom"
+            closeIcon={ closeButtonName }
+            extra={ extraContent }
+        />
+    );
 };

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

@@ -1,59 +1,59 @@
-.drawerComponent {
-
-  :global {
-
-    .ant-drawer-content-wrapper {
-      top: 10%;
-    }
-
-    .ant-drawer-content {
-      background: var(--app-footer-color);
-      border-radius: 7px 7px 0px 0px;
-    }
-
-    .ant-drawer-header {
-      border-bottom: 1px solid var(--disabled-input);
-      text-align: center;
-      padding: 16px 0px;
-    }
-
-    .ant-drawer-title {
-      font-weight: 700;
-      font-size: 14px;
-      color: var(--app-footer-bg-color);
-    }
-
-    .ant-drawer-close {
-      position: absolute;
-      top: 15px;
-      right: 0px;
-      font-weight: 400;
-      font-size: 12px;
-      color: var(--active-button-color);
-    }
-
-  }
-
-  .resetButton {
-    display: inline-block;
-    margin-left: 12px;
-    font-style: normal;
-    line-height: 1;
-    text-align: center;
-    text-transform: none;
-    text-decoration: none;
-    background: transparent;
-    border: 0;
-    outline: 0;
-    cursor: pointer;
-    transition: color 0.3s;
-    text-rendering: auto;
-    position: absolute;
-    top: 15px;
-    left: 0px;
-    font-weight: 400;
-    font-size: 12px;
-    color: var(--active-button-color);
-  }
-
-}
+.drawerComponent {
+
+  :global {
+
+    .ant-drawer-content-wrapper {
+      top: 10%;
+    }
+
+    .ant-drawer-content {
+      background: var(--app-footer-color);
+      border-radius: 7px 7px 0px 0px;
+    }
+
+    .ant-drawer-header {
+      border-bottom: 1px solid var(--disabled-input);
+      text-align: center;
+      padding: 16px 0px;
+    }
+
+    .ant-drawer-title {
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--app-footer-bg-color);
+    }
+
+    .ant-drawer-close {
+      position: absolute;
+      top: 15px;
+      right: 0px;
+      font-weight: 400;
+      font-size: 12px;
+      color: var(--active-button-color);
+    }
+
+  }
+
+  .resetButton {
+    display: inline-block;
+    margin-left: 12px;
+    font-style: normal;
+    line-height: 1;
+    text-align: center;
+    text-transform: none;
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+    transition: color 0.3s;
+    text-rendering: auto;
+    position: absolute;
+    top: 15px;
+    left: 0px;
+    font-weight: 400;
+    font-size: 12px;
+    color: var(--active-button-color);
+  }
+
+}

package/src/components/Button/index.tsx

@@ -1,7 +1,7 @@
-import { Button as AntButton, ButtonProps } from 'antd';
-
-export const Button = (props: ButtonProps) => {
-    return (
-        <AntButton { ...props } />
-    );
-};
+import { Button as AntButton, ButtonProps } from 'antd';
+
+export const Button = (props: ButtonProps) => {
+    return (
+        <AntButton { ...props } />
+    );
+};

package/src/components/Footer/index.tsx

@@ -1,44 +1,44 @@
-import { Row, Col } from 'antd';
-import add from 'date-fns/add';
-import format from 'date-fns/format';
-import classNames from 'classnames';
-import logo from '../../assets/omniu-retail_branco_s-fundo.png';
-import { useState, useEffect } from 'react';
-
-import styles from './styles.module.scss';
-
-export const FooterComponent = ({ className }: { className?: string }) => {
-    const [date, setDate] = useState(new Date());
-
-    useEffect(() => {
-        const time = (function updateDate() {
-            const nextMinute = add(new Date(), { minutes: 1, seconds: 0 });
-            return setTimeout(() => {
-                setDate(new Date());
-                updateDate();
-            }, nextMinute.getTime() - new Date().getTime());
-        }());
-
-        return () => clearTimeout(time);
-    });
-
-    return (
-        <div className={ classNames(styles.footerComponent, className) }>
-            <Row>
-                <Col xs={ 12 } className={ styles.dateTime }>
-                    <div className={ styles.date }>
-                        {format(date, 'dd/MM/yyyy')}
-                    </div>
-
-                    <div className={ styles.time }>
-                        {format(date, 'HH:mm')}
-                    </div>
-                </Col>
-
-                <Col xs={ 12 } className={ styles.omniumLogo }>
-                    <img src={ logo } className={ styles.omniumLogoImg } alt="omniu logo" />
-                </Col>
-            </Row>
-        </div>
-    );
-}
+import { Row, Col } from 'antd';
+import add from 'date-fns/add';
+import format from 'date-fns/format';
+import classNames from 'classnames';
+import logo from '../../assets/omniu-retail_branco_s-fundo.png';
+import { useState, useEffect } from 'react';
+
+import styles from './styles.module.scss';
+
+export const FooterComponent = ({ className }: { className?: string }) => {
+    const [date, setDate] = useState(new Date());
+
+    useEffect(() => {
+        const time = (function updateDate() {
+            const nextMinute = add(new Date(), { minutes: 1, seconds: 0 });
+            return setTimeout(() => {
+                setDate(new Date());
+                updateDate();
+            }, nextMinute.getTime() - new Date().getTime());
+        }());
+
+        return () => clearTimeout(time);
+    });
+
+    return (
+        <div className={ classNames(styles.footerComponent, className) }>
+            <Row>
+                <Col xs={ 12 } className={ styles.dateTime }>
+                    <div className={ styles.date }>
+                        {format(date, 'dd/MM/yyyy')}
+                    </div>
+
+                    <div className={ styles.time }>
+                        {format(date, 'HH:mm')}
+                    </div>
+                </Col>
+
+                <Col xs={ 12 } className={ styles.omniumLogo }>
+                    <img src={ logo } className={ styles.omniumLogoImg } alt="omniu logo" />
+                </Col>
+            </Row>
+        </div>
+    );
+}

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

@@ -1,33 +1,33 @@
-.footerComponent {
-  height: 60px;
-  background-color: var(--app-footer-bg-color);
-  padding: 13px 24px;
-  box-sizing: border-box;
-
-  .date,
-  .time {
-    font-weight: 500;
-    font-size: 10px;
-    color: var(--app-footer-color);
-    display: inline-flex;
-  }
-
-  .dateTime {
-    line-height: 12px;
-  }
-
-  .time {
-    margin-left: 8px;
-  }
-
-  .omniumLogo {
-    line-height: 12px;
-    text-align: right;
-  }
-
-  .omniumLogoImg {
-    height: 23px;
-    margin-top: -5px;
-    margin-right: -6px;
-  }
-}
+.footerComponent {
+  height: 60px;
+  background-color: var(--app-footer-bg-color);
+  padding: 13px 24px;
+  box-sizing: border-box;
+
+  .date,
+  .time {
+    font-weight: 500;
+    font-size: 10px;
+    color: var(--app-footer-color);
+    display: inline-flex;
+  }
+
+  .dateTime {
+    line-height: 12px;
+  }
+
+  .time {
+    margin-left: 8px;
+  }
+
+  .omniumLogo {
+    line-height: 12px;
+    text-align: right;
+  }
+
+  .omniumLogoImg {
+    height: 23px;
+    margin-top: -5px;
+    margin-right: -6px;
+  }
+}

package/src/components/Form/FormInputField/index.tsx

@@ -1,18 +1,18 @@
-import { Form, FormItemProps, Input, InputProps } from 'antd';
-
-interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
-    name: string;
-    inputProps?: InputProps;
-}
-
-export const InputField = (inputProps: InputProps) => (
-    <Input { ...inputProps } />
-);
-
-export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
-    return (
-        <Form.Item { ...itemProps }>
-            <InputField { ...inputProps } />
-        </Form.Item>
-    )
-};
+import { Form, FormItemProps, Input, InputProps } from 'antd';
+
+interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    inputProps?: InputProps;
+}
+
+export const InputField = (inputProps: InputProps) => (
+    <Input { ...inputProps } />
+);
+
+export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
+    return (
+        <Form.Item { ...itemProps }>
+            <InputField { ...inputProps } />
+        </Form.Item>
+    )
+};

package/src/components/Form/FormSelectField/index.tsx

@@ -1,16 +1,16 @@
-import { Form, FormItemProps, Select } from 'antd';
-import { LabeledValue, SelectProps } from 'antd/lib/select';
-
-interface FormSelectFieldProps extends Omit<FormItemProps, "name"> {
-    name: string;
-    options: LabeledValue[];
-    selectProps?: SelectProps<LabeledValue>
-}
-
-export const FormSelectField = ({ options, selectProps, ...itemProps }: FormSelectFieldProps) => {
-    return (
-        <Form.Item { ...itemProps }>
-            <Select { ...selectProps } options={ options } />
-        </Form.Item>
-    )
-};
+import { Form, FormItemProps, Select } from 'antd';
+import { LabeledValue, SelectProps } from 'antd/lib/select';
+
+interface FormSelectFieldProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    options: LabeledValue[];
+    selectProps?: SelectProps<LabeledValue>
+}
+
+export const FormSelectField = ({ options, selectProps, ...itemProps }: FormSelectFieldProps) => {
+    return (
+        <Form.Item { ...itemProps }>
+            <Select { ...selectProps } options={ options } />
+        </Form.Item>
+    )
+};

package/src/components/Form/index.ts

@@ -1,2 +1,2 @@
-export * from './FormInputField';
-export * from './FormSelectField';
+export * from './FormInputField';
+export * from './FormSelectField';

package/src/components/Header/index.tsx

@@ -1,20 +1,20 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { icons,  } from '../../constants/Icons';
-import sitooIcon from '../../assets/sitoo.svg';
-import styles from './styles.module.scss';
-
-export interface HeaderProps {
-    onOpenMenu: () => void;
-}
-
-export const Header = ({ onOpenMenu }: HeaderProps) => (
-    <div className={ styles.header }>
-        <FontAwesomeIcon icon={ icons.faBars } onClick={ onOpenMenu } />
-
-        <div className={ styles.logoContainer }>
-            <img src={ sitooIcon } />
-        </div>
-
-        <FontAwesomeIcon icon={ icons.faUserTie } />
-    </div>
-);
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { icons,  } from '../../constants/Icons';
+import sitooIcon from '../../assets/sitoo.svg';
+import styles from './styles.module.scss';
+
+export interface HeaderProps {
+    onOpenMenu: () => void;
+}
+
+export const Header = ({ onOpenMenu }: HeaderProps) => (
+    <div className={ styles.header }>
+        <FontAwesomeIcon icon={ icons.faBars } onClick={ onOpenMenu } />
+
+        <div className={ styles.logoContainer }>
+            <img src={ sitooIcon } />
+        </div>
+
+        <FontAwesomeIcon icon={ icons.faUserTie } />
+    </div>
+);

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

@@ -1,16 +1,16 @@
-
-.header {
-    height: 88px;
-    display: flex;
-    align-items: flex-end;
-    padding: 13px 20px;
-    border-bottom: 2px solid #E5E5E5;
-    box-sizing: border-box;
-}
-
-.logoContainer {
-    display: flex;
-    flex-grow: 1;
-    align-items: flex-end;
-    justify-content: center;
-}
+
+.header {
+    height: 88px;
+    display: flex;
+    align-items: flex-end;
+    padding: 13px 20px;
+    border-bottom: 2px solid #E5E5E5;
+    box-sizing: border-box;
+}
+
+.logoContainer {
+    display: flex;
+    flex-grow: 1;
+    align-items: flex-end;
+    justify-content: center;
+}

package/src/components/Link/index.tsx

@@ -1,21 +1,21 @@
-import { Button as AntButton, ButtonProps } from 'antd';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export interface CustomLinkProps extends ButtonProps {
-    iconAlignRight?: boolean;
-    linkSecondary?: boolean;
-}
-
-export const Link = (props: CustomLinkProps) => {
-    const { iconAlignRight, linkSecondary } = props;
-
-    const linkClasses = classNames({ 
-        [styles.iconAlignRight]: iconAlignRight,
-        [styles.linkSecondary]: linkSecondary,
-    }, [styles.link])
-
-    return (
-        <AntButton { ...props } className={ linkClasses } type={'link'} />
-    );
-};
+import { Button as AntButton, ButtonProps } from 'antd';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+export interface CustomLinkProps extends ButtonProps {
+    iconAlignRight?: boolean;
+    linkSecondary?: boolean;
+}
+
+export const Link = (props: CustomLinkProps) => {
+    const { iconAlignRight, linkSecondary } = props;
+
+    const linkClasses = classNames({ 
+        [styles.iconAlignRight]: iconAlignRight,
+        [styles.linkSecondary]: linkSecondary,
+    }, [styles.link])
+
+    return (
+        <AntButton { ...props } className={ linkClasses } type={'link'} />
+    );
+};

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

@@ -1,24 +1,24 @@
-.link {
-    display: inline-flex;
-    text-decoration: none;
-    height: auto;
-
-    color: var(--color-black);
-    font-size: var(--font-size-body-3);
-    line-height: 100%;
-    font-weight: 300;
-    font-style: var(--font-style-italic);
-}
-
-.linkSecondary {
-    color: var(--color-orange);
-    font-style: var(--font-style-normal);
-} 
-
-.iconAlignRight {
-    span:nth-child(2) {
-        margin-inline-end: 8px;
-        margin-inline-start: 0;
-        order: -1;
-    }
-}
+.link {
+    display: inline-flex;
+    text-decoration: none;
+    height: auto;
+
+    color: var(--color-black);
+    font-size: var(--font-size-body-3);
+    line-height: 100%;
+    font-weight: 300;
+    font-style: var(--font-style-italic);
+}
+
+.linkSecondary {
+    color: var(--color-orange);
+    font-style: var(--font-style-normal);
+} 
+
+.iconAlignRight {
+    span:nth-child(2) {
+        margin-inline-end: 8px;
+        margin-inline-start: 0;
+        order: -1;
+    }
+}

package/src/components/Navigation/index.tsx

@@ -1,30 +1,30 @@
-import styles from './styles.module.scss';
-import { Link } from '../Link/index';
-import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
-
-export interface NavigationProps {
-    backLink?: boolean;
-    title: string;
-    homeLink?: boolean;
-    loginLink?: boolean;
-    onClickFunction?: () => void;
-}
-
-export const Navigation = (props: NavigationProps) => {
-    const { backLink, title, homeLink, onClickFunction, loginLink } = props;
-    
-    return (
-        <div className={styles.navigation}>
-            <div className={styles.columnLeft}>
-            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> Voltar </Link> }
-            </div>
-            <div className={styles.columnCenter}>
-                <h1 className={styles.title}>{title}</h1>
-            </div>
-            <div className={styles.columnRight}>
-                {homeLink && <Link href="" icon={<HomeOutlined />} linkSecondary iconAlignRight> Home </Link>}
-                {loginLink && <Link href="#" onClick={onClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> Log Out</Link>}
-            </div>
-        </div>
-    )
-};
+import styles from './styles.module.scss';
+import { Link } from '../Link/index';
+import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
+
+export interface NavigationProps {
+    backLink?: boolean;
+    title: string;
+    homeLink?: boolean;
+    loginLink?: boolean;
+    onClickFunction?: () => void;
+}
+
+export const Navigation = (props: NavigationProps) => {
+    const { backLink, title, homeLink, onClickFunction, loginLink } = props;
+    
+    return (
+        <div className={styles.navigation}>
+            <div className={styles.columnLeft}>
+            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> Voltar </Link> }
+            </div>
+            <div className={styles.columnCenter}>
+                <h1 className={styles.title}>{title}</h1>
+            </div>
+            <div className={styles.columnRight}>
+                {homeLink && <Link href="" icon={<HomeOutlined />} linkSecondary iconAlignRight> Home </Link>}
+                {loginLink && <Link href="#" onClick={onClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> Log Out</Link>}
+            </div>
+        </div>
+    )
+};