Form feedback

the-curve-consulting · Feb 14, 2024 · b69ed34 · b69ed34
1 parent 7babc42
commit b69ed34
Show file tree

Hide file tree

Showing 28 changed files with 92 additions and 37 deletions.
diff --git a/dist/components/form/Form.d.ts b/dist/components/form/Form.d.ts
@@ -4,14 +4,28 @@ export interface FormProps extends React.HTMLProps<HTMLFormElement> {
 declare const Form: {
     ({ children, ...rest }: FormProps): React.JSX.Element;
     Group: ({ label, className, children, ...rest }: import("./FormGroup").FormGroupProps) => React.JSX.Element;
-    Label: ({ label, children, className }: import("react-bootstrap").FormLabelProps & {
-        label?: string | undefined;
-    }) => React.JSX.Element;
-    Control: ({ className, ...rest }: import("./components/FormControl").FormControlProps) => React.JSX.Element;
-    Select: ({ className, children, ...rest }: import("./components/FormSelect").FormSelectProps) => React.JSX.Element;
-    Check: ({ type, className, ...rest }: import("./components/FormCheck").FormCheckProps) => React.JSX.Element;
-    RichText: ({ style, ...rest }: import("./components/FormRichText").FormRichText) => React.JSX.Element;
-    DateTime: ({ className, ...rest }: import("./components/FormDateTime").FormDateTimeProps) => React.JSX.Element;
+    Label: ({ label, children, className }: import("./components/FormLabel").FormLabelProps) => React.JSX.Element;
+    Control: {
+        ({ className, ...rest }: import("./components/FormControl").FormControlProps): React.JSX.Element;
+        Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+    };
+    Select: {
+        ({ className, children, ...rest }: import("./components/FormSelect").FormSelectProps): React.JSX.Element;
+        Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+    };
+    Check: {
+        ({ type, className, ...rest }: import("./components/FormCheck").FormCheckProps): React.JSX.Element;
+        Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+    };
+    RichText: {
+        ({ style, ...rest }: import("./components/FormRichText").FormRichTextProps): React.JSX.Element;
+        Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+    };
+    DateTime: {
+        ({ className, ...rest }: import("./components/FormDateTime").FormDateTimeProps): React.JSX.Element;
+        Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+    };
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
 };
 export default Form;
 //# sourceMappingURL=Form.d.ts.map
diff --git a/dist/components/form/Form.d.ts.map b/dist/components/form/Form.d.ts.map
diff --git a/dist/components/form/components/FormCheck.d.ts b/dist/components/form/components/FormCheck.d.ts
@@ -2,6 +2,9 @@ import React from 'react';
 import { FormCheckProps as BootstrapFormCheckProps } from 'react-bootstrap';
 export interface FormCheckProps extends BootstrapFormCheckProps {
 }
-declare const FormCheck: ({ type, className, ...rest }: FormCheckProps) => React.JSX.Element;
+declare const FormCheck: {
+    ({ type, className, ...rest }: FormCheckProps): React.JSX.Element;
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+};
 export default FormCheck;
 //# sourceMappingURL=FormCheck.d.ts.map
diff --git a/dist/components/form/components/FormCheck.d.ts.map b/dist/components/form/components/FormCheck.d.ts.map
diff --git a/dist/components/form/components/FormControl.d.ts b/dist/components/form/components/FormControl.d.ts
@@ -2,6 +2,9 @@ import React from 'react';
 import { FormControlProps as BootstrapFormControlProps } from 'react-bootstrap';
 export interface FormControlProps extends BootstrapFormControlProps {
 }
-declare const FormControl: ({ className, ...rest }: FormControlProps) => React.JSX.Element;
+declare const FormControl: {
+    ({ className, ...rest }: FormControlProps): React.JSX.Element;
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+};
 export default FormControl;
 //# sourceMappingURL=FormControl.d.ts.map
diff --git a/dist/components/form/components/FormControl.d.ts.map b/dist/components/form/components/FormControl.d.ts.map
diff --git a/dist/components/form/components/FormDateTime.d.ts b/dist/components/form/components/FormDateTime.d.ts
@@ -2,6 +2,9 @@ import React from 'react';
 import { FormControlProps } from 'react-bootstrap';
 export interface FormDateTimeProps extends FormControlProps {
 }
-declare const FormDateTime: ({ className, ...rest }: FormDateTimeProps) => React.JSX.Element;
+declare const FormDateTime: {
+    ({ className, ...rest }: FormDateTimeProps): React.JSX.Element;
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+};
 export default FormDateTime;
 //# sourceMappingURL=FormDateTime.d.ts.map
diff --git a/dist/components/form/components/FormDateTime.d.ts.map b/dist/components/form/components/FormDateTime.d.ts.map
diff --git a/dist/components/form/components/FormLabel.d.ts b/dist/components/form/components/FormLabel.d.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormLabelProps as BootstrapFormLabelProps } from 'react-bootstrap';
-type FormLabelProps = BootstrapFormLabelProps & {
+export type FormLabelProps = BootstrapFormLabelProps & {
     label?: string;
 };
 declare const FormLabel: ({ label, children, className }: FormLabelProps) => React.JSX.Element;

diff --git a/dist/components/form/components/FormLabel.d.ts.map b/dist/components/form/components/FormLabel.d.ts.map
diff --git a/dist/components/form/components/FormRichText.d.ts b/dist/components/form/components/FormRichText.d.ts
@@ -1,8 +1,11 @@
 import React from 'react';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
-export interface FormRichText extends ReactQuill.ReactQuillProps {
+export interface FormRichTextProps extends ReactQuill.ReactQuillProps {
 }
-declare const FormRichText: ({ style, ...rest }: FormRichText) => React.JSX.Element;
+declare const FormRichText: {
+    ({ style, ...rest }: FormRichTextProps): React.JSX.Element;
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+};
 export default FormRichText;
 //# sourceMappingURL=FormRichText.d.ts.map
diff --git a/dist/components/form/components/FormRichText.d.ts.map b/dist/components/form/components/FormRichText.d.ts.map
diff --git a/dist/components/form/components/FormSelect.d.ts b/dist/components/form/components/FormSelect.d.ts
@@ -2,6 +2,9 @@ import React from 'react';
 import { FormSelectProps as BootstrapFormSelectProps } from 'react-bootstrap';
 export interface FormSelectProps extends BootstrapFormSelectProps {
 }
-declare const FormSelect: ({ className, children, ...rest }: FormSelectProps) => React.JSX.Element;
+declare const FormSelect: {
+    ({ className, children, ...rest }: FormSelectProps): React.JSX.Element;
+    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
+};
 export default FormSelect;
 //# sourceMappingURL=FormSelect.d.ts.map
diff --git a/dist/components/form/components/FormSelect.d.ts.map b/dist/components/form/components/FormSelect.d.ts.map
diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.js b/dist/index.js
@@ -8540,6 +8540,7 @@ var FormControl = function (_a) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     return React.createElement(FormControl$2, __assign$1({ as: "input", className: className }, rest));
 };
+FormControl.Feedback = Feedback$1;
 
 var FormLabel = function (_a) {
     var label = _a.label, children = _a.children, className = _a.className;
@@ -8559,11 +8560,13 @@ var FormSelect = function (_a) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     return (React.createElement(BootstrapFormSelect, __assign$1({ className: className }, rest), children));
 };
+FormSelect.Feedback = Feedback$1;
 
 var FormCheck = function (_a) {
     var type = _a.type, className = _a.className, rest = __rest(_a, ["type", "className"]);
     return React.createElement(BootstrapFormCheck, __assign$1({ type: type }, rest, { className: className }));
 };
+FormCheck.Feedback = Feedback$1;
 
 /**
  * Removes all key-value entries from the list cache.
@@ -22834,11 +22837,13 @@ var FormRichText = function (_a) {
     var style = _a.style, rest = __rest(_a, ["style"]);
     return React.createElement(ReactQuill$1, __assign$1({ theme: "snow", style: __assign$1({}, style) }, rest));
 };
+FormRichText.Feedback = Feedback$1;
 
 var FormDateTime = function (_a) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     return (React.createElement(Form$3.Control, __assign$1({ as: "input", type: "datetime-local", className: className }, rest)));
 };
+FormDateTime.Feedback = Feedback$1;
 
 var Form$1 = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
@@ -22851,6 +22856,7 @@ Form$1.Select = FormSelect;
 Form$1.Check = FormCheck;
 Form$1.RichText = FormRichText;
 Form$1.DateTime = FormDateTime;
+Form$1.Feedback = Feedback$1;
 
 var Title = function (_a) {
     var text = _a.text, rest = __rest(_a, ["text"]);

diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/dist/index.min.js.map b/dist/index.min.js.map
diff --git a/example/pages/FormPage.tsx b/example/pages/FormPage.tsx
@@ -7,7 +7,10 @@ const FormPage = () => {
 
       <Form>
         <Form.Group label='Control' className='mt-3'>
-          <Form.Control placeholder='Placeholder...'/>
+          <Form.Control placeholder='Placeholder...' isInvalid/>
+          <Form.Feedback type="invalid">
+            This is Feedback
+          </Form.Feedback>
         </Form.Group>
 
         <Form.Group label='Select' className='mt-3'>

diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
@@ -6,6 +6,7 @@ import FormCheck from './components/FormCheck';
 import FormLabel from './components/FormLabel';
 import FormRichText from './components/FormRichText';
 import FormDateTime from './components/FormDateTime';
+import Feedback from 'react-bootstrap/esm/Feedback';
 
 export interface FormProps extends React.HTMLProps<HTMLFormElement> {}
 
@@ -20,5 +21,6 @@ Form.Select = FormSelect;
 Form.Check = FormCheck;
 Form.RichText = FormRichText;
 Form.DateTime = FormDateTime;
+Form.Feedback = Feedback;
 
 export default Form;
diff --git a/src/components/form/components/FormCheck.tsx b/src/components/form/components/FormCheck.tsx
@@ -3,11 +3,14 @@ import {
   FormCheck as BootstrapFormCheck,
   FormCheckProps as BootstrapFormCheckProps,
 } from 'react-bootstrap';
+import Feedback from 'react-bootstrap/esm/Feedback';
 
 export interface FormCheckProps extends BootstrapFormCheckProps {}
 
 const FormCheck = ({ type, className, ...rest }: FormCheckProps) => {
   return <BootstrapFormCheck type={type} {...rest} className={className} />;
 };
 
+FormCheck.Feedback = Feedback;
+
 export default FormCheck;
diff --git a/src/components/form/components/FormControl.tsx b/src/components/form/components/FormControl.tsx
@@ -3,11 +3,14 @@ import {
   FormControl as BootstrapFormControl,
   FormControlProps as BootstrapFormControlProps,
 } from 'react-bootstrap';
+import Feedback from 'react-bootstrap/esm/Feedback';
 
 export interface FormControlProps extends BootstrapFormControlProps {}
 
 const FormControl = ({ className, ...rest }: FormControlProps) => {
   return <BootstrapFormControl as="input" className={className} {...rest} />;
 };
 
+FormControl.Feedback = Feedback;
+
 export default FormControl;
diff --git a/src/components/form/components/FormDateTime.tsx b/src/components/form/components/FormDateTime.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormControlProps, Form } from 'react-bootstrap';
+import Feedback from 'react-bootstrap/esm/Feedback';
 
 export interface FormDateTimeProps extends FormControlProps {}
 
@@ -14,4 +15,6 @@ const FormDateTime = ({ className, ...rest }: FormDateTimeProps) => {
   );
 };
 
+FormDateTime.Feedback = Feedback;
+
 export default FormDateTime;
diff --git a/src/components/form/components/FormLabel.tsx b/src/components/form/components/FormLabel.tsx
@@ -4,7 +4,7 @@ import {
   FormLabel as BootstrapFormLabel,
 } from 'react-bootstrap';
 
-type FormLabelProps = BootstrapFormLabelProps & {
+export type FormLabelProps = BootstrapFormLabelProps & {
   label?: string;
 };
 

diff --git a/src/components/form/components/FormRichText.tsx b/src/components/form/components/FormRichText.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
+import Feedback from 'react-bootstrap/esm/Feedback';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 
-export interface FormRichText extends ReactQuill.ReactQuillProps {}
+export interface FormRichTextProps extends ReactQuill.ReactQuillProps {}
 
-const FormRichText = ({ style, ...rest }: FormRichText) => {
+const FormRichText = ({ style, ...rest }: FormRichTextProps) => {
   return <ReactQuill theme="snow" style={{ ...style }} {...rest} />;
 };
 
+FormRichText.Feedback = Feedback;
+
 export default FormRichText;
diff --git a/src/components/form/components/FormSelect.tsx b/src/components/form/components/FormSelect.tsx
@@ -3,6 +3,7 @@ import {
   FormSelect as BootstrapFormSelect,
   FormSelectProps as BootstrapFormSelectProps,
 } from 'react-bootstrap';
+import Feedback from 'react-bootstrap/esm/Feedback';
 
 export interface FormSelectProps extends BootstrapFormSelectProps {}
 
@@ -14,4 +15,6 @@ const FormSelect = ({ className, children, ...rest }: FormSelectProps) => {
   );
 };
 
+FormSelect.Feedback = Feedback;
+
 export default FormSelect;