impress/app/javascript/wardrobe-2020/AppProvider.js

import React from "react";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import {
	ChakraProvider,
	Box,
	css as resolveCSS,
	extendTheme,
	useColorMode,
	useTheme,
} from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools";
import { ApolloProvider } from "@apollo/client";
import { BrowserRouter } from "react-router-dom";
import { css, Global } from "@emotion/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import apolloClient from "./apolloClient";

const reactQueryClient = new QueryClient();

let theme = extendTheme({
	styles: {
		global: (props) => ({
			body: {
				background: mode("gray.50", "gray.800")(props),
				color: mode("green.800", "green.50")(props),
				transition: "all 0.25s",
			},
		}),
	},
});

// Capture the global styles function from our theme, but remove it from the
// theme's `styles.global` key. We don't actually want to apply these styles
// globally, because they conflict with the app's other styles when embedded in
// e.g. the item page! We'll apply them more carefully in `ScopedCSSReset`.
//
// NOTE: We get this from `theme`, instead of just declaring the function
// separately, because `extendTheme` returns a wrapped version of our function
// that also returns some of Chakra's own default global styles.
const globalStyles = theme.styles.global;
theme.styles.global = {};

export default function AppProvider({ children }) {
	React.useEffect(() => setupLogging(), []);

	return (
		<BrowserRouter>
			<QueryClientProvider client={reactQueryClient}>
				<ApolloProvider client={apolloClient}>
					<ChakraProvider resetCSS={false} theme={theme}>
						<ScopedCSSReset>{children}</ScopedCSSReset>
					</ChakraProvider>
				</ApolloProvider>
			</QueryClientProvider>
		</BrowserRouter>
	);
}

function setupLogging() {
	Sentry.init({
		dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",
		autoSessionTracking: true,
		integrations: [
			new Integrations.BrowserTracing({
				beforeNavigate: (context) => ({
					...context,
					// Assume any path segment starting with a digit is an ID, and replace
					// it with `:id`. This will help group related routes in Sentry stats.
					// NOTE: I'm a bit uncertain about the timing on this for tracking
					//       client-side navs... but we now only track first-time
					//       pageloads, and it definitely works correctly for them!
					name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"),
				}),

				// We have a _lot_ of location changes that don't actually signify useful
				// navigations, like in the wardrobe page. It could be useful to trace
				// them with better filtering someday, but frankly we don't use the perf
				// features besides Web Vitals right now, and those only get tracked on
				// first-time pageloads, anyway. So, don't track client-side navs!
				startTransactionOnLocationChange: false,
			}),
		],
		denyUrls: [
			// Don't log errors that were probably triggered by extensions and not by
			// our own app. (Apparently Sentry's setting to ignore browser extension
			// errors doesn't do this anywhere near as consistently as I'd expect?)
			//
			// Adapted from https://gist.github.com/impressiver/5092952, as linked in
			// https://docs.sentry.io/platforms/javascript/configuration/filtering/.
			/^chrome-extension:\/\//,
			/^moz-extension:\/\//,
		],

		// Since we're only tracking first-page loads and not navigations, 100%
		// sampling isn't actually so much! Tune down if it becomes a problem, tho.
		tracesSampleRate: 1.0,
	});
}

/**
 * ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its
 * children (or, well, any element with the chakra-css-reset class). It also
 * applies to .chakra-portal elements mounted by <Portal> components.
 *
 * We also apply some base styles, like the default text color.
 *
 * NOTE: We use the `:where` CSS selector, instead of the .chakra-css-reset
 * selector directly, to avoid specificity conflicts. e.g. the selector
 * `.chakra-css-reset h1` is considered MORE specific than `.my-h1`, whereas
 * the selector `:where(.chakra-css-reset) h1` is lower specificity.
 */
