examples: code & filter

package.json

@@ -35,5 +35,5 @@
     "vega-lite": "4.17.0"
   },
   "devDependencies": {},
-  "_comment": "generated by webly on 2021-04-22 17:50:44"
+  "_comment": "generated by webly on 2021-04-22 20:22:48"
 }

profiles/demo/src/demo/app.cljs

@@ -1,32 +1,22 @@
 (ns demo.app
   (:require
    [webly.user.app.app :refer [webly-run!]]
-   [demo.routes :refer [routes-api routes-app]]
-
+   [webly.web.handler :refer [reagent-page]]
    [pinkgorilla.ui.default-renderer] ; add ui renderer definitions 
-
-   ; examples
-   [example.pinkie]
-   [example.controls]
-   ; from renderable-ui
-   [example.gtable]
-   ; js based enderer
-   [example.highchart]
-   [example.json]
-   [example.vega]
-   [example.math]
-   ; reagent based renderer
-   [example.leaflet]
-   [example.sparklines]
-   [example.player]
-   [example.aggrid]
-   [example.clock]
-   [example.gridlayout]
-   [example.pydoc]
+   [example.core :refer [example-component]]
    ; demo
-   [demo.views]
-   [demo.events]
+   [demo.routes :refer [routes-api routes-app]]
+   [demo.events] ; side-effects
    ))
 
+(defmethod reagent-page :demo/main [& args]
+  [example-component])
+
+(defmethod reagent-page :demo/viz [& args]
+  (let [nsf (namespace :viz/all)]
+    (println "nsf: " nsf)
+    [example-component nsf]))
+
+
 (defn ^:export start []
   (webly-run! routes-api routes-app))

profiles/demo/src/demo/routes.cljc

@@ -1,7 +1,9 @@
 (ns demo.routes)
 
 (def routes-app
-  {"" :demo/main})
+  {"" :demo/main
+   "viz" :demo/viz
+   })
 
 (def routes-api
   {})

profiles/demo/src/example/aggrid.cljs → src/example/aggrid.cljs

@@ -1,7 +1,7 @@
 (ns example.aggrid
   (:require
    [thi.ng.strf.core :as f]
-   [demo.example :as example]
+   [example.example :as example]
    [pinkgorilla.ui.data.aggrid :refer [aggrid]]))
 
 (def columnDefs [{:headerName "Make" :field "make"}
@@ -62,26 +62,23 @@
                {:headerName "Vol-F" :field "vol-factor" :width 50 :valueFormatter currency-formatter :sortable false :filter false}
                {:headerName "Comment" :field "s" :width 300 :sortable false :filter false}])
 
-
 (example/add
- "aggrid"
-  [:div ; .aggrid-demo ; .aggrid-container
-
-   [:h1 "simple demo:"]
-   [:div {:style {:height "150px"
-                  :width "600px"}}
-    [aggrid {:columnDefs columnDefs
-             :rowData rowData}]]
+ :viz/aggrid
+ [:div {:style {:height "150px"
+                :width "600px"}}
+  [:p/aggrid {:columnDefs columnDefs
+              :rowData rowData}]])
 
-   [:h1 "complex demo:"]
-   [:div {:className "ag-theme-balham"
-          :style {; either both pixels, or both percentage.
-                  :height "400px"
-                  :width "600px"
+(example/add
+ :viz/aggrid
+ [:div {:className "ag-theme-balham"
+        :style {; either both pixels, or both percentage.
+                :height "400px"
+                :width "600px"
                  ;:height "100%"
                  ;:width "100%"
-                  :color "blue"}}
-    [aggrid {:columnDefs  rateCols
-             :rowData rates
-             :pagination true
-             :paginationAutoPageSize true}]]])
+                :color "blue"}}
+  [:p/aggrid {:columnDefs  rateCols
+              :rowData rates
+              :pagination true
+              :paginationAutoPageSize true}]])

src/example/clock.cljs

