refactor: new project structure

Author: gregberge

.DS_Store

@@ -5,7 +5,7 @@ defaults: &defaults
     - image: circleci/redis
       ports:
         - '6379:6379'
-    - image: postgres:9.6
+    - image: postgres:12
       environment:
         POSTGRES_HOST_AUTH_METHOD: trust
       ports:
@@ -35,6 +35,7 @@ jobs:
           name: Install js dependencies
           command: |
             yarn install --frozen-lockfile
+            yarn build
       - save_cache:
           key: yarn-sha-{{ checksum "yarn.lock" }}
           paths:
@@ -57,7 +58,7 @@ jobs:
           environment:
             NODE_ENV: test
           command: |
-            yarn api:db:reset
+            yarn setup
             yarn test --ci
   test_misc:
     <<: *defaults
@@ -71,14 +72,6 @@ jobs:
           command: |
             sudo apt-get update
             sudo apt-get install postgresql postgresql-contrib
-      - run:
-          name: Can run the seeds
-          environment:
-            NODE_ENV: test
-          command: |
-            yarn api:db:reset
-            yarn knex seed:run
-            yarn api:db:truncate
       - run:
           name: Can run argos
           command: yarn argos

.circleci/config.yml

@@ -1,4 +1,5 @@
-/lib/
-/sandbox/
-/server/static/
+apps/*/lib/
+apps/*/dist/
+package.json
 node_modules/
+/public/

.eslintignore

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "extends": ["smooth", "smooth/project", "smooth/react"],
+  "extends": ["smooth", "smooth/react"],
   "rules": {
     "react/no-unescaped-entities": "off",
     "react/forbid-prop-types": "off",
@@ -13,7 +13,7 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "paths": ["src/review"]
+        "paths": []
       }
     }
   }

.eslintrc.json

@@ -1,7 +1,4 @@
-*.log
-.env
-.eslintcache
-/.volume
-/lib/
-/server/static/
+apps/*/lib/
+apps/*/dist/
 node_modules/
+/public/

.gitignore

@@ -1,5 +1,5 @@
-/lib/
-/sandbox/
-/server/static/
+apps/*/lib/
+apps/*/dist/
 package.json
 node_modules/
+/public/

.prettierignore

@@ -1,4 +1,4 @@
 release: ./scripts/release.sh
-web: TRACE_SERVICE_NAME=web ./src/scripts/heroku-node-settings.sh lib/server/workers/web.js
-buildAndSynchronize: TRACE_SERVICE_NAME=buildAndSynchronize ./src/scripts/heroku-node-settings.sh lib/server/workers/buildAndSynchronize.js
-screenshotDiff: TRACE_SERVICE_NAME=screenshotDiff ./src/scripts/heroku-node-settings.sh lib/server/workers/screenshotDiff.js
+web: ./scripts/heroku-node-settings.sh ./node_modules/.bin/argos-web
+buildAndSynchronize: ./scripts/heroku-node-settings.sh ./node_modules/.bin/argos-build-and-synchronize
+screenshotDiff: ./scripts/heroku-node-settings.sh ./node_modules/.bin/argos-screenshot-diff

Procfile

@@ -1,3 +1,4 @@
-web: nodemon src/server/workers/web.js
-buildAndSynchronize: nodemon src/server/workers/buildAndSynchronize.js
-screenshotDiff: nodemon src/server/workers/screenshotDiff.js
+release: ./scripts/release.sh
+web: nodemon ./node_modules/.bin/argos-web
+buildAndSynchronize: nodemon ./node_modules/.bin/argos-build-and-synchronize
+screenshotDiff: nodemon ./node_modules/.bin/argos-screenshot-diff

Procfile.dev

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "loose": true,
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }]]
+}

apps/app/.babelrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": "off"
+  }
+}

apps/app/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "name": "@argos-ci/app",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "NODE_ENV=production webpack"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@apollo/react-hooks": "^3.1.3",
+    "@argos-ci/config": "2.0.0",
+    "@sentry/browser": "^5.14.2",
+    "@smooth-ui/core-sc": "^11.1.5",
+    "@xstyled/styled-components": "^1.17.0",
+    "apollo-boost": "^0.4.7",
+    "assets-webpack-plugin": "^3.9.10",
+    "core-js": "^3.6.4",
+    "file-loader": "^5.1.0",
+    "graphql-tag": "^2.10.3",
+    "image-webpack-loader": "^6.0.0",
+    "json-loader": "^0.5.7",
+    "lodash": "^4.17.15",
+    "moment": "^2.24.0",
+    "raw-loader": "^4.0.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-helmet": "^5.2.1",
+    "react-icons": "^3.9.0",
+    "react-markdown": "^4.3.1",
+    "react-router-dom": "^5.1.2",
+    "react-tooltip": "^4.1.2",
+    "reakit": "^1.0.0-beta.16",
+    "store": "^2.0.12",
+    "styled-components": "^5.0.1",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}

