inrupt · james-martin-jd · Apr 3, 2019 · Feb 25, 2019 · Feb 25, 2019 · Feb 25, 2019
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Solid React Application Generator
 
+## 0.4.0 (March 20, 2019)
+
+#### Solid React Application Base
+
+##### Added
+- Incorporated LDFlex data writing examples
+- Profile Page
+  - View Profile
+  - Edit Profile
+- Site Footer
+
+##### Updated
+- Made some adjustments to prepare for [React Hooks](https://reactjs.org/docs/hooks-intro.html) support
+- Created environment file to store branding-specific variables. This should make it easier to change the branding on generated applications
+
+##### Fixed
+ - Toast messages now close when the site's language changes, to prevent confusion
+ - Added some form validation to the profile form
+
 ## 0.3.0 (March 6, 2019)
 
 #### Solid React Application Base

diff --git a/generators/app/templates/.env b/generators/app/templates/.env
@@ -0,0 +1,3 @@
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name
+REACT_APP_COMPANY_NAME='inrupt Inc.'
diff --git a/generators/app/templates/config/env.js b/generators/app/templates/config/env.js
@@ -17,7 +17,7 @@ var dotenvFiles = [
   `${paths.dotenv}.${NODE_ENV}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
+  // since normally you expect test to produce the same
   // results for everyone
   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
   paths.dotenv,

diff --git a/generators/app/templates/config/webpack.config.js b/generators/app/templates/config/webpack.config.js
@@ -272,6 +272,7 @@ module.exports = function(webpackEnv) {
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes("ts")),
       alias: {
+        react: require.resolve("react"),
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         "react-native": "react-native-web"

diff --git a/generators/app/templates/package-lock.json b/generators/app/templates/package-lock.json
diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json
@@ -1,80 +1,52 @@
 {
   "dependencies": {
-    "@babel/core": "7.1.6",
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
+    "@fortawesome/free-brands-svg-icons": "^5.8.0",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@inrupt/inrupt-atomic-style-guide": "^0.1.19",
-    "@inrupt/solid-react-components": "^0.3.0",
+    "@inrupt/solid-react-components": "^0.4.0-rc",
+    "@inrupt/solid-style-guide": "^0.1.26",
     "@rdfjs/data-model": "^1.1.1",
-    "@solid/query-ldflex": "^2.0.0",
+    "@solid/query-ldflex": "^2.4.0",
     "@svgr/webpack": "2.4.1",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "9.0.0",
-    "babel-jest": "^24.1.0",
-    "babel-loader": "8.0.4",
-    "babel-plugin-named-asset-import": "^0.3.0",
-    "babel-preset-react-app": "^7.0.0",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
-    "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
-    "eslint": "5.6.0",
-    "eslint-config-react-app": "^3.0.6",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-react": "7.11.1",
-    "file-loader": "2.0.0",
     "flag-icon-css": "^3.3.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.0",
-    "html-webpack-include-assets-plugin": "^1.0.6",
-    "html-webpack-plugin": "4.0.0-alpha.2",
     "i18next": "^15.0.4",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "^24.1.0",
-    "jest-pnp-resolver": "1.0.1",
-    "jest-resolve": "23.6.0",
-    "mini-css-extract-plugin": "0.4.3",
     "moment": "^2.24.0",
     "normalize.css": "^8.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.1.0",
-    "postcss-flexbugs-fixes": "4.1.0",
-    "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.3.1",
-    "postcss-safe-parser": "4.0.1",
-    "react": "^16.8.2",
-    "react-app-polyfill": "^0.2.0",
+    "react": "16.8.4",
+    "react-dom": "16.8.4",
+    "react-app-polyfill": "^0.2.2",
     "react-click-outside": "^3.0.1",
     "react-dev-utils": "^7.0.1",
-    "react-dom": "^16.8.2",
     "react-i18next": "^10.1.2",
     "react-router-dom": "^4.3.1",
+    "react-scripts": "^2.1.8",
     "react-toast-notifications": "^1.3.1",
-    "resolve": "1.8.1",
-    "sass-loader": "7.1.0",
-    "solid-auth-client": "^2.2.14",
-    "style-loader": "0.23.0",
-    "styled-components": "^4.1.3",
-    "terser-webpack-plugin": "1.1.0",
-    "url-loader": "1.1.1",
-    "webpack": "4.19.1",
-    "webpack-dev-server": "3.1.14",
-    "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "3.6.3"
+    "solid-auth-client": "^2.3.0",
+    "styled-components": "^4.1.3"
   },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "jest && eslint --ignore-path .gitignore ."
+    }
+  },
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -84,11 +56,6 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "jest && eslint --ignore-path .gitignore ."
-    }
-  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
@@ -148,8 +115,8 @@
             "@services": "./src/services",
             "@layouts": "./src/layouts",
             "@contexts": "./src/contexts/",
-            "@testSetup": "./src/utils/enzymeSetup",
-            "@hocs": "./src/hocs"
+            "@hocs": "./src/hocs",
+            "@utils": "./src/utils"
           }
         }
       ]
@@ -159,10 +126,46 @@
   "version": "0.1.0",
   "private": false,
   "devDependencies": {
+    "@babel/core": "7.1.6",
+    "@babel/runtime": "^7.4.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "9.0.0",
+    "babel-jest": "^24.5.0",
+    "babel-loader": "8.0.4",
+    "babel-plugin-named-asset-import": "^0.3.0",
+    "babel-preset-react-app": "^7.0.0",
     "babel-plugin-module-resolver": "^3.1.2",
     "copy-webpack-plugin": "^4.6.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
-    "husky": "^1.3.1"
+    "css-loader": "1.0.0",
+    "husky": "^1.3.1",
+    "jest-dom": "^3.1.2",
+    "react-testing-library": "^6.0.0",
+    "eslint": "5.6.0",
+    "eslint-config-react-app": "^3.0.6",
+    "eslint-loader": "2.1.1",
+    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-react": "7.11.1",
+    "file-loader": "2.0.0",
+    "resolve": "1.8.1",
+    "jest": "^24.1.0",
+    "jest-pnp-resolver": "1.0.1",
+    "jest-resolve": "23.6.0",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "6.3.1",
+    "postcss-safe-parser": "4.0.1",
+    "sass-loader": "7.1.0",
+    "style-loader": "0.23.0",
+    "terser-webpack-plugin": "1.1.0",
+    "mini-css-extract-plugin": "0.4.3",
+    "html-webpack-include-assets-plugin": "^1.0.6",
+    "html-webpack-plugin": "4.0.0-alpha.2",
+    "url-loader": "1.1.1",
+    "webpack": "4.19.1",
+    "webpack-dev-server": "3.1.14",
+    "webpack-manifest-plugin": "2.0.4",
+    "workbox-webpack-plugin": "3.6.3"
   }
 }
diff --git a/generators/app/templates/public/locales/en-US/translation.json b/generators/app/templates/public/locales/en-US/translation.json
@@ -3,7 +3,7 @@
     "title": "Hi! Welcome to Solid.",
     "loginTitle": "Log in",
     "register": "Register for a solid identity",
-    "solidHelp": "What is a Solid Identity??",
+    "solidHelp": "What is a Solid Identity?",
     "providerPlaceholder": "Select ID Provider",
     "selectPlaceholder": "Select ID Provider",
     "inputPlaholder": "WebID",
@@ -34,6 +34,9 @@
       "es": "Español (Spanish)"
     }
   },
+  "footer": {
+    "version": "Version"
+  },
   "notFound": {
     "title": "Page not found",
     "content": "There may be an error in the URL entered into your web browser. Please check the URL and try again. Or the page you're looking for has been moved or deleted",
@@ -45,14 +48,37 @@
     "title": "<0>This application was generated by the <1>React SDK for Solid.</1></0>",
     "description": "<0>The <1>React SDK for Solid</1>  is a combination of libraries, components, documentation, best practices, and an application generator meant to accelerate the development of high-quality Solid applications:</0>",
     "libraryList": "<0><0><0> Reusable Components </0>that you can use on your own in the applications that you build.</0><1><0>Application Generator</0>  that incorporates all of the components and best practices together for you, standing up THIS fully functional Solid React application. Note: The Solid React application illustrates the use of the components installed by the Generator. It should not be considered as a service provided by inrupt, and is subject to change.</1><1>Best practice patterns that you can reference as examples of how to accomplish particular things.</1></0>",
-    "evolvingMessage": "<0>The SDK is continually evolving. Take a look at the <1>Release Timeline</1>  for what’s currently planned.</0>",
-    "implementing": "This latest release builds on the prior versions, implementing:",
+    "evolvingMessage": "<0>The SDK is continually evolving. Take a look at the <1>Release Timeline</1>  for what’s been implemented as part of the previous releases, and what's currently planned.</0>",
+    "implementing": "This latest release builds on the prior versions:",
     "version010": "<0><0><0>Internationalization</0> best practices, with application session language selection.</0><0>Ability to update your profile image on the Welcome page.</0> </0>",
+    "version030": "<0><0>Implementing the ability to view and edit your <1>User Profile</1></0><1>Including an Application Footer that displays the build number and links to resources.</1><2>Addressing several minor issues based on user feedback.</2></0>",
+    "upload": "Upload New Photo",
+    "uploadSuccess": "Profile Image was updated",
+    "uploadingText": "Uploading",
+    "errors": {
+      "sizeLimit": "File size exceeds the allowable limit ({{limit}})",
+      "unsupported": "Unsupported media type",
+      "maximumFiles": "Sorry, you have exceeded the maximum number of files allowed per upload"
+    }
+  },
+  "profile": {
+    "edit": "EDIT",
+    "cancelBtn": "Cancel",
+    "saveBtn": "Save",
+    "phone": "Phone",
+    "role": "Role",
+    "email": "Email",
+    "country": "Country",
+    "name": "Name",
+    "company": "Company",
+    "address": "Address",
     "upload": "Upload New Photo",
-    "uploadSucces": "Profile Image was updated",
+    "uploadSuccess": "Profile Image was updated",
     "uploadingText": "Uploading",
+    "updateSuccess": "Profile was updated successfully",
+    "nameRequired": "Name is required",
     "errors": {
-      "sizeLimit": "File size exceeds the allowable limit",
+      "sizeLimit": "File size exceeds the allowable limit ({{limit}})",
       "unsupported": "Unsupported media type",
       "maximumFiles": "Sorry, you have exceeded the maximum number of files allowed per upload"
     }

diff --git a/generators/app/templates/public/locales/en/translation.json b/generators/app/templates/public/locales/en/translation.json
@@ -3,7 +3,7 @@
     "title": "Hi! Welcome to Solid.",
     "loginTitle": "Log in",
     "register": "Register for a solid identity",
-    "solidHelp": "What is a Solid Identity??",
+    "solidHelp": "What is a Solid Identity?",
     "providerPlaceholder": "Select ID Provider",
     "selectPlaceholder": "Select ID Provider",
     "inputPlaholder": "WebID",
@@ -34,6 +34,9 @@
       "es": "Español (Spanish)"
     }
   },
+  "footer": {
+    "version": "Version"
+  },
   "notFound": {
     "title": "Page not found",
     "content": "There may be an error in the URL entered into your web browser. Please check the URL and try again. Or the page you're looking for has been moved or deleted",
@@ -45,14 +48,37 @@
     "title": "<0>This application was generated by the <1>React SDK for Solid.</1></0>",
     "description": "<0>The <1>React SDK for Solid</1>  is a combination of libraries, components, documentation, best practices, and an application generator meant to accelerate the development of high-quality Solid applications:</0>",
     "libraryList": "<0><0><0> Reusable Components </0>that you can use on your own in the applications that you build.</0><1><0>Application Generator</0>  that incorporates all of the components and best practices together for you, standing up THIS fully functional Solid React application. Note: The Solid React application illustrates the use of the components installed by the Generator. It should not be considered as a service provided by inrupt, and is subject to change.</1><1>Best practice patterns that you can reference as examples of how to accomplish particular things.</1></0>",
-    "evolvingMessage": "<0>The SDK is continually evolving. Take a look at the <1>Release Timeline</1>  for what’s currently planned.</0>",
-    "implementing": "This latest release builds on the prior versions, implementing:",
+    "evolvingMessage": "<0>The SDK is continually evolving. Take a look at the <1>Release Timeline</1>  for what’s been implemented as part of the previous releases, and what's currently planned.</0>",
+    "implementing": "This latest release builds on the prior versions:",
     "version010": "<0><0><0>Internationalization</0> best practices, with application session language selection.</0><0>Ability to update your profile image on the Welcome page.</0> </0>",
+    "version030": "<0><0>Implementing the ability to view and edit your <1>User Profile</1></0><1>Including an Application Footer that displays the build number and links to resources.</1><2>Addressing several minor issues based on user feedback.</2></0>",
+    "upload": "Upload New Photo",
+    "uploadSuccess": "Profile Image was updated",
+    "uploadingText": "Uploading",
+    "errors": {
+      "sizeLimit": "File size exceeds the allowable limit ({{limit}})",
+      "unsupported": "Unsupported media type",
+      "maximumFiles": "Sorry, you have exceeded the maximum number of files allowed per upload"
+    }
+  },
+  "profile": {
+    "edit": "EDIT",
+    "cancelBtn": "Cancel",
+    "saveBtn": "Save",
+    "phone": "Phone",
+    "role": "Role",
+    "email": "Email",
+    "country": "Country",
+    "name": "Name",
+    "company": "Company",
+    "address": "Address",
     "upload": "Upload New Photo",
-    "uploadSucces": "Profile Image was updated",
+    "uploadSuccess": "Profile Image was updated",
     "uploadingText": "Uploading",
+    "updateSuccess": "Profile was updated successfully",
+    "nameRequired": "Name is required",
     "errors": {
-      "sizeLimit": "File size exceeds the allowable limit",
+      "sizeLimit": "File size exceeds the allowable limit ({{limit}})",
       "unsupported": "Unsupported media type",
       "maximumFiles": "Sorry, you have exceeded the maximum number of files allowed per upload"
     }

diff --git a/generators/app/templates/public/locales/es/translation.json b/generators/app/templates/public/locales/es/translation.json
@@ -34,6 +34,9 @@
       "es": "Español (Español)"
     }
   },
+  "footer": {
+    "version": "Versión"
+  },
   "notFound": {
     "title": "Página no encontrada",
     "content": "Puede existir un problema con la dirección buscada. Por favor verifiquela e intente de nuevo. O la página que buscaste ha sido movida o eliminada",
@@ -46,13 +49,36 @@
     "description": "<0>El <1>React SDK for Solid</1>  es una combinación de librerias, componentes, documentación, buenas prácticas y un generador de aplicaciones diseñada para acelerar el desarrollo de aplicaciones Solid de alta calidad:</0>",
     "libraryList": "<0><0><0> Componentes reutilizables </0>que puedes utilizar en tus propias aplicaciones.</0><1><0>Generador de aplicaciones</0>, incorpora todos los componentes y las buenas practicas en una misma aplicacion para el desarrollador. Nota: La aplicaciones Solid React, muestra el uso de los componentes instalados por el generador. No debe ser considerado como un servicio que Inrupt provee, y está sujeto a cambios.</0><0>Patrones de buenas prácticas que puedes referenciar como ejemplos para lograr resolver diferentes situaciones.</1></0>",
     "evolvingMessage": "<0>El SDK se encuentra en constante evolución. Revisa el <1>Calendario de Desarrollo</1>  para lo que está planeado.</0>",
-    "implementing": "Esta última version se basa en las anteriores, implementando:",
+    "implementing": "Esta última version se basa en las anteriores, incluye:",
     "version010": "<0><0>Mejores prácticas para la <0>Internacionalización</0>, con selector de lenguaje para la sesión.</0><1>Habilidad para actualizar la imagen de perfil en la página de bienvenida.</1> </0>",
+    "version030": "<0><0>La habilidad de ver y editar el <1>Perfil del usuario</1></0><1>Inclusión de un pie de página con el número de versión y enlances a los recursos.</1><2>Se corrigieron varios errores pequeños de acuerdo a la retroalimentación de los usuarios.</2></0>",
+    "upload": "Subir foto",
+    "uploadSuccess": "Imagen de perfil actualizada correctamente",
+    "uploadingText": "Subiendo",
+    "errors": {
+      "sizeLimit": "El tamaño del archivo supera el límite permitido ({{limit}})",
+      "unsupported": "Formato no soportado",
+      "maximumFiles": "Disculpe, has excedido la cantidad máxima de archivos permitidos por subida"
+    }
+  },
+  "profile": {
+    "edit": "EDITAR",
+    "cancelBtn": "Cancelar",
+    "saveBtn": "Guardar",
+    "phone": "Teléfono",
+    "role": "Rol",
+    "email": "Correo",
+    "country": "País",
+    "name": "Nombre",
+    "company": "Compañía",
+    "address": "Dirección",
     "upload": "Subir foto",
     "uploadSuccess": "Imagen de perfil actualizada correctamente",
     "uploadingText": "Subiendo",
+    "updateSuccess": "Perfil actualizado correctamente",
+    "nameRequired": "Nombre es un campo obligatorio",
     "errors": {
-      "sizeLimit": "El tamaño del archivo supera el límite permitido",
+      "sizeLimit": "El tamaño del archivo supera el límite permitido ({{limit}})",
       "unsupported": "Formato no soportado",
       "maximumFiles": "Disculpe, has excedido la cantidad máxima de archivos permitidos por subida"
     }