chore: move react into client-react

.circleci/config.yml

@@ -24,16 +24,10 @@ jobs:
           command: |
             cd server-phoenix && mix local.rebar --force && mix test
 
-  build:
+  build-react:
     docker:
       # specify the version you desire here
-       - image: cimg/ruby:2.6.9
-       - image: redis
-       - image: cimg/postgres:14.1
-         environment:
-           POSTGRES_USER: postgres
-           POSTGRES_PASSWORD: postgres
-           POSTGRES_DB: helios_test
+       - image: cimg/node:16.14.0
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -43,85 +37,32 @@ jobs:
     working_directory: ~/repo
 
     steps:
-      - run:
-          name: install node/yarn
-          command: |
-            curl -sL https://deb.nodesource.com/setup_16.x | sudo bash && sudo apt-get update -qq && sudo apt-get install -yq build-essential nodejs unzip && sudo npm install -g yarn
-
       - checkout
 
       - restore_cache:
           keys:
-          - gem-cache-{{ checksum "Gemfile.lock" }}
-          # fallback to using the latest cache if no exact match is found
-          - gem-cache-
-
-      - run:
-          name: install gem dependencies
-          command: |
-            bundle install --jobs=4 --retry=3 --path vendor/bundle
-
-      - save_cache:
-          paths:
-            - ./vendor/bundle
-          key: gem-cache-{{ checksum "Gemfile.lock" }}
-
-      - restore_cache:
-          keys:
-          - yarn-cache-{{ checksum "yarn.lock" }}
+          - yarn-cache-{{ checksum "client-react/yarn.lock" }}
           # fallback to using the latest cache if no exact match is found
           - yarn-cache-
 
       - run:
           name: install yarn dependencies
           command: |
-            yarn install
+            cd client-react && yarn install
 
       - save_cache:
           paths:
             - ~/.yarn-cache
-          key: yarn-cache-{{ checksum "yarn.lock" }}
-
-      - run: yarn run prettier:check
-      - run: yarn run lint
-      - run: yarn run test
+          key: yarn-cache-{{ checksum "client-react/yarn.lock" }}
 
-      - run: bundle exec rubocop
-
-      # Database setup
-      - run: bundle exec rake db:create
-      - run: bundle exec rake db:schema:load
-
-      - run:
-          name: run diff on schema.json
-          command: |
-            bundle exec rake graphql:schema:dump
-            git diff --quiet schema.graphql
-
-      # run tests!
-      - run:
-          name: run tests
-          command: |
-            mkdir /tmp/test-results
-            TEST_FILES="$(circleci tests glob 'spec/**/*_spec.rb' | circleci tests split --split-by=timings)"
-            
-            bundle exec rspec --format progress \
-                            --format RspecJunitFormatter \
-                            --out /tmp/test-results/rspec.xml \
-                            --format progress \
-                            $TEST_FILES
-
-      # collect reports
-      - store_test_results:
-          path: /tmp/test-results
-      - store_artifacts:
-          path: /tmp/test-results
-          destination: test-results
+      - run: cd client-react && yarn run prettier:check
+      - run: cd client-react && yarn run lint
+      - run: cd client-react && yarn run test
 
 workflows:
   version: 2
-  build_and_phoenix:
+  build:
     jobs:
       - build-phoenix
-      - build
+      - build-react
 

Procfile.development

@@ -1,2 +1,2 @@
 phoenix: cd ./server-phoenix/ && mix phx.server
-webpack: yarn serve
+webpack: yarn --cwd client-react/ serve

.eslintrc.js → client-react/.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
       'error',
       {
         env: 'apollo',
-        schemaJson: require('./app/javascript/schema.json'),
+        schemaJson: require('./src/schema.json'),
       },
     ],
     'react/jsx-one-expression-per-line': [0],

package.json → client-react/package.json

