fix: form components refactor:

- add specific components: CTextarea,
CInputCheckbox, CInputRadio, CInputFile
- CLabel inherits CCol, api rewrite,
- CFormGroup variant prop instead of 'check' (more cases)
- CFormText: delete inline prop
- delete tag in feedback, inputgroup, addon
- split addon into append and prepend
- smaller refactors and clean

Author: woothu

src/CFormFeedback.js

@@ -1,40 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
 
 //component - CoreUI / CFormFeedback
 
-const CFormFeedback = props=>{
+const CFormFeedback = props => {
 
   const {
-    tag: Tag,
     className,
     cssModule,
     //
     innerRef,
     valid,
     tooltip,
     ...attributes
-  } = props;
+  } = props
 
   //render
+  const validMode = tooltip ? 'tooltip' : 'feedback'
+  const classes = mapToCssModules(classNames(
+    valid ? `valid-${validMode}` : `invalid-${validMode}`,
+    className
+  ),cssModule)
 
-  const validMode = tooltip ? 'tooltip' : 'feedback';
-  const classes = mapToCssModules(
-    classNames(
-      className,
-      valid ? `valid-${validMode}` : `invalid-${validMode}`
-    ),
-    cssModule
-  );
-
-  return <Tag {...attributes} className={classes} ref={innerRef} />;
-
+  return <div className={classes} {...attributes} ref={innerRef} />
 }
 
 CFormFeedback.propTypes = {
-  tag: tagPropType,
   children: PropTypes.node,
   className: PropTypes.string,
   cssModule: PropTypes.object,
@@ -44,9 +37,6 @@ CFormFeedback.propTypes = {
   tooltip: PropTypes.bool
 };
 
-CFormFeedback.defaultProps = {
-  tag: 'div',
-  valid: undefined
-};
-
-export default CFormFeedback;
+// export const CValidFeedback = props => <CFormFeedback {...props} valid/>
+// export const CInvalidFeedback = props => <CFormFeedback {...props} valid={false}/>
+export default CFormFeedback

src/CFormGroup.js

@@ -1,56 +1,54 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
 
 //component - CoreUI / CFormGroup
-
-const CFormGroup = props=>{
+const CFormGroup = props => {
 
   const {
-    tag: Tag,
     className,
     cssModule,
     //
     innerRef,
     row,
     disabled,
-    check,
+    variant,
     inline,
     ...attributes
-  } = props;
+  } = props
 
   //render
+  const checkClass = variant && variant.includes('custom') ? 'custom-control' : 'form-check'
 
   const classes = mapToCssModules(classNames(
-    className,
-    row ? 'row' : false,
-    check ? 'form-check' : 'form-group',
-    check && inline ? 'form-check-inline' : false,
-    check && disabled ? 'disabled' : false
-  ), cssModule);
+    row && 'row',
+    !variant && 'form-group',
+    variant && checkClass,
+    variant === 'custom-radio' && 'custom-radio',
+    variant === 'custom-checkbox' && 'custom-checkbox',
+    variant && inline && `${checkClass}-inline`,
+    variant && disabled && 'disabled',
+    className
+  ), cssModule)
 
   return (
-    <Tag {...attributes} className={classes} ref={innerRef} />
-  );
+    <div className={classes} {...attributes} ref={innerRef}/>
+  )
 
 }
 
 CFormGroup.propTypes = {
-  tag: tagPropType,
   children: PropTypes.node,
   className: PropTypes.string,
   cssModule: PropTypes.object,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
   row: PropTypes.bool,
-  check: PropTypes.bool,
+  variant: PropTypes.oneOf(['checkbox', 'custom-checkbox', 'custom-radio']),
   inline: PropTypes.bool,
   disabled: PropTypes.bool
 };
 
-CFormGroup.defaultProps = {
-  tag: 'div',
-};
 
-export default CFormGroup;
+export default CFormGroup

src/CFormText.js

@@ -1,34 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType, mapToCssModules } from './Shared/helper.js'
 
 //component - CoreUI / CFormText
-
-const CFormText = props=>{
+const CFormText = props => {
 
   const {
     tag: Tag,
     className,
     cssModule,
     innerRef,
     //
-    inline,
     color,
     ...attributes
-  } = props;
+  } = props
 
   //render
 
   const classes = mapToCssModules(classNames(
-    className,
-    !inline ? 'form-text' : false,
-    color ? `text-${color}` : false
-  ), cssModule);
+    'form-text', color && `text-${color}`, className
+  ), cssModule)
 
   return (
-    <Tag {...attributes} className={classes} ref={innerRef} />
-  );
+    <Tag className={classes} {...attributes} ref={innerRef}/>
+  )
 
 }
 
@@ -39,13 +35,12 @@ CFormText.propTypes = {
   cssModule: PropTypes.object,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-  inline: PropTypes.bool,
   color: PropTypes.string
 };
 
 CFormText.defaultProps = {
   tag: 'small',
-  color: 'muted',
+  color: 'muted'
 };
 
-export default CFormText;
+export default CFormText