WIP: components-first-release

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+    push:
+      tags:
+        - 'v*'
+    workflow_dispatch:
+
+jobs:
+    clojars:
+        runs-on: ubuntu-latest
+        environment: release
+        defaults:
+            run:
+                shell: bash
+        steps:
+            - uses: actions/checkout@v4
+            - uses: "DeLaGuardo/[email protected]"
+              with:
+                cli: "1.11.1.1139"
+            - name: release
+              env:
+                CLOJARS_USERNAME: ${{ secrets.CLOJARS_USERNAME }}
+                CLOJARS_PASSWORD: ${{ secrets.CLOJARS_PASSWORD }}
+              run: |
+                clojure -T:dev:build clean  && \
+                clojure -T:dev:build jar && \
+                clojure -X:deploy-clojars
+

README.md

@@ -24,31 +24,42 @@ Prerequisites
 
 Before you begin, ensure you have the following installed:
 - Clojure: Follow the [Clojure Installation guide](https://clojure.org/guides/install_clojure) to set up your environment.
-- Node.js: Required for managing dependencies and building your project. Download it from [here](https://www.npmjs.com/package/downloads).
+- [Node.js](https://nodejs.org/en/download/prebuilt-installer/current).
+- [npm](https://www.npmjs.com/package/downloads).
 
 # Installation
 
-- Set up your project: Start by creating a new ClojureScript project, or use an existing one.
+We distribute our software via Clojars, so you are able to just plug and play!
 
-- Install node dependencies with a simple command: 
+``` clj
 
-``` sh
-npm i
-```
+;; TODO
 
-- configure your shadow cljs:
+```
 
-> for better understanding, follow the offcial [guide](https://github.com/thheller/shadow-cljs)
 
 
 # Usage 
 
 ;; TODO
 
-# Testing
+
+# Testing Locally 
 
 And you are now done, you can clone and build this repo in order to see some examples of good usage of our dear Mockingbird. You can read more [here](docs/test.md).
 
+- Set up your project: Start by creating a new ClojureScript project, or use an existing one.
+
+- Install node dependencies with a simple command: 
+
+``` sh
+npm i
+```
+
+- configure your shadow cljs
+
+> for better understanding, follow the offcial [guide](https://github.com/thheller/shadow-cljs)
+
 # Contributing
 
 Mockingbird is open-source, and contributions are welcome! If you have ideas for new features, improvements, or bug fixes, feel free to open an issue or submit a pull request.

build.clj

@@ -0,0 +1,30 @@
+(ns build
+  (:require [clojure.tools.build.api :as b]))
+
+(def lib 'com.github.moclojer/mockingbird)
+(def version "0.0.1")
+(def class-dir "target/classes")
+(def basis (b/create-basis {:project "deps.edn"}))
+(def jar-file (format "target/%s-%s.jar" (name lib) version))
+
+(defn clean [_]
+  (b/delete {:path "target"}))
+
+(defn jar [_]
+  (b/write-pom {:class-dir class-dir
+                :lib lib
+                :version version
+                :basis basis
+                :src-dirs ["src"]})
+  (b/copy-dir {:src-dirs ["src" "resources"]
+               :target-dir class-dir})
+  (b/jar {:class-dir class-dir
+          :jar-file jar-file}))
+
+(defn install [_]
+  (b/install {:basis      basis
+              :lib        lib
+              :version    version
+              :jar-file   jar-file
+              :class-dir  class-dir}))
+

deps.edn

@@ -1,5 +1,6 @@
 {:paths ["src" "resources"]
  :deps {org.clojure/clojure {:mvn/version "1.11.1"}
+        org.clojure/clojurescript {:mvn/version "1.11.4"}
         com.fbeyer/refx {:mvn/version "0.0.49"}
         lilactown/helix {:mvn/version "0.1.9"}
         funcool/promesa {:mvn/version "9.0.494"}
@@ -15,4 +16,14 @@
   :clojure-lsp {:replace-deps {com.github.clojure-lsp/clojure-lsp-standalone {:mvn/version "2024.08.05_18.16.00-1"}}
                 :main-opts ["-m" "clojure-lsp.main"]}
   :build {:deps {io.github.clojure/tools.build {:mvn/version "0.9.4"}}
-          :ns-default build}}}
+          :ns-default build}
+
+  ;; clj -M:dev --report stderr -m com.moclojer.tools.build
+  ;; env CLOJARS_USERNAME=username CLOJARS_PASSWORD=clojars-token
+  ;; clj -X:deploy-clojars
+  :deploy-clojars {:extra-deps {slipset/deps-deploy {:mvn/version (build/version)}}
+                   :exec-fn deps-deploy.deps-deploy/deploy
+                   :exec-args {:installer :remote
+                               :sign-releases? false
+                               :pom-file "target/classes/META-INF/maven/com.moclojer/mockingbird/pom.xml"
+                               :artifact "target/com.moclojer.mockingbird.jar"}}}}

package.json

@@ -23,9 +23,10 @@
     "ci:tests": "npm run ci:karma-make && npx shadow-cljs compile ci-tests && npx karma start --single-run",
     "postcss:build": "npx cross-env TAILWIND_MODE=build postcss src/mockingbird/css/tailwind.css -o ./resources/public/assets/css/output.css --verbose",
     "postcss:watch": "npx cross-env TAILWIND_MODE=watch postcss src/mockingbird/css/tailwind.css -o ./resources/public/assets/css/output.css --verbose -w",
-    "app:watch": "npx shadow-cljs watch app",
-    "watch": "run-p -l *:watch",
-    "repl": "npx shadow-cljs clj-repl"
+    "watch": "npx shadow-cljs watch app",
+    "repl": "npx shadow-cljs clj-repl",
+    "release": "run-s shadow:release",
+    "shadow:release": "npx shadow-cljs release app"
   },
   "dependencies": {
     "@codemirror/language": "^6.6.0",

src/mockingbird/components/aside.cljs

@@ -9,39 +9,23 @@
    [refx.alpha :as refx]
    [reitit.frontend.easy :as rfe]))
 
-#_(defnc mock []
-    (let [aside (refx/use-sub [:app.dashboard/aside])
-          aside-open? (:open? aside)
-          current-user (refx/use-sub [:app.auth/current-user])
-          menu-open? (refx/use-sub [:app.dashboard/is-menu-open?])
-          mocks-raw (refx/use-sub [:app.dashboard/mocks-raw])]
-
-      (hooks/use-effect
-       [mocks-raw]
-       (when (nil? mocks-raw)
-         (refx/dispatch-sync [:app.dashboard/get-mocks current-user])))
-
+;; TODO add mock content
+(defnc mock [{:keys [aside aside-open? 
+                     current-user menu-open?
+                     mocks-raw when-mock-raw
+                     children]
+              :or {aside "" aside-open? false
+                   current-user "" menu-open? false
+                   mocks-raw false when-mock-raw ""}}]
       (d/li
        (d/div
         {:class "flex flex-row"}
-        (d/button
-         {:on-click #(rfe/push-state :app.core/mocks)
-          :class (str "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg "
-                      "transition duration-75 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700 ")
-          :aria-controls "dropdown-mocks"
-          :aria-expanded aside-open?
-          :data-collapse-toggle "dropdown-mocks"}
-         (d/span {:class (str "flex ml-3 text-left whitespace-nowrap "
-                              (when-not aside-open?
-                                "lg:absolute lg:hidden"))} "Mocks"))
-        (d/button
-         {:class (str "px-2 rounded-lg fill-gray-200 bg-transparent hover:bg-gray-200 hover:fill-gray-400 "
-                      (if aside-open? "block " "hidden "))
-          :on-click #(refx/dispatch-sync [:app.dashboard/toggle-menu])})))))
+        children)))
 
 (defnc aside
   [{:keys [id class type theme
-           aria-label position]
+           aria-label position
+           children]
     :or {id ""
          class ""
          theme :mockingbird
@@ -92,3 +76,7 @@
              #_(when aside-open?
                  (d/span {:class "ml-3"}
                          "Logout"))))))))
+
+
+;; TODO aside specific components
+(defnc aside-componet [])

src/mockingbird/components/icon.cljs

@@ -6,7 +6,7 @@
 ;; TODO
 
 (def styles
-  {})
+  {:mockingbird {}})
 
 (defnc icon
   [{:keys [class theme label href

src/mockingbird/components/image.cljs

@@ -5,7 +5,10 @@
    [mockingbird.lib :refer-macros [defnc]]
    [helix.dom :as d]))
 
-(def pfp-styles {:mockingbird ""})
+(def pfp-styles
+  {:default "w-8 h-8 rounded-none opacity-100"
+   :rounded "w-8 h-8 rounded-full opacity-100"
+   :loading "w-8 h-8 rounded-full opacity-30 animate-pulse"})
 
 (defnc pfp
   [{:keys [class theme image
@@ -22,12 +25,38 @@
          padding :none}}]
   (d/div
    (d/img {:class (str (get pfp-styles theme) " "
-                       (get-props {:size size
-                                   :roundness roundness
-                                   :shadow shadow
-                                   :margin margin
-                                   :padding padding
-                                   :class class}))
+                       (get-props
+                        {:size size
+                         :roundness roundness
+                         :shadow shadow
+                         :margin margin
+                         :padding padding
+                         :class class}))
+           :src image
+           :alt alt})
+   children))
+
+(defnc img
+  [{:keys [class theme image
+           alt size roundness
+           shadow margin padding
+           children]
+    :or {theme :mockingbird
+         image "/images/logo.png"
+         alt "test"
+         size :md
+         roundness :none
+         shadow :none
+         margin :none
+         padding :none}}]
+  (d/div
+   (d/img {:class (str (get-props
+                        {:size size
+                         :roundness roundness
+                         :shadow shadow
+                         :margin margin
+                         :padding padding
+                         :class class}))
            :src image
            :alt alt})
    children))

src/mockingbird/components/popup.cljs

@@ -6,6 +6,15 @@
    [helix.hooks :as hooks]
    [refx.alpha :as refx]))
 
