refactor: organize code and commentsa little more

athensresearch · May 30, 2020 · fa49b16 · fa49b16
1 parent 733070d
commit fa49b16
Show file tree

Hide file tree

Showing 6 changed files with 304 additions and 111 deletions.
diff --git a/package.json b/package.json
@@ -8,10 +8,11 @@
     "shadow-cljs": "2.8.83"
   },
   "dependencies": {
+    "@material-ui/core": "^4.10.0",
+    "@material-ui/icons": "^4.9.1",
     "create-react-class": "^15.6.3",
     "highlight.js": "9.15.10",
     "marked": "^1.0.0",
-    "material-ui-icons": "^1.0.0-beta.36",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-highlight.js": "1.0.7"

diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -8,7 +8,8 @@
                                                    day8.re-frame-10x.preload]}}
                 :compiler-options {:source-map true
                                    :source-map-detail-level :all
-                                   :source-map-include-sources-content true}
+                                   :source-map-include-sources-content true
+                                   :infer-externs :auto}
 
                 :dev             {:compiler-options
                                   {:closure-defines {re-frame.trace.trace-enabled?        true
@@ -18,7 +19,8 @@
                                   :repl-init-ns athens.core}}
           :devcards         {:asset-path "js/devcards"
                              :modules {:main {:init-fn athens.devcards/main}}
-                             :compiler-options {:devcards true}
+                             :compiler-options {:devcards true
+                                                :infer-externs :auto}
                              :output-dir "resources/public/js/devcards"
                              :target :browser}
 

diff --git a/src/cljs/athens/devcards/style_guide.cljs b/src/cljs/athens/devcards/style_guide.cljs
@@ -5,43 +5,48 @@
    [cljsjs.react.dom]
    [devcards.core :refer-macros [defcard defcard-rg]]
    [garden.core :refer [css]]
-   [garden.stylesheet :refer [at-import]]
-   ;;material-ui-icons
-   ))
+   [garden.stylesheet :refer [at-import]]))
 
+(def log js/console.log)
 
+(def +flex-center
+  (s/with-style {:display "flex" :flex-direction "column" :justify-content "center" :align-items "center"}))
 
-(def log js/console.log)
+(def +flex-space-between
+  (s/with-style {:display "flex" :align-items "center" :justify-content "space-between"}))
+
+;; Colors
+
+(def +colors-container
+  (comp +flex-space-between
+        (s/with-style {:background "#E5E5E5"
+                       :padding 20})))
 
 (def +circle (s/with-style {:width 80
                             :height 80
                             :border-radius 40}))
 
+(def colors
+  [:blue :orange :red :green
+   :dark-gray :warm-gray :ivory :white])
 
-(def +flex-center
-  (s/with-style {:display "flex" :flex-direction "column" :justify-content "center" :align-items "center"}))
-
-
-
+;; TODO: refactor
 (defcard-rg Colors
-            [:div {:style {:display "flex" :justify-content "space-between"}}
-             [:div (+flex-center)
-              [:div ((comp +circle s/+blue-bg))]
-              [:span "Blue"]
-              [:span (:blue s/COLORS)]]
-             [:div (+flex-center)
-              [:div ((comp +circle s/+orange-bg))]
-              [:span "Orange"]
-              [:span (:orange s/COLORS)]]
-             [:div (+flex-center)
-              [:div ((comp +circle s/+red-bg))]
-              [:span "Red"]
-              [:span (:red s/COLORS)]]
-             [:div (+flex-center)
-              [:div ((comp +circle s/+green-bg))]
-              [:span "Green"]
-              [:span (:green s/COLORS)]]])
-
+  [:div (+colors-container)
+   (for [c colors]
+     [:div (+flex-center)
+      [:div {:style {:background-color (c s/COLORS)
+                     :width            80
+                     :height           80
+                     :border-radius    40}}]
+      [:span c]
+      [:span (c s/COLORS)]])]
+  {}
+  {:padding false})
+
+;; Types
+
+;; TODO: refactor to athens.style
 (defn main-css
   []
   [:style (css
@@ -62,48 +67,34 @@
                   :line-height "16px"
                   :text-transform "uppercase"}])])
 
