refactor(ui): simplify the old shui codes and remove support for the table.v2

deps/shui/src/logseq/shui/context.cljs

@@ -1,29 +0,0 @@
-(ns logseq.shui.context)
-
-(defn inline->inline-block [inline block-config]
-  (fn [_context item]
-    (inline block-config item)))
-
-(defn inline->map-inline-block [inline block-config]
-  (let [inline* (inline->inline-block inline block-config)]
-    (fn [context col]
-      (map #(inline* context %) col))))
-
-(defn make-context [{:keys [block-config config inline int->local-time-2 blocks-container page-cp page] :as props}]
-  (merge props {;; Until components are converted over, they need to fallback to the old inline function
-                ;; Wrap the old inline function to allow for interception, but fallback to the old inline function
-                :inline-block (inline->inline-block inline block-config)
-                :map-inline-block (inline->map-inline-block inline block-config)
-                ;; Currently frontend component are provided an object map containing at least the following keys:
-                ;; These will be passed through in a whitelisted fashion so as to be able to track the dependencies
-                ;; back to the core application
-                ;; TODO: document the following
-                :block (:block block-config)  ;; the db entity of the current block
-                :block? (:block? block-config)
-                :editor-box (:editor-box block-config)
-                :id (:id block-config)
-                :mode? (:mode? block-config)
-                :query-result (:query-result block-config)
-                :sidebar? (:sidebar? block-config)
-                :uuid (:uuid block-config)
-                :whiteboard? (:whiteboard? block-config)}))

deps/shui/src/logseq/shui/core.cljs

@@ -1,24 +0,0 @@
-(ns logseq.shui.core
-  (:require
-    [logseq.shui.context :as shui.context]
-    [logseq.shui.icon.v2 :as shui.icon.v2]
-    [logseq.shui.list-item.v1 :as shui.list-item.v1]
-    [logseq.shui.table.v2 :as shui.table.v2]
-    [logseq.shui.shortcut.v1 :as shui.shortcut.v1]))
-
-;; table component
-(def table shui.table.v2/root)
-(def table-v2 shui.table.v2/root)
-
-;; shortcut
-(def shortcut shui.shortcut.v1/root)
-
-;; icon
-(def icon shui.icon.v2/root)
-
-;; list-item
-(def list-item shui.list-item.v1/root)
-(def list-item-v1 shui.list-item.v1/root)
-
-;; context
-(def make-context shui.context/make-context)

deps/shui/src/logseq/shui/shortcut/v1.cljs

@@ -1,6 +1,6 @@
 (ns logseq.shui.shortcut.v1
   (:require [clojure.string :as string]
-            [logseq.shui.ui :as ui]
+            [logseq.shui.base.core :as shui.base]
             [rum.core :as rum]
             [goog.userAgent]))
 
@@ -65,12 +65,12 @@
   [ks size {:keys [interactive?]}]
   (let [tiles (map print-shortcut-key ks)
         interactive? (true? interactive?)]
-    (ui/button {:variant (if interactive? :default :text)
-                :class   (str "bg-gray-03 text-gray-10 px-1.5 py-0 leading-4 h-5 rounded font-normal "
-                           (if interactive?
-                             "hover:bg-gray-04 active:bg-gray-03 hover:text-gray-12"
-                             "bg-transparent cursor-default active:bg-gray-03 hover:text-gray-11 opacity-80"))
-                :size    size}
+    (shui.base/button {:variant (if interactive? :default :text)
+                       :class (str "bg-gray-03 text-gray-10 px-1.5 py-0 leading-4 h-5 rounded font-normal "
+                                (if interactive?
+                                  "hover:bg-gray-04 active:bg-gray-03 hover:text-gray-12"
+                                  "bg-transparent cursor-default active:bg-gray-03 hover:text-gray-11 opacity-80"))
+                       :size size}
       (for [[index tile] (map-indexed vector tiles)]
         [:<>
          (when (< 0 index)

deps/shui/src/logseq/shui/ui.cljs

@@ -1,6 +1,8 @@
 (ns logseq.shui.ui
   (:require [logseq.shui.util :as util]
             [logseq.shui.icon.v2 :as icon-v2]
+            [logseq.shui.shortcut.v1 :as shui.shortcut.v1]
+            [logseq.shui.list-item.v1 :as shui.list-item.v1]
             [logseq.shui.toaster.core :as toaster-core]
             [logseq.shui.select.core :as select-core]
             [logseq.shui.select.multi :as select-multi]
@@ -13,6 +15,8 @@
 (def link base-core/link)
 (def trigger-as base-core/trigger-as)
 (def trigger-child-wrap base-core/trigger-child-wrap)
+(def ^:todo shortcut shui.shortcut.v1/root)
+(def ^:todo list-item shui.list-item.v1/root)
 (def ^:export tabler-icon icon-v2/root)
 
 (def alert (util/lsui-wrap "Alert"))

src/main/frontend/components/block.cljs

@@ -56,7 +56,6 @@
             [frontend.mobile.intent :as mobile-intent]
             [frontend.modules.outliner.tree :as tree]
             [frontend.security :as security]
-            [frontend.shui :refer [get-shui-component-version make-shui-context]]
             [frontend.state :as state]
             [frontend.template :as template]
             [frontend.ui :as ui]
@@ -79,7 +78,6 @@
             [logseq.common.util.block-ref :as block-ref]
             [logseq.common.util.page-ref :as page-ref]
             [logseq.common.util.macro :as macro-util]
-            [logseq.shui.core :as shui-core]
             [medley.core :as medley]
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
@@ -3290,51 +3288,44 @@
 (defn table
   [config {:keys [header groups col_groups]}]
 
-  (case (get-shui-component-version :table config)
-    2 (let [v2-config (cond-> config
-                        (config/db-based-graph? (state/get-current-repo))
-                        (assoc-in [:block :properties]
-                                  (db-pu/readable-properties (get-in config [:block :block/properties]))))]
-        (shui-core/table-v2 {:data (concat [[header]] groups)}
-                       (make-shui-context v2-config inline)))
-    1 (let [tr (fn [elm cols]
-                 (->elem
-                  :tr
-                  (mapv (fn [col]
-                          (->elem
-                           elm
-                           {:scope "col"
-                            :class "org-left"}
-                           (map-inline config col)))
-                        cols)))
-            tb-col-groups (try
-                            (mapv (fn [number]
-                                    (let [col-elem [:col {:class "org-left"}]]
-                                      (->elem
-                                       :colgroup
-                                       (repeat number col-elem))))
-                                  col_groups)
-                            (catch :default _e
-                              []))
-            head (when header
-                   [:thead (tr :th header)])
-            groups (mapv (fn [group]
-                           (->elem
-                            :tbody
-                            (mapv #(tr :td %) group)))
-                         groups)]
-        [:div.table-wrapper
-         (->elem
-          :table
-          {:class "table-auto"
-           :border 2
-           :cell-spacing 0
-           :cell-padding 6
-           :rules "groups"
-           :frame "hsides"}
-          (vec-cat
-           tb-col-groups
-           (cons head groups)))])))
+  (let [tr (fn [elm cols]
+             (->elem
+               :tr
+               (mapv (fn [col]
+                       (->elem
+                         elm
+                         {:scope "col"
+                          :class "org-left"}
+                         (map-inline config col)))
+                 cols)))
+        tb-col-groups (try
+                        (mapv (fn [number]
+                                (let [col-elem [:col {:class "org-left"}]]
+                                  (->elem
+                                    :colgroup
+                                    (repeat number col-elem))))
+                          col_groups)
+                        (catch :default _e
+                          []))
+        head (when header
+               [:thead (tr :th header)])
+        groups (mapv (fn [group]
+                       (->elem
+                         :tbody
+                         (mapv #(tr :td %) group)))
+                 groups)]
+    [:div.table-wrapper
+     (->elem
+       :table
+       {:class "table-auto"
+        :border 2
+        :cell-spacing 0
+        :cell-padding 6
+        :rules "groups"
+        :frame "hsides"}
+       (vec-cat
+         tb-col-groups
+         (cons head groups)))]))
 
 (defn logbook-cp
   [log]

src/main/frontend/components/cmdk.cljs

@@ -17,7 +17,6 @@
    [frontend.util.page :as page-util]
    [goog.functions :as gfun]
    [goog.object :as gobj]
-   [logseq.shui.core :as shui-core]
    [logseq.shui.ui :as shui]
    [promesa.core :as p]
    [rum.core :as rum]
@@ -598,37 +597,37 @@
           (if (= show :more)
             [:div.flex.flex-row.gap-1.items-center
              "Show less"
-             (shui-core/shortcut "mod up" nil)]
+             (shui/shortcut "mod up" nil)]
             [:div.flex.flex-row.gap-1.items-center
              "Show more"
-             (shui-core/shortcut "mod down" nil)])])]
+             (shui/shortcut "mod down" nil)])])]
 
       [:div.search-results
        (for [item visible-items
              :let [highlighted? (= item highlighted-item)]]
-         (let [item (shui-core/list-item (assoc item
-                                           :query (when-not (= group :create) @(::input state))
-                                           :compact true
-                                           :rounded false
-                                           :hoverable @*mouse-active?
-                                           :highlighted highlighted?
+         (let [item (shui/list-item (assoc item
+                                      :query (when-not (= group :create) @(::input state))
+                                      :compact true
+                                      :rounded false
+                                      :hoverable @*mouse-active?
+                                      :highlighted highlighted?
                                       ;; for some reason, the highlight effect does not always trigger on a
                                       ;; boolean value change so manually pass in the dep
-                                           :on-highlight-dep highlighted-item
-                                           :on-click (fn [e]
-                                                       (reset! (::highlighted-item state) item)
-                                                       (handle-action :default state item)
-                                                       (when-let [on-click (:on-click item)]
-                                                         (on-click e)))
+                                      :on-highlight-dep highlighted-item
+                                      :on-click (fn [e]
+                                                  (reset! (::highlighted-item state) item)
+                                                  (handle-action :default state item)
+                                                  (when-let [on-click (:on-click item)]
+                                                    (on-click e)))
                                       ;; :on-mouse-enter (fn [e]
                                       ;;                   (when (not highlighted?)
                                       ;;                     (reset! (::highlighted-item state) (assoc item :mouse-enter-triggered-highlight true))))
-                                           :on-highlight (fn [ref]
-                                                           (reset! (::highlighted-group state) group)
-                                                           (when (and ref (.-current ref)
-                                                                      (not (:mouse-enter-triggered-highlight @(::highlighted-item state))))
-                                                             (scroll-into-view-when-invisible state (.-current ref)))))
-                                    nil)]
+                                      :on-highlight (fn [ref]
+                                                      (reset! (::highlighted-group state) group)
+                                                      (when (and ref (.-current ref)
+                                                              (not (:mouse-enter-triggered-highlight @(::highlighted-item state))))
+                                                        (scroll-into-view-when-invisible state (.-current ref)))))
+                      nil)]
            (if (= group :blocks)
              (ui/lazy-visible (fn [] item) {:trigger-once? true})
              item)))]]]))
@@ -776,10 +775,10 @@
   (rand-nth
    [[:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
      [:div "Type"]
-     (shui-core/shortcut "/")
+     (shui/shortcut "/")
      [:div "to filter search results"]]
     [:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
-     (shui-core/shortcut ["mod" "enter"])
+     (shui/shortcut ["mod" "enter"])
      [:div "to open search in the sidebar"]]]))
 
 (rum/defcs tip <
@@ -791,7 +790,7 @@
       filter
       [:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
        [:div "Type"]
-       (shui-core/shortcut "esc" {:tiled false})
+       (shui/shortcut "esc" {:tiled false})
        [:div "to clear search filter"]]
 
       :else

src/main/frontend/components/query_table.cljs

@@ -8,12 +8,10 @@
             [frontend.format.block :as block]
             [frontend.handler.common :as common-handler]
             [frontend.handler.property :as property-handler]
-            [frontend.shui :refer [get-shui-component-version make-shui-context]]
             [frontend.state :as state]
             [frontend.util :as util]
             [frontend.util.clock :as clock]
             [frontend.handler.file-based.property :as file-property-handler]
-            [logseq.shui.core :as shui]
             [medley.core :as medley]
             [rum.core :as rum]
             [promesa.core :as p]
@@ -287,7 +285,7 @@
                                          :db-graph? db-graph?}))]))]))]]]))
 
 (rum/defc result-table < rum/reactive
-  [config current-block result {:keys [page?] :as options} map-inline page-cp ->elem inline-text inline]
+  [config current-block result {:keys [page?] :as options} map-inline page-cp ->elem inline-text]
   (when current-block
     (let [db-graph? (config/db-based-graph? (state/get-current-repo))
           result' (cond-> (if page? result (attach-clock-property result))
@@ -295,27 +293,15 @@
                     ((fn [res]
                        (map #(if (:block/content %)
                                (update % :block/content
-                                       db-content/special-id-ref->page-ref
-                                       ;; Lookup here instead of initial query as advanced queries
-                                       ;; won't usually have a ref's name
-                                       (map (fn [m] (db/entity (:db/id m))) (:block/refs %)))
+                                 db-content/special-id-ref->page-ref
+                                 ;; Lookup here instead of initial query as advanced queries
+                                 ;; won't usually have a ref's name
+                                 (map (fn [m] (db/entity (:db/id m))) (:block/refs %)))
                                %)
-                            res))))
+                         res))))
           columns (get-columns current-block result' {:page? page?})
           ;; Sort state needs to be in sync between final result and sortable title
           ;; as user needs to know if there result is sorted
           sort-state (get-sort-state current-block {:db-graph? db-graph?})
-          sort-result (sort-result result' (assoc sort-state :page? page?))
-          table-version (get-shui-component-version :table config)]
-      (case table-version
-        2 (let [v2-columns (mapv #(if (uuid? %) (db-pu/get-property-name %) %) columns)
-                v2-config (cond-> config
-                            db-graph?
-                            (assoc-in [:block :properties]
-                                      (db-pu/readable-properties (get-in config [:block :block/properties]))))
-                result-as-text (for [row result']
-                                 (for [column columns]
-                                   (build-column-text row column)))]
-            (shui/table-v2 {:data (conj [[v2-columns]] result-as-text)}
-                           (make-shui-context v2-config inline)))
-        1 (result-table-v1 config current-block sort-result sort-state columns options map-inline page-cp ->elem inline-text)))))
+          sort-result (sort-result result' (assoc sort-state :page? page?))]
+      (result-table-v1 config current-block sort-result sort-state columns options map-inline page-cp ->elem inline-text))))

