re-organize, split form related code from ui

sparkboard · Dec 19, 2023 · bb378a1 · bb378a1
1 parent 80086cb
commit bb378a1
Show file tree

Hide file tree

Showing 34 changed files with 910 additions and 871 deletions.
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/src/sparkboard.css b/src/sparkboard.css
@@ -256,6 +256,13 @@
 
 @layer components {
 
+    .field-label {
+        @apply block font-bold text-base
+    }
+    .field-wrapper {
+        @apply gap-2 flex-v relative
+    }
+
     /* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
     .auto-size {
         @apply grid
@@ -371,6 +378,7 @@
         ring-offset-back bg-primary text-primary-txt
         hover:bg-primary/90 focus-visible:bg-primary/90
         disabled:bg-primary active:ring-0
+        px-6 py-3
     }
 
     .btn-darken {

diff --git a/src/sparkboard/app.cljc b/src/sparkboard/app.cljc
@@ -1,7 +1,7 @@
 (ns sparkboard.app
   (:require [sparkboard.slack.schema]
             [sparkboard.app.account.ui]
-            [sparkboard.app.assets.ui]
+            [sparkboard.app.asset.ui]
             [sparkboard.app.board.ui]
             [sparkboard.app.chat.ui]
             [sparkboard.app.collection.ui]

diff --git a/src/sparkboard/app/account/ui.cljc b/src/sparkboard/app/account/ui.cljc
@@ -1,20 +1,21 @@
 (ns sparkboard.app.account.ui
-  (:require
-    #?(:cljs ["@radix-ui/react-dropdown-menu" :as dm])
-    [inside-out.forms :as forms]
-    [promesa.core :as p]
-    [re-db.api :as db]
-    [sparkboard.i18n :refer [tr]]
-    [sparkboard.routing :as routes]
-    [sparkboard.ui :as ui]
-    [sparkboard.ui.header :as header]
-    [sparkboard.ui.icons :as icons]
-    [sparkboard.app.entity.ui :as entity.ui]
-    [sparkboard.ui.radix :as radix]
-    [sparkboard.util :as u]
-    [yawn.hooks :as h]
-    [yawn.view :as v]
-    [sparkboard.app.account.data :as data]))
+  (:require #?(:cljs ["@radix-ui/react-dropdown-menu" :as dm])
+            [inside-out.forms :as forms]
+            [promesa.core :as p]
+            [re-db.api :as db]
+            [sparkboard.app.account.data :as data]
+            [sparkboard.app.entity.ui :as entity.ui]
+            [sparkboard.app.field-entry.ui :as entry.ui]
+            [sparkboard.app.form.ui :as form.ui]
+            [sparkboard.app.views.header :as header]
+            [sparkboard.app.views.radix :as radix]
+            [sparkboard.app.views.ui :as ui]
+            [sparkboard.i18n :refer [tr]]
+            [sparkboard.icons :as icons]
+            [sparkboard.routing :as routes]
+            [sparkboard.util :as u]
+            [yawn.hooks :as h]
+            [yawn.view :as v]))
 
 (ui/defview new-menu [params]
   (radix/dropdown-menu {:id       :new-menu
@@ -44,7 +45,7 @@
                          [{:on-select #(routes/nav! (routes/entity-route entity 'show) entity)}
                           (:entity/title entity)])
                        recents)})
-     (radix/dropdown-menu {:trigger [:div.btn-white.btn (tr :tr/new) down-arrow]
+     (radix/dropdown-menu {:trigger  [:div.btn-white.btn (tr :tr/new) down-arrow]
                            :children [[{:on-select #(routes/nav! 'sparkboard.app.board-data/new params)} (tr :tr/board)]
                                       [{:on-select #(routes/nav! 'sparkboard.app.org-data/new params)} (tr :tr/org)]]})
      [header/chat]
@@ -84,9 +85,9 @@
 
 
        [:div.flex-v.gap-2
-        [ui/text-field ?email]
+        [entry.ui/text-field ?email]
         (when (= :password @!step)
-          [ui/text-field ?password {:id "account-password"}])
+          [entry.ui/text-field ?password {:id "account-password"}])
         (str (forms/visible-messages !account))
         [:button.btn.btn-primary.w-full.h-10.text-sm.p-3
          (tr :tr/continue-with-email)]]
@@ -131,7 +132,7 @@
        (when-let [{:keys [org board project]} entities]
          [:div.p-body.flex-v.gap-8
           (when (> (count all) 6)
-            [ui/filter-field ?filter])
+            [form.ui/filter-field ?filter])
           (let [limit (partial ui/truncate-items {:limit 10})]
             [:div.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-2.md:gap-8.-mx-2
              (when (seq project)

diff --git a/src/sparkboard/app/assets/data.cljc → src/sparkboard/app/asset/data.cljc b/src/sparkboard/app/assets/data.cljc → src/sparkboard/app/asset/data.cljc
@@ -1,4 +1,4 @@
-(ns sparkboard.app.assets.data
+(ns sparkboard.app.asset.data
   (:require #?(:clj [ring.util.response :as resp])
             #?(:clj [sparkboard.server.assets :as assets])
             [sparkboard.authorize :as az]

diff --git a/src/sparkboard/app/asset/ui.cljc b/src/sparkboard/app/asset/ui.cljc
@@ -0,0 +1,14 @@
+(ns sparkboard.app.asset.ui
+  (:require [sparkboard.query-params :as query-params]
+            [sparkboard.app.asset.data]))
+
+(def variants {:avatar {:op "bound" :width 200 :height 200}
+               :card   {:op "bound" :width 600}
+               :page   {:op "bound" :width 1200}})
+
+(defn asset-src [asset variant]
+  (when-let [id (:entity/id asset)]
+    (str "/assets/" id
+         (some-> (variants variant) query-params/query-string))))
+
+(defn css-url [s] (str "url(" s ")"))
diff --git a/src/sparkboard/app/assets/ui.cljc b/src/sparkboard/app/assets/ui.cljc
diff --git a/src/sparkboard/app/board/ui.cljc b/src/sparkboard/app/board/ui.cljc
@@ -3,17 +3,21 @@
             [promesa.core :as p]
             [re-db.api :as db]
             [sparkboard.app.account.data :as account.data]
+            [sparkboard.app.asset.ui :as asset.ui]
             [sparkboard.app.board.data :as data]
             [sparkboard.app.domain.ui :as domain.ui]
             [sparkboard.app.entity.ui :as entity.ui]
+            [sparkboard.app.field-entry.ui :as entry.ui]
             [sparkboard.app.field.ui :as field.ui]
+            [sparkboard.app.form.ui :as form.ui]
             [sparkboard.app.project.data :as project.data]
             [sparkboard.app.project.ui :as project.ui]
+            [sparkboard.app.form.ui :as form.ui]
+            [sparkboard.app.views.header :as header]
+            [sparkboard.app.views.radix :as radix]
+            [sparkboard.app.views.ui :as ui]
             [sparkboard.i18n :refer [tr]]
             [sparkboard.routing :as routing]
-            [sparkboard.ui :as ui]
-            [sparkboard.ui.header :as header]
-            [sparkboard.ui.radix :as radix]
             [sparkboard.util :as u]
             [yawn.hooks :as h]
             [yawn.view :as v]))
@@ -36,39 +40,39 @@
                                                                                 :entity/id)))))]})
                       :required [?title ?domain]]
       [:form
-       {:class     ui/form-classes
+       {:class     form.ui/form-classes
         :on-submit (fn [^js e]
                      (.preventDefault e)
                      (ui/with-submission [result (data/new! {:board @!board})
                                           :form !board]
-                       (routing/nav! `show {:board-id (:entity/id result)})))
+                                         (routing/nav! `show {:board-id (:entity/id result)})))
         :ref       (ui/use-autofocus-ref)}
        [:h2.text-2xl (tr :tr/new-board)]
 
        (when owners
          [:div.flex-v.gap-2
-          [ui/input-label {} (tr :tr/owner)]
+          [:label.field-label {} (tr :tr/owner)]
           (radix/select-menu {:value           @?owner
                               :on-value-change (partial reset! ?owner)
                               :options
                               (->> owners
                                    (map (fn [{:keys [entity/id entity/title image/avatar]}]
                                           {:value (str id)
                                            :text  title
-                                           :icon  [:img.w-5.h-5.rounded-sm {:src (ui/asset-src avatar :avatar)}]})))})])
+                                           :icon  [:img.w-5.h-5.rounded-sm {:src (asset.ui/asset-src avatar :avatar)}]})))})])
 
-       [ui/text-field ?title {:label (tr :tr/title)}]
+       [entry.ui/text-field ?title {:label (tr :tr/title)}]
        (domain.ui/domain-field ?domain)
-       [ui/submit-form !board (tr :tr/create)]])))
+       [form.ui/submit-form !board (tr :tr/create)]])))
 
 (ui/defview register
   {:route "/b/:board-id/register"}
   [{:as params :keys [route]}]
   (ui/with-form [!member {:member/name ?name :member/password ?pass}]
     [:div
      [:h3 (tr :tr/register)]
-     [ui/text-field ?name]
-     [ui/text-field ?pass]
+     [entry.ui/text-field ?name]
+     [entry.ui/text-field ?pass]
      [:button {:on-click #(p/let [res (routing/POST route @!member)]
                             ;; TODO - how to determine POST success?
                             #_(when (http-ok? res)
@@ -105,7 +109,7 @@
      [:div.p-body
 
       [:div.flex.gap-4.items-stretch
-       [ui/filter-field ?filter]
+       [form.ui/filter-field ?filter]
        [action-button
         {:on-click (fn [_]
                      (p/let [{:as   result
@@ -148,11 +152,11 @@
   (let [board (data/settings params)]
     [:<>
      (header/entity board)
-     [:div {:class ui/form-classes}
-      (entity.ui/use-persisted board :entity/title ui/text-field {:class "text-lg"})
-      (entity.ui/use-persisted board :entity/description ui/prose-field {:class "bg-gray-100 px-3 py-3"})
+     [:div {:class form.ui/form-classes}
+      (entity.ui/use-persisted board :entity/title entry.ui/text-field {:class "text-lg"})
+      (entity.ui/use-persisted board :entity/description entry.ui/prose-field {:class "bg-gray-100 px-3 py-3"})
       (entity.ui/use-persisted board :entity/domain domain.ui/domain-field)
-      (entity.ui/use-persisted board :image/avatar ui/image-field {:label (tr :tr/image.logo)})
+      (entity.ui/use-persisted board :image/avatar entry.ui/image-field {:label (tr :tr/image.logo)})
 
       (field.ui/fields-editor board :board/member-fields)
       (field.ui/fields-editor board :board/project-fields)

diff --git a/src/sparkboard/app/chat/ui.cljc b/src/sparkboard/app/chat/ui.cljc
@@ -3,13 +3,14 @@
             [clojure.string :as str]
             [promesa.core :as p]
             [sparkboard.app.chat.data :as data]
+            [sparkboard.app.field-entry.ui :as entry.ui]
             [sparkboard.app.member.data :as member.data]
+            [sparkboard.app.views.radix :as radix]
+            [sparkboard.app.views.ui :as ui]
             [sparkboard.i18n :refer [tr]]
+            [sparkboard.icons :as icons]
             [sparkboard.routing :as routes]
             [sparkboard.schema :as sch]
-            [sparkboard.ui :as ui]
-            [sparkboard.ui.icons :as icons]
-            [sparkboard.ui.radix :as radix]
             [sparkboard.util :as u]
             [yawn.hooks :as h]
             [yawn.view :as v]))
@@ -60,7 +61,7 @@
         {:class (when (data/unread? account-id chat)
                   "bg-blue-500")}]]
       [:div.text-gray-700.hidden.md:line-clamp-2.text-sm
-       (ui/show-prose
+       (entry.ui/show-prose
          (cond-> (:chat.message/content last-message)
                  (sch/id= account-id (:entity/created-by last-message))
                  (update :prose/string (partial str (tr :tr/you) " "))))]]]))
@@ -85,7 +86,7 @@
               "bg-blue-500 text-white place-self-end"
               "bg-gray-100 text-gray-900 place-self-start")]
     :key   id}
-   (ui/show-prose content)])
+   (entry.ui/show-prose content)])
 
 (ui/defview chat-header [{:keys [account-id chat]}]
   (let [close-icon [icons/close "w-6 h-6 hover:opacity-50"]]
@@ -134,7 +135,7 @@
              (sort-by :entity/created-at)
              (map (partial chat-message params))
              doall)]
-       [ui/auto-size
+       [entry.ui/auto-size
         {:class       [search-classes
                        "m-1 whitespace-pre-wrap min-h-[38px] flex-none"]
          :type        "text"

diff --git a/src/sparkboard/app/domain/ui.cljc b/src/sparkboard/app/domain/ui.cljc
@@ -3,8 +3,10 @@
             [inside-out.forms :as forms]
             [promesa.core :as p]
             [sparkboard.app.domain.data :as data]
+            [sparkboard.app.field-entry.ui :as entry.ui]
+            [sparkboard.app.form.ui :as form.ui]
             [sparkboard.i18n :refer [tr]]
-            [sparkboard.ui :as ui]))
+            [sparkboard.app.views.ui :as ui]))
 
 #?(:cljs
    (defn availability-validator []
@@ -24,19 +26,19 @@
 
 #?(:cljs
    (defn domain-field [?domain & [props]]
-     [ui/input-wrapper
-      [ui/show-label ?domain]
+     [:div.field-wrapper
+      [form.ui/show-label ?domain]
       [:div.flex.gap-2.items-stretch
-       (ui/text-field ?domain (merge {:wrap          (fn [v]
-                                                       (when-not (str/blank? v)
-                                                         {:domain/name (data/qualify-domain (data/normalize-domain v))}))
-                                      :unwrap        (fn [v]
-                                                       (or (some-> v :domain/name data/unqualify-domain) ""))
-                                      :auto-complete "off"
-                                      :spell-check   false
-                                      :wrapper-class "flex-auto"}
-                                     props
-                                     {:label false}))
+       (entry.ui/text-field ?domain (merge {:wrap          (fn [v]
+                                                             (when-not (str/blank? v)
+                                                               {:domain/name (data/qualify-domain (data/normalize-domain v))}))
+                                            :unwrap        (fn [v]
+                                                             (or (some-> v :domain/name data/unqualify-domain) ""))
+                                            :auto-complete "off"
+                                            :spell-check   false
+                                            :wrapper-class "flex-auto"}
+                                           props
+                                           {:label false}))
        [:div.flex.items-center.text-sm.text-gray-500.h-10 ".sparkboard.com"]]]))
 
 #?(:cljs

diff --git a/src/sparkboard/app/entity/data.cljc b/src/sparkboard/app/entity/data.cljc
@@ -33,7 +33,7 @@
                                  #_#_:db/fulltext true}
      :entity/field-entries      {s- [:map-of :uuid :field-entry/as-map]}
      :entity/video              {:doc "Primary video for project (distinct from fields)"
-                                 s-   :video/entry}
+                                 s-   :video/url}
      :entity/public?            {:doc "Contents of this entity can be accessed without authentication (eg. and indexed by search engines)"
                                  s-   :boolean}
      :entity/website            {:doc "External website for entity"

diff --git a/src/sparkboard/app/entity/ui.cljc b/src/sparkboard/app/entity/ui.cljc
@@ -1,9 +1,10 @@
 (ns sparkboard.app.entity.ui
   (:require [inside-out.forms :as forms]
+            [sparkboard.app.asset.ui :as asset.ui]
             [sparkboard.app.entity.data :as data]
             [sparkboard.routing :as routing]
-            [sparkboard.ui :as ui]
-            [sparkboard.ui.icons :as icons]
+            [sparkboard.app.views.ui :as ui]
+            [sparkboard.icons :as icons]
             [sparkboard.validate :as validate]
             [yawn.hooks :as h]
             [yawn.view :as v]))
@@ -43,7 +44,7 @@
         (merge {:class ["w-12 sm:w-16"
                         "bg-no-repeat sm:bg-secondary bg-center bg-contain"]}
                (when avatar
-                 {:style {:background-image (ui/css-url (ui/asset-src avatar :avatar))}})))])
+                 {:style {:background-image (asset.ui/css-url (asset.ui/asset-src avatar :avatar))}})))])
    [:div.flex.items-center.px-3.leading-snug
     [:div.line-clamp-2 title]]])
 

diff --git a/src/sparkboard/app/field/data.cljc b/src/sparkboard/app/field/data.cljc
@@ -6,8 +6,8 @@
             [sparkboard.query :as q]
             [sparkboard.schema :as sch :refer [? s-]]
             [sparkboard.server.datalevin :as dl]
-            [sparkboard.ui :as ui]
-            [sparkboard.ui.icons :as icons]
+            [sparkboard.app.views.ui :as ui]
+            [sparkboard.icons :as icons]
             [sparkboard.validate :as validate]
             [yawn.hooks :as h]
             [yawn.view :as v]))
@@ -69,8 +69,6 @@
    :field-option/label          {s- :string},
    :field-option/value          {s- :string},
    :video/url                   {s- :string}
-   :video/entry                 {s- [:map {:closed true}
-                                     :video/url]}
    :image-list/images {s- [:sequential :entity/id]}
    :link-list/links             {s- [:sequential :link-list/link]}
    :select/value                {s- :string}