-(def +flex-space-between
-  (s/with-style {:display "flex" :align-items "center" :justify-content "space-between"}))
-
 (def types [:h1 :h2 :h3 :h4 :h5])
 
 (defcard-rg Serif-Types
-            [:div
-             [main-css]
-             (for [t types]
-               ^{:key t}
-               [:div (+flex-space-between)
-                [:span t]
-                [t "Welcome to Athens"]])
-             ])
-
-(defcard Font "Not sure how to import fonts, e.g.
-```
-https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700
-```
-resources
-- https://cljdoc.org/d/garden/garden/1.3.10/api/garden.stylesheet
-- https://gist.github.com/paulkoegel/1c17be411c26d959fc6d75776d86e4f8
-")
+  [:div
+   [main-css]
+   (for [t types]
+     ^{:key t}
+     [:div (+flex-space-between)
+      [:span t]
+      [t "Welcome to Athens"]])])
 
+(defcard Font "Not sure how to import fonts.
 
-(defcard-rg Material-UI-Icons
-            "Not sure how to import icons. Get the error:
-            ```
-            [:devcards] Build failure:\nThe required JS dependency \"material-ui/SvgIcon\" is not available, it was required by \"node_modules/material-ui-icons/AccessAlarm.js\".\n\nSearch in:\n        /Users/jefftang/code/athens/athens/node_modules\nYou probably need to run:\n  npm install material-ui/SvgIcon\n
+  resources
+  - https://fonts.googleapis.com/css2?family=IBM+Plex+Sans
+  - https://fonts.google.com/specimen/IBM+Plex+Sans
+  - https://cljdoc.org/d/garden/garden/1.3.10/api/garden.stylesheet
+  - https://gist.github.com/paulkoegel/1c17be411c26d959fc6d75776d86e4f8")
 
-            ```
 
-            But I get the follow error when I try to install
-            ```
-            yarn add material-ui/SvgIcon\nyarn add v1.22.4\n[1/4] \uD83D\uDD0D  Resolving packages...\nerror Command failed.\nExit code: 128\nCommand: git\nArguments: ls-remote --tags --heads ssh://git@github.com/material-ui/SvgIcon.git\nDirectory: /Users/jefftang/code/athens/athens\nOutput:\nERROR: Repository not found.\nfatal: Could not read from remote repository.\n
-            ```
-
-            I tried creating a shim file like the rest of the `cljsjs` files.
-
-            resources
-            - https://shadow-cljs.github.io/docs/UsersGuide.html#cljsjs
-            - https://github.com/cljsjs/packages/tree/master/material-ui-icons
-
-
-            ")
+(defcard-rg Material-UI-Icons
+  "Not sure how to import Material UI icons.
+  - Author of shadow-cljs has https://github.com/cljsjs/packages/tree/master/material-ui-icons
+  - but this library was deprecated on npm https://www.npmjs.com/package/material-ui-icons
+
+  resources
+  - https://shadow-cljs.github.io/docs/UsersGuide.html#cljsjs
+  - https://shadow-cljs.github.io/docs/UsersGuide.html#infer-externs
+  - https://github.com/cljsjs/packages/tree/master/material-ui-icons
+  - https://material-ui.com/components/icons/#svg-material-icons
+  - https://www.npmjs.com/package/@material-ui/icons")
diff --git a/src/cljs/athens/style.cljs b/src/cljs/athens/style.cljs
@@ -108,7 +108,4 @@
   (with-style {:background (COLORS :orange)}))
 
 (def +green-bg
-  (with-style {:background (COLORS :green)}))
-
-; (def +blue-bg
-;   (with-style {:background (COLORS :blue)}))
+  (with-style {:background (COLORS :green)}))
diff --git a/src/cljsjs/material_ui_icons.cljs b/src/cljsjs/material_ui_icons.cljs