feat(v2): Rework style system

.gitignore

@@ -68,3 +68,4 @@ apps/docs/.next
 # TypeScript
 packages/**/tsconfig.tsbuildinfo
 tsconfig.tsbuildinfo
+dist

apps/examples/app/_layout.tsx

@@ -1,12 +1,16 @@
-import { ThemeProvider } from 'react-native-ficus-ui';
+
 import { Stack } from 'expo-router';
+import { Box, ThemeProvider as ThemeProviderV2 } from '@ficus-ui/native'
+import { ThemeProvider } from 'react-native-ficus-ui';
 
 export default function RootLayout() {
   return (
-    <ThemeProvider>
-      <Stack screenOptions={{ headerShown: false }}>
-        <Stack.Screen name="index" />
-      </Stack>
-    </ThemeProvider>
+    <ThemeProviderV2>
+      <ThemeProvider>
+        <Stack screenOptions={{ headerShown: false }}>
+          <Stack.Screen name="index" />
+        </Stack>
+      </ThemeProvider>
+    </ThemeProviderV2>
   );
 }

apps/examples/app/components-v2/Box.tsx

@@ -0,0 +1,251 @@
+import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { Box } from "@ficus-ui/native";
+import ExampleSection from "@/src/ExampleSection";
+import { Link, useRouter } from "expo-router";
+
+const BoxComponent = () => {
+  const router = useRouter();
+  return (
+    <SafeAreaView>
+      <Text style={{
+        marginHorizontal: 20,
+        fontSize: 30
+      }}>
+        Box component
+      </Text>
+      <ScrollView >
+        <ExampleSection name="background color">
+          <Box flexDirection="row">
+            <Box h={40} w={40} mr="sm" bg="green.500" />
+            <Box h={40} w={40} mr="sm" bg="teal.500" />
+            <Box h={40} w={40} mr="sm" bg="yellow.500" />
+            <Box h={40} w={40} mr="sm" bg="red.500" />
+            <Box h={40} w={40} mr="sm" bg="blue.500" />
+            <Box h={40} w={40} mr="sm" bg="gray.500" />
+          </Box>
+        </ExampleSection>
+
+        <ExampleSection name="shadows">
+          <Box flexDirection="row">
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="none"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>none</Text>
+            </Box>
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="xs"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>xs</Text>
+            </Box>
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="sm"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>sm</Text>
+            </Box>
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="md"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>md</Text>
+            </Box>
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="lg"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>lg</Text>
+            </Box>
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="xl"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>xl</Text>
+            </Box>
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              shadow="2xl"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text>2xl</Text>
+            </Box>
+          </Box>
+        </ExampleSection>
+
+        <ExampleSection name="boxShadow prop">
+          <Box flexDirection="row">
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="5 5 5 0 rgba(255, 0, 0, 0.5)"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="5 -5 teal"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="12 12 2 1 rgba(0, 0, 255, .2)"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="inset 5 5 gold"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="3 3 red, -3 0 5 olive"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="0 0 0 4 #f4aab9, 0 0 0 6 #66ccff"
+              justifyContent="center"
+              alignItems="center"
+            />
+            <Box
+              h={40}
+              w={40}
+              bg="white"
+              m="md"
+              borderRadius="sm"
+              boxShadow="5 5 0 0 #289FED"
+              justifyContent="center"
+              alignItems="center"
+            />
+          </Box>
+        </ExampleSection>
+        <ExampleSection name="border">
+          <Box flexDirection="row">
+            <Box
+              h={40}
+              w={40}
+              mr="sm"
+              borderColor="green.500"
+              borderWidth={1}
+            />
+            <Box
+              h={40}
+              w={40}
+              mr="sm"
+              borderColor="yellow.500"
+              borderWidth={1}
+            />
+            <Box h={40} w={40} mr="sm" borderColor="red.500" borderWidth={1} />
+            <Box h={40} w={40} mr="sm" borderColor="blue.500" borderWidth={1} />
+            <Box h={40} w={40} mr="sm" borderColor="gray.500" borderWidth={1} />
+          </Box>
+        </ExampleSection>
+        <ExampleSection name="radius">
+          <Box flexDirection="row">
+
+            <Box h={40} w={40} mr="sm" borderRadius="none" bg="blue.400"/>
+            <Box h={40} w={40} mr="sm" borderRadius="xs" bg="blue.400" />
+            <Box h={40} w={40} mr="sm" borderRadius="sm" bg="blue.400" />
+            <Box h={40} w={40} mr="sm" borderRadius="md" bg="blue.400" />
+            <Box h={40} w={40} mr="sm" borderRadius="lg" bg="blue.400" />
+            <Box h={40} w={40} mr="sm" borderRadius="xl" bg="blue.400" />
+            <Box h={40} w={40} mr="sm" borderRadius="2xl" bg="blue.400" />
+            <Box h={40} w={40} mr="sm" borderRadius="full" bg="blue.400" />
+          </Box>
+        </ExampleSection>
+
+        <ExampleSection name="flex">
+          <Box direction="row">
+            <Box h={40} w={40} bg="red.400" flex={1} />
+            <Box h={40} w={40} bg="yellow.400" flex={2} />
+            <Box h={40} w={40} bg="green.400" flex={2} />
+          </Box>
+        </ExampleSection>
+
+        <ExampleSection name="background image">
+          <Box
+            as="Image"
+            mt="sm"
+            borderRadius="md"
+            h={150}
+            source={{
+              uri: "https://venngage-wordpress.s3.amazonaws.com/uploads/2018/09/Monochrome-Type-Simple-Background-Image.jpg",
+            }}
+          />
+        </ExampleSection>
+
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default BoxComponent;

apps/examples/app/components-v2/index.tsx

@@ -0,0 +1,5 @@
+import StackV2 from '@/src/v2';
+
+export default function Components() {
+  return <StackV2/>;
+}

apps/examples/app/components/index.tsx

@@ -0,0 +1,5 @@
+import StackV1 from '@/src/v1';
+
+export default function Components() {
+  return <StackV1/>;
+}

apps/examples/app/items-v2.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+import BoxComponent from './components-v2/Box';
+
+type ExampleComponentType = {
+  onScreenName: string;
+  navigationPath: string;
+  component: ComponentType;
+};
+
+export const components: ExampleComponentType[] = [
+
+  { navigationPath: 'Box', onScreenName: 'Box', component: BoxComponent },
+
+];

apps/examples/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "14.0.2",
+    "@ficus-ui/native": "workspace:*",
     "@react-native-community/slider": "4.5.4",
     "@react-navigation/native": "7.0.0-rc.21",
     "@shopify/flash-list": "1.5.0",

apps/examples/src/HomeScreen.tsx

@@ -6,7 +6,6 @@ import {
   SafeAreaBox,
 } from 'react-native-ficus-ui';
 
-import { components } from '@/app/items';
 import { useRouter } from 'expo-router';
 import { ScrollView } from 'react-native';
 
@@ -21,21 +20,26 @@ const HomeScreen = () => {
             <Text pb="lg" fontSize="3xl">
               Components
             </Text>
-            <Box flexDir="row">
-              {components.map((item, index) => (
-                <TouchableOpacity
-                  key={`item-${index}`}
+            <TouchableOpacity
                   onPress={() =>
-                    router.push(`/components/${item.navigationPath}`)
+                    router.push(`/components`)
                   }
                   mt={10}
                   w="100%"
                   py={10}
                 >
-                  <Text fontSize="xl">{item.onScreenName}</Text>
-                </TouchableOpacity>
-              ))}
-            </Box>
+                  <Text fontSize="xl">V1</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                  onPress={() =>
+                    router.push(`/components-v2`)
+                  }
+                  mt={10}
+                  w="100%"
+                  py={10}
+                >
+                  <Text fontSize="xl">V2</Text>
+            </TouchableOpacity>
           </Box>
         </ScrollView>
       </SafeAreaBox>