feat: #228 graphql version react scaffold

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

@@ -10,7 +10,6 @@ const yosay = require('yosay')
 module.exports = class extends Generator {
   _installAndExport() {
     return new Promise(async (resolve, reject) => {
-
       this.log(yosay('Installing dependencies... this may take a minute!'))
 
       await exec(`npx prettier --write ./package.json`)
@@ -114,7 +113,7 @@ module.exports = class extends Generator {
         type: 'list',
         name: 'stateManagementStyle',
         message: 'How do you want to manage state?',
-        choices: ['Redux', 'React Hooks & Context'],
+        choices: ['Redux', 'React Hooks & Context', 'Apollo GraphQL'],
       },
     ])
 
@@ -126,6 +125,10 @@ module.exports = class extends Generator {
     if (stateManagementStyle === 'React Hooks & Context') {
       this.projectPath = './hooks'
     }
+
+    if (stateManagementStyle === 'Apollo GraphQL') {
+      this.projectPath = './graphql'
+    }
     /**
      * Destination path
      * isFoundations ->./package/{appName}

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

@@ -2,7 +2,9 @@
   "appEnv": "local",
   "sentryDns": "",
   "connectClientId": "<%= clientId %>",
+  "connectUserPoolId": "eu-west-2_hbt0B7yys",
   "googleAnalyticsKey": "",
   "connectOAuthUrl": "https://dev.connect.reapit.cloud",
-  "platformApiUrl": "https://dev.platform.reapit.cloud"
-}
+  "platformApiUrl": "https://dev.platform.reapit.cloud",
+  "graphqlUri": "https://b97ovghsoa.execute-api.eu-west-2.amazonaws.com/dev/graphql"
+}

packages/react-app-scaffolder/app/templates/graphql/README.md

@@ -0,0 +1,5 @@
+# app-name
+
+app-name an app built for Reapit Marketplace.
+
+Initial scaffold using the steps from [here](https://foundations-documentation.reapit.cloud/developer-portal), using [Reapit React App Scaffolder](https://www.npmjs.com/package/@reapit/generator-react-app-scaffolder)

packages/react-app-scaffolder/app/templates/graphql/config.example.json

@@ -0,0 +1,10 @@
+{
+  "appEnv": "local",
+  "sentryDns": "",
+  "googleAnalyticsKey": "",
+  "connectClientId": "",
+  "connectUserPoolId": "eu-west-2_hbt0B7yys",
+  "connectOAuthUrl": "https://dev.connect.reapit.cloud",
+  "platformApiUrl": "https://dev.platform.reapit.cloud",
+  "graphqlUri": "https://b97ovghsoa.execute-api.eu-west-2.amazonaws.com/dev/graphql"
+}

packages/react-app-scaffolder/app/templates/graphql/jest.config.js

@@ -0,0 +1,26 @@
+const { pathsToModuleNameMapper } = require('ts-jest/utils')
+const baseConfig = require('../../scripts/jest/jest.config')
+const { compilerOptions } = require('./tsconfig')
+
+module.exports = {
+  ...baseConfig,
+  transform: {
+    '\\.(gql|graphql)$': 'jest-transform-graphql',
+  },
+  testPathIgnorePatterns: ['<rootDir>/src/tests/'],
+  moduleNameMapper: {
+    ...baseConfig.moduleNameMapper,
+    ...pathsToModuleNameMapper(compilerOptions.paths, {
+      prefix: '<rootDir>/',
+    }),
+  },
+  coveragePathIgnorePatterns: ['<rootDir>/src/services', '<rootDir>/src/tests'],
+  coverageThreshold: {
+    global: {
+      branches: 63,
+      functions: 70,
+      lines: 88,
+      statements: 87,
+    },
+  },
+}

packages/react-app-scaffolder/app/templates/graphql/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "app-name",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Description",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:reapit/foundations.git"
+  },
+  "license": "MIT",
+  "author": "Author",
+  "main": "./src/index.ts",
+  "scripts": {
+    "build:prod": "rimraf public/dist && webpack --config ../../scripts/webpack/webpack.config.prod.js",
+    "fetch-config": "yarn config-manager fetchConfig app-name",
+    "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx src\"",
+    "lint:fix": "eslint --cache --ext=ts,tsx src --fix",
+    "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.config.dev.js",
+    "start:prod": "serve public/dist -s -l 8080",
+    "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit --detectOpenHandles --runInBand",
+    "test:dev": "cross-env TZ=UTC jest --watch --verbose",
+    "test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges"
+  },
+  "dependencies": {
+    "@reapit/foundations-ts-definitions": "2020-02-13",
+    "@reapit/elements": "^0.5.60"
+  },
+  "devDependencies": {}
+}

packages/react-app-scaffolder/app/templates/graphql/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <base href="/" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <title>Foundations App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

packages/react-app-scaffolder/app/templates/graphql/src/components/hocs/__tests__/__snapshots__/error-boundary.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorBoundary should match a snapshot when has an error 1`] = `
+<p>
+  Something went wrong here, try refreshing your page.
+</p>
+`;
+
+exports[`ErrorBoundary should match a snapshot when no error 1`] = `<Component />`;

packages/react-app-scaffolder/app/templates/graphql/src/components/hocs/__tests__/error-boundary.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { ErrorBoundary } from '../error-boundary'
+
+const Component: React.FC = () => <div>I am a component!</div>
+Component.displayName = 'Component'
+
+const props = {
+  children: Component,
+}
+
+describe('ErrorBoundary', () => {
+  it('should match a snapshot when no error', () => {
+    expect(shallow(<ErrorBoundary {...props} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot when has an error', () => {
+    const component = shallow(<ErrorBoundary {...props} />)
+    component.setState({
+      hasFailed: true,
+    })
+    expect(component).toMatchSnapshot()
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+})

packages/react-app-scaffolder/app/templates/graphql/src/components/hocs/error-boundary.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+export interface ErrorState {
+  hasFailed: boolean
+}
+
+export type ErrorProps = {
+  children?: React.ReactNode
+}
+
+export class ErrorBoundary extends React.Component<ErrorProps, ErrorState> {
+  constructor(props: ErrorProps) {
+    super(props)
+    this.state = {
+      hasFailed: false,
+    }
+  }
+
+  static getDerivedStateFromError() {
+    return {
+      hasFailed: true,
+    }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('ERROR BOUNDARY CAUGHT', error.message, info)
+  }
+
+  render() {
+    if (this.state.hasFailed) {
+      return <p>Something went wrong here, try refreshing your page.</p>
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

packages/react-app-scaffolder/app/templates/graphql/src/components/pages/__styles__/styles.ts

@@ -0,0 +1,69 @@
+import { css } from 'linaria'
+
+export const container = css`
+  min-width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: row;
+  background-color: #fff;
+
+  @media screen and (max-width: 900px) {
+    flex-direction: column-reverse;
+  }
+`
+
+export const wrapper = css`
+  background-color: #fff;
+  width: 33.33%;
+  padding: 1rem;
+  pointer-events: auto;
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  h1,
+  p,
+  img {
+    text-align: center;
+  }
+
+  div > img {
+    margin: 0 auto;
+    max-width: 200px;
+    display: block;
+  }
+
+  button {
+    margin: 0 auto;
+    max-width: 400px;
+  }
+
+  @media screen and (max-width: 900px) {
+    width: 100%;
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding: 0 3rem;
+  }
+`
+
+export const image = css`
+  background-color: #fff;
+  width: 66.66%;
+  height: 100vh;
+  font-size: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media screen and (max-width: 900px) {
+    width: 100%;
+    height: 300px;
+  }
+`