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,34 +24,38 @@
    [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
-       :Heading heading*
+   {:Button button*
-       :Icon icon*
+    :Heading heading*
-       :IconButton icon-button*
+    :Icon icon*
-       :Input input*
+    :IconButton icon-button*
-       :EmptyPlaceholder empty-placeholder*
+    :Input input*
-       :Loader loader*
+    :EmptyPlaceholder empty-placeholder*
-       :RawSvg raw-svg*
+    :Loader loader*
-       :Select select*
+    :RawSvg raw-svg*
-       :Combobox combobox*
+    :Select select*
-       :Text text*
+    :Combobox combobox*
-       :TabSwitcher tab-switcher*
+    :Text text*
-       :Toast toast*
+    :TabSwitcher tab-switcher*
-       :TokenStatusIcon token-status-icon*
+    :Toast toast*
-       :Swatch swatch*
+    :TokenStatusIcon token-status-icon*
-       ;; meta / misc
+    :Swatch swatch*
-       :meta #js {:icons (clj->js (sort icon-list))
+    ;; meta / misc
-                  :tokenStatus (clj->js (sort token-status-list))
+    :meta
-                  :svgs (clj->js (sort raw-svg-list))
+    {:icons (clj->js (sort icon-list))
-                  :typography (clj->js typography-list)}
+     :tokenStatus (clj->js (sort token-status-list))
-       :storybook #js {:StoryGrid sb/story-grid*
+     :svgs (clj->js (sort raw-svg-list))
-                       :StoryGridCell sb/story-grid-cell*
+     :typography (clj->js typography-list)}
-                       :StoryGridRow sb/story-grid-row*
+    :storybook
-                       :StoryHeader sb/story-header*}})
+    {:StoryGrid sb/story-grid*
+     :StoryGridCell sb/story-grid-cell*
+     :StoryGridRow sb/story-grid-row*
+     :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")