Merge develop

Author: catarak

.babelrc

@@ -6,6 +6,7 @@
   "env": {
     "production": {
       "plugins": [
+        "babel-plugin-styled-components",
         "transform-react-remove-prop-types",
         "@babel/plugin-transform-react-constant-elements",
         "@babel/plugin-transform-react-inline-elements",
@@ -48,6 +49,7 @@
     },
     "development": {
       "plugins": [
+        "babel-plugin-styled-components",
         "react-hot-loader/babel"
       ]
     }

.env.example

@@ -1,7 +1,8 @@
-API_URL=/api
+API_URL=/editor
 AWS_ACCESS_KEY=<your-aws-access-key>
 AWS_REGION=<your-aws-region>
 AWS_SECRET_KEY=<your-aws-secret-key>
+CORS_ALLOW_LOCALHOST=true
 EMAIL_SENDER=<transactional-email-sender>
 EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
 EXAMPLE_USER_EMAIL=[email protected]
@@ -23,3 +24,6 @@ PORT=8000
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
+UI_ACCESS_TOKEN_ENABLED=false
+UPLOAD_LIMIT=250000000
+MOBILE_ENABLED=true

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": "airbnb",
+	"extends": ["airbnb", "prettier"],
 	"parser": "babel-eslint",
 	"env": {
     "browser": true,
@@ -16,12 +16,12 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
-    "indent": [2, 2, {"SwitchCase": 1}],
+    "indent": 0,
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
-    "quote-props": [1, "consistent-as-needed"],
+    "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
     "no-param-reassign": [2, { "props": false }],
@@ -60,10 +60,13 @@
         },
         "allowChildren": false
       }
+    ],
+    "prettier/prettier": [
+      "error"
     ]
   },
   "plugins": [
-    "react", "jsx-a11y", "import"
+    "react", "jsx-a11y", "import", "prettier"
   ],
   "settings": {
     "import/parser": "babel-eslint",
@@ -77,5 +80,13 @@
     "__SERVER__": true,
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.stories.jsx"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off"
+      }
+    }
+  ]
 }

.github/CONTRIBUTING.md

