Configures CircleCI with the monorepo structure

.circleci/config.yml

@@ -3,25 +3,23 @@ version: 2
 aliases:
   - &workspace
     at: ~/
-  - &yarn_cache
+  - &yarn-cache
     keys:
-      - v1-yarn-packages-{{ checksum "yarn.lock" }}
-      - v1-yarn-packages-
-  - &persist_build
+      - v2-yarn-packages-{{ checksum "yarn.lock" }}
+      - v2-yarn-packages-
+  - &persist-build
     root: ~/
     paths:
-      - release/cjs
-      - release/esm
-      - release/umd
+      - release/packages
 
-node_env: &node_env
+node-env: &node-env
   working_directory: ~/release
   docker:
     - image: circleci/node:lts
       environment:
         TERM: xterm
 
-e2e_env: &e2e_env
+e2e-env: &e2e-env
   working_directory: ~/release
   docker:
     - image: cypress/browsers:chrome67
@@ -30,10 +28,10 @@ e2e_env: &e2e_env
 
 jobs:
   bootstrap:
-    <<: *node_env
+    <<: *node-env
     steps:
       - checkout
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
       - run:
           name: Checking environment
           command: |
@@ -42,9 +40,9 @@ jobs:
             yarn --version
       - run:
           name: Installing dependencies
-          command: yarn install --frozen-lockfile
+          command: yarn --frozen-lockfile
       - save_cache:
-          key: v1-yarn-packages-{{ checksum "yarn.lock" }}
+          key: v2-yarn-packages-{{ checksum "yarn.lock" }}
           paths:
             - .cache
       - persist_to_workspace:
@@ -53,95 +51,159 @@ jobs:
             - .cache
             - release
 
-  build_cjs:
-    <<: *node_env
+  lerna-bootstrap:
+    <<: *node-env
+    steps:
+      - checkout
+      - attach_workspace: *workspace
+      - restore_cache: *yarn-cache
+      - run:
+          name: Bootstrapping the monorepo
+          command: node_modules/.bin/lerna bootstrap
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - .cache
+            - release
+
+  ##
+  # Core
+  ##
+  core-build:
+    <<: *node-env
+    steps:
+      - attach_workspace: *workspace
+      - restore_cache: *yarn-cache
+      - run:
+          name: Building @atomic-layout/core
+          command: yarn build
+          working_directory: packages/atomic-layout-core
+      - persist_to_workspace: *persist-build
+
+  core-test-unit:
+    <<: *node-env
+    steps:
+      - attach_workspace: *workspace
+      - restore_cache: *yarn-cache
+      - run:
+          name: Running unit tests
+          command: yarn test
+          working_directory: packages/atomic-layout-core
+
+  ##
+  # styled-components
+  ##
+  styled-build-cjs:
+    <<: *node-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
       - run:
           name: Building CJS module
           command: yarn build:cjs
+          working_directory: packages/atomic-layout
       - run:
-          name: Checking bundle size
+          name: Checking CJS bundle size
           command: yarn bundlesize
-      - persist_to_workspace: *persist_build
+          working_directory: packages/atomic-layout
+      - persist_to_workspace: *persist-build
 
-  build_umd:
-    <<: *node_env
+  styled-build-umd:
+    <<: *node-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
       - run:
           name: Building UMD module
           command: yarn build:umd
-      - persist_to_workspace: *persist_build
+          working_directory: packages/atomic-layout
+      - persist_to_workspace: *persist-build
 
-  build_esm:
-    <<: *node_env
+  styled-build-esm:
+    <<: *node-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
       - run:
           name: Building ESM module
           command: yarn build:esm
-      - persist_to_workspace: *persist_build
+          working_directory: packages/atomic-layout
+      - persist_to_workspace: *persist-build
 
-  test_unit:
-    <<: *node_env
+  styled-test-unit:
+    <<: *node-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
       - run:
-          name: Unit tests
-          command: yarn test:unit --coverage --coverageReporters=text-lcov | node_modules/.bin/coveralls
+          name: Running unit tests
+          command: yarn test:unit
+          working_directory: packages/atomic-layout
 
-  test_e2e_cjs:
-    <<: *e2e_env
+  styled-test-e2e-cjs:
+    <<: *e2e-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
+      - run:
+          name: DEBUG Check that CJS build exists
+          command: ls -R packages/atomic-layout/lib
       - run:
           name: Building Storybook (CJS)
           command: yarn build:storybook
+          working_directory: packages/atomic-layout
       - run:
           name: Integration tests
           command: yarn test:e2e
+          working_directory: packages/atomic-layout
+      - run:
+          name: Creating test results directory
+          command: mkdir test-results
+          working_directory: packages/atomic-layout
       - store_test_results:
-          path: test-results
+          path: packages/atomic-layout/test-results
       - store_artifacts:
-          path: cypress/videos
-      - store_artifacts:
-          path: cypress/screenshots
+          path: packages/atomic-layout/cypress/screenshots
 
-  test_e2e_umd:
-    <<: *e2e_env
+  styled-test-e2e-umd:
+    <<: *e2e-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
+      - run:
+          name: DEBUG Check that CJS build exists
+          command: ls -R packages/atomic-layout/lib
       - run:
           name: Building Storybook (UMD)
           command: yarn build:storybook:umd
+          working_directory: packages/atomic-layout
       - run:
           name: Integration tests
           command: yarn test:e2e
+          working_directory: packages/atomic-layout
       - store_test_results:
           path: test-results
       - store_artifacts:
           path: cypress/videos
       - store_artifacts:
           path: cypress/screenshots
 
-  test_e2e_esm:
-    <<: *e2e_env
+  styled-test-e2e-esm:
+    <<: *e2e-env
     steps:
       - attach_workspace: *workspace
-      - restore_cache: *yarn_cache
+      - restore_cache: *yarn-cache
+      - run:
+          name: DEBUG Check that CJS build exists
+          command: ls -R packages/atomic-layout/lib
       - run:
           name: Building Storybook (ESM)
           command: yarn build:storybook:esm
+          working_directory: packages/atomic-layout
       - run:
           name: Integration tests
           command: yarn test:e2e
+          working_directory: packages/atomic-layout
       - store_test_results:
           path: test-results
       - store_artifacts:
@@ -155,27 +217,48 @@ workflows:
     jobs:
       - bootstrap
 
-      - test_unit:
+      # @atomic-layout/core
+      - core-build:
+          requires:
+            - bootstrap
+      - core-test-unit:
+          requires:
+            - bootstrap
+
+      - lerna-bootstrap:
+          requires:
+            - bootstrap
+            - core-build
+
+      # styled-components
+      - styled-test-unit:
           requires:
             - bootstrap
+            - lerna-bootstrap
 
-      - build_cjs:
+      - styled-build-cjs:
           requires:
             - bootstrap
-      - test_e2e_cjs:
+            - lerna-bootstrap
+      - styled-test-e2e-cjs:
           requires:
-            - build_cjs
+            - styled-build-cjs
+            - lerna-bootstrap
 
-      - build_umd:
+      - styled-build-umd:
           requires:
             - bootstrap
-      - test_e2e_umd:
+            - lerna-bootstrap
+      - styled-test-e2e-umd:
           requires:
-            - build_umd
+            - styled-build-umd
+            - lerna-bootstrap
 
-      - build_esm:
+      - styled-build-esm:
           requires:
             - bootstrap
-      - test_e2e_esm:
+            - lerna-bootstrap
+      - styled-test-e2e-esm:
           requires:
-            - build_esm
+            - styled-build-esm
+            - lerna-bootstrap

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "lint": "tslint -c ./tslint.json 'src/**/*.{ts,tsx}'",
+    "clean": "lerna exec yarn clean",
     "build": "lerna exec yarn build",
     "test": "lerna exec yarn test",
     "bundlesize": "node_modules/.bin/bundlesize",
@@ -29,7 +30,6 @@
     ]
   },
   "devDependencies": {
-    "coveralls": "3.0.9",
     "cross-env": "5.2.0",
     "husky": "3.1.0",
     "jest": "24.9.0",

packages/atomic-layout-core/package.json

@@ -8,7 +8,7 @@
   "typings": "lib/index.d.ts",
   "scripts": {
     "start": "rollup -cw",
-    "test": "jest",
+    "test": "jest --runInBand",
     "clean": "rimraf lib",
     "build:types": "ttsc --skipLibCheck",
     "build": "cross-env NODE_ENV=production rollup -c"

packages/atomic-layout/cypress/plugins/index.js

@@ -1,5 +1,4 @@
 const fs = require('fs')
-const path = require('path')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const babelConfig = require('../../babel.config')
 
@@ -47,5 +46,12 @@ module.exports = (on, config) => {
     }),
   )
 
+  on('before:browser:launch', (browser = {}, args) => {
+    if (['chrome', 'chromium', 'canary'].includes(browser.name)) {
+      args.push('--auto-open-devtools-for-tabs')
+      return args
+    }
+  })
+
   return getCypressConfig(config.env.envName)
 }

packages/atomic-layout/package.json

@@ -21,12 +21,19 @@
     "build:storybook": "cross-env TARGET=cjs build-storybook",
     "build:storybook:umd": "cross-env TARGET=umd build-storybook",
     "build:storybook:esm": "cross-env TARGET=esm build-storybook",
+    "bundlesize": "bundlesize",
     "cypress": "cypress open --env envName=dev",
     "cypress:cli": "cypress run --spec ./examples/all.test.js --browser chrome --env envName=ci",
     "test": "yarn test:unit && yarn test:e2e",
     "test:unit": "cross-env BABEL_ENV=test jest --runInBand",
     "test:e2e": "yarn cypress:cli"
   },
+  "bundlesize": [
+    {
+      "path": "./lib/cjs/index.js",
+      "maxSize": "20 kB"
+    }
+  ],
   "peerDependencies": {
     "react": ">= 16.8",
     "styled-components": ">= 4"
@@ -37,7 +44,7 @@
   "devDependencies": {
     "@babel/core": "7.7.2",
     "@babel/plugin-proposal-class-properties": "7.7.0",
-    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-proposal-export-default-from": "7.5.2",
     "@babel/plugin-proposal-export-namespace-from": "7.5.2",
     "@babel/plugin-proposal-object-rest-spread": "7.6.2",
     "@babel/preset-env": "7.7.4",
@@ -57,6 +64,7 @@
     "babel-loader": "8.0.6",
     "bundlesize": "0.18.0",
     "chai": "4.2.0",
+    "coveralls": "3.0.9",
     "cypress": "3.7.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",