@@ -0,0 +1,7 @@
+(ns example.clock
+  (:require [example.example :as example]))
+
+(example/add
+ :gorilla/clock
+ [:div ; .clock-demo
+  [:p/clock]])

profiles/demo/src/example/controls.cljs → src/example/controls.cljs

@@ -4,11 +4,10 @@
    [goog.object :as g]
    [reagent.core :as r]
    [pinkie.pinkie :refer [tag-inject]]
-   [demo.example :as example]))
-
+   [example.example :as example]))
 
 (example/add
- "tab"
+ :layout/tab
  [:div
   [:ul {:class "list-reset flex border-b"}
    [:li {:class "-mb-px mr-1"}
@@ -23,7 +22,6 @@
 (defn debug [v]
   (g/set js/window "x" v))
 
-
 (def demo
   (let [languages ["javascript" "ruby" "clojure" "clojurescript" "ocaml" "scheme" "elixir" "c#" "R" "python"]
         state (r/atom {:name "Someone Special"
@@ -77,10 +75,10 @@
 
       [:p/panel {:title "display only controls"}
        [:h2 "Popover"]
-       [:p/popover {:color "orange"
+       [:p/popover {:color "yellow"
                     :placement "left"
-                    :button-text "orange-l"}
-        [:p/tooltip {:color "orange"
+                    :button-text "yellow-l"}
+        [:p/tooltip {:color "red"
                      :title  "oranges"
                      :content "Lets make orange juice"}]]
        [:p/popover {:color "green"
@@ -100,5 +98,6 @@
   (tag-inject demo))
 
 (example/add
- "controls" ;[demo]
+ :layout/controls
+ ;[demo]
  [demo2])

profiles/demo/src/demo/views.cljs → src/example/core.cljs

@@ -1,9 +1,27 @@
-(ns demo.views
+(ns example.core
   (:require
-   [webly.web.handler :refer [reagent-page]]
-   ;[pinkgorilla.ui.ui.dialog :refer [modal-container]] 
+
    [pinkgorilla.ui.layout.sidebar :refer [sidebar]]
-   [demo.example :refer [examples example-page]]))
+   [example.example :refer [examples-wrapped]]
+
+   ; examples
+   [example.pinkie]
+   [example.controls]
+   ; from renderable-ui
+   [example.gtable]
+   ; js based enderer
+   [example.highchart]
+   [example.json]
+   [example.vega]
+   [example.math]
+   ; reagent based renderer
+   [example.leaflet]
+   [example.sparklines]
+   [example.player]
+   [example.aggrid]
+   [example.clock]
+   [example.gridlayout]
+   [example.pydoc]))
 
 (def welcome
   [:section {:class "text-gray-700 body-font"}
@@ -15,26 +33,17 @@
             :viewBox "0 0 975.036 975.036"}
       [:path {:d "M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"}]]
      [:p {:class "leading-relaxed text-lg"}
-      "enjoy the demos ..."]
+      "enjoy the examples ..."]
      [:span {:class "inline-block h-1 w-10 rounded bg-indigo-500 mt-8 mb-6"}]
      [:h2 {:class "text-gray-900 font-medium title-font tracking-wider text-sm"}
       "gorilla"]
      [:p {:class "text-gray-500"}
       "UI"]]]])
 
-#_(def examples (r/atom
-                 [{:name "a" :component [:h1 "a"]}
-                  {:name "b" :component [:h1 "b"]}]))
-
-(def examples-wrapped
-  (map (fn [e]
-         (assoc e :page (example-page e))) @examples))
-
-(defn app []
+(defn example-component [nsf]
   [:div
    ;[:link {:rel "stylesheet" :href "tailwindcss/dist/tailwind.css"}]
    ;[modal-container]
-   [sidebar examples-wrapped welcome]])
+   [sidebar (examples-wrapped nsf) welcome]])
+
 
-(defmethod reagent-page :demo/main [& args]
-  [app])