@ansible/ansible-ui-framework 0.0.379 → 0.0.380

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.
@@ -4,5 +4,5 @@ import { PageFormGroupProps } from './PageFormGroup';
4
4
  export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholder' | 'value' | 'isDisabled'> & PageFormGroupProps & {
5
5
  isReadOnly?: boolean;
6
6
  };
7
- /** Thin wrapper combining a PF FormGroup and a PF Select */
7
+ /** A PatternFly FormGroup with a PatternFly Select */
8
8
  export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;
@@ -32,7 +32,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
32
32
  var react_core_1 = require("@patternfly/react-core");
33
33
  var react_1 = require("react");
34
34
  var PageFormGroup_1 = require("./PageFormGroup");
35
- /** Thin wrapper combining a PF FormGroup and a PF Select */
35
+ /** A PatternFly FormGroup with a PatternFly Select */
36
36
  function FormGroupSelect(props) {
37
37
  var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly, onSelect = props.onSelect, value = props.value;
38
38
  var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
@@ -11,4 +11,9 @@ export type FormGroupSelectOptionProps<T> = {
11
11
  onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
12
12
  value: T | undefined;
13
13
  } & Omit<FormGroupSelectProps, 'onSelect' | 'value' | 'children'>;
14
+ /**
15
+ * A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
16
+ *
17
+ * This supports easy grouping and options that have values that are objects and not just strings.
18
+ */
14
19
  export declare function FormGroupSelectOption<T>(props: FormGroupSelectOptionProps<T>): JSX.Element;
@@ -16,6 +16,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
16
16
  var react_core_1 = require("@patternfly/react-core");
17
17
  var react_1 = require("react");
18
18
  var FormGroupSelect_1 = require("./FormGroupSelect");
19
+ /**
20
+ * A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
21
+ *
22
+ * This supports easy grouping and options that have values that are objects and not just strings.
23
+ */
19
24
  function FormGroupSelectOption(props) {
20
25
  var onSelect = props.onSelect, value = props.value;
21
26
  var onSelectHandler = (0, react_1.useCallback)(function (event, label) {
@@ -2,5 +2,5 @@
2
2
  import { TextAreaProps } from '@patternfly/react-core';
3
3
  import { PageFormGroupProps } from './PageFormGroup';
4
4
  export type FormGroupTextAreaProps = Pick<TextAreaProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
5
- /** Thin wrapper combining a PF FormGroup and a PF TextArea */
5
+ /** A PatternFly FormGroup with a PatternFly TextArea */
6
6
  export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;
@@ -33,7 +33,7 @@ var react_core_1 = require("@patternfly/react-core");
33
33
  var react_icons_1 = require("@patternfly/react-icons");
34
34
  var react_1 = require("react");
35
35
  var PageFormGroup_1 = require("./PageFormGroup");
36
- /** Thin wrapper combining a PF FormGroup and a PF TextArea */
36
+ /** A PatternFly FormGroup with a PatternFly TextArea */
37
37
  function FormGroupTextArea(props) {
38
38
  var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
39
39
  return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextArea, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
@@ -2,5 +2,5 @@
2
2
  import { TextInputProps } from '@patternfly/react-core';
3
3
  import { PageFormGroupProps } from './PageFormGroup';
4
4
  export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
5
- /** Thin wrapper combining a PF FormGroup and a PF TextInput */
5
+ /** A PatternFly FormGroup with a PatternFly TextInput */
6
6
  export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;
@@ -33,9 +33,9 @@ var react_core_1 = require("@patternfly/react-core");
33
33
  var react_icons_1 = require("@patternfly/react-icons");
34
34
  var react_1 = require("react");
35
35
  var PageFormGroup_1 = require("./PageFormGroup");
36
- /** Thin wrapper combining a PF FormGroup and a PF TextInput */
36
+ /** A PatternFly FormGroup with a PatternFly TextInput */
37
37
  function FormGroupTextInput(props) {
38
38
  var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
39
- return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
39
+ return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_core_1.TextInput, __assign({}, props, { id: props.id, label: undefined, "aria-describedby": "".concat(props.id, "-form-group"), validated: props.helperTextInvalid ? 'error' : undefined, type: props.type === 'password' ? (showSecret ? 'text' : 'password') : props.type })), props.type === 'password' && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "control", onClick: function () { return setShowSecret(!showSecret); }, isDisabled: props.isDisabled || props.isReadOnly }, { children: showSecret ? (0, jsx_runtime_1.jsx)(react_icons_1.EyeIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.EyeSlashIcon, {}) })))] }) })));
40
40
  }
41
41
  exports.FormGroupTextInput = FormGroupTextInput;
@@ -20,7 +20,11 @@ function PageFormTextInput(props) {
20
20
  var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
21
21
  return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
22
22
  var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
23
- return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
23
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: (error === null || error === void 0 ? void 0 : error.type) === 'required'
24
+ ? typeof props.label === 'string'
25
+ ? "".concat(props.label, " is required")
26
+ : 'Required'
27
+ : error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })) }));
24
28
  } }));
25
29
  }
26
30
  exports.PageFormTextInput = PageFormTextInput;
