unify-token - npm Package Compare versions

Comparing version 1.4.0-dev-2 to 1.4.0-dev-3

build/color.js

@@ -1,2 +0,2 @@
-export const Neutral = {
+const Neutral = {
   N0: '#FFFFFF',
@@ -15,3 +15,3 @@ N100: '#DBDEE2',
 
-export const Red = {
+const Red = {
   R100: '#FFEAEF',
@@ -25,3 +25,3 @@ R200: '#FFCCD9',
 
-export const Green = {
+const Green = {
   G100: '#EBFFEF',
@@ -35,3 +35,3 @@ G200: '#D6FFDE',
 
-export const Blue = {
+const Blue = {
   B100: '#E5F5FF',
@@ -45,3 +45,3 @@ B200: '#CCEBFF',
 
-export const Purple = {
+const Purple = {
   P100: '#FBE7FF',
@@ -55,3 +55,3 @@ P200: '#EEBBFF',
 
-export const Teal = {
+const Teal = {
   T100: '#EBF6F6',
@@ -65,3 +65,3 @@ T200: '#D2F2F2',
 
-export const Yellow = {
+const Yellow = {
   Y100: '#FFFAE6',
@@ -73,1 +73,3 @@ Y200: '#FFF0B3',
 }
+
+module.exports = {Neutral,Red,Green,Blue,Purple,Teal,Yellow};

build/grid.js

@@ -1,2 +0,2 @@
-export const breakpoint = {
+const breakpoint = {
   mobile: '768px',
@@ -7,3 +7,3 @@ tablet: '1024px',
 
-export const breakpointRAW = {
+const breakpointRAW = {
   mobile: 768,
@@ -14,3 +14,3 @@ tablet: 1024,
 
-export const gutter = {
+const gutter = {
   mobile: '8px',
@@ -21,3 +21,3 @@ tablet: '12px',
 
-export const gutterRAW = {
+const gutterRAW = {
   mobile: 8,
@@ -28,3 +28,3 @@ tablet: 12,
 
-export const column = {
+const column = {
   mobile: '8px',
@@ -35,3 +35,3 @@ tablet: '12px',
 
-export const columnRAW = {
+const columnRAW = {
   mobile: 8,
@@ -41,1 +41,3 @@ tablet: 12,
 }
+
+module.exports = {breakpoint,breakpointRAW,gutter,gutterRAW,column,columnRAW};

build/spacing.js

@@ -1,2 +0,2 @@
-export const spacing = {
+const spacing = {
   lvl1: '2px',
@@ -12,3 +12,3 @@ lvl2: '4px',
 
-export const spacingRAW = {
+const spacingRAW = {
   lvl1: 2,
@@ -24,3 +24,3 @@ lvl2: 4,
 
-export const layout = {
+const layout = {
   lvl1: '8px',
@@ -37,3 +37,3 @@ lvl2: '16px',
 
-export const layoutRAW = {
+const layoutRAW = {
   lvl1: 8,
@@ -49,1 +49,3 @@ lvl2: 16,
 }
+
+module.exports = {spacing,spacingRAW,layout,layoutRAW};

build/typography.js

@@ -1,2 +0,2 @@
-export const fontType = {
+const fontType = {
   stackHeading: 'Nunito Sans',
@@ -9,3 +9,3 @@ desktop: 'Open Sans',
 
-export const fontSize = {
+const fontSize = {
   lvl1: '10px',
@@ -23,3 +23,3 @@ lvl2: '12px',
 
-export const fontSizeRAW = {
+const fontSizeRAW = {
   lvl1: 10,
@@ -37,3 +37,3 @@ lvl2: 12,
 
-export const fontWeight = {
+const fontWeight = {
   regular: 400,
@@ -44,3 +44,3 @@ bold: 700,
 
-export const lineHeight = {
+const lineHeight = {
   lvl1: '16px',
@@ -58,3 +58,3 @@ lvl2: '18px',
 
-export const lineHeightRAW = {
+const lineHeightRAW = {
   lvl1: 16,
@@ -71,1 +71,3 @@ lvl2: 18,
 }
+
+module.exports = {fontType,fontSize,fontSizeRAW,fontWeight,lineHeight,lineHeightRAW};

globfile.js

@@ -64,3 +64,5 @@ const camelCase = require('lodash/camelCase');
 theo.registerFormat('unify.js', result => {
-  return result.get('props').map(prop => {
+  let exportVal = [];
+  
+  const res = result.get('props').map(prop => {
     const name = camelCase(prop.get('name'))
@@ -71,5 +73,5 @@ const unit = prop.get('unit')
     const category = prop.get('category')
-    const opening = `export const ${name} = {\n`
+    const opening = `const ${name} = {\n`
     const closing = `}\n`
-    const openingRAW = `\nexport const ${name}RAW = {\n`
+    const openingRAW = `\nconst ${name}RAW = {\n`
     const closingRAW = `}\n`
@@ -118,10 +120,17 @@ let content = ''
 
+    exportVal = [...exportVal, name, !unitWhitelist.includes(category) ? name + 'RAW' : ''];
+
     return mainModule + rawModule
   }).toJS().join('\n')
+
+  return `${res}\nmodule.exports = {${exportVal.filter(Boolean).join(',')}};`
 })
 
 theo.registerFormat('unify-color.js', result => {
-  return result.get('props').map(prop => {
+  let exportVal = [];
+
+  const res = result.get('props').map(prop => {
+    const name = prop.get('name');
     const value = prop.get('value')
-    const opening = `export const ${prop.get('name')} = {\n`
+    const opening = `const ${name} = {\n`
     const closing = `}\n`
@@ -131,2 +140,4 @@ let content = ''
 
+    exportVal = [...exportVal, name];
+
     value.map((key, index) => valueObject[index] = `${tinycolor(key).toHexString().toUpperCase()}`)
@@ -146,2 +157,4 @@
   }).toJS().join('\n')
+
+  return `${res}\nmodule.exports = {${exportVal.join(',')}};`
 })
@@ -256,2 +269,65 @@
 
+theo.registerFormat('unify-color.swift', result => {
+  let colorObject = []
+
+  result.get('props').map(prop => {
+    prop.get('value').map((key, index) => {
+      colorObject.push({
+        name: `${index.toLowerCase()}`,
+        value: {
+          red: Math.round((tinycolor(key).toRgb().r/255) * 10000000000)/10000000000,
+          green: Math.round((tinycolor(key).toRgb().g/255) * 10000000000)/10000000000,
+          blue: Math.round((tinycolor(key).toRgb().b/255) * 10000000000)/10000000000,
+          alpha: Math.round(tinycolor(key).toRgb().a)
+        }
+      })
+    })
+  })
+
+/**
+ * please ignore indentation, enter and spacing for the return
+ * because its will effect the generated file
+ */
+return `extension UIColor {
+    ${colorObject.map((data,index)=>{return `
+    public static var ${data.name}: UIColor {
+        return #colorLiteral(red: ${data.value.red}, green: ${data.value.green}, blue: ${data.value.blue}, alpha: ${data.value.alpha})
+    }`
+    })}
+
+}`.replace(/},/g,'}\n');
+
+})
+
+theo.registerFormat('unify-typography.swift', result => {
+  let typographyObject = []
+
+  result.get('props').map(prop => {
+    const mutableCategory = prop.get('category')
+    if(mutableCategory == 'font-size') {
+      prop.get('value').map((key, index) => {
+        typographyObject.push({
+          name: `${index}`,
+          value: parseFloat(key)
+        })
+      })
+    }
+  })
+
+/**
+ * please ignore indentation, enter and spacing for the return
+ * because its will effect the generated file
+ */
+return `extension CGFloat {
+    
+    ${typographyObject.map((data,index)=>{return `${index == 0 ? `//MARK: Size for font`: ``}
+    static var ${data.name}: CGFloat {
+        return CGFloat(${data.value})
+    }`
+    })}
+
+}`.replace(/},/g,'}\n');
+
+})
+
 // options is optional
@@ -334,2 +410,42 @@ glob("token/*.yml", (er, files) => {
   });
-})
+
+  // iOS Swift
+  /**
+   * for now not all token will be generated to swift
+   */
+  let iOSFiles = files.filter((fileName) => fileName == 'token/color.yml' || fileName == 'token/typography.yml')
+  iOSFiles.map(file => {
+    let opt
+
+    switch (file) {
+      case 'token/color.yml':
+        opt = convertOptions({
+          file: file,
+          transformType: 'raw',
+          formatType: 'unify-color.swift'
+        })
+        break;
+      case 'token/typography.yml':
+        opt = convertOptions({
+          file: file,
+          transformType: 'raw',
+          formatType: 'unify-typography.swift'
+        })
+        break;
+    }
+
+    theo
+      .convert(opt)
+      .then(data => {
+        var newPath = file.split("/").pop().split('.');
+        fs.writeFile('./build/' + newPath[0] + '.swift', data, function(err) {
+          if(err) {
+            return console.log(err);
+          }
+
+          console.log(`The file ${newPath[0] + `.swift`} was saved!`);
+        });
+      })
+      .catch(error => console.log(`Something went wrong in generating file iOS: ${error}`));
+  });
+})

package.json

 {
   "name": "unify-token",
-  "sideEffects": false,
-  "version": "1.4.0-dev-2",
+  "version": "1.4.0-dev-3",
   "description": "Design Tokens for the Unify Design System",
@@ -12,5 +11,3 @@ "main": "build/index.js",
     "sketch-json": "rimraf ./sketch-json ./sketch/test.zip && sketch-json *.sketch",
-    "prepublishOnly": "npm run build",
-    "build:wp": "npm run build && NODE_ENV=production webpack -p",
-    "build2": "NODE_ENV=development webpack -p"
+    "prepublishOnly": "npm run build"
   },
@@ -22,11 +19,9 @@ "keywords": [
   "devDependencies": {
-    "@babel/preset-env": "^7.4.5",
-    "babel-loader": "^8.0.6",
-    "babel-preset-env": "^1.7.0",
-    "glob": "^7.1.4",
-    "rimraf": "^2.6.3",
-    "theo": "8.0.1",
-    "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.5"
+    "glob": "7.1.3",
+    "rimraf": "^2.6.2",
+    "rollup": "^1.16.2",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-node-resolve": "^5.1.0",
+    "theo": "8.0.1"
   }
 }

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37415

37.19%

Dev dependency count

6

-25%

Number of package files

16

14.29%

Lines of code

597

18.92%

Number of low supply chain risk alerts

2

-33.33%

No dependency changes