@ssplib/react-components 0.0.196 → 0.0.198

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 (9) hide show
  1. package/components/form/stepper/Stepper.js +2 -2
  2. package/components/modal/Modal.js +1 -1
  3. package/components/navbar/TabNavBar.d.ts +17 -0
  4. package/components/navbar/TabNavBar.js +160 -0
  5. package/components/providers/FormProvider.js +2 -1
  6. package/components/providers/KeycloakAuthProvider.js +6 -0
  7. package/index.d.ts +2 -1
  8. package/index.js +3 -1
  9. package/package.json +1 -1
package/components/form/stepper/Stepper.js CHANGED
@@ -87,7 +87,7 @@ function Stepper(_a) {
87
87
  // console.log('valores conferidos', getKeys(context.formGetValues(), activeStep), context.formGetValues(getKeys(context.formGetValues(), activeStep)))
88
88
  const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
89
89
  if (!result) {
90
- (0, react_toastify_1.toast)('Formulário incompleto!', { type: 'warning', theme: 'light' });
90
+ (0, react_toastify_1.toast)('Formulário incompleto! Verifique os campos marcados e tente novamente.', { type: 'warning', theme: 'light' });
91
91
  return;
92
92
  }
93
93
  setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -96,7 +96,7 @@ function Stepper(_a) {
96
96
  const result = yield context.formTrigger(getKeys(context.formGetValues(), activeStep));
97
97
  if (!result) {
98
98
  e.preventDefault();
99
- (0, react_toastify_1.toast)('Formulário incompleto!', { type: 'warning', theme: 'light' });
99
+ (0, react_toastify_1.toast)('Formulário incompleto! Verifique os campos marcados e tente novamente.', { type: 'warning', theme: 'light' });
100
100
  return;
101
101
  }
102
102
  });
package/components/modal/Modal.js CHANGED
@@ -76,6 +76,6 @@ function CustomModalProvider() {
76
76
  react_1.default.createElement(CloseRounded_1.default, { sx: {
77
77
  transform: 'scale(.9)',
78
78
  } })),
79
- react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray', bgcolor: '#F9F9F9' }, content))))));
79
+ react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray', bgcolor: '#F9F9F9', borderRadius: 2 }, content))))));
80
80
  }
81
81
  exports.CustomModalProvider = CustomModalProvider;