function ScopedCSSReset({ children }) {
	// Get the current theme and color mode.
	//
	// NOTE: The theme object returned by `useTheme` has some extensions that are
	// necessary for the code below, but aren't present in the theme config
	// returned by `extendTheme`! That's why we use this here instead of `theme`.
	const liveTheme = useTheme();
	const colorMode = useColorMode();

	// Resolve the theme's global styles into CSS objects for Emotion.
	const globalStylesCSS = resolveCSS(
		globalStyles({ theme: liveTheme, colorMode }),
	)(liveTheme);

	// Prepend our special scope selector to the global styles.
	const scopedGlobalStylesCSS = {};
	for (let [selector, rules] of Object.entries(globalStylesCSS)) {
		// The `body` selector is where typography etc rules go, but `body` isn't
		// actually *inside* our scoped element! Instead, ignore the `body` part,
		// and just apply it to the scoping element itself.
		if (selector.trim() === "body") {
			selector = "";
		}

		const scopedSelector =
			":where(.chakra-css-reset, .chakra-portal) " + selector;
		scopedGlobalStylesCSS[scopedSelector] = rules;
	}

	return (
		<>
			<Box className="chakra-css-reset">{children}</Box>
			<Global
				styles={css`
					/* Chakra's default global styles, placed here so we can override
           * the actual _global_ styles in the theme to be empty. That way,
           * it only affects Chakra stuff, not all elements! */
					${scopedGlobalStylesCSS}

					/* Chakra's CSS reset, copy-pasted and rescoped! */
          :where(.chakra-css-reset, .chakra-portal) {
						*,
						*::before,
						*::after {
							border-width: 0;
							border-style: solid;
							box-sizing: border-box;
						}

						main {
							display: block;
						}

						hr {
							border-top-width: 1px;
							box-sizing: content-box;
							height: 0;
							overflow: visible;
						}

						pre,
						code,
						kbd,
						samp {
							font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
							font-size: 1em;
						}

						a {
							background-color: transparent;
							color: inherit;
							text-decoration: inherit;
						}

						abbr[title] {
							border-bottom: none;
							text-decoration: underline;
							-webkit-text-decoration: underline dotted;
							text-decoration: underline dotted;
						}

						b,
						strong {
							font-weight: bold;
						}

						small {
							font-size: 80%;
						}

						sub,
						sup {
							font-size: 75%;
							line-height: 0;
							position: relative;
							vertical-align: baseline;
						}

						sub {
							bottom: -0.25em;
						}

						sup {
							top: -0.5em;
						}

						img {
							border-style: none;
						}

						button,
						input,
						optgroup,
						select,
						textarea {
							font-family: inherit;
							font-size: 100%;
							line-height: 1.15;
							margin: 0;
						}

						button,
						input {
							overflow: visible;
						}

						button,
						select {
							text-transform: none;
						}

						button::-moz-focus-inner,
						[type="button"]::-moz-focus-inner,
						[type="reset"]::-moz-focus-inner,
						[type="submit"]::-moz-focus-inner {
							border-style: none;
							padding: 0;
						}

						fieldset {
							padding: 0.35em 0.75em 0.625em;
						}

						legend {
							box-sizing: border-box;
							color: inherit;
							display: table;
							max-width: 100%;
							padding: 0;
							white-space: normal;
						}

						progress {
							vertical-align: baseline;
						}

						textarea {
							overflow: auto;
						}

						[type="checkbox"],
						[type="radio"] {
							box-sizing: border-box;
							padding: 0;
						}

						[type="number"]::-webkit-inner-spin-button,
						[type="number"]::-webkit-outer-spin-button {
							-webkit-appearance: none !important;
						}

						input[type="number"] {
							-moz-appearance: textfield;
						}

						[type="search"] {
							-webkit-appearance: textfield;
							outline-offset: -2px;
						}

						[type="search"]::-webkit-search-decoration {
							-webkit-appearance: none !important;
						}

						::-webkit-file-upload-button {
							-webkit-appearance: button;
							font: inherit;
						}

						details {
							display: block;
						}

						summary {
							display: list-item;
						}

						template {
							display: none;
						}

						[hidden] {
							display: none !important;
						}

						body,
						blockquote,
						dl,
						dd,
						h1,
						h2,
						h3,
						h4,
						h5,
						h6,
						hr,
						figure,
						p,
						pre {
							margin: 0;
						}

						button {
							background: transparent;
							padding: 0;
						}

						fieldset {
							margin: 0;
							padding: 0;
						}

						ol,
						ul {
							margin: 0;
							padding: 0;
						}

						textarea {
							resize: vertical;
						}

						button,
						[role="button"] {
							cursor: pointer;
						}

						button::-moz-focus-inner {
							border: 0 !important;
						}

						table {
							border-collapse: collapse;
						}

						h1,
						h2,
						h3,
						h4,
						h5,
						h6 {
							font-size: inherit;
							font-weight: inherit;
						}

						button,
						input,
						optgroup,
						select,
						textarea {
							padding: 0;
							line-height: inherit;
							color: inherit;
						}

						img,
						svg,
						video,
						canvas,
						audio,
						iframe,
						embed,
						object {
							display: block;
						}

						img,
						video {
							max-width: 100%;
							height: auto;
						}

						[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
							outline: none;
							box-shadow: none;
						}

						select::-ms-expand {
							display: none;
						}
					}
				`}
			/>
		</>
	);
}