add basic input component

Author: Arjun-sna

docs/client/components/common/DefaultCode/TextInput/index.js

@@ -0,0 +1,25 @@
+export const defaultCode = `
+class Demo extends React.Component {
+   render() {
+    return (
+      <div>
+        {/* Preview Block 1 */}
+        <PreviewBlock header="Default TextInput">
+          <TextInput />
+        </PreviewBlock>
+        {/* Preview Block 2 */}
+        <PreviewBlock header="Disabled TextInput">
+          <TextInput disabled={true}/>
+        </PreviewBlock>
+        {/* Preview Block 3 */}
+        <PreviewBlock header="Controlled width TextInput">
+          <TextInput width='200px' placeholder="type here..."/>
+        </PreviewBlock>
+        <PreviewBlock header="Password TextInput">
+          <TextInput type="password" placeholder="Enter password..."/>          
+        </PreviewBlock>
+      </div>
+    )
+  }
+}
+`;

docs/client/components/common/DefaultCode/index.js

@@ -3,4 +3,5 @@ export { defaultCode as ButtonDefaultCode } from './Button';
 export { defaultCode as CheckboxDefaultCode } from './Checkbox';
 export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
 export { defaultCode as ToggleDefaultCode } from './Toggle';
-export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';
+export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';
+export { defaultCode as TextInputDefaultCode } from './TextInput';

docs/client/components/common/componentList.js

@@ -9,14 +9,17 @@ import CheckboxGroupReadme from '../../../../src/checkbox/readMe.md';
 import Toggle from '../../../../src/toggle';
 import ToggleReadme from '../../../../src/toggle/readMe.md';
 import RadioButtonGroup from '../../../../src/radioButtonGroup';
+import TextInput from '../../../../src/textInput';
+import TextInputReadme from '../../../../src/textInput/readMe.md';
 
 import {
   CardDefaultCode,
   ButtonDefaultCode,
   CheckboxDefaultCode,
   CheckboxGroupDefaultCode,
   ToggleDefaultCode,
-  RadioButtonGroupDefaultCode
+  RadioButtonGroupDefaultCode,
+  TextInputDefaultCode,
 } from './DefaultCode';
 
 export const componentList = [
@@ -56,4 +59,10 @@ export const componentList = [
     component: RadioButtonGroup,
     defaultCode: RadioButtonGroupDefaultCode,
   },
+  {
+    name: 'TextInput',
+    docs: TextInputReadme,
+    component: TextInput,
+    defaultCode: TextInputDefaultCode,
+  }
 ];

package-lock.json

@@ -1,9 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import Button from './button';
 import Card from './card';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkboxGroup';
 import Toggle from './toggle';
 import RadioButtonGroup from './radioButtonGroup';
+import TextInput from './textInput';
 
 export default {
   Button,
@@ -12,6 +15,7 @@ export default {
   CheckboxGroup,
   RadioButtonGroup,
   Toggle,
+  TextInput
 };
 
 // import React from 'react';
@@ -31,4 +35,4 @@ export default {
 //   </div>
 // );
 
-// ReactDOM.render(<RadioDisplay />, document.getElementById('index'));
+// ReactDOM.render(<RadioDisplay />, document.getElementById('index'));

src/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import PropTypes from 'prop-types';
+import defaultTheme from './theme.scss';
+
+const TextInput = ({
+  additionalClasses,
+  theme,
+  width,
+  ...others,
+}) => {
+  const wrapperClasses = classnames(theme.inputWrapper, additionalClasses); 
+  const inputElementProps = { 
+    ...others,
+    style: {
+      width: width ? width : '100%',
+    },
+    className: classnames(theme.inputElement),
+  }; 
+  return ( 
+    <div className={wrapperClasses}> 
+      {React.createElement('input', inputElementProps)} 
+    </div> 
+  )
+}
+
+TextInput.propTypes = {
+  width: PropTypes.string,
+  additionalClass: PropTypes.string,
+  theme: PropTypes.object, // eslint-disable-line
+};
+
+TextInput.defaultProps = {
+  additionalClass: '',
+  theme: defaultTheme,
+};
+
+export default themr('CBInput', defaultTheme)(TextInput);