@@ -1,6 +1,18 @@
1
1
  /// <reference types="react" />
2
+ import { StringOptions } from '@sinclair/typebox';
2
3
  import { JSONSchema6 } from 'json-schema';
4
+ import { IFormGroupSelectOption } from './Inputs/FormGroupSelectOption';
3
5
  export declare function PageFormSchema(props: {
4
6
  schema: JSONSchema6;
5
7
  base?: string;
6
8
  }): JSX.Element;
9
+ export type TypeTextInputOptions = StringOptions<string> & {
10
+ placeholder?: string;
11
+ };
12
+ export declare function TypeTextInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
13
+ export declare function TypeSecretInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
14
+ export type TypeSelectOptions<T> = StringOptions<string> & {
15
+ placeholder?: string;
16
+ options: IFormGroupSelectOption<T>[];
17
+ };
18
+ export declare function TypeSelect<T extends string | number>(options: TypeSelectOptions<T>): import("@sinclair/typebox").TString<string>;
@@ -1,7 +1,19 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PageFormSchema = void 0;
14
+ exports.TypeSelect = exports.TypeSecretInput = exports.TypeTextInput = exports.PageFormSchema = void 0;
4
15
  var jsx_runtime_1 = require("react/jsx-runtime");
16
+ var typebox_1 = require("@sinclair/typebox");
5
17
  var PageFormSelectOption_1 = require("./Inputs/PageFormSelectOption");
6
18
  var PageFormSlider_1 = require("./Inputs/PageFormSlider");
7
19
  var PageFormSwitch_1 = require("./Inputs/PageFormSwitch");
@@ -9,6 +21,7 @@ var PageFormTextArea_1 = require("./Inputs/PageFormTextArea");
9
21
  var PageFormTextInput_1 = require("./Inputs/PageFormTextInput");
10
22
  var PageFormTextSelect_1 = require("./Inputs/PageFormTextSelect");
11
23
  function PageFormSchema(props) {
24
+ var _a, _b, _c, _d, _e, _f, _g;
12
25
  var schema = props.schema;
13
26
  var base = props.base ? props.base + '.' : '';
14
27
  var p = [];
@@ -21,9 +34,48 @@ function PageFormSchema(props) {
21
34
  }
22
35
  var title = typeof property.title === 'string' ? property.title : propertyName;
23
36
  var description = typeof property.description === 'string' ? property.description : undefined;
37
+ var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
38
+ var prop = property;
39
+ prop.errorMessage = (_a = prop.errorMessage) !== null && _a !== void 0 ? _a : {};
40
+ switch (property.type) {
41
+ case 'string':
42
+ switch (prop.variant) {
43
+ case 'select':
44
+ {
45
+ if (!prop.placeholder) {
46
+ prop.placeholder = "Enter ".concat(((_b = property.title) !== null && _b !== void 0 ? _b : propertyName).toLowerCase());
47
+ }
48
+ if (!prop.enum) {
49
+ prop.enum = (_c = prop.options) === null || _c === void 0 ? void 0 : _c.map(function (option) { return option.value; });
50
+ }
51
+ }
52
+ break;
53
+ default:
54
+ {
55
+ if (!prop.placeholder) {
56
+ prop.placeholder = "Enter ".concat(((_d = property.title) !== null && _d !== void 0 ? _d : propertyName).toLowerCase());
57
+ }
58
+ if (property.minLength) {
59
+ if (!prop.errorMessage.minLength) {
60
+ prop.errorMessage.minLength = "".concat((_e = property.title) !== null && _e !== void 0 ? _e : propertyName, " must be at least ").concat(property.minLength, " characters.");
61
+ }
62
+ }
63
+ else if (required) {
64
+ property.minLength = 1;
65
+ prop.errorMessage.minLength = "".concat((_f = property.title) !== null && _f !== void 0 ? _f : propertyName, " is required");
66
+ }
67
+ if (property.maxLength) {
68
+ if (!prop.errorMessage.maxLength) {
69
+ prop.errorMessage.maxLength = "".concat((_g = property.title) !== null && _g !== void 0 ? _g : propertyName, " must be less than ").concat(property.maxLength, " characters.");
70
+ }
71
+ }
72
+ }
73
+ break;
74
+ }
75
+ break;
76
+ }
24
77
  var placeholder = property.placeholder;
25
78
  placeholder = typeof placeholder === 'string' ? placeholder : undefined;
26
- var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
27
79
  switch (property.type) {
28
80
  case 'string': {
29
81
  switch (property.variant) {
@@ -66,3 +118,15 @@ function PageFormSchema(props) {
66
118
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
67
119
  }
68
120
  exports.PageFormSchema = PageFormSchema;
121
+ function TypeTextInput(options) {
122
+ return typebox_1.Type.String(__assign({}, options));
123
+ }
124
+ exports.TypeTextInput = TypeTextInput;
125
+ function TypeSecretInput(options) {
126
+ return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'secret' }));
127
+ }
128
+ exports.TypeSecretInput = TypeSecretInput;
129
+ function TypeSelect(options) {
130
+ return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'select' }));
131
+ }
132
+ exports.TypeSelect = TypeSelect;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.379",
4
+ "version": "0.0.380",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {