feat(monorepo): migrate to typescript monorepo

2025-11-07 17:09:29 +02:00
parent 3e09956f05
commit 075a388ccb
745 changed files with 2341 additions and 5082 deletions
@@ -0,0 +1,129 @@
+import React, { useCallback } from "react";
+
+import ContentLoader, { Circle, Rect } from "react-content-loader/native";
+import { Dimensions, FlatList } from "react-native";
+import { View } from "tamagui";
+
+import { ArticleList, ArticleListDisplayMode } from "@/ui/components/content/article/ArticleList";
+
+const { width: screenWidth } = Dimensions.get("window");
+const data: number[] = new Array(5).fill(0);
+
+type ArticleSkeletonListProps = {
+    horizontal?: boolean;
+    displayMode?: ArticleListDisplayMode;
+};
+
+const OverviewCardSkeleton = (props: any) => (
+    <ContentLoader
+        speed={1}
+        interval={0.3}
+        backgroundColor="#D4D5D8"
+        foregroundColor="white"
+        height={350}
+        animate={true}
+        width="100%"
+        {...props}
+    >
+        <Rect x="0" y="0" rx="8" ry="8" width="100%" height="200" />
+        <Rect x="0" y="216" rx="4" ry="4" width="80%" height="10" />
+        <Rect x="0" y="232" rx="4" ry="4" width="100%" height="10" />
+
+        <Rect x="0" y="256" rx="4" ry="4" width="100%" height="10" />
+        <Rect x="0" y="272" rx="4" ry="4" width="60%" height="10" />
+
+        <Circle cx="10" cy="310" r="9" />
+        <Rect x="30" y="305" rx="4" ry="4" width="15%" height="10" />
+        <Rect x="215" y="305" rx="4" ry="4" width="20%" height="10" />
+    </ContentLoader>
+);
+
+const MagazineCardSkeleton = (props: any) => (
+    <ContentLoader
+        speed={1.5}
+        backgroundColor="#D4D5D8"
+        foregroundColor="white"
+        height={140}
+        animate={true}
+        width="100%"
+        {...props}
+    >
+        <Rect x="235" y="0" rx="8" ry="8" width="120" height="90" />
+
+        <Rect x="0" y="0" rx="4" ry="4" width="54%" height="10" />
+        <Rect x="0" y="16" rx="4" ry="4" width="56%" height="10" />
+        <Rect x="0" y="40" rx="4" ry="4" width="55%" height="10" />
+        <Rect x="0" y="56" rx="4" ry="4" width="55%" height="10" />
+        <Rect x="0" y="72" rx="4" ry="4" width="55%" height="10" />
+
+        <Circle cx="10" cy="110" r="9" />
+        <Rect x="30" y="105" rx="4" ry="4" width="15%" height="10" />
+        <Rect x="315" y="105" rx="4" ry="4" width="40" height="10" />
+    </ContentLoader>
+);
+
+const TextOnlyCardSkeleton = (props: any) => (
+    <ContentLoader
+        speed={1.5}
+        backgroundColor="#D4D5D8"
+        foregroundColor="white"
+        height={150}
+        animate={true}
+        width="100%"
+        {...props}
+    >
+        <Rect x="0" y="16" rx="4" ry="4" width="80%" height="10" />
+        <Rect x="0" y="32" rx="4" ry="4" width="100%" height="10" />
+
+        <Rect x="0" y="56" rx="4" ry="4" width="100%" height="10" />
+        <Rect x="0" y="72" rx="4" ry="4" width="60%" height="10" />
+
+        <Circle cx="10" cy="110" r="9" />
+        <Rect x="30" y="105" rx="4" ry="4" width="15%" height="10" />
+        <Rect x="215" y="105" rx="4" ry="4" width="20%" height="10" />
+    </ContentLoader>
+);
+
+const keyExtractor = (_: number, index: number) => index.toString();
+
+const selectSkeletonComponent = (displayMode: ArticleListDisplayMode) => {
+    switch (displayMode) {
+        case "magazine":
+            return MagazineCardSkeleton;
+        case "text-only":
+            return TextOnlyCardSkeleton;
+        default:
+            return OverviewCardSkeleton;
+    }
+};
+
+export const ArticleSkeletonList = (props: ArticleSkeletonListProps) => {
+    const { horizontal = false, displayMode = "magazine" } = props;
+
+    const ItemSeparator = horizontal ? ArticleList.HorizontalSeparator : ArticleList.VerticalSeparator;
+
+    const renderItem = useCallback(() => {
+        const itemWidth = horizontal ? screenWidth * 0.7 : screenWidth;
+        const SkeletonComponent = selectSkeletonComponent(displayMode);
+
+        return (
+            <View style={{ width: itemWidth }}>
+                <SkeletonComponent />
+            </View>
+        );
+    }, [horizontal, displayMode]);
+
+    return (
+        <FlatList
+            data={data}
+            scrollEnabled={false}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            ItemSeparatorComponent={ItemSeparator}
+            horizontal={horizontal}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{ paddingBottom: 0 }}
+            removeClippedSubviews={true}
+        />
+    );
+};