Merge pull request #383 from tokens-studio/andrei/export-import-themes

✨ Import/Export: Themes #306 [WIP]

common/src/app/common/types/tokens_lib.cljc

@@ -926,15 +926,26 @@ Will return a value that matches this schema:
        (d/ordered-map) active-themes)))
 
   (encode-dtcg [_]
-    (into {} (comp
-              (filter (partial instance? TokenSet))
-              (map (fn [token-set]
-                     [(:name token-set) (get-dtcg-tokens-tree token-set)])))
-          (tree-seq d/ordered-map? vals sets)))
+    (let [themes (into []
+                       (comp
+                        (filter #(and (instance? TokenTheme %)
+                                      (not (hidden-temporary-theme? %))))
+                        (map (fn [token-theme]
+                               (->> token-theme
+                                    (into {})
+                                    walk/stringify-keys))))
+                       (tree-seq d/ordered-map? vals themes))
+          sets (into {} (comp
+                         (filter (partial instance? TokenSet))
+                         (map (fn [token-set]
+                                [(:name token-set) (get-dtcg-tokens-tree token-set)])))
+                     (tree-seq d/ordered-map? vals sets))]
+      (assoc sets "$themes" themes)))
 
   (decode-dtcg-json [_ parsed-json]
     (let [;; tokens-studio/plugin will add these meta properties, remove them for now
           sets-data (dissoc parsed-json "$themes" "$metadata")
+          themes-data (get parsed-json "$themes")
           lib (make-tokens-lib)
           lib' (reduce
                 (fn [lib [set-name tokens]]
@@ -942,7 +953,15 @@ Will return a value that matches this schema:
                                 :name set-name
                                 :tokens (flatten-nested-tokens-json tokens ""))))
                 lib sets-data)]
-      lib'))
+      (reduce
+       (fn [lib {:strs [name group description is-source modified-at sets]}]
+         (add-theme lib (TokenTheme. name
+                                     group
+                                     description
+                                     is-source
+                                     (dt/parse-instant modified-at)
+                                     (set sets))))
+       lib' themes-data)))
 
   (get-all-tokens [this]
     (reduce

common/test/common_tests/types/data/tokens-multi-set-example.json

@@ -796,7 +796,14 @@
       }
     }
   },
-  "$themes": [],
+  "$themes": [ {
+    "name": "theme-1",
+    "group": "group-1",
+    "description": null,
+    "is-source": false,
+    "modified-at": "2024-01-01T00:00:00.000+00:00",
+    "sets": [ "light" ]
+  } ],
   "$metadata": {
     "tokenSetOrder": ["core", "light", "dark", "theme"]
   }

common/test/common_tests/types/tokens_lib_test.cljc

@@ -1107,8 +1107,13 @@
              get-set-token (fn [set-name token-name]
                              (some-> (ctob/get-set lib set-name)
                                      (ctob/get-token token-name)
-                                     (dissoc :modified-at)))]
+                                     (dissoc :modified-at)))
+             token-theme (ctob/get-theme lib "group-1" "theme-1")]
          (t/is (= '("core" "light" "dark" "theme") (ctob/get-ordered-set-names lib)))
+         (t/testing "set exists in theme"
+           (t/is (= (:group token-theme) "group-1"))
+           (t/is (= (:name token-theme) "theme-1"))
+           (t/is (= (:sets token-theme) #{"light"})))
          (t/testing "tokens exist in core set"
            (t/is (= (get-set-token "core" "colors.red.600")
                     {:name "colors.red.600"
@@ -1129,7 +1134,8 @@
            (t/is (nil? (get-set-token "typography" "H1.Bold"))))))
 
      (t/testing "encode-dtcg-json"
-       (let [tokens-lib (-> (ctob/make-tokens-lib)
+       (let [now (dt/now)
+             tokens-lib (-> (ctob/make-tokens-lib)
                             (ctob/add-set (ctob/make-token-set :name "core"
                                                                :tokens {"colors.red.600"
                                                                         (ctob/make-token
@@ -1146,9 +1152,19 @@
                                                                         (ctob/make-token
                                                                          {:name "button.primary.background"
                                                                           :type :color
-                                                                          :value "{accent.default}"})})))
+                                                                          :value "{accent.default}"})}))
+                            (ctob/add-theme (ctob/make-token-theme :name "theme-1"
+                                                                   :group "group-1"
+                                                                   :modified-at now
+                                                                   :sets #{"core"})))
              expected (ctob/encode-dtcg tokens-lib)]
-         (t/is (= {"core"
+         (t/is (= {"$themes" [{"description" nil
+                               "group" "group-1"
+                               "is-source" false
+                               "modified-at" now
+                               "name" "theme-1"
+                               "sets" #{"core"}}]
+                   "core"
                    {"colors" {"red" {"600" {"$value" "#e53e3e"
                                             "$type" "color"}}}
                     "spacing"
@@ -1189,4 +1205,3 @@
              (t/is (= @with-prev-tokens-lib @tokens-lib)))
            (t/testing "fresh tokens library is also equal"
              (= @with-empty-tokens-lib @tokens-lib)))))))
-

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -323,12 +323,12 @@
                                                   :timeout 9000})))))
             (set! (.-value (mf/ref-val input-ref)) "")))
         on-export (fn []
-                    (let [tokens-blob (some-> (deref refs/tokens-lib)
+                    (let [tokens-json (some-> (deref refs/tokens-lib)
                                               (ctob/encode-dtcg)
                                               (clj->js)
-                                              (js/JSON.stringify nil 2)
-                                              (wapi/create-blob "application/json"))]
-                      (dom/trigger-download "tokens.json" tokens-blob)))]
+                                              (js/JSON.stringify nil 2))]
+                      (->> (wapi/create-blob (or tokens-json "{}") "application/json")
+                           (dom/trigger-download "tokens.json"))))]
 
     [:div {:class (stl/css :import-export-button-wrapper)}
      [:input {:type "file"

frontend/translations/en.po

@@ -6583,7 +6583,7 @@ msgstr "Name"
 
 #: src/app/main/ui/workspace/tokens/form.cljs
 msgid "workspace.token.enter-token-name"
-msgstr "Enter %s token name" 
+msgstr "Enter %s token name"
 
 #: src/app/main/ui/workspace/tokens/form.cljs
 msgid "workspace.token.token-value"