@@ -109,43 +109,43 @@
     "webpack-sources": "^1.3.0"
   },
   "scripts": {
-    "lint": "./node_modules/.bin/eslint --ext js --ext jsx app/javascript/",
+    "lint": "./node_modules/.bin/eslint --ext js --ext jsx src/",
     "test": "jest",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "relative-to-alias": "jscodeshift --extensions jsx -t ./config/transforms/relative_to_alias_path.js ./ ",
-    "prettier:format": "prettier --write '{app/javascript/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
-    "prettier:check": "prettier --check '{app/javascript/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
+    "prettier:format": "prettier --write '{src/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
+    "prettier:check": "prettier --check '{src/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
     "build": "webpack",
     "serve": "webpack-dev-server"
   },
   "jest": {
     "verbose": true,
     "testURL": "http://localhost/",
     "roots": [
-      "app/javascript"
+      "src"
     ],
     "moduleNameMapper": {
       "\\.(png|jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",
       "react-hls-player": "<rootDir>/__mocks__/emptyMock.js",
       "^@root(.*)$": "<rootDir>/$1",
-      "^@app(.*)$": "<rootDir>/app$1",
-      "^@javascript(.*)$": "<rootDir>/app/javascript$1",
-      "^@lib(.*)$": "<rootDir>/app/javascript/lib$1",
-      "^@components(.*)$": "<rootDir>/app/javascript/components$1",
-      "^@widgets(.*)$": "<rootDir>/app/javascript/components/widgets$1",
-      "^@messages(.*)$": "<rootDir>/app/javascript/components/widgets/messages$1",
-      "^@numbers(.*)$": "<rootDir>/app/javascript/components/widgets/numbers$1",
-      "^@weather(.*)$": "<rootDir>/app/javascript/components/widgets/weather$1",
-      "^@twitter(.*)$": "<rootDir>/app/javascript/components/widgets/twitter$1",
-      "^@hocs(.*)$": "<rootDir>/app/javascript/components/hocs$1",
+      "^@app(.*)$": "<rootDir>/src$1",
+      "^@javascript(.*)$": "<rootDir>/src$1",
+      "^@lib(.*)$": "<rootDir>/src/lib$1",
+      "^@components(.*)$": "<rootDir>/src/components$1",
+      "^@widgets(.*)$": "<rootDir>/src/components/widgets$1",
+      "^@messages(.*)$": "<rootDir>/src/components/widgets/messages$1",
+      "^@numbers(.*)$": "<rootDir>/src/components/widgets/numbers$1",
+      "^@weather(.*)$": "<rootDir>/src/components/widgets/weather$1",
+      "^@twitter(.*)$": "<rootDir>/src/components/widgets/twitter$1",
+      "^@hocs(.*)$": "<rootDir>/src/components/hocs$1",
       "^@assets(.*)$": "<rootDir>/app/assets$1",
       "^@images(.*)$": "<rootDir>/app/assets/images$1",
       "^@icons(.*)$": "<rootDir>/app/assets/images/icons$1"
     },
     "moduleDirectories": [
       "node_modules",
-      "app/javascript"
+      "src"
     ]
   }
 }

app/javascript/packs/application.js → client-react/src/packs/application.js

@@ -11,7 +11,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import App from '../components/app';
 
