@omniumretail/shared-resources 0.3.82 → 0.3.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.d.ts +0 -8
- package/dist/constants/index.d.ts +0 -1
- package/dist/helpers/codeMutation.d.ts +1 -2
- package/dist/index.d.ts +0 -1
- package/dist/shared-resources.umd.js +12 -724
- package/dist/shared-resources.umd.js.map +1 -1
- package/package.json +3 -7
- package/src/components/index.ts +0 -8
- package/src/constants/index.ts +0 -1
- package/src/helpers/codeMutation.tsx +1 -2
- package/src/helpers/date-unix.helper.ts +0 -1
- package/src/hooks/Astt/get/getRfidQuery.hook.ts +0 -1
- package/src/index.ts +0 -1
- package/vite.config.js +2 -0
- package/dist/components/BottomDrawer/index.d.ts +0 -10
- package/dist/components/Button/index.d.ts +0 -3
- package/dist/components/Footer/index.d.ts +0 -3
- package/dist/components/Form/FormInputField/index.d.ts +0 -9
- package/dist/components/Form/FormSelectField/index.d.ts +0 -10
- package/dist/components/Form/index.d.ts +0 -2
- package/dist/components/Header/index.d.ts +0 -4
- package/dist/components/Link/index.d.ts +0 -7
- package/dist/components/Navigation/index.d.ts +0 -8
- package/dist/components/Page/index.d.ts +0 -13
- package/dist/constants/Icons.d.ts +0 -15
- package/dist/shared-resources.css +0 -1
- package/src/components/BottomDrawer/index.tsx +0 -33
- package/src/components/BottomDrawer/styles.module.scss +0 -59
- package/src/components/Button/index.tsx +0 -7
- package/src/components/Footer/index.tsx +0 -44
- package/src/components/Footer/styles.module.scss +0 -33
- package/src/components/Form/FormInputField/index.tsx +0 -18
- package/src/components/Form/FormSelectField/index.tsx +0 -16
- package/src/components/Form/index.ts +0 -2
- package/src/components/Header/index.tsx +0 -20
- package/src/components/Header/styles.module.scss +0 -16
- package/src/components/Link/index.tsx +0 -21
- package/src/components/Link/styles.module.scss +0 -24
- package/src/components/Navigation/index.tsx +0 -30
- package/src/components/Navigation/styles.module.scss +0 -34
- package/src/components/Page/index.tsx +0 -35
- package/src/components/Page/styles.module.scss +0 -26
- package/src/constants/Icons.ts +0 -21
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omniumretail/shared-resources",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.84",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Shared Components and services or utils to the frontend versions",
|
|
6
6
|
"main": "dist/shared-resources.umd.js",
|
|
@@ -22,19 +22,15 @@
|
|
|
22
22
|
"tsconfig-paths": "^4.2.0",
|
|
23
23
|
"typescript": "^4.8.3",
|
|
24
24
|
"vite": "^7.1.2",
|
|
25
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
25
26
|
"vite-plugin-dts": "^4.5.4"
|
|
26
27
|
},
|
|
27
28
|
"dependencies": {
|
|
28
|
-
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
|
29
|
-
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
|
30
|
-
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
31
29
|
"@tanstack/react-query": "^4.29.19",
|
|
32
|
-
"antd": "^4.23.4",
|
|
33
|
-
"classnames": "^2.3.2",
|
|
34
30
|
"dayjs": "^1.11.10",
|
|
35
31
|
"react": "^18.0.0",
|
|
36
32
|
"react-dom": "^18.0.0",
|
|
37
33
|
"react-router-dom": "^6.4.1",
|
|
38
34
|
"whatwg-fetch": "^3.6.2"
|
|
39
35
|
}
|
|
40
|
-
}
|
|
36
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -1,9 +1 @@
|
|
|
1
1
|
export * from './SharedContextProvider';
|
|
2
|
-
export * from './Header';
|
|
3
|
-
export * from './Footer';
|
|
4
|
-
export * from './Page';
|
|
5
|
-
export * from './Button';
|
|
6
|
-
export * from './BottomDrawer';
|
|
7
|
-
export * from './Form';
|
|
8
|
-
export * from './Link';
|
|
9
|
-
export * from './Navigation';
|
package/src/constants/index.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useQuery, UseQueryOptions } from "@tanstack/react-query";
|
|
2
2
|
import { Rfid, ResponseList } from "../../../interfaces";
|
|
3
3
|
import { getAuth0 } from "../../../services/ApiService";
|
|
4
|
-
import { tr } from "date-fns/locale";
|
|
5
4
|
|
|
6
5
|
export interface RfidQueryHookProps extends UseQueryOptions<ResponseList<"Barcodes", Rfid>> {
|
|
7
6
|
delay: number;
|
package/src/index.ts
CHANGED
package/vite.config.js
CHANGED
|
@@ -2,11 +2,13 @@ import { defineConfig } from 'vite';
|
|
|
2
2
|
import react from '@vitejs/plugin-react';
|
|
3
3
|
import path from 'path';
|
|
4
4
|
import dts from 'vite-plugin-dts';
|
|
5
|
+
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
5
6
|
|
|
6
7
|
export default defineConfig({
|
|
7
8
|
plugins: [
|
|
8
9
|
react(),
|
|
9
10
|
dts({ insertTypesEntry: true }),
|
|
11
|
+
cssInjectedByJsPlugin(),
|
|
10
12
|
],
|
|
11
13
|
build: {
|
|
12
14
|
lib: {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { DrawerProps } from 'antd';
|
|
2
|
-
|
|
3
|
-
interface BottomDrawerProps extends DrawerProps {
|
|
4
|
-
haveReset?: boolean;
|
|
5
|
-
resetButtonName?: string;
|
|
6
|
-
closeButtonName: string;
|
|
7
|
-
onReset?: () => void;
|
|
8
|
-
}
|
|
9
|
-
export declare const BottomDrawer: ({ haveReset, resetButtonName, closeButtonName, onReset, ...restProps }: BottomDrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { FormItemProps, InputProps } from 'antd';
|
|
2
|
-
|
|
3
|
-
interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
|
|
4
|
-
name: string;
|
|
5
|
-
inputProps?: InputProps;
|
|
6
|
-
}
|
|
7
|
-
export declare const InputField: (inputProps: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export declare const FormInputField: ({ inputProps, ...itemProps }: FormInputFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { FormItemProps } from 'antd';
|
|
2
|
-
import { LabeledValue, SelectProps } from 'antd/lib/select';
|
|
3
|
-
|
|
4
|
-
interface FormSelectFieldProps extends Omit<FormItemProps, "name"> {
|
|
5
|
-
name: string;
|
|
6
|
-
options: LabeledValue[];
|
|
7
|
-
selectProps?: SelectProps<LabeledValue>;
|
|
8
|
-
}
|
|
9
|
-
export declare const FormSelectField: ({ options, selectProps, ...itemProps }: FormSelectFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface PageContentProps extends PageBaseProps {
|
|
3
|
-
isLoading?: boolean;
|
|
4
|
-
}
|
|
5
|
-
interface PageBaseProps {
|
|
6
|
-
children?: React.ReactNode | React.ReactNode[];
|
|
7
|
-
}
|
|
8
|
-
export declare const Page: {
|
|
9
|
-
({ children }: PageBaseProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
Header: ({ children }: PageBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
Content: ({ children, isLoading }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
};
|
|
13
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare const icons: {
|
|
2
|
-
faBars: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
3
|
-
faUser: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
4
|
-
faUserTie: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
5
|
-
faPlus: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
6
|
-
faUserPlus: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
7
|
-
faXmark: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
8
|
-
faCartShopping: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
9
|
-
faChevronDown: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
10
|
-
faFilter: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
11
|
-
faSearch: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
12
|
-
faQrcode: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
13
|
-
faCheck: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
14
|
-
faTrashAlt: import('@fortawesome/fontawesome-common-types').IconDefinition;
|
|
15
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._header_1olx4_1{height:88px;display:flex;align-items:flex-end;padding:13px 20px;border-bottom:2px solid #E5E5E5;box-sizing:border-box}._logoContainer_1olx4_10{display:flex;flex-grow:1;align-items:flex-end;justify-content:center}._footerComponent_1f9yk_1{height:60px;background-color:var(--app-footer-bg-color);padding:13px 24px;box-sizing:border-box}._footerComponent_1f9yk_1 ._date_1f9yk_7,._footerComponent_1f9yk_1 ._time_1f9yk_8{font-weight:500;font-size:10px;color:var(--app-footer-color);display:inline-flex}._footerComponent_1f9yk_1 ._dateTime_1f9yk_14{line-height:12px}._footerComponent_1f9yk_1 ._time_1f9yk_8{margin-left:8px}._footerComponent_1f9yk_1 ._omniumLogo_1f9yk_20{line-height:12px;text-align:right}._footerComponent_1f9yk_1 ._omniumLogoImg_1f9yk_24{height:23px;margin-top:-5px;margin-right:-6px}._header_i89hr_1{background:var(--white-color);height:37px;border-bottom:2px solid var(--disabled-input);color:var(--app-footer-bg-color);display:flex;gap:21px;align-items:center}._pageContent_i89hr_11,._header_i89hr_1{padding:8.5px 20px}._pageContainer_i89hr_15{height:100%}._pageContentLoading_i89hr_19{min-height:50%;display:flex;align-items:center;justify-content:center}._drawerComponent_1h26k_1 .ant-drawer-content-wrapper{top:10%}._drawerComponent_1h26k_1 .ant-drawer-content{background:var(--app-footer-color);border-radius:7px 7px 0 0}._drawerComponent_1h26k_1 .ant-drawer-header{border-bottom:1px solid var(--disabled-input);text-align:center;padding:16px 0}._drawerComponent_1h26k_1 .ant-drawer-title{font-weight:700;font-size:14px;color:var(--app-footer-bg-color)}._drawerComponent_1h26k_1 .ant-drawer-close{position:absolute;top:15px;right:0;font-weight:400;font-size:12px;color:var(--active-button-color)}._drawerComponent_1h26k_1 ._resetButton_1h26k_26{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 .3s;text-rendering:auto;position:absolute;top:15px;left:0;font-weight:400;font-size:12px;color:var(--active-button-color)}._link_nlg64_1{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_nlg64_12{color:var(--color-orange);font-style:var(--font-style-normal)}._iconAlignRight_nlg64_17 span:nth-child(2){margin-inline-end:8px;margin-inline-start:0;order:-1}._navigation_1x5af_1{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:75px;gap:0 24px;position:relative}@media (max-width: 767px){._navigation_1x5af_1{padding-top:32px}}@media (min-width: 767px){._navigation_1x5af_1{padding:0 40px}}._navigation_1x5af_1 ._title_1x5af_20{font-size:var(--font-size-body-4);font-weight:var(--font-weight-semibold);text-transform:uppercase}@media (max-width: 767px){._navigation_1x5af_1 ._columnCenter_1x5af_26{position:absolute;top:12px;margin:0 auto;left:0;right:0;text-align:center}}:root{--primary-color: red;--white-color: white;--grad-bg-button-color: #DADADA;--button-border-color: #707070;--button-color: #37383A;--customer-icon-color: #63B299;--default-background-image-color: #D9D9D9;--field-border-color: #D5D8D7;--page-bg-color: #F9F9F9;--page-border-color: #CECECE;--page-footer-bg-color: #DEDEDE;--app-footer-bg-color: #2C2D2E;--app-footer-color: #F5F6F7;--app-header-bg-1-color: #F7F7F7;--app-header-bg-2-color: #E3E3E3;--app-header-bg-3-color: #797979;--app-header-bt-border-color: #090909;--page-header-bg-color: #282c34;--success-color: #64B298;--error-color: #E05151;--disabled-input: #E8E8E8;--job-title-bg: #A83D3D;--job-date-info-bg: #E0F0EA;--job-date-edit-bg: #F0F0F0;--header-border-color: #C7CAC9;--grey: #E6E6E6;--active-button-color: #35779D;--sf-pro: normal normal bold 12px/14px SF Pro Text;--delete-bg: #E15151;--color-black: #2c2d2e;--color-black-rgb: 44, 45, 46;--color-white: #FFFFFF;--color-white-rgb: 255, 255, 255;--color-orange: #FF674C;--color-orange-rgb: 255, 103, 76;--color-blue: #09168B;--color-blue-rgb: 9, 22, 139;--color-grey-light: #D9D9D9;--color-grey-light-rgb: 217, 217, 217;--color-grey: #C7CAC9;--color-grey-rgb: 199, 202, 201;--color-grey-dark: #797979;--color-grey-dark-rgb: 121, 121, 121;--color-warning-400: #E36262;--color-warning-500: #E05151;--color-confirmation-400: #73b9a2;--color-confirmation-600: #64B298;--font-family-primary: SF Pro;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-style-normal: normal;--font-style-italic: italic;--font-size-body-1: 10px;--font-size-body-2: 12px;--font-size-body-3: 14px;--font-size-body-4: 16px;--font-size-body-5: 18px;--font-size-body-6: 20px;--font-size-h1: 46px;--font-size-h2: 40px;--font-size-h3: 36px;--font-size-h4: 30px;--font-size-h5: 24px;--font-size-body-base: var(--font-size-body-4);--font-size-label: var(--font-size-body-3);--button-default-background: var(--color-orange);--button-default-text-color: var(--color-white);--button-default-background-hover-color: rgba(var(--color-orange-rgb), .9);--button-default-text-hover-color: var(--color-white);--button-default-background-focus-color: var(--color-grey-dark);--button-default-text-focus-color: rgba(var(--color-white-rgb), .8);--button-style-1-background: var(--color-black);--button-style-1-text-color: var(--color-white);--button-style-1-background-hover-color: rgba(var(--color-black-rgb), .9);--button-style-1-text-hover-color: var(--color-white);--button-style-1-background-focus-color: var(--color-grey-dark);--button-style-1-text-focus-color: rgba(var(--color-white-rgb), .8);--button-disabled-background-color: var(--color-grey-dark);--button-disabled-default-text-color: var(--color-white);--link-color: var(--color-orange);--link-hover-color: var(--color-black);--link-focus-color: rgba(var(--color-orange), .9);--link-disabled-color: rgba(var(--color-grey), .2);--transition-slow: .2s;--transition: .6s;--transition-fast: 1s}body.a2aiStyle{--primary-color: red;--white-color: white;--grad-bg-button-color: #DADADA;--button-border-color: #707070;--button-color: #37383A;--customer-icon-color: #63B299;--default-background-image-color: #D9D9D9;--field-border-color: #D5D8D7;--page-bg-color: #F9F9F9;--page-border-color: #CECECE;--page-footer-bg-color: #DEDEDE;--app-footer-bg-color: #2C2D2E;--app-footer-color: #F5F6F7;--app-header-bg-1-color: #F7F7F7;--app-header-bg-2-color: #E3E3E3;--app-header-bg-3-color: #797979;--app-header-bt-border-color: #090909;--page-header-bg-color: #282c34;--success-color: #64B298;--error-color: #E05151;--disabled-input: #E8E8E8;--job-title-bg: #A83D3D;--job-date-info-bg: #E0F0EA;--job-date-edit-bg: #F0F0F0;--header-border-color: #C7CAC9;--grey: #E6E6E6;--active-button-color: #35779D;--sf-pro: normal normal bold 12px/14px SF Pro Text;--delete-bg: #E15151;--color-black: #2c2d2e;--color-black-rgb: 44, 45, 46;--color-white: #FFFFFF;--color-white-rgb: 255, 255, 255;--color-orange: #A9D046;--color-orange-rgb: 169, 208, 70;--color-blue: #09168B;--color-blue-rgb: 9, 22, 139;--color-purple-blue: #324A6D;--color-purple-blue-rgb: 50, 74, 109;--color-dark-blue: #1C244B;--color-dark-blue-rgb: 28, 36, 75;--color-grey-light: #D9D9D9;--color-grey-light-rgb: 217, 217, 217;--color-grey: #C7CAC9;--color-grey-rgb: 199, 202, 201;--color-grey-dark: #797979;--color-grey-dark-rgb: 121, 121, 121;--color-warning-400: #E36262;--color-warning-500: #E05151;--color-confirmation-400: #73b9a2;--color-confirmation-600: #64B298;--font-family-primary: SF Pro;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-style-normal: normal;--font-style-italic: italic;--font-size-body-1: 10px;--font-size-body-2: 12px;--font-size-body-3: 14px;--font-size-body-4: 16px;--font-size-body-5: 18px;--font-size-body-6: 20px;--font-size-h1: 46px;--font-size-h2: 40px;--font-size-h3: 36px;--font-size-h4: 30px;--font-size-h5: 24px;--font-size-body-base: var(--font-size-body-4);--font-size-label: var(--font-size-body-3);--button-default-background: var(--color-orange);--button-default-text-color: var(--color-white);--button-default-background-hover-color: rgba(var(--color-orange-rgb), .9);--button-default-text-hover-color: var(--color-white);--button-default-background-focus-color: var(--color-orange-rgb);--button-default-text-focus-color: rgba(var(--color-white-rgb), .8);--button-style-1-background: var(--color-black);--button-style-1-text-color: var(--color-white);--button-style-1-background-hover-color: rgba(var(--color-black-rgb), .9);--button-style-1-text-hover-color: var(--color-white);--button-style-1-background-focus-color: var(--color-grey-dark);--button-style-1-text-focus-color: rgba(var(--color-white-rgb), .8);--button-disabled-background-color: var(--color-grey);--button-disabled-default-text-color: var(--color-white);--link-color: var(--color-orange);--link-hover-color: var(--color-black);--link-focus-color: rgba(var(--color-orange), .9);--link-disabled-color: rgba(var(--color-grey), .2);--transition-slow: .2s;--transition: .6s;--transition-fast: 1s}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { Drawer, DrawerProps } from "antd";
|
|
2
|
-
import styles from './styles.module.scss';
|
|
3
|
-
|
|
4
|
-
interface BottomDrawerProps extends DrawerProps {
|
|
5
|
-
haveReset?: boolean;
|
|
6
|
-
resetButtonName?: string;
|
|
7
|
-
closeButtonName: string;
|
|
8
|
-
onReset?: () => void;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const BottomDrawer = ({ haveReset = false, resetButtonName, closeButtonName, onReset, ...restProps }: BottomDrawerProps) => {
|
|
12
|
-
|
|
13
|
-
const extraContent = haveReset ? (
|
|
14
|
-
<button
|
|
15
|
-
type="button"
|
|
16
|
-
className={ styles.resetButton }
|
|
17
|
-
onClick={onReset}
|
|
18
|
-
>
|
|
19
|
-
{ resetButtonName }
|
|
20
|
-
</button>
|
|
21
|
-
) : null;
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<Drawer
|
|
25
|
-
{ ...restProps }
|
|
26
|
-
className={ styles.drawerComponent }
|
|
27
|
-
height="80%"
|
|
28
|
-
placement="bottom"
|
|
29
|
-
closeIcon={ closeButtonName }
|
|
30
|
-
extra={ extraContent }
|
|
31
|
-
/>
|
|
32
|
-
);
|
|
33
|
-
};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
.drawerComponent {
|
|
2
|
-
|
|
3
|
-
:global {
|
|
4
|
-
|
|
5
|
-
.ant-drawer-content-wrapper {
|
|
6
|
-
top: 10%;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.ant-drawer-content {
|
|
10
|
-
background: var(--app-footer-color);
|
|
11
|
-
border-radius: 7px 7px 0px 0px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.ant-drawer-header {
|
|
15
|
-
border-bottom: 1px solid var(--disabled-input);
|
|
16
|
-
text-align: center;
|
|
17
|
-
padding: 16px 0px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.ant-drawer-title {
|
|
21
|
-
font-weight: 700;
|
|
22
|
-
font-size: 14px;
|
|
23
|
-
color: var(--app-footer-bg-color);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.ant-drawer-close {
|
|
27
|
-
position: absolute;
|
|
28
|
-
top: 15px;
|
|
29
|
-
right: 0px;
|
|
30
|
-
font-weight: 400;
|
|
31
|
-
font-size: 12px;
|
|
32
|
-
color: var(--active-button-color);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.resetButton {
|
|
38
|
-
display: inline-block;
|
|
39
|
-
margin-left: 12px;
|
|
40
|
-
font-style: normal;
|
|
41
|
-
line-height: 1;
|
|
42
|
-
text-align: center;
|
|
43
|
-
text-transform: none;
|
|
44
|
-
text-decoration: none;
|
|
45
|
-
background: transparent;
|
|
46
|
-
border: 0;
|
|
47
|
-
outline: 0;
|
|
48
|
-
cursor: pointer;
|
|
49
|
-
transition: color 0.3s;
|
|
50
|
-
text-rendering: auto;
|
|
51
|
-
position: absolute;
|
|
52
|
-
top: 15px;
|
|
53
|
-
left: 0px;
|
|
54
|
-
font-weight: 400;
|
|
55
|
-
font-size: 12px;
|
|
56
|
-
color: var(--active-button-color);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { Row, Col } from 'antd';
|
|
2
|
-
import add from 'date-fns/add';
|
|
3
|
-
import format from 'date-fns/format';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import logo from '../../assets/omniu-retail_branco_s-fundo.png';
|
|
6
|
-
import { useState, useEffect } from 'react';
|
|
7
|
-
|
|
8
|
-
import styles from './styles.module.scss';
|
|
9
|
-
|
|
10
|
-
export const FooterComponent = ({ className }: { className?: string }) => {
|
|
11
|
-
const [date, setDate] = useState(new Date());
|
|
12
|
-
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
const time = (function updateDate() {
|
|
15
|
-
const nextMinute = add(new Date(), { minutes: 1, seconds: 0 });
|
|
16
|
-
return setTimeout(() => {
|
|
17
|
-
setDate(new Date());
|
|
18
|
-
updateDate();
|
|
19
|
-
}, nextMinute.getTime() - new Date().getTime());
|
|
20
|
-
}());
|
|
21
|
-
|
|
22
|
-
return () => clearTimeout(time);
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<div className={ classNames(styles.footerComponent, className) }>
|
|
27
|
-
<Row>
|
|
28
|
-
<Col xs={ 12 } className={ styles.dateTime }>
|
|
29
|
-
<div className={ styles.date }>
|
|
30
|
-
{format(date, 'dd/MM/yyyy')}
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
<div className={ styles.time }>
|
|
34
|
-
{format(date, 'HH:mm')}
|
|
35
|
-
</div>
|
|
36
|
-
</Col>
|
|
37
|
-
|
|
38
|
-
<Col xs={ 12 } className={ styles.omniumLogo }>
|
|
39
|
-
<img src={ logo } className={ styles.omniumLogoImg } alt="omniu logo" />
|
|
40
|
-
</Col>
|
|
41
|
-
</Row>
|
|
42
|
-
</div>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
.footerComponent {
|
|
2
|
-
height: 60px;
|
|
3
|
-
background-color: var(--app-footer-bg-color);
|
|
4
|
-
padding: 13px 24px;
|
|
5
|
-
box-sizing: border-box;
|
|
6
|
-
|
|
7
|
-
.date,
|
|
8
|
-
.time {
|
|
9
|
-
font-weight: 500;
|
|
10
|
-
font-size: 10px;
|
|
11
|
-
color: var(--app-footer-color);
|
|
12
|
-
display: inline-flex;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.dateTime {
|
|
16
|
-
line-height: 12px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.time {
|
|
20
|
-
margin-left: 8px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.omniumLogo {
|
|
24
|
-
line-height: 12px;
|
|
25
|
-
text-align: right;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.omniumLogoImg {
|
|
29
|
-
height: 23px;
|
|
30
|
-
margin-top: -5px;
|
|
31
|
-
margin-right: -6px;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Form, FormItemProps, Input, InputProps } from 'antd';
|
|
2
|
-
|
|
3
|
-
interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
|
|
4
|
-
name: string;
|
|
5
|
-
inputProps?: InputProps;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const InputField = (inputProps: InputProps) => (
|
|
9
|
-
<Input { ...inputProps } />
|
|
10
|
-
);
|
|
11
|
-
|
|
12
|
-
export const FormInputField = ({ inputProps, ...itemProps }: FormInputFieldProps) => {
|
|
13
|
-
return (
|
|
14
|
-
<Form.Item { ...itemProps }>
|
|
15
|
-
<InputField { ...inputProps } />
|
|
16
|
-
</Form.Item>
|
|
17
|
-
)
|
|
18
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Form, FormItemProps, Select } from 'antd';
|
|
2
|
-
import { LabeledValue, SelectProps } from 'antd/lib/select';
|
|
3
|
-
|
|
4
|
-
interface FormSelectFieldProps extends Omit<FormItemProps, "name"> {
|
|
5
|
-
name: string;
|
|
6
|
-
options: LabeledValue[];
|
|
7
|
-
selectProps?: SelectProps<LabeledValue>
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const FormSelectField = ({ options, selectProps, ...itemProps }: FormSelectFieldProps) => {
|
|
11
|
-
return (
|
|
12
|
-
<Form.Item { ...itemProps }>
|
|
13
|
-
<Select { ...selectProps } options={ options } />
|
|
14
|
-
</Form.Item>
|
|
15
|
-
)
|
|
16
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
2
|
-
import { icons, } from '../../constants/Icons';
|
|
3
|
-
import sitooIcon from '../../assets/sitoo.svg';
|
|
4
|
-
import styles from './styles.module.scss';
|
|
5
|
-
|
|
6
|
-
export interface HeaderProps {
|
|
7
|
-
onOpenMenu: () => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const Header = ({ onOpenMenu }: HeaderProps) => (
|
|
11
|
-
<div className={ styles.header }>
|
|
12
|
-
<FontAwesomeIcon icon={ icons.faBars } onClick={ onOpenMenu } />
|
|
13
|
-
|
|
14
|
-
<div className={ styles.logoContainer }>
|
|
15
|
-
<img src={ sitooIcon } />
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
<FontAwesomeIcon icon={ icons.faUserTie } />
|
|
19
|
-
</div>
|
|
20
|
-
);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
.header {
|
|
3
|
-
height: 88px;
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: flex-end;
|
|
6
|
-
padding: 13px 20px;
|
|
7
|
-
border-bottom: 2px solid #E5E5E5;
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.logoContainer {
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-grow: 1;
|
|
14
|
-
align-items: flex-end;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { Button as AntButton, ButtonProps } from 'antd';
|
|
2
|
-
import styles from './styles.module.scss';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
|
|
5
|
-
export interface CustomLinkProps extends ButtonProps {
|
|
6
|
-
iconAlignRight?: boolean;
|
|
7
|
-
linkSecondary?: boolean;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const Link = (props: CustomLinkProps) => {
|
|
11
|
-
const { iconAlignRight, linkSecondary } = props;
|
|
12
|
-
|
|
13
|
-
const linkClasses = classNames({
|
|
14
|
-
[styles.iconAlignRight]: iconAlignRight,
|
|
15
|
-
[styles.linkSecondary]: linkSecondary,
|
|
16
|
-
}, [styles.link])
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<AntButton { ...props } className={ linkClasses } type={'link'} />
|
|
20
|
-
);
|
|
21
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
.link {
|
|
2
|
-
display: inline-flex;
|
|
3
|
-
text-decoration: none;
|
|
4
|
-
height: auto;
|
|
5
|
-
|
|
6
|
-
color: var(--color-black);
|
|
7
|
-
font-size: var(--font-size-body-3);
|
|
8
|
-
line-height: 100%;
|
|
9
|
-
font-weight: 300;
|
|
10
|
-
font-style: var(--font-style-italic);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.linkSecondary {
|
|
14
|
-
color: var(--color-orange);
|
|
15
|
-
font-style: var(--font-style-normal);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.iconAlignRight {
|
|
19
|
-
span:nth-child(2) {
|
|
20
|
-
margin-inline-end: 8px;
|
|
21
|
-
margin-inline-start: 0;
|
|
22
|
-
order: -1;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import styles from './styles.module.scss';
|
|
2
|
-
import { Link } from '../Link/index';
|
|
3
|
-
import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
|
|
4
|
-
|
|
5
|
-
export interface NavigationProps {
|
|
6
|
-
backLink?: boolean;
|
|
7
|
-
title: string;
|
|
8
|
-
homeLink?: boolean;
|
|
9
|
-
loginLink?: boolean;
|
|
10
|
-
onClickFunction?: () => void;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const Navigation = (props: NavigationProps) => {
|
|
14
|
-
const { backLink, title, homeLink, onClickFunction, loginLink } = props;
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<div className={styles.navigation}>
|
|
18
|
-
<div className={styles.columnLeft}>
|
|
19
|
-
{ backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> Voltar </Link> }
|
|
20
|
-
</div>
|
|
21
|
-
<div className={styles.columnCenter}>
|
|
22
|
-
<h1 className={styles.title}>{title}</h1>
|
|
23
|
-
</div>
|
|
24
|
-
<div className={styles.columnRight}>
|
|
25
|
-
{homeLink && <Link href="" icon={<HomeOutlined />} linkSecondary iconAlignRight> Home </Link>}
|
|
26
|
-
{loginLink && <Link href="#" onClick={onClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> Log Out</Link>}
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
)
|
|
30
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
.navigation {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
justify-content: space-between;
|
|
5
|
-
padding: 0 24px;
|
|
6
|
-
height: 75px;
|
|
7
|
-
gap: 0 24px;
|
|
8
|
-
position: relative;
|
|
9
|
-
|
|
10
|
-
@media(max-width: 767px) {
|
|
11
|
-
padding-top: 32px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@media(min-width: 767px) {
|
|
15
|
-
padding: 0 40px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.title {
|
|
19
|
-
font-size: var(--font-size-body-4);
|
|
20
|
-
font-weight: var(--font-weight-semibold);
|
|
21
|
-
text-transform: uppercase;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.columnCenter {
|
|
25
|
-
@media(max-width: 767px) {
|
|
26
|
-
position: absolute;
|
|
27
|
-
top: 12px;
|
|
28
|
-
margin: 0 auto;
|
|
29
|
-
left: 0;
|
|
30
|
-
right: 0;
|
|
31
|
-
text-align: center;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { Spin } from 'antd';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import styles from './styles.module.scss';
|
|
5
|
-
|
|
6
|
-
interface PageContentProps extends PageBaseProps {
|
|
7
|
-
isLoading?: boolean;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
interface PageBaseProps {
|
|
11
|
-
children?: React.ReactNode | React.ReactNode[];
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export const Page = ({ children }: PageBaseProps) => {
|
|
15
|
-
return (
|
|
16
|
-
<div className={ styles.pageContainer }>
|
|
17
|
-
{ children }
|
|
18
|
-
</div>
|
|
19
|
-
)
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const PageHeader = ({ children }: PageBaseProps) => (
|
|
23
|
-
<div className={ styles.header }>
|
|
24
|
-
{ children }
|
|
25
|
-
</div>
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
const PageContent = ({ children, isLoading }: PageContentProps) => (
|
|
29
|
-
<div className={ classNames(styles.pageContent, { [styles.pageContentLoading]: isLoading }) }>
|
|
30
|
-
{ isLoading ? <Spin /> : children }
|
|
31
|
-
</div>
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
Page.Header = PageHeader;
|
|
35
|
-
Page.Content = PageContent;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
$padding: 8.5px 20px;
|
|
2
|
-
|
|
3
|
-
.header {
|
|
4
|
-
background: var(--white-color);
|
|
5
|
-
height: 37px;
|
|
6
|
-
border-bottom: 2px solid var(--disabled-input);
|
|
7
|
-
color: var(--app-footer-bg-color);
|
|
8
|
-
display: flex;
|
|
9
|
-
gap: 21px;
|
|
10
|
-
align-items: center;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.pageContent, .header {
|
|
14
|
-
padding: $padding;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.pageContainer {
|
|
18
|
-
height: 100%;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.pageContentLoading {
|
|
22
|
-
min-height: 50%;
|
|
23
|
-
display: flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
justify-content: center;
|
|
26
|
-
}
|