add updated template from react-factory

Author: spoeck

.gitignore

@@ -19,3 +19,19 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# test coverage
+/cypress/screenshots
+/coverage/src
+/coverage/home
+/coverage/Users
+/coverage/base.css
+/coverage/block-navigation.js
+/coverage/coverage-final.json
+/coverage/coverage-summary.json
+/coverage/index.html
+/coverage/prettify.css
+/coverage/prettify.js
+/coverage/sort-arrow-sprite.png
+/coverage/sorter.js
+/coverage/favicon.png

.prettierignore

@@ -0,0 +1,4 @@
+build/
+dist/
+lib/build/
+lib/dist/

.prettierrc.json

@@ -2,5 +2,6 @@
 	"useTabs": true,
 	"tabWidth": 4,
 	"trailingComma": "es5",
-	"printWidth": 80
+	"printWidth": 120,
+	"singleQuote": true
 }

.vscode/snippets/typescriptreact.json

@@ -10,7 +10,7 @@
 			"",
 			"}",
 			"",
-			"function $TM_FILENAME_BASE(props: Props) {",
+			"export function $TM_FILENAME_BASE(props: Props) {",
 			"",
 			"const {  } = props;",
 			"const classes = useStyles();",
@@ -27,9 +27,7 @@
 			"root: {",
 			"",
 			"},",
-			"});",
-			"",
-			"export default $TM_FILENAME_BASE;"
+			"});"
 		],
 		"description": "component + makeStyle"
 	},
@@ -44,7 +42,7 @@
 			"",
 			"}",
 			"",
-			"function $TM_FILENAME_BASE(props: Props) {",
+			"export function $TM_FILENAME_BASE(props: Props) {",
 			"",
 			"const {  } = props;",
 			"const classes = useStyles(props);",
@@ -61,9 +59,7 @@
 			"root: (props: Props) => ({",
 			"",
 			"}),",
-			"});",
-			"",
-			"export default $TM_FILENAME_BASE;"
+			"});"
 		],
 		"description": "component + makeStyle + Props"
 	},
@@ -78,7 +74,7 @@
 			"",
 			"}",
 			"",
-			"function $TM_FILENAME_BASE(props: Props) {",
+			"export function $TM_FILENAME_BASE(props: Props) {",
 			"",
 			"const {  } = props;",
 			"const classes = useStyles(props);",
@@ -95,9 +91,7 @@
 			"root: (props: Props) => ({",
 			"",
 			"}),",
-			"}));",
-			"",
-			"export default $TM_FILENAME_BASE;"
+			"}));"
 		],
 		"description": "component + makeStyle + Props + Theme"
 	},
@@ -112,7 +106,7 @@
 			"",
 			"}",
 			"",
-			"function $TM_FILENAME_BASE(props: Props) {",
+			"export function $TM_FILENAME_BASE(props: Props) {",
 			"",
 			"const {  } = props;",
 			"const classes = useStyles();",
@@ -129,16 +123,107 @@
 			"root: {",
 			"",
 			"},",
-			"}));",
-			"",
-			"export default $TM_FILENAME_BASE;"
+			"}));"
 		],
 		"description": "component + makeStyle + Theme"
 	},
 	"useState": {
-		"prefix": "state",
+		"prefix": "useState",
+		"body": ["const [${1:value}, set${1/(.*)/${1:/capitalize}/}] = React.useState(${2:value});$0"]
+	},
+
+	"lodash": {
+		"prefix": "lodash",
+		"body": ["import * as _ from 'lodash';"]
+	},
+
+	"useAction": {
+		"prefix": "useAction",
 		"body": [
-			"const [${1:value}, set${2:Value}] = React.useState(${3:value});$0"
+			"// import * as ${1/(.*)/${1:/capitalize}/}Actions from '../actions/${1:actionname}';",
+			"const ${1:actionname}Actions: typeof ${1/(.*)/${1:/capitalize}/}Actions = useActions(${1/(.*)/${1:/capitalize}/}Actions);"
 		]
+	},
+
+	"useEffect": {
+		"prefix": "useEffect",
+		"body": ["React.useEffect(() => {", "$0", "}, []);"]
+	},
+
+	"useSelector": {
+		"prefix": "useSelector",
+		"body": "const ${1:varialbe}: ${2:type} = useSelector((state: RootState) => state.${1:varialbe});"
+	},
+
+	"useHistory": {
+		"prefix": "useHistory",
+		"body": "const history = useHistory();"
+	},
+
+	"useMediaQuery - Breakpoint": {
+		"prefix": "useMedia",
+		"body": "const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));"
+	},
+
+	"useMediaQuery - ScreenWidth": {
+		"prefix": "useMedia",
+		"body": "const showIcon = useMediaQuery('(max-width:400px)');"
+	},
+
+	"useResponsive - isMobile": {
+		"prefix": "isMobile",
+		"body": "const { isMobile } = useResponsive();"
+	},
+
+	"handleTextField": {
+		"prefix": "handleTextField",
+		"body": [
+			"const handle${1:value} = (e: React.ChangeEvent<HTMLInputElement>) => {",
+			"const value = e.target.value;",
+			"",
+			"};"
+		]
+	},
+
+	"handleSelect": {
+		"prefix": "handleSelect",
+		"body": [
+			"const handle${1:value} =  (e: React.ChangeEvent<{ value: any }>) => {",
+			"const value = e.target.value as string;",
+			"",
+			"};"
+		]
+	},
+
+	"story": {
+		"prefix": "story",
+		"body": [
+			"import { Meta } from '@storybook/react';",
+			"import * as React from 'react';",
+			"import { withTheme } from './index.stories';",
+			"import { ${TM_FILENAME_BASE/(.stories)//}Props} from '../src/components/${TM_FILENAME_BASE/(.stories)//}'",
+			"import { ${TM_FILENAME_BASE/(.stories)//} } from '../src';",
+			"",
+			"export default {",
+			"title: '${TM_FILENAME_BASE/(.stories)//}',",
+			"component: ${TM_FILENAME_BASE/(.stories)//},",
+			"// argTypes: { onClick: { action: 'clicked' } },",
+			"} as Meta;",
+			"",
+			"const Template = (args: ${TM_FILENAME_BASE/(.stories)//}Props) =>",
+			"withTheme(",
+			"<${TM_FILENAME_BASE/(.stories)//} {...args} />",
+			");",
+			"",
+			"export const Default = Template.bind({});",
+			"",
+			"Default.args = {",
+			"",
+			"// add your props here",
+			"",
+			"} as ${TM_FILENAME_BASE/(.stories)//}Props;",
+			""
+		],
+		"description": "storybook"
 	}
 }

