Nonce support for material in example (#59)

* nonce support in material

* downgrade notistack

Author: auto200

example/package.json

@@ -15,7 +15,7 @@
     "@mui/icons-material": "^5.15.0",
     "@mui/material": "^5.15.0",
     "@piwikpro/react-piwik-pro": "file:..",
-    "notistack": "^3.0.1",
+    "notistack": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1"

example/src/main.tsx

@@ -3,37 +3,49 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { createRoot } from 'react-dom/client'
 import { routes } from './routes.tsx'
 import { Box, CssBaseline } from '@mui/material'
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
 import { SnackbarProvider } from 'notistack'
 import PiwikPro from '@piwikpro/react-piwik-pro'
 
+// to test the nonce, we need to build the app and serve it with CSP policy
+const nonce = '8IBTHwOdqNKAWeKl7plt8g==' // nonce placeholder
+const cache = createCache({
+  key: 'css',
+  prepend: true,
+  nonce: nonce
+})
+
 PiwikPro.initialize(
   '957285ba-7867-4c6b-a8be-5e3e6c069b71',
   'https://astralprojection.promilci.com',
-  { dataLayerName: 'myDataLayer' }
+  { dataLayerName: 'myDataLayer', nonce }
 )
 
 const App = () => (
-  <SnackbarProvider
-    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-    maxSnack={10}
-  >
-    <Router>
-      <Box sx={{ display: 'flex' }}>
-        <CssBaseline />
-        <Header />
-        <Box
-          component='main'
-          sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
-        >
-          <Routes>
-            {routes.map(({ path, element }, index) => (
-              <Route key={index} path={path} element={element} />
-            ))}
-          </Routes>
+  <CacheProvider value={cache}>
+    <SnackbarProvider
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      maxSnack={10}
+    >
+      <Router>
+        <Box sx={{ display: 'flex' }}>
+          <CssBaseline />
+          <Header />
+          <Box
+            component='main'
+            sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
+          >
+            <Routes>
+              {routes.map(({ path, element }, index) => (
+                <Route key={index} path={path} element={element} />
+              ))}
+            </Routes>
+          </Box>
         </Box>
-      </Box>
-    </Router>
-  </SnackbarProvider>
+      </Router>
+    </SnackbarProvider>
+  </CacheProvider>
 )
 
 const container = document.getElementById('root')

example/yarn.lock

@@ -1249,11 +1249,6 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-goober@^2.0.33:
-  version "2.1.13"
-  resolved "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz"
-  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
-
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
@@ -1276,7 +1271,7 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -1466,13 +1461,13 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-notistack@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz"
-  integrity sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==
+notistack@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.8.tgz#78cdf34c64e311bf1d1d71c2123396bcdea5e95b"
+  integrity sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==
   dependencies:
     clsx "^1.1.0"
-    goober "^2.0.33"
+    hoist-non-react-statics "^3.3.0"
 
 object-assign@^4.1.1:
   version "4.1.1"