feat: add toast notifications using stylekit (#905)

app/assets/javascripts/components/ApplicationView.tsx

@@ -27,6 +27,7 @@ import { RevisionHistoryModalWrapper } from './RevisionHistoryModal/RevisionHist
 import { PremiumModalProvider } from './Premium';
 import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
 import { TagsContextMenu } from './Tags/TagContextMenu';
+import { ToastContainer } from '@standardnotes/stylekit';
 
 type Props = {
   application: WebApplication;
@@ -283,6 +284,8 @@ export class ApplicationView extends PureComponent<Props, State> {
                 appState={this.appState}
                 application={this.application}
               />
+
+              <ToastContainer />
             </>
           )}
         </div>

app/assets/javascripts/typings/stylekit.d.ts

@@ -1 +0,0 @@
-declare module '@standardnotes/stylekit';

app/assets/stylesheets/_sn.scss

@@ -32,22 +32,6 @@
   text-decoration: underline;
 }
 
-.sn-icon {
-  @extend .h-5;
-  @extend .w-5;
-  @extend .fill-current;
-
-  &.sn-icon--small {
-    @extend .h-3\.5;
-    @extend .w-3\.5;
-  }
-
-  &.sn-icon--mid {
-    @extend .w-4;
-    @extend .h-4;
-  }
-}
-
 .sn-dropdown {
   @extend .bg-default;
   @extend .rounded;
@@ -257,9 +241,6 @@
 .ml-3 {
   margin-left: 0.75rem;
 }
-.ml-4 {
-  margin-left: 1rem;
-}
 
 .mr-2\.5 {
   margin-right: 0.625rem;
@@ -583,10 +564,6 @@
   padding-bottom: 2.25rem;
 }
 
-.select-none {
-  user-select: none;
-}
-
 .placeholder-dark-red::placeholder {
   @extend .color-dark-red;
 }
@@ -719,11 +696,6 @@
   background: var(--sn-stylekit-grey-4);
 }
 
-.sn-component .spinner-info {
-  border-color: var(--sn-stylekit-info-color);
-  border-right-color: transparent;
-}
-
 @keyframes slide-up {
   0% {
     opacity: 1;
@@ -907,10 +879,6 @@
   }
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .leading-140\% {
   line-height: 140%;
 }
@@ -921,10 +889,6 @@
   pointer-events: none;
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .last\:hidden:last-child {
   display: none;
 }

app/assets/stylesheets/_ui.scss

@@ -210,10 +210,6 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   pointer-events: none;
 }
 
-.fill-current {
-  fill: currentColor;
-}
-
 .font-editor {
   font-family: var(--sn-stylekit-editor-font-family);
 }

package.json

@@ -57,7 +57,7 @@
     "pretty-quick": "^3.1.3",
     "sass-loader": "^12.6.0",
     "serve-static": "^1.14.2",
-    "@standardnotes/stylekit": "5.10.0",
+    "@standardnotes/stylekit": "5.12.2",
     "svg-jest": "^1.0.1",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",

yarn.lock

@@ -2052,6 +2052,11 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@nanostores/preact@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@nanostores/preact/-/preact-0.1.3.tgz#aeac0a1d8de1e067bc0b156c1fdd62a6b7bf6069"
+  integrity sha512-uiX1ned0LrzASot+sPUjyJzr8Js3pX075omazgsSdLf0zPp4ss8xwTiuNh5FSKigTSQEVqZFiS+W8CnHIrX62A==
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@@ -2111,14 +2116,6 @@
     prop-types "^15.7.2"
     tslib "^2.3.0"
 
-"@reach/auto-id@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.15.2.tgz#289640b47545a32f3621469ba497ba5c040b349c"
-  integrity sha512-K7d5qhYBlBHIjy+IpSEAyMeB5VTZ9m0tZdr7xyNd5Fr6oeefHEvJiJGuQpubP5bDoe7ShC3y0VQGFmT0g7KcZg==
-  dependencies:
-    "@reach/utils" "0.15.2"
-    tslib "^2.3.0"
-
 "@reach/auto-id@0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
