Update to version 4.0.0

Styled-components and react are now a reality of project seed.

.circleci/config.yml

@@ -1,65 +1,100 @@
 # https://github.com/developmentseed/how/issues/149
-# ssh-keygen -m pem -t rsa -b 4096 -C ORG/REPO -f deploy_key
-version: 2
-jobs:
-  build:
-    docker:
-      - image: node:8
+# ssh-keygen -m pem -t rsa -b 4096 -C developmentseed/project-seed -f deploy_key
 
-    working_directory: ~/repo
+# YAML anchors for base definitions
+base_def: &base_def
+  docker:
+    - image: node:10
+  working_directory: ~/repo
+  environment:
+    - DEVELOPMENT_BRANCH: develop
+    - PRODUCTION_BRANCH: master
 
-    environment:
-      - STAGING_BRANCH: develop
-      - PRODUCTION_BRANCH: master
-      - GH_REF: [email protected]:developmentseed/project-seed.git
-      - GH_NAME: "Development Seed"
-      - GH_EMAIL: "[email protected]"
+restore_cache_def: &restore_cache_def
+  # Download and cache dependencies
+  keys:
+  - v1-dependencies-{{ checksum "package.json" }}
+  - v1-dependencies-  # fallback if checksum fails
 
+##
+## START Circle CI configuration
+##
+
+version: 2.1
+jobs:
+  prepare:
+    <<: *base_def
     steps:
       - checkout
-
-      # Download and cache dependencies
       - restore_cache:
-          keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
-
+          <<: *restore_cache_def
       - run: yarn install
-
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
-
+  lint:
+    <<: *base_def
+    steps:
+      - checkout
+      - restore_cache:
+          <<: *restore_cache_def
+      - run: yarn lint
+      - run: yarn lint:css
+  test:
+    <<: *base_def
+    steps:
+      - checkout
+      - restore_cache:
+          <<: *restore_cache_def
       - run: yarn test
