sixseconds-modules 1.5.1 → 1.5.3
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/README.md +50 -50
- package/dist/components/header/type.d.ts +64 -66
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/types/custom.d.ts +23 -25
- package/dist/types/htmlElements.d.ts +5 -7
- package/dist/types/index.d.ts +4 -4
- package/dist/types/reactTypes.d.ts +3 -5
- package/dist/vite-env.d.ts +2 -2
- package/package.json +97 -96
package/README.md
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
# React + TypeScript + Vite
|
|
2
|
-
|
|
3
|
-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
-
|
|
5
|
-
Currently, two official plugins are available:
|
|
6
|
-
|
|
7
|
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
-
|
|
10
|
-
## Expanding the ESLint configuration
|
|
11
|
-
|
|
12
|
-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
|
13
|
-
|
|
14
|
-
- Configure the top-level `parserOptions` property like this:
|
|
15
|
-
|
|
16
|
-
```js
|
|
17
|
-
export default tseslint.config({
|
|
18
|
-
languageOptions: {
|
|
19
|
-
// other options...
|
|
20
|
-
parserOptions: {
|
|
21
|
-
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
|
|
22
|
-
tsconfigRootDir: import.meta.dirname,
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
})
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
|
29
|
-
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
|
30
|
-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
|
31
|
-
|
|
32
|
-
```js
|
|
33
|
-
// eslint.config.js
|
|
34
|
-
import react from "eslint-plugin-react"
|
|
35
|
-
|
|
36
|
-
export default tseslint.config({
|
|
37
|
-
// Set the react version
|
|
38
|
-
settings: { react: { version: "18.3" } },
|
|
39
|
-
plugins: {
|
|
40
|
-
// Add the react plugin
|
|
41
|
-
react,
|
|
42
|
-
},
|
|
43
|
-
rules: {
|
|
44
|
-
// other rules...
|
|
45
|
-
// Enable its recommended rules
|
|
46
|
-
...react.configs.recommended.rules,
|
|
47
|
-
...react.configs["jsx-runtime"].rules,
|
|
48
|
-
},
|
|
49
|
-
})
|
|
50
|
-
```
|
|
1
|
+
# React + TypeScript + Vite
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
+
|
|
5
|
+
Currently, two official plugins are available:
|
|
6
|
+
|
|
7
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
+
|
|
10
|
+
## Expanding the ESLint configuration
|
|
11
|
+
|
|
12
|
+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
|
13
|
+
|
|
14
|
+
- Configure the top-level `parserOptions` property like this:
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
export default tseslint.config({
|
|
18
|
+
languageOptions: {
|
|
19
|
+
// other options...
|
|
20
|
+
parserOptions: {
|
|
21
|
+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
|
|
22
|
+
tsconfigRootDir: import.meta.dirname,
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
})
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
|
29
|
+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
|
30
|
+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
// eslint.config.js
|
|
34
|
+
import react from "eslint-plugin-react"
|
|
35
|
+
|
|
36
|
+
export default tseslint.config({
|
|
37
|
+
// Set the react version
|
|
38
|
+
settings: { react: { version: "18.3" } },
|
|
39
|
+
plugins: {
|
|
40
|
+
// Add the react plugin
|
|
41
|
+
react,
|
|
42
|
+
},
|
|
43
|
+
rules: {
|
|
44
|
+
// other rules...
|
|
45
|
+
// Enable its recommended rules
|
|
46
|
+
...react.configs.recommended.rules,
|
|
47
|
+
...react.configs["jsx-runtime"].rules,
|
|
48
|
+
},
|
|
49
|
+
})
|
|
50
|
+
```
|
|
@@ -1,68 +1,66 @@
|
|
|
1
1
|
import { APP_NAMES } from '../../constants';
|
|
2
2
|
import { SxProps } from '@mui/material';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
//
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
endCustomComponents?: React.ReactNode
|
|
68
|
-
}
|
|
3
|
+
export interface IState {
|
|
4
|
+
languages: string[]
|
|
5
|
+
menuData: []
|
|
6
|
+
toggles: {
|
|
7
|
+
appMenus: boolean
|
|
8
|
+
notification: boolean
|
|
9
|
+
logout: boolean
|
|
10
|
+
lang: boolean
|
|
11
|
+
dropDownMenu: boolean
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface INotificationState {
|
|
16
|
+
notificationData: Notification[]
|
|
17
|
+
page: number
|
|
18
|
+
currentPage: number
|
|
19
|
+
lastPage: number
|
|
20
|
+
requestAcceptedDialog?: boolean
|
|
21
|
+
userRequest?: any
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface IUserDataProps {
|
|
25
|
+
userprofile: string
|
|
26
|
+
email: string
|
|
27
|
+
role: string
|
|
28
|
+
fullName: string
|
|
29
|
+
appName: (typeof APP_NAMES)[keyof typeof APP_NAMES]
|
|
30
|
+
appAccess: {
|
|
31
|
+
name: item.appAccess
|
|
32
|
+
icon: item.appIcon
|
|
33
|
+
link: item.redirectUrl
|
|
34
|
+
type: item.type
|
|
35
|
+
}[]
|
|
36
|
+
notificationCount: number
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface IInterFaceLang {
|
|
40
|
+
label: item.label
|
|
41
|
+
value: item.value
|
|
42
|
+
flag: item.getFlagUrl
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export interface IHeaderProps {
|
|
46
|
+
userData?: IUserDataProps
|
|
47
|
+
interFaceLangList?: IInterFaceLang[]
|
|
48
|
+
// toggleSiderMenu,
|
|
49
|
+
// updateInterfaceLang,
|
|
50
|
+
// logoutHandler
|
|
51
|
+
selectedInterFaceLang: IInterFaceLang
|
|
52
|
+
isNotification: boolean
|
|
53
|
+
isMenu: boolean
|
|
54
|
+
isAccessAppMenu: boolean
|
|
55
|
+
extraMenuOptions: {
|
|
56
|
+
components: React.ReactNode
|
|
57
|
+
isViewProfile: boolean
|
|
58
|
+
isChangePassword: boolean
|
|
59
|
+
isEditProfile: boolean
|
|
60
|
+
}
|
|
61
|
+
sx?: SxProps
|
|
62
|
+
logo: React.ReactNode
|
|
63
|
+
frontCustomComponent?: React.ReactNode
|
|
64
|
+
centerCustomComponents?: React.ReactNode
|
|
65
|
+
endCustomComponents?: React.ReactNode
|
|
66
|
+
}
|
package/dist/index.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
elementStyle.appendChild(document.createTextNode('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");\
|
|
6
|
+
elementStyle.appendChild(document.createTextNode('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");\n\n:root {\n --background: #ffffff;\n --foreground: #171717;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: #0a0a0a;\n --foreground: #ededed;\n }\n}\n\nbody {\n font-family: "Inter", serif !important;\n margin: 0;\n padding: 0;\n color: var(--foreground);\n background: var(--background);\n}\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n font-family: "Inter", serif !important;\n}\n\n.MuiTypography-root {\n font-family: "Inter", serif !important;\n}\n\n.search input {\n padding: 8.5px 6px 8.5px 33px !important;\n}\n\n.MuiAutocomplete-root .MuiOutlinedInput-root {\n padding: 2px 10px !important;\n}\n\ninput {\n height: 36px;\n}\n\n.activeUrl {\n color: #007fc0;\n}\n\n/* .login_page:has(.MuiContainer-root) {\n width: 100% !important;\n padding: 0;\n background-color: pink;\n} */\n\n.MuiAutocomplete-input {\n padding: 4.5px !important;\n}\n\n.upload_div {\n cursor: pointer;\n width: 125px;\n}\n\n.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded {\n width: 100% !important;\n}\n\n.upload_button {\n background-color: #007fc0;\n color: #fff;\n border-radius: 5px;\n white-space: nowrap;\n padding: 7px 10px;\n cursor: pointer;\n width: 100%;\n}\n\n.upload_div input {\n position: absolute;\n left: 0;\n width: 100%;\n opacity: 0;\n}\n\n.upload_div .delete_btn {\n background-color: #ddd;\n border: 1px solid #ccc;\n margin-top: 10px;\n border-radius: 5px;\n text-align: center;\n width: 100%;\n}\n\nbody {\n background-color: #f6f6f6;\n}\n\n.login_page:has body {\n background-color: #f6f6f6 !important;\n}\n\n.MuiTableHead-root,\n.MuiTableCell-root,\n.MuiInputBase-formControl {\n font-family: "Inter", serif !important;\n}\n\ninput:-webkit-autofill {\n padding: 0 10px;\n}\n\n.MuiPagination-root.MuiPagination-outlined {\n /* margin-top: 10px; */\n display: flex;\n justify-content: end;\n}\n\n.pagination {\n margin-top: 10px;\n}\n\n.tox-statusbar {\n display: none !important;\n}\n\n.tox-tinymce {\n border: 1px solid #0000003b !important;\n}\n\n.manage_payment tr th:nth-child(2) {\n text-align: center !important;\n}\n\n.manage_payment tr td:nth-child(2) {\n text-align: center !important;\n}\n\n.manage_payment tr td:nth-child(2) div {\n display: flex;\n justify-content: center;\n}\n\n.MuiTableContainer-root::-webkit-scrollbar {\n width: 5px;\n height: 8px;\n}\n\n.main.login_page .loginBody {\n width: 800px !important;\n}\n\n.main_list_Menu {\n display: flex;\n}\n\n.main_list_Menu li {\n padding: 0.5rem 0.5rem;\n}\n\n.main_list_Menu li a {\n padding: 0 0.25rem;\n font-weight: 600;\n font-size: 14px;\n}\n\n.main_list_Menu .menu-item {\n position: relative;\n padding: 15px;\n}\n\n.main_list_Menu .menu-link {\n text-decoration: none;\n color: #2c2e35;\n transition: color 0.3s ease;\n}\n\n.main_list_Menu .menu-link:hover {\n color: #2ea3f2;\n}\n\n/* Submenu (Dropdown) */\n\n.main_list_Menu .submenuData {\n position: absolute;\n top: 85%;\n left: 0;\n background: white;\n border-top: 3px solid #2ea3f2;\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n display: none;\n min-width: 200px;\n z-index: 10;\n}\n\n.main_list_Menu .submenuData li {\n list-style: none;\n}\n\n.main_list_Menu .submenu-link {\n display: block;\n padding: 1px 15px;\n text-decoration: none;\n color: rgba(0, 0, 0, 0.7);\n font-weight: 600;\n}\n\n.main_list_Menu .submenu-link:hover {\n background: #f1f1f1;\n}\n\n/* Show dropdown on hover */\n\n.main_list_Menu .menu-item:hover .submenuData {\n display: block;\n}\n\n.smallDeviceMenu {\n display: none;\n width: 100%;\n left: 0;\n top: 72px;\n background-color: #fff;\n position: fixed;\n overflow-y: auto;\n height: 95vh;\n}\n\n.smallDeviceMenu a.bg_main_menu {\n display: block;\n}\n\n.layout_mobile_menu {\n padding-bottom: 12px;\n padding-inline: 0;\n height: 95vh;\n overflow-y: auto;\n padding-top: 8px;\n}\n\n.smallDeviceMenu a {\n background-color: rgba(0, 0, 0, 0.03);\n font-size: 15px;\n font-weight: 600;\n color: #2c2e35;\n margin-bottom: 4px;\n padding: 12px 8px;\n}\n\n.smallDeviceMenu .submenu_child {\n padding-left: 15px;\n min-width: 90%;\n max-width: 90%;\n top: 57px;\n margin-top: 8px;\n background-color: #fff;\n color: #000;\n margin-inline: auto;\n}\n\n.smallDeviceMenu ul li .submenu_child_link {\n padding: 12px 20px;\n}\n\n.smallDeviceMenu ul li a {\n background-color: transparent;\n color: #000000b3;\n}\n\n.smallDeviceMenu ul {\n padding-left: 15px;\n}\n\n.desktopMenu {\n display: flex;\n}\n\n.button_hamburger {\n display: none;\n position: absolute;\n right: 20px;\n top: 25px;\n z-index: 9;\n}\n\n.tox-editor-header {\n background-color: transparent;\n}\n\n.hamburger-icon-btn {\n padding: 8px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n.desktopMenu .menu-item .menu-link {\n font-size: 15px;\n}\n\n.smallDeviceMenu {\n padding-inline: 20px;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background-color: #aaa;\n border-radius: 10px;\n}\n\n/* Track */\n\n::-webkit-scrollbar-track {\n box-shadow: inset 0 0 5px grey;\n border-radius: 10px;\n}\n\n/* Handle */\n\n::-webkit-scrollbar-thumb {\n background: #717070;\n border-radius: 10px;\n}\n\n/* Handle on hover */\n\n::-webkit-scrollbar-thumb:hover {\n background: #b30000;\n}\n\n@media screen and (max-width: 600px) and (min-width: 320px) {\n .notification_icon_error .MuiBadge-badge {\n font-size: 11px;\n padding: 0 3px;\n min-width: 16px;\n right: 5px;\n }\n\n .submenu nav {\n padding: 0 !important;\n }\n\n .MuiPagination-root.MuiPagination-outlined {\n /* margin-top: 10px; */\n display: flex;\n justify-content: center;\n margin-left: 0;\n }\n\n .toogle_btn_menu {\n position: absolute;\n right: 20px;\n top: 18px;\n z-index: 99;\n }\n\n .right_header_icons {\n padding-right: 25px;\n }\n\n .button_hamburger {\n display: block;\n }\n\n .desktopMenu {\n display: none;\n }\n\n .smallDeviceMenu {\n display: block;\n width: 100%;\n position: fixed;\n left: 0;\n background: #fff;\n top: 69px;\n }\n\n .main.login_page .loginBody {\n width: 400px !important;\n }\n\n .submenu {\n width: 100%;\n max-width: 100% !important;\n }\n\n .sideBar {\n width: 300px !important;\n background-color: #fff;\n z-index: 99;\n }\n\n .sideMenu {\n width: 300px;\n background-color: #fff;\n }\n\n .logo_header {\n opacity: 1;\n }\n\n .profile.headerMenu {\n min-width: 320px;\n width: auto !important;\n }\n}\n\n@media screen and (max-width: 1024px) and (min-width: 600px) {\n .toogle_btn_menu {\n position: absolute;\n right: 20px;\n top: 18px;\n }\n\n .right_header_icons {\n padding-right: 25px;\n }\n\n .button_hamburger {\n display: block;\n }\n\n .desktopMenu {\n display: none;\n }\n\n .smallDeviceMenu {\n display: block;\n }\n\n .main.login_page .loginBody {\n width: 500px !important;\n }\n\n .banner {\n margin-left: 0 !important;\n }\n\n .submenu {\n width: 100%;\n max-width: 100% !important;\n }\n\n .sideBar {\n width: 300px !important;\n background-color: #fff;\n z-index: 99;\n }\n\n .sideMenu {\n width: 300px;\n background-color: #fff;\n }\n\n .logo_header {\n opacity: 1;\n }\n\n .profile.headerMenu {\n min-width: 320px;\n width: auto !important;\n }\n}\n\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\n .right_header_icons {\n padding-right: 25px;\n }\n\n .button_hamburger {\n display: block;\n }\n\n .desktopMenu {\n display: none;\n }\n\n .smallDeviceMenu {\n display: block;\n width: 100%;\n position: fixed;\n left: 0;\n background: #fff;\n top: 72px;\n }\n\n .button_hamburger {\n display: block;\n }\n\n .right_header_icons {\n padding-right: 25px;\n }\n}'));
|
|
7
7
|
document.head.appendChild(elementStyle);
|
|
8
8
|
}
|
|
9
9
|
} catch (e) {
|