Monorepo rc (IBM#577)

* feat: changes

* feat: generate zip

* feat: add workspaces

* add private to package.json

* feat: fill packages

* add lerna

* feat:change build to support lerna

* feat: cleanup

* remove unused

* feat: add plex sans tc and few fixes

* feat: Plex Math

Updated build script to support limited weights

* fix: add missing Chinese unicode file

* change version and remove tags

* feat: first pass

* server test

* fix: range for special cases

* feat: remove folders from zip

* generate default and all css

* zero version for plex

Author: Palke

.gitignore

@@ -11,8 +11,10 @@ zip
 .idea
 dist
 /deploy-preview
+/public
 /tmp
 .env
+/.nx
 
 # Source files
 # https://github.com/IBM/plex/issues/554
@@ -23,4 +25,8 @@ dist
 *.glyphs
 *.vfb
 *.designspace
-*.ufo
+*.ufo
+
+# Packages
+packages/*/css
+packages/*/scss

.nvmrc

@@ -1 +1 @@
-16
+20.0.0

gulp-tasks/build/deploy-preview.js

@@ -11,15 +11,118 @@
 
 const gulp = require('gulp');
 const config = require('../config');
+const { globSync } = require('glob');
+const inject = require('gulp-inject');
+const replace = require('gulp-replace');
+
+const _LIST_PACKAGES = [];
+
+/**
+ * List packages with output CSS
+ */
+function _listPackages() {
+
+  const listPackages = globSync(`packages/**/${config.cssSrc}`);
+
+  listPackages.length && listPackages.forEach(( path ) => {
+
+    const [, family] = path.split("/");
+
+    _LIST_PACKAGES.push({
+      family, 
+      path,
+      cssPath: `assets/${family}/${config.cssSrc}/ibm-${family}.css`
+    });
+  });
+}
 
 /**
- * Copies test file to the deploy-preview folder
+ * Transform family name map
+ */
+const _transformFamilyMap = {
+  jp: "JP",
+  kr: "KR",
+  tc: "TC"
+}
+
+function _transformFamilyName(family) {
+
+  return "IBM " + family.split("-").map((part) => {
+
+    return _transformFamilyMap[part] ? _transformFamilyMap[part] : part.charAt(0).toUpperCase() + part.slice(1);
+
+  }).join(" ");
+}
+
+/**
+ * Copies test file to the public folder
  *
  * @returns {*} gulp stream
  */
 function _copyTest() {
+
+  _listPackages();
+
   return gulp
-    .src([config.testSrc])
+    .src([config.testSrc + "/index.html"])
+    .pipe(gulp.dest(config.deployPreviewPath));
+}
+
+/**
+ * Injects used CSS files into public index file
+ * 
+ * @returns {*} gulp stream
+ */
+function _injectHtml() {
+
+  console.log("Inject html");
+
+  const injectCss = [];
+  const injectStyle = [];
+  const injectOptions = [
+    `<option value="select" selected>Select family</option>`
+  ];
+  
+  _LIST_PACKAGES.forEach(({ family, cssPath }) => {
+
+    injectCss.push(`${config.deployPreviewPath}/${cssPath}`);
+
+    injectStyle.push(`div[data-family="${family}"] { display: initial; }`);
+
+    const transformedFamily = _transformFamilyName(family);
+
+    injectOptions.push(`<option value="${transformedFamily}">${transformedFamily}</option>`)
+  });
+
+  const target = gulp.src(`${config.deployPreviewPath}/index.html`);
+
+  return target
+    .pipe(inject(
+      gulp.src(injectCss, { read: false }), {
+        transform: function(filepath) {
+          
+          return `<link rel="stylesheet" href="${filepath.replace("/public/", "")}" />`;
+        }
+      }
+    ))
+    .pipe(inject(
+      gulp.src(config.testSrc + "/inject.txt", { ready: false }), {
+        starttag: '<!-- inject:style -->',
+        transform: function() {
+
+          return `<style>\n${injectStyle.join('\n')}\n</style>`;
+        }
+      }
+    ))
+    .pipe(inject(
+      gulp.src(config.testSrc + "/inject.txt", { ready: false }), {
+        starttag: '<!-- inject:options -->',
+        transform: function() {
+
+          return injectOptions.join('\n');
+        }
+      }
+    ))
     .pipe(gulp.dest(config.deployPreviewPath));
 }
 
@@ -28,24 +131,56 @@ function _copyTest() {
  *
  * @returns {*} gulp stream
  */
-function _copyCss() {
-  return gulp
-    .src([`${config.cssSrc}/**/*`])
-    .pipe(gulp.dest(config.deployPreviewCSSPath));
+function _copyCss(done) {
+
+  console.log("Copy css");
+
+  const tasks = _LIST_PACKAGES.map(({ path, family }) => {
+
+    return () => gulp
+      .src([path + "/*.*", "!" + path + "/*.min.*"])
+      .pipe(replace(/local\(.*?\),/gm, ""))
+      .pipe(gulp.dest([`${config.deployPreviewAssets}/${family}/${config.cssSrc}`]));
+  });
+
+  return gulp.series(...tasks, (seriesDone) => {
+    seriesDone();
+    done();
+  })(); 
 }
 
 /**
  * Copies font files to the dist folder
  *
  * @returns {*} gulp stream
  */
-function _copyFonts() {
+function _copyFonts(done) {
+
+  console.log("Copy fonts");
+
+  const tasks = _LIST_PACKAGES.map(({ path, family }) => {
+
+    return () => gulp
+      .src([`packages/${family}/fonts/**/*.*`])
+      .pipe(gulp.dest([`${config.deployPreviewAssets}/${family}/fonts`]));
+  });
+
+  return gulp.series(...tasks, (seriesDone) => {
+    seriesDone();
+    done();
+  })(); 
+}
+
+/**
+ * Copies preview node file to the public folder
+ *
+ * @returns {*} gulp stream
+ */
+function _copyPreview() {
+
   return gulp
-    .src(['IBM-Plex-*/fonts/**/*.*'])
-    .pipe(gulp.dest(config.deployPreviewFontsPath));
+    .src(["scripts/preview.js"])
+    .pipe(gulp.dest(config.deployPreviewPath));
 }
 
-gulp.task('build:deploy-preview:test', _copyTest);
-gulp.task('build:deploy-preview:css', _copyCss);
-gulp.task('build:deploy-preview:fonts', _copyFonts);
-gulp.task('build:deploy-preview', gulp.parallel('build:deploy-preview:test','build:deploy-preview:css','build:deploy-preview:fonts'));
+gulp.task('build:deploy-preview', gulp.series(_copyTest, _copyFonts, _copyCss, _injectHtml, _copyPreview));

gulp-tasks/clean.js

@@ -9,8 +9,7 @@
 
 module.exports = {
   cssSrc: 'css',
-  testSrc: 'test/*.*',
-  deployPreviewPath: 'deploy-preview',
-  deployPreviewCSSPath: 'deploy-preview/assets/css',
-  deployPreviewFontsPath: 'deploy-preview/assets',
+  testSrc: 'test',
+  deployPreviewPath: 'public',
+  deployPreviewAssets: 'public/assets',
 };

gulp-tasks/config.js

@@ -10,7 +10,6 @@
 'use strict';
 
 require('./gulp-tasks/build');
-require('./gulp-tasks/clean');
 
 process.once('SIGINT', () => {
   process.exit(0);

gulpfile.js

@@ -0,0 +1,10 @@
+{
+  "version": "independent",
+  "npmClient": "yarn",
+  "command": {
+    "version": {
+      "message": "chore(release): %s"
+    }
+  },
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
+}

lerna.json

@@ -1,7 +1,8 @@
 {
   "name": "@ibm/plex",
+  "private": true,
   "description": "The package of IBM’s typeface, IBM Plex",
-  "version": "6.4.0",
+  "version": "0.0.0",
   "repository": "https://github.com/ibm/plex.git",
   "license": "OFL-1.1",
   "keywords": [
@@ -11,59 +12,49 @@
     "url": "https://github.com/ibm/plex/issues"
   },
   "files": [
-    "css",
-    "variants",
-    "examples",
-    "scss",
-    "IBM-Plex-*/**/woff2",
-    "IBM-Plex-*/**/woff",
-    "!IBM-Plex-Sans-KR/fonts/hinted/**/woff2",
-    "!IBM-Plex-Sans-KR/fonts/hinted/**/woff",
-    "!IBM-Plex-Sans-JP/fonts/hinted/**/woff2",
-    "!IBM-Plex-Sans-JP/fonts/hinted/**/woff",
     "telemetry.yml"
   ],
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "clean": "rimraf css scss deploy-preview",
-    "build": "yarn clean && yarn build:scss && yarn build:css && yarn build:deploy-preview",
-    "build:zip": "yarn build && node ./scripts/prepare-zip.js && sh scripts/zip.sh",
+    "clean": "rimraf public zip dist",
+    "clean:family": "node ./scripts/clean.js",
+    "build": "yarn clean:family && yarn build:scss && yarn build:css",
+    "build:zip": "rimraf zip && yarn build && node ./scripts/prepare-zip.js && sh scripts/zip.sh && node ./scripts/clean-zip.js",
     "build:css": "node ./scripts/compile-css.js",
     "build:scss": "node ./scripts/generate-scss.js",
     "build:deploy-preview": "gulp build:deploy-preview",
-    "test": "parcel serve ./deploy-preview/index.html",
+    "unicodes": "node ./scripts/parse-unicodes.js",
+    "preview": "rimraf public dist && yarn build:deploy-preview && node ./public/preview.js",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
     "precommit": "lint-staged",
     "prettier": "prettier --write \"**/*.{scss}\"",
     "prepare": "husky install && yarn build",
-    "test:e2e:local": "start-server-and-test 'http-server -c-1 deploy-preview --silent' 8080 'percy exec --config cypress/.percy.json -- cypress run --config-file cypress/cypress.json'",
-    "test:e2e:local:no-percy": "start-server-and-test 'http-server -c-1 deploy-preview --silent' 8080 'cypress run --config-file cypress/cypress.json'"
+    "test:e2e:local": "start-server-and-test 'http-server -c-1 public --silent' 8080 'percy exec --config cypress/.percy.json -- cypress run --config-file cypress/cypress.json'",
+    "test:e2e:local:no-percy": "start-server-and-test 'http-server -c-1 public --silent' 8080 'cypress run --config-file cypress/cypress.json'"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.1",
     "@commitlint/config-conventional": "^17.0.0",
-    "@parcel/optimizer-cssnano": "2.0.0-nightly.611",
-    "@parcel/optimizer-htmlnano": "2.0.0-nightly.611",
-    "@parcel/packager-css": "2.0.0-nightly.611",
-    "@parcel/packager-html": "2.0.0-nightly.611",
-    "@parcel/transformer-css": "2.0.0-nightly.611",
-    "@parcel/transformer-html": "2.0.0-nightly.611",
-    "@parcel/transformer-postcss": "2.0.0-nightly.611",
-    "@parcel/transformer-posthtml": "2.0.0-nightly.611",
     "@percy/cli": "^1.2.1",
     "@percy/cypress": "^3.1.1",
     "archiver": "^3.0.0",
     "cypress": "^9.7.0",
     "del": "^6.1.1",
     "fs-extra": "^7.0.0",
     "gulp": "^4.0.2",
+    "gulp-inject": "^5.0.5",
+    "gulp-replace": "^1.1.4",
     "http-server": "^14.1.0",
     "husky": "^7.0.4",
+    "lerna": "^8.1.2",
     "lint-staged": "^12.4.2",
-    "parcel": "^2.0.0-beta.1",
     "postcss": "^8.2.1",
     "prettier": "^1.7.4",
     "rimraf": "^2.6.2",
-    "sass": "^1.51.0",
+    "sass": "^1.77.2",
+    "server": "^1.0.39",
     "start-server-and-test": "^1.14.0"
   },
   "prettier": {
@@ -90,6 +81,8 @@
     "needs": "*"
   },
   "dependencies": {
-    "@ibm/telemetry-js": "^1.5.1"
+    "@ibm/telemetry-js": "^1.5.1",
+    "glob": "^10.3.12",
+    "minimist": "^1.2.8"
   }
 }