Some setup improvements

.storybook/main.ts

@@ -1,7 +1,10 @@
 module.exports = {
-  stories: ["../src/components/**/*.stories.?(ts|tsx|js|jsx)"],
+  stories: [
+    '../src/components/**/*.stories.?(ts|tsx|js|jsx)',
+    '../src/theme/components/*.stories.?(ts|tsx|js|jsx)',
+  ],
   addons: [
-    "@storybook/addon-ondevice-controls",
-    "@storybook/addon-ondevice-actions",
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-actions',
   ],
 };

.storybook/storybook.requires.ts

@@ -19,6 +19,19 @@ const normalizedStories = [
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
   },
+  {
+    titlePrefix: "",
+    directory: "./src/theme/components",
+    files: "*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      /^\.[\\/](?:(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      "../src/theme/components",
+      false,
+      /^\.[\\/](?:(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
 ];
 
 declare global {

app.json

@@ -35,7 +35,6 @@
         }
       ],
       "expo-router",
-      "expo-font",
       "expo-localization"
     ],
     "extra": {

app/_layout.tsx

@@ -1,8 +1,22 @@
-import React from 'react';
+import { useCallback } from 'react';
 
+import {
+  Inter_100Thin,
+  Inter_200ExtraLight,
+  Inter_300Light,
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+  Inter_700Bold,
+  Inter_800ExtraBold,
+  Inter_900Black,
+  useFonts,
+} from '@expo-google-fonts/inter';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Slot } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
 import { I18nextProvider } from 'react-i18next';
