chore: #422 - re-add internal scaffolder option on cli to app scaffol…

…der (#448)

packages/react-app-scaffolder/app/index.js

@@ -20,7 +20,7 @@ module.exports = class extends Generator {
         await exec(`yarn`)
       }
 
-      const prettierConfigPath = path.resolve(__dirname, '../../../../.prettierrc.js')
+      const prettierConfigPath = path.resolve(__dirname, '../../../.prettierrc.js')
       await exec(`yarn prettier --write ./package.json`)
       await exec(`yarn prettier "**/*.ts" "**/*.tsx" --write`)
       this.log(yosay('App installed successfully!'))
@@ -117,6 +117,7 @@ module.exports = class extends Generator {
         redux,
         graphql,
         stylesSolution,
+        isFoundation
       })
 
       this.fs.copyTpl(this.templatePath('_package.json'), this.destinationPath('package.json'), {
@@ -211,12 +212,12 @@ module.exports = class extends Generator {
         message: 'Enter the client id for your app (you will need to submit a template app to do this)',
         default: '',
       },
-      // {
-      //   type: 'confirm',
-      //   name: 'isFoundation',
-      //   message: 'Is this project for internal use (mono-repo)',
-      //   default: false,
-      // },
+      {
+        type: 'confirm',
+        name: 'isFoundation',
+        message: 'Is this project for internal use (mono-repo)',
+        default: true,
+      },
       {
         type: 'list',
         name: 'stylesSolution',
@@ -243,7 +244,6 @@ module.exports = class extends Generator {
       },
     ])
 
-    this.answers.isFoundation = false
     this.answers.azure = false
 
     const { stateManagementStyle, stylesSolution } = this.answers
@@ -276,7 +276,7 @@ module.exports = class extends Generator {
      * else current path
      */
     if (this.answers.isFoundation) {
-      this.packagePath = path.resolve(__dirname, `../../../${this.answers.name}`)
+      this.packagePath = path.resolve(__dirname, `../../${this.answers.name}`)
       /**
        * create directory if not
        */

packages/react-app-scaffolder/app/templates/_package.json

@@ -12,15 +12,21 @@
   "private": true,
   "scripts": {
     <% if (isFoundation) { %>
+    <% if (stylesSolution === 'styledComponents') { %>
+    "build:prod": "node '../../scripts/webpack/webpack-styled-components-prod.js'",
+    "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.base.dev.js",
+    <% } else { %>
     "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'",
     "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js",
-    "release:dev": "node ../../scripts/release/release-dev.js lifetime-legal reapit-<%= name %>-dev",
-    "release:prod": "node ../../scripts/release/release-prod.js lifetime-legal reapit-<%= name %>-dev"
+    <% } %>
+
+    "release:dev": "node ../../scripts/release/release-dev.js <%= name %> reapit-<%= name %>-dev",
+    "release:prod": "node ../../scripts/release/release-prod.js <%= name %> reapit-<%= name %>-dev",
     <% } else { %>
     "build:prod": "webpack --color --mode production --config './src/scripts/webpack-prod.js'",
     "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ./src/scripts/webpack-dev.js",
     "lint": "eslint --ext=jsx,ts,tsx src --fix",
-    <% } %>
+  <% } %>
     "start:prod": "serve public/dist -s -l 8080",
     "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit",
     "test:dev": "cross-env TZ=UTC jest --watch --verbose",
@@ -51,7 +57,7 @@
     <% if (stylesSolution === 'styledComponents') { %>
     ,"styled-components": "^4.3.2"
     <% } else { %>
-      
+
     <% } %>
   },
   "devDependencies": {

packages/react-app-scaffolder/app/templates/base-is-foundation/tsconfig.json

@@ -5,7 +5,8 @@
     "paths": {
       "@/*": ["src/*"],
       "@reapit/cognito-auth": ["../cognito-auth/src"],
-      "@reapit/elements": ["../elements/src"]
+      "@reapit/elements": ["../elements/src"],
+      "@reapit/elements/*": ["../elements/*"]
     }
   },
   "include": ["src"],

packages/react-app-scaffolder/app/templates/base-is-sass/src/styles/index.scss

@@ -19,5 +19,3 @@
 
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
-
-@import "~@reapit/elements/dist/index.css";

packages/react-app-scaffolder/app/templates/base/src/core/index.tsx

@@ -19,7 +19,7 @@ import { ApolloProvider } from '@apollo/react-hooks'
 import '@/styles/index.scss'
 <% } else { %>
 import { createGlobalStyle } from 'styled-components'
-  import globalCss from 'raw-loader!@reapit/elements/dist/index.css'
+import globalCss from 'raw-loader!@reapit/elements/dist/index.css'
   const GlobalStyle = createGlobalStyle`
   ${globalCss};
   body {

packages/react-app-scaffolder/app/templates/redux/src/components/pages/authenticated.tsx

@@ -14,7 +14,6 @@ export interface AuthenticatedMappedProps {
 export type AuthenticatedProps = AuthenticatedMappedActions & AuthenticatedMappedProps
 
 export const Authenticated: React.FunctionComponent<AuthenticatedProps> = ({ authenticatedState }) => {
-  console.log(authenticatedState)
   return (
     <ErrorBoundary>
       <FlexContainerBasic hasPadding>

scripts/webpack/webpack-sass-prod/build-element-scss.js → scripts/webpack/build-element-scss/index.js

@@ -9,7 +9,7 @@ const purifyOptions = require(path.resolve(__dirname, '../../../packages/element
  * build css from scss imported from elements
  * then purge it by comparing it against all ts, tsx files in src/elements
  */
-const buildElementScss = async () => {
+exports.buildElementScss = async () => {
   const tempFolderPath = path.resolve(__dirname, './.temp')
   if (!fs.existsSync(tempFolderPath)) {
     fs.mkdirSync(tempFolderPath)
@@ -24,4 +24,4 @@ const buildElementScss = async () => {
   purifyCss(globElementSrc, css, purifyOptions)
 }
 
-module.exports = buildElementScss
+exports.buildCssFilePath = path.resolve(__dirname, './.temp/index.css')

scripts/webpack/webpack-sass-prod/build-configuration.js

@@ -1,7 +1,6 @@
 const webpackBase = require('../webpack.base.prod')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const path = require('path')
-const buildCssFilePath = path.resolve(__dirname, './.temp/index.css')
+const { buildCssFilePath } = require('../build-element-scss')
 
 module.exports = {
   ...{

scripts/webpack/webpack-sass-prod/index.js

@@ -11,7 +11,7 @@
 
 const webpack = require('webpack')
 const buildConfiguration = require('./build-configuration')
-const buildElementScss = require('./build-element-scss')
+const { buildElementScss } = require('../build-element-scss')
 
 // build multiple scss-es into a singlae css file in .temp/index.css
 buildElementScss()

scripts/webpack/webpack-styled-components-prod.js

@@ -0,0 +1,18 @@
+const webpack = require('webpack')
+const buildConfiguration = require('./webpack.base.prod')
+const { buildElementScss } = require('./build-element-scss')
+buildElementScss()
+
+const compiler = webpack(buildConfiguration)
+
+compiler.run((err, stats) => {
+  if (err) {
+    throw err
+  }
+
+  console.log(
+    stats.toString({
+      colors: true,
+    }),
+  )
+})