Merge pull request #5557 from penpot/niwinz-enhancements-4

✨ Add the ability to export helpers for storybook

frontend/shadow-cljs.edn

@@ -126,8 +126,10 @@
    :modules
    {:base
     {:entries []}
+
     :components
-    {:exports {default app.main.ui.ds/default}
+    {:exports {default app.main.ui.ds/default
+               helpers app.main.ui.ds.helpers/default}
      :depends-on #{:base}}}
 
    :compiler-options

frontend/src/app/main/ui/ds.cljs

@@ -24,14 +24,16 @@
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.storybook :as sb]
    [app.main.ui.ds.utilities.swatch :refer [swatch*]]
-   [app.util.i18n :as i18n]))
+   [app.util.i18n :as i18n]
+   [rumext.v2 :as mf]))
 
 
 (i18n/init! cf/translations)
 
 (def default
   "A export used for storybook"
-  #js {:Button button*
+  (mf/object
+   {:Button button*
     :Heading heading*
     :Icon icon*
     :IconButton icon-button*
@@ -47,11 +49,13 @@
     :TokenStatusIcon token-status-icon*
     :Swatch swatch*
     ;; meta / misc
-       :meta #js {:icons (clj->js (sort icon-list))
+    :meta
+    {:icons (clj->js (sort icon-list))
      :tokenStatus (clj->js (sort token-status-list))
      :svgs (clj->js (sort raw-svg-list))
      :typography (clj->js typography-list)}
-       :storybook #js {:StoryGrid sb/story-grid*
+    :storybook
+    {:StoryGrid sb/story-grid*
      :StoryGridCell sb/story-grid-cell*
      :StoryGridRow sb/story-grid-row*
-                       :StoryHeader sb/story-header*}})
+     :StoryHeader sb/story-header*}}))

frontend/src/app/main/ui/ds/helpers.cljs

@@ -0,0 +1,14 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.helpers
+  "A collection of helpers for exporting them to be used on storybook code."
+  (:require
+   [rumext.v2 :as mf]))
+
+(def default
+  (mf/object
+   {:uuid parse-uuid}))

frontend/src/app/main/ui/ds/utilities/swatch.cljs

@@ -7,11 +7,8 @@
 
 (ns app.main.ui.ds.utilities.swatch
   (:require-macros
-
    [app.main.style :as stl])
-
   (:require
-
    [app.common.data.macros :as dm]
    [app.common.json :as json]
    [app.common.schema :as sm]
@@ -22,14 +19,6 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(def ^:private schema:swatch
-  [:map {:title "SchemaSwatch"}
-   [:background {:optional true} ct/schema:color]
-   [:class {:optional true} :string]
-   [:size {:optional true} [:enum "small" "medium" "large"]]
-   [:active {:optional true} :boolean]
-   [:on-click {:optional true} fn?]])
-
 (defn- color-title
   [color-item]
   (let [name (:name color-item)
@@ -63,12 +52,28 @@
         (some? image)
         (tr "media.image")))))
 
+(def ^:private schema:swatch
+  [:map {:title "SchemaSwatch"}
+   [:background {:optional true} ct/schema:color]
+   [:class {:optional true} :string]
+   [:size {:optional true} [:enum "small" "medium" "large"]]
+   [:active {:optional true} ::sm/boolean]
+   [:on-click {:optional true} ::sm/fn]])
+
 (mf/defc swatch*
-  {::mf/props :obj
+  {::mf/schema (sm/schema schema:swatch)}
-   ::mf/schema (sm/schema schema:swatch)}
   [{:keys [background on-click size active class]
     :rest props}]
-  (let [background (if (object? background) (json/->clj background) background)
+  (let [;; NOTE: this code is only relevant for storybook, because
+        ;; storybook is unable to pass in a comfortable way a complex
+        ;; object; the "interactive" way of storybook only allows
+        ;; plain object. So for this case we accept them and
+        ;; automatically convert them to clojure map (which is exactly
+        ;; what this component expects). On normal usage of this
+        ;; component this code should be always fallback to else case.
+        background (if (object? background)
+                     (json/->clj background)
+                     background)
         read-only? (nil? on-click)
         id? (some? (:id background))
         element-type (if read-only? "div" "button")