package/components/navbar/TabNavBar.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ export default function TabNavBar({ links, title, img, pos, next, el, menuItems, color, route, paddingBottom, logoutMsg, ...props }: {
3
+ links: {
4
+ name: string;
5
+ path: string;
6
+ }[];
7
+ title: string;
8
+ img: string;
9
+ color?: string;
10
+ route?: string;
11
+ paddingBottom?: number;
12
+ menuItems: JSX.Element | JSX.Element[];
13
+ next?: boolean;
14
+ el?: JSX.Element;
15
+ logoutMsg?: string;
16
+ pos?: 'fixed' | 'inherit';
17
+ }): JSX.Element;
package/components/navbar/TabNavBar.js ADDED
@@ -0,0 +1,160 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __rest = (this && this.__rest) || function (s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
+ t[p] = s[p];
29
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
+ t[p[i]] = s[p[i]];
33
+ }
34
+ return t;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
41
+ const LogoutOutlined_1 = __importDefault(require("@mui/icons-material/LogoutOutlined"));
42
+ const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
43
+ const Person_1 = __importDefault(require("@mui/icons-material/Person"));
44
+ const material_1 = require("@mui/material");
45
+ const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
46
+ const image_1 = __importDefault(require("next/image"));
47
+ const link_1 = __importDefault(require("next/link"));
48
+ const router_1 = require("next/router");
49
+ const react_1 = __importStar(require("react"));
50
+ const auth_1 = require("../../context/auth");
51
+ function verificarRota(route, path) {
52
+ if (path === '/')
53
+ return route === path;
54
+ return route.startsWith(path);
55
+ }
56
+ function TabNavBar(_a) {
57
+ var { links, title, img, pos = 'fixed', next = true, el, menuItems, color = 'blue', route = '/teste/89', paddingBottom = 0, logoutMsg = 'Sair' } = _a, props = __rest(_a, ["links", "title", "img", "pos", "next", "el", "menuItems", "color", "route", "paddingBottom", "logoutMsg"]);
58
+ let router = undefined;
59
+ if (next)
60
+ router = (0, router_1.useRouter)();
61
+ const { user, login, logout, type } = (0, react_1.useContext)(auth_1.AuthContext);
62
+ const [anchor, setAnchor] = (0, react_1.useState)(null);
63
+ const [avatarAnchor, setAvatarAnchor] = (0, react_1.useState)(null);
64
+ const menuOpen = Boolean(anchor);
65
+ const avatarMenu = Boolean(avatarAnchor);
66
+ const [loading, setLoading] = (0, react_1.useState)(false);
67
+ const onMenuClick = (0, react_1.useCallback)((e) => {
68
+ setAnchor(e.currentTarget);
69
+ }, []);
70
+ const closeMenu = (0, react_1.useCallback)(() => {
71
+ setAnchor(null);
72
+ }, []);
73
+ const onMenuItemClick = (0, react_1.useCallback)((e, link) => {
74
+ setLoading(true);
75
+ setAnchor(null);
76
+ if (router)
77
+ router
78
+ .push({
79
+ pathname: link,
80
+ })
81
+ .finally(() => setLoading(false));
82
+ else {
83
+ setLoading(false);
84
+ }
85
+ }, [router]);
86
+ function changeRoute(e, path) {
87
+ setLoading(true);
88
+ if (router) {
89
+ router
90
+ .push({
91
+ pathname: path,
92
+ })
93
+ .finally(() => setLoading(false));
94
+ }
95
+ else {
96
+ setLoading(false);
97
+ }
98
+ }
99
+ return (react_1.default.createElement(react_1.default.Fragment, null,
100
+ react_1.default.createElement(material_1.Box, { position: pos, sx: { width: '100%', zIndex: 100 } },
101
+ react_1.default.createElement(material_1.AppBar, { position: 'relative', elevation: 0, sx: { backgroundColor: 'white', color: 'black', paddingY: 1, paddingX: { xs: 1, md: 4 } } },
102
+ react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
103
+ react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', spacing: 2, marginRight: 2, sx: { display: { xs: 'none', md: 'flex' }, width: '100%' } },
104
+ react_1.default.createElement(link_1.default, { href: '/' }, next ? react_1.default.createElement(image_1.default, { src: img, alt: title, width: 40, height: 40 }) : react_1.default.createElement("img", { src: img, height: 35 })),
105
+ react_1.default.createElement(material_1.Box, null,
106
+ react_1.default.createElement(material_1.Typography, { variant: 'subtitle1', fontWeight: 600 }, title))),
107
+ react_1.default.createElement(material_1.Stack, { direction: 'row', width: '100%', justifyContent: 'center', alignItems: 'center', spacing: 2 }, links.map((x) => (react_1.default.createElement(material_1.Box
108
+ // borderBottom={next ? (router?.pathname.startsWith(x.path) ? `solid 2px ${color}` : '') : `solid 2px ${color}`}
109
+ , {
110
+ // borderBottom={next ? (router?.pathname.startsWith(x.path) ? `solid 2px ${color}` : '') : `solid 2px ${color}`}
111
+ borderBottom: next ? (verificarRota(route, x.path) ? `solid 4px ${color}` : '') : verificarRota(route, x.path) ? `solid 4px ${color}` : '', height: '100%', paddingX: 2, sx: {
112
+ ':hover': {
113
+ backgroundColor: '#fcfcfc',
114
+ cursor: 'pointer',
115
+ userSelect: 'none',
116
+ },
117
+ }, onClick: (e) => changeRoute(e, x.path) },
118
+ react_1.default.createElement(material_1.Stack, { height: '95%', justifyContent: 'center' }, x.name))))),
119
+ react_1.default.createElement(material_1.Box, { sx: {
120
+ display: {
121
+ xs: 'flex',
122
+ md: 'none',
123
+ },
124
+ } }, links.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
125
+ react_1.default.createElement(material_1.IconButton, { onClick: onMenuClick },
126
+ react_1.default.createElement(Menu_1.default, null)),
127
+ react_1.default.createElement(material_1.Menu, { open: menuOpen, onClose: closeMenu, anchorEl: anchor }, links.map((x) => (react_1.default.createElement(material_1.MenuItem, { key: `navmenu${x}`, onClick: (e) => onMenuItemClick(e, x.path) },
128
+ react_1.default.createElement(material_1.Typography, { textTransform: 'capitalize' }, x.name)))))))),
129
+ react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', alignItems: 'center', sx: { width: { md: '100%' } } },
130
+ react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 2 },
131
+ react_1.default.createElement(material_1.Box, null, el),
132
+ user ? (react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1, sx: {
133
+ '&:hover': {
134
+ backgroundColor: '#a9def9',
135
+ cursor: 'pointer',
136
+ },
137
+ padding: 0.5,
138
+ borderRadius: 60,
139
+ } },
140
+ react_1.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center' } },
141
+ react_1.default.createElement(material_1.Avatar, { sx: { width: 30, height: 30 }, src: user.image }),
142
+ react_1.default.createElement(material_1.Menu, { open: avatarMenu, onClose: (e) => setAvatarAnchor(null), anchorEl: avatarAnchor, disableScrollLock: true, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, sx: { '.MuiMenu-paper': { borderRadius: 4 } } },
143
+ menuItems,
144
+ react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
145
+ setAvatarAnchor(null);
146
+ logout();
147
+ } },
148
+ react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1 },
149
+ react_1.default.createElement(LogoutOutlined_1.default, { sx: { fill: '#545454' } }),
150
+ react_1.default.createElement(material_1.Typography, { textTransform: 'capitalize' }, logoutMsg))))),
151
+ react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 0.4, alignItems: 'center', onClick: (e) => setAvatarAnchor(e.currentTarget), sx: { userSelect: 'none' } },
152
+ react_1.default.createElement(material_1.Typography, null, "Ol\u00E1,"),
153
+ react_1.default.createElement(material_1.Typography, { fontWeight: 600 }, user.given_name),
154
+ react_1.default.createElement(KeyboardArrowDown_1.default, null)))) : type === 'govbr' ? (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
155
+ react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Entrar com o gov.br"))) : (react_1.default.createElement(material_1.Button, { variant: 'contained', size: 'small', startIcon: react_1.default.createElement(Person_1.default, null), onClick: login, sx: { color: 'white', textTransform: 'inherit', borderRadius: 50, paddingX: 2 } },
156
+ react_1.default.createElement(material_1.Typography, { fontWeight: 600, fontSize: 15, padding: 0.4 }, "Entrar"))))))),
157
+ loading && react_1.default.createElement(LinearProgress_1.default, null)),
158
+ react_1.default.createElement(material_1.Box, { paddingBottom: paddingBottom })));
159
+ }
160
+ exports.default = TabNavBar;
package/components/providers/FormProvider.js CHANGED
@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  const react_1 = __importStar(require("react"));
27
27
  const react_hook_form_1 = require("react-hook-form");
