Merge pull request #32 from TaitoUnited/feat/web-support

Web Support 💻

app.config.ts

@@ -23,7 +23,7 @@ const expoConfig: ExpoConfig = {
   version: '0.0.1',
   orientation: 'portrait',
   jsEngine: 'hermes',
-  platforms: ['ios', 'android'],
+  platforms: ['ios', 'android', 'web'], // Remove web if you don't need to support it
   icon: config.iconImage,
   newArchEnabled: true,
   backgroundColor: '#000000', // root view background
@@ -40,10 +40,16 @@ const expoConfig: ExpoConfig = {
   },
   ios: {
     bundleIdentifier: appId,
-    supportsTablet: false, // Change this if your app supports tablets
+    supportsTablet: true, // Change this if your app supports tablets
     appStoreUrl: config.appStoreUrl,
     bitcode: false,
   },
+  // Remove the `web` entry if you don't need to support it
+  web: {
+    bundler: 'metro',
+    output: 'static',
+    favicon: config.iconImage,
+  },
   extra: {
     ...config,
     eas: {

babel.config.js

@@ -2,6 +2,9 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['macros', 'react-native-reanimated/plugin'],
+    plugins: [
+      'macros',
+      'react-native-reanimated/plugin', // NOTE: this plugin MUST be last
+    ],
   };
 };

metro.config.js

@@ -1,6 +1,11 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 
+// Learn more https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#step-3-wrap-metro-config-with-reanimated-wrapper-recommended
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
+
 const config = getDefaultConfig(__dirname);
 
 config.transformer.minifierConfig = {
@@ -13,9 +18,9 @@ config.transformer.minifierConfig = {
 config.transformer.getTransformOptions = async () => ({
   // The following allows tree shaking and lazy loading. Learn more https://docs.expo.dev/guides/tree-shaking/
   transform: {
-    experimentalImportSupport: true,
-    inlineRequires: true,
+    experimentalImportSupport: false,
+    inlineRequires: false,
   },
 });
 
-module.exports = config;
+module.exports = wrapWithReanimatedMetroConfig(config);

src/app/(auth)/landing.web.tsx

@@ -0,0 +1,168 @@
+import { Trans, msg } from '@lingui/macro';
+import { Link } from 'expo-router';
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import * as DropdownMenu from 'zeego/dropdown-menu';
+
+import StatusBar from '~components/common/StatusBar';
+import { IconButton, Stack, Text } from '~components/uikit';
+import { useI18n } from '~services/i18n';
+import { styled, useTheme } from '~styles';
+
+export default function Landing() {
+  const { height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+
+  return (
+    <Wrapper>
+      <ImageBackground
+        resizeMode="stretch"
+        source={require('~assets/landing_background.jpg')}
+      >
+        <TopSection
+          style={{ paddingTop: Math.max(insets.top, theme.space.regular) }}
+        >
+          <TopSectionHeader>
+            <LanguageSelector />
+          </TopSectionHeader>
+
+          <TopSectionBody>
+            <Stack axis="y" spacing="medium">
+              <BlackText variant="headingS" align="center" withLineHeight>
+                <Trans>Welcome to</Trans>
+              </BlackText>
+              <BlackText variant="headingXl" align="center">
+                <Trans>Taito Template</Trans>
+              </BlackText>
+
+              <BlackText
+                variant="headingS"
+                align="center"
+                withLineHeight
+                style={{ marginLeft: 16 }}
+              >
+                <Trans>By Taito United</Trans> 💚
+              </BlackText>
+            </Stack>
+          </TopSectionBody>
+        </TopSection>
+
+        <BottomSection style={{ minHeight: height * 0.4 }}>
+          <Stack axis="y" spacing="regular" align="center">
+            <WhiteText variant="body" align="center" withLineHeight>
+              ✨ <Trans>Start your journey</Trans> ✨
+            </WhiteText>
+            <Link href="/(auth)/login" asChild>
+              <Button testID="loginButton">
+                <WhiteText variant="bodyBold">
+                  <Trans>Sign in</Trans>
+                </WhiteText>
+              </Button>
+            </Link>
+
+            <Line />
+            <WhiteText variant="overlineSmall">
+              <Trans>Or</Trans>
+            </WhiteText>
+            <Line />
+
+            <Link href="/(auth)/signup" asChild>
+              <Button testID="signInButton">
+                <WhiteText variant="bodyBold">
+                  <Trans>Create an account</Trans>
+                </WhiteText>
+              </Button>
+            </Link>
+          </Stack>
+        </BottomSection>
+      </ImageBackground>
+
+      <StatusBar transparent />
+    </Wrapper>
+  );
+}
+
+function LanguageSelector() {
+  const { _, setLocale } = useI18n();
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <IconButton icon="globe" color="neutral" />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item key="fi" onSelect={() => setLocale('fi')}>
+          <DropdownMenu.ItemTitle>{_(msg`Finnish`)}</DropdownMenu.ItemTitle>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item key="en" onSelect={() => setLocale('en')}>
+          <DropdownMenu.ItemTitle>{_(msg`English`)}</DropdownMenu.ItemTitle>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+// NOTE: it's often the case that the landing screen is very custom and doesn't
+// adhere to the design system 100%. In that case, it's ok to use custom styles
+// that are out of the design system like here we are using hard coded white color.
+
+const Wrapper = styled('View', {
+  position: 'relative',
+  flex: 1,
+});
+
+const ImageBackground = styled('ImageBackground', {
+  height: '100%',
+  width: '100%',
+  justifyContent: 'flex-end',
+  paddingHorizontal: '$xxs',
+});
+
+const BlackText = styled(Text, {
+  color: 'rgba(0, 0, 0, 0.8)',
+});
+
+const WhiteText = styled(Text, {
+  color: '#fff',
+});
+
+const TopSection = styled('View', {
+  flex: 1,
+});
+
+const TopSectionHeader = styled('View', {
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  paddingHorizontal: '$regular',
+});
+
+const TopSectionBody = styled('View', {
+  flex: 1,
+  flexCenter: 'column',
+  padding: '$large',
+});
+
+const BottomSection = styled('View', {
+  padding: '$regular',
+  paddingTop: '$large',
+  backgroundColor: 'rgba(0, 0, 0, 0.65)',
+  borderRadius: '$large',
+});
+
+const Button = styled('TouchableHighlight', {
+  padding: '$medium',
+  borderRadius: '$full',
+  backgroundColor: 'rgba(0, 0, 0, 1)',
+  flexCenter: 'row',
+  flexGrow: 1,
+  width: '50%',
+}).attrs(() => ({
+  underlayColor: 'rgba(0, 0, 0, 0.6)',
+}));
+
+const Line = styled('View', {
+  height: 1,
+  width: 72,
+  backgroundColor: 'rgba(255, 255, 255, 0.15)',
+});

src/app/(tabs)/settings.tsx

@@ -1,10 +1,9 @@
 import { msg } from '@lingui/macro';
-import { Alert } from 'react-native';
 
 import MenuList from '~components/common/MenuList';
 import { useHeaderPlaygroundButton } from '~components/playground/utils';
 import { useMenuListItem } from '~components/settings/hooks';
-import { Icon } from '~components/uikit';
+import { Icon, alert } from '~components/uikit';
 import { useAuthStore } from '~services/auth';
 import { useI18n } from '~services/i18n';
 import { styled } from '~styles';
@@ -15,8 +14,8 @@ export default function Settings() {
   const { _ } = useI18n();
   const logout = useAuthStore((s) => s.logout);
   function handleLogout() {
-    Alert.alert(_(msg`Are you sure you want to logout?`), '', [
-      { text: _(msg`Cancel`), style: 'cancel' },
+    alert(_(msg`Are you sure you want to logout?`), '', [
+      { text: _(msg`Cancel`), style: 'cancel', onPress: () => {} },
       { text: _(msg`I am sure`), onPress: logout },
     ]);
   }

src/app/+html.tsx

@@ -0,0 +1,38 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+        {/* 
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

src/app/_layout.tsx

@@ -8,24 +8,25 @@ import {
 } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { useEffect } from 'react';
-import { DevSettings } from 'react-native';
+import { DevSettings, Platform } from 'react-native';
 
 import Providers from '~Providers';
 import StatusBar from '~components/common/StatusBar';
+import Meta from '~components/web/Meta';
 import { useAuthStore } from '~services/auth';
 import { useEffectEvent } from '~utils/common';
 import { useAppReady } from '~utils/init';
 import { useDefaultStackScreenOptions } from '~utils/navigation';
 
-if (__DEV__) {
+if (__DEV__ && ['android', 'ios'].includes(Platform.OS)) {
   const devMenuItems = [
     {
       name: 'Open Playground',
-      callback: () => router.navigate('playground'),
+      callback: () => router.navigate('/playground'),
     },
     {
       name: 'Open Sitemap',
-      callback: () => router.navigate('_sitemap'),
+      callback: () => router.navigate('/_sitemap'),
     },
   ];
 
@@ -44,6 +45,7 @@ export default function RootLayout() {
 
   return (
     <Providers>
+      <Meta />
       <RootLayoutNavigator />
       <StatusBar transparent />
       {appReady && <RouteProtection />}
@@ -74,6 +76,7 @@ function RouteProtection() {
   const pathname = usePathname();
   const authStatus = useAuthStore((s) => s.status);
   const notInAuthRoute = segments[0] !== '(auth)';
+  const notInDevRoutes = pathname !== '/_sitemap' && pathname !== '/playground';
 
   const onAuthChange = useEffectEvent(() => {
     if (authStatus === 'unauthenticated' && notInAuthRoute) {
@@ -84,8 +87,7 @@ function RouteProtection() {
   });
 
   const onPathChange = useEffectEvent(() => {
-    if (authStatus === 'unauthenticated' && notInAuthRoute) {
-      router.replace('/');
+    if (authStatus === 'unauthenticated' && notInAuthRoute && notInDevRoutes) {
       router.navigate('/(auth)/landing');
     }
   });

src/components/uikit/alert.ts

@@ -0,0 +1,25 @@
+import { Alert, Platform } from 'react-native';
+
+const alertPolyfill = (
+  title: string,
+  description: string,
+  options: Array<{
+    text: string;
+    onPress: () => void;
+    style?: string;
+  }>
+) => {
+  const result = window.confirm(
+    [title, description].filter(Boolean).join('\n')
+  );
+
+  if (result) {
+    const confirmOption = options.find(({ style }) => style !== 'cancel');
+    confirmOption && confirmOption.onPress();
+  } else {
+    const cancelOption = options.find(({ style }) => style === 'cancel');
+    cancelOption && cancelOption.onPress();
+  }
+};
+
+export const alert = Platform.OS === 'web' ? alertPolyfill : Alert.alert;

src/components/uikit/index.ts

@@ -8,6 +8,7 @@ export { PickerSheet } from './PickerSheet';
 export { ProgressBar } from './ProgressBar';
 export { SegmentedControl } from './SegmentedControl';
 export { Text } from './Text';
+export { alert } from './alert';
 export { Button } from './buttons/Button';
 export { IconButton } from './buttons/IconButton';
 export { Checkbox } from './inputs/Checkbox';
@@ -19,3 +20,4 @@ export { TextInput } from './inputs/TextInput';
 export { Grid } from './layout/Grid';
 export { Spacer } from './layout/Spacer';
 export { Stack } from './layout/Stack';
+