diff --git a/package.json b/package.json index 60f5bc5afb..7994b8d143 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "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/project.clj b/project.clj index 14c4138c60..a82991ec36 100644 --- a/project.clj +++ b/project.clj @@ -25,7 +25,8 @@ [instaparse "1.4.10"] [devcards "0.2.6"] [borkdude/sci "0.0.13-alpha.22"] - [garden "1.3.10"]] + [garden "1.3.10"] + [cljsjs/material-ui-icons "4.4.1-0"]] :plugins [[lein-shell "0.5.0"]] diff --git a/src/cljs/athens/devcards.cljs b/src/cljs/athens/devcards.cljs index b019316ee8..c6fe02dbf9 100644 --- a/src/cljs/athens/devcards.cljs +++ b/src/cljs/athens/devcards.cljs @@ -1,11 +1,12 @@ (ns athens.devcards (:require - [athens.devcards.db] - [athens.devcards.sci-boxes] - [cljsjs.react] - [cljsjs.react.dom] - [devcards.core :as devcards :include-macros true :refer [defcard]] - [reagent.core :as r :include-macros true])) + [athens.devcards.db] + [athens.devcards.sci-boxes] + [athens.devcards.style-guide] + [cljsjs.react] + [cljsjs.react.dom] + [devcards.core :as devcards :include-macros true :refer [defcard]] + [reagent.core :as r :include-macros true])) (def bmi-data (r/atom {:height 180 :weight 80})) diff --git a/src/cljs/athens/devcards/style_guide.cljs b/src/cljs/athens/devcards/style_guide.cljs new file mode 100644 index 0000000000..fc940a60a6 --- /dev/null +++ b/src/cljs/athens/devcards/style_guide.cljs @@ -0,0 +1,109 @@ +(ns athens.devcards.style-guide + (:require + [athens.style :as s] + [cljsjs.react] + [cljsjs.react.dom] + [devcards.core :refer-macros [defcard defcard-rg]] + [garden.core :refer [css]] + [garden.stylesheet :refer [at-import]] + ;;material-ui-icons + )) + + + +(def log js/console.log) + +(def +circle (s/with-style {:width 80 + :height 80 + :border-radius 40})) + + +(def +flex-center + (s/with-style {:display "flex" :flex-direction "column" :justify-content "center" :align-items "center"})) + + + +(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)]]]) + +(defn main-css + [] + [:style (css + [:* {:font-family "Serif"}] + [:h1 {:font-size "50px" + :font-weight 600 + :line-height "65px"}] + [:h2 {:font-size "38px" + :font-weight 500 + :line-height "49px"}] + [:h3 {:font-size "28px" + :font-weight 500 + :line-height "36px"}] + [:h4 {:font-size "21px" + :line-height "27px"}] + [:h5 {:font-size "12px" + :font-weight 500 + :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 +") + + +(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 + + ``` + + 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 + + + ") \ No newline at end of file diff --git a/src/cljs/athens/style.cljs b/src/cljs/athens/style.cljs index 63b2169940..275472f292 100644 --- a/src/cljs/athens/style.cljs +++ b/src/cljs/athens/style.cljs @@ -1,14 +1,14 @@ (ns athens.style (:require - [garden.core :refer [css]] - [garden.selectors :refer [nth-child]])) + [garden.core :refer [css]] + [garden.selectors :refer [nth-child]])) ;; Styles for the loading screen (defn loading-css [] [:style (css - [:body {:font-family "sans-serif" - :font-size "1.3rem"}])]) + [:body {:font-family "sans-serif" + :font-size "1.3rem"}])]) ;; Styles for the main app. (defn main-css @@ -59,9 +59,7 @@ [:h1 (+heavily-styled) "some statement"] - [:h1 (+heavily-styled {:on-click (fn [_e] (js/alert "something else"))}) "some statement"] - - ) + [:h1 (+heavily-styled {:on-click (fn [_e] (js/alert "something else"))}) "some statement"]) ;; Functions that add styles to an element. Prefer to directly add styles when possible, otherwise @@ -78,3 +76,39 @@ (def +unknown-date (with-style {:color "#595959"})) + + +;;;;;;;;;;;;;;;; Style Guide ;;;;;;;;;;;;;;;; + +(def COLORS {:blue "#0075E1" ;; links + :orange "#F9A132" ;; highlights + :red "#D20000" ;; warnings + :green "#009E23" ;; confirmation + :dark-gray "#322F38" ;; headings + :warm-gray "#433F38" ;; body text + :ivory "#EFEDEB" ;; borders and panels + :white "#FFFFFF"}) + +(def OPACITIES {:100 1 + :75 0.75 + :50 0.5 + :25 0.25 + :1 0.1}) + +(def HEADERS) + +;; Utilities +(def +blue-bg + (with-style {:background (COLORS :blue)})) + +(def +red-bg + (with-style {:background (COLORS :red)})) + +(def +orange-bg + (with-style {:background (COLORS :orange)})) + +(def +green-bg + (with-style {:background (COLORS :green)})) + +; (def +blue-bg +; (with-style {:background (COLORS :blue)})) \ No newline at end of file diff --git a/src/cljsjs/material_ui_icons.cljs b/src/cljsjs/material_ui_icons.cljs new file mode 100644 index 0000000000..d8fab1297f --- /dev/null +++ b/src/cljsjs/material_ui_icons.cljs @@ -0,0 +1,6 @@ +(ns cljsjs.material_ui_icons + (:require + ["material-ui-icons" :as material-ui-icons])) + + +(js/goog.exportSymbol "material-ui-icons" material-ui-icons) diff --git a/yarn.lock b/yarn.lock index 5c9482b336..2cc4878ea0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -268,6 +268,11 @@ callsite@1.0.0: resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20" integrity sha1-KAOY5dZkvXQDi28JBRU+borxvCA= +change-emitter@^0.1.2: + version "0.1.6" + resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" + integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU= + chokidar@^3.0.0: version "3.3.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450" @@ -611,7 +616,7 @@ extend@^3.0.0: resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== -fbjs@^0.8.9: +fbjs@^0.8.1, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -800,6 +805,11 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^2.3.1: + version "2.5.5" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" + integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== + http-errors@1.7.2: version "1.7.2" resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f" @@ -1037,6 +1047,13 @@ marked@^1.0.0: resolved "https://registry.yarnpkg.com/marked/-/marked-1.0.0.tgz#d35784245a04871e5988a491e28867362e941693" integrity sha512-Wo+L1pWTVibfrSr+TTtMuiMfNzmZWiOPeO7rZsQUY5bgsxpHesBEcIWJloWVTFnrMXnf/TL30eTFSGJddmQAng== +material-ui-icons@^1.0.0-beta.36: + version "1.0.0-beta.36" + resolved "https://registry.yarnpkg.com/material-ui-icons/-/material-ui-icons-1.0.0-beta.36.tgz#86390a61f4c83f718eaba77ccce575834f2cf2a8" + integrity sha512-7rS6b2EV5QXCB/gTi/Ac9Wbxd+h9EZv1Td3rLLJe4IER8mVHRgdqZccB3EsjW2DrJ7opdY1+8X3/vyrS7CQNpg== + dependencies: + recompose "^0.26.0" + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -1471,6 +1488,16 @@ readline-sync@^1.4.7: resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.10.tgz#41df7fbb4b6312d673011594145705bf56d8873b" integrity sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw== +recompose@^0.26.0: + version "0.26.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30" + integrity sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog== + dependencies: + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^2.3.1" + symbol-observable "^1.0.4" + requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" @@ -1691,6 +1718,11 @@ strip-url-auth@^1.0.0: resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae" integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164= +symbol-observable@^1.0.4: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== + timers-browserify@^2.0.4: version "2.0.11" resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"