feat(app): [WIP] manage tags

packages/app/App.tsx

@@ -4,6 +4,7 @@ import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import './global.css';
 
 import { useReactQueryDevTools } from '@dev-plugins/react-query';
+import { Host } from 'react-native-portalize';
 import {
   Poppins_100Thin,
   Poppins_100Thin_Italic,
@@ -87,7 +88,9 @@ const App = () => {
       <SafeAreaProvider>
         <AuthProvider>
           <ThemeProvider>
-            <RootNavigator />
+            <Host>
+              <RootNavigator />
+            </Host>
 
             <Toaster autoWiggleOnUpdate="always" />
           </ThemeProvider>

packages/app/package.json

@@ -22,6 +22,7 @@
     "@dev-plugins/react-query": "^0.1.0",
     "@expo-google-fonts/poppins": "^0.2.3",
     "@expo/vector-icons": "^14.0.4",
+    "@gorhom/bottom-sheet": "^5.0.6",
     "@hookform/resolvers": "^3.9.0",
     "@react-native-community/netinfo": "11.4.1",
     "@react-native-masked-view/masked-view": "0.3.2",
@@ -55,6 +56,7 @@
     "react-native": "0.76.5",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-mmkv": "2.12.2",
+    "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",

packages/app/src/features/quote/contracts/quote-service.contract.ts

@@ -7,7 +7,6 @@ export type GetQuoteOutput = Quote;
 
 export type ListQuotesPayload = {
   paginate?: Paginate;
-  page?: number;
 };
 
 export type ListQuotesOutput = ApiPaginatedResult<Quote>;

packages/app/src/features/tag/components/tag-card.tsx

@@ -0,0 +1,58 @@
+import { Ionicons as ExpoIonicons } from '@expo/vector-icons';
+import { cssInterop } from 'nativewind';
+import ContentLoader, { Rect } from 'react-content-loader/native';
+import { Dimensions, View } from 'react-native';
+import type { Tag } from '@/types/entities';
+import { Text } from '@/shared/components/ui/text';
+
+const { width: wWidth } = Dimensions.get('window');
+
+const Ionicons = cssInterop(ExpoIonicons, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      color: 'color',
+    },
+  },
+});
+
+interface TagCardProps {
+  data: Tag;
+}
+
+export const TagCard: React.FC<TagCardProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <View key={data.uuid} className="flex-row items-center justify-between px-4 py-4">
+      <View className="flex-row items-center gap-3">
+        <Ionicons name="pricetag-outline" size={19} className="text-primary" />
+
+        <Text variant="paragraphMedium">{data.title}</Text>
+      </View>
+
+      <Text variant="paragraphCaption" className="text-zinc-500">
+        23 quotes
+      </Text>
+    </View>
+  );
+};
+
+export interface TagCardSkeletonProps {}
+
+export const TagCardSkeleton: React.FC<TagCardSkeletonProps> = () => {
+  return (
+    <ContentLoader
+      speed={2}
+      width={wWidth}
+      height={166}
+      viewBox={`0 0 ${wWidth} 166`}
+      backgroundColor="#e5e7eb"
+      foregroundColor="#d1d5db"
+    >
+      <Rect x="16" y="16" rx="4" ry="4" width={wWidth - 64} height="16" />
+      <Rect x="16" y="40" rx="4" ry="4" width={wWidth - 96} height="16" />
+      <Rect x="16" y="64" rx="4" ry="4" width={wWidth - 128} height="16" />
+    </ContentLoader>
+  );
+};

packages/app/src/features/tag/contracts/tag-service.contract.ts

@@ -0,0 +1,21 @@
+import type { ApiPaginatedResult, Paginate } from '@/types/api';
+import type { Tag } from '@/types/entities';
+
+export type CreateTagPayload = {
+  title: string;
+};
+
+export type CreateTagOutput = Tag;
+
+export type ListTagsPayload = {
+  paginate?: Paginate;
+  page?: number;
+};
+
+export type ListTagsOutput = ApiPaginatedResult<Tag>;
+
+export abstract class TagServiceContract {
+  public abstract list(payload: ListTagsPayload): Promise<ListTagsOutput>;
+
+  public abstract create(payload: CreateTagPayload): Promise<CreateTagOutput>;
+}

packages/app/src/features/tag/services/index.ts

@@ -0,0 +1,7 @@
+import type { TagServiceContract } from '@/features/tag/contracts/tag-service.contract';
+import { TagService } from '@/features/tag/services/tag.service';
+import { httpClientService } from '@/shared/services';
+
+const tagService: TagServiceContract = new TagService(httpClientService);
+
+export { tagService };

packages/app/src/features/tag/services/tag.service.ts

@@ -0,0 +1,22 @@
+import type {
+  CreateTagOutput,
+  CreateTagPayload,
+  ListTagsOutput,
+  ListTagsPayload,
+  TagServiceContract,
+} from '@/features/tag/contracts/tag-service.contract';
+import type { HttpClientServiceContract } from '@/shared/contracts/http-client-service.contract';
+
+export class TagService implements TagServiceContract {
+  constructor(private readonly httpClientService: HttpClientServiceContract) {}
+
+  public list(payload: ListTagsPayload): Promise<ListTagsOutput> {
+    return this.httpClientService.get<ListTagsOutput, ListTagsPayload>('/tags', {
+      ...payload,
+    });
+  }
+
+  public async create(payload: CreateTagPayload): Promise<CreateTagOutput> {
+    return this.httpClientService.post<CreateTagOutput, CreateTagPayload>('/tags', payload);
+  }
+}

packages/app/src/features/tag/validations/index.ts

@@ -0,0 +1,5 @@
+import * as z from 'zod';
+
+export const createTagFormSchema = z.object({
+  title: z.string(),
+});

packages/app/src/navigation/app.navigator.tsx

@@ -29,7 +29,7 @@ const options: { [key in keyof AppTabParams]: TabBarItemOptions } = {
   ManageTagsScreen: {
     onBlurIcon: 'pricetags-outline',
     onFocusIcon: 'pricetags',
-    title: 'Manage Tags',
+    title: 'Gerenciar tags',
     tabBarButtonTestID: 'manage-tags-tab-button',
   },
   SettingsNavigator: {

packages/app/src/screens/app/home/index.tsx

@@ -21,7 +21,7 @@ export const HomeScreen: React.FC<HomeScreenProps> = () => {
   const { isRefetching, refetch, hasNextPage, fetchNextPage, data, isLoading } = useInfiniteQuery<ListQuotesOutput>({
     queryKey: ['quotes'],
     queryFn: ({ pageParam }) => quoteService.list({ paginate: { page: pageParam as number } }),
-    initialPageParam: 0,
+    initialPageParam: 1,
     getNextPageParam: (lastPage) => lastPage.meta.next,
     getPreviousPageParam: (lastPage) => lastPage.meta.prev,
   });