@ansible/ansible-ui-framework 0.0.379 → 0.0.380

package/cjs/PageForm/Inputs/FormGroupSelect.d.ts

@@ -4,5 +4,5 @@ import { PageFormGroupProps } from './PageFormGroup';
 export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholder' | 'value' | 'isDisabled'> & PageFormGroupProps & {
     isReadOnly?: boolean;
 };
-/** Thin wrapper combining a PF FormGroup and a PF Select */
+/** A PatternFly FormGroup with a PatternFly Select */
 export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupSelect.js

@@ -32,7 +32,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var PageFormGroup_1 = require("./PageFormGroup");
-/** Thin wrapper combining a PF FormGroup and a PF Select */
+/** A PatternFly FormGroup with a PatternFly Select */
 function FormGroupSelect(props) {
     var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly, onSelect = props.onSelect, value = props.value;
     var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];

package/cjs/PageForm/Inputs/FormGroupSelectOption.d.ts

@@ -11,4 +11,9 @@ export type FormGroupSelectOptionProps<T> = {
     onSelect: (value: T | undefined, event: React.MouseEvent<Element, MouseEvent> | ChangeEvent<Element>) => void;
     value: T | undefined;
 } & Omit<FormGroupSelectProps, 'onSelect' | 'value' | 'children'>;
+/**
+ * A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
+ *
+ * This supports easy grouping and options that have values that are objects and not just strings.
+ */
 export declare function FormGroupSelectOption<T>(props: FormGroupSelectOptionProps<T>): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupSelectOption.js

@@ -16,6 +16,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_core_1 = require("@patternfly/react-core");
 var react_1 = require("react");
 var FormGroupSelect_1 = require("./FormGroupSelect");
+/**
+ * A PatternFly FormGroup with a PatternFly Select but using IFormGroupSelectOptions for the options.
+ *
+ * This supports easy grouping and options that have values that are objects and not just strings.
+ */
 function FormGroupSelectOption(props) {
     var onSelect = props.onSelect, value = props.value;
     var onSelectHandler = (0, react_1.useCallback)(function (event, label) {

package/cjs/PageForm/Inputs/FormGroupTextArea.d.ts

@@ -2,5 +2,5 @@
 import { TextAreaProps } from '@patternfly/react-core';
 import { PageFormGroupProps } from './PageFormGroup';
 export type FormGroupTextAreaProps = Pick<TextAreaProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
-/** Thin wrapper combining a PF FormGroup and a PF TextArea */
+/** A PatternFly FormGroup with a PatternFly TextArea */
 export declare function FormGroupTextArea(props: FormGroupTextAreaProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupTextArea.js

@@ -33,7 +33,7 @@ var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
 var PageFormGroup_1 = require("./PageFormGroup");
-/** Thin wrapper combining a PF FormGroup and a PF TextArea */
+/** A PatternFly FormGroup with a PatternFly TextArea */
 function FormGroupTextArea(props) {
     var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
     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, {}) })))] }) })));

package/cjs/PageForm/Inputs/FormGroupTextInput.d.ts

@@ -2,5 +2,5 @@
 import { TextInputProps } from '@patternfly/react-core';
 import { PageFormGroupProps } from './PageFormGroup';
 export type FormGroupTextInputProps = Pick<TextInputProps, 'placeholder' | 'value' | 'isDisabled' | 'isReadOnly' | 'isRequired' | 'validated' | 'onChange' | 'type' | 'aria-label'> & PageFormGroupProps;
-/** Thin wrapper combining a PF FormGroup and a PF TextInput */
+/** A PatternFly FormGroup with a PatternFly TextInput */
 export declare function FormGroupTextInput(props: FormGroupTextInputProps): JSX.Element;

package/cjs/PageForm/Inputs/FormGroupTextInput.js

@@ -33,9 +33,9 @@ var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
 var react_1 = require("react");
 var PageFormGroup_1 = require("./PageFormGroup");
-/** Thin wrapper combining a PF FormGroup and a PF TextInput */
+/** A PatternFly FormGroup with a PatternFly TextInput */
 function FormGroupTextInput(props) {
     var _a = __read((0, react_1.useState)(false), 2), showSecret = _a[0], setShowSecret = _a[1];
-    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, {}) })))] }) })));
+    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, {}) })))] }) })));
 }
 exports.FormGroupTextInput = FormGroupTextInput;

package/cjs/PageForm/Inputs/PageFormTextInput.js

@@ -20,7 +20,11 @@ function PageFormTextInput(props) {
     var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
     return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
             var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
-            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 })));
+            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'
+                        ? typeof props.label === 'string'
+                            ? "".concat(props.label, " is required")
+                            : 'Required'
+                        : error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })) }));
         } }));
 }
 exports.PageFormTextInput = PageFormTextInput;

