feat(monorepo): migrate to typescript monorepo

apps/mobile-legacy/src/ui/components/layout/ScreenHeading.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { styled, View, XStack } from "tamagui";
+
+import { Text } from "@/ui/components/typography";
+
+const ActionContainer = styled(XStack, {
+    alignItems: "center",
+    minWidth: "$5",
+    gap: "$1",
+});
+
+interface ScreenHeadingProps {
+    leadingAction?: React.ReactNode;
+    title?: string;
+    trailingActions?: React.ReactNode | React.ReactNode[];
+    paddingHorizontal?: number | string;
+    marginBottom?: number | string;
+}
+
+export const ScreenHeading = (props: ScreenHeadingProps) => {
+    const { leadingAction, title, trailingActions, paddingHorizontal = "$4", marginBottom = "$2" } = props;
+    const trailingActionsArray = Array.isArray(trailingActions)
+        ? trailingActions
+        : trailingActions
+          ? [trailingActions]
+          : [];
+
+    return (
+        <XStack
+            alignItems="center"
+            justifyContent="space-between"
+            height="$6"
+            backgroundColor="$background"
+            paddingHorizontal={paddingHorizontal}
+            marginBottom={marginBottom}
+        >
+            <ActionContainer>{leadingAction}</ActionContainer>
+            <XStack flex={1} justifyContent="center">
+                {title ? (
+                    <Text fontWeight="600" fontSize="$6">
+                        {title}
+                    </Text>
+                ) : (
+                    <View />
+                )}
+            </XStack>
+            <ActionContainer>
+                {trailingActionsArray.map((action, index) => (
+                    <React.Fragment key={index}>{action}</React.Fragment>
+                ))}
+            </ActionContainer>
+        </XStack>
+    );
+};

apps/mobile-legacy/src/ui/components/layout/ScreenSection.tsx

@@ -0,0 +1,47 @@
+import type React from "react";
+
+import { ArrowRight } from "@tamagui/lucide-icons";
+import { Href, Link } from "expo-router";
+import { GetProps, Paragraph, styled, XStack } from "tamagui";
+
+import { Text } from "@/ui/components/typography";
+
+const SectionContainer = styled(XStack, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    paddingVertical: "$2",
+});
+
+type ScreenSectionProps = GetProps<typeof SectionContainer> & {
+    title: string;
+    forwardLink?: Href;
+};
+
+type ScreenSectionLinkProps = {
+    href: Href;
+};
+
+const ScreenSectionLink = ({ href }: ScreenSectionLinkProps) => (
+    <Link href={href} push asChild>
+        <XStack gap="2" alignItems="center">
+            <Paragraph color="$accent5" fontWeight={500}>
+                Voir tout
+            </Paragraph>
+            <ArrowRight color="$accent5" />
+        </XStack>
+    </Link>
+);
+
+export const ScreenSection = (props: ScreenSectionProps) => {
+    const { title, forwardLink, ...rest } = props;
+
+    return (
+        <SectionContainer {...rest}>
+            <Text fontSize="$6" fontWeight="bold" color="$color" numberOfLines={1} flexShrink={1} marginRight="$2">
+                {title}
+            </Text>
+            {forwardLink && <ScreenSectionLink href={forwardLink} />}
+        </SectionContainer>
+    );
+};

apps/mobile-legacy/src/ui/components/layout/ScreenView.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import { StatusBar } from "expo-status-bar";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { styled, YStack } from "tamagui";
+
+import { ScreenHeading } from "@/ui/components/layout/ScreenHeading";
+import { ScreenSection } from "@/ui/components/layout/ScreenSection";
+
+type ScreenViewProps = React.ComponentProps<typeof YStack> & {
+    showStatusBar?: boolean;
+    statusBarStyle?: "auto" | "inverted" | "light" | "dark";
+    statusBarBackgroundColor?: string;
+    children?: React.ReactNode;
+};
+
+type ScreenViewComponent = React.FC<React.PropsWithChildren<ScreenViewProps>> & {
+    Heading: typeof ScreenHeading;
+    Section: typeof ScreenSection;
+};
+
+const ScreenContent = styled(YStack, {
+    gap: "$4",
+    paddingHorizontal: "$4",
+    alignItems: "center",
+});
+
+const ScreenView: ScreenViewComponent = (props: React.PropsWithChildren<ScreenViewProps>) => {
+    const {
+        showStatusBar = true,
+        statusBarStyle = "auto",
+        statusBarBackgroundColor = "transparent",
+        padding,
+        children,
+        ...rest
+    } = props;
+    const insets = useSafeAreaInsets();
+
+    let headingElement: React.ReactNode | null = null;
+    const otherChildren: React.ReactNode[] = [];
+
+    // Iterate through children to find the Heading and separate others
+    React.Children.forEach(children, child => {
+        if (React.isValidElement(child)) {
+            if (child.type === ScreenView.Heading) {
+                headingElement = child;
+            } else {
+                otherChildren.push(child);
+            }
+        } else {
+            otherChildren.push(child);
+        }
+    });
+
+    return (
+        <>
+            {showStatusBar ? <StatusBar style={statusBarStyle} backgroundColor={statusBarBackgroundColor} /> : null}
+
+            <YStack flex={1} paddingTop={insets.top} backgroundColor="$background">
+                {headingElement}
+
+                <ScreenContent
+                    flex={1}
+                    paddingBottom={insets.bottom}
+                    paddingHorizontal={padding ?? rest.paddingHorizontal ?? "$4"}
+                    {...rest}
+                >
+                    {otherChildren}
+                </ScreenContent>
+            </YStack>
+        </>
+    );
+};
+
+ScreenView.Heading = ScreenHeading;
+ScreenView.Section = ScreenSection;
+
+export { ScreenView };

apps/mobile-legacy/src/ui/components/layout/index.ts

@@ -0,0 +1 @@
+export { ScreenView } from "@/ui/components/layout/ScreenView";