refactor: color system into package

mrevanzak · Dec 21, 2023 · f40d94e · f40d94e
1 parent 31039a6
commit f40d94e
Show file tree

Hide file tree

Showing 29 changed files with 876 additions and 94 deletions.
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -66,6 +66,7 @@
     "@types/babel__core": "^7.20.3",
     "@types/react": "^18.2.33",
     "@vivat/api": "^0.1.0",
+    "@vivat/color-palette": "^0.1.0",
     "@vivat/db": "^0.1.0",
     "@vivat/eslint-config": "^0.2.0",
     "@vivat/prettier-config": "^0.1.0",

diff --git a/apps/expo/src/app/(app)/(tabs)/_layout.tsx b/apps/expo/src/app/(app)/(tabs)/_layout.tsx
@@ -4,10 +4,11 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 import { Button, Colors, Spacings } from "react-native-ui-lib";
 import { Redirect, Tabs } from "expo-router";
 import Header from "@/components/Header";
-import colors from "@/utils/colors";
 import { useUser } from "@clerk/clerk-expo";
 import Ionicons from "@expo/vector-icons/Ionicons";
 
+import colors from "@vivat/color-palette";
+
 export default function TabsLayout() {
   const { isSignedIn } = useUser();
 

diff --git a/apps/expo/src/app/(app)/(tabs)/home.tsx b/apps/expo/src/app/(app)/(tabs)/home.tsx
@@ -11,9 +11,10 @@ import {
 import { Link } from "expo-router";
 import OnboardingModal from "@/components/modal/onboarding";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import { FlashList } from "@shopify/flash-list";
 
+import colors from "@vivat/color-palette";
+
 export default function HomeScreen() {
   const { data, refetch, isFetching } = api.category.getCategories.useQuery({
     partial: false,
@@ -22,7 +23,9 @@ export default function HomeScreen() {
   return (
     <View flex bg-primary>
       <AnimatedImage
-        source={{ uri: "https://bqdpbxgudfvqzcxgvhhn.supabase.co/storage/v1/object/public/assets/banner.png" }}
+        source={{
+          uri: "https://bqdpbxgudfvqzcxgvhhn.supabase.co/storage/v1/object/public/assets/banner.png",
+        }}
         height={124}
         style={{ borderRadius: BorderRadiuses.br60 }}
         containerStyle={{

diff --git a/apps/expo/src/app/(app)/(tabs)/profile.tsx b/apps/expo/src/app/(app)/(tabs)/profile.tsx
@@ -9,10 +9,11 @@ import {
 } from "react-native-ui-lib";
 import { Link } from "expo-router";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import { useAuth, useUser } from "@clerk/clerk-expo";
 import { FontAwesome, FontAwesome5, MaterialIcons } from "@expo/vector-icons";
 
+import colors from "@vivat/color-palette";
+
 export default function ProfileScreen() {
   const { isLoaded, signOut, userId } = useAuth();
   const { user } = useUser();
@@ -24,7 +25,7 @@ export default function ProfileScreen() {
 
   return (
     <View bg-white padding-s4 flex className="space-y-4">
-      <View br40 className="border-primary border bg-white" padding-s4>
+      <View br40 className="border border-primary bg-white" padding-s4>
         <View row spread>
           <View row centerV className="space-x-4">
             <Avatar
@@ -68,7 +69,7 @@ export default function ProfileScreen() {
           </View>
         </View>
       </View>
-      <View br40 className="border-primary border bg-white" padding-s4>
+      <View br40 className="border border-primary bg-white" padding-s4>
         <Link asChild href="/order/">
           <TouchableOpacity row centerV className="space-x-3">
             <FontAwesome name="shopping-bag" size={20} color={colors.primary} />
@@ -78,7 +79,7 @@ export default function ProfileScreen() {
           </TouchableOpacity>
         </Link>
       </View>
-      <View br40 className="border-primary border bg-white" padding-s4>
+      <View br40 className="border border-primary bg-white" padding-s4>
         <Link
           asChild
           href={{

diff --git a/apps/expo/src/app/(app)/_layout.tsx b/apps/expo/src/app/(app)/_layout.tsx
@@ -2,9 +2,10 @@ import React from "react";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { Link, Stack } from "expo-router";
 import Header from "@/components/Header";
-import colors from "@/utils/colors";
 import { Ionicons } from "@expo/vector-icons";
 
+import colors from "@vivat/color-palette";
+
 export default function AuthLayout() {
   return (
     <Stack

diff --git a/apps/expo/src/app/(app)/checkout.tsx b/apps/expo/src/app/(app)/checkout.tsx
@@ -10,13 +10,14 @@ import { Link, router, useLocalSearchParams } from "expo-router";
 import Input from "@/components/forms/Input";
 import RadioButton from "@/components/forms/RadioButton";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { Ionicons } from "@expo/vector-icons";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import colors from "@vivat/color-palette";
+
 const schema = z.object({
   note: z.string().optional(),
   courier: z.string(),
@@ -67,7 +68,7 @@ export default function CheckoutScreen() {
           paddingV-s2
           paddingH-s4
           br40
-          className="border-primary mb-4 border"
+          className="mb-4 border border-primary"
         >
           <Text text70 primary>
             Alamat
@@ -91,7 +92,7 @@ export default function CheckoutScreen() {
           paddingV-s2
           paddingH-s4
           br40
-          className="border-primary mb-4 border"
+          className="mb-4 border border-primary"
         >
           <Text text80 primary marginB-s1>
             Kurir
@@ -106,7 +107,7 @@ export default function CheckoutScreen() {
           />
         </View>
       </FormProvider>
-      <View paddingV-s2 paddingH-s4 br40 className="border-primary mb-4 border">
+      <View paddingV-s2 paddingH-s4 br40 className="mb-4 border border-primary">
         <Text text80 primary marginB-s1>
           Rincian
         </Text>

diff --git a/apps/expo/src/app/(app)/order/[orderId].tsx b/apps/expo/src/app/(app)/order/[orderId].tsx
@@ -13,11 +13,12 @@ import {
 import * as Clipboard from "expo-clipboard";
 import { Link, useLocalSearchParams } from "expo-router";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { Ionicons } from "@expo/vector-icons";
 import moment from "moment";
 
+import colors from "@vivat/color-palette";
+
 import "moment/locale/id";
 
 import { RefreshControl, ScrollView } from "react-native-gesture-handler";
@@ -127,7 +128,7 @@ export default function OrderDetailScreen() {
             paddingV-s2
             paddingH-s4
             br40
-            className="border-primary mb-4 border"
+            className="mb-4 border border-primary"
           >
             <Text text70 primary>
               Unggah Bukti Pengiriman
@@ -157,7 +158,7 @@ export default function OrderDetailScreen() {
           paddingV-s2
           paddingH-s4
           br40
-          className="border-primary mb-4 space-y-1 border"
+          className="mb-4 space-y-1 border border-primary"
         >
           <Text text80 primary marginB-s1>
             Catatan Pembelian
@@ -182,7 +183,7 @@ export default function OrderDetailScreen() {
           paddingV-s2
           paddingH-s4
           br40
-          className="border-primary mb-4 space-y-1 border"
+          className="mb-4 space-y-1 border border-primary"
         >
           <Text text80 primary marginB-s1>
             Rincian Pembelian
@@ -222,7 +223,7 @@ export default function OrderDetailScreen() {
               paddingV-s2
               paddingH-s4
               br40
-              className="border-primary mb-4 space-y-1 border"
+              className="mb-4 space-y-1 border border-primary"
             >
               <Text text80 primary marginB-s1>
                 Transfer ke Vivat Marketplace
@@ -252,7 +253,7 @@ export default function OrderDetailScreen() {
                 paddingV-s2
                 paddingH-s4
                 br40
-                className="border-primary mb-4 border"
+                className="mb-4 border border-primary"
               >
                 <Text text70 primary>
                   Unggah Bukti Pembayaran
@@ -271,7 +272,7 @@ export default function OrderDetailScreen() {
             paddingV-s2
             paddingH-s4
             br40
-            className="border-primary mb-4 space-y-1 border"
+            className="mb-4 space-y-1 border border-primary"
           >
             <Text text80 primary marginB-s1>
               Nomer Resi Pengiriman

diff --git a/apps/expo/src/app/(app)/order/confirm.tsx b/apps/expo/src/app/(app)/order/confirm.tsx
@@ -13,14 +13,15 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import Input from "@/components/forms/Input";
 import { useSelectImage } from "@/lib/hooks/useSelectImage";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import { storageClient } from "@/utils/supabase";
+import { toast } from "@backpackapp-io/react-native-toast";
 import { useUser } from "@clerk/clerk-expo";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
-import { toast } from "@backpackapp-io/react-native-toast";
+
+import colors from "@vivat/color-palette";
 
 const schema = z.object({
   courier: z.string().min(1),
@@ -76,7 +77,7 @@ export default function PaymentConfirmScreen() {
           <View
             marginB-s4
             br40
-            className="border-primary border bg-white"
+            className="border border-primary bg-white"
             padding-s4
             flex
           >
@@ -124,11 +125,7 @@ export default function PaymentConfirmScreen() {
               )}
             </View>
           </View>
-          <Input
-            id="courier"
-            label="Kurir"
-            placeholder="Masukan nama kurir"
-          />
+          <Input id="courier" label="Kurir" placeholder="Masukan nama kurir" />
           <Input
             id="trackingNumber"
             label="Nomor Resi"

diff --git a/apps/expo/src/app/(app)/order/index.tsx b/apps/expo/src/app/(app)/order/index.tsx
@@ -10,11 +10,11 @@ import {
 } from "react-native-ui-lib";
 import { Link, Stack, useLocalSearchParams } from "expo-router";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { FlashList } from "@shopify/flash-list";
 import type { z } from "zod";
 
+import colors from "@vivat/color-palette";
 import type { schema } from "@vivat/db";
 
 export default function OrdersScreen() {
@@ -75,9 +75,9 @@ export default function OrdersScreen() {
               <Card
                 padding-s4
                 borderRadius={BorderRadiuses.br40}
-                className="border-primary mb-4 space-y-4 border"
+                className="mb-4 space-y-4 border border-primary"
               >
-                <View className="border-primary border-b pb-4">
+                <View className="border-b border-primary pb-4">
                   <View row spread centerV>
                     <View row className="space-x-2">
                       <Avatar

diff --git a/apps/expo/src/app/(app)/payment-confirm.tsx b/apps/expo/src/app/(app)/payment-confirm.tsx
@@ -14,7 +14,6 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import Input from "@/components/forms/Input";
 import { useSelectImage } from "@/lib/hooks/useSelectImage";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import { storageClient } from "@/utils/supabase";
 import { toast } from "@backpackapp-io/react-native-toast";
 import { useUser } from "@clerk/clerk-expo";
@@ -23,6 +22,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import colors from "@vivat/color-palette";
+
 const schema = z.object({
   bankName: z.string(),
   bankAccount: z.string(),
@@ -80,7 +81,7 @@ export default function PaymentConfirmScreen() {
           <View
             marginB-s4
             br40
-            className="border-primary border bg-white"
+            className="border border-primary bg-white"
             padding-s4
             flex
           >

diff --git a/apps/expo/src/app/(app)/product/[productId].tsx b/apps/expo/src/app/(app)/product/[productId].tsx
@@ -13,11 +13,12 @@ import {
 } from "react-native-ui-lib";
 import { Link, useLocalSearchParams } from "expo-router";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { useUser } from "@clerk/clerk-expo";
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 
+import colors from "@vivat/color-palette";
+
 export default function ProductDetailScreen() {
   const { user } = useUser();
   const { productId } = useLocalSearchParams();

diff --git a/apps/expo/src/app/(app)/search.tsx b/apps/expo/src/app/(app)/search.tsx
@@ -11,10 +11,11 @@ import {
 import { Link, useLocalSearchParams } from "expo-router";
 import { useDebouncedValue } from "@/lib/hooks/useDebouncedValues";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { FlashList } from "@shopify/flash-list";
 
+import colors from "@vivat/color-palette";
+
 export default function SearchScreen() {
   const { categoryId, search, sellerId } = useLocalSearchParams<{
     categoryId: string;

diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
@@ -8,11 +8,12 @@ import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { TRPCProvider } from "@/utils/api";
 import { tokenCache } from "@/utils/cache";
-import colors from "@/utils/colors";
 import { Toasts } from "@backpackapp-io/react-native-toast";
 import { ClerkProvider, SignedIn, SignedOut, useAuth } from "@clerk/clerk-expo";
 import { focusManager } from "@tanstack/react-query";
 
+import colors from "@vivat/color-palette";
+
 Colors.loadColors(colors);
 void SplashScreen.preventAutoHideAsync();
 

diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -4,9 +4,10 @@ import { Colors, Image, View } from "react-native-ui-lib";
 import { LinearGradient } from "expo-linear-gradient";
 import { Redirect } from "expo-router";
 import SignInButton from "@/components/SignInButton";
-import colors from "@/utils/colors";
 import { useAuth } from "@clerk/clerk-expo";
 
+import colors from "@vivat/color-palette";
+
 import Logo from "~/full-logo.png";
 
 export default function WelcomeScreen() {

diff --git a/apps/expo/src/components/ProductForm.tsx b/apps/expo/src/components/ProductForm.tsx
@@ -16,7 +16,6 @@ import Input from "@/components/forms/Input";
 import Picker from "@/components/forms/Picker";
 import { useSelectImage } from "@/lib/hooks/useSelectImage";
 import { api } from "@/utils/api";
-import colors from "@/utils/colors";
 import { storageClient } from "@/utils/supabase";
 import { toast } from "@backpackapp-io/react-native-toast";
 import { useAuth } from "@clerk/clerk-expo";
@@ -25,6 +24,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import colors from "@vivat/color-palette";
+
 const schema = z.object({
   name: z.string().min(3),
   description: z.string().min(3),
@@ -115,7 +116,7 @@ export default function ProductForm({ edit }: ProductFormProps) {
         <View
           marginB-s4
           br40
-          className="border-primary border bg-white"
+          className="border border-primary bg-white"
           padding-s4
           flex
         >

diff --git a/apps/expo/src/components/forms/Input.tsx b/apps/expo/src/components/forms/Input.tsx
@@ -1,8 +1,9 @@
 import type { TextFieldProps } from "react-native-ui-lib";
 import { BorderRadiuses, Spacings, TextField } from "react-native-ui-lib";
-import colors from "@/utils/colors";
 import { Controller, get, useFormContext } from "react-hook-form";
 
+import colors from "@vivat/color-palette";
+
 type InputProps = {
   /** Input label */
   label: string;

diff --git a/apps/expo/src/components/forms/Picker.tsx b/apps/expo/src/components/forms/Picker.tsx
@@ -4,9 +4,10 @@ import {
   Picker as OGPicker,
   Spacings,
 } from "react-native-ui-lib";
-import colors from "@/utils/colors";
 import { Controller, get, useFormContext } from "react-hook-form";
 
+import colors from "@vivat/color-palette";
+
 type PickerProps = {
   /** Input label */
   label: string;