.yo-rc.json

@@ -0,0 +1,12 @@
+{
+  "generator-react-factory": {
+    "promptValues": {
+      "githubUser": "innFactory",
+      "appName": "create-react-app-material-typescript-redux",
+      "appVersion": "3.0.0",
+      "otherFeatures": [
+        "Snackbar State and Component"
+      ]
+    }
+  }
+}

README.md

@@ -1,6 +1,6 @@
-# Create React App example with Material-UI, TypeScript, Redux and Routing
+# create-react-app-material-typescript-redux derived from Create React App example with Material-UI, TypeScript, Redux and Routing
 
-This is a new version with React Hooks, Material-UI 4 and React-Redux 7 (with hooks!). We use this template for all our new projects. If you want to bootstrap a project with the classic approach without hooks but with class components, you are welcome to use the [previous version](https://github.com/innFactory/create-react-app-material-typescript-redux/tree/v1).
+Made with our new CLI Tool [react-factory](https://github.com/innFactory/react-factory) for choosing the optional features and configure our individual setup.
 
 <img width="100%" src="screenshot.png" alt="example"/>
 
@@ -11,53 +11,46 @@ Inspired by:
 
 ## Contains
 
--   [x] [Material-UI](https://github.com/mui-org/material-ui)
--   [x] [Typescript](https://www.typescriptlang.org/)
--   [x] [React](https://facebook.github.io/react/)
--   [x] [Redux](https://github.com/reactjs/redux)
--   [x] [Redux-Thunk](https://github.com/gaearon/redux-thunk)
--   [x] [Redux-Persist](https://github.com/rt2zz/redux-persist)
--   [x] [React Router](https://github.com/ReactTraining/react-router)
--   [x] [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)
--   [x] [TodoMVC example](http://todomvc.com)
--   [x] PWA Support
+- [x] [Material-UI](https://github.com/mui-org/material-ui)
+- [x] [Typescript](https://www.typescriptlang.org/)
+- [x] [React](https://facebook.github.io/react/)
+- [x] [Redux](https://github.com/reactjs/redux)
+- [x] [Redux-Thunk](https://github.com/gaearon/redux-thunk)
+- [x] [Redux-Persist](https://github.com/rt2zz/redux-persist)
+- [x] [React Router](https://github.com/ReactTraining/react-router)
+- [x] [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)
+- [x] [TodoMVC example](http://todomvc.com)
+  
+Optional:
+
+- [ ] Cypress-Tests-Environment
+- [ ] Firebase-Integration
+- [ ] Github Actions (cypress-test, build-and-deploy to firebase)
+- [ ] Snackbars
+- [ ] Subfolder Library
+- [ ] Service Worker
+- [ ] PolyFills (IE11)
 
-## Roadmap
-
--   [x] Make function based components and use hooks for state etc.
--   [x] Implement [Material-UIs new styling solution](https://material-ui.com/css-in-js/basics/) based on hooks
--   [x] use react-redux hooks
--   [ ] Hot Reloading -> Waiting for official support of react-scripts
 
 ## How to use
 
-Download or clone this repo
-
-```bash
-git clone https://github.com/innFactory/create-react-app-material-typescript-redux
-cd create-react-app-material-typescript-redux
-```
+We made a CLI Tool [react-factory](https://github.com/innFactory/react-factory) to include more options.
 
-Install it and run:
+<img width="70%" src="react_factory.png" alt="example"/>
 
+First install  [Yeoman](http://yeoman.io) and the CLI Tool:
 ```bash
-npm i
-npm start
+npm install -g yo
+npm install -g generator-react-factory
 ```
 
-## Enable PWA ServiceWorker [OPTIONAL]
+Then generate your new project:
 
-Just comment in the following line in the `index.tsx`:
-
-```javascript
-// registerServiceWorker();
+```bash
+yo react-factory
 ```
 
-to
 
-```javascript
-registerServiceWorker();
-```
 
 ## Enable Prettier [OPTIONAL]