28
28
  const form_1 = require("../../context/form");
29
+ const react_toastify_1 = require("react-toastify");
29
30
  function FormProvider({ children, onSubmit, formMethod = 'GET', submiting = false, }) {
30
31
  const { register, handleSubmit, control, formState: { errors }, reset, watch, trigger, setValue, unregister, getValues, } = (0, react_hook_form_1.useForm)();
31
32
  const [filesUid, setFilesUid] = (0, react_1.useState)([]);
@@ -43,6 +44,6 @@ function FormProvider({ children, onSubmit, formMethod = 'GET', submiting = fals
43
44
  errors: errors,
44
45
  submiting: submiting,
45
46
  } },
46
- react_1.default.createElement("form", { method: formMethod, onSubmit: handleSubmit((d) => onSubmit(d, filesUid)) }, children)));
47
+ react_1.default.createElement("form", { method: formMethod, onSubmit: handleSubmit((d) => onSubmit(d, filesUid), (d) => (0, react_toastify_1.toast)('Formulário incompleto! Verifique os campos marcados e tente novamente.', { type: 'warning', position: 'top-right', theme: 'colored' })) }, children)));
47
48
  }
48
49
  exports.default = FormProvider;
package/components/providers/KeycloakAuthProvider.js CHANGED
@@ -79,6 +79,12 @@ function KeycloakAuthProvider({ url, realm, clientId, children, type = 'ad', res
79
79
  }
80
80
  }, []);
81
81
  function login() {
82
+ console.log('Tentando logar...');
83
+ console.log('KC: ', {
84
+ instancia: kc,
85
+ logado: kc === null || kc === void 0 ? void 0 : kc.authenticated,
86
+ client_id: kc === null || kc === void 0 ? void 0 : kc.clientId,
87
+ });
82
88
  kc === null || kc === void 0 ? void 0 : kc.login();
83
89
  }
84
90
  function logout() {
package/index.d.ts CHANGED
@@ -16,6 +16,7 @@ import Switch from './components/form/switch/Switch';
16
16
  import { SwitchWatch, ToggleVisibility } from './components/form/switch/ToggleVisibility';
17
17
  import Table from './components/form/table/Table';
18
18
  import NavBar from './components/navbar/NavBar';
19
+ import TabNavBar from './components/navbar/TabNavBar';
19
20
  import FormProvider from './components/providers/FormProvider';
20
21
  import { OAuthProvider, cookieName as AUTH_COOKIE_NAME } from './components/providers/OAuthProvider';
21
22
  import { AuthContext } from './context/auth';
@@ -31,4 +32,4 @@ import { FixedAutoComplete } from './components/form/input/FixedAutoComplete';
31
32
  import DropFileUpload from './components/form/file/DropFileUpload';
32
33
  import { MODAL } from './components/modal/Modal';
33
34
  import { SspComponentsProvider } from './components/providers/SspComponentsProvider';
34
- export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider };
35
+ export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider, TabNavBar };
package/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
6
+ exports.TabNavBar = exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
7
7
  const CheckBox_1 = __importDefault(require("./components/form/checkbox/CheckBox"));
8
8
  exports.CheckBox = CheckBox_1.default;
9
9
  const CheckBoxWarning_1 = __importDefault(require("./components/form/checkbox/CheckBoxWarning"));
@@ -41,6 +41,8 @@ const Table_1 = __importDefault(require("./components/form/table/Table"));
41
41
  exports.Table = Table_1.default;
42
42
  const NavBar_1 = __importDefault(require("./components/navbar/NavBar"));
43
43
  exports.NavBar = NavBar_1.default;
44
+ const TabNavBar_1 = __importDefault(require("./components/navbar/TabNavBar"));
45
+ exports.TabNavBar = TabNavBar_1.default;
44
46
  const FormProvider_1 = __importDefault(require("./components/providers/FormProvider"));
45
47
  exports.FormProvider = FormProvider_1.default;
46
48
  const OAuthProvider_1 = require("./components/providers/OAuthProvider");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.196",
3
+ "version": "0.0.198",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",