wip: frontend refresh

.storybook/main.js

@@ -24,7 +24,14 @@ module.exports = {
       })
     );
 
+    // Support mjs modules included with Chakra-UI
+    // https://github.com/storybookjs/storybook/issues/16690#issuecomment-971579785
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    })
     // Return the altered config.
     return config;
   }
-}
+}

.storybook/preview.js

@@ -1,13 +1,10 @@
 import React from 'react';
 
 import { themes } from '@storybook/theming';
-import {
-  OverlayProvider
-} from '@react-aria/overlays';
-import { NotificationContainer } from '@/Notifications/Notifications';
+import { ChakraProvider } from '@chakra-ui/react';
 
-import { classnames } from '../src/js/components/utils/classnames';
-import { GlobalStyles } from '../src/js/components/utils/style/style';
+
+import { theme } from '../src/js/theme/theme';
 import { badges, Storybook } from '../src/js/components/utils/storybook';
 
 export const parameters = {
@@ -65,19 +62,13 @@ export const decorators = [
     console.log(context);
     return (
       <>
-        <GlobalStyles />
-        <OverlayProvider>
+        <ChakraProvider>
           <Storybook.App
-            id="app"
-            className={classnames(
-              context.globals.hostType === 'electron' ? 'is-electron' : 'is-browser',
-              context.viewMode === 'docs' ? 'is-storybook-docs' : 'is-storybook-canvas'
-            )}>
+            id="app" >
             <Story />
-            <NotificationContainer />
           </Storybook.App>
-        </OverlayProvider>
+        </ChakraProvider>
       </>
     )
   },
-];
+];

package.json

@@ -100,22 +100,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@geometricpanda/storybook-addon-badges": "^0.0.4",
     "@js-joda/core": "1.12.0",
     "@js-joda/locale_en-us": "3.1.1",
     "@js-joda/timezone": "2.2.0",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",
-    "@react-aria/checkbox": "^3.2.3",
-    "@react-aria/dialog": "^3.1.4",
-    "@react-aria/focus": "^3.5.0",
-    "@react-aria/meter": "^3.1.3",
-    "@react-aria/overlays": "^3.7.2",
-    "@react-aria/switch": "^3.1.3",
-    "@react-aria/tooltip": "^3.1.3",
-    "@react-aria/visually-hidden": "^3.2.3",
-    "@react-stately/overlays": "^3.1.3",
-    "@react-stately/toggle": "^3.2.3",
     "@sentry/integrations": "^6.17.3",
     "@sentry/react": "^6.17.3",
     "@sentry/tracing": "^6.17.3",
@@ -125,9 +118,8 @@
     "electron-updater": "^4.3.4",
     "electron-window-state": "^5.0.3",
     "emoji-picker-element": "^1.8.2",
+    "framer-motion": "^6",
     "highlight.js": "^11.1.0",
-    "iconoir": "^1.0.0",
-    "iconoir-react": "^2.1.0",
     "katex": "^0.12.0",
     "luxon": "^2.0.2",
     "nedb": "^1.8.0",
@@ -137,11 +129,11 @@
     "react-colorful": "^5.4.0",
     "react-day-picker": "^7.4.10",
     "react-dom": "17.0.1",
+    "react-error-boundary": "^3.1.4",
+    "react-focus-lock": "^2.8.1",
     "react-force-graph-2d": "^1.19.0",
     "react-highlight.js": "1.0.7",
-    "react-hot-toast": "^2.1.1",
     "react-intersection-observer": "^8.32.1",
-    "styled-components": "^5.3.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

playwright.electron.config.ts

