@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.
Files changed (43) hide show
  1. package/dist/components/index.d.ts +0 -8
  2. package/dist/constants/index.d.ts +0 -1
  3. package/dist/helpers/codeMutation.d.ts +1 -2
  4. package/dist/index.d.ts +0 -1
  5. package/dist/shared-resources.umd.js +12 -724
  6. package/dist/shared-resources.umd.js.map +1 -1
  7. package/package.json +3 -7
  8. package/src/components/index.ts +0 -8
  9. package/src/constants/index.ts +0 -1
  10. package/src/helpers/codeMutation.tsx +1 -2
  11. package/src/helpers/date-unix.helper.ts +0 -1
  12. package/src/hooks/Astt/get/getRfidQuery.hook.ts +0 -1
  13. package/src/index.ts +0 -1
  14. package/vite.config.js +2 -0
  15. package/dist/components/BottomDrawer/index.d.ts +0 -10
  16. package/dist/components/Button/index.d.ts +0 -3
  17. package/dist/components/Footer/index.d.ts +0 -3
  18. package/dist/components/Form/FormInputField/index.d.ts +0 -9
  19. package/dist/components/Form/FormSelectField/index.d.ts +0 -10
  20. package/dist/components/Form/index.d.ts +0 -2
  21. package/dist/components/Header/index.d.ts +0 -4
  22. package/dist/components/Link/index.d.ts +0 -7
  23. package/dist/components/Navigation/index.d.ts +0 -8
  24. package/dist/components/Page/index.d.ts +0 -13
  25. package/dist/constants/Icons.d.ts +0 -15
  26. package/dist/shared-resources.css +0 -1
  27. package/src/components/BottomDrawer/index.tsx +0 -33
  28. package/src/components/BottomDrawer/styles.module.scss +0 -59
  29. package/src/components/Button/index.tsx +0 -7
  30. package/src/components/Footer/index.tsx +0 -44
  31. package/src/components/Footer/styles.module.scss +0 -33
  32. package/src/components/Form/FormInputField/index.tsx +0 -18
  33. package/src/components/Form/FormSelectField/index.tsx +0 -16
  34. package/src/components/Form/index.ts +0 -2
  35. package/src/components/Header/index.tsx +0 -20
  36. package/src/components/Header/styles.module.scss +0 -16
  37. package/src/components/Link/index.tsx +0 -21
  38. package/src/components/Link/styles.module.scss +0 -24
  39. package/src/components/Navigation/index.tsx +0 -30
  40. package/src/components/Navigation/styles.module.scss +0 -34
  41. package/src/components/Page/index.tsx +0 -35
  42. package/src/components/Page/styles.module.scss +0 -26
  43. 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.82",
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
+ }
@@ -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';
@@ -1,2 +1 @@
1
1
  export * from './QueryClient'
2
- export * from './Icons';
@@ -1,7 +1,6 @@
1
- import type { MenuProps } from 'antd';
2
1
  import React from 'react';
3
2
 
4
- export type MenuItem = Required<MenuProps>['items'][number];
3
+ export type MenuItem = Required<any>['items'][number];
5
4
 
6
5
  export function getItem(
7
6
  label: React.ReactNode,
@@ -1,4 +1,3 @@
1
- import moment from 'moment';
2
1
  import dayjs, { Dayjs } from 'dayjs';
3
2
 
4
3
  export const getDateFromUnix = <T = Dayjs | string | null>(unixDate: number, formatStr?: string): T => {
@@ -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
@@ -1,6 +1,5 @@
1
1
 
2
2
  // Hacky way because of the hooks and the npm link
3
- export { Form } from 'antd';
4
3
  export * from './interfaces';
5
4
  export * from './services';
6
5
  export * from './components';
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,3 +0,0 @@
1
- import { ButtonProps } from 'antd';
2
-
3
- export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- export declare const FooterComponent: ({ className }: {
2
- className?: string;
3
- }) => import("react/jsx-runtime").JSX.Element;
@@ -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,2 +0,0 @@
1
- export * from './FormInputField';
2
- export * from './FormSelectField';
@@ -1,4 +0,0 @@
1
- export interface HeaderProps {
2
- onOpenMenu: () => void;
3
- }
4
- export declare const Header: ({ onOpenMenu }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +0,0 @@
1
- import { ButtonProps } from 'antd';
2
-
3
- export interface CustomLinkProps extends ButtonProps {
4
- iconAlignRight?: boolean;
5
- linkSecondary?: boolean;
6
- }
7
- export declare const Link: (props: CustomLinkProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,8 +0,0 @@
1
- export interface NavigationProps {
2
- backLink?: boolean;
3
- title: string;
4
- homeLink?: boolean;
5
- loginLink?: boolean;
6
- onClickFunction?: () => void;
7
- }
8
- export declare const Navigation: (props: NavigationProps) => import("react/jsx-runtime").JSX.Element;
@@ -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,7 +0,0 @@
1
- import { Button as AntButton, ButtonProps } from 'antd';
2
-
3
- export const Button = (props: ButtonProps) => {
4
- return (
5
- <AntButton { ...props } />
6
- );
7
- };
@@ -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,2 +0,0 @@
1
- export * from './FormInputField';
2
- export * from './FormSelectField';
@@ -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
- }