WIP: components-first-release

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.github/workflows/ci-tests.yml

@@ -28,7 +28,7 @@ jobs:
         java-version: '11'
 
     - name: Install clojure cli
-      uses: DeLaGuardo/setup-clojure@master
+      uses: DeLaGuardo/setup-clojure@12.5
       with:
         cli: 1.11.1.1113
 

.github/workflows/npm.yml

@@ -0,0 +1,24 @@
+name: Npm-Release
+
+on:
+    push:
+      tags:
+        - 'v*'
+    workflow_dispatch:
+
+jobs:
+    publish:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: DeLaGuardo/[email protected]
+            - uses: actions/setup-node@v3
+              with:
+                node-version: "20"
+            - name: npm release
+              run: |
+                npm ci && \
+                npm run lib
+            - uses: JS-DevTools/[email protected]
+              with:
+                token: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yml

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

.gitignore

@@ -20,6 +20,6 @@ pom.xml.asc
 /.shadow-cljs/
 /resources/public/index.html
 /resources/public/assets
-/resources/public/css/site.css
+/resources/public/css/
 /resources/test/
-
+/dist/

README.md

@@ -4,6 +4,8 @@ Design System using [tailwind](https://tailwindcss.com/) and [helix](https://git
 
 A simple way to develop a user interface with a consistent user experience, without the need to clutter `cljs` code with **CSS**.
 
+> if your desire is to use mockingbird without ClojureScript (how you dare!) you can of course use our npm package into your JS application. Read more [here](#Installation).
+
 ## name reference?
 
 > "mockingbird" is for everyone!
@@ -16,38 +18,77 @@ It's impossible to talk about *"mockingbird"* without remembering the song [Mock
 
 # Overview
 
-Mockingbird offers a set of reusable components and utilities that increases speed and beauty on your UI development. By integrating Tailwind, Helix and ReFx, Mockingbird combines functional programming, a powerful component model together creating a fast and lightweight design system. This allows your team (or simply yourself) to focus on building robust, reactive interfaces without getting bogged down in styling and local state management concerns.
+Mockingbird offers a set of reusable components and utilities that increases speed and beauty on your UI development. By integrating Tailwind, Helix and ReFx, Mockingbird combines functional programming and a powerful component model in order to create a fast and lightweight design system. This allows your team to focus on building robust, reactive interfaces without getting bogged down in styling and local state management concerns.
 
 # Getting Started
 
 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](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 (and intend to do so also by npm):
 
-- Install node dependencies with a simple command: 
+deps.edn:
+``` clj
+  moclojer/mockingbird {:mvn/version "0.0.1"}
+```
+
+You will also need to start a project with shadow-cljs and install the npm deps.
+
+npm:
 
 ``` sh
-npm i
+
+$ npx create-cljs-project your-project
+$ npm install react autoprefixer babel-loader css-loader cssnano karma karma-chrome-launcher karma-cljs-test msw npm-run-all postcss postcss-cli postcss-loade postcss-preset-env shadow-cljs tailwindcss webpack webpack-cli rimraf glob @isaacs/cliui --save-dev
+
 ```
 
-- configure your shadow cljs:
+# Usage 
 
-> for better understanding, follow the offcial [guide](https://github.com/thheller/shadow-cljs)
+add a import on a specific component or layout component you want and load it in your screen
 
+``` clj
+(:require 
+  [mockingbird.components.button :refer [button]]
+  [helix.core :refer [$]])
+;; use it then
+  ($ button)
 
-# Usage 
+```
+
+you can pass arguments into our components simply as this:
 
-;; TODO
 
-# Testing
+``` clj
+  ($ button {:class "special-class-i-want-to-add"
+             :theme :mockingbird
+             :size :sm 
+             :label "My-special-label"})
 
-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).
+```
+As you can see, our components have specific built-in styles for you. You can see a handful tutorial on the parameters for styling the components [here](docs/params.md)
+
+# Testing Locally 
+
+You can clone and build this repo, 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 ci
+```
+
+- configure your shadow cljs
+
+> for better understanding, follow the offcial [guide](https://github.com/thheller/shadow-cljs)
 
 # Contributing
 

build.clj

@@ -0,0 +1,31 @@
+(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,18 +1,26 @@
 {:paths ["src" "resources"]
  :deps {org.clojure/clojure {:mvn/version "1.11.1"}
+        org.clojure/clojurescript {:mvn/version "1.11.60"}
+        org.clojure/tools.deps {:mvn/version "0.21.1449"}
+        com.google.javascript/closure-compiler-unshaded {:mvn/version "v20220803"}
         com.fbeyer/refx {:mvn/version "0.0.49"}
-        lilactown/helix {:mvn/version "0.1.9"}
+        lilactown/helix {:mvn/version "0.1.11"}
         funcool/promesa {:mvn/version "9.0.494"}
         metosin/reitit-schema {:mvn/version "0.5.18"}
         metosin/reitit-frontend {:mvn/version "0.5.18"}
         lambdaisland/fetch {:mvn/version "1.1.60"}
         com.teknql/shadow-cljs-tailwind-jit {:mvn/version "1.0.0"}}
-
  :aliases
  {:dev {:extra-paths ["test"]
         :extra-deps {cider/cider-nrepl {:mvn/version "0.28.6"}
                      thheller/shadow-cljs {:mvn/version "2.20.10"}}}
   :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}
+  :deploy-clojars {:extra-deps {slipset/deps-deploy {:mvn/version "RELEASE"}}
+                   :exec-fn deps-deploy.deps-deploy/deploy
+                   :exec-args {:installer :remote
+                               :sign-releases? false
+                               :pom-file "target/classes/META-INF/maven/com.github.moclojer/mockingbird/pom.xml"
+                               :artifact "target/mockingbird-0.0.1.jar"}}}}

docs/params.md

@@ -1,6 +1,6 @@
 # Props parameters
 
-In order to get specific parameters while not having to pass tailwind classes (as w-64 for width or h-64 for height), we added a simple parameter list for your team. The idea is to pass a keyword, such as `:sm` or `:full`,making it easier to just plug and play our componentes. 
+In order to get specific parameters while not having to pass tailwind classes (as w-64 for width or h-64 for height), we added keyword-based parameters for easy configuration. The idea is to pass a keyword, such as `:sm` or `:full`, making it easier to just plug and play our componentes. 
 
 ## Examples
 - component roundness:
@@ -16,4 +16,14 @@ you can pass on your component the key roundness and a value into it, such as :f
         :roundness :full}))
 
 ```
-;; TODO list of all these new types
+
+## Parameter Overview
+
+The available options (until now) are:
+
+- **Size**: `:none`, `:sm`, `:md`, `:lg`, `:xl`, `:full`
+- **Roundness**: `:none`, `:sm`, `:md`, `:full`
+- **Shadow**: `:none`, `:sm`, `:md`, `:lg`
+- **Padding**: `:none`, `:sm`, `:md`, `:lg`
+- **Margin**: `:none`, `:sm`, `:md`, `:lg`
+