feat: react-native support (#512)

__tests__/__configs/test.json

@@ -77,6 +77,16 @@
           "format": "ios/macros"
         }
       ]
+    },
+    "react-native": {
+      "transformGroup": "react-native",
+      "buildPath": "__tests__/__output/react-native/",
+      "files": [
+        {
+          "destination": "style_dictionary.js",
+          "format": "javascript/es6"
+        }
+      ]
     }
   }
 }

__tests__/__configs/test.json5

@@ -84,5 +84,15 @@
         },
       ],
     },
+    'react-native': {
+      transformGroup: 'react-native',
+      buildPath: '__tests__/__output/react-native/',
+      files: [
+        {
+          destination: 'style_dictionary.js',
+          format: 'javascript/es6'
+        }
+      ]
+    }
   },
 }

__tests__/common/transforms.test.js

@@ -480,6 +480,28 @@ describe('common', () => {
       });
     });
 
+    describe("size/object", () => {
+      it("should work", () => {
+        var value = transforms["size/object"].transformer({
+          value: "1px"
+        });
+        expect(value.original).toBe("1px");
+        expect(value.number).toBe(1);
+        expect(value.decimal).toEqual(0.01);
+        expect(value.scale).toBe(16);
+      });
+      it('should work with custom base font', () => {
+        var value = transforms["size/object"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value.original).toBe("1");
+        expect(value.number).toBe(1);
+        expect(value.decimal).toEqual(0.01);
+        expect(value.scale).toBe(14);
+      })
+      it('should throw an error if prop value is NaN', () => {
+        expect( () => transforms["size/object"].transformer({value: "a"})).toThrow();
+      })
+    });
+
     describe('size/remToSp', () => {
       it('should work', () => {
         var value = transforms["size/remToSp"].transformer({

docs/transform_groups.md

@@ -216,3 +216,12 @@ This is to be used if you want to have separate files per category and you don't
 
 * * *
 
+### react-native
+
+Transforms:
+
+[name/cti/camel](transforms.md#namecticamel)
+[color/css](transforms.md#colorcss)
+[size/object](transforms.md#sizeobject)
+
+* * *

docs/transforms.md

@@ -375,6 +375,22 @@ Transforms the value into a density-independent pixel (dp) value for non-font si
 "10.0dp"
 ```
 
+* * *
+
+### size/object 
+
+Transforms the value into a usefull object ( for React Native support )
+
+```js
+// Matches: prop.attributes.category === 'size'
+// Returns:
+{
+  original: "10px",
+  number: 10,
+  decimal: 0.1, // 10 divided by 100
+  scale: 160, // 10 times 16
+}
+```
 
 * * *
 

examples/advanced/create-react-native-app/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/advanced/create-react-native-app/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/advanced/create-react-native-app/.gitignore

@@ -0,0 +1,64 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/*
+web-build/

examples/advanced/create-react-native-app/__tests__/App.js

@@ -0,0 +1,10 @@
+import "react-native";
+import React from "react";
+import App from "../src/App";
+
+// Note: test renderer must be required after react-native.
+import renderer from "react-test-renderer";
+
+it("renders correctly", () => {
+  renderer.create(<App />);
+});

examples/advanced/create-react-native-app/android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.createreactnativeapp",
+)
+
+android_resource(
+    name = "res",
+    package = "com.createreactnativeapp",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)