-
-      - add_ssh_keys:
-          fingerprints:
-            - ""
-
+  build:
+    <<: *base_def
+    steps:
+      - checkout
+      - restore_cache:
+          <<: *restore_cache_def
+      - run: yarn build
+      - persist_to_workspace:
+          root: ~/repo
+          paths:
+              - dist/*
+  deploy-surge:
+    <<: *base_def
+    steps:
+      - checkout
+      - restore_cache:
+          <<: *restore_cache_def
+      - attach_workspace:
+          at: /workspace
       - run:
-          name: Building site
+          name: Deploy to surge
           command: |
-            if [ "${CIRCLE_BRANCH}" == "${PRODUCTION_BRANCH}" ]; then
-              yarn build
-            else
-              echo "Skip building site"
-            fi
+            cp /workspace/dist/index.html /workspace/dist/200.html
+            # Enable to use surge deployment
+            # CIRCLE will need the surge login variables:
+            # SURGE_LOGIN & SURGE_TOKEN
+            #./node_modules/surge/lib/cli.js --project /workspace/dist --domain <the domain>.surge.sh
 
-      - run:
-          name: Deploy to GH Pages
-          command: |
-            if [ "${CIRCLE_BRANCH}" == "${PRODUCTION_BRANCH}" ]; then
-              cd dist
-              git init
-              git config user.name "$GH_NAME"
-              git config user.email "$GH_EMAIL"
-              git add .
-              git commit -m "CI deploy [skip ci]"
-              git remote add origin $GH_REF
-              git push origin --force --quiet HEAD:gh-pages
-              rm -rf .git
-            else
-              echo "Skip deploying to Github"
-            fi
+workflows:
+  version: 2
+  main:
+    jobs:
+      - prepare
+      - lint:
+          requires:
+            - prepare
+      - test:
+          requires:
+            - prepare
+      - build:
+          requires:
+            - prepare
+      - deploy-surge:
+          requires:
+            - lint
+            - test
+            - build
+          filters:
+            branches:
+              only: master

.eslintrc

@@ -1,30 +1,39 @@
 {
-  "extends": ["standard", "plugin:react/recommended"],
+  "parser": "babel-eslint", // Specifies the ESLint parser
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "env": {
-    "es6": true,
-    "browser": true
+    "browser": true,
+    "node": true,
+    "es6": true
   },
-  "plugins": ["react"],
+  "plugins": ["react", "react-hooks", "inclusive-language"],
   "parserOptions": {
-    "ecmaVersion": 2018,
     "ecmaFeatures": {
       "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
+    },
+    "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module" // Allows for the use of imports
   },
   "rules": {
+    "prettier/prettier": ["error", {"semi": true, "singleQuote": true, "jsxSingleQuote": true, "parser": "flow"}],
+    "inclusive-language/use-inclusive-words": "error",
     "semi": [2, "always"],
     "jsx-quotes": [2, "prefer-single"],
     "no-console": 2,
     "no-extra-semi": 2,
     "semi-spacing": [2, { "before": false, "after": true }],
+    "no-dupe-else-if": 0,
+    "no-setter-return": 0,
     "prefer-promise-reject-errors": 0,
-
-    // Additional rules besides plugin:react/recommended
     "react/button-has-type": 2,
     "react/default-props-match-prop-types": 2,
     "react/jsx-closing-bracket-location": 2,
@@ -39,18 +48,16 @@
     "react/jsx-props-no-multi-spaces": 2,
     "react/jsx-tag-spacing": [2, { "beforeClosing": "never" }],
     "react/jsx-wrap-multilines": 2,
-    "react/no-access-state-in-setstate": 2,
     "react/no-array-index-key": 2,
-    "react/no-redundant-should-component-update": 2,
-    "react/no-this-in-sfc": 2,
     "react/no-typos": 2,
     "react/no-unsafe": 2,
     "react/no-unused-prop-types": 2,
     "react/no-unused-state": 2,
-    "react/no-will-update-set-state": 2,
     "react/self-closing-comp": 2,
     "react/sort-comp": 2,
     "react/style-prop-object": 2,
-    "react/void-dom-elements-no-children": 2
+    "react/void-dom-elements-no-children": 2,
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
   }
 }

.gitignore

@@ -38,7 +38,7 @@
 ################################################
 
 app/assets/scripts/config/local.js
-
+app/assets/scripts/styles/collecticons/catalog.json
 
 ################################################
 # Dependencies

.nvmrc

@@ -1 +1 @@
-12
+14

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 80
+}

.stylelintrc.json

@@ -1,5 +1,8 @@
 {
   "extends": [
     "stylelint-config-recommended"
-  ]
+  ],
+  "rules": {
+    "font-family-no-missing-generic-family-keyword": null
+  }
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Development Seed
+Copyright (c) 2020 Development Seed
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,6 +1,9 @@
 # project-seed
 
-A basic starting point for web projects
+A basic starting point for web projects that use [styled-components](https://www.styled-components.com/).
+
+Since style components need react, it is already included.  
+It also includes collecticons. See the section below for more info.
 
 > **NOTE:** We've been using [styled-components](https://www.styled-components.com/) more and more in projects. Checkout [project-seed-styled](https://github.com/developmentseed/project-seed-styled) for a starter with styled-components.
 
@@ -19,18 +22,17 @@ It's better to do this straight away so no traces of project-seed are ever pushe
 The values that are not immediately know should be left blank and filled ASAP.
 
 ## Gulp for building
-The gulpfile is based on the [gulp-webapp](https://github.com/yeoman/generator-gulp-webapp) yeoman generator. The build system currently supports:
+The build system currently supports:
 
 - Image optimization
-- Sass compilation
 - Watchify for JS bundling
 - Minification/uglification where appropriate
 - Serving and live reloading of pages
 
 There are two commands, both run via [`yarn`](https://yarnpkg.com/en/).
 
 - `yarn build` - clean & build everything and put it into dist folder
-- `yarn serve` - serve the pages and utilize live reload on changes to styles, fonts, images, scripts and HTML.
+- `yarn serve` - serve the pages and utilize live reload on changes to fonts, images, scripts and HTML.
 
 
 ## Assets Structure
@@ -41,8 +43,8 @@ app/assets/
 +- scripts/: The user scripts
 |  |
 |  +- config/: configuration files (see configuration section)
-|
-+- styles/: The sass styles
+|  |
+|  +- styles/: the styled components
 |
 +- vendor/: Any third-party script that can't be required()
 |
@@ -54,6 +56,34 @@ app/assets/
 |
 ```
 
+## Collecticons
+Collecticons comes bundles with `project-seed`. SVG icons go inside `app/assets/icons/collecticons` and they're compiled into a webfont.  
+
+To use them with styled components:
+```js
+import collecticon from './styles/collecticons'; // Import the font from app/assets/scripts/styles/collecticons/index
+
+// The icon name will be the icon's file name
+const CloseBtn = styled.button`
+  &::before {
+    ${collecticon('xmark--small')}
+  }
+`
+```
+
+#### Remove collecticons
+If you don't need collecticons, it is easy to remove:  
+1) From `app/assets/scripts/styles/global.js` remove the inclusion of `collecticonsFont`  
+
+2)  
+```
+rm -rf app/assets/icons/collecticons
+rm -rf app/assets/scripts/styles/collecticons
+yarn remove collecticons-processor
+```
+
+3) You also need to manually remove the build task from `gulpfile.js`
+
 ### Configurations and environment variables
 
 At times, it may be necessary to include options/variables specific to `production`, `staging` or `local` in the code. To handle this, there is a master config.js file. This file should not be modified.  Instead, modify one of:
@@ -78,11 +108,10 @@ The script build, which uses `browserify`, outputs two js files: `bundle.js` and
    add ...`.
 
 ## Circle CI for testing and deployment
-The `.circleci/config.yml` file enables the usage of [Circle CI](http://circleci.com/) as a test and deployment system. In this particular case, Travis will be looking for any changes to the repo and when a change is made to the `master` branch, Travis will build the project and deploy it to the `gh-pages` branch.
-
+The `.circleci/config.yml` file enables the usage of [Circle CI](http://circleci.com/) as a test and deployment system. In this particular case, circle uses workflows with the linting, test, a build phases running simultaneously. When a commit is made to master the deploy phase will also run, given that the previous succeed.
 ## Linting
 
-Our [ESLint rules](.eslintrc) are based on `standard` rules, with semicolons enabled. To check  linting errors run:
+Our [ESLint rules](.eslintrc) are based on `standard` rules, with some custom options. To check linting errors run:
 
     yarn lint
 

_README.md

@@ -9,7 +9,7 @@ The steps below will walk you through setting up your own instance of the projec
 ### Install Project Dependencies
 To set up the development environment for this website, you'll need to install the following on your system:
 
-- [Node](http://nodejs.org/) v10 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
+- [Node](http://nodejs.org/) v14 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
 - [Yarn](https://yarnpkg.com/) Package manager
 
 ### Install Application Dependencies
@@ -54,7 +54,7 @@ module.exports = {
 ```
 yarn serve
 ```
-Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:3000/`
+Compiles the javascript and launches the server making the site available at `http://localhost:9000/`
 The system will watch files and execute tasks whenever one of them changes.
 The site will automatically refresh since it is bundled with livereload.
 

app/assets/scripts/config.js

@@ -22,13 +22,13 @@ import defaultsDeep from 'lodash.defaultsdeep';
 var configurations = require('./config/*.js', { mode: 'hash' });
 var config = configurations.production || {};
 
-if (process.env.DS_ENV === 'staging') {
+if (process.env.NODE_ENV === 'staging') {
   config = defaultsDeep(configurations.staging, config);
 }
-if (process.env.DS_ENV !== 'staging' && process.env.DS_ENV !== 'production') {
+if (process.env.NODE_ENV === 'development') {
   config = defaultsDeep(configurations.local || {}, config);
 }
 
 // The require doesn't play super well with es6 imports. It creates an internal
 // 'default' property. Export that.
-module.exports = config.default;
+export default config.default;