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

22
dev/squint/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 type="module" src=".compiled/dev/squint.mjs"></script>
</body>
</html>

1160
dev/squint/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
dev/squint/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "ui-framework-dev-squint",
"private": true,
"type": "module",
"scripts": {
"dev": "npx squint watch & npx vite --port 3002",
"build": "npx squint compile && npx vite build"
},
"devDependencies": {
"squint-cljs": "latest",
"vite": "^6.0.0"
},
"dependencies": {
"eucalypt": "latest"
}
}

2
dev/squint/squint.edn Normal file
View File

@@ -0,0 +1,2 @@
{:paths ["src" "../../src"]
:output-dir ".compiled"}

73
dev/squint/src/dev/squint.cljs Normal file
View File

@@ -0,0 +1,73 @@
(ns dev.squint
(:require ["eucalypt" :as eu]
[ui.button :as button]))
(def variants ["primary" "secondary" "ghost" "danger"])
(def sizes ["sm" "md" "lg"])
(defn toggle-theme! [_e]
(let [el (.-documentElement js/document)
current (.. el -dataset -theme)]
(set! (.. el -dataset -theme)
(if (= current "dark") "light" "dark"))))
(def label-style {"font-weight" "600"
"color" "var(--fg-1)"
"font-size" "0.75rem"
"text-transform" "uppercase"
"letter-spacing" "0.05em"})
(defn button-grid []
(into
[:div {:style {"display" "grid"
"grid-template-columns" "repeat(4, auto)"
"gap" "1rem"
"align-items" "center"}}
[:div]
[:div {:style (merge label-style {"text-align" "center"})} "sm"]
[:div {:style (merge label-style {"text-align" "center"})} "md"]
[:div {:style (merge label-style {"text-align" "center"})} "lg"]]
(mapcat (fn [variant]
[[:div {:style label-style} variant]
[:div {:style {"text-align" "center"}}
(button/button {:variant variant :size "sm"
:on-click (fn [_] (js/console.log (str "Clicked: " variant " sm")))}
(str variant " sm"))]
[:div {:style {"text-align" "center"}}
(button/button {:variant variant :size "md"
:on-click (fn [_] (js/console.log (str "Clicked: " variant " md")))}
(str variant " md"))]
[:div {:style {"text-align" "center"}}
(button/button {:variant variant :size "lg"
:on-click (fn [_] (js/console.log (str "Clicked: " variant " lg")))}
(str variant " lg"))]])
variants)))
(defn disabled-row []
(into
[:div {:style {"display" "flex" "gap" "0.75rem" "flex-wrap" "wrap"}}]
(map (fn [variant]
(button/button {:variant variant :disabled true}
(str variant " disabled")))
variants)))
(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)"}} "Squint (Eucalypt)"]
[: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 init! []
(eu/render (app) (js/document.getElementById "app")))
(defn reload! []
(eu/render (app) (js/document.getElementById "app")))
(init!)

9
dev/squint/vite.config.js Normal file
View File

@@ -0,0 +1,9 @@
import { defineConfig } from "vite";
export default defineConfig({
root: ".",
publicDir: "public",
server: {
port: 3002,
},
});