src/main/frontend/components/shortcut.cljs

@@ -15,8 +15,7 @@
             [frontend.modules.shortcut.data-helper :as dh]
             [frontend.util :as util]
             [frontend.modules.shortcut.utils :as shortcut-utils]
-            [frontend.modules.shortcut.config :as shortcut-config]
-            [logseq.shui.core :as shui-core])
+            [frontend.modules.shortcut.config :as shortcut-config])
   (:import [goog.events KeyHandler]))
 
 (defonce categories
@@ -477,6 +476,6 @@
 
                         (not unset?)
                         [:code.flex.items-center.bg-transparent
-                         (shui-core/shortcut
+                         (shui/shortcut
                            (string/join " | " (map #(dh/binding-for-display id %) binding))
                            {:size :md :interactive? true})])]]))))])])]]))

src/main/frontend/components/shortcut_help.cljs

@@ -8,7 +8,7 @@
             [logseq.common.util.page-ref :as page-ref]
             [rum.core :as rum]
             [frontend.components.shortcut :as shortcut]
-            [logseq.shui.core :as shui]))
+            [logseq.shui.ui :as shui]))
 
 (rum/defc trigger-table []
   [:table

src/main/frontend/shui.cljs

@@ -1,46 +0,0 @@
-(ns frontend.shui
-  "Glue between frontend code and deps/shui for convenience"
-  (:require
-    [frontend.colors :as colors]
-    [frontend.date :refer [int->local-time-2]]
-    [frontend.db :as db]
-    [frontend.db.utils :as db-utils]
-    [frontend.handler.search :as search-handler]
-    [frontend.state :as state]
-    [frontend.handler.property.util :as pu]
-    [logseq.shui.context :refer [make-context]]))
-
-
-(def default-versions {:logseq.property.table/version 1})
-
-(defn get-shui-component-version
-  "Returns the version of the shui component, checking first
-  the block properties, then the global config, then the defaults."
-  [component-name block-config]
-  (let [version-key (keyword (str "logseq.property." (name component-name))
-                             "version")]
-    (js/parseFloat
-      (or (pu/lookup (get-in block-config [:block :block/properties]) version-key)
-          (get-in (state/get-config) [version-key])
-          (get-in default-versions [version-key])
-          1))))
-
-(defn make-shui-context
-  ([] (make-shui-context nil nil))
-  ([block-config inline]
-   (make-context {:block-config block-config
-                  :config (state/get-config)
-                  :inline inline
-                  :int->local-time-2 int->local-time-2
-                  :search search-handler/search
-                  ;; We need some variable from the state to carry over
-                  :state state/state
-                  :get-current-repo state/get-current-repo
-                  :color-accent (state/get-color-accent)
-                  ;; Pass over ability to look up entities
-                  :entity db-utils/entity
-                  :get-block-and-children db/get-block-and-children
-                  :get-block-children db/get-block-children
-                  :get-page-blocks-no-cache db/get-page-blocks-no-cache
-                  :get-page db/get-page
-                  :linear-gradient colors/linear-gradient})))

src/main/frontend/ui.cljs

@@ -7,7 +7,6 @@
             ["react-tippy" :as react-tippy]
             ["react-transition-group" :refer [CSSTransition TransitionGroup]]
             ["@emoji-mart/data" :as emoji-data]
-            ;; ["@emoji-mart/react" :as Picker]
             ["emoji-mart" :as emoji-mart]
             [cljs-bean.core :as bean]
             [clojure.string :as string]
@@ -33,10 +32,10 @@
             [goog.functions :refer [debounce]]
             [goog.object :as gobj]
             [lambdaisland.glogi :as log]
+            [logseq.shui.icon.v2 :as shui.icon.v2]
             [medley.core :as medley]
             [promesa.core :as p]
             [rum.core :as rum]
-            [logseq.shui.core :as shui-core]
             [logseq.shui.ui :as shui]))
 
 (declare icon)
@@ -195,7 +194,7 @@
                        (string/split #" "))
                    sequence)]
     [:span.keyboard-shortcut
-     (shui-core/shortcut sequence opts)]))
+     (shui/shortcut sequence opts)]))
 
 (rum/defc menu-link
   [{:keys [only-child? no-padding? class shortcut] :as options} child]
@@ -1033,7 +1032,7 @@
              :options               {:theme (when (= (state/sub :ui/theme) "dark") "dark")}
              :on-tweet-load-success #(reset! *loading? false)})]]))
 
-(def icon shui-core/icon)
+(def icon shui.icon.v2/root)
 
 (rum/defc button-inner
   [text & {:keys [theme background variant href size class intent small? icon icon-props disabled? button-props]