@@ -15,12 +15,10 @@ Hello! We welcome community contributions to the p5.js Web Editor. Contributing
     - [Issue Search and Tagging](#issue-search-and-tagging)
     - [Beginning Work](#beginning-work)
     - [Contribution Guides](#contribution-guides)
-  - [Writing Commit Messages](#writing-commit-messages)
-  - [Tips](#tips)
 
 ## Code of Conduct
 
-Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/master/.github/CODE_OF_CONDUCT.md).
+Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CODE_OF_CONDUCT.md).
 
 ## How Can I Contribute?
 If you're new to open source, [read about how to contribute to open source](https://opensource.guide/how-to-contribute/).
@@ -33,6 +31,8 @@ Don't know where to begin? Here are some suggestions to get started:
   - Front end: React/Redux, CSS/Sass, CodeMirror
   - Back end: Node, Express, MongoDB, Jest, AWS
   - DevOps: Travis CI, Jest, Docker, Kubernetes, AWS
+  - Documentation
+  - Translations: Application and documentation
 * Use the [p5.js Web Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Open an issue.
 * Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
 * Try getting the project running locally on your computer by following the [installation steps](./../developer_docs/installation.md).
@@ -60,45 +60,9 @@ If you feel like an issue is tagged incorrectly (e.g. it's low priority and you
 
 If you'd like to work on an issue, please comment on it to let the maintainers know, so that they can assign it to you. If someone else has already commented and taken up that issue, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
 
-Then, follow the [installation guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/installation.md) to get the project building and working on your computer. 
+Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
 
 ### Contribution Guides
 
 * [https://guides.github.com/activities/hello-world/](https://guides.github.com/activities/hello-world/)
 * [https://guides.github.com/activities/forking/](https://guides.github.com/activities/forking/)
-
-## Writing Commit Messages
-
-Good commit messages serve at least three important purposes:
-
-* They speed up the reviewing process.
-* They help us write good release notes.
-* They help future maintainers understand your change and the reasons behind it.
-
-Structure your commit message like this:
-
- ```
- Short (50 chars or less) summary of changes ( involving Fixes #Issue-number keyword )
-
- More detailed explanatory text, if necessary. Wrap it to about 72
- characters or so. In some contexts, the first line is treated as the
- subject of an email and the rest of the text as the body. The blank
- line separating the summary from the body is critical (unless you omit
- the body entirely); tools like rebase can get confused if you run the
- two together.
-
- Further paragraphs come after blank lines.
-
-   - Bullet points are okay, too
-
-   - Typically a hyphen or asterisk is used for the bullet, preceded by a
-     single space, with blank lines in between, but conventions vary here
- ```
-
-* Write the summary line and description of what you have done in the imperative mode, that is as if you were commanding someone. Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed".
-* Always leave the second line blank.
-* Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
-
-## Tips
-
-* If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: processing
+custom: https://processingfoundation.org/

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,7 @@
+Fixes #issue-number
+
 I have verified that this pull request:
 
 * [ ] has no linting errors (`npm run lint`)
-* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
-* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`
+* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest `develop` branch. (If I was asked to make more changes, I have made sure to rebase onto `develop` then too)
+* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`

.github/config.yml

@@ -10,8 +10,8 @@ newIssueWelcomeComment: >
 
 # Comment to be posted to on PRs from first time contributors in your repository
 newPRWelcomeComment: >
-  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/master/CONTRIBUTING.md) if you haven't already.
+  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CONTRIBUTING.md) if you haven't already.
 
 # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
 
-# Comment to be posted to on pull requests merged by a first time user
+# Comment to be posted to on pull requests merged by a first time user

.github/workflows/deploy-staging.yml

@@ -0,0 +1,62 @@
+name: Deploy to staging
+on:
+  workflow_run:
+    workflows: ["Test"]
+    branches:
+      - develop
+    types:
+      - completed
+env:
+  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
+  GKE_CLUSTER: p5js-web-editor-cluster
+  GKE_ZONE: us-east1-c
+  DEPLOYMENT_NAME: web-editor-node
+  IMAGE: ${{ secrets.DOCKER_USERNAME }}/p5.js-web-editor-staging
+jobs:
+  push_to_registry:
+    environment: staging
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          pull: true
+          push: true
+          tags: |
+            ${{ env.IMAGE }}:${{ github.sha }}
+            ${{ env.IMAGE }}:latest
+          target: production
+      # Setup gcloud CLI
+      - uses: google-github-actions/[email protected]
+        with:
+          service_account_key: ${{ secrets.GKE_SA_KEY }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+ 
+      # Configure docker to use the gcloud command-line tool as a credential helper
+      - run: |-
+          gcloud --quiet auth configure-docker
+        
+      # Get the GKE credentials so we can deploy to the cluster
+      - uses: google-github-actions/[email protected]
+        with:
+          cluster_name: ${{ env.GKE_CLUSTER }}
+          location: ${{ env.GKE_ZONE }}
+          credentials: ${{ secrets.GKE_SA_KEY }}
+
+      # Deploy the Docker image to the GKE cluster
+      - name: Deploy
+        run: |-
+          kubectl set image deployment/$DEPLOYMENT_NAME web-editor-app=index.docker.io/$IMAGE:$GITHUB_SHA --namespace=staging
+          kubectl get services -o wide

.github/workflows/deploy.yml

@@ -0,0 +1,63 @@
+name: Deploy to production
+on:
+  workflow_run:
+    workflows: ["Test"]
+    branches:
+      - release
+    types:
+      - completed
+env:
+  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
+  GKE_CLUSTER: p5js-web-editor-cluster
+  GKE_ZONE: us-east1-c
+  DEPLOYMENT_NAME: web-editor-node
+  IMAGE: ${{ secrets.DOCKER_USERNAME }}/p5.js-web-editor
+jobs:
+  push_to_registry:
+    environment: production
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          pull: true
+          push: true
+          tags: |
+            ${{ env.IMAGE }}:${{ github.sha }}
+            ${{ env.IMAGE }}:latest
+          target: production
+      # Setup gcloud CLI
+      - uses: google-github-actions/[email protected]
+        with:
+          service_account_key: ${{ secrets.GKE_SA_KEY }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+ 
+      # Configure docker to use the gcloud command-line tool as a credential helper
+      - run: |-
+          gcloud --quiet auth configure-docker
+        
+      # Get the GKE credentials so we can deploy to the cluster
+      - uses: google-github-actions/[email protected]
+        with:
+          cluster_name: ${{ env.GKE_CLUSTER }}
+          location: ${{ env.GKE_ZONE }}
+          credentials: ${{ secrets.GKE_SA_KEY }}
+
+      # Deploy the Docker image to the GKE cluster
+      - name: Deploy
+        run: |-
+          kubectl set image deployment/$DEPLOYMENT_NAME web-editor-app=index.docker.io/$IMAGE:$GITHUB_SHA
+          kubectl get services -o wide
+

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    name: Test and lint code base
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - run: npm install
+    - run: npm run test
+    - run: npm run lint
+
+