replaced redux for context, changed some files to ts and added reques…

.eslintrc.js

@@ -1,7 +1,14 @@
 module.exports = {
-  extends: ['wolox-react'],
+  extends: ['wolox', 'wolox-react', 'wolox-typescript'],
+  parser: '@typescript-eslint/parser',
   rules: {
     'import/no-unresolved': 'off',
-    'import/no-extraneous-dependencies': 'off'
+    'import/no-extraneous-dependencies': 'off',
+    '@typescript-eslint/no-var-requires': 'off'
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
   }
 };

README.md

@@ -99,15 +99,8 @@ Additional to clean libraries are added
 |Name|Description|
 |----|-----------|
 |[apisauce](https://github.com/infinitered/apisauce)| Talking to APIs doesn't have to be awkward anymore.
-|[redux](https://redux.js.org/)| Helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
-|[react-redux](https://react-redux.js.org/)| Is the official React binding for Redux.
-|[connected-react-router](https://github.com/supasate/connected-react-router)| A Redux binding for React Router v4.
 |[react-router-dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)| DOM bindings for React Router.
-|[redux-recompose](https://github.com/Wolox/redux-recompose)| A Redux utility belt for reducers and actions. Inspired by acdlite/recompose.
-|[redux-form](https://github.com/erikras/redux-form)| A Higher Order Component using react-redux to keep form state in a Redux store.
-|[redux-thunk](https://github.com/reduxjs/redux-thunk)| Middlewere for Redux.
 |[react-router](https://github.com/ReactTraining/react-router)| Routing for React.
-|[redux-beacon](https://github.com/rangle/redux-beacon)| Analytics integration for Redux.
 |[seamless-immutable](https://github.com/rtfeldman/seamless-immutable)| Immutable data structures for JavaScript.
 |[history](https://www.npmjs.com/package/history)| Manage session history anywhere JavaScript runs.
 |[i18next](https://www.i18next.com/)| An internationalization-framework written in and for JavaScript.
@@ -120,7 +113,6 @@ Also you can select **_optional_** libraries like
 |----|-----------|
 |[moment](https://momentjs.com/)| Parse, validate, manipulate, and display dates and times in JavaScript.
 |[seamless-immutable](https://github.com/rtfeldman/seamless-immutable)| Immutable data structures for JavaScript.
-|[reselect](https://github.com/reduxjs/reselect)| Selector library for Redux.
 |[babel-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver)| Custom module resolver plugin for Babel.
 
 ## Notes

generators/app/constants.js

@@ -84,16 +84,18 @@ module.exports.FILES_TO_DESTINATION = [LINTER_IGNORE_PATH, RESCRIPTS_PATH, NPMRC
 
 module.exports.CI_CONFIG_FILE = `${CI_PATH}/config.yml`;
 
-module.exports.BOOTSTRAP_TYPES = [{ name: 'Clean', value: false }, { name: 'Customized', value: true }];
+module.exports.BOOTSTRAP_TYPES = [
+  { name: 'Clean', value: false },
+  { name: 'Customized', value: true }
+];
 
 module.exports.DEV_DEPENDENCIES = [
   '[email protected]',
   '[email protected]',
   '[email protected]',
   '[email protected]',
-  '[email protected]',
   '[email protected]',
-  '[email protected].0',
+  '[email protected].1',
   '[email protected]',
   '[email protected]',
   '[email protected]',

generators/app/steps/CustomizableSteps/constants.js

@@ -1,12 +1,13 @@
 const COMPONENTS_PATH = 'src/app/components';
 const SCREENS_PATH = 'src/app/screens';
 const CONFIG_PATH = 'src/config';
-const REDUX_PATH = 'src/redux';
 const UTILS_PATH = 'src/utils';
 const SERVICES_PATH = 'src/services';
 const CONSTANTS_PATH = 'src/constants';
 const DOCS_README_PATH = 'docs';
 const DEPENDENCY_SPECIFIC_PATH = 'src/dependency_specific';
+const HOOKS_PATH = 'src/app/hooks';
+const CONTEXT_PATH = 'src/app/contexts';
 
 module.exports.RESCRIPTS_PATH = {
   src: 'rescriptsrc.js',
@@ -18,40 +19,37 @@ module.exports.NPMRC_PATH = {
   destination: '.npmrc'
 };
 
-module.exports.REDUX_COMPONENTS = [`${COMPONENTS_PATH}/Field/index.js`];
-
 module.exports.FILES = [
   CONFIG_PATH,
   CONSTANTS_PATH,
   DOCS_README_PATH,
-  REDUX_PATH,
   SCREENS_PATH,
   UTILS_PATH,
+  HOOKS_PATH,
+  CONTEXT_PATH,
   'aws.js',
   'tsconfig.json',
   'tsconfig.paths.json',
   'scripts/deploy.js',
   'src/react-app-env.d.ts',
-  `${COMPONENTS_PATH}/Routes/components/AuthenticatedRoute.tsx`,
-  `${COMPONENTS_PATH}/Routes/styles.module.scss`,
+  'src/app/index.tsx',
+  `${COMPONENTS_PATH}/Routes`,
   `${COMPONENTS_PATH}/Spinner`,
   `${COMPONENTS_PATH}/Suspense`,
   `${COMPONENTS_PATH}/SearchBar`,
   `${COMPONENTS_PATH}/InputLabel`,
   `${COMPONENTS_PATH}/TextArea`,
   `${COMPONENTS_PATH}/Checkbox`,
   `${COMPONENTS_PATH}/RadioGroup`,
-  `${SERVICES_PATH}/AuthServices.js`,
-  `${SERVICES_PATH}/AnalyticsService.js`
+  `${COMPONENTS_PATH}/ProviderWrapper`,
+  `${SERVICES_PATH}/AuthServices.js`
 ];
 
 module.exports.TEMPLATE_FILES = [
   // TODO: Insert here all template ejs files
   '.eslintrc.js',
   '.babelrc.js',
   'src/index.tsx',
-  'src/app/index.tsx',
-  `${COMPONENTS_PATH}/Routes/index.tsx`,
   `${SERVICES_PATH}/LocalStorageService.js`
 ];
 
@@ -73,7 +71,6 @@ module.exports.WITHOUT_SEAMLESS_FILES = {
 module.exports.OPTIONAL_DEPENDENCIES = {
   moment: { dependencies: ['moment@^2.23.0'] },
   'seamless-immutable': { dependencies: ['seamless-immutable@^7.1.4'] },
-  reselect: { dependencies: ['reselect@^4.0.0'] },
   'babel-module-resolver': {
     dependencies: ['babel-plugin-module-resolver@^3.1.1'],
     devDependencies: ['eslint-import-resolver-babel-module@^5.0.0']
@@ -82,16 +79,8 @@ module.exports.OPTIONAL_DEPENDENCIES = {
 
 module.exports.DEPENDENCIES = [
   'apisauce@^1.0.1',
-  'redux@^4.0.1',
-  'react-redux@^6.0.0',
-  'connected-react-router@^6.0.0',
-  'react-router-dom@^4.3.1',
-  'redux-recompose@^2.1.0',
-  'redux-form@^8.0.4',
-  'redux-thunk@^2.3.0',
-  'react-router@^4.3.1',
-  'redux-beacon@^2.0.3',
-  '@redux-beacon/google-analytics@^1.1.1',
+  'react-router@^5.1.2',
+  'react-router-dom@^5.1.2',
   'seamless-immutable@^7.1.4',
   'history@^4.7.2',
   'i18next@^13.0.0',
@@ -104,9 +93,10 @@ module.exports.DEV_DEPENDENCIES = [
   '@types/node@^12.12.14',
   '@types/react@^16.9.13',
   '@types/react-dom@^16.9.4',
-  '@types/react-redux@^7.1.5',
   '@types/react-router@^5.1.2',
+  '@types/react-router@^5.1.4',
   '@types/react-router-dom@^5.1.3',
   '@types/seamless-immutable@^7.1.11',
-  '@types/webpack-env@^1.14.1'
+  '@types/webpack-env@^1.14.1',
+  'eslint-config-wolox-typescript'
 ];

generators/app/steps/CustomizableSteps/copyFiles.js

@@ -7,7 +7,10 @@ const { FILES, FILES_TO_DELETE, TEMPLATE_FILES, WITHOUT_SEAMLESS_FILES } = requi
 module.exports = function copyAllFiles() {
   mkdirp(this.destinationPath(`${this.projectName}/src/app/assets/`));
 
+  console.log('Deleting default CRA files...');
   deleteFiles.bind(this)(FILES_TO_DELETE);
+
+  console.log('Adding files...');
   copyFiles.bind(this)(FILES);
   copyTemplateFiles.bind(this)(TEMPLATE_FILES);
 

generators/app/tasks/fileCreators.js

@@ -4,6 +4,13 @@ const getPackageJsonAttributes = (projectName, projectVersion, repoUrl) => ({
   name: projectName,
   title: projectName,
   version: projectVersion,
+  jest: {
+    moduleNameMapper: {
+      '~screens(.*)': '<rootDir>/src/app/screens/$1',
+      '~components(.*)': '<rootDir>/src/app/components/$1',
+      '^~(.*)/(.*)$': '<rootDir>/src/$1/$2'
+    }
+  },
   repository: {
     type: 'git',
     url: repoUrl
@@ -60,10 +67,11 @@ module.exports.createJSConfig = function createJSConfig() {
       '~screens/*': ['./src/app/screens/*'],
       '~config/*': ['./src/config/*'],
       '~constants/*': ['./src/constants/*'],
-      '~redux/*': ['./src/redux/*'],
       '~services/*': ['./src/services/*'],
       '~utils/*': ['./src/utils/*'],
-      '~assets/*': ['./src/assets/*']
+      '~assets/*': ['./src/assets/*'],
+      '~hooks/*': ['./src/app/hooks/*'],
+      '~contexts/*': ['./src/app/contexts/*']
     };
   }
 

generators/app/tasks/gitConfig.js

@@ -17,7 +17,7 @@ module.exports.gitInitiation = function gitInitiation() {
         successMessage: 'CRA README.md removed successfully',
         failureMessage: 'CRA README.md removing failed, no README.md found'
         // catching with an empty function to ignore the error
-        // eslint-disable-next-line no-empty-function
+        // eslint-disable-next-line no-empty-function, @typescript-eslint/no-empty-function
       }).catch(() => {})
     );
 };

generators/app/templates/.babelrc.ejs

@@ -10,9 +10,11 @@ module.exports = {
           "~screens": "./src/app/screens",
           "~config": "./src/config",
           "~constants": "./src/constants",
-          "~redux": "./src/redux",
           "~services": "./src/services",
-          "~utils": "./src/utils"
+          "~utils": "./src/utils",
+          "~app": "./src/app",
+          "~hooks": "./src/app/hooks",
+          "~contexts": "./src/app/contexts"
         }
       }
     ]<% } %>

generators/app/templates/.eslintrc.ejs

@@ -1,7 +1,6 @@
 module.exports = {
-  extends: ['wolox-react'<% if (features && features.customized) { %>, 'plugin:import/typescript'<% } %>],<% if (features && features.customized) { %>
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],<% } %>
+  extends: ['wolox-react'<% if (features && features.customized) { %>, 'wolox-typescript'<% } %>],<% if (features && features.customized) { %>
+  parser: '@typescript-eslint/parser',<% } %>
   settings: {
     'react': {
       'version': 'detect'
@@ -15,41 +14,16 @@ module.exports = {
           '~screens': './src/app/screens',
           '~config': './src/config',
           '~constants': './src/constants',
-          '~redux': './src/redux',
           '~services': './src/services',
-          '~utils': './src/utils'
+          '~utils': './src/utils',
+          '~app': './src/app',
+          '~assets': './src/assets',
+          '~hooks': './src/app/hooks',
+          '~contexts': './src/app/contexts'
         }
       }
     }<%} %>
-  }<% if (features && features.customized) { %>,
-  rules: {
-    'react/jsx-filename-extension': [1, { 'extensions': ['.js', '.jsx', '.tsx'] }],
-    'spaced-comment': ['error', 'always', { 'markers': ['/'] }],
-    '@typescript-eslint/adjacent-overload-signatures': 'error',
-    '@typescript-eslint/ban-types': 'error',
-    'camelcase': 'off',
-    '@typescript-eslint/camelcase': 'error',
-    '@typescript-eslint/class-name-casing': 'error',
-    '@typescript-eslint/consistent-type-assertions': 'error',
-    '@typescript-eslint/member-delimiter-style': 'error',
-    'no-array-constructor': 'off',
-    '@typescript-eslint/no-array-constructor': 'error',
-    'no-empty-function': 'off',
-    '@typescript-eslint/no-empty-function': 'error',
-    '@typescript-eslint/no-empty-interface': 'error',
-    '@typescript-eslint/no-inferrable-types': 'error',
-    '@typescript-eslint/no-misused-new': 'error',
-    '@typescript-eslint/no-namespace': 'error',
-    '@typescript-eslint/no-this-alias': 'error',
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': 'error',
-    'no-use-before-define': 'off',
-    '@typescript-eslint/no-use-before-define': 'error',
-    '@typescript-eslint/no-var-requires': 'error',
-    '@typescript-eslint/prefer-namespace-keyword': 'error',
-    '@typescript-eslint/triple-slash-reference': 'error',
-    '@typescript-eslint/type-annotation-spacing': 'error'
-  }<% } %><% if (features && features.jest) { %>,
+  }<% if (features && features.jest) { %>,
   env: {
     jest: true
   }<% } %>

generators/app/templates/docs/SearchBar.md

@@ -24,35 +24,4 @@
     <input name="lastName" id="lastName" type="input" onChange={this.onChange}/>
   </label>
 </SearchBar>
-```
-
-If you decided to use redux-form you must add it to the component and use it in this way.
-
-```jsx
-<SearchBar
-  onSubmit={handleSubmit}
-  className={styles.userFormContainer}
-  formClassName={styles.userForm}
->
-  <div className={styles.search}>
-    <Field
-      component={Input}
-      name="name"
-      placeholder={i18next.t('SearchUser:namePlaceholder')}
-      type="text"
-    />
-     <Field
-      component={Input}
-      name="brand"
-      placeholder={i18next.t('SearchUser:brandPlaceholder')}
-      type="text"
-    />
-    <Field
-      component={Select}
-      name="status"
-      dataOptions={STATES}
-      placeholder={i18next.t('SearchUser:statusPlaceholder')}
-    />
-  <div>
-</SearchBar
-```
+```

generators/app/templates/docs/TextArea.md

@@ -20,15 +20,3 @@
   onFocus={this.handleFocus}
 />
 ```
-
-If you decided to use redux-form you must add it to the component and use it in this way.
-
-```jsx
-textArea = wrapField(TextArea);
-
-<Field
-  name={fieldName}
-  component={this.textArea}
-  className={styles.textArea}
-/>
-```

generators/app/templates/jsconfig.json

@@ -11,10 +11,11 @@
       "~screens/*": ["./src/app/screens/*"],
       "~config/*": ["./src/config/*"],
       "~constants/*": ["./src/constants/*"],
-      "~redux/*": ["./src/redux/*"],
       "~services/*": ["./src/services/*"],
       "~utils/*": ["./src/utils/*"],
-      "~assets/*": ["./src/assets/*"]
+      "~assets/*": ["./src/assets/*"],
+      "~hooks/*": ["./src/hooks/*"],
+      "~contexts/*": ["./src/contexts/*"]
     }
   },
   "include": ["src"],

generators/app/templates/setupTests.js

@@ -2,3 +2,7 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
+
+jest.mock('i18next', () => ({
+  t: () => ''
+}));