export modules

src/CheckGroupField/index.js

@@ -1 +1,3 @@
+export { default as createStyles } from './CheckGroupField.styles';
+
 export { default } from './CheckGroupField';

src/CheckLabelField/index.js

@@ -1 +1,3 @@
+export { default as createStyles } from './CheckLabelField.styles';
+
 export { default } from './CheckLabelField';

src/DownshiftMultiSelect/index.js

@@ -1 +1,3 @@
+export { default as createStyles } from './DownshiftMultiSelect.styles';
+
 export { default } from './DownshiftMultiSelect';

src/TabsField/TabsField.js

@@ -34,7 +34,7 @@ const Component = ({
   );
 };
 
-const TabsForm = ({
+const TabsField = ({
   initialTab,
   name,
   tabs,
@@ -64,7 +64,7 @@ const TabsForm = ({
   );
 };
 
-TabsForm.propTypes = {
+TabsField.propTypes = {
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.string.isRequired,
@@ -74,10 +74,10 @@ TabsForm.propTypes = {
   TabsProps: PropTypes.shape({}),
   SingleTabProps: PropTypes.shape({}),
 };
-TabsForm.defaultProps = {
+TabsField.defaultProps = {
   initialTab: undefined,
   TabsProps: {},
   SingleTabProps: {},
 };
 
-export default TabsForm;
+export default TabsField;

src/TabsField/index.js

@@ -1 +1 @@
-export { default } from './TabsForm';
+export { default } from './TabsField';

src/index.js

@@ -1,7 +1,21 @@
-import React from 'react';
-
-const MyComponent = () => <h1>Hello World! This is my component!</h1>;
+import InputBaseField from './InputBaseField';
+import TextField from './TextField';
+import MultiSelectField from './MultiSelectField';
+import DownshiftSelectField from './DsSelectField';
+import DownshiftMultiSelectField from './DsMultiSelectField';
+import CheckGroupField from './CheckGroupField';
+import CheckLabelField from './CheckLabelField';
+import RadioGroupField from './RadioGroupField';
+import TabsField from './TabsField';
 
 module.exports = {
-  MyComponent,
+  InputBaseField,
+  TextField,
+  MultiSelectField,
+  DownshiftSelectField,
+  DownshiftMultiSelectField,
+  CheckGroupField,
+  CheckLabelField,
+  RadioGroupField,
+  TabsField,
 };

stories/form.stories.js

@@ -15,8 +15,8 @@ storiesOf('Form', module)
   .add('Login form', () => <LoginForm />)
   .add('Sign Up Form', () => <SignUpForm />)
   .add('Language Form', () => <LanguageForm />)
-  .add('Profile Form', () => <ProfileForm />)
-  .add('Array Form', () => <ArrayForm />)
+  .add('Profile Form', () => <ProfileForm />);
+// .add('Array Form', () => <ArrayForm />)
 
 // import { Button, Welcome } from '@storybook/react/demo';
 

stories/forms/ArrayForm.js

@@ -17,15 +17,8 @@ const schema = Yup.object().shape({
 });
 
 const ArrayForm = () => (
-  <Form
-    initialValues={{ friends: [] }}
-    validationSchema={schema}
-    onSubmit={values => console.log('values', values)}
-  >
+  <Form initialValues={{ friends: [] }} validationSchema={schema}>
     {({ values, errors, touched }) => {
-      console.log('values', values);
-      console.log('touched', touched);
-      console.log('errors', errors);
       return (
         <FieldArray name={'friends'}>
           {arrayHelpers => (
@@ -51,13 +44,13 @@ const ArrayForm = () => (
                       type="button"
                       onClick={() => arrayHelpers.insert(index, '')} // insert an empty string at a position
                     >
-                      <Add/>
+                      <Add />
                     </IconButton>
                     <IconButton
                       type="button"
                       onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
                     >
-                      <Delete/>
+                      <Delete />
                     </IconButton>
                   </Box>
                 ))

stories/forms/LanguageForm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import * as Yup from 'yup';
 import Form from './Form';
 import TextField from '../../src/TextField';
-import TabsForm from '../../src/TabsForm';
+import TabsField from '../../src/TabsField';
 
 const validationSchema = Yup.object().shape({
   name: Yup.object().shape({
@@ -20,10 +20,9 @@ const LanguageForm = () => {
           th: '',
         },
       }}
-      onSubmit={console.log}
       validationSchema={validationSchema}
     >
-      <TabsForm
+      <TabsField
         name={'name'}
         tabs={[
           { label: 'English', value: 'en' },
@@ -37,7 +36,7 @@ const LanguageForm = () => {
             label={tab}
           />
         )}
-      </TabsForm>
+      </TabsField>
     </Form>
   );
 };

stories/forms/LoginForm.js

@@ -16,11 +16,6 @@ const LoginForm = () => (
   <Form
     validationSchema={validationSchema}
     initialValues={{ email: '', password: '' }}
-    onSubmit={(values, actions) => {
-      console.log('values', values);
-      console.log('actions', actions);
-      actions.setSubmitting(false);
-    }}
   >
     <TextField {...TextField.baseProps} name="email" label="Email" required />
     <TextField

stories/forms/ProfileForm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import * as Yup from 'yup';
 import Link from '@material-ui/core/Link';
 import Form from './Form';
-import TabsForm from '../../src/TabsForm';
+import TabsField from '../../src/TabsField';
 import TextField from '../../src/TextField';
 import CheckLabelField from '../../src/CheckLabelField';
 import DsSelectField from '../../src/DsSelectField';
@@ -48,9 +48,8 @@ const ProfileForm = () => (
       accepted: false,
     }}
     validationSchema={validationSchema}
-    onSubmit={values => console.log(values)}
   >
-    <TabsForm
+    <TabsField
       name={'profile'}
       tabs={[
         { label: 'Basic info', value: 'basicInfo' },
@@ -97,7 +96,7 @@ const ProfileForm = () => (
           )}
         </>
       )}
-    </TabsForm>
+    </TabsField>
     <CheckLabelField
       {...CheckLabelField.baseProps}
       name={'accepted'}

stories/forms/SignUpForm.js

@@ -28,9 +28,6 @@ const SignUpForm = () => (
       confirmedPassword: '',
       accepted: false,
     }}
-    onSubmit={values => {
-      console.log('values', values);
-    }}
     validationSchema={validationSchema}
   >
     <TextField {...TextField.baseProps} name="email" label="Email" required />