feat: Feature/afg 71 putting android and ios to run

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": [
+    "theo"
+  ]
 }

formats/android/android-formats.js

@@ -22,6 +22,14 @@ module.exports = (theo) => {
     }
   );
 
+  theo.registerValueTransform(
+    'android-spacing-dp',
+    (prop) => prop.get('type') === 'unit' && prop.get('category') === 'spacing',
+    (prop) => {
+      return theoReplaceAll(`${prop.get('value')}`, 'px', '') + 'dp';
+    }
+  );
+
   theo.registerValueTransform(
     'android-radius-dp',
     (prop) => prop.get('type') === 'unit' && prop.get('category') === 'radius',
@@ -33,6 +41,7 @@ module.exports = (theo) => {
   theo.registerTransform('android', [
     'android-font-size-sp',
     'android-border-width-dp',
+    'android-spacing-dp',
     'android-radius-dp',
   ]);
 };

formats/android/blu.android.discarded.categories.json

@@ -0,0 +1,7 @@
+[
+  "font-weight",
+  "font-family",
+  "box-shadow",
+  "opacity",
+  "ocean_border_radius_circular"
+]

formats/android/blu.android.xml.js

@@ -3,14 +3,28 @@
 
 const _ = require('lodash');
 const xml = require('xml');
+var fs = require('fs');
+
+function loadDiscardedCategories() {
+  return fs.readFileSync(
+    'node_modules/theo/lib/formats/blu.android.discarded.categories.json',
+    'utf8'
+  );
+}
 
 module.exports = (def) => {
+  const discardedCategories = loadDiscardedCategories();
+
   const o = {
     resources: def
       .get('props')
+      .filter((prop) => {
+        return !discardedCategories.includes(prop.get('category'));
+      })
       .map((prop) => {
         const key = (() => {
-          switch (prop.get('type')) {
+          const newLocal = prop.get('type');
+          switch (newLocal) {
             case 'color':
               return 'color';
             case 'size':
@@ -28,7 +42,7 @@ module.exports = (def) => {
           [key]: [
             {
               _attr: {
-                name: _.toLower(prop.get('name')).replace(/[-]/g, '_'),
+                name: _.toLower(`ocean_${prop.get('name')}`).replace(/[-]/g, '_'),
                 category: prop.get('category'),
               },
             },

formats/android/pre-script.js

@@ -1,9 +1,29 @@
 const fs = require('fs');
 
-const source = 'android/blu.android.xml.js';
+const source = 'formats/android/blu.android.xml.js';
 const target = 'node_modules/theo/lib/formats/blu.android.xml.js';
 
-fs.copyFile(source, target, (err) => {
-  if (err) throw err;
-  console.log(`${source} was copied to ${target}`);
-});
+const discardedSource = 'formats/android/blu.android.discarded.categories.json';
+const discardedTarget =
+  'node_modules/theo/lib/formats/blu.android.discarded.categories.json';
+
+function copyFiles() {
+  function copyDiscardCategoriesConfig() {
+    fs.copyFile(discardedSource, discardedTarget, (err) => {
+      if (err) throw err;
+      console.log(`${discardedSource} was copied to ${discardedTarget}`);
+    });
+  }
+
+  function copyCustomFormat() {
+    fs.copyFile(source, target, (err) => {
+      if (err) throw err;
+      console.log(`${source} was copied to ${target}`);
+    });
+  }
+
+  copyCustomFormat();
+  copyDiscardCategoriesConfig();
+}
+
+copyFiles();

formats/formats.js

@@ -1,13 +1,3 @@
-module.exports = (theo) => {
-  theo.registerValueTransform(
-    'rgbtohexios',
-    (prop) => prop.get('type') === 'size',
-    (prop) => prop.get('value') + '',
-    (prop) => prop.get('color') + 'hexa'
-  );
-  theo.registerTransform('ios', ['rgbtohexios']);
-};
-
 module.exports = (theo) => {
   theo.registerValueTransform(
     'webpx',

formats/ios/blu.ios.json.js

@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+const Immutable = require("immutable");
+const _ = require("lodash");
+const { comment, indent } = require("../util");
+
+module.exports = def => {
+  const content = def
+    .get("props")
+    .map(prop => {
+      let result = Immutable.List();
+      if (prop.has("comment")) {
+        result = result.push(`${indent(comment(prop.get("comment").trim()))}`);
+      }
+      const k = _.camelCase(prop.get("name"));
+      let v = prop.get("value");
+
+      var fontSearch = k.search("fontFamily");
+      if (fontSearch > -1) {
+      	v = v.replace(/\s/g, '');
+      }
+
+      var n = v.search("%");
+      if (n > -1) {
+      	v = v.replace('%','')
+      	if (isNaN(v) == false) 
+      		v = v / 100
+      }
+
+      if (isNaN(v)) 
+      	v = JSON.stringify(v);
+
+      var isFontWeight = k.search("fontWeight");
+      var isFontFamily = k.search("fontFamily");
+      if (isFontWeight == -1 && isFontFamily == -1) { 
+        result = result.push(`  "${k}": ${v},`);
+      }
+      if (prop.get("category") == "font-family") {
+        let weightKeys = ["WeightLight","WeightRegular","WeightMedium","WeightBold","WeightExtraBold"];
+        let fontFamilyBaseWeightValues = ["Light","Regular","SemiBold","Bold","ExtraBold"];
+        let fontFamilyHighlightWeightValues = ["Light","Roman","Medium","Heavy","Black"];
+        for (var i = weightKeys.length - 1; i >= 0; i--) {
+          let keyWeight = k + weightKeys[i];
+
+          if (k == "fontFamilyBase") {
+            let fontFamilyWithWeight = prop.get("value").replace(/\s/g, '')+"-"+fontFamilyBaseWeightValues[i]
+            result = result.push(`  "${keyWeight}": "${fontFamilyWithWeight}",`);
+          } else {
+            let fontFamilyWithWeight = prop.get("value").replace(/\s/g, '')+"-"+fontFamilyHighlightWeightValues[i]
+            result = result.push(`  "${keyWeight}": "${fontFamilyWithWeight}",`);
+          }
+        }
+      }
+
+      return result;
+    })
+    .flatten(1)
+    .toArray()
+    .join("\n");
+  return ["{", content, "}"].join("\n");
+};

formats/ios/ios-formats.js

@@ -0,0 +1,39 @@
+function theoReplaceAll(str, find, replace) {
+  return str.replace(new RegExp(find, 'g'), replace);
+}
+
+function convertToMap(str) {
+  str = str.replace("rgba(","").replace(")","");
+  var res = str.split(" ");
+  var prefix = ['"x":',', "y":',', "radius":',', "red":','"green":','"blue":','"alpha":']; 
+  var text = "";
+  for (i = 0; i < res.length; i++) {
+     text += prefix[i] + " " + res[i];
+  }
+  text = "[" + text + "]";
+  return   text;
+}
+
+module.exports = theo => {
+
+	theo.registerValueTransform(
+    	'ios-convert-to-map',
+    	(prop) =>
+      		prop.get('type') === 'shadow',
+    	(prop) => {
+        let valueShadow = prop.get('value')
+    		return convertToMap(`${valueShadow}`);
+    	}
+  	);
+
+  	theo.registerValueTransform(
+    	'ios-remove-pixel',
+    	(prop) => prop.get('type') === 'unit' ||  prop.get('type') === 'number' ||  prop.get('type') === 'size' ||  prop.get('type') === 'shadow',
+    	(prop) => {
+      		return theoReplaceAll(`${prop.get('value')}`, 'px', '');
+    	}
+  	);
+
+    //theo.registerTransform("ios", ['color/rgb','ios-remove-rgb-word','ios-remove-pixel']);
+    theo.registerTransform("ios", ['ios-convert-to-map','ios-remove-pixel']);
+  }

formats/ios/pre-script.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+
+const source = 'formats/ios/blu.ios.json.js';
+const target = 'node_modules/theo/lib/formats/blu.ios.json.js';
+
+fs.copyFile(source, target, (err) => {
+  if (err) throw err;
+  console.log(`${source} was copied to ${target}`);
+});
+
+fs.copyFile(source, target, (err) => {
+  if (err) throw err;
+  console.log(`${source} was copied to ${target}`);
+});

generate_ios_tokens.sh

@@ -0,0 +1,9 @@
+echo "Generate tokens ios"
+#npm run build:ios-typography && npm run build:ios-color && npm run build:ios-size && npm run build:ios
+
+theo src/mobile-ios-color-tokens.yml --setup formats/ios/ios-formats.js --transform ios --format blu.ios.json --dest dist/ios --resolveMetaAliases &&
+theo src/mobile-ios-typography-tokens.yml --setup formats/ios/ios-formats.js --transform ios --format blu.ios.json --dest dist/ios --resolveMetaAliases &&
+theo src/mobile-ios-size-tokens.yml --setup formats/ios/ios-formats.js --transform ios --format blu.ios.json --dest dist/ios --resolveMetaAliases &&
+theo src/mobile-ios-shadow-tokens.yml --setup formats/ios/ios-formats.js --transform ios --format blu.ios.json --dest dist/ios --resolveMetaAliases &&
+theo src/mobile-ios-font-name-tokens.yml --setup formats/ios/ios-formats.js --transform ios --format blu.ios.json --dest dist/ios --resolveMetaAliases &&
+theo src/mobile-tokens.yml --setup formats/ios/ios-formats.js --transform ios --format blu.ios.json --dest dist/ios --resolveMetaAliases

package.json

@@ -10,9 +10,11 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
-    "preandroid": "node scripts/android/pre-script.js",
+    "prebuild:android": "node formats/android/pre-script.js",
+    "prebuild:ios": "node formats/ios/pre-script.js",
     "build:web": "theo src/tokens.yml --transform web --format scss,module.js,json --dest dist",
-    "build:android": "theo src/tokens.yml --setup scripts/android/android-formats.js --transform android --format blu.android.xml --dest dist --resolveMetaAliases",
+    "build:android": "theo src/mobile-tokens.yml --setup formats/android/android-formats.js --transform android --format blu.android.xml --dest dist --resolveMetaAliases",
+    "build:ios": "sh generate_ios_tokens.sh",
     "build:docs": "gulp docs --gulpfile scripts/gulpfile.js",
     "deploy:docs": "gh-pages -d dist/docs"
   },

src/mobile-ios-color-tokens.yml

@@ -0,0 +1,6 @@
+# List of all token files
+# Useful for documentation generation
+imports:
+  - ./color/index.yml
+global:
+  category: tokens

src/mobile-ios-font-name-tokens.yml

@@ -0,0 +1,6 @@
+# List of all token files
+# Useful for documentation generation
+imports:
+  - ./typography/ios-font-names.yml
+global:
+  category: tokens

src/mobile-ios-shadow-tokens.yml

@@ -0,0 +1,6 @@
+# List of all token files
+# Useful for documentation generation
+imports:
+  - ./shadow/index.yml
+global:
+  category: tokens

src/mobile-ios-size-tokens.yml

@@ -0,0 +1,9 @@
+# List of all token files
+# Useful for documentation generation
+imports:
+  - ./border/index.yml
+  - ./opacity/index.yml
+  - ./radius/index.yml
+  - ./spacing/mobile-index.yml
+global:
+  category: tokens

src/mobile-ios-typography-tokens.yml

@@ -0,0 +1,6 @@
+# List of all token files
+# Useful for documentation generation
+imports:
+  - ./typography/index.yml
+global:
+  category: tokens

src/mobile-tokens.yml

@@ -0,0 +1,12 @@
+# List of all token files
+# Useful for documentation generation
+imports:
+  - ./color/index.yml
+  - ./border/index.yml
+  - ./opacity/index.yml
+  - ./radius/index.yml
+  - ./shadow/index.yml
+  - ./spacing/mobile-index.yml
+  - ./typography/index.yml
+global:
+  category: tokens

src/spacing/mobile-index.yml

@@ -0,0 +1,9 @@
+---
+global:
+  type: spacing
+  category: all
+
+imports:
+  - ./inline.yml
+  - ./inset.yml
+  - ./stack.yml

src/typography/ios-font-names.yml

@@ -0,0 +1,8 @@
+---
+global:
+  type: typography
+  category: all
+
+imports:
+  - ./font-family.yml
+  - ./font-weight.yml