fix: fix CLI, update basic example, fix android templates DTCG (#1235)

amzn · Jun 6, 2024 · c06661d · c06661d
1 parent 344cf66
commit c06661d
Show file tree

Hide file tree

Showing 16 changed files with 493 additions and 28 deletions.
diff --git a/.changeset/five-kangaroos-destroy.md b/.changeset/five-kangaroos-destroy.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': minor
+---
+
+Re-add and update example basic, fix copySync command in CLI, fix android templates to use $type for DTCG tokens.
diff --git a/bin/style-dictionary.js b/bin/style-dictionary.js
@@ -88,7 +88,9 @@ program
     }
     /* eslint-disable no-console */
     console.log('Copying starter files...\n');
-    node_fs.copySync(path.join(__dirname, '..', 'examples', type), process.cwd());
+    node_fs.cpSync(path.join(__dirname, '..', 'examples', type), process.cwd(), {
+      recursive: true,
+    });
     console.log('Source style dictionary starter files created!\n');
     console.log(
       'Running `style-dictionary build` for the first time to generate build artifacts.\n',

diff --git a/examples/basic/README.md b/examples/basic/README.md
@@ -0,0 +1,15 @@
+# Basic Style Dictionary
+
+This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
+
+```bash
+npx style-dictionary build
+```
+
+Otherwise, install Style Dictionary locally for this project first, `cd` into this directory and run:
+
+```bash
+npm init -y && npm install style-dictionary
+```
+
+and then run the above command.
diff --git a/examples/basic/config.json b/examples/basic/config.json
@@ -0,0 +1,164 @@
+{
+  "source": ["tokens/**/*.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "build/css/",
+      "files": [
+        {
+          "destination": "_variables.css",
+          "format": "css/variables"
+        }
+      ]
+    },
+    "android": {
+      "transformGroup": "android",
+      "buildPath": "build/android/",
+      "files": [
+        {
+          "destination": "font_dimens.xml",
+          "format": "android/fontDimens"
+        },
+        {
+          "destination": "colors.xml",
+          "format": "android/colors"
+        }
+      ]
+    },
+    "compose": {
+      "transformGroup": "compose",
+      "buildPath": "build/compose/",
+      "files": [
+        {
+          "destination": "StyleDictionaryColor.kt",
+          "format": "compose/object",
+          "options": {
+            "className": "StyleDictionaryColor",
+            "packageName": "StyleDictionaryColor"
+          },
+          "filter": {
+            "$type": "color"
+          }
+        },
+        {
+          "destination": "StyleDictionarySize.kt",
+          "format": "compose/object",
+          "options": {
+            "className": "StyleDictionarySize",
+            "packageName": "StyleDictionarySize",
+            "type": "float"
+          },
+          "filter": {
+            "$type": "dimension"
+          }
+        }
+      ]
+    },
+    "ios": {
+      "transformGroup": "ios",
+      "buildPath": "build/ios/",
+      "files": [
+        {
+          "destination": "StyleDictionaryColor.h",
+          "format": "ios/colors.h",
+          "options": {
+            "className": "StyleDictionaryColor",
+            "type": "StyleDictionaryColorName"
+          },
+          "filter": {
+            "$type": "color"
+          }
+        },
+        {
+          "destination": "StyleDictionaryColor.m",
+          "format": "ios/colors.m",
+          "options": {
+            "className": "StyleDictionaryColor",
+            "type": "StyleDictionaryColorName"
+          },
+          "filter": {
+            "$type": "color"
+          }
+        },
+        {
+          "destination": "StyleDictionarySize.h",
+          "format": "ios/static.h",
+          "options": {
+            "className": "StyleDictionarySize",
+            "type": "float"
+          },
+          "filter": {
+            "$type": "dimension"
+          }
+        },
+        {
+          "destination": "StyleDictionarySize.m",
+          "format": "ios/static.m",
+          "options": {
+            "className": "StyleDictionarySize",
+            "type": "float"
+          },
+          "filter": {
+            "$type": "dimension"
+          }
+        }
+      ]
+    },
+    "ios-swift": {
+      "transformGroup": "ios-swift",
+      "buildPath": "build/ios-swift/",
+      "files": [
+        {
+          "destination": "StyleDictionary+Class.swift",
+          "format": "ios-swift/class.swift",
+          "options": {
+            "className": "StyleDictionaryClass"
+          }
+        },
+        {
+          "destination": "StyleDictionary+Enum.swift",
+          "format": "ios-swift/enum.swift",
+          "options": {
+            "className": "StyleDictionaryEnum"
+          }
+        },
+        {
+          "destination": "StyleDictionary+Struct.swift",
+          "format": "ios-swift/any.swift",
+          "options": {
+            "className": "StyleDictionaryStruct",
+            "imports": "SwiftUI",
+            "objectType": "struct",
+            "accessControl": "internal"
+          }
+        }
+      ]
+    },
+    "ios-swift-separate-enums": {
+      "transformGroup": "ios-swift-separate",
+      "buildPath": "build/ios-swift/",
+      "files": [
+        {
+          "destination": "StyleDictionaryColor.swift",
+          "format": "ios-swift/enum.swift",
+          "options": {
+            "className": "StyleDictionaryColor"
+          },
+          "filter": {
+            "$type": "color"
+          }
+        },
+        {
+          "destination": "StyleDictionarySize.swift",
+          "format": "ios-swift/enum.swift",
+          "options": {
+            "className": "StyleDictionarySize"
+          },
+          "filter": {
+            "$type": "dimension"
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/examples/basic/tokens/colors.json b/examples/basic/tokens/colors.json
@@ -0,0 +1,40 @@
+{
+  "colors": {
+    "$type": "color",
+    "black": {
+      "$value": "#000000"
+    },
+    "white": {
+      "$value": "#ffffff"
+    },
+    "orange": {
+      "100": {
+        "$value": "#fffaf0"
+      },
+      "200": {
+        "$value": "#feebc8"
+      },
+      "300": {
+        "$value": "#fbd38d"
+      },
+      "400": {
+        "$value": "#f6ad55"
+      },
+      "500": {
+        "$value": "#ed8936"
+      },
+      "600": {
+        "$value": "#dd6b20"
+      },
+      "700": {
+        "$value": "#c05621"
+      },
+      "800": {
+        "$value": "#9c4221"
+      },
+      "900": {
+        "$value": "#7b341e"
+      }
+    }
+  }
+}
diff --git a/examples/basic/tokens/dimensions.json b/examples/basic/tokens/dimensions.json
@@ -0,0 +1,56 @@
+{
+  "dimensions": {
+    "$type": "dimension",
+    "0": {
+      "$value": "0px"
+    },
+    "1": {
+      "$value": "4px"
+    },
+    "2": {
+      "$value": "8px"
+    },
+    "3": {
+      "$value": "12px"
+    },
+    "4": {
+      "$value": "16px"
+    },
+    "5": {
+      "$value": "20px"
+    },
+    "6": {
+      "$value": "24px"
+    },
+    "7": {
+      "$value": "28px"
+    },
+    "8": {
+      "$value": "32px"
+    },
+    "9": {
+      "$value": "36px"
+    },
+    "10": {
+      "$value": "40px"
+    },
+    "11": {
+      "$value": "44px"
+    },
+    "12": {
+      "$value": "48px"
+    },
+    "13": {
+      "$value": "52px"
+    },
+    "14": {
+      "$value": "56px"
+    },
+    "15": {
+      "$value": "60px"
+    },
+    "max": {
+      "$value": "9999px"
+    }
+  }
+}