@@ -18,7 +18,7 @@ const config: PlaywrightTestConfig = {
   ...baseConfig,
   workers: 1,
   use: {},
-  projects: [{
+  projects: [ {
     name: 'chromium',
     use: {
       browserName: 'chromium',
@@ -32,7 +32,7 @@ const config: PlaywrightTestConfig = {
       mode: 'default',
       video: false,
     }
-  }],
+  } ],
 };
 
 export default config;

resources/public/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
       <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono: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&family=IBM+Plex+Sans+Condensed: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&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&family=IBM+Plex+Serif: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&display=swap" rel="stylesheet">
       <link rel="shortcut icon" type="image/png" href="favicon.png" />
-      <link href="./css/normalize.css" rel="stylesheet" />
       <link href="./css/katex.min.css" rel="stylesheet" />
       <link rel="stylesheet" href="./css/codemirror.css" type="text/css" />
       <style id="_stylefy-constant-styles_"></style>
@@ -17,7 +16,6 @@
         !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
         posthog.init('qouvHPR2-blOal8-l6CSmFybj8VWojBlv472Ac-ovAI',{api_host:'https://app.posthog.com', persistence:'localStorage'})
       </script>
-      <script type="text/javascript" src="js/lib/codemirror.js"></script>
   </head>
   <body>
     <div id="app">

shadow-cljs.edn

@@ -10,6 +10,10 @@
                 :output-dir       "resources/public/js/compiled"
                 :asset-path       "js/compiled"
                 :modules          {:app {:init-fn athens.core/init}}
+                ;; Don't try to polyfill for generators, we don't try to support older browsers
+                ;; and it breaks some libraries we use (ForceGraph2D) when other imports change.
+                ;; https://github.com/thheller/shadow-cljs/issues/854
+                :js-options       {:babel-preset-config {:targets {:chrome 80}}}
                 :compiler-options {:closure-warnings   {:global-this :off}
                                    :infer-externs      :auto
                                    :closure-defines    {re-frame.trace.trace-enabled? true}
@@ -27,6 +31,7 @@
                      :output-dir       "resources/public/js/compiled"
                      :asset-path       "js/compiled"
                      :modules          {:renderer {:init-fn athens.core/init}}
+                     :js-options       {:babel-preset-config {:targets {:chrome 80}}}
                      :compiler-options {:closure-warnings   {:global-this :off}
                                         :infer-externs      :auto
                                         :closure-defines    {re-frame.trace.trace-enabled? true}
@@ -45,6 +50,7 @@
           :main {:target           :node-script
                  :output-to        "resources/main.js"
                  :main             athens.main.core/main
+                 :js-options       {:babel-preset-config {:targets {:chrome 80}}}
                  :compiler-options {:output-feature-set :es-next
                                     :reader-features  #{:electron}}}
 

src/cljs/athens/components.cljs

@@ -1,16 +1,15 @@
 (ns athens.components
   (:require
+    ["@chakra-ui/react" :refer [Checkbox Box Button]]
     ["@material-ui/icons/Edit" :default Edit]
     [athens.db :as db]
     [athens.parse-renderer :refer [component]]
     [athens.reactive :as reactive]
-    [athens.style :refer [color]]
     [athens.util :refer [recursively-modify-block-for-embed]]
     [athens.views.blocks.core :as blocks]
     [clojure.string :as str]
     [re-frame.core :as rf :refer [dispatch subscribe]]
-    [reagent.core :as r]
-    [stylefy.core :as stylefy :refer [use-style]]))
+    [reagent.core :as r]))
 
 
 (defn todo-on-click
@@ -30,25 +29,27 @@
    TODO() - might be a good idea to keep an edit icon at top right
      for every component."
   [children]
-  [:span {:on-click (fn [e]
-                      (.. e stopPropagation))}
+  [:span {:style {:display "contents"}
+          :on-click (fn [e] (.. e stopPropagation))}
    children])
 
 
 (defmethod component :todo
   [_content uid]
   [span-click-stop
-   [:input {:type      "checkbox"
-            :checked   false
-            :on-change #(todo-on-click uid #"\{\{\[\[TODO\]\]\}\}" "{{[[DONE]]}}")}]])
+   [:> Checkbox {:isChecked false
+                 :verticalAlign "middle"
+                 :transform "translateY(-2px)"
+                 :onChange #(todo-on-click uid #"\{\{\[\[TODO\]\]\}\}" "{{[[DONE]]}}")}]])
 
 
 (defmethod component :done
   [_content uid]
   [span-click-stop
-   [:input {:type      "checkbox"
-            :checked   true
-            :on-change #(todo-on-click uid #"\{\{\[\[DONE\]\]\}\}" "{{[[TODO]]}}")}]])
+   [:> Checkbox {:isChecked   true
+                 :verticalAlign "middle"
+                 :transform "translateY(-2px)"
+                 :onChange #(todo-on-click uid #"\{\{\[\[DONE\]\]\}\}" "{{[[TODO]]}}")}]])
 
 
 (defmethod component :youtube
@@ -69,25 +70,11 @@
 (defmethod component :self
   [content _uid]
   [span-click-stop
-   [:button {:style {:color       "red"
-                     :font-family "IBM Plex Mono"}}
+   [:> Button {:variant "link"
+               :color "red"}
     content]])
 
 
-(def block-embed-adjustments
-  {:background (color :background-minus-2 :opacity-med)
-   :position   "relative"
-   ::stylefy/manual [[:>.block-container {:margin-left "0"
-                                          :padding-right "1.3rem"
-                                          ::stylefy/manual [[:textarea {:background "transparent"}]]}]
-                     [:>svg              {:position   "absolute"
-                                          :right      "5px"
-                                          :top        "5px"
-                                          :font-size  "1rem"
-                                          :z-index    "5"
-                                          :cursor     "pointer"}]]})
-
-
 (defmethod component :block-embed
   [content uid]
   ;; bindings are eval only once in with-let
@@ -97,7 +84,18 @@
     ;; todo -- not reactive. some cases where delete then ctrl-z doesn't work
     (if (db/e-by-av :block/uid block-uid)
       (r/with-let [embed-id (random-uuid)]
-                  [:div.block-embed (use-style block-embed-adjustments)
+                  [:> Box {:class "block-embed"
+                           :bg "background.basement"
+                           :position "relative"
+                           :sx {"> .block-container" {:ml 0
+                                                      :pr "1.3rem"
+                                                      "textarea" {:background "transparent"}}
+                                "> svg" {:position "absolute"
+                                         :right "5px"
+                                         :top "5px"
+                                         :fontSize "1rem"
+                                         :zIndex "5"
+                                         :cursor "pointer"}}}
                    (let [block (reactive/get-reactive-block-document [:block/uid block-uid])]
                      [:<>
                       [blocks/block-el

src/cljs/athens/effects.cljs

@@ -17,8 +17,7 @@
     [goog.dom.selection          :refer [setCursorPosition]]
     [malli.core                  :as m]
     [malli.error                 :as me]
-    [re-frame.core               :as rf]
-    [stylefy.core                :as stylefy]))
+    [re-frame.core               :as rf]))
 
 
 ;; Effects
@@ -133,12 +132,6 @@
                    100)))
 
 
-(rf/reg-fx
-  :stylefy/tag
-  (fn [[tag properties]]
-    (stylefy/tag tag properties)))
-
-
 (rf/reg-fx
   :alert/js!
   (fn [message]