feat: app style structure & revamp (keep-starknet-strange#142)

* Fonts & Colors & Spacings * Theme context & themed stylesheet * Text component * Button component * components * Replace Text with component Text * Replace Typography with Text * Rename component folders * Rename component folders * Remove avatar component Avatar component will be re-added later * Revamp components * Remove avatar import * revamp create post screen * Feed revamp * Profile revamp * Auth flow revamp * Post card revamp * Separate Post & PostCard components * Post detail revamp * Fix keyboard avoiding view * small fixes * Revamp modal
MSghais · Jun 3, 2024 · fe9e00f · fe9e00f
1 parent a82608b
commit fe9e00f
Show file tree

Hide file tree

Showing 103 changed files with 1,825 additions and 1,917 deletions.
diff --git a/JoyboyCommunity/app.json b/JoyboyCommunity/app.json
@@ -25,6 +25,19 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/Poppins/Poppins-Light.ttf",
+            "./assets/fonts/Poppins/Poppins-Regular.ttf",
+            "./assets/fonts/Poppins/Poppins-Italic.ttf",
+            "./assets/fonts/Poppins/Poppins-Medium.ttf",
+            "./assets/fonts/Poppins/Poppins-SemiBold.ttf",
+            "./assets/fonts/Poppins/Poppins-Bold.ttf"
+          ]
+        }
+      ],
       [
         "expo-secure-store",
         {

diff --git a/JoyboyCommunity/assets/fonts/Poppins/Poppins-Bold.ttf b/JoyboyCommunity/assets/fonts/Poppins/Poppins-Bold.ttf
diff --git a/JoyboyCommunity/assets/fonts/Poppins/Poppins-Italic.ttf b/JoyboyCommunity/assets/fonts/Poppins/Poppins-Italic.ttf
diff --git a/JoyboyCommunity/assets/fonts/Poppins/Poppins-Light.ttf b/JoyboyCommunity/assets/fonts/Poppins/Poppins-Light.ttf
diff --git a/JoyboyCommunity/assets/fonts/Poppins/Poppins-Medium.ttf b/JoyboyCommunity/assets/fonts/Poppins/Poppins-Medium.ttf
diff --git a/JoyboyCommunity/assets/fonts/Poppins/Poppins-Regular.ttf b/JoyboyCommunity/assets/fonts/Poppins/Poppins-Regular.ttf
diff --git a/JoyboyCommunity/assets/fonts/Poppins/Poppins-SemiBold.ttf b/JoyboyCommunity/assets/fonts/Poppins/Poppins-SemiBold.ttf
diff --git a/JoyboyCommunity/package.json b/JoyboyCommunity/package.json
@@ -33,11 +33,13 @@
     "dayjs": "^1.11.11",
     "events": "^3.3.0",
     "expo": "~51.0.8",
+    "expo-clipboard": "~6.0.3",
     "expo-crypto": "~13.0.2",
     "expo-secure-store": "~13.0.1",
     "expo-splash-screen": "~0.27.4",
     "expo-status-bar": "~1.12.1",
     "fast-text-encoding": "^1.0.6",
+    "memoize-one": "^6.0.0",
     "pbkdf2": "^3.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/JoyboyCommunity/src/app/App.tsx b/JoyboyCommunity/src/app/App.tsx
@@ -15,20 +15,28 @@ export default function App() {
   const {ndk} = useNostrContext();
 
   useEffect(() => {
-    async function prepare() {
+    (async () => {
       try {
         // Pre-load fonts, make any API calls you need to do here
         await Font.loadAsync(Entypo.font);
+
+        await Font.loadAsync({
+          'Poppins-Light': require('../../assets/fonts/Poppins/Poppins-Light.ttf'),
+          'Poppins-Regular': require('../../assets/fonts/Poppins/Poppins-Regular.ttf'),
+          'Poppins-Italic': require('../../assets/fonts/Poppins/Poppins-Italic.ttf'),
+          'Poppins-Medium': require('../../assets/fonts/Poppins/Poppins-Medium.ttf'),
+          'Poppins-SemiBold': require('../../assets/fonts/Poppins/Poppins-SemiBold.ttf'),
+          'Poppins-Bold': require('../../assets/fonts/Poppins/Poppins-Bold.ttf'),
+        });
+
         await ndk.connect();
       } catch (e) {
         console.warn(e);
       } finally {
         // Tell the application to render
         setAppIsReady(true);
       }
-    }
-
-    prepare();
+    })();
   }, []);
 
   const onLayoutRootView = useCallback(async () => {

diff --git a/JoyboyCommunity/src/app/Router.tsx b/JoyboyCommunity/src/app/Router.tsx
@@ -5,13 +5,14 @@ import {View} from 'react-native';
 import {useTheme} from 'styled-components/native';
 
 import {HomeIcon, IndicatorIcon, MessageIcon, SearchIcon, UserIcon} from '../assets/icons';
-import Login from '../modules/login';
+import {CreateAccount} from '../screens/Auth/CreateAccount';
+import {Login} from '../screens/Auth/Login';
+import {SaveKeys} from '../screens/Auth/SaveKeys';
 import {CreatePost} from '../screens/CreatePost';
 import {Feed} from '../screens/Feed';
 import {PostDetail} from '../screens/PostDetail';
 import {Profile} from '../screens/Profile';
 import {useAuth} from '../store/auth';
-import {useNavigationStore} from '../store/navigation';
 import {AuthStackParams, HomeBottomStackParams, MainStackParams, RootStackParams} from '../types';
 
 const RootStack = createNativeStackNavigator<RootStackParams>();
@@ -115,6 +116,8 @@ const AuthNavigator: React.FC = () => {
   return (
     <AuthStack.Navigator screenOptions={{headerShown: false}}>
       <AuthStack.Screen name="Login" component={Login} />
+      <AuthStack.Screen name="CreateAccount" component={CreateAccount} />
+      <AuthStack.Screen name="SaveKeys" component={SaveKeys} />
     </AuthStack.Navigator>
   );
 };
@@ -131,7 +134,7 @@ const MainNavigator: React.FC = () => {
 };
 
 const RootNavigator: React.FC = () => {
-  const stack = useNavigationStore((state) => state.stack);
+  const {publicKey} = useAuth();
   const theme = useTheme();
 
   return (
@@ -143,9 +146,11 @@ const RootNavigator: React.FC = () => {
         },
       }}
     >
-      {stack === 'login' && <RootStack.Screen name="AuthStack" component={AuthNavigator} />}
-
-      {stack === 'app' && <RootStack.Screen name="MainStack" component={MainNavigator} />}
+      {publicKey ? (
+        <RootStack.Screen name="MainStack" component={MainNavigator} />
+      ) : (
+        <RootStack.Screen name="AuthStack" component={AuthNavigator} />
+      )}
     </RootStack.Navigator>
   );
 };

diff --git a/JoyboyCommunity/src/app/Wrapper.tsx b/JoyboyCommunity/src/app/Wrapper.tsx
@@ -3,10 +3,11 @@ import {useEffect, useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {Host as PortalizeProvider} from 'react-native-portalize';
-import {ThemeProvider} from 'styled-components/native';
+import {ThemeProvider as StyledThemeProvider} from 'styled-components/native';
 
 import {RootScreenContainer} from '../components';
 import {NostrProvider} from '../context/NostrContext';
+import {ThemeProvider} from '../context/Theme';
 import {darkModeColors, lightModeColors} from '../tokens/colors';
 import App from './App';
 
@@ -28,17 +29,19 @@ export const Wrapper: React.FC = () => {
 
   return (
     <GestureHandlerRootView style={{flex: 1}}>
-      <ThemeProvider theme={theme}>
-        <PortalizeProvider>
+      <StyledThemeProvider theme={theme}>
+        <ThemeProvider>
           <NostrProvider>
             <QueryClientProvider client={queryClient}>
-              <RootScreenContainer>
-                <App />
-              </RootScreenContainer>
+              <PortalizeProvider>
+                <RootScreenContainer>
+                  <App />
+                </RootScreenContainer>
+              </PortalizeProvider>
             </QueryClientProvider>
           </NostrProvider>
-        </PortalizeProvider>
-      </ThemeProvider>
+        </ThemeProvider>
+      </StyledThemeProvider>
     </GestureHandlerRootView>
   );
 };
diff --git a/JoyboyCommunity/src/assets/icons.tsx b/JoyboyCommunity/src/assets/icons.tsx
@@ -107,12 +107,6 @@ export const UserIcon: React.FC<SvgProps> = (props) => (
   </Svg>
 );
 
-export const LineIcon: React.FC<SvgProps> = (props) => (
-  <Svg width={37} height={5} fill="none" {...props}>
-    <Rect width={36} height={5} x={0.5} fill="currentColor" fillOpacity={0.3} rx={2.5} />
-  </Svg>
-);
-
 export const CopyIcon: React.FC<SvgProps> = (props) => {
   return (
     <Svg viewBox="0 0 24 24" fill="none" {...props}>

diff --git a/...Community/src/components/button/index.tsx → ...Community/src/components/Button/index.tsx b/...Community/src/components/button/index.tsx → ...Community/src/components/Button/index.tsx
@@ -1,9 +1,11 @@
 import {Pressable, PressableProps, StyleProp, TextStyle} from 'react-native';
 
-import {Typography} from '../typography';
-import styles from './styles';
+import {useStyles} from '../../hooks';
+import {Text} from '../Text';
+import stylesheet from './styles';
 
 export type ButtonProps = PressableProps & {
+  variant?: 'default' | 'primary' | 'secondary';
   left?: React.ReactNode;
   right?: React.ReactNode;
   small?: boolean;
@@ -13,6 +15,7 @@ export type ButtonProps = PressableProps & {
 };
 
 export const Button: React.FC<ButtonProps> = ({
+  variant = 'default',
   left,
   right,
   small,
@@ -23,29 +26,22 @@ export const Button: React.FC<ButtonProps> = ({
   style: styleProp,
   ...pressableProps
 }) => {
-  const containerStyle = [
-    styles.container,
-    small && styles.small,
-    block && styles.block,
-    disabled && styles.disabled,
-  ];
+  const styles = useStyles(stylesheet, variant, block, disabled, small);
 
   return (
     <Pressable
       disabled={disabled}
       style={
         typeof styleProp === 'function'
-          ? (state) => [...containerStyle, styleProp(state)]
-          : [...containerStyle, styleProp]
+          ? (state) => [styles.container, styleProp(state)]
+          : [styles.container, styleProp]
       }
       {...pressableProps}
     >
       {left}
-      <Typography
-        style={[styles.text, small && styles.smallText, disabled && styles.disabledText, textStyle]}
-      >
+      <Text weight="semiBold" style={[styles.text, textStyle]}>
         {children}
-      </Typography>
+      </Text>
       {right}
     </Pressable>
   );

diff --git a/JoyboyCommunity/src/components/Button/styles.ts b/JoyboyCommunity/src/components/Button/styles.ts
@@ -0,0 +1,64 @@
+import {Spacing, ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet(
+  (
+    theme,
+    variant: 'default' | 'primary' | 'secondary',
+    block: boolean,
+    disabled: boolean,
+    small: boolean,
+  ) => ({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.buttonBackground,
+      paddingVertical: Spacing.medium,
+      paddingHorizontal: Spacing.xlarge,
+      borderRadius: 999,
+
+      ...(block && {
+        width: '100%',
+      }),
+
+      ...(small && {
+        paddingVertical: Spacing.small,
+        paddingHorizontal: Spacing.large,
+      }),
+
+      ...(variant === 'primary' && {
+        backgroundColor: theme.colors.primary,
+      }),
+
+      ...(variant === 'secondary' && {
+        backgroundColor: theme.colors.secondary,
+      }),
+
+      ...(disabled && {
+        backgroundColor: theme.colors.buttonDisabledBackground,
+      }),
+    },
+
+    text: {
+      color: theme.colors.buttonText,
+      fontSize: 15,
+      textAlign: 'center',
+
+      ...(small && {
+        fontSize: 14,
+      }),
+
+      ...(variant === 'primary' && {
+        color: theme.colors.onPrimary,
+      }),
+
+      ...(variant === 'secondary' && {
+        color: theme.colors.onSecondary,
+      }),
+
+      ...(disabled && {
+        color: theme.colors.buttonDisabledText,
+      }),
+    },
+  }),
+);
diff --git a/JoyboyCommunity/src/components/Divider/index.tsx b/JoyboyCommunity/src/components/Divider/index.tsx
@@ -0,0 +1,41 @@
+import {StyleSheet, View, ViewProps} from 'react-native';
+
+import {useColor, useStyles} from '../../hooks';
+import {ColorProp} from '../../styles';
+import stylesheet from './styles';
+
+export type DividerProps = ViewProps & {
+  /**
+   * Whether the divider is horizontal or vertical.
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical';
+
+  /**
+   * The color of the divider.
+   * @default 'divider'
+   */
+  color?: ColorProp;
+
+  /**
+   * The thickness of the divider.
+   * @default hairlineWidth
+   */
+  thickness?: number;
+};
+
+export const Divider: React.FC<DividerProps> = (props) => {
+  const {
+    color: colorProp = 'divider',
+    direction = 'horizontal',
+    thickness = StyleSheet.hairlineWidth,
+    style: styleProp,
+    ...viewProps
+  } = props;
+
+  const color = useColor(colorProp);
+
+  const styles = useStyles(stylesheet, color, thickness);
+
+  return <View style={[styles.divider, styles[direction], styleProp]} {...viewProps} />;
+};
diff --git a/JoyboyCommunity/src/components/Divider/styles.ts b/JoyboyCommunity/src/components/Divider/styles.ts
@@ -0,0 +1,16 @@
+import {ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet((theme, color: string, thickness: number) => ({
+  divider: {
+    backgroundColor: color,
+  },
+
+  horizontal: {
+    width: '100%',
+    height: thickness,
+  },
+  vertical: {
+    width: thickness,
+    height: '100%',
+  },
+}));