FEAT: story book

src/components/AppLoading.tsx

@@ -1,17 +1,15 @@
-import { Loader, Center } from '@baca/design-system/components'
-import { useCachedResources, useNavigationTheme } from '@baca/hooks'
+import { Loader, Center, Box } from '@baca/design-system/components'
+import { useCachedResources } from '@baca/hooks'
 import { useCheckForAppUpdate } from '@baca/hooks/useCheckForAppUpdate'
 import { isSignedInAtom } from '@baca/store/auth'
 import * as SplashScreen from 'expo-splash-screen'
 import { useAtomValue } from 'jotai'
 import { FC, PropsWithChildren, useCallback, useEffect, useState } from 'react'
-import { View, StyleSheet } from 'react-native'
 
 // Keep the splash screen visible while we fetch resources
 SplashScreen.preventAutoHideAsync()
 
 export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
-  const { navigationTheme } = useNavigationTheme()
   const isLoadingComplete = useCachedResources()
   const isSignedIn = useAtomValue(isSignedInAtom)
 
@@ -38,23 +36,14 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
   }, [isLoading])
 
   return (
-    <View
-      {...{ onLayout }}
-      style={[styles.container, { backgroundColor: navigationTheme.colors.background }]}
-    >
+    <Box {...{ onLayout }} flex={1}>
       {!isSplashHidden ? (
         <Center bg="bg.primary" flexGrow={1}>
           <Loader type="bubbles" />
         </Center>
       ) : (
         children
       )}
-    </View>
+    </Box>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-})

src/components/CompanyLogo.tsx

@@ -1,6 +1,8 @@
 import { darkBinarLogo, darkLogoSygnet, lightBinarLogo, lightLogoSygnet } from '@baca/constants'
 import { ColorSchemeName, useColorScheme } from '@baca/contexts'
 import { Image, ImageStyle, ImageProps } from 'expo-image'
+import { Link } from 'expo-router'
+import { Platform, StyleSheet } from 'react-native'
 
 type LogoTypes = 'binarSygnet' | 'binar'
 
@@ -16,15 +18,43 @@ export const CompanyLogo = ({
   type = 'binar',
   width = '100%',
   style,
+  asImage = false,
 }: {
   height?: ImageStyle['height']
   type?: LogoTypes
   width?: ImageStyle['width']
   style?: ImageStyle
+  asImage?: boolean
 }) => {
   const { colorScheme } = useColorScheme()
 
   const source = LOGO[colorScheme][type]
 
-  return <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
+  if (Platform.OS !== 'web' || asImage) {
+    return <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
+  }
+
+  return (
+    <Link
+      href="/"
+      style={[
+        {
+          height,
+          width,
+        },
+        styles.image,
+      ]}
+    >
+      <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
+    </Link>
+  )
 }
+
+const styles = StyleSheet.create({
+  image: {
+    alignItems: 'center',
+    display: 'flex',
+    // flex: 1,
+    justifyContent: 'center',
+  },
+})

src/components/ThemeSwitcherButton.tsx

@@ -0,0 +1,42 @@
+import { useColorScheme } from '@baca/contexts'
+import { Icon } from '@baca/design-system'
+import { useTheme } from '@baca/hooks'
+import { MotiPressable } from 'moti/interactions'
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+
+export const ThemeSwitcherButton = () => {
+  const { setColorSchemeSetting, colorSchemeSetting } = useColorScheme()
+  const { colors } = useTheme()
+
+  const handleColorSchemeSettingChange = useCallback(() => {
+    const scheme = colorSchemeSetting === 'light' ? 'dark' : 'light'
+    setColorSchemeSetting(scheme)
+  }, [colorSchemeSetting, setColorSchemeSetting])
+
+  const icon = colorSchemeSetting === 'light' ? 'moon-line' : 'sun-line'
+
+  return (
+    <MotiPressable
+      onPress={handleColorSchemeSettingChange}
+      style={styles.iconContainter}
+      animate={({ hovered }) => {
+        'worklet'
+
+        return {
+          scale: hovered ? 1.1 : 1,
+          backgroundColor: hovered ? colors.bg.tertiary : 'transparent',
+        }
+      }}
+    >
+      <Icon name={icon} size={24} color="text.primary" />
+    </MotiPressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  iconContainter: {
+    borderRadius: 8,
+    padding: 8,
+  },
+})

src/components/molecules/Field/RadioGroup.tsx

@@ -43,3 +43,5 @@ export const RadioGroup = <T extends string>({
     </Box>
   )
 }
+
+RadioGroup.displayName = 'RadioGroup'

src/components/molecules/SocialButtons/SocialButton.tsx

@@ -75,3 +75,5 @@ export const SocialButton: FC<SocialButtonProps> = ({ type = 'google', ...rest }
     </Button>
   )
 }
+
+SocialButton.displayName = 'SocialButton'

src/design-system/components/Box.tsx

@@ -7,3 +7,5 @@ import { generateStyledComponent } from '../utils/generateStyledComponent'
 export type BoxProps = StyledProps & ViewProps
 
 export const Box = memo(generateStyledComponent<BoxProps, View>(View))
+
+Box.displayName = 'Box'

