Merge pull request athensresearch#2106 from filipesilva/rollback-chakra

rollback chakra
filipesilva · Apr 4, 2022 · 02033f0 · 02033f0
2 parents 96914ca + 7720bc2
commit 02033f0
Show file tree

Hide file tree

Showing 212 changed files with 15,108 additions and 5,489 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -24,14 +24,7 @@ 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;
   }
-}
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,10 +1,13 @@
 import React from 'react';
 
 import { themes } from '@storybook/theming';
-import { ChakraProvider } from '@chakra-ui/react';
+import {
+  OverlayProvider
+} from '@react-aria/overlays';
+import { NotificationContainer } from '@/Notifications/Notifications';
 
-
-import { theme } from '../src/js/theme/theme';
+import { classnames } from '../src/js/components/utils/classnames';
+import { GlobalStyles } from '../src/js/components/utils/style/style';
 import { badges, Storybook } from '../src/js/components/utils/storybook';
 
 export const parameters = {
@@ -62,13 +65,19 @@ export const decorators = [
     console.log(context);
     return (
       <>
-        <ChakraProvider>
+        <GlobalStyles />
+        <OverlayProvider>
           <Storybook.App
-            id="app" >
+            id="app"
+            className={classnames(
+              context.globals.hostType === 'electron' ? 'is-electron' : 'is-browser',
+              context.viewMode === 'docs' ? 'is-storybook-docs' : 'is-storybook-canvas'
+            )}>
             <Story />
+            <NotificationContainer />
           </Storybook.App>
-        </ChakraProvider>
+        </OverlayProvider>
       </>
     )
   },
-];
+];
diff --git a/package.json b/package.json
@@ -100,15 +100,22 @@
   },
   "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",
@@ -118,8 +125,9 @@
     "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",
@@ -129,11 +137,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": {

diff --git a/playwright.electron.config.ts b/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;
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -5,6 +5,7 @@
     <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>
@@ -16,6 +17,7 @@
         !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">

diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -10,10 +10,6 @@
                 :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}
@@ -31,7 +27,6 @@
                      :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}
@@ -50,7 +45,6 @@
           :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}}}
 

diff --git a/src/cljs/athens/components.cljs b/src/cljs/athens/components.cljs
@@ -1,15 +1,16 @@
 (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]))
+    [reagent.core :as r]
+    [stylefy.core :as stylefy :refer [use-style]]))
 
 
 (defn todo-on-click
@@ -29,27 +30,25 @@
    TODO() - might be a good idea to keep an edit icon at top right
      for every component."
   [children]
-  [:span {:style {:display "contents"}
-          :on-click (fn [e] (.. e stopPropagation))}
+  [:span {:on-click (fn [e]
+                      (.. e stopPropagation))}
    children])
 
 
 (defmethod component :todo
   [_content uid]
   [span-click-stop
-   [:> Checkbox {:isChecked false
-                 :verticalAlign "middle"
-                 :transform "translateY(-2px)"
-                 :onChange #(todo-on-click uid #"\{\{\[\[TODO\]\]\}\}" "{{[[DONE]]}}")}]])
+   [:input {:type      "checkbox"
+            :checked   false
+            :on-change #(todo-on-click uid #"\{\{\[\[TODO\]\]\}\}" "{{[[DONE]]}}")}]])
 
 
 (defmethod component :done
   [_content uid]
   [span-click-stop
-   [:> Checkbox {:isChecked   true
-                 :verticalAlign "middle"
-                 :transform "translateY(-2px)"
-                 :onChange #(todo-on-click uid #"\{\{\[\[DONE\]\]\}\}" "{{[[TODO]]}}")}]])
+   [:input {:type      "checkbox"
+            :checked   true
+            :on-change #(todo-on-click uid #"\{\{\[\[DONE\]\]\}\}" "{{[[TODO]]}}")}]])
 
 
 (defmethod component :youtube
@@ -70,11 +69,25 @@
 (defmethod component :self
   [content _uid]
   [span-click-stop
-   [:> Button {:variant "link"
-               :color "red"}
+   [:button {:style {:color       "red"
+                     :font-family "IBM Plex Mono"}}
     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
@@ -84,18 +97,7 @@
     ;; 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)]
-                  [:> 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"}}}
+                  [:div.block-embed (use-style block-embed-adjustments)
                    (let [block (reactive/get-reactive-block-document [:block/uid block-uid])]
                      [:<>
                       [blocks/block-el

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