refactor(ui): refactor ui components

ios/Podfile.lock

@@ -1473,7 +1473,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXConstants: 988aa430ca0f76b43cd46b66e7fae3287f9cc2fc
   EXFont: f20669cb266ef48b004f1eb1f2b20db96cd1df9f
   EXJSONUtils: 5c42959e87be238b045ef37cc5268b16a6c0ad4a
@@ -1495,7 +1495,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 84f6edbe225f38aebd9deaf1540a4160b1f087d7
   FBReactNativeSpec: d0086a479be91c44ce4687a962956a352d2dc697
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: b2669ce35fc4ac14f523b307aff8896799829fe2
   libaom: 144606b1da4b5915a1054383c3a4459ccdb3c661
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
@@ -1559,7 +1559,7 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: af09429398d99d524cae2fe00f6f0f6e491ed102
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
+  Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
 
 PODFILE CHECKSUM: ac55d8c0b92af1b0a5da5f8cb8448313ecc7948e
 

src/app/(app)/_layout.tsx

@@ -3,13 +3,12 @@ import { Link, Redirect, SplashScreen, Tabs } from 'expo-router';
 import React, { useCallback, useEffect } from 'react';
 
 import { useAuth, useIsFirstTime } from '@/core';
+import { Pressable, Text } from '@/ui';
 import {
   Feed as FeedIcon,
-  Pressable,
   Settings as SettingsIcon,
   Style as StyleIcon,
-  Text,
-} from '@/ui';
+} from '@/ui/icons';
 
 export default function TabLayout() {
   const status = useAuth.use.status();

src/app/(app)/settings.tsx

@@ -7,18 +7,8 @@ import { ItemsContainer } from '@/components/settings/items-container';
 import { LanguageItem } from '@/components/settings/language-item';
 import { ThemeItem } from '@/components/settings/theme-item';
 import { translate, useAuth } from '@/core';
-import {
-  colors,
-  FocusAwareStatusBar,
-  Github,
-  Rate,
-  ScrollView,
-  Share,
-  Support,
-  Text,
-  View,
-  Website,
-} from '@/ui';
+import { colors, FocusAwareStatusBar, ScrollView, Text, View } from '@/ui';
+import { Github, Rate, Share, Support, Website } from '@/ui/icons';
 
 export default function Settings() {
   const signOut = useAuth.use.signOut();

src/components/card.tsx

@@ -6,21 +6,29 @@ import { Image, Pressable, Text, View } from '@/ui';
 
 type Props = Post;
 
+const images = [
+  'https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1564507004663-b6dfb3c824d5?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1515386474292-47555758ef2e?auto=format&fit=crop&w=800&q=80',
+  'https://plus.unsplash.com/premium_photo-1666815503002-5f07a44ac8fb?auto=format&fit=crop&w=800&q=80',
+  'https://images.unsplash.com/photo-1587974928442-77dc3e0dba72?auto=format&fit=crop&w=800&q=80',
+];
+
 export const Card = ({ title, body, id }: Props) => {
   return (
     <Link href={`/feed/${id}`} asChild>
-      <Pressable className="m-2 overflow-hidden rounded-xl  bg-neutral-200 p-2 shadow-xl dark:bg-charcoal-900">
+      <Pressable className="m-2 overflow-hidden rounded-xl  border border-neutral-300 bg-white  dark:bg-neutral-900">
         <Image
-          className="h-56 w-full"
+          className="h-56 w-full overflow-hidden rounded-t-xl"
           contentFit="cover"
           source={{
-            uri: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
+            uri: images[Math.floor(Math.random() * images.length)],
           }}
         />
 
-        <View>
-          <Text className="py-2 text-2xl font-bold">{title}</Text>
-          <Text numberOfLines={3} className="leading-snug">
+        <View className="p-2">
+          <Text className="py-3 text-2xl ">{title}</Text>
+          <Text numberOfLines={3} className="leading-snug text-gray-600">
             {body}
           </Text>
         </View>

src/components/colors.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Text, View } from '@/ui';
-import colors from '@/ui/theme/colors';
+import colors from '@/ui/colors';
 
 import { Title } from './title';
 type ColorName = keyof typeof colors;
@@ -39,9 +39,9 @@ const Color = ({ name }: { name: ColorName }) => {
 
 const ColorCard = ({ color, value }: { value: string; color: string }) => {
   return (
-    <View>
+    <View className="flex-1">
       <View
-        className="h-14 w-8 rounded-sm"
+        className="h-14 w-full rounded-sm"
         style={{ backgroundColor: color }}
       />
       <Text className="text-sm">{value}</Text>

src/components/inputs.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { Option } from '@/ui';
 import { Input, Select, View } from '@/ui';
-import { Checkbox, Radio, Switch } from '@/ui/core/checkbox';
+import { Checkbox, Radio, Switch } from '@/ui/checkbox';
 
 import { Title } from './title';
 

src/components/settings/item.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import type { TxKeyPath } from '@/core';
-import { ArrowRight, Pressable, Text, View } from '@/ui';
+import { Pressable, Text, View } from '@/ui';
+import { ArrowRight } from '@/ui/icons';
 
 type ItemProps = {
   text: TxKeyPath;

src/components/settings/items-container.tsx

@@ -13,7 +13,7 @@ export const ItemsContainer = ({ children, title }: Props) => {
     <>
       {title && <Text className="pb-2 pt-4 text-lg" tx={title} />}
       {
-        <View className=" rounded-md border-[1px] border-neutral-200 dark:border-charcoal-700 dark:bg-charcoal-800">
+        <View className=" rounded-md border-[1px] border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
           {children}
         </View>
       }

src/core/use-theme-config.tsx

@@ -5,7 +5,7 @@ import {
 } from '@react-navigation/native';
 import { useColorScheme } from 'nativewind';
 
-import { colors } from '@/ui/theme';
+import colors from '@/ui/colors';
 
 const DarkTheme: Theme = {
   ..._DarkTheme,

src/ui/core/button.tsx → src/ui/button.tsx

@@ -24,7 +24,7 @@ const button = tv({
       },
       outline: {
         container: 'border border-neutral-400',
-        label: 'text-black dark:text-charcoal-100',
+        label: 'text-black dark:text-neutral-100',
         indicator: 'text-black',
       },
       destructive: {

src/ui/core/checkbox.tsx → src/ui/checkbox.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { colors } from '@/ui/theme';
+import colors from '@/ui/colors';
 
 import { Text } from './text';
 

src/ui/icons/github.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
 
-import { colors } from '../theme';
+import colors from '../colors';
 
 export const Github = ({ color = colors.neutral[500], ...props }: SvgProps) => (
   <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>

src/ui/icons/index.tsx

@@ -4,7 +4,6 @@ export * from './feed';
 export * from './github';
 export * from './home';
 export * from './language';
-export * from './no-data';
 export * from './rate';
 export * from './settings';
 export * from './share';

src/ui/icons/rate.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
 
-import colors from '../theme/colors';
+import colors from '../colors';
 
 export const Rate = ({ color = colors.neutral[500], ...props }: SvgProps) => (
   <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>

src/ui/icons/share.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { Path } from 'react-native-svg';
 
-import { colors } from '../theme';
+import colors from '../colors';
 
 export const Share = ({ color = colors.neutral[500], ...props }: SvgProps) => (
   <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}>

src/ui/icons/support.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
 
-import { colors } from '../theme';
+import colors from '../colors';
 
 export const Support = ({
   color = colors.neutral[500],

src/ui/icons/website.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { SvgProps } from 'react-native-svg';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
 
-import { colors } from '../theme';
+import colors from '../colors';
 
 export const Website = ({
   color = colors.neutral[500],

src/ui/index.tsx

@@ -1,7 +1,21 @@
-export * from './core';
-export * from './error-handler';
+export * from './button';
+export { default as colors } from './colors';
 export * from './focus-aware-status-bar';
-export * from './icons';
-export * from './screen';
-export * from './theme';
+export * from './image';
+export * from './input';
+export * from './list';
+export * from './modal';
+export * from './progress-bar';
+export * from './select';
+export * from './text';
 export * from './utils';
+
+// export base components from react-native
+export {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+export { SafeAreaView } from 'react-native-safe-area-context';

src/ui/core/input.tsx → src/ui/input.tsx

@@ -11,13 +11,13 @@ import { I18nManager, StyleSheet, View } from 'react-native';
 import { TextInput as NTextInput } from 'react-native';
 import { tv } from 'tailwind-variants';
 
-import colors from '../theme/colors';
+import colors from './colors';
 import { Text } from './text';
 
 const inputTv = tv({
   slots: {
     container: 'mb-2',
-    label: 'text-grey-100 dark:text-charcoal-100 text-sm',
+    label: 'text-grey-100 dark:text-neutral-100 text-sm',
     input:
       'mt-0 border-[0.5px] font-jakarta text-base leading-5 font-[500] px-4 py-3 rounded-xl  bg-neutral-100 border-neutral-300 ',
   },

src/ui/icons/no-data.tsx → src/ui/list.tsx

@@ -1,13 +1,32 @@
-import * as React from 'react';
+import { FlashList as NFlashList } from '@shopify/flash-list';
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
+import { Text } from './text';
+type Props = {
+  isLoading: boolean;
+};
+
+export const List = NFlashList;
+
+export const EmptyList = React.memo(({ isLoading }: Props) => {
+  return (
+    <View className="min-h-[400px] flex-1 items-center justify-center">
+      {!isLoading ? (
+        <View>
+          <NoData />
+          <Text className="pt-4 text-center">Sorry! No data found</Text>
+        </View>
+      ) : (
+        <ActivityIndicator />
+      )}
+    </View>
+  );
+});
+
 export const NoData = () => (
-  <Svg
-    data-name="Layer 1"
-    width={200}
-    height={200}
-    viewBox="0 0 647.636 632.174"
-  >
+  <Svg width={200} height={200} viewBox="0 0 647.636 632.174">
     <Path
       d="M411.146 142.174h-174.51a15.018 15.018 0 0 0-15 15v387.85l-2 .61-42.81 13.11a8.007 8.007 0 0 1-9.99-5.31l-127.34-415.95a8.003 8.003 0 0 1 5.31-9.99l65.97-20.2 191.25-58.54 65.97-20.2a7.99 7.99 0 0 1 9.99 5.3l32.55 106.32Z"
       fill="#f2f2f2"

src/ui/core/modal.tsx → src/ui/modal.tsx

@@ -184,7 +184,7 @@ const CloseButton = ({ close }: { close: () => void }) => {
       accessibilityHint="closes the modal"
     >
       <Svg
-        className="fill-charcoal-100 dark:fill-white"
+        className="fill-neutral-100 dark:fill-white"
         width={24}
         height={24}
         fill="none"