アプリケーションのベースを作る

.env.sample

@@ -0,0 +1,6 @@
+VITE_FIREBASE_API_KEY=''
+VITE_FIREBASE_AUTH_DOMAIN=''
+VITE_FIREBASE_PROJECT_ID=''
+VITE_FIREBASE_STORAGE_BUCKET=''
+VITE_FIREBASE_MESSAGING_SENDER_ID=''
+VITE_FIREBASE_APP_ID=''

app/components/layouts/ResponsiveLayout.tsx

@@ -0,0 +1,140 @@
+import {
+  AppShell,
+  Burger,
+  Divider,
+  Group,
+  NavLink as MantineNavLink,
+  ScrollArea,
+  createPolymorphicComponent,
+} from '@mantine/core';
+import { useDisclosure, useViewportSize } from '@mantine/hooks';
+import { useMemo, useCallback, createContext, useContext } from 'react';
+import type { NavLinkProps } from '@mantine/core';
+import type { MouseEvent, ReactNode } from 'react';
+
+const HEADER_HEIGHT = 60;
+const CONTENT_PADDING = 16;
+
+type ResponsiveLayoutContextValue = {
+  navbar: {
+    toggle: () => void;
+  };
+  main: {
+    height: number;
+  };
+};
+
+const ResponsiveLayoutContext = createContext<ResponsiveLayoutContextValue>(
+  {
+    navbar: { toggle: () => {} },
+    main: { height: 0 },
+  },
+);
+
+export const useResponsiveLayoutContext = () =>
+  useContext(ResponsiveLayoutContext);
+
+export const ResponsiveLayout = ({
+  children,
+  header,
+  navbar,
+  main,
+}: {
+  children: ReactNode;
+  header: {
+    title: ReactNode;
+    props?: Parameters<typeof AppShell.Header>[0];
+  };
+  navbar?: {
+    navMenu: ReactNode;
+    accountMenu?: ReactNode;
+    props?: Parameters<typeof AppShell.Navbar>[0];
+  };
+  main?: { props?: Parameters<typeof AppShell.Main>[0] };
+}) => {
+  const [opened, { toggle }] = useDisclosure();
+  const { height } = useViewportSize();
+  const navbarValues = useMemo(() => ({ toggle }), [toggle]);
+  const mainValues = useMemo(
+    () => ({ height: height - HEADER_HEIGHT - CONTENT_PADDING * 2 }),
+    [height],
+  );
+
+  return (
+    <ResponsiveLayoutContext.Provider
+      value={{ navbar: navbarValues, main: mainValues }}
+    >
+      <AppShell
+        header={{ height: HEADER_HEIGHT }}
+        {...(navbar && {
+          navbar: {
+            width: { base: 200, md: 300, lg: 400 },
+            breakpoint: 'sm',
+            collapsed: { mobile: !opened },
+          },
+        })}
+        padding={CONTENT_PADDING}
+      >
+        <AppShell.Header {...header?.props}>
+          <Group h='100%' px={CONTENT_PADDING}>
+            {navbar && (
+              <Burger
+                opened={opened}
+                onClick={toggle}
+                hiddenFrom='sm'
+                size='sm'
+                {...(header.props?.c && {
+                  color: header.props.c as Parameters<
+                    typeof Burger
+                  >[0]['color'],
+                })}
+              />
+            )}
+            {header.title}
+          </Group>
+        </AppShell.Header>
+        {navbar && (
+          <AppShell.Navbar {...navbar?.props}>
+            <AppShell.Section
+              grow
+              p={CONTENT_PADDING}
+              component={ScrollArea}
+            >
+              {navbar.navMenu}
+            </AppShell.Section>
+            {navbar.accountMenu && (
+              <>
+                <Divider />
+                <AppShell.Section p={CONTENT_PADDING}>
+                  {navbar.accountMenu}
+                </AppShell.Section>
+              </>
+            )}
+          </AppShell.Navbar>
+        )}
+        <AppShell.Main {...main?.props}>{children}</AppShell.Main>
+      </AppShell>
+    </ResponsiveLayoutContext.Provider>
+  );
+};
+
+const _NavLink = ({ onClick, ...props }: NavLinkProps) => {
+  const {
+    navbar: { toggle },
+  } = useResponsiveLayoutContext();
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(event);
+      toggle();
+    },
+    [toggle, onClick],
+  );
+
+  return <MantineNavLink {...props} onClick={handleClick} />;
+};
+export const NavLink = createPolymorphicComponent<
+  'button',
+  NavLinkProps,
+  typeof _NavLink
+>(_NavLink);
+ResponsiveLayout.NavLink = NavLink;

app/components/screens/LoadingScreen.tsx

@@ -0,0 +1,9 @@
+import { Center, Loader } from '@mantine/core';
+
+export const LoadingScreen = () => {
+  return (
+    <Center p='lg'>
+      <Loader />
+    </Center>
+  );
+};

app/layouts/PublicLayout.tsx