src/design-system/components/BubblesLoader.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@baca/hooks'
 import { useBubblesLoader } from '@baca/hooks/loaders'
 import React from 'react'
 import Animated from 'react-native-reanimated'
@@ -9,12 +10,15 @@ export type BubblesLoaderType = {
   size?: number
 }
 
-const FullCircle = ({ size = 10, color = 'black' }: BubblesLoaderType): JSX.Element => (
+const FullCircle = ({ size = 10, color }: BubblesLoaderType): JSX.Element => (
   <Box style={{ backgroundColor: color, borderRadius: size / 2, width: size, height: size }} />
 )
 
-export const BubblesLoader = ({ size = 40, color = 'black' }: BubblesLoaderType): JSX.Element => {
+export const BubblesLoader = ({ size = 40, color }: BubblesLoaderType): JSX.Element => {
   const { animatedHeight, animatedRotate, animatedWidth } = useBubblesLoader()
+  const theme = useTheme()
+
+  const loaderColor = color || theme.colors.text.primary
 
   const containerStyle = {
     width: size,
@@ -37,12 +41,12 @@ export const BubblesLoader = ({ size = 40, color = 'black' }: BubblesLoaderType)
   return (
     <Animated.View style={[containerStyle, animatedRotate]}>
       <Animated.View style={[rowStyle, animatedWidth]}>
-        <FullCircle color={color} />
-        <FullCircle color={color} />
+        <FullCircle color={loaderColor} />
+        <FullCircle color={loaderColor} />
       </Animated.View>
       <Animated.View style={[absoluteStyle, animatedHeight]}>
-        <FullCircle color={color} />
-        <FullCircle color={color} />
+        <FullCircle color={loaderColor} />
+        <FullCircle color={loaderColor} />
       </Animated.View>
     </Animated.View>
   )

src/design-system/components/Button/Button.tsx

@@ -329,19 +329,42 @@ const Button = generateStyledComponent<ButtonProps, typeof Pressable>(
   RawButton
 ) as ButtonComposition
 
+Button.displayName = 'Button'
+
 const generateButtonVariant = (variant: ButtonVariant) =>
   forwardRef<View, ButtonProps>((props, ref) => <Button {...{ ...props, ref, variant }} />)
 
 Button.Primary = generateButtonVariant('Primary')
+Button.Primary.displayName = 'Button.Primary'
+
 Button.PrimaryDestructive = generateButtonVariant('PrimaryDestructive')
+Button.PrimaryDestructive.displayName = 'Button.PrimaryDestructive'
+
 Button.SecondaryColor = generateButtonVariant('SecondaryColor')
+Button.SecondaryColor.displayName = 'Button.SecondaryColor'
+
 Button.SecondaryGray = generateButtonVariant('SecondaryGray')
+Button.SecondaryGray.displayName = 'Button.SecondaryGray'
+
 Button.SecondaryDestructive = generateButtonVariant('SecondaryDestructive')
+Button.SecondaryDestructive.displayName = 'Button.SecondaryDestructive'
+
 Button.TertiaryColor = generateButtonVariant('TertiaryColor')
+Button.TertiaryColor.displayName = 'Button.TertiaryColor'
+
 Button.TertiaryGray = generateButtonVariant('TertiaryGray')
+Button.TertiaryGray.displayName = 'Button.TertiaryGray'
+
 Button.TertiaryDestructive = generateButtonVariant('TertiaryDestructive')
+Button.TertiaryDestructive.displayName = 'Button.TertiaryDestructive'
+
 Button.LinkColor = generateButtonVariant('LinkColor')
+Button.LinkColor.displayName = 'Button.LinkColor'
+
 Button.LinkGray = generateButtonVariant('LinkGray')
+Button.LinkGray.displayName = 'Button.LinkGray'
+
 Button.LinkDestructive = generateButtonVariant('LinkDestructive')
+Button.LinkDestructive.displayName = 'Button.LinkDestructive'
 
 export { Button }

src/design-system/components/CheckboxButton.tsx

@@ -103,3 +103,5 @@ export const CheckboxButton = ({
     </Box>
   )
 }
+
+CheckboxButton.displayName = 'CheckboxButton'

src/design-system/components/CircleLoader.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@baca/hooks'
 import { useCircleLoader } from '@baca/hooks/loaders'
 import React from 'react'
 import Animated, {
@@ -102,9 +103,10 @@ const HalfCircle = ({
 export const CircleLoader = ({
   size = 32,
   thickness = 2,
-  color = 'black',
+  color,
 }: CircleLoaderType): JSX.Element => {
   const { animatedRotate, progress } = useCircleLoader()
+  const theme = useTheme()
 
   const fullCircleStyle = {
     width: size,
@@ -114,7 +116,7 @@ export const CircleLoader = ({
   } as const
 
   const circleStyleProps = {
-    color,
+    color: color || theme.colors.text.primary,
     size,
     thickness,
   }

src/design-system/components/Loader.tsx

@@ -55,3 +55,5 @@ export const Loader = ({ type, ...props }: LoaderType): JSX.Element => {
 
   return renderLoader
 }
+
+Loader.displayName = 'Loader'