chore: Migrate from react-bootstrap to mantine (part 1 of many)

packages/app/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
@@ -9,12 +10,16 @@ import '../src/LandingPage.scss';
 
 import { ThemeWrapper } from '../src/ThemeWrapper';
 
+const queryClient = new QueryClient();
+
 const preview: Preview = {
   decorators: [
     Story => (
-      <ThemeWrapper>
-        <Story />
-      </ThemeWrapper>
+      <QueryClientProvider client={queryClient}>
+        <ThemeWrapper>
+          <Story />
+        </ThemeWrapper>
+      </QueryClientProvider>
     ),
   ],
 };

packages/app/package.json

@@ -23,6 +23,7 @@
     "@hyperdx/lucene": "^3.1.1",
     "@lezer/highlight": "^1.2.0",
     "@mantine/core": "7.9.2",
+    "@mantine/form": "^7.10.1",
     "@mantine/hooks": "7.9.2",
     "@mantine/notifications": "^7.9.2",
     "@mantine/spotlight": "7.9.2",

packages/app/pages/_app.tsx

@@ -122,10 +122,10 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
             <QueryClientProvider client={queryClient}>
               <ThemeWrapper fontFamily={userPreferences.font}>
                 {getLayout(<Component {...pageProps} />)}
+                {confirmModal}
+                {background}
               </ThemeWrapper>
               <ReactQueryDevtools initialIsOpen={false} />
-              {confirmModal}
-              {background}
             </QueryClientProvider>
           </QueryParamProvider>
         </HDXQueryParamProvider>

packages/app/src/AppNav.tsx

@@ -3,7 +3,6 @@ import Link from 'next/link';
 import Router, { useRouter } from 'next/router';
 import cx from 'classnames';
 import Fuse from 'fuse.js';
-import { Button } from 'react-bootstrap';
 import {
   NumberParam,
   StringParam,
@@ -14,7 +13,7 @@ import {
 import HyperDX from '@hyperdx/browser';
 import {
   ActionIcon,
-  Button as MButton,
+  Button,
   CloseButton,
   Collapse,
   Input,
@@ -939,16 +938,15 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 <Logo />
               )}
             </Link>
-            <Button
-              variant="dark"
-              size="sm"
-              className={isCollapsed ? 'mt-4' : ''}
-              style={isCollapsed ? { marginLeft: '-0.5rem' } : {}}
+            <ActionIcon
+              variant="default"
+              size="md"
               title="Collapse/Expand Navigation"
+              style={isCollapsed ? { marginLeft: -8, marginTop: 16 } : {}}
               onClick={() => setIsPreferCollapsed(v => !v)}
             >
               <i className="bi bi-arrows-angle-expand"></i>
-            </Button>
+            </ActionIcon>
           </div>
           <div className="mt-4">
             <div className="px-3 d-flex align-items-center justify-content-between mb-2">
@@ -1328,14 +1326,14 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                     passHref
                     legacyBehavior
                   >
-                    <MButton
+                    <Button
                       variant="light"
                       size="xs"
                       component="a"
                       className="hover-color-white"
                     >
                       Get Started for Free
-                    </MButton>
+                    </Button>
                   </Link>
                 </div>
               </div>

packages/app/src/Clipboard.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import cx from 'classnames';
-import { Button } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { UnstyledButton } from '@mantine/core';
 
 export default function Clipboard({
   text,
@@ -22,12 +22,9 @@ export default function Clipboard({
         setTimeout(() => setIsCopied(false), 2000);
       }}
     >
-      <Button
-        variant="link"
-        className={cx('px-0 text-decoration-none fs-7', className)}
-      >
+      <UnstyledButton variant="transparent" className={cx('fs-7', className)}>
         {children({ isCopied })}
-      </Button>
+      </UnstyledButton>
     </CopyToClipboard>
   );
 }

packages/app/src/InstallInstructionsModal.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import InstallInstructionsModal from './InstallInstructionsModal';
+
+const meta = {
+  component: InstallInstructionsModal,
+} satisfies Meta<typeof InstallInstructionsModal>;
+
+export default meta;
+
+export const Default = () => {
+  return <InstallInstructionsModal show onHide={() => {}} />;
+};