✨ CSS code generation first draft

frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs

@@ -16,38 +16,13 @@
    [app.util.color :as uc]
    [app.common.math :as mth]
    [app.main.ui.icons :as i]
+   [app.util.code-gen :as code]
    [app.util.webapi :as wapi]
    [app.main.ui.components.color-bullet :refer [color-bullet color-name]]))
 
-(defn copy-cb [values properties & {:keys [to-prop format] :or {to-prop {}}}]
+(defn copy-cb [values properties & {:keys [to-prop format] :as params}]
   (fn [event]
-    (let [
-          ;; We allow the :format and :to-prop to be a map for different properties
-          ;; or just a value for a single property. This code transform a single
-          ;; property to a uniform one
-          properties (if-not (coll? properties) [properties] properties)
-
-          format (if (not (map? format))
-                   (into {} (map #(vector % format) properties))
-                   format)
-
-          to-prop (if (not (map? to-prop))
-                    (into {} (map #(vector % to-prop) properties))
-                    to-prop)
-
-          default-format (fn [value] (str (mth/precision value 2) "px"))
-          format-property (fn [prop]
-                            (let [css-prop (or (prop to-prop) (name prop))]
-                              (str/fmt "  %s: %s;" css-prop ((or (prop format) default-format) (prop values) values))))
-
-          text-props (->> properties
-                          (remove #(let [value (get values %)]
-                                     (or (nil? value) (= value 0))))
-                          (map format-property)
-                          (str/join "\n"))
-
-          result (str/fmt "{\n%s\n}" text-props)]
-
+    (let [result (code/generate-css-props values properties params)]
       (wapi/write-to-clipboard result))))
 
 (mf/defc color-row [{:keys [color format on-copy on-change-format]}]
@@ -79,3 +54,4 @@
 
      (when on-copy
        [:button.attributes-copy-button {:on-click on-copy} i/copy])]))
+

frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs

@@ -18,8 +18,8 @@
 
 (defn copy-layout [shape]
   (copy-cb shape
-           [:width :height :x :y :rotation]
-           :to-prop {:x "left" :y "top" :rotation "transform"}
+           [:width :height :x :y :radius :rx]
+           :to-prop {:x "left" :y "top" :rotation "transform" :rx "border-radius"}
            :format {:rotation #(str/fmt "rotate(%sdeg)" %)}))
 
 (mf/defc layout-block
@@ -55,6 +55,14 @@
        {:on-click (copy-cb shape :y :to-prop "top")}
        i/copy]])
 
+   (when (not= (:rx shape) 0)
+     [:div.attributes-unit-row
+      [:div.attributes-label (t locale "handoff.attributes.layout.radius")]
+      [:div.attributes-value (mth/precision (:rx shape) 2) "px"]
+      [:button.attributes-copy-button
+       {:on-click (copy-cb shape :rx :to-prop "border-radius")}
+       i/copy]])
+
    (when (not= (:rotation shape 0) 0)
      [:div.attributes-unit-row
       [:div.attributes-label (t locale "handoff.attributes.layout.rotation")]

frontend/src/app/main/ui/viewer/handoff/attributes/shadow.cljs

@@ -12,21 +12,13 @@
    [rumext.alpha :as mf]
    [cuerdas.core :as str]
    [app.util.i18n :refer [t]]
-   [app.util.color :as uc]
+   [app.util.code-gen :as cg]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.handoff.attributes.common :refer [copy-cb color-row]]))
 
 (defn has-shadow? [shape]
   (:shadow shape))
 
-(defn shadow->css [shadow]
-  (let [{:keys [style offset-x offset-y blur spread]} shadow
-        css-color (uc/color->background (:color shadow))]
-    (str
-     (if (= style :inner-shadow) "inset " "")
-     (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color))))
-
-
 (mf/defc shadow-block [{:keys [shape locale shadow]}]
   (let [color-format (mf/use-state :hex)]
     [:div.attributes-shadow-block
@@ -52,7 +44,7 @@
        {:on-click (copy-cb shadow
                            :style
                            :to-prop "box-shadow"
-                           :format #(shadow->css shadow))}
+                           :format #(cg/shadow->css shadow))}
        i/copy]]
      [:& color-row {:color (:color shadow)
                     :format @color-format
@@ -64,7 +56,7 @@
                              (copy-cb (first shapes)
                                       :shadow
                                       :to-prop "box-shadow"
-                                      :format #(str/join ", " (map shadow->css (:shadow (first shapes))))))]
+                                      :format #(str/join ", " (map cg/shadow->css (:shadow (first shapes))))))]
     (when (seq shapes)
       [:div.attributes-block
        [:div.attributes-block-title

frontend/src/app/main/ui/viewer/handoff/code.cljs

@@ -10,31 +10,33 @@
 (ns app.main.ui.viewer.handoff.code
   (:require
    ["highlight.js" :as hljs]
+   [cuerdas.core :as str]
    [rumext.alpha :as mf]
    [app.util.i18n :as i18n]
+   [app.util.color :as uc]
+   [app.util.webapi :as wapi]
+   [app.util.code-gen :as cg]
    [app.main.ui.icons :as i]
    [app.common.geom.shapes :as gsh]))
 
-(def css-example
-  "/* text layer name */
-.shape {
-    width: 142px;
-    height: 40px;
-    border-radius: 20px;
-    background-color: var(--tiffany-blue);
-}")
-
 (def svg-example
-  "<g class=\"shape\">
-  <rect fill=\"#ffffff\" fill-opacity=\"1\" x=\"629\" y=\"169\" id=\"shape-eee5fa10-5336-11ea-
-8394-2dd26e322db3\" width=\"176\" height=\"211\">
-  </rect>
-</g>")
+  "<rect
+  x=\"629\"
+  y=\"169\"
+  width=\"176\"
+  height=\"211\"
+  fill=\"#ffffff\"
+  fill-opacity=\"1\">
+</rect>")
+
+
+(defn generate-markup-code [type shapes]
+  svg-example)
 
 (mf/defc code-block [{:keys [code type]}]
   (let [block-ref (mf/use-ref)]
     (mf/use-effect
-     (mf/deps block-ref)
+     (mf/deps code type block-ref)
      (fn []
        (hljs/highlightBlock (mf/ref-val block-ref))))
     [:pre.code-display {:class type
@@ -42,39 +44,46 @@
 
 (mf/defc code
   [{:keys [shapes frame]}]
-  (let [locale (mf/deref i18n/locale)
+  (let [style-type (mf/use-state "css")
+        markup-type (mf/use-state "svg")
+
+        locale (mf/deref i18n/locale)
         shapes (->> shapes
-                    (map #(gsh/translate-to-frame % frame)))]
+                    (map #(gsh/translate-to-frame % frame)))
+
+        style-code (cg/generate-style-code @style-type shapes)
+        markup-code (generate-markup-code @markup-type shapes)]
     [:div.element-options
      [:div.code-block
       [:div.code-row-lang
        [:select.code-selection
-        [:option "CSS"]
-        [:option "SASS"]
-        [:option "Less"]
-        [:option "Stylus"]]
+        [:option {:value "css"} "CSS"]
+        #_[:option {:value "sass"} "SASS"]
+        #_[:option {:value "less"} "Less"]
+        #_[:option {:value "stylus"} "Stylus"]]
 
        [:button.attributes-copy-button
-        {:on-click #(prn "??")}
+        {:on-click #(wapi/write-to-clipboard style-code)}
         i/copy]]
 
       [:div.code-row-display
-       [:& code-block {:type "css"
-                       :code css-example}]]]
+       [:& code-block {:type @style-type
+                       :code style-code}]]]
 
      [:div.code-block
       [:div.code-row-lang
        [:select.code-selection
         [:option "SVG"]
-        [:option "HTML"]]
+        #_[:option "HTML"]]
 
        [:button.attributes-copy-button
-        {:on-click #(prn "??")}
+        {:on-click #(wapi/write-to-clipboard markup-code)}
         i/copy]]
 
       [:div.code-row-display
-       [:& code-block {:type "svg"
-                       :code svg-example}]]]
+       [:& code-block {:type @markup-type
+                       :code markup-code}]]]
 
      ]))
 
+

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -33,7 +33,7 @@
 (mf/defc right-sidebar
   [{:keys [frame]}]
   (let [locale (mf/deref i18n/locale)
-        section (mf/use-state :info #_:code)
+        section (mf/use-state #_:info :code)
         selected-ref (mf/use-memo (make-selected-shapes-iref))
         shapes (mf/deref selected-ref)]
     [:aside.settings-bar.settings-bar-right