feat: flutter support (#320)

Based on swift implementation ( #255 ), it adds swift transforms, transformGroups, formats, and example: 

* flutter/class.dart format
* flutter and flutter-separate transformGroups
* color/hex8flutter, content/flutter/literal, asset/flutter/literal, font/flutter/literal, and size/flutter/remToDouble transforms
* advanced/flutter example

fixes #288 

Co-authored-by: MDemetrio <[email protected]>
Co-authored-by: Danny Banks <[email protected]>

__tests__/common/transforms.test.js

@@ -371,6 +371,21 @@ describe('common', () => {
       });
     });
 
+    describe('color/hex8flutter', () => {
+      it('should handle colors without alpha', () => {
+        var value = transforms["color/hex8flutter"].transformer({
+          value: "#aaaaaa"
+        });
+        expect(value).toBe("Color(0xFFAAAAAA)");
+      });
+
+      it('should handle colors with alpha', () => {
+        var value = transforms["color/hex8flutter"].transformer({
+          value: "#aaaaaa99"
+        });
+        expect(value).toBe("Color(0x99AAAAAA)");
+      });
+    });
 
     describe('color/css', () => {
       it('should handle normal colors', () => {
@@ -509,6 +524,15 @@ describe('common', () => {
       });
     });
 
+    describe('size/flutter/remToDouble', () => {
+      it('should work', () => {
+        var value = transforms["size/flutter/remToDouble"].transformer({
+          value: "1"
+        });
+        expect(value).toBe("16.00");
+      });
+    });
+
     describe('content/quote', () => {
       it('should work', () => {
         var value = transforms["content/quote"].transformer({

__tests__/formats/__snapshots__/all.test.js.snap

@@ -83,6 +83,25 @@ exports[`formats all should match css/variables snapshot 1`] = `
 "
 `;
 
+exports[`formats all should match flutter/class.dart snapshot 1`] = `
+"
+//
+// __output/
+//
+// Do not edit directly
+// Generated on Sat, 01 Jan 2000 00:00:00 GMT
+//
+
+
+import 'dart:ui';
+
+class  {
+  ._();
+  
+    static const color_red = #FF0000;
+}"
+`;
+
 exports[`formats all should match ios/colors.h snapshot 1`] = `
 "
 //

examples/advanced/flutter/.gitignore

@@ -0,0 +1,8 @@
+# style dictionary
+
+/lib/unique_file
+/lib/style_dictionary_color.dart
+/lib/style_dictionary_sizes.dart
+.dart_tool/
+.packages
+pubspec.lock

examples/advanced/flutter/README.md

@@ -0,0 +1,3 @@
+# style_dictionary
+
+A Flutter package project to show the usage of styled-dictionary's flutter support.

examples/advanced/flutter/pubspec.yaml

@@ -0,0 +1,53 @@
+name: style_dictionary
+description: A new Flutter package project.
+version: 0.0.1
+author:
+homepage:
+
+environment:
+  sdk: ">=2.1.0 <3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+  # To add assets to your package, add an assets section, like this:
+  # assets:
+  #  - images/a_dot_burr.jpeg
+  #  - images/a_dot_ham.jpeg
+  #
+  # For details regarding assets in packages, see
+  # https://flutter.dev/assets-and-images/#from-packages
+  #
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/assets-and-images/#resolution-aware.
+
+  # To add custom fonts to your package, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts in packages, see
+  # https://flutter.dev/custom-fonts/#from-packages

examples/advanced/flutter/style_dictionary/config.json

@@ -0,0 +1,46 @@
+{
+    "source": [
+        "properties/**/*.json"
+    ],
+    "platforms": {
+        "flutter": {
+            "transformGroup": "flutter",
+            "buildPath": "../lib/unique_file/",
+            "files": [
+                {
+                    "destination": "style_dictionary.dart",
+                    "format": "flutter/class.dart",
+                    "className": "StyleDictionary"
+                }
+            ]
+        },
+        "flutter-separate": {
+            "transformGroup": "flutter-separate",
+            "buildPath": "../lib/",
+            "files": [
+                {
+                    "destination": "style_dictionary_color.dart",
+                    "format": "flutter/class.dart",
+                    "className": "StyleDictionaryColor",
+                    "type": "color",
+                    "filter": {
+                        "attributes": {
+                            "category": "color"
+                        }
+                    }
+                },
+                {
+                    "destination": "style_dictionary_sizes.dart",
+                    "format": "flutter/class.dart",
+                    "className": "StyleDictionarySize",
+                    "type": "float",
+                    "filter": {
+                        "attributes": {
+                            "category": "size"
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}

examples/advanced/flutter/style_dictionary/properties/color/background.json

@@ -0,0 +1,9 @@
+{
+  "color": {
+    "background": {
+      "primary": { "value": "#ffffff" },
+      "link": { "value": "#0366d6" },
+      "inverse": { "value": "#111111" }
+    }
+  }
+}

examples/advanced/flutter/style_dictionary/properties/color/core.json

@@ -0,0 +1,10 @@
+{
+  "color": {
+    "core": {
+      "white": { "value": "#ffffff" },
+      "black": { "value": "#111111" },
+      "gray": { "value": "#dddddd" },
+      "blue": { "value": "#0366d6" }
+    }
+  }
+}

examples/advanced/flutter/style_dictionary/properties/color/font.json

@@ -0,0 +1,9 @@
+{
+  "color": {
+    "font": {
+      "primary": { "value": "{color.core.black.value}" },
+      "link": { "value": "{color.core.blue.value}" },
+      "inverse": { "value": "{color.core.white.value}" }
+    }
+  }
+}

examples/advanced/flutter/style_dictionary/properties/size/font.json

@@ -0,0 +1,9 @@
+{
+  "size": {
+    "font": {
+      "small": { "value": 0.75 },
+      "medium": { "value": 1 },
+      "large": { "value": 1.5 }
+    }
+  }
+}

examples/advanced/flutter/style_dictionary/properties/size/padding.json

@@ -0,0 +1,9 @@
+{
+  "size": {
+    "padding": {
+      "small": { "value": 0.5 },
+      "medium": { "value": 1 },
+      "large": { "value": 2 }
+    }
+  }
+}

lib/common/formats.js

@@ -772,5 +772,28 @@ module.exports = {
       })
     };
     return JSON.stringify(to_ret, null, 2);
-  }
+  },
+
+
+  // Flutter templates
+  /**
+   *  Creates a Dart implementation file of a class with values
+   *
+   * @memberof Formats
+   * @kind member
+   * @example
+   * ```dart
+   * import 'package:flutter/material.dart';
+   * 
+   * class StyleDictionary {
+   *   StyleDictionary._();
+   *   
+   *     static const colorBrandPrimary = Color(0x00ff5fff);
+   *     static const sizeFontSizeMedium = 16.00;
+   *     static const contentFontFamily1 = "NewJune";
+   * ```   
+   */
+  'flutter/class.dart': _.template(
+    fs.readFileSync(__dirname + '/templates/flutter/class.dart.template')
+  ),
 };

lib/common/templates/flutter/class.dart.template

@@ -0,0 +1,38 @@
+<%
+// Licensed under the Apache License, Version 2.0 (the "License").
+// You may not use this file except in compliance with the License.
+// A copy of the License is located at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// or in the "license" file accompanying this file. This file is distributed
+// on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+// express or implied. See the License for the specific language governing
+// permissions and limitations under the License.
+%>
+//
+// <%= this.destination %>
+//
+<%
+    // for backward compatibility we need to have the user explicitly hide it
+    var showFileHeader = (this.options && this.options.hasOwnProperty('showFileHeader')) ? this.options.showFileHeader : true;
+    if(showFileHeader) {
+        print("// Do not edit directly\n");
+        print("// Generated on " + new Date().toUTCString());
+    }
+%>
+//
+<%
+  // Filter to only those props wanted based on the filter, then sort
+  // them by category so we keep like props together, then by name
+  // so they are easier to find alphabetically.
+  var props = _.sortBy(allProperties, item => item.attributes.category + item.name);
+%>
+
+import 'dart:ui';
+
+class <%= this.className %> {
+  <%= this.className %>._();
+
+    <%= _.map(props, function(prop) { return 'static const ' + prop.name + ' = ' + prop.value + ";" }).join('\n    ') %>
+}

lib/common/transformGroups.js

@@ -223,5 +223,51 @@ module.exports = {
    */
   'assets': [
     'attribute/cti'
-  ]
+  ],
+  /**
+   * Transforms:
+   *
+   * [attribute/cti](transforms.md#attributecti)
+   * [name/cti/camel](transforms.md#namecticamel)
+   * [color/hex8flutter](transforms.md#colorhex8flutter)
+   * [size/flutter/remToDouble](transforms.md#sizeflutterremToDouble)
+   * [content/flutter/literal](transforms.md#contentflutterliteral)
+   * [asset/flutter/literal](transforms.md#assetflutterliteral)
+   * [font/flutter/literal](transforms.md#fontflutterliteral)
+   *
+   * @memberof TransformGroups
+   */
+  'flutter': [
+    'attribute/cti',
+    'name/cti/camel',
+    'color/hex8flutter',
+    'size/flutter/remToDouble',
+    'content/flutter/literal',
+    'asset/flutter/literal',
+    'font/flutter/literal'
+  ],
+  /**
+   * Transforms:
+   *
+   * [attribute/cti](transforms.md#attributecti)
+   * [name/ti/camel](transforms.md#nameticamel)
+   * [color/hex8flutter](transforms.md#colorhex8flutter)
+   * [size/flutter/remToDouble](transforms.md#sizeflutterremToDouble)
+   * [content/flutter/literal](transforms.md#contentflutterliteral)
+   * [asset/flutter/literal](transforms.md#assetflutterliteral)
+   * [font/flutter/literal](transforms.md#fontflutterliteral)
+   *
+   * This is to be used if you want to have separate files per category and you don't want the category (e.g., color) as the lead value in the name of the property (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).
+   *
+   * @memberof TransformGroups
+   */
+  'flutter-separate': [
+    'attribute/cti',
+    'name/ti/camel',
+    'color/hex8flutter',
+    'size/flutter/remToDouble',
+    'content/flutter/literal',
+    'asset/flutter/literal',
+    'font/flutter/literal'
+  ],
 };