diff --git a/.eslintrc b/.eslintrc index a9f16e3..c5aa570 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,6 @@ { - "extends": "./node_modules/@inthepocket/itp-react-scripts/dist/config/eslintrc.js" + "extends": "./node_modules/@inthepocket/itp-react-scripts/dist/config/eslintrc.js", + "rules": { + "no-underscore-dangle": "off" + } } diff --git a/LICENSE b/LICENSE index 9b080f3..2148c16 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright (c) 2018 In The Pocket (ITP Agency NV) +Copyright (c) 2019 In The Pocket (ITP Agency NV) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/README.md b/README.md index c53f222..f36fbb5 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ # Prerequisites -- macOS with Sketch 41+ +- macOS with Sketch 41+ (latest Sketch recommended) - A recent bash version (bash@4.4 recommended) - A recent node version (node@8 recommended) @@ -109,7 +109,7 @@ $ npm run build # Verify it's ok $ bin/hubble-cli --version -> 3.0.0 +> 3.1.0 ``` # Testing diff --git a/__mocks__/sample_dump.json b/__mocks__/sample_dump.json index 35e03ea..e31e1e2 100644 --- a/__mocks__/sample_dump.json +++ b/__mocks__/sample_dump.json @@ -40,6 +40,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -92,6 +95,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -134,6 +140,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -197,6 +206,9 @@ "startMarkerType": 0, "windingRule": 0 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -630,7 +642,8 @@ }, "includeBackgroundColorInInstance": true, "symbolID": "D0CF42E7-14DF-4B59-B04C-FEA4C2A190D3", - "changeIdentifier": 261 + "changeIdentifier": 261, + "overrideProperties": [] }, { "_class": "artboard", @@ -672,6 +685,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -843,6 +859,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -1014,6 +1033,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -1191,6 +1213,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -1366,7 +1391,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "C6FA1CFA-1B11-476C-B4D5-B5EE7AB28EB1", - "changeIdentifier": 1339 + "changeIdentifier": 1339, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -1416,6 +1442,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -1591,7 +1620,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "342CE026-D420-4F04-974E-63DB2EF62F88", - "changeIdentifier": 1488 + "changeIdentifier": 1488, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -1641,6 +1671,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -1823,7 +1856,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "ED353E89-2E4C-4327-BEDC-841783B602BD", - "changeIdentifier": 1533 + "changeIdentifier": 1533, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -1873,6 +1907,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -2048,7 +2085,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "514B5EBC-462D-4092-AC42-BB8174FF9C62", - "changeIdentifier": 1667 + "changeIdentifier": 1667, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -2098,6 +2136,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -2273,7 +2314,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "6A3C7859-3865-43CF-9459-9D54A327F06B", - "changeIdentifier": 1748 + "changeIdentifier": 1748, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -2323,6 +2365,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -2498,7 +2543,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "27AB57A1-FE6E-4680-8239-FF9220A203C9", - "changeIdentifier": 1863 + "changeIdentifier": 1863, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -2548,6 +2594,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -2723,7 +2772,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "8BD732CE-A75C-4A16-A52E-E2A9691F1C8A", - "changeIdentifier": 1901 + "changeIdentifier": 1901, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -2773,6 +2823,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -2948,7 +3001,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "4CE21B85-33E5-497A-B151-2B022552E20D", - "changeIdentifier": 1959 + "changeIdentifier": 1959, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -2998,6 +3052,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -3173,7 +3230,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "CADC4CBE-9036-46BB-B170-C289EBBA9FAA", - "changeIdentifier": 2043 + "changeIdentifier": 2043, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -3223,6 +3281,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -3405,7 +3466,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "7A46E03C-36CF-4AA1-A1E7-C040D4AC0E97", - "changeIdentifier": 1435 + "changeIdentifier": 1435, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -3455,6 +3517,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -3637,7 +3702,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "0059EBB3-0C83-4D2C-AC26-845113B5F1CB", - "changeIdentifier": 1569 + "changeIdentifier": 1569, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -3687,6 +3753,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -3862,7 +3931,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "618C2443-EB47-4245-8ED3-585D67B75D21", - "changeIdentifier": 1581 + "changeIdentifier": 1581, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -3912,6 +3982,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -4087,7 +4160,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "C146C4AE-3310-4B0F-8D41-FFD9F285AD4C", - "changeIdentifier": 1624 + "changeIdentifier": 1624, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -4137,6 +4211,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -4312,7 +4389,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "A5B79739-3548-4F1C-998B-271133B42EE7", - "changeIdentifier": 1760 + "changeIdentifier": 1760, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -4362,6 +4440,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -4537,7 +4618,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "614AC7D7-2270-4336-BFB3-CD3A6745B618", - "changeIdentifier": 1841 + "changeIdentifier": 1841, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -4587,6 +4669,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -4762,7 +4847,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "62639DC3-ADE1-4395-947F-A8ADB12E4A50", - "changeIdentifier": 1956 + "changeIdentifier": 1956, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -4812,6 +4898,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -4987,7 +5076,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "FF6C20B5-8E2A-457F-BEC4-0F90DB95DD49", - "changeIdentifier": 1994 + "changeIdentifier": 1994, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -5037,6 +5127,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -5212,7 +5305,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "330A5B18-6324-43DD-A4C6-3A96BF94CCEF", - "changeIdentifier": 2050 + "changeIdentifier": 2050, + "overrideProperties": [] }, { "_class": "symbolMaster", @@ -5262,6 +5356,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -5437,7 +5534,8 @@ }, "includeBackgroundColorInInstance": false, "symbolID": "2B825069-6958-4BD3-942C-422F429A4FD4", - "changeIdentifier": 2136 + "changeIdentifier": 2136, + "overrideProperties": [] }, { "_class": "artboard", @@ -5479,6 +5577,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -5712,6 +5813,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -5940,6 +6044,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -6165,6 +6272,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -6378,6 +6488,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -6575,6 +6688,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -6772,6 +6888,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -7008,6 +7127,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": true, "layers": [ { @@ -7199,6 +7321,9 @@ "startMarkerType": 0, "windingRule": 1 }, + "groupLayout": { + "_class": "MSImmutableFreeformGroupLayout" + }, "hasClickThrough": false, "layers": [ { @@ -7394,6 +7519,115 @@ "do_objectID": "0164F09E-0046-4D52-942F-F3EE4895443C", "assets": { "_class": "assetCollection", + "colorAssets": [ + { + "_class": "MSImmutableColorAsset", + "name": "darkBlue", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.6235294117647059, + "green": 0.02352941176470588, + "red": 0.06274509803921553 + } + }, + { + "_class": "MSImmutableColorAsset", + "name": "hotRed", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.3137254901960784, + "green": 0, + "red": 0.8980392156862745 + } + }, + { + "_class": "MSImmutableColorAsset", + "name": "jungleGreen", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.3058823529411765, + "green": 0.7450980392156863, + "red": 0.1725490196078432 + } + }, + { + "_class": "MSImmutableColorAsset", + "name": "ashDark", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0, + "green": 0, + "red": 0 + } + }, + { + "_class": "MSImmutableColorAsset", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.7294117647058823, + "green": 0.8235294117647058, + "red": 0.7529411764705882 + } + } + ], + "gradientAssets": [ + { + "_class": "MSImmutableGradientAsset", + "name": "swampy", + "gradient": { + "_class": "gradient", + "elipseLength": 1, + "from": "{0.5, 1}", + "gradientType": 0, + "stops": [ + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.5647058823529412, + "green": 0.7137254901960784, + "red": 0.592156862745098 + }, + "position": 0 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.3450980392156862, + "green": 0.5686274509803921, + "red": 0.3333333333333334 + }, + "position": 0.5038507579143953 + }, + { + "_class": "gradientStop", + "color": { + "_class": "color", + "alpha": 1, + "blue": 0.2431372549019607, + "green": 0.4901960784313725, + "red": 0.1333333333333333 + }, + "position": 1 + } + ], + "to": "{0.49999999999999989, 3.0616169978683836e-17}" + } + } + ], + "imageCollection": { + "_class": "imageCollection", + "images": {} + }, + "images": [], "colors": [ { "_class": "color", @@ -7422,6 +7656,13 @@ "blue": 0, "green": 0, "red": 0 + }, + { + "_class": "color", + "alpha": 1, + "blue": 0.7294117647058823, + "green": 0.8235294117647058, + "red": 0.7529411764705882 } ], "gradients": [ @@ -7467,12 +7708,7 @@ ], "to": "{0.49999999999999989, 3.0616169978683836e-17}" } - ], - "imageCollection": { - "_class": "imageCollection", - "images": {} - }, - "images": [] + ] }, "colorSpace": 0, "currentPageIndex": 0, @@ -7619,12 +7855,12 @@ "pageListCollapsed": 0 }, "3887CAEA-110F-415F-8010-F3C825F27590": { - "scrollOrigin": "{-3804, -1091}", - "zoomValue": 2.869504109150927 + "scrollOrigin": "{-1454, -592}", + "zoomValue": 1.576445328816996 } }, "meta": { - "commit": "b1e0d1c5db157d3a481169aac84f04adc67d2e21", + "commit": "6bf1bb7d02be2c7e63a1a6d1a4e221acacddb3fe", "pagesAndArtboards": { "3887CAEA-110F-415F-8010-F3C825F27590": { "name": "primitives", @@ -7728,7 +7964,7 @@ } } }, - "version": 112, + "version": 116, "fonts": [ "FiraSans-Regular" ], @@ -7737,18 +7973,18 @@ "autosaved": 0, "variant": "NONAPPSTORE", "created": { - "commit": "b1e0d1c5db157d3a481169aac84f04adc67d2e21", - "appVersion": "52.6", - "build": 67491, + "commit": "6bf1bb7d02be2c7e63a1a6d1a4e221acacddb3fe", + "appVersion": "53", + "build": 72520, "app": "com.bohemiancoding.sketch3", "compatibilityVersion": 99, - "version": 112, + "version": 116, "variant": "NONAPPSTORE" }, "saveHistory": [ - "NONAPPSTORE.67491" + "NONAPPSTORE.72520" ], - "appVersion": "52.6", - "build": 67491 + "appVersion": "53", + "build": 72520 } } \ No newline at end of file diff --git a/__mocks__/sample_output.document.json b/__mocks__/sample_output.document.json new file mode 100644 index 0000000..717ea64 --- /dev/null +++ b/__mocks__/sample_output.document.json @@ -0,0 +1,617 @@ +{ + "textStyles": [ + { + "token": "text-style", + "id": "heading1", + "weight": null, + "size": 48, + "family": "FiraSans-Regular", + "borderBottom": null, + "color": { + "token": "color", + "name": "ultramarine", + "red": 16, + "green": 6, + "blue": 159, + "alpha": 1, + "rgb": [ + 16, + 6, + 159 + ], + "rgba": [ + 16, + 6, + 159, + 1 + ], + "hex": "10069f", + "hsl": [ + 244, + 93, + 32 + ] + }, + "kerning": null + }, + { + "token": "text-style", + "id": "heading2", + "weight": null, + "size": 36, + "family": "FiraSans-Regular", + "borderBottom": null, + "color": { + "token": "color", + "name": "ultramarine", + "red": 16, + "green": 6, + "blue": 159, + "alpha": 1, + "rgb": [ + 16, + 6, + 159 + ], + "rgba": [ + 16, + 6, + 159, + 1 + ], + "hex": "10069f", + "hsl": [ + 244, + 93, + 32 + ] + }, + "kerning": null + }, + { + "token": "text-style", + "id": "paragraph", + "weight": null, + "size": 18, + "family": "FiraSans-Regular", + "borderBottom": null, + "color": { + "token": "color", + "name": "black", + "red": 0, + "green": 0, + "blue": 0, + "alpha": 1, + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 1 + ], + "hex": "000000", + "hsl": [ + 0, + 0, + 0 + ] + }, + "kerning": null + } + ], + "colors": [ + { + "token": "color", + "name": "darkBlue", + "red": 16, + "green": 6, + "blue": 159, + "alpha": 1, + "rgb": [ + 16, + 6, + 159 + ], + "rgba": [ + 16, + 6, + 159, + 1 + ], + "hex": "10069f", + "hsl": [ + 244, + 93, + 32 + ] + }, + { + "token": "color", + "name": "hotRed", + "red": 229, + "green": 0, + "blue": 80, + "alpha": 1, + "rgb": [ + 229, + 0, + 80 + ], + "rgba": [ + 229, + 0, + 80, + 1 + ], + "hex": "e50050", + "hsl": [ + 339, + 100, + 45 + ] + }, + { + "token": "color", + "name": "jungleGreen", + "red": 44, + "green": 190, + "blue": 78, + "alpha": 1, + "rgb": [ + 44, + 190, + 78 + ], + "rgba": [ + 44, + 190, + 78, + 1 + ], + "hex": "2cbe4e", + "hsl": [ + 134, + 62, + 46 + ] + }, + { + "token": "color", + "name": "ashDark", + "red": 0, + "green": 0, + "blue": 0, + "alpha": 1, + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 1 + ], + "hex": "000000", + "hsl": [ + 0, + 0, + 0 + ] + }, + { + "token": "color", + "name": "paleLeaf", + "red": 192, + "green": 210, + "blue": 186, + "alpha": 1, + "rgb": [ + 192, + 210, + 186 + ], + "rgba": [ + 192, + 210, + 186, + 1 + ], + "hex": "c0d2ba", + "hsl": [ + 105, + 21, + 78 + ] + } + ], + "gradients": [ + { + "name": "norwayGradient", + "token": "gradient", + "type": "LINEAR", + "from": [ + 0.5, + 1 + ], + "to": [ + 0.4999999999999999, + 3.0616169978683836e-17 + ], + "stops": [ + { + "position": 0, + "color": { + "token": "color", + "name": "norway", + "red": 151, + "green": 182, + "blue": 144, + "alpha": 1, + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], + "hex": "97b690", + "hsl": [ + 109, + 21, + 64 + ] + } + }, + { + "position": 0.5038507579143953, + "color": { + "token": "color", + "name": "hippieGreen", + "red": 85, + "green": 145, + "blue": 88, + "alpha": 1, + "rgb": [ + 85, + 145, + 88 + ], + "rgba": [ + 85, + 145, + 88, + 1 + ], + "hex": "559158", + "hsl": [ + 123, + 26, + 45 + ] + } + }, + { + "position": 1, + "color": { + "token": "color", + "name": "salem", + "red": 34, + "green": 125, + "blue": 62, + "alpha": 1, + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], + "hex": "227d3e", + "hsl": [ + 138, + 57, + 31 + ] + } + } + ] + } + ], + "shadows": [ + { + "id": "simple", + "token": "shadow", + "blur": 3, + "x": 0, + "y": 1, + "spread": 0, + "type": "inner-shadow", + "color": { + "token": "color", + "name": "black", + "red": 0, + "green": 0, + "blue": 0, + "alpha": 0.5, + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 0.5 + ], + "hex": "000000", + "hsl": [ + 0, + 0, + 0 + ] + } + }, + { + "id": "simple", + "token": "shadow", + "blur": 4, + "x": 0, + "y": 2, + "spread": 0, + "type": "drop-shadow", + "color": { + "token": "color", + "name": "black", + "red": 0, + "green": 0, + "blue": 0, + "alpha": 0.5, + "rgb": [ + 0, + 0, + 0 + ], + "rgba": [ + 0, + 0, + 0, + 0.5 + ], + "hex": "000000", + "hsl": [ + 0, + 0, + 0 + ] + } + } + ], + "borders": [ + { + "id": "inside", + "token": "border", + "color": { + "token": "color", + "name": "geraldine", + "red": 255, + "green": 150, + "blue": 150, + "alpha": 1, + "rgb": [ + 255, + 150, + 150 + ], + "rgba": [ + 255, + 150, + 150, + 1 + ], + "hex": "ff9696", + "hsl": [ + 0, + 100, + 79 + ] + }, + "width": 1, + "type": "INSIDE", + "radius": 3 + }, + { + "id": "outside", + "token": "border", + "color": { + "token": "color", + "name": "geraldine", + "red": 255, + "green": 150, + "blue": 150, + "alpha": 1, + "rgb": [ + 255, + 150, + 150 + ], + "rgba": [ + 255, + 150, + 150, + 1 + ], + "hex": "ff9696", + "hsl": [ + 0, + 100, + 79 + ] + }, + "width": 1, + "type": "OUTSIDE", + "radius": 12.5 + }, + { + "id": "gradientWithCorners", + "token": "border", + "gradient": { + "name": "norwayGradient", + "token": "gradient", + "type": "LINEAR", + "from": [ + 0.5, + 1 + ], + "to": [ + 0.4999999999999999, + 3.0616169978683836e-17 + ], + "stops": [ + { + "position": 0, + "color": { + "token": "color", + "name": "norway", + "red": 151, + "green": 182, + "blue": 144, + "alpha": 1, + "rgb": [ + 151, + 182, + 144 + ], + "rgba": [ + 151, + 182, + 144, + 1 + ], + "hex": "97b690", + "hsl": [ + 109, + 21, + 64 + ] + } + }, + { + "position": 0.5038507579143953, + "color": { + "token": "color", + "name": "hippieGreen", + "red": 85, + "green": 145, + "blue": 88, + "alpha": 1, + "rgb": [ + 85, + 145, + 88 + ], + "rgba": [ + 85, + 145, + 88, + 1 + ], + "hex": "559158", + "hsl": [ + 123, + 26, + 45 + ] + } + }, + { + "position": 1, + "color": { + "token": "color", + "name": "salem", + "red": 34, + "green": 125, + "blue": 62, + "alpha": 1, + "rgb": [ + 34, + 125, + 62 + ], + "rgba": [ + 34, + 125, + 62, + 1 + ], + "hex": "227d3e", + "hsl": [ + 138, + 57, + 31 + ] + } + } + ] + }, + "width": 1, + "type": "OUTSIDE", + "radius": [ + 8, + 12.5, + 12.5, + 12.5 + ] + }, + { + "id": "center", + "token": "border", + "color": { + "token": "color", + "name": "geraldine", + "red": 255, + "green": 150, + "blue": 150, + "alpha": 1, + "rgb": [ + 255, + 150, + 150 + ], + "rgba": [ + 255, + 150, + 150, + 1 + ], + "hex": "ff9696", + "hsl": [ + 0, + 100, + 79 + ] + }, + "width": 1, + "type": "CENTER", + "radius": 0 + } + ], + "fonts": [ + "FiraSans-Regular" + ], + "sketchVersion": "53" +} \ No newline at end of file diff --git a/__mocks__/sample_output.json b/__mocks__/sample_output.json index eee9abd..e923f6d 100644 --- a/__mocks__/sample_output.json +++ b/__mocks__/sample_output.json @@ -620,6 +620,7 @@ ], "gradients": [ { + "id": "linear", "token": "gradient", "type": "LINEAR", "from": [ @@ -718,6 +719,7 @@ ] }, { + "id": "radial", "token": "gradient", "type": "RADIAL", "from": [ @@ -788,6 +790,7 @@ ] }, { + "id": "angular", "token": "gradient", "type": "ANGULAR", "from": [ @@ -860,6 +863,7 @@ ], "shadows": [ { + "id": "simple", "token": "shadow", "blur": 3, "x": 0, @@ -893,6 +897,7 @@ } }, { + "id": "simple", "token": "shadow", "blur": 4, "x": 0, @@ -928,6 +933,7 @@ ], "borders": [ { + "id": "inside", "token": "border", "color": { "token": "color", @@ -959,6 +965,7 @@ "radius": 3 }, { + "id": "outside", "token": "border", "color": { "token": "color", @@ -990,8 +997,10 @@ "radius": 12.5 }, { + "id": "gradientWithCorners", "token": "border", "gradient": { + "name": "norwayGradient", "token": "gradient", "type": "LINEAR", "from": [ @@ -1099,6 +1108,7 @@ ] }, { + "id": "center", "token": "border", "color": { "token": "color", @@ -1133,5 +1143,5 @@ "fonts": [ "FiraSans-Regular" ], - "sketchVersion": "52.6" + "sketchVersion": "53" } \ No newline at end of file diff --git a/__mocks__/sample_sketchfile.sketch b/__mocks__/sample_sketchfile.sketch index 18e322a..1c1aa31 100644 Binary files a/__mocks__/sample_sketchfile.sketch and b/__mocks__/sample_sketchfile.sketch differ diff --git a/bin/hubble-cli b/bin/hubble-cli index 010648a..c71c6f6 100755 Binary files a/bin/hubble-cli and b/bin/hubble-cli differ diff --git a/index.js b/index.js index 4b5c9fc..a7221d3 100644 --- a/index.js +++ b/index.js @@ -29,10 +29,12 @@ module.exports = (args, flags) => { const colorLayers = flags.useColorArtboards ? getColorsFromArtboard(primitivesPage.layers) - : response.document.assets.colors; + : response.document.assets.colorAssets + .map(({ color, _class, name }) => ({ ...color, _class, name })); const gradientLayers = flags.useGradientArtboards ? getGradientsFromArtboard(primitivesPage.layers) - : response.document.assets.gradients; + : response.document.assets.gradientAssets + .map(({ gradient, _class }) => ({ ...gradient, _class })); const mapping = { textStyles: mappers.mapTextStyles(response.document.layerTextStyles), diff --git a/lib/mappers/__tests__/__fixtures__/mapper.js b/lib/mappers/__tests__/__fixtures__/mapper.js index 637da40..03c7b95 100644 --- a/lib/mappers/__tests__/__fixtures__/mapper.js +++ b/lib/mappers/__tests__/__fixtures__/mapper.js @@ -8,8 +8,10 @@ const PRIMITIVES_PAGE = getPageArrays(sampleOutput).find(i => i.name === 'primit exports.PRIMITIVES_PAGE = PRIMITIVES_PAGE; -exports.DOCUMENT_COLORS = sampleOutput.document.assets.colors; -exports.DOCUMENT_GRADIENTS = sampleOutput.document.assets.gradients; +exports.DOCUMENT_COLORS = sampleOutput.document.assets.colorAssets + .map(({ color, _class, name }) => ({ ...color, _class, name })); +exports.DOCUMENT_GRADIENTS = sampleOutput.document.assets.gradientAssets + .map(({ gradient, _class }) => ({ ...gradient, _class }));; exports.TEXT_STYLES = sampleOutput.document.layerTextStyles; exports.ARTBOARD_GRADIENTS = getGradientsFromArtboard(PRIMITIVES_PAGE.layers); diff --git a/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap b/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap index 1cd947a..ee4f875 100644 --- a/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap +++ b/lib/mappers/__tests__/__snapshots__/mapper.test.js.snap @@ -11,7 +11,7 @@ Object { 93, 32, ], - "name": "ultramarine", + "name": "darkBlue", "red": 16, "rgb": Array [ 16, @@ -100,6 +100,7 @@ Array [ 0.5, 1, ], + "name": "norwayGradient", "stops": Array [ Object { "color": Object { @@ -769,7 +770,7 @@ Array [ 93, 32, ], - "name": "ultramarine", + "name": "darkBlue", "red": 16, "rgb": Array [ 16, @@ -794,7 +795,7 @@ Array [ 100, 45, ], - "name": "amaranth", + "name": "hotRed", "red": 229, "rgb": Array [ 229, @@ -819,7 +820,7 @@ Array [ 62, 46, ], - "name": "apple", + "name": "jungleGreen", "red": 44, "rgb": Array [ 44, @@ -844,7 +845,7 @@ Array [ 0, 0, ], - "name": "black", + "name": "ashDark", "red": 0, "rgb": Array [ 0, @@ -859,6 +860,31 @@ Array [ ], "token": "color", }, + Object { + "alpha": 1, + "blue": 186, + "green": 210, + "hex": "c0d2ba", + "hsl": Array [ + 105, + 21, + 78, + ], + "name": "paleLeaf", + "red": 192, + "rgb": Array [ + 192, + 210, + 186, + ], + "rgba": Array [ + 192, + 210, + 186, + 1, + ], + "token": "color", + }, ] `; @@ -1115,6 +1141,7 @@ Array [ 0.5, 1, ], + "name": "norwayGradient", "stops": Array [ Object { "color": Object { diff --git a/lib/mappers/color.js b/lib/mappers/color.js index c8b2d87..c8d0b82 100644 --- a/lib/mappers/color.js +++ b/lib/mappers/color.js @@ -1,18 +1,24 @@ const colorConvert = require('color-convert'); -const colorNamer = require('color-namer'); const camelcase = require('camelcase'); -const { convertNSColorToRGB, tokenize } = require('../utils'); +const { convertNSColorToRGB, tokenize, getNamedColorFromRGB } = require('../utils'); -module.exports = ({ red, green, blue, alpha, _class, id, variant }) => { +const isArtboardColor = (color) => color._class === 'artboardColor'; +exports.isArtboardColor = isArtboardColor; +exports.isDocumentColor = (color) => color._class === 'color' || color._class === "MSImmutableColorAsset"; + +module.exports = (color) => { + const { red, green, blue, alpha } = color; const R = convertNSColorToRGB(red); const G = convertNSColorToRGB(green); const B = convertNSColorToRGB(blue); + const computedColorName = getNamedColorFromRGB([R, G, B]); + return { token: tokenize('color'), - ...(_class === 'artboardColor' ? { id: camelcase(id), variant: variant || null } : {}), - name: camelcase(colorNamer(`rgb(${R}, ${G}, ${B})`).ntc[0].name), + ...(isArtboardColor(color) ? { id: camelcase(color.id), variant: color.variant || null } : {}), + name: isArtboardColor(color) ? computedColorName : color.name || computedColorName, red: R, green: G, blue: B, diff --git a/lib/mappers/gradient.js b/lib/mappers/gradient.js index 4dda23b..9750d79 100644 --- a/lib/mappers/gradient.js +++ b/lib/mappers/gradient.js @@ -2,7 +2,7 @@ const camelcase = require('camelcase'); const formatColor = require('./color'); -const { tokenize } = require('../utils'); +const { tokenize, getNamedColorFromRGB } = require('../utils'); const GRADIENT_TYPES = ['LINEAR', 'RADIAL', 'ANGULAR'] @@ -11,14 +11,27 @@ const formatCoordinates = (coords) => { return coordinates ? coordinates.map(parseFloat) : []; } -module.exports = (gradient) => ({ - ...(gradient._class === 'artboardGradient' ? { id: camelcase(gradient.id) || null } : {}), - token: tokenize('gradient'), - type: GRADIENT_TYPES[gradient.gradientType], - from: formatCoordinates(gradient.from), - to: formatCoordinates(gradient.to), - stops: gradient.stops.map(g => ({ - position: g.position, - color: formatColor(g.color), - })), -}); +const isArtboardGradient = (gradient) => gradient._class === 'artboardGradient'; +exports.isArtboardGradient = isArtboardGradient; +exports.isDocumentGradient = (gradient) => gradient._class === 'gradient' || gradient._class === "MSImmutableGradientAsset"; + +module.exports = (gradient) => { + const { gradientType, from, to, stops } = gradient; + + const computedColorName = getNamedColorFromRGB(formatColor(stops[0].color).rgb); + + return { + ...(isArtboardGradient(gradient) + ? { id: camelcase(gradient.id) || null } + : { name: gradient.name || `${computedColorName}Gradient` } + ), + token: tokenize('gradient'), + type: GRADIENT_TYPES[gradientType], + from: formatCoordinates(from), + to: formatCoordinates(to), + stops: stops.map(({ position, color }) => ({ + position, + color: formatColor(color), + })), + } +}; diff --git a/lib/utils.js b/lib/utils.js index b5e6812..c1c7de3 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,3 +1,6 @@ +const camelcase = require('camelcase'); +const colorNamer = require('color-namer'); + module.exports = { /** @@ -21,4 +24,6 @@ module.exports = { */ tokenize: token => token.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(), + getNamedColorFromRGB: ([red, green, blue]) => + camelcase(colorNamer(`rgb(${red}, ${green}, ${blue})`).ntc[0].name) }; diff --git a/package-lock.json b/package-lock.json index f1dae27..52208a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "hubble-scripts", - "version": "3.0.0", + "version": "3.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3d88c4c..b42d1a4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hubble-scripts", - "version": "3.0.0", + "version": "3.1.0", "engines": { "node": ">=8.0" }, @@ -17,7 +17,9 @@ "lint": "itp-react-scripts lint", "lint:fix": "npm run lint -- --fix", "lint:shell": "which shellcheck > /dev/null && shellcheck *.sh", - "generate:mocks": "npm run start:artboards ./__mocks__/sample_sketchfile.sketch && mv hubble-data.json ./__mocks__/sample_output.json && mv logdump.json ./__mocks__/sample_dump.json", + "generate:mocks": "npm run generate:mocks:artboards && npm run generate:mocks:document", + "generate:mocks:artboards": "npm run start:artboards ./__mocks__/sample_sketchfile.sketch && mv hubble-data.json ./__mocks__/sample_output.json && mv logdump.json ./__mocks__/sample_dump.json", + "generate:mocks:document": "npm run start:document ./__mocks__/sample_sketchfile.sketch && mv hubble-data.json ./__mocks__/sample_output.document.json && mv logdump.json ./__mocks__/sample_dump.json", "test": "jest", "test:watch": "jest --watch", "test:update": "npm run test -- --updateSnapshot",