chore(Mistica Tokens generator): IOS-10444 Mistica tokens generator (#…

…387)

* Tool

* Test tokens generation

* Revert "Test tokens generation"

This reverts commit 5d236ea.

* CR improvements

* Use snapshots

* Add JSDoc

* setup eslint

* configure prettier

* Run Prettier

* Fix lint

* IOS-10444 Mistica importer from GH Actions (#390)

* Tests action for the tool

* Create a new workflow for mistica-skin-generator-tests and modify the generation flow to generate tokens

* Test show URL

* Clean up

---------

Co-authored-by: Abel Toledano <[email protected]>

.github/workflows/generate-mistica-tokens.yml

@@ -2,30 +2,40 @@ name: Generate Mistica Tokens
 
 on:
   workflow_dispatch:
-    inputs:
-      ref:
-        description: 'mistica-design repo changeset or branch'
-        required: false
-        default: 'production'
+
+concurrency:
+    group: ci-${{ github.ref }}
+    cancel-in-progress: true
 
 jobs:
-  get-design-tokens:
-    name: Get Design Tokens
-    runs-on: self-hosted-novum-mac
+  build:
+    name: Build & generate tokens
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+
+    - name: Install dependencies
+      run: npm install
+      working-directory: scripts/mistica-skin-generator
 
-      - name: Generate Skin
-        run: make skin ref=${{github.event.inputs.ref}}
+    - name: Generate tokens
+      run: npm run generate
+      working-directory: scripts/mistica-skin-generator
 
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
-        with:
-          token: ${{ secrets.NOVUM_PRIVATE_REPOS }}
-          add-paths: 'Sources/MisticaCommon/*'
-          commit-message: 'feat(skin): update design tokens'
-          title: 'feat(skin): update design tokens from mistica-design branch: ${{github.event.inputs.ref}}'
-          branch: 'import-design-tokens'
-          team-reviewers: 'ios'
-          delete-branch: true
+    - name: Create Pull Request
+      id: create_pr
+      uses: peter-evans/create-pull-request@v6
+      with:
+        token: ${{ secrets.NOVUM_PRIVATE_REPOS }}
+        add-paths: 'Sources/MisticaCommon/*'
+        commit-message: 'feat(skin): update design tokens'
+        title: 'feat(skin): update design tokens from mistica-design'
+        branch: 'import-design-tokens'
+        team-reviewers: 'ios'
+        delete-branch: true
+    - name: Show URL in summary annotation
+      run: echo '::notice::Pull Request generated ${{ steps.create_pr.outputs.pull-request-url }}'

.github/workflows/mistica-skin-generator-tests.yml

@@ -0,0 +1,30 @@
+name: Mistica skin generator tests
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - 'scripts/mistica-skin-generator/**'
+
+concurrency:
+    group: ci-${{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build & execute tests
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+
+    - name: Install dependencies
+      run: npm install
+      working-directory: scripts/mistica-skin-generator
+
+    - name: Run tests
+      run: npm run test
+      working-directory: scripts/mistica-skin-generator

.gitignore

@@ -50,3 +50,8 @@ fastlane/test_output
 # ci
 .ruby-version
 vendor/
+
+# Mistica skin generator
+scripts/mistica-skin-generator/.vscode
+scripts/mistica-skin-generator/node_modules
+scripts/mistica-skin-generator/package-lock.json

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "eslint.workingDirectories": [
+        "scripts/mistica-skin-generator"
+    ]
+}

CONTRIBUTING.md

@@ -113,7 +113,7 @@ In order to automatise this, we can execute this [GitHub action](.github/.workfl
 You can also execute it manually using the actions defined in the [Makefile](Makefile).
 Example:
 ```bash
-make skin ref=production
+make skin
 ```
 
 ## Testing

Makefile

@@ -1,4 +1,4 @@
-.PHONY: help setup format test simulator archive export clean skinGeneratorSetup colorPaletteGeneration cornerRadiusGeneration fontWeightsGeneration fontSizesGeneration skin
+.PHONY: help setup format test simulator archive export clean  skin
 
 # Simulator
 OS_VERSION := 17.2
@@ -22,53 +22,24 @@ BUILD_PATH := $(ROOT_DIR)/build
 EXPORTED_OPTIONS_PATH := $(ROOT_DIR)/enterprise.plist
 ARCHIVE_PATH := $(TMP_ROOT_PATH)/ios.xcarchive
 XCODEBUILD := set -o pipefail && xcodebuild
-MISTICA_DESIGN_PATH := $(ROOT_DIR)/tmp/mistica-design
 MISTICA_DESIGN_TOKENS_PATH := /tokens
 MISTICA_DESIGN_URL := https://raw.githubusercontent.com/Telefonica/mistica-design/$(ref)/tokens
 
-#Skin tokens config
-#These variables will be used to get the json file from mistica design repository and later to create the appropiate file and class/struct names. If a new brand/skin needs to be added, it should be added here. All of the brand names should be in lowercase.
-Movistar:= movistar
-Blau:= blau
-O2:= o2
-O2New:= o2-new
-Vivo:= vivo
-VivoNew:= vivo-new
-Telefonica:= telefonica
-TU:= tu
-BRAND_FILES:= $(Movistar) $(Blau) $(O2) $(O2New) $(Vivo) $(VivoNew) $(Telefonica) $(TU) # List of all the brand names that will be procesed.
-
 # Xcode
 ifneq ($(origin GITHUB_ACTION),undefined)
 export DEVELOPER_DIR=/Applications/Xcode-15.2.app/Contents/Developer
 endif
 
-# TokenGenerator func to be used in all token generators.
-define tokenGenerator
-	@echo "Generating Mistica $(2) interfaces"
-	hygen $(1) Mistica$(2) --json $(MISTICA_DESIGN_PATH)$(MISTICA_DESIGN_TOKENS_PATH)/$(Movistar).json
-
-	for key in $(BRAND_FILES) ; do \
-		echo "Generating $$key $(2) palette"; \
-		hygen $(1) Brand$(2) --name $$key --json $(MISTICA_DESIGN_PATH)$(MISTICA_DESIGN_TOKENS_PATH)/$$key.json ; \
-	done
-endef
-
 # Targets
 help:
 	@echo "Please use \`make <target>' where <target> is one of"
 	@echo "  setup    				to set up dependencies"
 	@echo "  format    				to execute swiftformat in Sources directory"
 	@echo "  test     				to build and test the main target"
 	@echo "  simulator				to install the simulator for testing"
-	@echo "  export				to export the archived project as an .ipa"
+	@echo "  export					to export the archived project as an .ipa"
 	@echo "  clean    				to remove all temporal files"
-	@echo "  skinGeneratorSetup    		to setup skin dependencies"
-	@echo "  colorPaletteGeneration ref=<ref>  	to setup and regenerate MisticaColors with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  cornerRadiusGeneration ref=<ref> 	to setup and regenerate MisticaCornerRadius with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  fontWeightsGeneration ref=<ref> 	to setup and regenerate MisticaFontWeights with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  fontSizesGeneration ref=<ref> 	to setup and regenerate MisticaFontSizes with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  skin ref=<ref>			to setup, regenerate and format tokens from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
+	@echo "  skin					to regenerate and format tokens from mistica design"
 
 trace:
 	@echo "Current xcodebuild configuration"
@@ -85,9 +56,9 @@ setup: trace
 	@brew ls xcbeautify --versions || brew install xcbeautify
 
 skinGeneratorSetup:
-	@echo "Installing tokens generators dependencies"
+	@echo "Installing tokens generator dependencies"
 	@brew ls node --versions || brew install node
-	@brew ls hygen --versions || (brew tap jondot/tap && brew install hygen)
+	cd scripts/mistica-skin-generator && npm install
 
 format:
 	Scripts/swiftformat .
@@ -131,25 +102,8 @@ export: clean setup
 
 	@rm -rf "$(TMP_ROOT_PATH)"
 
-getMisticaDesignTokenFiles:
-	@echo "Obtaining mistica token files"
-	for key in $(BRAND_FILES) ; do \
-		curl -o $(MISTICA_DESIGN_PATH)$(MISTICA_DESIGN_TOKENS_PATH)/$$key.json --create-dirs $(MISTICA_DESIGN_URL)/$$key.json ; \
-	done
-
-colorPaletteGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,ColorTokenGenerator,Colors)
-
-cornerRadiusGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,CornerRadiusTokenGenerator,CornerRadius)
-
-fontWeightsGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,FontWeightsTokenGenerator,FontWeights)
-
-fontSizesGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,FontSizesTokenGenerator,FontSizes)
-
-removeMisticaDesignTokenFolder:
-	rm -rf $(MISTICA_DESIGN_PATH)
+tokensGeneration:
+	@echo "Executing tokens generation tool..."
+	cd scripts/mistica-skin-generator && npm run generate
 
-skin: colorPaletteGeneration cornerRadiusGeneration fontWeightsGeneration fontSizesGeneration removeMisticaDesignTokenFolder format
+skin:  tokensGeneration format

Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift

@@ -644,12 +644,3 @@ public extension UIColor {
         MisticaConfig.currentColors.tagBackgroundError
     }
 }
-
-public extension BrandStyle {
-    var preferredStatusBarStyle: UIStatusBarStyle {
-        switch self {
-        case .movistar, .vivo, .o2, .o2New, .blau, .custom, .vivoNew, .tu, .telefonica:
-            return .lightContent
-        }
-    }
-}

Sources/MisticaCommon/Extensions/BrandStyle+UIStatusBarStyle.swift

@@ -0,0 +1,18 @@
+//
+//  BrandStyle+UIStatusBarStyle.swift
+//
+//  Made with ❤️ by Novum
+//
+//  Copyright © Telefonica. All rights reserved.
+//
+
+import UIKit
+
+public extension BrandStyle {
+    var preferredStatusBarStyle: UIStatusBarStyle {
+        switch self {
+        case .movistar, .vivo, .o2, .o2New, .blau, .custom, .vivoNew, .tu, .telefonica:
+            return .lightContent
+        }
+    }
+}