package/cjs/PageForm/PageFormSchema.d.ts

@@ -1,6 +1,18 @@
 /// <reference types="react" />
+import { StringOptions } from '@sinclair/typebox';
 import { JSONSchema6 } from 'json-schema';
+import { IFormGroupSelectOption } from './Inputs/FormGroupSelectOption';
 export declare function PageFormSchema(props: {
     schema: JSONSchema6;
     base?: string;
 }): JSX.Element;
+export type TypeTextInputOptions = StringOptions<string> & {
+    placeholder?: string;
+};
+export declare function TypeTextInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
+export declare function TypeSecretInput(options: TypeTextInputOptions): import("@sinclair/typebox").TString<string>;
+export type TypeSelectOptions<T> = StringOptions<string> & {
+    placeholder?: string;
+    options: IFormGroupSelectOption<T>[];
+};
+export declare function TypeSelect<T extends string | number>(options: TypeSelectOptions<T>): import("@sinclair/typebox").TString<string>;

package/cjs/PageForm/PageFormSchema.js

@@ -1,7 +1,19 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageFormSchema = void 0;
+exports.TypeSelect = exports.TypeSecretInput = exports.TypeTextInput = exports.PageFormSchema = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var typebox_1 = require("@sinclair/typebox");
 var PageFormSelectOption_1 = require("./Inputs/PageFormSelectOption");
 var PageFormSlider_1 = require("./Inputs/PageFormSlider");
 var PageFormSwitch_1 = require("./Inputs/PageFormSwitch");
@@ -9,6 +21,7 @@ var PageFormTextArea_1 = require("./Inputs/PageFormTextArea");
 var PageFormTextInput_1 = require("./Inputs/PageFormTextInput");
 var PageFormTextSelect_1 = require("./Inputs/PageFormTextSelect");
 function PageFormSchema(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
     var schema = props.schema;
     var base = props.base ? props.base + '.' : '';
     var p = [];
@@ -21,9 +34,48 @@ function PageFormSchema(props) {
         }
         var title = typeof property.title === 'string' ? property.title : propertyName;
         var description = typeof property.description === 'string' ? property.description : undefined;
+        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
+        var prop = property;
+        prop.errorMessage = (_a = prop.errorMessage) !== null && _a !== void 0 ? _a : {};
+        switch (property.type) {
+            case 'string':
+                switch (prop.variant) {
+                    case 'select':
+                        {
+                            if (!prop.placeholder) {
+                                prop.placeholder = "Enter ".concat(((_b = property.title) !== null && _b !== void 0 ? _b : propertyName).toLowerCase());
+                            }
+                            if (!prop.enum) {
+                                prop.enum = (_c = prop.options) === null || _c === void 0 ? void 0 : _c.map(function (option) { return option.value; });
+                            }
+                        }
+                        break;
+                    default:
+                        {
+                            if (!prop.placeholder) {
+                                prop.placeholder = "Enter ".concat(((_d = property.title) !== null && _d !== void 0 ? _d : propertyName).toLowerCase());
+                            }
+                            if (property.minLength) {
+                                if (!prop.errorMessage.minLength) {
+                                    prop.errorMessage.minLength = "".concat((_e = property.title) !== null && _e !== void 0 ? _e : propertyName, " must be at least ").concat(property.minLength, " characters.");
+                                }
+                            }
+                            else if (required) {
+                                property.minLength = 1;
+                                prop.errorMessage.minLength = "".concat((_f = property.title) !== null && _f !== void 0 ? _f : propertyName, " is required");
+                            }
+                            if (property.maxLength) {
+                                if (!prop.errorMessage.maxLength) {
+                                    prop.errorMessage.maxLength = "".concat((_g = property.title) !== null && _g !== void 0 ? _g : propertyName, " must be less than ").concat(property.maxLength, " characters.");
+                                }
+                            }
+                        }
+                        break;
+                }
+                break;
+        }
         var placeholder = property.placeholder;
         placeholder = typeof placeholder === 'string' ? placeholder : undefined;
-        var required = Array.isArray(schema.required) && schema.required.includes(propertyName);
         switch (property.type) {
             case 'string': {
                 switch (property.variant) {
@@ -66,3 +118,15 @@ function PageFormSchema(props) {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: p });
 }
 exports.PageFormSchema = PageFormSchema;
+function TypeTextInput(options) {
+    return typebox_1.Type.String(__assign({}, options));
+}
+exports.TypeTextInput = TypeTextInput;
+function TypeSecretInput(options) {
+    return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'secret' }));
+}
+exports.TypeSecretInput = TypeSecretInput;
+function TypeSelect(options) {
+    return typebox_1.Type.String(__assign(__assign({}, options), { variant: 'select' }));
+}
+exports.TypeSelect = TypeSelect;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.379",
+  "version": "0.0.380",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {