test(e2e): introduce web components build script for isolated compone…

…nts (#6258)

### Related Ticket(s)

#6250 

### Description

This PR will remove the older integration bundle build tests, and replace with a new script that will build all code sandbox examples. 

In addition, a CI flow has been drafted, and will be updated to point to the main repo once this is merged in.

There is a follow-on issue #6251 that will add cypress to testing each individual component based on the built isolated components.

### Changelog

**New**

- e2e test build script for web components

**Removed**

- original integration bundle/build script

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

.prettierignore

@@ -18,3 +18,4 @@ carbon-tools
 CHANGELOG.md
 packages/**/src/internal/vendor
 packages/web-components/tests/snapshots
+packages/web-components/tests/e2e/build/examples-scaffold

gulp-tasks/lint.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -58,7 +58,11 @@ module.exports = {
       });
       const glob = paths.reduce(
         (acc, item) => acc.concat(gitignoreToGlob(item)),
-        ['**/*.{js,ts,tsx,scss,html}', '!**/examples/**']
+        [
+          '**/*.{js,ts,tsx,scss,html}',
+          '!**/examples/**',
+          '!**/examples-scaffold/**',
+        ]
       );
       await promisifyStream(() =>
         gulp.src(glob, { allowEmpty: true }).pipe(gulpCheckLicense())

packages/web-components/.prettierignore

@@ -2,6 +2,7 @@
 /src/internal/vendor
 /tests/coverage
 /tests/snapshots
+/tests/e2e/build/examples-scaffold
 es
 lib
 node_modules

packages/web-components/examples/codesandbox/components/back-to-top/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/button-group/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/callout-data/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "NODE_ENV=* parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/callout-quote/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/callout-with-media/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/card-group/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/card-in-card/package.json

@@ -1,13 +1,14 @@
 {
-  "name": "ibmdotcom-web-components-button-example",
+  "name": "ibmdotcom-web-components-card-in-card-example",
   "version": "0.1.0",
   "private": true,
   "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/card-link/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/card-section-images/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/card-section-simple/.sassrc

@@ -1,3 +1,3 @@
 {
-  "includePaths": ["node_modules"],
-}
+  "includePaths": ["node_modules", "../../node_modules"],
+}

packages/web-components/examples/codesandbox/components/card-section-simple/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/card/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/carousel/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3"
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }

packages/web-components/examples/codesandbox/components/content-block-cards/.sassrc

@@ -1,3 +1,3 @@
 {
-  "includePaths": ["node_modules"],
-}
+  "includePaths": ["node_modules", "../../node_modules"],
+}

packages/web-components/examples/codesandbox/components/content-block-cards/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,7 +17,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
     "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
     "sass": "^1.32.13"
   }
 }

packages/web-components/examples/codesandbox/components/content-block-headlines/.sassrc

@@ -1,3 +1,3 @@
 {
-  "includePaths": ["node_modules"],
-}
+  "includePaths": ["node_modules", "../../node_modules"],
+}

packages/web-components/examples/codesandbox/components/content-block-headlines/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "NODE_ENV=* parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,7 +17,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
     "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
     "sass": "^1.32.13"
   }
 }

packages/web-components/examples/codesandbox/components/content-block-media/.sassrc

@@ -1,3 +1,3 @@
 {
-  "includePaths": ["node_modules"],
-}
+  "includePaths": ["node_modules", "../../node_modules"],
+}

packages/web-components/examples/codesandbox/components/content-block-media/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,7 +17,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
     "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
     "sass": "^1.32.13"
   }
 }

packages/web-components/examples/codesandbox/components/content-block-mixed/.sassrc

@@ -1,3 +1,3 @@
 {
-  "includePaths": ["node_modules"],
-}
+  "includePaths": ["node_modules", "../../node_modules"],
+}

packages/web-components/examples/codesandbox/components/content-block-mixed/package.json

@@ -6,8 +6,9 @@
   "license": "Apache-2",
   "main": "index.html",
   "scripts": {
+    "clean": "rimraf node_modules dist .cache",
     "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build index.html --no-minify"
+    "build": "parcel build index.html --no-minify --public-url ./"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "canary",
@@ -16,7 +17,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
     "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
     "sass": "^1.32.13"
   }
 }