-import '@app/assets/stylesheets/base.scss';
+import '@assets/stylesheets/base.scss';
 
 document.addEventListener('DOMContentLoaded', () => {
   const container = document.body.appendChild(document.createElement('div'));

webpack.config.js → client-react/webpack.config.js

@@ -6,15 +6,15 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-require('dotenv').config({ path: path.resolve(__dirname, '.env') });
+require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
 
 module.exports = {
   mode: 'development',
   output: {
     filename: 'js/[name]-[contenthash].js',
     chunkFilename: 'js/[name]-[contenthash].chunk.js',
     hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
-    path: path.resolve(__dirname, './server-phoenix/priv/static'),
+    path: path.resolve(__dirname, '../server-phoenix/priv/static'),
     publicPath: '/',
     pathinfo: true,
   },
@@ -38,33 +38,20 @@ module.exports = {
     plugins: [PnpWebpackPlugin],
     alias: {
       '@root': __dirname,
-      '@app': path.resolve(__dirname, 'app'),
-      '@javascript': path.resolve(__dirname, 'app/javascript'),
-      '@lib': path.resolve(__dirname, 'app/javascript/lib'),
-      '@components': path.resolve(__dirname, 'app/javascript/components'),
-      '@widgets': path.resolve(__dirname, 'app/javascript/components/widgets'),
-      '@messages': path.resolve(
-        __dirname,
-        'app/javascript/components/widgets/messages',
-      ),
-      '@numbers': path.resolve(
-        __dirname,
-        'app/javascript/components/widgets/numbers',
-      ),
-      '@weather': path.resolve(
-        __dirname,
-        'app/javascript/components/widgets/weather',
-      ),
-      '@twitter': path.resolve(
-        __dirname,
-        'app/javascript/components/widgets/twitter',
-      ),
-      '@hocs': path.resolve(__dirname, 'app/javascript/components/hocs'),
-      '@assets': path.resolve(__dirname, 'app/assets'),
-      '@images': path.resolve(__dirname, 'app/assets/images'),
-      '@icons': path.resolve(__dirname, 'app/assets/images/icons'),
+      '@javascript': path.resolve(__dirname, 'src'),
+      '@lib': path.resolve(__dirname, 'src/lib'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@widgets': path.resolve(__dirname, 'src/components/widgets'),
+      '@messages': path.resolve(__dirname, 'src/components/widgets/messages'),
+      '@numbers': path.resolve(__dirname, 'src/components/widgets/numbers'),
+      '@weather': path.resolve(__dirname, 'src/components/widgets/weather'),
+      '@twitter': path.resolve(__dirname, 'src/components/widgets/twitter'),
+      '@hocs': path.resolve(__dirname, 'src/components/hocs'),
+      '@assets': path.resolve(__dirname, 'assets'),
+      '@images': path.resolve(__dirname, 'assets/images'),
+      '@icons': path.resolve(__dirname, 'assets/images/icons'),
     },
-    modules: [path.resolve(__dirname, 'app/javascript'), 'node_modules'],
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
   },
   resolveLoader: {
     modules: ['node_modules'],
@@ -88,7 +75,7 @@ module.exports = {
     port: 5000,
     https: false,
     hot: false,
-    contentBase: path.resolve(__dirname, './server-phoenix/priv/static'),
+    contentBase: path.resolve(__dirname, '../server-phoenix/priv/static'),
     inline: true,
     useLocalIp: false,
     public: 'localhost:5000',
@@ -124,7 +111,7 @@ module.exports = {
     ],
   },
   entry: {
-    application: path.resolve(__dirname, 'app/javascript/packs/application.js'),
+    application: path.resolve(__dirname, 'src/packs/application.js'),
   },
   module: {
     strictExportPresence: true,
@@ -144,12 +131,12 @@ module.exports = {
             loader: 'file-loader',
             options: {
               name: function(file) {
-                if (file.includes('app/javascript')) {
+                if (file.includes('src')) {
                   return 'media/[path][name]-[hash].[ext]';
                 }
                 return 'media/[folder]/[name]-[hash:8].[ext]';
               },
-              context: 'app/javascript',
+              context: 'src',
             },
           },
         ],
@@ -325,7 +312,7 @@ module.exports = {
       },
       {
         test: new RegExp('\\.(js|jsx|mjs)?(\\.erb)?$', ''),
-        include: [path.resolve(__dirname, 'app/javascript')],
+        include: [path.resolve(__dirname, 'src')],
         exclude: new RegExp('node_modules', ''),
         use: [
           {