✨ Add the ability to export helpers for storybook

Also add a note for how pass complex objects on swatch component

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")