@@ -0,0 +1,21 @@
+import {
+  ResponsiveLayout,
+  useResponsiveLayoutContext,
+} from '~/components/layouts/ResponsiveLayout';
+import { AccountMenu } from './_components/AccountMenu';
+import { NavMenu } from './_components/NavMenu';
+import { Title } from './_components/Title';
+import type { ReactNode } from 'react';
+
+export const PublicLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <ResponsiveLayout
+      header={{ title: <Title /> }}
+      navbar={{ navMenu: <NavMenu />, accountMenu: <AccountMenu /> }}
+    >
+      {children}
+    </ResponsiveLayout>
+  );
+};
+
+export const usePublicLayout = useResponsiveLayoutContext;

app/layouts/_components/AccountMenu.tsx

@@ -0,0 +1,3 @@
+export const AccountMenu = () => {
+  return <div>アカウントメニュー</div>;
+};

app/layouts/_components/NavMenu.tsx

@@ -0,0 +1,3 @@
+export const NavMenu = () => {
+  return <div>ナビメニュー</div>;
+};

app/layouts/_components/Title.tsx

@@ -0,0 +1,5 @@
+import { Text } from '@mantine/core';
+
+export const Title = () => {
+  return <Text fw={500}>Firebaseチュートリアル</Text>;
+};

app/root.tsx

@@ -1,13 +1,30 @@
+import '@mantine/core/styles.css';
+import './tailwind.css';
+import { Center, Title } from '@mantine/core';
 import {
+  json,
+  isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  useRouteError,
+  useLoaderData,
 } from '@remix-run/react';
+import { LoadingScreen } from '~/components/screens/LoadingScreen';
+import { initializeApp } from '~/utils/firebase/app';
+import { firebaseConfig } from '~/utils/firebase/config';
+import {
+  ColorSchemeScript,
+  MantineProvider,
+} from '~/utils/mantine/provider';
 import type { LinksFunction } from '@remix-run/node';
+import type { FirebaseOptions } from 'firebase/app';
 
-import './tailwind.css';
+export async function clientLoader() {
+  return json(firebaseConfig());
+}
 
 export const links: LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@@ -24,7 +41,7 @@ export const links: LinksFunction = () => [
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang='en'>
+    <html lang='ja'>
       <head>
         <meta charSet='utf-8' />
         <meta
@@ -33,20 +50,41 @@ export function Layout({ children }: { children: React.ReactNode }) {
         />
         <Meta />
         <Links />
+        <ColorSchemeScript />
       </head>
       <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
+        <MantineProvider>
+          {children}
+          <ScrollRestoration />
+          <Scripts />
+        </MantineProvider>
       </body>
     </html>
   );
 }
 
 export default function App() {
+  const config = useLoaderData<FirebaseOptions>();
+  initializeApp(config);
+
   return <Outlet />;
 }
 
 export function HydrateFallback() {
-  return <p>Loading...</p>;
+  return <LoadingScreen />;
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  const errorMessage =
+    (isRouteErrorResponse(error) && error.statusText) ??
+    'An Error Occurred';
+
+  return (
+    <Center h={100}>
+      <Title order={1} size='h5'>
+        {errorMessage}
+      </Title>
+    </Center>
+  );
 }

app/routes/_public._index.tsx

@@ -0,0 +1,5 @@
+import { Center } from '@mantine/core';
+
+export default function Index() {
+  return <Center>Home</Center>;
+}

app/routes/_public.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from '@remix-run/react';
+import { PublicLayout as _PublicLayout } from '~/layouts/PublicLayout';
+import type { MetaFunction } from '@remix-run/react';
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'Firebaseチュートリアル' },
+    { name: 'description', content: 'Firebaseチュートリアル' },
+  ];
+};
+export default function PublicLayout() {
+  return (
+    <_PublicLayout>
+      <Outlet />
+    </_PublicLayout>
+  );
+}

app/tailwind.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
 @tailwind utilities;

app/utils/firebase/app.ts

@@ -0,0 +1,8 @@
+import { initializeApp as _initializeApp, getApps } from 'firebase/app';
+import type { FirebaseOptions } from 'firebase/app';
+
+export const initializeApp = (config: FirebaseOptions) => {
+  if (getApps().length !== 0) return;
+
+  _initializeApp(config);
+};

app/utils/firebase/config.ts

@@ -0,0 +1,11 @@
+import type { FirebaseOptions } from 'firebase/app';
+
+export const firebaseConfig = () =>
+  ({
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  }) as FirebaseOptions;

app/utils/mantine/provider.tsx

@@ -0,0 +1,11 @@
+import {
+  ColorSchemeScript as _ColorSchemeScript,
+  MantineProvider as _MantineProvider,
+} from '@mantine/core';
+import type { ReactNode } from 'react';
+
+export const ColorSchemeScript = () => <_ColorSchemeScript />;
+
+export const MantineProvider = ({ children }: { children: ReactNode }) => (
+  <_MantineProvider>{children}</_MantineProvider>
+);

package.json

@@ -21,8 +21,11 @@
   },
   "dependencies": {
     "@local/shared": "workspace:^",
+    "@mantine/core": "^7.13.3",
+    "@mantine/hooks": "^7.13.3",
     "@remix-run/node": "^2.13.1",
     "@remix-run/react": "^2.13.1",
+    "firebase": "^10.14.1",
     "isbot": "^4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -41,7 +44,9 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.47",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.3.3",
     "stylelint": "^16.10.0",
     "stylelint-config-recess-order": "^5.1.1",