refactor: migrate to cpk-ui (#17)

https://github.com/crossplatformkorea/CPK-UI

Author: hyochan

app.config.ts

@@ -52,10 +52,10 @@ export default ({config}: ConfigContext): ExpoConfig => ({
       'expo-font',
       {
         fonts: [
-          'node_modules/dooboo-ui/uis/Icon/doobooui.ttf',
-          'node_modules/dooboo-ui/uis/Icon/Pretendard-Bold.otf',
-          'node_modules/dooboo-ui/uis/Icon/Pretendard-Regular.otf',
-          'node_modules/dooboo-ui/uis/Icon/Pretendard-Thin.otf',
+          'node_modules/cpk-ui/components/uis/Icon/cpk.ttf',
+          'node_modules/cpk-ui/components/uis/Icon/Pretendard-Bold.otf',
+          'node_modules/cpk-ui/components/uis/Icon/Pretendard-Regular.otf',
+          'node_modules/cpk-ui/components/uis/Icon/Pretendard-Thin.otf',
         ],
       },
     ],
@@ -68,15 +68,18 @@ export default ({config}: ConfigContext): ExpoConfig => ({
       },
     ],
     'expo-localization',
+    [
+      'expo-splash-screen',
+      {
+        image: './assets/icon.png',
+        backgroundColor: '#343434',
+        imageWidth: 200,
+      },
+    ],
   ],
   experiments: {
     typedRoutes: true,
   },
-  splash: {
-    image: './assets/icon.png',
-    resizeMode: 'cover',
-    backgroundColor: '#343434',
-  },
   extra: {
     eas: {projectId: '1a0107b0-1cef-4913-875f-639c38f59101'},
   },

app/(auth)/_layout.tsx

@@ -1,10 +1,10 @@
 import {Stack} from 'expo-router/stack';
-import {useDooboo} from 'dooboo-ui';
 import {Redirect} from 'expo-router';
 import {useAuth} from '@clerk/clerk-expo';
+import {useCPK} from 'cpk-ui';
 
 export default function AuthLayout() {
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const {isSignedIn} = useAuth();
 
   if (isSignedIn) {

app/(auth)/intro.tsx

@@ -1,9 +1,8 @@
-import {ScrollView, View} from 'react-native';
+import {Pressable, ScrollView, View} from 'react-native';
 import * as WebBrowser from 'expo-web-browser';
 
 import styled, {css} from '@emotion/native';
 
-import {Typography, useDooboo} from 'dooboo-ui';
 import {Stack, useRouter} from 'expo-router';
 
 import {IMG_CROSSPLATFORMS, IC_ICON} from '../../src/icons';
@@ -12,6 +11,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import ButtonSocialSignIn from '../../src/components/uis/ButtonSocialSignIn';
 import {useWarmUpBrowser} from '../../src/hooks/useWarmUpBrowser';
 import {Image} from 'expo-image';
+import {Typography, useCPK} from 'cpk-ui';
 
 WebBrowser.maybeCompleteAuthSession();
 
@@ -45,7 +45,7 @@ WebBrowser.maybeCompleteAuthSession();
 export default function Intro(): JSX.Element {
   useWarmUpBrowser();
 
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const {push} = useRouter();
   const {top, bottom, left, right} = useSafeAreaInsets();
 
@@ -129,23 +129,27 @@ export default function Intro(): JSX.Element {
                 i % 2 === 0 ? (
                   str
                 ) : (
-                  <Typography.Body4
-                    key={str}
+                  <Pressable
+                    hitSlop={8}
                     onPress={() => {
                       if (str === t('signIn.privacyPolicy')) {
                         return push('/privacyandpolicy');
                       }
 
                       push('/termsofservice');
                     }}
-                    style={css`
-                      text-decoration-line: underline;
-                      color: ${theme.text.basic};
-                      text-decoration-line: underline;
-                    `}
                   >
-                    {str}
-                  </Typography.Body4>
+                    <Typography.Body4
+                      key={str}
+                      style={css`
+                        text-decoration-line: underline;
+                        color: ${theme.text.basic};
+                        text-decoration-line: underline;
+                      `}
+                    >
+                      {str}
+                    </Typography.Body4>
+                  </Pressable>
                 ),
               )}
           </Typography.Body4>

app/(home)/(tabs)/_layout.tsx

@@ -1,5 +1,4 @@
 import {View} from 'react-native';
-import {Icon, useDooboo} from 'dooboo-ui';
 import {Redirect, Tabs, useRouter} from 'expo-router';
 import {t} from '../../../src/STRINGS';
 import {useEffect, useRef} from 'react';
@@ -10,9 +9,10 @@ import {Image} from 'expo-image';
 import {IC_ICON} from '../../../src/icons';
 import {useRecoilValue} from 'recoil';
 import {authRecoilSelector} from '../../../src/recoil/selectors';
+import {Icon, useCPK} from 'cpk-ui';
 
 function SettingsMenu(): JSX.Element {
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const {push} = useRouter();
 
   return (
@@ -32,7 +32,7 @@ function SettingsMenu(): JSX.Element {
 }
 
 export default function TabLayout(): JSX.Element {
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const notificationResponseListener =
     useRef<Notifications.EventSubscription>();
   const {user} = useRecoilValue(authRecoilSelector);

app/(home)/(tabs)/index.tsx

@@ -1,5 +1,4 @@
 import styled, {css} from '@emotion/native';
-import {Fab, LoadingIndicator} from 'dooboo-ui';
 import {FlashList} from '@shopify/flash-list';
 import {useRouter} from 'expo-router';
 import {PostWithJoins} from '../../../src/types';
@@ -18,6 +17,7 @@ import {
 import ListEmptyItem from '../../../src/components/uis/ListEmptyItem';
 import ErrorBoundary from 'react-native-error-boundary';
 import useSupabase from '../../../src/hooks/useSupabase';
+import {Fab, LoadingIndicator} from 'cpk-ui';
 
 const Container = styled.View`
   flex: 1;

app/(home)/(tabs)/my.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/native';
 import {Stack} from 'expo-router';
-import {Icon, Typography, useDooboo} from 'dooboo-ui';
 import {t} from '../../../src/STRINGS';
 import {useRecoilValue} from 'recoil';
 import {authRecoilState} from '../../../src/recoil/atoms';
@@ -14,6 +13,7 @@ import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../src/components/uis/FallbackComponent';
 import {Image} from 'expo-image';
 import {authRecoilSelector} from '../../../src/recoil/selectors';
+import {Icon, Typography, useCPK} from 'cpk-ui';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -102,7 +102,7 @@ const TagText = styled.Text`
 export default function My(): JSX.Element {
   const {tags} = useRecoilValue(authRecoilState);
   const {user} = useRecoilValue(authRecoilSelector);
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
 
   return (
     <ErrorBoundary FallbackComponent={FallbackComponent}>

app/(home)/_layout.tsx

@@ -1,15 +1,15 @@
 import {Stack} from 'expo-router/stack';
 import {t} from '../../src/STRINGS';
-import {Icon, useDooboo} from 'dooboo-ui';
 import {RectButton} from 'react-native-gesture-handler';
 import {Redirect, useRouter} from 'expo-router';
 import {Platform} from 'react-native';
 import {WEB_URL} from '../../src/utils/constants';
 import {css} from '@emotion/native';
 import {useAuth} from '@clerk/clerk-expo';
+import {Icon, useCPK} from 'cpk-ui';
 
 export default function HomeLayout() {
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const {back, replace} = useRouter();
   const {isSignedIn} = useAuth();
 

app/(home)/onboarding.tsx

@@ -1,7 +1,6 @@
 import styled, {css} from '@emotion/native';
 import {Redirect, Stack} from 'expo-router';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {EditText, Icon, Typography, useDooboo} from 'dooboo-ui';
 import * as yup from 'yup';
 import {Controller, SubmitHandler, useForm} from 'react-hook-form';
 import {
@@ -17,7 +16,6 @@ import useSwr from 'swr';
 import {t} from '../../src/STRINGS';
 import CustomScrollView from '../../src/components/uis/CustomScrollView';
 import ProfileImageInput from '../../src/components/fragments/ProfileImageInput';
-import CustomPressable from 'dooboo-ui/uis/CustomPressable';
 import {delayPressIn} from '../../src/utils/constants';
 import {
   fetchUpdateProfile,
@@ -34,6 +32,7 @@ import ErrorBoundary from 'react-native-error-boundary';
 import useSupabase, {SupabaseClient} from '../../src/hooks/useSupabase';
 import CustomLoadingIndicator from '../../src/components/uis/CustomLoadingIndicator';
 import {useAuth} from '@clerk/clerk-expo';
+import {CustomPressable, EditText, Icon, Typography, useCPK} from 'cpk-ui';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -94,7 +93,7 @@ const fetcher = async (
 };
 
 export default function Onboarding(): JSX.Element {
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const [displayNameError, setDisplayNameError] = useState<string>();
   const [{user}, setAuth] = useRecoilState(authRecoilState);
   const [tag, setTag] = useState('');

app/(home)/picture.tsx

@@ -2,7 +2,6 @@ import {useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {css} from '@emotion/native';
-import {IconButton} from 'dooboo-ui';
 import {Stack, useLocalSearchParams, useRouter} from 'expo-router';
 import CustomLoadingIndicator from '../../src/components/uis/CustomLoadingIndicator';
 import Wrapper from '../../src/components/uis/Wrapper';
@@ -11,6 +10,7 @@ import {isDesktopDevice} from '../../src/utils/common';
 import {t} from '../../src/STRINGS';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../src/components/uis/FallbackComponent';
+import {IconButton} from 'cpk-ui';
 
 export default function Picture(): JSX.Element {
   const {imageUrl} = useLocalSearchParams();
@@ -31,9 +31,7 @@ export default function Picture(): JSX.Element {
 
   return (
     <ErrorBoundary FallbackComponent={FallbackComponent}>
-      <Stack.Screen
-        options={{headerShown: true, title: t('common.picture')}}
-      />
+      <Stack.Screen options={{headerShown: true, title: t('common.picture')}} />
       <Wrapper>
         <View
           style={css`

app/(home)/post/[id]/index.tsx

@@ -1,5 +1,4 @@
 import styled, {css} from '@emotion/native';
-import {Hr, Icon, Typography, useDooboo} from 'dooboo-ui';
 import {Stack, useLocalSearchParams, useRouter} from 'expo-router';
 import {ReplyWithJoins} from '../../../../src/types';
 import {t} from '../../../../src/STRINGS';
@@ -32,6 +31,7 @@ import {RectButton} from 'react-native-gesture-handler';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../../src/components/uis/FallbackComponent';
 import useSupabase from '../../../../src/hooks/useSupabase';
+import {Hr, Icon, Typography, useCPK} from 'cpk-ui';
 
 const Container = styled.View`
   background-color: ${({theme}) => theme.bg.basic};
@@ -47,7 +47,7 @@ const Content = styled.View`
 export default function PostDetails(): JSX.Element {
   const {supabase} = useSupabase();
   const {id} = useLocalSearchParams<{id: string}>();
-  const {theme, snackbar} = useDooboo();
+  const {theme, snackbar} = useCPK();
   const {bottom} = useSafeAreaInsets();
   const [{authId}] = useRecoilState(authRecoilState);
   const [posts, setPosts] = useRecoilState(postsRecoilState);
@@ -342,9 +342,10 @@ export default function PostDetails(): JSX.Element {
                     align-items: center;
                     gap: 4px;
                   `,
-                  Platform.OS === 'web' && css`
-                    margin-right: 24px;
-                  `,
+                  Platform.OS === 'web' &&
+                    css`
+                      margin-right: 24px;
+                    `,
                 ]}
               >
                 <RectButton

app/(home)/post/[id]/replies.tsx

@@ -4,7 +4,6 @@ import {KeyboardAvoidingView, Platform, View} from 'react-native';
 import {HEADER_HEIGHT} from '../../../../src/utils/constants';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {FlashList} from '@shopify/flash-list';
-import {Typography, useDooboo} from 'dooboo-ui';
 import {t} from '../../../../src/STRINGS';
 import ReplyItem from '../../../../src/components/uis/ReplyItem';
 import ReplyInput from '../../../../src/components/uis/ReplyInput';
@@ -22,6 +21,7 @@ import FallbackComponent from '../../../../src/components/uis/FallbackComponent'
 import {toggleLike} from '../../../../src/apis/likeQueries';
 import ErrorBoundary from 'react-native-error-boundary';
 import useSupabase from '../../../../src/hooks/useSupabase';
+import {Typography, useCPK} from 'cpk-ui';
 
 export default function Replies({
   flashListRef,
@@ -35,7 +35,7 @@ export default function Replies({
 }): JSX.Element {
   const {supabase} = useSupabase();
   const {bottom} = useSafeAreaInsets();
-  const {theme} = useDooboo();
+  const {theme} = useCPK();
   const {authId} = useRecoilValue(authRecoilState);
   const [reply, setReply] = useState('');
   const [assets, setAssets] = useState<ImagePickerAsset[]>([]);

app/(home)/post/[id]/update.tsx

@@ -1,7 +1,6 @@
 import styled, {css} from '@emotion/native';
 import {Stack, useLocalSearchParams, useRouter} from 'expo-router';
 import {yupResolver} from '@hookform/resolvers/yup';
-import {EditText, Typography, useDooboo} from 'dooboo-ui';
 import * as yup from 'yup';
 import {Controller, SubmitHandler, useForm} from 'react-hook-form';
 import {
@@ -29,6 +28,7 @@ import {RectButton} from 'react-native-gesture-handler';
 import ErrorBoundary from 'react-native-error-boundary';
 import FallbackComponent from '../../../../src/components/uis/FallbackComponent';
 import useSupabase from '../../../../src/hooks/useSupabase';
+import {EditText, Typography, useCPK} from 'cpk-ui';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -52,7 +52,7 @@ export default function PostUpdate(): JSX.Element {
   const {id} = useLocalSearchParams<{id: string}>();
   const {supabase} = useSupabase();
   const {back} = useRouter();
-  const {theme, snackbar} = useDooboo();
+  const {theme, snackbar} = useCPK();
   const {authId} = useRecoilValue(authRecoilState);
   const setPosts = useSetRecoilState(postsRecoilState);
   const [assets, setAssets] = useState<ImagePickerAsset[]>([]);

app/(home)/post/write.tsx

@@ -2,7 +2,6 @@ import styled, {css} from '@emotion/native';
 import {Stack, useRouter} from 'expo-router';
 import {yupResolver} from '@hookform/resolvers/yup';
 import {t} from '../../../src/STRINGS';
-import {EditText, Typography, useDooboo} from 'dooboo-ui';
 import * as yup from 'yup';
 import {Controller, SubmitHandler, useForm} from 'react-hook-form';
 import {
@@ -22,6 +21,7 @@ import CustomScrollView from '../../../src/components/uis/CustomScrollView';
 import {uploadFileToSupabase} from '../../../src/supabase';
 import {RectButton} from 'react-native-gesture-handler';
 import useSupabase from '../../../src/hooks/useSupabase';
+import {EditText, Typography, useCPK} from 'cpk-ui';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -44,7 +44,7 @@ type FormData = yup.InferType<typeof schema>;
 export default function PostWrite(): JSX.Element {
   const {supabase} = useSupabase();
   const {back} = useRouter();
-  const {theme, snackbar} = useDooboo();
+  const {theme, snackbar} = useCPK();
   const {authId} = useRecoilValue(authRecoilState);
   const setPosts = useSetRecoilState(postsRecoilState);
   const [assets, setAssets] = useState<ImagePickerAsset[]>([]);