@@ -2139,14 +2136,6 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/descendants@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.15.2.tgz#b0641f0bc864d91271364678dea51cf86b2e5c66"
-  integrity sha512-GdQXWVpscss89MOhWh+sL4TnIn0qX1y+Te3wE72aKQrz/QCR69JFEW4wftovmF7rFm4/kDZcp14lMy512U6VlA==
-  dependencies:
-    "@reach/utils" "0.15.2"
-    tslib "^2.3.0"
-
 "@reach/descendants@0.16.1":
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
@@ -2178,17 +2167,16 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/listbox@^0.15.0":
+"@reach/dropdown@0.16.2":
-  version "0.15.2"
+  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.15.2.tgz#21aacc5340deb1b819d522f7f7fd4caac093c8a4"
+  resolved "https://registry.yarnpkg.com/@reach/dropdown/-/dropdown-0.16.2.tgz#4aa7df0f716cb448d01bc020d54df595303d5fa6"
-  integrity sha512-bXXelcm+PvAWAmhHQEaEVU6IQvTieIdoYcIrs5JsKzH98M+pp940Gdm0d2uDcmFatx/I9OMTAsOTJ129RPECrA==
+  integrity sha512-l4nNiX6iUpMdHQNbZMhgW5APtw0AUwJuRnkqE93vkjvdtrYl/sNJy1Jr6cGG7TrZIABLSOsfwbXU3C+qwJ3ftQ==
   dependencies:
-    "@reach/auto-id" "0.15.2"
+    "@reach/auto-id" "0.16.0"
-    "@reach/descendants" "0.15.2"
+    "@reach/descendants" "0.16.1"
-    "@reach/machine" "0.15.2"
+    "@reach/popover" "0.16.2"
-    "@reach/popover" "0.15.2"
+    "@reach/utils" "0.16.0"
-    "@reach/utils" "0.15.2"
+    tslib "^2.3.0"
-    prop-types "^15.7.2"
 
 "@reach/listbox@^0.16.2":
   version "0.16.2"
@@ -2202,15 +2190,6 @@
     "@reach/utils" "0.16.0"
     prop-types "^15.7.2"
 
-"@reach/machine@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.15.2.tgz#f1558e63a6b304e6cc12feefb0d0dd315b32c962"
-  integrity sha512-op8Duhp6rNCReZgdVScbIzoXMPFYP4nje6dvg4g2GKo8hUkyQpebsUFnUNNNv6NWdbmhIRiKHFlTgSl2gIlh5Q==
-  dependencies:
-    "@reach/utils" "0.15.2"
-    "@xstate/fsm" "1.4.0"
-    tslib "^2.3.0"
-
 "@reach/machine@0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3"
@@ -2220,15 +2199,14 @@
     "@xstate/fsm" "1.4.0"
     tslib "^2.3.0"
 
-"@reach/menu-button@^0.15.1":
+"@reach/menu-button@^0.16.2":
-  version "0.15.2"
+  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.15.2.tgz#00f91402be3ff23d3b4cfe377529f4f9e82a78fe"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.16.2.tgz#664e33e70de431f88abf1f8537c48b1b6ce87e88"
-  integrity sha512-slEji1AnfnH134YDZSTwst4nZHYNrfyg9GF+A8p1+kGc8N3JsPysHc7uIUZ/IsK+PdaOCB+r9kuL1QWBgNO+jw==
+  integrity sha512-p4n6tFVaJZHJZEznHWy0YH2Xr3I+W7tsQWAT72PqKGT+uryGRdtgEQqi76f/8cRaw/00ueazBk5lwLG7UKGFaA==
   dependencies:
-    "@reach/auto-id" "0.15.2"
+    "@reach/dropdown" "0.16.2"
-    "@reach/descendants" "0.15.2"
+    "@reach/popover" "0.16.2"
-    "@reach/popover" "0.15.2"
+    "@reach/utils" "0.16.0"
-    "@reach/utils" "0.15.2"
     prop-types "^15.7.2"
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
@@ -2238,17 +2216,6 @@
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
   integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
 
