floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Florian Schroedl
2026-03-03 10:38:02 +01:00
commit 42ddb56d65
25 changed files with 3912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dev/replicant/deps.edn Normal file
View File

@@ -0,0 +1,3 @@
{:paths ["src" "../../src"]
:deps {no.cjohansen/replicant {:mvn/version "2025.12.1"}
thheller/shadow-cljs {:mvn/version "2.28.23"}}}

1565
dev/replicant/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

7
dev/replicant/package.json Normal file
View File

@@ -0,0 +1,7 @@
{
"name": "ui-framework-dev-replicant",
"private": true,
"devDependencies": {
"shadow-cljs": "^2.28.0"
}
}

22
dev/replicant/public/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/theme.css" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
padding: 2rem;
background: var(--bg-0);
color: var(--fg-0);
margin: 0;
transition: background-color 0.2s, color 0.2s;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="/js/main.js"></script>
</body>
</html>

9
dev/replicant/shadow-cljs.edn Normal file
View File

@@ -0,0 +1,9 @@
{:deps true
:dev-http {3001 "public"}
:builds
{:app
{:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules {:main {:init-fn dev.replicant/init!}}
:devtools {:after-load dev.replicant/reload!}}}}

59
dev/replicant/src/dev/replicant.cljs Normal file
View File

@@ -0,0 +1,59 @@
(ns dev.replicant
(:require [replicant.dom :as d]
[ui.button :as button]))
(def variants [:primary :secondary :ghost :danger])
(def sizes [:sm :md :lg])
(defn button-grid []
[:div {:style {:display "grid"
:grid-template-columns "repeat(4, auto)"
:gap "1rem"
:align-items "center"}}
[:div]
(for [size sizes]
[:div {:style {:font-weight "600" :text-align "center" :color "var(--fg-1)"
:font-size "0.75rem" :text-transform "uppercase" :letter-spacing "0.05em"}}
(name size)])
(for [variant variants]
(list
[:div {:style {:font-weight "600" :color "var(--fg-1)"
:font-size "0.75rem" :text-transform "uppercase" :letter-spacing "0.05em"}}
(name variant)]
(for [size sizes]
[:div {:style {:text-align "center"}}
(button/button {:variant variant :size size
:on-click (fn [_] (js/console.log (str "Clicked: " (name variant) " " (name size))))}
(str (name variant) " " (name size)))])))])
(defn disabled-row []
[:div {:style {:display "flex" :gap "0.75rem" :flex-wrap "wrap"}}
(for [variant variants]
(button/button {:variant variant :disabled true}
(str (name variant) " disabled")))])
(defn toggle-theme! [_e]
(let [el (.-documentElement js/document)
current (.. el -dataset -theme)]
(set! (.. el -dataset -theme)
(if (= current "dark") "light" "dark"))))
(defn app []
[:div {:style {:max-width "800px" :margin "0 auto"}}
[:div {:style {:display "flex" :justify-content "space-between" :align-items "center" :margin-bottom "2rem"}}
[:h2 {:style {:margin "0" :color "var(--fg-0)"}} "Replicant (CLJS)"]
[:button {:on {:click toggle-theme!}
:style {:padding "0.5rem 1rem" :cursor "pointer" :border-radius "var(--radius-md)"
:border "var(--border-0)" :background "var(--bg-1)" :color "var(--fg-0)"}}
"Toggle Dark Mode"]]
[:h3 {:style {:color "var(--fg-1)" :margin-bottom "1rem"}} "Button Grid"]
(button-grid)
[:h3 {:style {:color "var(--fg-1)" :margin "2rem 0 1rem"}} "Disabled States"]
(disabled-row)])
(defn ^:export init! []
(d/set-dispatch! (fn [_ _]))
(d/render (.getElementById js/document "app") (app)))
(defn ^:export reload! []
(d/render (.getElementById js/document "app") (app)))