@appcorp/app-corp-vista 0.0.50 → 0.0.52
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/molecules/vista-button-v1/vista-button-v1.js +2 -2
- package/molecules/vista-checkbox-v2/vista-checkbox-v2.js +7 -10
- package/package.json +1 -1
- package/templates/vista-auth-v1/vista-auth-v1.js +9 -7
- package/type/vista-auth-type.d.ts +16 -2
- package/type/vista-button-type.d.ts +1 -0
- package/type/vista-checkbox-type.d.ts +3 -1
|
@@ -31,8 +31,8 @@ var vistaButtonRoundedMap = (_c = {},
|
|
|
31
31
|
_c[vista_button_type_1.VISTA_BUTTON_ROUNDED.FULL] = 'rounded-full',
|
|
32
32
|
_c);
|
|
33
33
|
var VistaButtonV1 = function (_a) {
|
|
34
|
-
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, handleOnClick = _a.handleOnClick, icon = _a.icon, label = _a.label, prefixIcon = _a.prefixIcon, _c = _a.rounded, rounded = _c === void 0 ? vista_button_type_1.VISTA_BUTTON_ROUNDED.MD : _c, _d = _a.size, size = _d === void 0 ? vista_button_type_1.VISTA_BUTTON_SIZE.SM : _d, suffixIcon = _a.suffixIcon, _e = _a.variant, variant = _e === void 0 ? vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY : _e;
|
|
35
|
-
return (react_1.default.createElement("button", { className: "flex flex-row justify-center items-center font-semibold shadow-sm focus-visible:outline focus-visible:outline-
|
|
34
|
+
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, handleOnClick = _a.handleOnClick, icon = _a.icon, label = _a.label, prefixIcon = _a.prefixIcon, _c = _a.rounded, rounded = _c === void 0 ? vista_button_type_1.VISTA_BUTTON_ROUNDED.MD : _c, _d = _a.size, size = _d === void 0 ? vista_button_type_1.VISTA_BUTTON_SIZE.SM : _d, suffixIcon = _a.suffixIcon, _e = _a.variant, variant = _e === void 0 ? vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY : _e, className = _a.className;
|
|
35
|
+
return (react_1.default.createElement("button", { className: "flex flex-row justify-center items-center font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:bg-gray-200 disabled:text-gray-400 ".concat(className, " ").concat(vistaButtonVariantMap[variant], " ").concat(vistaButtonRoundedMap[rounded], " ").concat(vistaButtonSizeMap[size]), onClick: handleOnClick, disabled: disabled, type: "button" },
|
|
36
36
|
react_1.default.createElement("div", { className: 'flex flex-row justify-center items-center gap-2' },
|
|
37
37
|
react_1.default.createElement(react_1.default.Fragment, null, variant !== vista_button_type_1.VISTA_BUTTON_VARIANT.ICON && prefixIcon && prefixIcon),
|
|
38
38
|
react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -7,18 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
7
7
|
exports.VistaCheckboxV2 = void 0;
|
|
8
8
|
var react_1 = __importDefault(require("react"));
|
|
9
9
|
var VistaCheckboxV2 = function (_a) {
|
|
10
|
-
var description = _a.description, heading = _a.heading, id = _a.id,
|
|
11
|
-
return (react_1.default.createElement("div", { className: "flex gap-
|
|
12
|
-
react_1.default.createElement("
|
|
13
|
-
react_1.default.createElement("div", { className: "group grid size-4 grid-cols-1" },
|
|
14
|
-
react_1.default.createElement("input", { "aria-describedby": "".concat(id, "-description"), className: "col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto", id: id, name: id, onChange: onChange, type: "checkbox", value: id }),
|
|
15
|
-
react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 14 14", className: "pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" },
|
|
16
|
-
react_1.default.createElement("path", { d: "M3 8L6 11L11 3.5", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-0 group-has-[:checked]:opacity-100" }),
|
|
17
|
-
react_1.default.createElement("path", { d: "M3 7H11", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-0 group-has-[:indeterminate]:opacity-100" })))),
|
|
10
|
+
var checked = _a.checked, description = _a.description, handleOnChange = _a.handleOnChange, heading = _a.heading, id = _a.id, route = _a.route;
|
|
11
|
+
return (react_1.default.createElement("div", { className: "flex gap-2 items-center" },
|
|
12
|
+
react_1.default.createElement("input", { "aria-describedby": "".concat(id, "-description"), checked: checked, className: "size-4 rounded border-gray-300 text-primary focus:ring-primary", id: id, name: id, onChange: function (e) { return handleOnChange(id, !checked); }, type: "checkbox" }),
|
|
18
13
|
react_1.default.createElement("div", { className: "text-sm/6" },
|
|
19
|
-
react_1.default.createElement("label", { htmlFor:
|
|
14
|
+
react_1.default.createElement("label", { htmlFor: id, className: "font-bold text-primary" },
|
|
15
|
+
route && (react_1.default.createElement("a", { className: 'underline', href: route, target: '_blank' }, heading)),
|
|
16
|
+
!route && heading),
|
|
20
17
|
' ',
|
|
21
|
-
react_1.default.createElement("span", { id: "
|
|
18
|
+
react_1.default.createElement("span", { id: "".concat(id, "-description"), className: "text-gray-500" },
|
|
22
19
|
react_1.default.createElement("span", { className: "sr-only" }, heading),
|
|
23
20
|
description))));
|
|
24
21
|
};
|
package/package.json
CHANGED
|
@@ -9,8 +9,11 @@ var react_1 = __importDefault(require("react"));
|
|
|
9
9
|
var link_1 = __importDefault(require("next/link"));
|
|
10
10
|
var image_1 = __importDefault(require("next/image"));
|
|
11
11
|
var vista_text_input_v1_1 = require("../../molecules/vista-text-input-v1");
|
|
12
|
+
var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
|
|
13
|
+
var vista_button_type_1 = require("../../type/vista-button-type");
|
|
14
|
+
var vista_checkbox_v2_1 = require("../../molecules/vista-checkbox-v2/vista-checkbox-v2");
|
|
12
15
|
var VistaAuthV1 = function (_a) {
|
|
13
|
-
var actionLabel = _a.actionLabel, actionRoute = _a.actionRoute, banner = _a.banner, bannerAlt = _a.bannerAlt, description = _a.description,
|
|
16
|
+
var actionLabel = _a.actionLabel, actionRoute = _a.actionRoute, banner = _a.banner, bannerAlt = _a.bannerAlt, _b = _a.buttonDisabled, buttonDisabled = _b === void 0 ? false : _b, description = _a.description, emailAuthButtonLabel = _a.emailAuthButtonLabel, forgotPassword = _a.forgotPassword, forgotPasswordRoute = _a.forgotPasswordRoute, handleAuth = _a.handleAuth, heading = _a.heading, inputElements = _a.inputElements, _c = _a.label, label = _c === void 0 ? false : _c, logo = _a.logo, logoAlt = _a.logoAlt, rememberMeChecked = _a.rememberMeChecked, rememberMeDescription = _a.rememberMeDescription, rememberMeHandleOnChange = _a.rememberMeHandleOnChange, rememberMeHeading = _a.rememberMeHeading, rememberMeId = _a.rememberMeId, rememberMeRoute = _a.rememberMeRoute, _d = _a.reverted, reverted = _d === void 0 ? false : _d, termsOfUseChecked = _a.termsOfUseChecked, termsOfUseDescription = _a.termsOfUseDescription, termsOfUseHandleOnChange = _a.termsOfUseHandleOnChange, termsOfUseHeading = _a.termsOfUseHeading, termsOfUseId = _a.termsOfUseId, termsOfUseRoute = _a.termsOfUseRoute;
|
|
14
17
|
return (react_1.default.createElement("section", { className: 'h-screen' },
|
|
15
18
|
react_1.default.createElement("div", { className: "flex min-h-full flex-1" },
|
|
16
19
|
react_1.default.createElement("div", { className: "flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24 ".concat(reverted ? 'order-2' : 'order-1') },
|
|
@@ -31,17 +34,16 @@ var VistaAuthV1 = function (_a) {
|
|
|
31
34
|
return enabled;
|
|
32
35
|
})
|
|
33
36
|
.map(function (_a) {
|
|
34
|
-
var handleOnChange = _a.handleOnChange, id = _a.id, inputLabel = _a.inputLabel, inputType = _a.inputType, placeholder = _a.placeholder, value = _a.value;
|
|
35
|
-
return (react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: handleOnChange, id: id, key: id, label: inputLabel, placeholder: placeholder, type: inputType, value: value }));
|
|
37
|
+
var error = _a.error, handleOnChange = _a.handleOnChange, id = _a.id, inputLabel = _a.inputLabel, inputType = _a.inputType, placeholder = _a.placeholder, value = _a.value;
|
|
38
|
+
return (react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { error: error, handleOnChange: handleOnChange, id: id, key: id, label: inputLabel, placeholder: placeholder, type: inputType, value: value }));
|
|
36
39
|
}),
|
|
37
40
|
react_1.default.createElement("div", { className: "flex items-center justify-between" },
|
|
38
|
-
react_1.default.createElement(
|
|
39
|
-
react_1.default.createElement("input", { id: "remember-me", name: "remember-me", type: "checkbox", className: "size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" }),
|
|
40
|
-
react_1.default.createElement("label", { htmlFor: "remember-me", className: "ml-3 block text-sm/6 text-gray-700 dark:text-gray-300" }, "Remember me")),
|
|
41
|
+
react_1.default.createElement(vista_checkbox_v2_1.VistaCheckboxV2, { checked: rememberMeChecked, description: rememberMeDescription, handleOnChange: rememberMeHandleOnChange, heading: rememberMeHeading, id: rememberMeId, route: rememberMeRoute }),
|
|
41
42
|
forgotPassword && forgotPasswordRoute && (react_1.default.createElement("div", { className: "text-sm/6" },
|
|
42
43
|
react_1.default.createElement("a", { href: forgotPasswordRoute, className: "font-semibold text-primary" }, forgotPassword)))),
|
|
44
|
+
react_1.default.createElement(vista_checkbox_v2_1.VistaCheckboxV2, { checked: termsOfUseChecked, description: termsOfUseDescription, handleOnChange: termsOfUseHandleOnChange, heading: termsOfUseHeading, id: termsOfUseId, route: termsOfUseRoute }),
|
|
43
45
|
react_1.default.createElement("div", null,
|
|
44
|
-
react_1.default.createElement(
|
|
46
|
+
react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { handleOnClick: handleAuth, label: emailAuthButtonLabel, className: 'w-full', size: vista_button_type_1.VISTA_BUTTON_SIZE.LG, disabled: buttonDisabled }))))))),
|
|
45
47
|
react_1.default.createElement("div", { className: "relative hidden w-0 flex-1 lg:block ".concat(reverted ? 'order-1' : 'order-2') },
|
|
46
48
|
react_1.default.createElement(image_1.default, { alt: bannerAlt, className: "absolute inset-0 size-full object-cover ".concat(reverted ? '' : 'scale-x-[-1]'), fill: true, height: 0, loading: "lazy", sizes: "60vw", src: banner, width: 0 }),
|
|
47
49
|
label && (react_1.default.createElement("div", { className: "absolute top-14 bg-primary px-6 py-2 ".concat(reverted ? 'right-0' : 'left-0') },
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface VistaAuthInputElements {
|
|
2
2
|
enabled: boolean;
|
|
3
|
+
error: string;
|
|
3
4
|
handleOnChange: (k: string, v: string) => void;
|
|
4
5
|
id: string;
|
|
5
6
|
inputLabel: string;
|
|
@@ -12,15 +13,28 @@ export interface VistaAuthV1Props {
|
|
|
12
13
|
actionRoute: string;
|
|
13
14
|
banner: string;
|
|
14
15
|
bannerAlt: string;
|
|
16
|
+
buttonDisabled?: boolean;
|
|
15
17
|
description: string;
|
|
16
|
-
|
|
18
|
+
emailAuthButtonLabel: string;
|
|
17
19
|
forgotPassword: string;
|
|
18
20
|
forgotPasswordRoute?: string;
|
|
19
|
-
|
|
21
|
+
handleAuth: () => void;
|
|
20
22
|
heading: string;
|
|
21
23
|
inputElements: VistaAuthInputElements[];
|
|
22
24
|
label?: string;
|
|
23
25
|
logo: string;
|
|
24
26
|
logoAlt: string;
|
|
27
|
+
rememberMeChecked: boolean;
|
|
28
|
+
rememberMeDescription: string;
|
|
29
|
+
rememberMeHandleOnChange: (k: string, v: boolean) => void;
|
|
30
|
+
rememberMeHeading: string;
|
|
31
|
+
rememberMeId: string;
|
|
32
|
+
rememberMeRoute?: string;
|
|
25
33
|
reverted?: boolean;
|
|
34
|
+
termsOfUseChecked: boolean;
|
|
35
|
+
termsOfUseDescription: string;
|
|
36
|
+
termsOfUseHandleOnChange: (k: string, v: boolean) => void;
|
|
37
|
+
termsOfUseHeading: string;
|
|
38
|
+
termsOfUseId: string;
|
|
39
|
+
termsOfUseRoute?: string;
|
|
26
40
|
}
|
|
@@ -7,10 +7,12 @@ export interface VistaCheckboxV1Props {
|
|
|
7
7
|
id: string;
|
|
8
8
|
}
|
|
9
9
|
export interface VistaCheckboxV2Props {
|
|
10
|
+
checked: boolean;
|
|
10
11
|
description: string;
|
|
12
|
+
handleOnChange: (k: string, v: boolean) => void;
|
|
11
13
|
heading: string;
|
|
12
14
|
id: string;
|
|
13
|
-
|
|
15
|
+
route?: string;
|
|
14
16
|
}
|
|
15
17
|
export interface VistaCheckboxV3Props {
|
|
16
18
|
description?: string;
|