apps/app/package.json

@@ -2,22 +2,22 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { Normalize } from '@smooth-ui/core-sc'
-import { ScrollToTop, GoogleAnalytics } from 'containers/Router'
-import { AuthInitializer } from 'containers/Auth'
-import { ApolloInitializer } from 'containers/Apollo'
-import { ThemeInitializer } from 'containers/Theme'
-import { UserInitializer } from 'containers/User'
-import { SyncAlertBar } from 'containers/SyncAlertBar'
-import { AppNavbar } from 'containers/AppNavbar'
-import { AppFooter } from 'containers/AppFooter'
-import { Home } from 'pages/Home'
-import { Owner } from 'pages/Owner'
-import { ErrorPage } from 'pages/ErrorPage'
-import { Repository } from 'pages/Repository'
-import { NotFound } from 'pages/NotFound'
-import Privacy from 'pages/Privacy.md'
-import Terms from 'pages/Terms.md'
-import Security from 'pages/Security.md'
+import { ScrollToTop, GoogleAnalytics } from './containers/Router'
+import { AuthInitializer } from './containers/Auth'
+import { ApolloInitializer } from './containers/Apollo'
+import { ThemeInitializer } from './containers/Theme'
+import { UserInitializer } from './containers/User'
+import { SyncAlertBar } from './containers/SyncAlertBar'
+import { AppNavbar } from './containers/AppNavbar'
+import { AppFooter } from './containers/AppFooter'
+import { Home } from './pages/Home'
+import { Owner } from './pages/Owner'
+import { ErrorPage } from './pages/ErrorPage'
+import { Repository } from './pages/Repository'
+import { NotFound } from './pages/NotFound'
+import Privacy from './pages/Privacy.md'
+import Terms from './pages/Terms.md'
+import Security from './pages/Security.md'
 
 import {
   GlobalStyle,

src/review/App.js apps/app/src/App.js

@@ -1,5 +1,3 @@
-/* eslint-disable max-len */
-
 import React from 'react'
 
 export function Beast(props) {

src/review/assets/build.png apps/app/src/assets/build.png

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '@xstyled/styled-components'
 import { Text, Box } from '@smooth-ui/core-sc'
-import { LayoutBody } from 'components/LayoutBody'
+import { LayoutBody } from './LayoutBody'
 
 const HeaderContainer = styled.box`
   min-height: 300;

src/review/assets/ci.png apps/app/src/assets/ci.png

@@ -1,20 +1,23 @@
 export * from './AlertBar'
 export * from './Avatar'
+export * from './Beast'
 export * from './BrandLogo'
-export * from './Catch'
 export * from './Card'
+export * from './Catch'
 export * from './Code'
 export * from './Container'
 export * from './Footer'
 export * from './GlobalStyle'
 export * from './Header'
 export * from './Layout'
+export * from './LayoutBody'
 export * from './Link'
 export * from './Loader'
 export * from './Markdown'
 export * from './Menu'
 export * from './Navbar'
 export * from './ProductHeader'
+export * from './ScrollView'
 export * from './SmoothCodeLogo'
 export * from './Tab'
 export * from './Text'

src/review/assets/perfect.png apps/app/src/assets/perfect.png

@@ -21,5 +21,5 @@ function walk(obj, path, initializeMissing = false) {
 }
 
 export default {
-  get: key => (global.clientData ? walk(global.clientData.config, key) : null),
+  get: key => (window.clientData ? walk(window.clientData.config, key) : null),
 }

src/review/components/AlertBar.js apps/app/src/components/AlertBar.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { useColorMode } from '@xstyled/styled-components'
 import {
   Footer,
   FooterBody,
   FooterPrimary,
   FooterSecondary,
   FooterLink,
   SmoothCodeLogo,
-} from 'components'
-import { useColorMode } from '@xstyled/styled-components'
+} from '../components'
 
 export function AppFooter() {
   const [colorMode] = useColorMode()

src/review/components/Avatar.js apps/app/src/components/Avatar.js

@@ -9,16 +9,16 @@ import {
   useMenuState,
 } from '@smooth-ui/core-sc'
 import { useColorMode } from '@xstyled/styled-components'
-import configBrowser from 'configBrowser'
 import { FaGithub } from 'react-icons/fa'
+import config from '../config'
 import {
   NavbarSecondary,
   NavbarBrandLink,
   Navbar,
   NavbarBrand,
   BrandLogo,
-} from 'components'
-import { OwnerAvatar } from 'containers/OwnerAvatar'
+} from '../components'
+import { OwnerAvatar } from './OwnerAvatar'
 import { useUser } from './User'
 
 // eslint-disable-next-line react/forbid-foreign-prop-types
@@ -51,7 +51,7 @@ function UserMenu({ user }) {
         <MenuItem
           {...menu}
           forwardedAs="a"
-          href={configBrowser.get('github.applicationUrl')}
+          href={config.get('github.applicationUrl')}
           target="_blank"
           rel="noopener noreferrer"
         >

src/review/components/Beast.js apps/app/src/components/Beast.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box } from '@xstyled/styled-components'
 import { FaTimes, FaCheck, FaDotCircle } from 'react-icons/fa'
-import { getStatusColor } from 'modules/build'
+import { getStatusColor } from '../modules/build'
 
 export function StatusIcon({ status, ...props }) {
   const buildColor = getStatusColor(status)

src/review/components/BrandLogo.js apps/app/src/components/BrandLogo.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Box } from '@smooth-ui/core-sc'
-import { AlertBar, AlertBarBody, Loader } from 'components'
-import { isUserSyncing } from 'modules/user'
+import { AlertBar, AlertBarBody, Loader } from '../components'
+import { isUserSyncing } from '../modules/user'
 import { useUser, useRefetchUser } from './User'
 
 const REFETCH_DELAY = 1000

src/review/components/Card.js apps/app/src/components/Card.js

@@ -2,14 +2,14 @@ import 'core-js'
 import React from 'react'
 import { render } from 'react-dom'
 import * as Sentry from '@sentry/browser'
-import configBrowser from 'configBrowser'
+import config from './config'
 import { App } from './App'
 
 if (process.env.NODE_ENV === 'production') {
   Sentry.init({
-    dsn: configBrowser.get('sentry.clientDsn'),
-    environment: configBrowser.get('sentry.environment'),
-    release: configBrowser.get('releaseVersion'),
+    dsn: config.get('sentry.clientDsn'),
+    environment: config.get('sentry.environment'),
+    release: config.get('releaseVersion'),
   })
 }
 

src/review/components/Catch.js apps/app/src/components/Catch.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
-import { Container, FadeLink } from 'components'
+import { Container, FadeLink } from '../components'
 
 export function Documentation() {
   return (

src/review/components/Code.js apps/app/src/components/Code.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
-import { Container, FadeLink } from 'components'
+import { Container, FadeLink } from '../components'
 
 export function ErrorPage() {
   return (

src/review/components/Container.js apps/app/src/components/Container.js

@@ -9,7 +9,7 @@ import {
   CardBody,
   CardText,
   FadeLink,
-} from 'components'
+} from '../components'
 
 export function NotFound() {
   return (

src/review/components/Footer.js apps/app/src/components/Footer.js

@@ -2,11 +2,11 @@ import React from 'react'
 import gql from 'graphql-tag'
 import { Link } from 'react-router-dom'
 import styled, { Box, th } from '@xstyled/styled-components'
-import { Query } from 'containers/Apollo'
 import Tooltip from 'react-tooltip'
 import { GoRepo } from 'react-icons/go'
-import { StatusIcon } from 'containers/StatusIcon'
 import moment from 'moment'
+import { Query } from '../../containers/Apollo'
+import { StatusIcon } from '../../containers/StatusIcon'
 import {
   Container,
   Card,
@@ -15,8 +15,8 @@ import {
   CardBody,
   FadeLink,
   Text,
-} from 'components'
-import { getStatusColor } from 'modules/build'
+} from '../../components'
+import { getStatusColor } from '../../modules/build'
 import { useOwner } from './OwnerContext'
 
 const Stat = styled.div`