+import { View } from 'react-native';
 import { ThemeProvider } from 'react-native-ficus-ui';
 import {
   ReanimatedLogLevel,
@@ -14,7 +28,27 @@ import i18n from '@/lib/i18n';
 import useProtectedRoute from '@/modules/auth/auth.hook';
 import theme from '@/theme';
 
+SplashScreen.preventAutoHideAsync();
+
 export default function RootLayout() {
+  const [fontsLoaded] = useFonts({
+    Inter_100Thin,
+    Inter_200ExtraLight,
+    Inter_300Light,
+    Inter_400Regular,
+    Inter_500Medium,
+    Inter_600SemiBold,
+    Inter_700Bold,
+    Inter_800ExtraBold,
+    Inter_900Black,
+  });
+
+  const onLayoutRootView = useCallback(async () => {
+    if (fontsLoaded) {
+      await SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded]);
+
   useProtectedRoute();
 
   configureReanimatedLogger({
@@ -26,7 +60,9 @@ export default function RootLayout() {
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme.light}>
         <I18nextProvider i18n={i18n}>
-          <Slot />
+          <View onLayout={onLayoutRootView} style={{ flex: 1 }}>
+            <Slot />
+          </View>
         </I18nextProvider>
       </ThemeProvider>
     </QueryClientProvider>

app/index.tsx

@@ -1,15 +1,12 @@
 import { useCallback, useContext, useEffect } from 'react';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar, View } from 'react-native';
 import { ThemeContext } from 'react-native-ficus-ui';
 
 import theme, { THEME_KEY } from '@/theme';
 import { useDarkMode } from '@/theme/useDarkMode';
 
-SplashScreen.preventAutoHideAsync();
-
 const Index = () => {
   const { setTheme } = useContext(ThemeContext);
   const { getThemeColor } = useDarkMode();

package.json

@@ -22,6 +22,7 @@
     "*.{ts,tsx,js,jsx}": "pnpm lint:staged"
   },
   "dependencies": {
+    "@expo-google-fonts/inter": "0.2.3",
     "@expo/vector-icons": "14.0.4",
     "@formiz/core": "2.4.5",
     "@formiz/validations": "2.0.1",
@@ -72,6 +73,7 @@
     "@babel/core": "7.26.7",
     "@babel/preset-env": "7.26.7",
     "@babel/runtime": "7.26.7",
+    "@gorhom/bottom-sheet": "5.0.4",
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",
     "@react-native-community/cli-platform-ios": "15.0.1",
@@ -83,8 +85,6 @@
     "@storybook/addon-ondevice-actions": "8.5.2",
     "@storybook/addon-ondevice-controls": "8.5.2",
     "@storybook/react-native": "8.5.2",
-    "react-native-svg": "15.8.0",
-    "@gorhom/bottom-sheet": "5.0.4",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/lodash": "4.17.14",
     "@types/react": "18.3.18",
@@ -96,6 +96,7 @@
     "lodash": "4.17.21",
     "openapi-zod-client": "1.13.2",
     "react-native-dotenv": "3.4.11",
+    "react-native-svg": "15.8.0",
     "tsx": "4.6.2",
     "typescript": "5.3.3"
   },

src/modules/auth/auth.hook.ts

@@ -1,7 +1,6 @@
 import { useLayoutEffect, useMemo, useRef } from 'react';
 
 import { useRootNavigationState, useRouter, useSegments } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
 import { useShallow } from 'zustand/react/shallow';
 
 import useAuthStore from '@/modules/auth/auth.store';
@@ -24,8 +23,6 @@ const useProtectedRoute = () => {
       return;
     }
     setTimeout(() => {
-      SplashScreen.hideAsync();
-
       if (process.env.STORYBOOK_ENABLED === 'true') {
         router.replace('/storybook');
         currentRouteRef.current !== 'storybook';

src/theme/components/badge.ts

@@ -0,0 +1,13 @@
+export default {
+  variant: 'solid',
+  variants: {
+    '@primary': {
+      bg: 'brand.900',
+      color: 'black',
+    },
+    '@secondary': {
+      bg: 'black',
+      color: 'brand.950',
+    },
+  },
+};

src/theme/components/button.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'react-native-ficus-ui';
+
+const meta: Meta<typeof Button> = {
+  title: 'Theme/Button',
+  component: Button,
+  args: { children: 'Button' },
+};
+type Story = StoryObj<typeof Button>;
+
+export default meta;
+
+export const Default: Story = {};
+
+export const Outline: Story = {
+  args: {
+    variant: '@outline',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: '@primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: '@secondary',
+  },
+};

src/theme/components/button.ts

@@ -0,0 +1,25 @@
+export default {
+  variant: 'solid',
+  variants: {
+    '@primary': {
+      bg: 'brand.900',
+      color: 'black',
+      fontWeight: 500,
+      fontSize: 'sm',
+      letterSpacing: 4,
+      textTransform: 'uppercase',
+    },
+    '@secondary': {
+      bg: 'black',
+      color: 'brand.950',
+      fontWeight: 500,
+      fontSize: 'sm',
+      letterSpacing: 4,
+      textTransform: 'uppercase',
+    },
+    ghost: {
+      bg: 'transparent',
+      color: 'gray.500',
+    },
+  },
+};

src/theme/components/index.ts

@@ -0,0 +1,9 @@
+import Badge from './badge';
+import Button from './button';
+import Modal from './modal';
+
+export const components = {
+  Modal,
+  Button,
+  Badge,
+};

src/theme/components/modal.ts

@@ -0,0 +1,3 @@
+export default {
+  bg: 'gray.100',
+};

src/theme/foundations/colors.ts

@@ -1,6 +1,8 @@
+import { ThemeType } from 'react-native-ficus-ui';
+
 import tailwindColors from './tailwindColors';
 
-export const colors = {
+export const colors: ThemeType['colors'] = {
   // Update me with other Tailwind colors or with https://smart-swatch.netlify.app/
   brand: tailwindColors.blue,
   gray: tailwindColors.blueGray,

src/theme/foundations/index.ts

@@ -1,9 +1,11 @@
 import { ThemeType } from 'react-native-ficus-ui';
 
-import { colors } from './colors';
+import { colors } from '@/theme/foundations/colors';
+import { fontFamily } from '@/theme/foundations/typography';
 
-const foundations: { colors: ThemeType['colors'] } = {
+const foundations: ThemeType = {
   colors,
+  fontFamily,
 };
 
 export default foundations;

src/theme/foundations/typography.ts

@@ -0,0 +1,13 @@
+export const fontFamily = {
+  100: 'Inter_100Thin',
+  200: 'Inter_200ExtraLight',
+  300: 'Inter_300Light',
+  400: 'Inter_400Regular',
+  normal: 'Inter_400Regular',
+  500: 'Inter_500Medium',
+  600: 'Inter_600SemiBold',
+  700: 'Inter_700Bold',
+  bold: 'Inter_700Bold',
+  800: 'Inter_800ExtraBold',
+  900: 'Inter_900Black',
+};

src/theme/themes/dark.ts

@@ -1,11 +1,8 @@
+import { components } from '@/theme/components';
 import foundations from '@/theme/foundations';
 
 export default {
   name: 'dark',
   ...foundations,
-  components: {
-    Modal: {
-      bg: 'gray.900',
-    },
-  },
+  components,
 };

src/theme/themes/light.ts

@@ -1,11 +1,8 @@
+import { components } from '@/theme/components';
 import foundations from '@/theme/foundations';
 
 export default {
   name: 'light',
   ...foundations,
-  components: {
-    Modal: {
-      bg: 'gray.100',
-    },
-  },
+  components,
 };