+(def error-styles
+  {:card "rounded border-l-4 border-red-500 bg-red-50 p-4"
+   :tittle "block font-medium text-red-700"
+   :desc "mt-2 text-sm text-red-700"})
+
+(def toast-data-styles
+  {:info {:class "bg-green-50 fill-green-700 text-green-700 border-green-700"}
+   :error {:class "bg-red-50 fill-red-700 text-red-700 border-red-700"}})
+
 ;; notification
 (refx/reg-sub
  :app/notifications
@@ -28,11 +37,6 @@
  (fn [notification]
    (refx/dispatch [:app/enqueue-notification
                    notification])))
-;; alerts
-(def error-styles
-  {:card "rounded border-l-4 border-red-500 bg-red-50 p-4"
-   :tittle "block font-medium text-red-700"
-   :desc "mt-2 text-sm text-red-700"})
 
 (defnc error
   [{:keys [id error description]}]
@@ -48,10 +52,6 @@
         {:class desc}
         (str description))))))
 
-(def toast-data
-  {:info {:class "bg-green-50 fill-green-700 text-green-700 border-green-700"}
-   :error {:class "bg-red-50 fill-red-700 text-red-700 border-red-700"}})
-
 (defnc toast [{[id {:keys [type content icon]}] :children}]
   (hooks/use-effect
    :once
@@ -61,7 +61,7 @@
 
   (d/div
    {:class (str "w-fit px-5 py-4 bg-blue-600 rounded-lg border-2 "
-                (get-in toast-data [type :class]))}
+                (get-in toast-data-styles [type :class]))}
    (d/div
     {:class "flex flex-row items-center align-center space-between"}
     (d/div

src/mockingbird/components/profile.cljs

@@ -7,25 +7,6 @@
             [promesa.core :as p]
             [refx.alpha :as refx]))
 
-(def gravatar-base-url "https://gravatar.com/avatar/")
-(def auth0-cdn-base-url "https://cdn.auth0.com/avatars/")
-
-(def pfp-styles
-  {:default "w-8 h-8 rounded-none opacity-100"
-   :rounded "w-8 h-8 rounded-full opacity-100"
-   :loading "w-8 h-8 rounded-full opacity-30 animate-pulse"})
-
-(defn get-simple-avatar-url [username]
-  (let [uq-names (-> username
-                     (str/split #" "))
-        initials (->> uq-names
-                      (take 2)
-                      (map #(take 1 %))
-                      flatten
-                      (str/join "")
-                      str/lower-case)]
-    (str auth0-cdn-base-url initials ".png")))
-
 (defn get-image-style
   [{:keys [children image-style]}]
   (let [image-style (keyword image-style)]

src/mockingbird/helpers/props.cljs

@@ -41,5 +41,5 @@
           :md "m-4 "
           :lg "m-8 "
           nil)]
-    (str actual-size actual-roundness cast-shadow 
+    (str actual-size actual-roundness cast-shadow
          actual-padding actual-margin class)))

test/unit/components/props_test.cljs

@@ -36,15 +36,15 @@
     (testing "All defaults (empty map)"
       (is (= (get-props {})
              "w-16 h-16 ")))
-    
+
     (testing "Partial defaults"
       (is (= (get-props {:size :sm})
              "w-8 h-8 "))
-      (is (= (get-props {:roundness :full 
+      (is (= (get-props {:roundness :full
                          :shadow :lg})
              "w-16 h-16 rounded-full shadow-lg ")))
-    
+
     (testing "Nil values"
-      (is (= (get-props {:size nil 
+      (is (= (get-props {:size nil
                          :roundness nil})
              "w-16 h-16 ")))))