Simple Component Driven ClojureScript examples

simple_component_driven_cljs.cljs

;; The shadow-cljs EDN configuration
{:source-paths
 ["src/main"]

 :dependencies
 [[reagent "1.1.0"]
  [arttuka/reagent-material-ui "5.2.4-0"]]

 :dev-http {8080 "public"}
 
 :builds   {

            :app {:target     :browser
                  :output-dir "public/js"
                  :asset-path "/js"
                  :modules    {:main {:init-fn component-driven.core/init}}
                  :devtools   {:after-load component-driven.core/render}}

            :story {:target     :browser
                    :output-dir "public_story/js"
                    :asset-path "/js"
                    :modules    {:main {:init-fn component-driven.story/init}}
                    :devtools   {:after-load component-driven.story/render
                                 :http-root  "public_story"
                                 :http-port  8090}}
            }
 }


;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;


;; The Story entry point
(ns component-driven.story
  (:require [reagent.dom :as rdom]
            [reagent.core :as reagent]
            [component-driven.core :as core]
            [component-driven.components.card :as card]))

(def story (reagent/atom nil))

(defn view []
  (when @story
    @story))

(defn render []
  (rdom/render [view] core/root-element))

(defn init []
  (render))

(reset! story [card/user-card
               {:header  "The Component"
                :message "a Message"
                :details "some Details"}])
  

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;


;; And the actual component being developed
(ns component-driven.components.card
  (:require [reagent-mui.components :refer [button
                                            card
                                            card-actions
                                            card-content
                                            typography]]))

(defn user-card [{:keys [header message details]}]
  [card {:sx {:min-width 275}}
   [card-content
    [typography {:variant "h5" :component "div"} header]
    [typography {:sx {:mb 1.5} :color "text.secondary"} message]
    [typography {:variant "body2"} details]]
   [card-actions
    [button {:size "small"} "Please click here"]]])