@algolia/satellite 1.6.0 → 1.7.0
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/cjs/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
- package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/cjs/Actions/index.d.ts +2 -0
- package/dist/cjs/Actions/index.js +18 -0
- package/dist/cjs/Fields/Field/Field.js +1 -1
- package/dist/cjs/Fields/Form/Form.d.ts +12 -10
- package/dist/cjs/Fields/Form/Form.js +50 -38
- package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
- package/dist/cjs/Fields/Form/FormContext.js +2 -2
- package/dist/cjs/Fields/Form/index.d.ts +4 -3
- package/dist/cjs/Fields/Form/index.js +31 -21
- package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
- package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
- package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
- package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
- package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
- package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
- package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
- package/dist/cjs/Fields/Form/stories/JSONForms.js +58 -55
- package/dist/cjs/Fields/Form/stories/MultiStep.js +474 -468
- package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
- package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
- package/dist/cjs/Fields/Form/useForm.js +3 -3
- package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
- package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/cjs/styles/tailwind.config.js +1 -1
- package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
- package/dist/esm/Actions/Accordion/Accordion.js +139 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
- package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
- package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/esm/Actions/index.d.ts +2 -0
- package/dist/esm/Actions/index.js +2 -2
- package/dist/esm/Fields/Field/Field.js +2 -2
- package/dist/esm/Fields/Form/Form.d.ts +12 -10
- package/dist/esm/Fields/Form/Form.js +52 -40
- package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
- package/dist/esm/Fields/Form/FormContext.js +1 -1
- package/dist/esm/Fields/Form/index.d.ts +4 -3
- package/dist/esm/Fields/Form/index.js +2 -3
- package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
- package/dist/esm/Fields/Form/stories/Complex.js +649 -643
- package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
- package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
- package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
- package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
- package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
- package/dist/esm/Fields/Form/stories/JSONForms.js +59 -56
- package/dist/esm/Fields/Form/stories/MultiStep.js +475 -469
- package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
- package/dist/esm/Fields/Form/useForm.d.ts +1 -1
- package/dist/esm/Fields/Form/useForm.js +3 -3
- package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
- package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
- package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
- package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
- package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
- package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
- package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
- package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
- package/dist/esm/Layout/Tables/Table/Table.js +4 -2
- package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
- package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
- package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
- package/dist/esm/styles/tailwind.config.js +1 -1
- package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
- package/dist/satellite.min.css +1 -1
- package/package.json +2 -1
@@ -1,13 +1,13 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import type { FieldState } from "../Field";
|
3
|
-
export declare type
|
3
|
+
export declare type FormContextField = {
|
4
4
|
state: FieldState;
|
5
5
|
label: string;
|
6
6
|
labelFor: string;
|
7
7
|
};
|
8
|
-
export declare type
|
9
|
-
fields: Record<string,
|
10
|
-
addField: (field:
|
11
|
-
removeField: (field:
|
8
|
+
export declare type FormContextValue = {
|
9
|
+
fields: Record<string, FormContextField>;
|
10
|
+
addField: (field: FormContextField) => void;
|
11
|
+
removeField: (field: FormContextField) => void;
|
12
12
|
};
|
13
|
-
export declare const
|
13
|
+
export declare const FormContext: import("react").Context<FormContextValue | null>;
|
@@ -3,6 +3,6 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.FormContext = void 0;
|
7
7
|
var _react = require("react");
|
8
|
-
var
|
8
|
+
var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)(null);
|
@@ -1,3 +1,4 @@
|
|
1
|
-
export
|
2
|
-
export
|
3
|
-
export
|
1
|
+
export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
|
2
|
+
export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
|
3
|
+
export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
|
4
|
+
export { useForm as useExperimentalForm } from "./useForm";
|
@@ -3,25 +3,35 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
6
|
+
Object.defineProperty(exports, "ExperimentalForm", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _Form.Form;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "ExperimentalFormErrorMessage", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _Form.FormErrorMessage;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
Object.defineProperty(exports, "ExperimentalFormReset", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _Form.FormReset;
|
22
|
+
}
|
16
23
|
});
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
}
|
24
|
+
Object.defineProperty(exports, "ExperimentalFormSubmit", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function get() {
|
27
|
+
return _Form.FormSubmit;
|
28
|
+
}
|
29
|
+
});
|
30
|
+
Object.defineProperty(exports, "useExperimentalForm", {
|
31
|
+
enumerable: true,
|
32
|
+
get: function get() {
|
33
|
+
return _useForm.useForm;
|
34
|
+
}
|
35
|
+
});
|
36
|
+
var _Form = require("./Form");
|
37
|
+
var _useForm = require("./useForm");
|
@@ -23,7 +23,7 @@ var _Input = require("../../Input");
|
|
23
23
|
var _Form = require("../Form");
|
24
24
|
var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
|
25
25
|
var _jsxRuntime = require("react/jsx-runtime");
|
26
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
26
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
27
27
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
28
28
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
29
29
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
@@ -152,6 +152,10 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
|
|
152
152
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
153
153
|
formData = _useState2[0],
|
154
154
|
setFormData = _useState2[1];
|
155
|
+
var _useState3 = (0, _react.useState)([]),
|
156
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
157
|
+
extraErrors = _useState4[0],
|
158
|
+
setExtraErrors = _useState4[1];
|
155
159
|
var _useForm = (0, _reactHookForm.useForm)({
|
156
160
|
defaultValues: initialFormData,
|
157
161
|
reValidateMode: "onChange",
|
@@ -180,74 +184,82 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
|
|
180
184
|
};
|
181
185
|
}
|
182
186
|
};
|
183
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
184
|
-
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["
|
185
|
-
children:
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
193
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
194
|
-
name: "username",
|
195
|
-
control: control,
|
196
|
-
render: function render(_ref5) {
|
197
|
-
var field = _ref5.field;
|
198
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
199
|
-
label: "Username",
|
200
|
-
labelFor: "username",
|
201
|
-
description: "Please enter your username",
|
202
|
-
state: getFieldState("username"),
|
203
|
-
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
204
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
205
|
-
id: "username",
|
206
|
-
placeholder: "Username",
|
207
|
-
required: true
|
208
|
-
}, field))
|
209
|
-
});
|
210
|
-
}
|
211
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
212
|
-
name: "password",
|
213
|
-
control: control,
|
214
|
-
render: function render(_ref6) {
|
215
|
-
var field = _ref6.field;
|
216
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
217
|
-
label: "Password",
|
218
|
-
labelFor: "password",
|
219
|
-
description: "Please enter your password",
|
220
|
-
state: getFieldState("password"),
|
221
|
-
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
222
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
223
|
-
id: "password",
|
224
|
-
placeholder: "Password",
|
225
|
-
type: "password",
|
226
|
-
required: true
|
227
|
-
}, field))
|
187
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
188
|
+
className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
189
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
190
|
+
className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
191
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
192
|
+
onSubmit: handleSubmit(function (data) {
|
193
|
+
setFormData(data);
|
194
|
+
setExtraErrors(function (previousErrors) {
|
195
|
+
return previousErrors.concat("first error", "2nd error");
|
228
196
|
});
|
229
|
-
}
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
197
|
+
}),
|
198
|
+
onReset: function onReset() {
|
199
|
+
return setFormData(initialFormData);
|
200
|
+
},
|
201
|
+
className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
202
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {
|
203
|
+
extraErrors: extraErrors
|
204
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
205
|
+
name: "username",
|
206
|
+
control: control,
|
207
|
+
render: function render(_ref5) {
|
208
|
+
var field = _ref5.field;
|
209
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
210
|
+
label: "Username",
|
211
|
+
labelFor: "username",
|
212
|
+
description: "Please enter your username",
|
213
|
+
state: getFieldState("username"),
|
214
|
+
className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
215
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
216
|
+
id: "username",
|
217
|
+
placeholder: "Username",
|
218
|
+
required: true
|
219
|
+
}, field))
|
220
|
+
});
|
221
|
+
}
|
222
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
|
223
|
+
name: "password",
|
224
|
+
control: control,
|
225
|
+
render: function render(_ref6) {
|
226
|
+
var field = _ref6.field;
|
227
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
228
|
+
label: "Password",
|
229
|
+
labelFor: "password",
|
230
|
+
description: "Please enter your password",
|
231
|
+
state: getFieldState("password"),
|
232
|
+
className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
233
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
234
|
+
id: "password",
|
235
|
+
placeholder: "Password",
|
236
|
+
type: "password",
|
237
|
+
required: true
|
238
|
+
}, field))
|
239
|
+
});
|
240
|
+
}
|
241
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
242
|
+
className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
243
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
244
|
+
variant: "primary",
|
245
|
+
"aria-label": "Login to the website",
|
246
|
+
loading: formState.isSubmitting,
|
247
|
+
children: "Login"
|
248
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
249
|
+
"aria-label": "Reset the form",
|
250
|
+
onClick: function onClick() {
|
251
|
+
return reset();
|
252
|
+
},
|
253
|
+
children: "Reset"
|
254
|
+
})]
|
243
255
|
})]
|
256
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
257
|
+
className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
258
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
259
|
+
className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
260
|
+
children: JSON.stringify(formData, null, 2)
|
244
261
|
})]
|
245
|
-
})
|
246
|
-
className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
247
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
248
|
-
className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
249
|
-
children: JSON.stringify(formData, null, 2)
|
250
|
-
})]
|
262
|
+
})
|
251
263
|
});
|
252
264
|
};
|
253
265
|
var yupSchema = yup.object({
|
@@ -298,14 +310,14 @@ var yupSchema = yup.object({
|
|
298
310
|
})
|
299
311
|
});
|
300
312
|
var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = function FormikAsyncValidationComponent() {
|
301
|
-
var
|
302
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
303
|
-
formData = _useState4[0],
|
304
|
-
setFormData = _useState4[1];
|
305
|
-
var _useState5 = (0, _react.useState)(false),
|
313
|
+
var _useState5 = (0, _react.useState)(initialFormData),
|
306
314
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
307
|
-
|
308
|
-
|
315
|
+
formData = _useState6[0],
|
316
|
+
setFormData = _useState6[1];
|
317
|
+
var _useState7 = (0, _react.useState)(false),
|
318
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
319
|
+
revalidationEnabled = _useState8[0],
|
320
|
+
setRevalidationEnabled = _useState8[1];
|
309
321
|
var formik = (0, _formik.useFormik)({
|
310
322
|
initialValues: initialFormData,
|
311
323
|
validateOnChange: revalidationEnabled,
|
@@ -336,61 +348,64 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
|
|
336
348
|
}
|
337
349
|
};
|
338
350
|
(0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
|
339
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
340
|
-
className: (0, _satellitePrefixer["default"])(
|
341
|
-
children:
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
351
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
352
|
+
className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
|
353
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
354
|
+
className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
|
355
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
|
356
|
+
onSubmit: function onSubmit(e) {
|
357
|
+
setRevalidationEnabled(true);
|
358
|
+
formik.handleSubmit(e);
|
359
|
+
},
|
360
|
+
onReset: function onReset(e) {
|
361
|
+
setRevalidationEnabled(false);
|
362
|
+
formik.handleReset(e);
|
363
|
+
},
|
364
|
+
className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
|
365
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
366
|
+
label: "Username",
|
367
|
+
labelFor: "username",
|
368
|
+
description: "Please enter your username",
|
369
|
+
state: getFieldState("username"),
|
370
|
+
className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
371
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
372
|
+
id: "username",
|
373
|
+
placeholder: "Username",
|
374
|
+
required: true
|
375
|
+
}, formik.getFieldProps("username")))
|
376
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
|
377
|
+
label: "Password",
|
378
|
+
labelFor: "password",
|
379
|
+
description: "Please enter your password",
|
380
|
+
state: getFieldState("password"),
|
381
|
+
className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
|
382
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
|
383
|
+
id: "password",
|
384
|
+
placeholder: "Password",
|
385
|
+
type: "password",
|
386
|
+
required: true
|
387
|
+
}, formik.getFieldProps("password")))
|
388
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
389
|
+
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
|
390
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
|
391
|
+
variant: "primary",
|
392
|
+
"aria-label": "Login to the website",
|
393
|
+
loading: formik.isValidating,
|
394
|
+
children: "Login"
|
395
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
|
396
|
+
"aria-label": "Reset the form",
|
397
|
+
onClick: function onClick() {
|
398
|
+
return formik.resetForm();
|
399
|
+
},
|
400
|
+
children: "Reset"
|
401
|
+
})]
|
387
402
|
})]
|
403
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
|
404
|
+
className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
405
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
406
|
+
className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
407
|
+
children: JSON.stringify(formData, null, 2)
|
388
408
|
})]
|
389
|
-
})
|
390
|
-
className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
|
391
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
|
392
|
-
className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
|
393
|
-
children: JSON.stringify(formData, null, 2)
|
394
|
-
})]
|
409
|
+
})
|
395
410
|
});
|
396
411
|
};
|