Use fresnel on site to prevent mismatch errors

workspaces/site/package.json

@@ -15,6 +15,7 @@
     "ssg": "node prerender"
   },
   "dependencies": {
+    "@artsy/fresnel": "^7.1.4",
     "lodash.omit": "^4.5.0",
     "lucide-react": "^0.291.0",
     "luxon": "^3.3.0",

workspaces/site/src/App.tsx

@@ -1,142 +1,17 @@
-import { MenuIcon } from 'lucide-react';
-import {
-  Appear,
-  Box,
-  Button,
-  Modal,
-  ModalManager,
-  Text,
-  ThemeProvider,
-  useLocalStorage,
-  useMatchMedia,
-} from 'preshape';
-import { useEffect, useState } from 'react';
-import { HelmetProvider } from 'react-helmet-async';
-import { Navigate, Route, Routes } from 'react-router-dom';
-import { Menu } from './components/Menu/Menu';
-import { ColorsPage } from './pages/Colors';
-import { ComponentPage } from './pages/Component';
-import { ComponentsPage } from './pages/Components';
-import { SizingsPage } from './pages/Sizings';
-import { ThemesPage } from './pages/Themes';
-import 'preshape/dist/style.css';
-import './App.css';
+import DesktopApp from './components/App/AppDesktop';
+import MobileApp from './components/App/AppMobile';
+import { Media, MediaContextProvider } from './components/App/Media';
 
 const App = () => {
-  const [menuVisible, setMenuVisible] = useState(false);
-  const [dontUseMessageVisible, setDontUseMessageVisible] = useLocalStorage(
-    'preshape.dontUseMessage',
-    true
-  );
-
-  const match = useMatchMedia(['800px']);
-  const isDesktop = match('800px');
-
-  useEffect(() => {
-    setMenuVisible(false);
-  }, [isDesktop]);
-
   return (
-    <HelmetProvider>
-      <ThemeProvider>
-        <ModalManager>
-          <Box flex="vertical" grow>
-            {dontUseMessageVisible && (
-              <Box
-                fixed="bottom-right"
-                padding="x6"
-                maxWidth="400px"
-                zIndex={100}
-              >
-                <Appear
-                  animation="Pop"
-                  backgroundColor="text-shade-1"
-                  borderRadius="x3"
-                  elevate="x1"
-                  delay={1000}
-                  padding="x6"
-                  textColor="background-shade-1"
-                >
-                  <Text margin="x6">
-                    Welcome! Take a look around. However, you probably{' '}
-                    <Text textColor="background-shade-1" strong>
-                      shouldn't use this in your project
-                    </Text>
-                    . It's a component library for my own projects, so{' '}
-                    <Text textColor="background-shade-1" strong>
-                      there's no guarantee of stability or support
-                    </Text>
-                    .
-                  </Text>
-
-                  <Button
-                    color="accent"
-                    onClick={() => setDontUseMessageVisible(false)}
-                    variant="primary"
-                    width="100%"
-                  >
-                    Ok
-                  </Button>
-                </Appear>
-              </Box>
-            )}
-
-            {!isDesktop && (
-              <Box
-                alignChildren="middle"
-                backgroundColor="black"
-                flex="horizontal"
-                onClick={() => setMenuVisible(true)}
-                padding="x4"
-                style={{ position: 'sticky', top: 0 }}
-                zIndex={10}
-                textColor="light-shade-1"
-              >
-                <MenuIcon size="2rem" />
-              </Box>
-            )}
-
-            <Modal
-              borderRadius="x0"
-              fullscreen
-              visible={menuVisible}
-              zIndex={11}
-            >
-              <Menu onSelect={() => setMenuVisible(false)} />
-            </Modal>
-
-            <Box flex="horizontal" grow>
-              {isDesktop && (
-                <Appear
-                  animation="FadeSlideRight"
-                  backgroundColor="background-shade-2"
-                  maxWidth="300px"
-                  borderColor="background-shade-3"
-                  borderSize="x2"
-                  borderRight
-                  maxHeight="100vh"
-                  overflow="auto"
-                  style={{ position: 'sticky', top: '0' }}
-                >
-                  <Menu />
-                </Appear>
-              )}
-
-              <Box basis="0" grow minWidth={0}>
-                <Routes>
-                  <Route element={<Navigate to="/components" />} path="/" />
-                  <Route element={<ColorsPage />} path="/colors" />
-                  <Route element={<ThemesPage />} path="/themes" />
-                  <Route element={<SizingsPage />} path="/sizings" />
-                  <Route element={<ComponentsPage />} path="/components" />
-                  <Route element={<ComponentPage />} path="/components/:id" />
-                </Routes>
-              </Box>
-            </Box>
-          </Box>
-        </ModalManager>
-      </ThemeProvider>
-    </HelmetProvider>
+    <MediaContextProvider>
+      <Media greaterThanOrEqual="sm">
+        <DesktopApp />
+      </Media>
+      <Media lessThan="sm">
+        <MobileApp />
+      </Media>
+    </MediaContextProvider>
   );
 };
 

workspaces/site/src/components/App/AppDesktop.tsx

@@ -0,0 +1,30 @@
+import { Appear, Box } from 'preshape';
+import { Menu } from '../Menu/Menu';
+import AppShell from './AppShell';
+import Router from './Router';
+
+const AppDesktop = () => {
+  return (
+    <AppShell>
+      <Box flex="horizontal" grow>
+        <Appear
+          animation="FadeSlideRight"
+          backgroundColor="background-shade-2"
+          maxWidth="300px"
+          borderColor="background-shade-3"
+          borderSize="x2"
+          borderRight
+          maxHeight="100vh"
+          overflow="auto"
+          style={{ position: 'sticky', top: '0' }}
+        >
+          <Menu />
+        </Appear>
+
+        <Router />
+      </Box>
+    </AppShell>
+  );
+};
+
+export default AppDesktop;

workspaces/site/src/components/App/AppMobile.tsx

@@ -0,0 +1,35 @@
+import { MenuIcon } from 'lucide-react';
+import { Box, Modal } from 'preshape';
+import { useState } from 'react';
+import { Menu } from '../Menu/Menu';
+import AppShell from './AppShell';
+import Router from './Router';
+
+const AppMobile = () => {
+  const [menuVisible, setMenuVisible] = useState(false);
+
+  return (
+    <AppShell>
+      <Box
+        alignChildren="middle"
+        backgroundColor="black"
+        flex="horizontal"
+        onClick={() => setMenuVisible(true)}
+        padding="x4"
+        style={{ position: 'sticky', top: 0 }}
+        zIndex={10}
+        textColor="light-shade-1"
+      >
+        <MenuIcon size="2rem" />
+      </Box>
+
+      <Modal borderRadius="x0" fullscreen visible={menuVisible} zIndex={11}>
+        <Menu onSelect={() => setMenuVisible(false)} />
+      </Modal>
+
+      <Router />
+    </AppShell>
+  );
+};
+
+export default AppMobile;

workspaces/site/src/components/App/AppShell.tsx

@@ -0,0 +1,24 @@
+import { Box, ModalManager, ThemeProvider } from 'preshape';
+import 'preshape/dist/style.css';
+import { type PropsWithChildren } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
+import './App.css';
+import Message from './Message';
+
+const AppShell = ({ children }: PropsWithChildren) => {
+  return (
+    <HelmetProvider>
+      <ThemeProvider>
+        <ModalManager>
+          <Box flex="vertical" grow>
+            <Message />
+
+            {children}
+          </Box>
+        </ModalManager>
+      </ThemeProvider>
+    </HelmetProvider>
+  );
+};
+
+export default AppShell;

workspaces/site/src/components/App/Media.tsx

@@ -0,0 +1,12 @@
+import { createMedia } from '@artsy/fresnel';
+
+const PreshapeMedia = createMedia({
+  breakpoints: {
+    xs: 0,
+    sm: 800,
+  },
+});
+
+export const mediaStyles = PreshapeMedia.createMediaStyle();
+
+export const { Media, MediaContextProvider } = PreshapeMedia;

workspaces/site/src/components/App/Message.tsx

@@ -0,0 +1,45 @@
+import { Appear, Box, Button, Text, useLocalStorage } from 'preshape';
+
+const Message = () => {
+  const [dontUseMessageVisible, setDontUseMessageVisible] = useLocalStorage(
+    'preshape.dontUseMessage',
+    true
+  );
+
+  return dontUseMessageVisible ? (
+    <Box fixed="bottom-right" padding="x6" maxWidth="400px" zIndex={100}>
+      <Appear
+        animation="Pop"
+        backgroundColor="text-shade-1"
+        borderRadius="x3"
+        elevate="x1"
+        delay={1000}
+        padding="x6"
+        textColor="background-shade-1"
+      >
+        <Text margin="x6">
+          Welcome! Take a look around. However, you probably{' '}
+          <Text textColor="background-shade-1" strong>
+            shouldn't use this in your project
+          </Text>
+          . It's a component library for my own projects, so{' '}
+          <Text textColor="background-shade-1" strong>
+            there's no guarantee of stability or support
+          </Text>
+          .
+        </Text>
+
+        <Button
+          color="accent"
+          onClick={() => setDontUseMessageVisible(false)}
+          variant="primary"
+          width="100%"
+        >
+          Ok
+        </Button>
+      </Appear>
+    </Box>
+  ) : null;
+};
+
+export default Message;

workspaces/site/src/components/App/Router.tsx

@@ -0,0 +1,26 @@
+import { Box } from 'preshape';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { ColorsPage } from '../../pages/Colors';
+import { ComponentPage } from '../../pages/Component';
+import { ComponentsPage } from '../../pages/Components';
+import { SizingsPage } from '../../pages/Sizings';
+import { ThemesPage } from '../../pages/Themes';
+
+const Router = () => {
+  return (
+    <Box flex="horizontal" grow>
+      <Box basis="0" grow minWidth={0}>
+        <Routes>
+          <Route element={<Navigate to="/components" />} path="/" />
+          <Route element={<ColorsPage />} path="/colors" />
+          <Route element={<ThemesPage />} path="/themes" />
+          <Route element={<SizingsPage />} path="/sizings" />
+          <Route element={<ComponentsPage />} path="/components" />
+          <Route element={<ComponentPage />} path="/components/:id" />
+        </Routes>
+      </Box>
+    </Box>
+  );
+};
+
+export default Router;

workspaces/site/tsconfig.json

@@ -1,5 +1,4 @@
 {
-
   "include": ["src", "src/assets/documentation.json"],
   "references": [
     { "path": "./tsconfig.node.json" }

yarn.lock

@@ -17,6 +17,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@artsy/fresnel@npm:^7.1.4":
+  version: 7.1.4
+  resolution: "@artsy/fresnel@npm:7.1.4"
+  peerDependencies:
+    react: ">=18.0.0"
+  checksum: ac0ed0ddffa3e63b3f8dcfec19001b223c0efdb7d433c47aecc4ac83234501bb88fcefe6a3735d965a459403a17b24a95b12ceecb1270b3fe7f49bd094ffa6a7
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.21.4":
   version: 7.21.4
   resolution: "@babel/code-frame@npm:7.21.4"
@@ -14011,6 +14020,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "site@workspace:workspaces/site"
   dependencies:
+    "@artsy/fresnel": ^7.1.4
     "@svgr/cli": ^5.5.0
     "@types/compression": ^1.7.2
     "@types/express": ^4.17.17