-"@reach/popover@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.15.2.tgz#e310e2afe82afa35929354f1fd1a747cdebb7654"
-  integrity sha512-92Ov7VPXjn4ciOVupeekki03lSMz9NAmw2BjWYE9mVvYWKyDx5jx2srtbkIqUaSCkAVV3KEsFUia8aMm60FDZg==
-  dependencies:
-    "@reach/portal" "0.15.2"
-    "@reach/rect" "0.15.2"
-    "@reach/utils" "0.15.2"
-    tabbable "^4.0.0"
-    tslib "^2.3.0"
-
 "@reach/popover@0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.2.tgz#71d7af3002ca49d791476b22dee1840dd1719c19"
@@ -2260,14 +2227,6 @@
     tabbable "^4.0.0"
     tslib "^2.3.0"
 
-"@reach/portal@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.15.2.tgz#fe7aa3d9a475ec07686c39bab3a0d85093fa91fb"
-  integrity sha512-5x+dchGr4btRnLazwmyCYbSPVJAIrw0eXwhz7Vj9uT/EIp43WzOtTcODdLOoH6Ol2QLjX1Yt/fBjdK9+UAKxSA==
-  dependencies:
-    "@reach/utils" "0.15.2"
-    tslib "^2.3.0"
-
 "@reach/portal@0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64"
@@ -2277,17 +2236,6 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/rect@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.15.2.tgz#734e3f17a499d6e22bd2ea95856c801c41ed66fd"
-  integrity sha512-S2lzvvfclUHdvgcfW/eoz0i729HJvG5f6ayVaXcKz+X6LKF9i9Jdhfwsz7b3UmnSCihKNs0cX5tyWfWr1E1JFw==
-  dependencies:
-    "@reach/observe-rect" "1.2.0"
-    "@reach/utils" "0.15.2"
-    prop-types "^15.7.2"
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
 "@reach/rect@0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
@@ -2313,14 +2261,6 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/utils@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.15.2.tgz#a63a761eb36266bf33d65cb91520dd85a04ae116"
-  integrity sha512-Lr1SJ5X4hEjD/M0TAonURM8wytM/JuPSuIP7t+e5cil34pThyLsBvTGeNfmpSgaLJ5vlsv0x9u6g4SRAEr84Og==
-  dependencies:
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
 "@reach/utils@0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
@@ -2461,15 +2401,18 @@
     "@standardnotes/sncrypto-common" "^1.7.1"
     "@standardnotes/utils" "^1.2.1"
 
-"@standardnotes/stylekit@5.10.0":
+"@standardnotes/stylekit@5.12.2":
-  version "5.10.0"
+  version "5.12.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.10.0.tgz#94bc1c6686663b2b89b004eb777a6792a0305f47"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.12.2.tgz#8c2bea39aa696d27a3b88ef68c182638f9c72615"
-  integrity sha512-W0vuqjfN1GD254ZTdlroMgKIQSebuhkJkc5Lh0tWQ5cpQyXrZ3HsHXd3H98PPbP+wtLS34XS5G/PHc7OjD146g==
+  integrity sha512-pa30xiil1ZQoXZetWdOhABIfOTkuhlSqdi2LAmJ7SkfiCclqsGGvOSf8z2R2V8DP5B7R2kYH6ko11CBGAhwjqA==
   dependencies:
-    "@reach/listbox" "^0.15.0"
+    "@nanostores/preact" "^0.1.3"
-    "@reach/menu-button" "^0.15.1"
+    "@reach/listbox" "^0.16.2"
+    "@reach/menu-button" "^0.16.2"
     "@svgr/webpack" "^6.2.1"
-    prop-types "^15.7.2"
+    nanoid "^3.3.1"
+    nanostores "^0.5.10"
+    prop-types "^15.8.1"
 
 "@standardnotes/utils@^1.2.1":
   version "1.2.1"
@@ -7373,11 +7316,16 @@ nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
-nanoid@^3.2.0:
+nanoid@^3.2.0, nanoid@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
   integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
+nanostores@^0.5.10:
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/nanostores/-/nanostores-0.5.10.tgz#16488776f01fa288b09c026400ff535da55c3583"
+  integrity sha512-8Y7C8sF8PsHGpLVJochWT+ytEY34XrNRDA30hDqgvLcl5Ih4d/IFb7gUSFIwmgFAaht1pLwKZHTeFoJrNz88RQ==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"