@fuf-stack/uniform 0.0.4 → 0.0.6
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/FieldCopyTestIdButton-D-z1usqE.d.cts +9 -0
- package/dist/FieldCopyTestIdButton-D-z1usqE.d.ts +9 -0
- package/dist/FieldValidationError-BSXedjCA.d.cts +13 -0
- package/dist/FieldValidationError-BSXedjCA.d.ts +13 -0
- package/dist/Form/index.cjs +2 -2
- package/dist/Form/index.js +1 -1
- package/dist/SubmitButton/index.cjs +5 -39
- package/dist/SubmitButton/index.cjs.map +1 -1
- package/dist/SubmitButton/index.d.cts +7 -22
- package/dist/SubmitButton/index.d.ts +7 -22
- package/dist/SubmitButton/index.js +5 -39
- package/dist/SubmitButton/index.js.map +1 -1
- package/dist/SubmitButton-Bi87hRzl.d.cts +24 -0
- package/dist/SubmitButton-Bi87hRzl.d.ts +24 -0
- package/dist/chunk-22AA557I.cjs +40 -0
- package/dist/chunk-22AA557I.cjs.map +1 -0
- package/dist/{chunk-II57W3V2.cjs → chunk-4BELEHDQ.cjs} +20 -19
- package/dist/chunk-4BELEHDQ.cjs.map +1 -0
- package/dist/{chunk-BQUVQMFA.js → chunk-6XKDXQ4A.js} +15 -14
- package/dist/chunk-6XKDXQ4A.js.map +1 -0
- package/dist/chunk-DBLODROX.js +45 -0
- package/dist/chunk-DBLODROX.js.map +1 -0
- package/dist/chunk-FNVT6LS4.js +40 -0
- package/dist/chunk-FNVT6LS4.js.map +1 -0
- package/dist/chunk-JNTIBBIY.cjs +46 -0
- package/dist/chunk-JNTIBBIY.cjs.map +1 -0
- package/dist/chunk-L3BVHWGU.js +46 -0
- package/dist/chunk-L3BVHWGU.js.map +1 -0
- package/dist/chunk-QTL5FREE.cjs +45 -0
- package/dist/chunk-QTL5FREE.cjs.map +1 -0
- package/dist/index.cjs +24 -4
- package/dist/index.d.cts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +24 -4
- package/dist/partials/FieldCopyTestIdButton/index.cjs +5 -32
- package/dist/partials/FieldCopyTestIdButton/index.cjs.map +1 -1
- package/dist/partials/FieldCopyTestIdButton/index.d.cts +5 -7
- package/dist/partials/FieldCopyTestIdButton/index.d.ts +5 -7
- package/dist/partials/FieldCopyTestIdButton/index.js +5 -32
- package/dist/partials/FieldCopyTestIdButton/index.js.map +1 -1
- package/dist/partials/FieldValidationError/index.cjs +3 -36
- package/dist/partials/FieldValidationError/index.cjs.map +1 -1
- package/dist/partials/FieldValidationError/index.d.cts +6 -11
- package/dist/partials/FieldValidationError/index.d.ts +6 -11
- package/dist/partials/FieldValidationError/index.js +5 -38
- package/dist/partials/FieldValidationError/index.js.map +1 -1
- package/package.json +6 -3
- package/dist/chunk-BQUVQMFA.js.map +0 -1
- package/dist/chunk-II57W3V2.cjs.map +0 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
interface FieldCopyTestIdButtonProps {
|
|
4
|
+
className?: string;
|
|
5
|
+
testId: string;
|
|
6
|
+
}
|
|
7
|
+
declare const FieldCopyTestIdButton: ({ className, testId, }: FieldCopyTestIdButtonProps) => react_jsx_runtime.JSX.Element | null;
|
|
8
|
+
|
|
9
|
+
export { FieldCopyTestIdButton as F, type FieldCopyTestIdButtonProps as a };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
interface FieldCopyTestIdButtonProps {
|
|
4
|
+
className?: string;
|
|
5
|
+
testId: string;
|
|
6
|
+
}
|
|
7
|
+
declare const FieldCopyTestIdButton: ({ className, testId, }: FieldCopyTestIdButtonProps) => react_jsx_runtime.JSX.Element | null;
|
|
8
|
+
|
|
9
|
+
export { FieldCopyTestIdButton as F, type FieldCopyTestIdButtonProps as a };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { FieldError } from 'react-hook-form';
|
|
3
|
+
|
|
4
|
+
interface FieldValidationErrorProps {
|
|
5
|
+
error: FieldError[] | Record<string, FieldError[]>;
|
|
6
|
+
testId?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Renders a validation error of a field
|
|
10
|
+
*/
|
|
11
|
+
declare const FieldValidationError: ({ error, testId, }: FieldValidationErrorProps) => react_jsx_runtime.JSX.Element | null;
|
|
12
|
+
|
|
13
|
+
export { FieldValidationError as F, type FieldValidationErrorProps as a };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { FieldError } from 'react-hook-form';
|
|
3
|
+
|
|
4
|
+
interface FieldValidationErrorProps {
|
|
5
|
+
error: FieldError[] | Record<string, FieldError[]>;
|
|
6
|
+
testId?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Renders a validation error of a field
|
|
10
|
+
*/
|
|
11
|
+
declare const FieldValidationError: ({ error, testId, }: FieldValidationErrorProps) => react_jsx_runtime.JSX.Element | null;
|
|
12
|
+
|
|
13
|
+
export { FieldValidationError as F, type FieldValidationErrorProps as a };
|
package/dist/Form/index.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunk4BELEHDQcjs = require('../chunk-4BELEHDQ.cjs');
|
|
5
5
|
require('../chunk-WQRM7G4C.cjs');
|
|
6
6
|
require('../chunk-BBB4FEY6.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
exports.Form =
|
|
10
|
+
exports.Form = _chunk4BELEHDQcjs.Form_default; exports.default = _chunk4BELEHDQcjs.Form_default2;
|
|
11
11
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Form/index.js
CHANGED
|
@@ -1,45 +1,11 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var _chunkWQRM7G4Ccjs = require('../chunk-WQRM7G4C.cjs');
|
|
4
3
|
|
|
4
|
+
var _chunkJNTIBBIYcjs = require('../chunk-JNTIBBIY.cjs');
|
|
5
|
+
require('../chunk-WQRM7G4C.cjs');
|
|
6
|
+
require('../chunk-BBB4FEY6.cjs');
|
|
5
7
|
|
|
6
|
-
var _chunkBBB4FEY6cjs = require('../chunk-BBB4FEY6.cjs');
|
|
7
8
|
|
|
8
|
-
// src/SubmitButton/SubmitButton.tsx
|
|
9
|
-
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
10
|
-
var _Button = require('@fuf-stack/pixels/Button'); var _Button2 = _interopRequireDefault(_Button);
|
|
11
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
12
|
-
var SubmitButton = ({
|
|
13
|
-
children = "Submit",
|
|
14
|
-
className = void 0,
|
|
15
|
-
color = "success",
|
|
16
|
-
loading = false,
|
|
17
|
-
onClick = void 0,
|
|
18
|
-
testId = "form_submit_button"
|
|
19
|
-
}) => {
|
|
20
|
-
const {
|
|
21
|
-
formState: { isValid, isSubmitting, isValidating }
|
|
22
|
-
} = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
|
|
23
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
24
|
-
_Button2.default,
|
|
25
|
-
{
|
|
26
|
-
className: _classnames2.default.call(void 0, className),
|
|
27
|
-
color,
|
|
28
|
-
testId: _chunkBBB4FEY6cjs.slugify.call(void 0, testId),
|
|
29
|
-
disabled: !isValid || isSubmitting || isValidating,
|
|
30
|
-
loading,
|
|
31
|
-
onClick,
|
|
32
|
-
type: "submit",
|
|
33
|
-
children
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
var SubmitButton_default = SubmitButton;
|
|
38
9
|
|
|
39
|
-
|
|
40
|
-
var SubmitButton_default2 = SubmitButton_default;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
exports.SubmitButton = SubmitButton_default; exports.default = SubmitButton_default2;
|
|
10
|
+
exports.SubmitButton = _chunkJNTIBBIYcjs.SubmitButton_default; exports.default = _chunkJNTIBBIYcjs.SubmitButton_default2;
|
|
45
11
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
@@ -1,24 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
1
|
+
import { S as SubmitButton } from '../SubmitButton-Bi87hRzl.cjs';
|
|
2
|
+
export { a as SubmitButtonProps } from '../SubmitButton-Bi87hRzl.cjs';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import '@fuf-stack/pixels';
|
|
5
|
+
import 'react';
|
|
4
6
|
|
|
5
|
-
interface SubmitButtonProps {
|
|
6
|
-
/** child components */
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
/** CSS class name */
|
|
9
|
-
className?: string | string[];
|
|
10
|
-
/** color of the button */
|
|
11
|
-
color?: ButtonProps['color'];
|
|
12
|
-
/** If set loading animation is shown */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** function called when the button is pressed. */
|
|
15
|
-
onClick?: ButtonProps['onClick'];
|
|
16
|
-
/** HTML data-testid attribute used in e2e tests */
|
|
17
|
-
testId?: string;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* From SubmitButton
|
|
21
|
-
*/
|
|
22
|
-
declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
|
|
23
7
|
|
|
24
|
-
|
|
8
|
+
|
|
9
|
+
export { SubmitButton, SubmitButton as default };
|
|
@@ -1,24 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
1
|
+
import { S as SubmitButton } from '../SubmitButton-Bi87hRzl.js';
|
|
2
|
+
export { a as SubmitButtonProps } from '../SubmitButton-Bi87hRzl.js';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import '@fuf-stack/pixels';
|
|
5
|
+
import 'react';
|
|
4
6
|
|
|
5
|
-
interface SubmitButtonProps {
|
|
6
|
-
/** child components */
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
/** CSS class name */
|
|
9
|
-
className?: string | string[];
|
|
10
|
-
/** color of the button */
|
|
11
|
-
color?: ButtonProps['color'];
|
|
12
|
-
/** If set loading animation is shown */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** function called when the button is pressed. */
|
|
15
|
-
onClick?: ButtonProps['onClick'];
|
|
16
|
-
/** HTML data-testid attribute used in e2e tests */
|
|
17
|
-
testId?: string;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* From SubmitButton
|
|
21
|
-
*/
|
|
22
|
-
declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
|
|
23
7
|
|
|
24
|
-
|
|
8
|
+
|
|
9
|
+
export { SubmitButton, SubmitButton as default };
|
|
@@ -1,43 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// src/SubmitButton/SubmitButton.tsx
|
|
9
|
-
import cn from "classnames";
|
|
10
|
-
import Button from "@fuf-stack/pixels/Button";
|
|
11
|
-
import { jsx } from "react/jsx-runtime";
|
|
12
|
-
var SubmitButton = ({
|
|
13
|
-
children = "Submit",
|
|
14
|
-
className = void 0,
|
|
15
|
-
color = "success",
|
|
16
|
-
loading = false,
|
|
17
|
-
onClick = void 0,
|
|
18
|
-
testId = "form_submit_button"
|
|
19
|
-
}) => {
|
|
20
|
-
const {
|
|
21
|
-
formState: { isValid, isSubmitting, isValidating }
|
|
22
|
-
} = useFormContext();
|
|
23
|
-
return /* @__PURE__ */ jsx(
|
|
24
|
-
Button,
|
|
25
|
-
{
|
|
26
|
-
className: cn(className),
|
|
27
|
-
color,
|
|
28
|
-
testId: slugify(testId),
|
|
29
|
-
disabled: !isValid || isSubmitting || isValidating,
|
|
30
|
-
loading,
|
|
31
|
-
onClick,
|
|
32
|
-
type: "submit",
|
|
33
|
-
children
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
var SubmitButton_default = SubmitButton;
|
|
38
|
-
|
|
39
|
-
// src/SubmitButton/index.ts
|
|
40
|
-
var SubmitButton_default2 = SubmitButton_default;
|
|
2
|
+
SubmitButton_default,
|
|
3
|
+
SubmitButton_default2
|
|
4
|
+
} from "../chunk-L3BVHWGU.js";
|
|
5
|
+
import "../chunk-BCMPSLSG.js";
|
|
6
|
+
import "../chunk-V46BHM2U.js";
|
|
41
7
|
export {
|
|
42
8
|
SubmitButton_default as SubmitButton,
|
|
43
9
|
SubmitButton_default2 as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonProps } from '@fuf-stack/pixels';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
interface SubmitButtonProps {
|
|
6
|
+
/** child components */
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
/** CSS class name */
|
|
9
|
+
className?: string | string[];
|
|
10
|
+
/** color of the button */
|
|
11
|
+
color?: ButtonProps['color'];
|
|
12
|
+
/** If set loading animation is shown */
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
/** function called when the button is pressed. */
|
|
15
|
+
onClick?: ButtonProps['onClick'];
|
|
16
|
+
/** HTML data-testid attribute used in e2e tests */
|
|
17
|
+
testId?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* From SubmitButton
|
|
21
|
+
*/
|
|
22
|
+
declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { SubmitButton as S, type SubmitButtonProps as a };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonProps } from '@fuf-stack/pixels';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
interface SubmitButtonProps {
|
|
6
|
+
/** child components */
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
/** CSS class name */
|
|
9
|
+
className?: string | string[];
|
|
10
|
+
/** color of the button */
|
|
11
|
+
color?: ButtonProps['color'];
|
|
12
|
+
/** If set loading animation is shown */
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
/** function called when the button is pressed. */
|
|
15
|
+
onClick?: ButtonProps['onClick'];
|
|
16
|
+
/** HTML data-testid attribute used in e2e tests */
|
|
17
|
+
testId?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* From SubmitButton
|
|
21
|
+
*/
|
|
22
|
+
declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { SubmitButton as S, type SubmitButtonProps as a };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx
|
|
2
|
+
var _fa6 = require('react-icons/fa6');
|
|
3
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
4
|
+
var _pixels = require('@fuf-stack/pixels');
|
|
5
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
6
|
+
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
7
|
+
var FieldCopyTestIdButton = ({
|
|
8
|
+
className = void 0,
|
|
9
|
+
testId
|
|
10
|
+
}) => {
|
|
11
|
+
const [debug] = _pixels.useLocalStorage.call(void 0, LOCALSTORAGE_DEBUG_KEY, false);
|
|
12
|
+
const copyToClipboard = () => {
|
|
13
|
+
navigator.clipboard.writeText(testId).catch((err) => {
|
|
14
|
+
console.error("Error copying TestId to clipboard", err);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
if (!debug) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
21
|
+
_pixels.Button,
|
|
22
|
+
{
|
|
23
|
+
className: _classnames2.default.call(void 0, className, "pointer-events-auto"),
|
|
24
|
+
variant: "light",
|
|
25
|
+
onClick: copyToClipboard,
|
|
26
|
+
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBullseye, {}),
|
|
27
|
+
size: "sm"
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
var FieldCopyTestIdButton_default = FieldCopyTestIdButton;
|
|
32
|
+
|
|
33
|
+
// src/partials/FieldCopyTestIdButton/index.ts
|
|
34
|
+
var FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default;
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
exports.FieldCopyTestIdButton_default = FieldCopyTestIdButton_default; exports.FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default2;
|
|
40
|
+
//# sourceMappingURL=chunk-22AA557I.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"names":["FieldCopyTestIdButton_default"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,OAAO,QAAQ;AAEf,SAAS,QAAQ,uBAAuB;AA8B5B;AAvBZ,IAAM,yBAAyB;AAE/B,IAAM,wBAAwB,CAAC;AAAA,EAC7B,YAAY;AAAA,EACZ;AACF,MAAkC;AAChC,QAAM,CAAC,KAAK,IAAI,gBAAgB,wBAAwB,KAAK;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,cAAU,UAAU,UAAU,MAAM,EAAE,MAAM,CAAC,QAAQ;AACnD,cAAQ,MAAM,qCAAqC,GAAG;AAAA,IACxD,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,qBAAqB;AAAA,MAC9C,SAAQ;AAAA,MACR,SAAS;AAAA,MACT,MAAM,oBAAC,cAAW;AAAA,MAClB,MAAK;AAAA;AAAA,EACP;AAEJ;AACA,IAAO,gCAAQ;;;ACjCf,IAAOA,iCAAQ","sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, useLocalStorage } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n className?: string;\n testId: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\nconst FieldCopyTestIdButton = ({\n className = undefined,\n testId,\n}: FieldCopyTestIdButtonProps) => {\n const [debug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(testId).catch((err) => {\n console.error('Error copying TestId to clipboard', err);\n });\n };\n\n if (!debug) {\n return null;\n }\n\n return (\n <Button\n className={cn(className, 'pointer-events-auto')}\n variant=\"light\"\n onClick={copyToClipboard}\n icon={<FaBullseye />}\n size=\"sm\"\n />\n );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"]}
|
|
@@ -16,10 +16,7 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefau
|
|
|
16
16
|
var _fa = require('react-icons/fa');
|
|
17
17
|
var _fa6 = require('react-icons/fa6');
|
|
18
18
|
|
|
19
|
-
var
|
|
20
|
-
var _Card = require('@fuf-stack/pixels/Card'); var _Card2 = _interopRequireDefault(_Card);
|
|
21
|
-
var _useLocalStorage = require('@fuf-stack/pixels/hooks/useLocalStorage'); var _useLocalStorage2 = _interopRequireDefault(_useLocalStorage);
|
|
22
|
-
var _Json = require('@fuf-stack/pixels/Json'); var _Json2 = _interopRequireDefault(_Json);
|
|
19
|
+
var _pixels = require('@fuf-stack/pixels');
|
|
23
20
|
var _jsxruntime = require('react/jsx-runtime');
|
|
24
21
|
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
25
22
|
var FormDebugViewer = ({ className = void 0 }) => {
|
|
@@ -28,21 +25,25 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
28
25
|
formState: { dirtyFields, isValid, isSubmitting },
|
|
29
26
|
validation
|
|
30
27
|
} = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
|
|
31
|
-
const [debug, setDebug] =
|
|
28
|
+
const [debug, setDebug] = _pixels.useLocalStorage.call(void 0, LOCALSTORAGE_DEBUG_KEY, false);
|
|
32
29
|
const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
|
|
33
30
|
const formValues = watch();
|
|
34
|
-
_react.useEffect.call(void 0,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
_react.useEffect.call(void 0,
|
|
32
|
+
() => {
|
|
33
|
+
const updateValidationErrors = async () => {
|
|
34
|
+
if (validation) {
|
|
35
|
+
const validateResult = await _optionalChain([validation, 'optionalAccess', _ => _.validateAsync, 'call', _2 => _2(formValues)]);
|
|
36
|
+
setValidationErrors(_optionalChain([validateResult, 'optionalAccess', _3 => _3.errors]));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
updateValidationErrors();
|
|
40
|
+
},
|
|
41
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
42
|
+
[JSON.stringify(formValues)]
|
|
43
|
+
);
|
|
43
44
|
if (!debug) {
|
|
44
45
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
45
|
-
|
|
46
|
+
_pixels.Button,
|
|
46
47
|
{
|
|
47
48
|
ariaLabel: "Enable form debug mode",
|
|
48
49
|
onClick: () => setDebug(!debug),
|
|
@@ -53,13 +54,13 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
53
54
|
);
|
|
54
55
|
}
|
|
55
56
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
56
|
-
|
|
57
|
+
_pixels.Card,
|
|
57
58
|
{
|
|
58
59
|
className: _classnames2.default.call(void 0, className),
|
|
59
60
|
header: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between", children: [
|
|
60
61
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-lg", children: "Debug Mode" }),
|
|
61
62
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
62
|
-
|
|
63
|
+
_pixels.Button,
|
|
63
64
|
{
|
|
64
65
|
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" }),
|
|
65
66
|
onClick: () => setDebug(false),
|
|
@@ -69,7 +70,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
69
70
|
)
|
|
70
71
|
] }),
|
|
71
72
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
72
|
-
|
|
73
|
+
_pixels.Json,
|
|
73
74
|
{
|
|
74
75
|
value: {
|
|
75
76
|
values: formValues,
|
|
@@ -155,4 +156,4 @@ var Form_default2 = Form_default;
|
|
|
155
156
|
|
|
156
157
|
|
|
157
158
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
158
|
-
//# sourceMappingURL=chunk-
|
|
159
|
+
//# sourceMappingURL=chunk-4BELEHDQ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["useEffect","cn","jsx","jsxs","Form_default"],"mappings":"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","sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n return JSON.parse(\n JSON.stringify(obj, (_key, value) => {\n return value === null ? undefined : value;\n }),\n );\n};\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?:\n | 'onChange'\n | 'onBlur'\n | 'onSubmit'\n | 'onTouched'\n | 'all'\n | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n const methods = useForm(\n validation\n ? {\n defaultValues: initialValues,\n resolver: async (values) => {\n const { data, errors, ...rest } = await validation.validateAsync(\n removeNullishFields(values),\n );\n // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n return { values: data || {}, errors: errors || {}, ...rest };\n },\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n }\n : {\n defaultValues: initialValues,\n },\n );\n\n useEffect(\n () => {\n if (validationTrigger === 'all-instant') {\n methods.trigger();\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [validationTrigger],\n );\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <FormProvider {...methods} validation={validation}>\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('flex-grow', className)}\n data-testid={slugify(testId || name || '')}\n name={name}\n onSubmit={methods.handleSubmit(onSubmit)}\n >\n {children}\n </form>\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n </div>\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, Card, Json, useLocalStorage } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n watch,\n formState: { dirtyFields, isValid, isSubmitting },\n validation,\n } = useFormContext();\n\n const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = watch();\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(formValues)],\n );\n\n if (!debug) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebug(!debug)}\n className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n variant=\"light\"\n icon={<FaBug />}\n />\n );\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebug(false)}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Json\n value={{\n values: formValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|
|
@@ -16,10 +16,7 @@ import { useEffect, useState } from "react";
|
|
|
16
16
|
import { FaTimes } from "react-icons/fa";
|
|
17
17
|
import { FaBug } from "react-icons/fa6";
|
|
18
18
|
import cn from "classnames";
|
|
19
|
-
import Button from "@fuf-stack/pixels
|
|
20
|
-
import Card from "@fuf-stack/pixels/Card";
|
|
21
|
-
import useLocalStorage from "@fuf-stack/pixels/hooks/useLocalStorage";
|
|
22
|
-
import Json from "@fuf-stack/pixels/Json";
|
|
19
|
+
import { Button, Card, Json, useLocalStorage } from "@fuf-stack/pixels";
|
|
23
20
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
24
21
|
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
25
22
|
var FormDebugViewer = ({ className = void 0 }) => {
|
|
@@ -31,15 +28,19 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
31
28
|
const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
|
|
32
29
|
const [validationErrors, setValidationErrors] = useState(null);
|
|
33
30
|
const formValues = watch();
|
|
34
|
-
useEffect(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
useEffect(
|
|
32
|
+
() => {
|
|
33
|
+
const updateValidationErrors = async () => {
|
|
34
|
+
if (validation) {
|
|
35
|
+
const validateResult = await validation?.validateAsync(formValues);
|
|
36
|
+
setValidationErrors(validateResult?.errors);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
updateValidationErrors();
|
|
40
|
+
},
|
|
41
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
42
|
+
[JSON.stringify(formValues)]
|
|
43
|
+
);
|
|
43
44
|
if (!debug) {
|
|
44
45
|
return /* @__PURE__ */ jsx(
|
|
45
46
|
Button,
|
|
@@ -155,4 +156,4 @@ export {
|
|
|
155
156
|
Form_default,
|
|
156
157
|
Form_default2
|
|
157
158
|
};
|
|
158
|
-
//# sourceMappingURL=chunk-
|
|
159
|
+
//# sourceMappingURL=chunk-6XKDXQ4A.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n return JSON.parse(\n JSON.stringify(obj, (_key, value) => {\n return value === null ? undefined : value;\n }),\n );\n};\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?:\n | 'onChange'\n | 'onBlur'\n | 'onSubmit'\n | 'onTouched'\n | 'all'\n | 'all-instant';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n const methods = useForm(\n validation\n ? {\n defaultValues: initialValues,\n resolver: async (values) => {\n const { data, errors, ...rest } = await validation.validateAsync(\n removeNullishFields(values),\n );\n // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n return { values: data || {}, errors: errors || {}, ...rest };\n },\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n }\n : {\n defaultValues: initialValues,\n },\n );\n\n useEffect(\n () => {\n if (validationTrigger === 'all-instant') {\n methods.trigger();\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [validationTrigger],\n );\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <FormProvider {...methods} validation={validation}>\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('flex-grow', className)}\n data-testid={slugify(testId || name || '')}\n name={name}\n onSubmit={methods.handleSubmit(onSubmit)}\n >\n {children}\n </form>\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n </div>\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, Card, Json, useLocalStorage } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n watch,\n formState: { dirtyFields, isValid, isSubmitting },\n validation,\n } = useFormContext();\n\n const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = watch();\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(formValues)],\n );\n\n if (!debug) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebug(!debug)}\n className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n variant=\"light\"\n icon={<FaBug />}\n />\n );\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebug(false)}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Json\n value={{\n values: formValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["useEffect","cn","jsx","jsxs","useEffect","cn","Form_default"]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import {
|
|
2
|
+
slugify
|
|
3
|
+
} from "./chunk-V46BHM2U.js";
|
|
4
|
+
|
|
5
|
+
// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
var FieldValidationError = ({
|
|
8
|
+
error,
|
|
9
|
+
testId = void 0
|
|
10
|
+
}) => {
|
|
11
|
+
if (!error) {
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
let tmp_errors = [];
|
|
15
|
+
if (typeof error === "object" && !(error instanceof Array)) {
|
|
16
|
+
const error_object = error;
|
|
17
|
+
Object.keys(error).forEach((key) => {
|
|
18
|
+
tmp_errors = [...tmp_errors, ...error_object[key]];
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
const errorArray = JSON.stringify(tmp_errors) !== "[]" ? tmp_errors : error;
|
|
22
|
+
const errorStrings = errorArray.map((e) => e.message);
|
|
23
|
+
const ariaString = `Error: ${errorStrings.join("\n")}`;
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
25
|
+
"ul",
|
|
26
|
+
{
|
|
27
|
+
"data-testid": slugify(testId || errorStrings.join()),
|
|
28
|
+
"aria-label": ariaString,
|
|
29
|
+
children: errorStrings.map((errorString, i) => (
|
|
30
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
31
|
+
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: errorString }) }, `error_${i}`)
|
|
32
|
+
))
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
var FieldValidationError_default = FieldValidationError;
|
|
37
|
+
|
|
38
|
+
// src/partials/FieldValidationError/index.ts
|
|
39
|
+
var FieldValidationError_default2 = FieldValidationError_default;
|
|
40
|
+
|
|
41
|
+
export {
|
|
42
|
+
FieldValidationError_default,
|
|
43
|
+
FieldValidationError_default2
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=chunk-DBLODROX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '../../helpers';\n\nexport interface FieldValidationErrorProps {\n error: FieldError[] | Record<string, FieldError[]>;\n testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n error,\n testId = undefined,\n}: FieldValidationErrorProps) => {\n if (!error) {\n return null;\n }\n\n let tmp_errors: FieldError[] = [];\n\n if (typeof error === 'object' && !(error instanceof Array)) {\n const error_object = error as Record<string, FieldError[]>;\n Object.keys(error).forEach((key) => {\n tmp_errors = [...tmp_errors, ...error_object[key]];\n });\n }\n\n const errorArray: FieldError[] =\n JSON.stringify(tmp_errors) !== '[]' ? tmp_errors : (error as FieldError[]);\n const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n return (\n <ul\n data-testid={slugify(testId || errorStrings.join())}\n aria-label={ariaString} // TODO: ist das richtig @Hannes?\n >\n {errorStrings.map((errorString: string, i: number) => (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{errorString}</div>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;AA0CU;AA9BV,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,MAAiC;AAC/B,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,aAA2B,CAAC;AAEhC,MAAI,OAAO,UAAU,YAAY,EAAE,iBAAiB,QAAQ;AAC1D,UAAM,eAAe;AACrB,WAAO,KAAK,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAClC,mBAAa,CAAC,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC;AAAA,IACnD,CAAC;AAAA,EACH;AAEA,QAAM,aACJ,KAAK,UAAU,UAAU,MAAM,OAAO,aAAc;AACtD,QAAM,eAAyB,WAAW,IAAI,CAAC,MAAM,EAAE,OAAO;AAC9D,QAAM,aAAa,UAAU,aAAa,KAAK,IAAI,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,QAAQ,UAAU,aAAa,KAAK,CAAC;AAAA,MAClD,cAAY;AAAA,MAEX,uBAAa,IAAI,CAAC,aAAqB;AAAA;AAAA,QAEtC,oBAAC,QACC,8BAAC,SAAK,uBAAY,KADX,SAAS,CAAC,EAEnB;AAAA,OACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;AC3Cf,IAAOA,gCAAQ;","names":["FieldValidationError_default"]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx
|
|
2
|
+
import { FaBullseye } from "react-icons/fa6";
|
|
3
|
+
import cn from "classnames";
|
|
4
|
+
import { Button, useLocalStorage } from "@fuf-stack/pixels";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
7
|
+
var FieldCopyTestIdButton = ({
|
|
8
|
+
className = void 0,
|
|
9
|
+
testId
|
|
10
|
+
}) => {
|
|
11
|
+
const [debug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
|
|
12
|
+
const copyToClipboard = () => {
|
|
13
|
+
navigator.clipboard.writeText(testId).catch((err) => {
|
|
14
|
+
console.error("Error copying TestId to clipboard", err);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
if (!debug) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
Button,
|
|
22
|
+
{
|
|
23
|
+
className: cn(className, "pointer-events-auto"),
|
|
24
|
+
variant: "light",
|
|
25
|
+
onClick: copyToClipboard,
|
|
26
|
+
icon: /* @__PURE__ */ jsx(FaBullseye, {}),
|
|
27
|
+
size: "sm"
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
var FieldCopyTestIdButton_default = FieldCopyTestIdButton;
|
|
32
|
+
|
|
33
|
+
// src/partials/FieldCopyTestIdButton/index.ts
|
|
34
|
+
var FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default;
|
|
35
|
+
|
|
36
|
+
export {
|
|
37
|
+
FieldCopyTestIdButton_default,
|
|
38
|
+
FieldCopyTestIdButton_default2
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=chunk-FNVT6LS4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, useLocalStorage } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n className?: string;\n testId: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\nconst FieldCopyTestIdButton = ({\n className = undefined,\n testId,\n}: FieldCopyTestIdButtonProps) => {\n const [debug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(testId).catch((err) => {\n console.error('Error copying TestId to clipboard', err);\n });\n };\n\n if (!debug) {\n return null;\n }\n\n return (\n <Button\n className={cn(className, 'pointer-events-auto')}\n variant=\"light\"\n onClick={copyToClipboard}\n icon={<FaBullseye />}\n size=\"sm\"\n />\n );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,OAAO,QAAQ;AAEf,SAAS,QAAQ,uBAAuB;AA8B5B;AAvBZ,IAAM,yBAAyB;AAE/B,IAAM,wBAAwB,CAAC;AAAA,EAC7B,YAAY;AAAA,EACZ;AACF,MAAkC;AAChC,QAAM,CAAC,KAAK,IAAI,gBAAgB,wBAAwB,KAAK;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,cAAU,UAAU,UAAU,MAAM,EAAE,MAAM,CAAC,QAAQ;AACnD,cAAQ,MAAM,qCAAqC,GAAG;AAAA,IACxD,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,qBAAqB;AAAA,MAC9C,SAAQ;AAAA,MACR,SAAS;AAAA,MACT,MAAM,oBAAC,cAAW;AAAA,MAClB,MAAK;AAAA;AAAA,EACP;AAEJ;AACA,IAAO,gCAAQ;;;ACjCf,IAAOA,iCAAQ;","names":["FieldCopyTestIdButton_default"]}
|