acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Some cleanup

Browse Source
This commit is contained in:
Eric Bailey
2023-12-13 17:33:02 -06:00
parent 09ce02cc7d
commit e8042f2afc
12 changed files with 204 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.web.tsx
+22 -17
View File
@@ -7,6 +7,7 @@ import {RootSiblingParent} from 'react-native-root-siblings'
import 'view/icons'
import {ThemeProvider as Nova} from '#/view/nova'
import {init as initPersistedState} from '#/state/persisted'
import {useColorMode} from 'state/shell'
import {Shell} from 'view/shell/index'
@@ -28,11 +29,13 @@ import {
} from 'state/session'
import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
import * as persisted from '#/state/persisted'
import {useColorModeTheme} from '#/view/nova/util/useColorModeTheme'
function InnerApp() {
const {isInitialLoad, currentAccount} = useSession()
const {resumeSession} = useSessionApi()
const colorMode = useColorMode()
const theme = useColorModeTheme(colorMode)
// init
useEffect(() => {
@@ -44,23 +47,25 @@ function InnerApp() {
if (isInitialLoad) return null
return (
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<LoggedOutViewProvider>
<UnreadNotifsProvider>
<ThemeProvider theme={colorMode}>
{/* All components should be within this provider */}
<RootSiblingParent>
<SafeAreaProvider>
<Shell />
</SafeAreaProvider>
</RootSiblingParent>
<ToastContainer />
</ThemeProvider>
</UnreadNotifsProvider>
</LoggedOutViewProvider>
</React.Fragment>
<Nova theme={theme}>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<LoggedOutViewProvider>
<UnreadNotifsProvider>
<ThemeProvider theme={colorMode}>
{/* All components should be within this provider */}
<RootSiblingParent>
<SafeAreaProvider>
<Shell />
</SafeAreaProvider>
</RootSiblingParent>
<ToastContainer />
</ThemeProvider>
</UnreadNotifsProvider>
</LoggedOutViewProvider>
</React.Fragment>
</Nova>
)
}
src/lib/ThemeContext.tsx
+2 -34
View File
@@ -1,13 +1,7 @@
import {isWeb} from 'platform/detection'
import React, {ReactNode, createContext, useContext} from 'react'
import {
AppState,
TextStyle,
useColorScheme as useColorScheme_BUGGY,
ViewStyle,
ColorSchemeName,
} from 'react-native'
import {TextStyle, ViewStyle, ColorSchemeName} from 'react-native'
import {darkTheme, defaultTheme} from './themes'
import {useColorScheme_FIXED} from '#/lib/hooks/useColorScheme_FIXED'
export type ColorScheme = 'light' | 'dark'
@@ -97,32 +91,6 @@ function getTheme(theme: ColorSchemeName) {
return theme === 'dark' ? darkTheme : defaultTheme
}
/**
* With RN iOS, we can only "trust" the color scheme reported while the app is
* active. This is a workaround until the bug is fixed upstream.
*
* @see https://github.com/bluesky-social/social-app/pull/1417#issuecomment-1719868504
* @see https://github.com/facebook/react-native/pull/39439
*/
function useColorScheme_FIXED() {
const colorScheme = useColorScheme_BUGGY()
const [currentColorScheme, setCurrentColorScheme] =
React.useState<ColorSchemeName>(colorScheme)
React.useEffect(() => {
// we don't need to be updating state on web
if (isWeb) return
const subscription = AppState.addEventListener('change', state => {
const isActive = state === 'active'
if (!isActive) return
setCurrentColorScheme(colorScheme)
})
return () => subscription.remove()
}, [colorScheme])
return isWeb ? colorScheme : currentColorScheme
}
export const ThemeProvider: React.FC<ThemeProviderProps> = ({
theme,
children,
src/lib/hooks/useColorScheme_FIXED.ts
+34
View File
@@ -0,0 +1,34 @@
import React from 'react'
import {
AppState,
useColorScheme as useColorScheme_BUGGY,
ColorSchemeName,
} from 'react-native'
import {isWeb} from '#/platform/detection'
/**
* With RN iOS, we can only "trust" the color scheme reported while the app is
* active. This is a workaround until the bug is fixed upstream.
*
* @see https://github.com/bluesky-social/social-app/pull/1417#issuecomment-1719868504
* @see https://github.com/facebook/react-native/pull/39439
*/
export function useColorScheme_FIXED() {
const colorScheme = useColorScheme_BUGGY()
const [currentColorScheme, setCurrentColorScheme] =
React.useState<ColorSchemeName>(colorScheme)
React.useEffect(() => {
// we don't need to be updating state on web
if (isWeb) return
const subscription = AppState.addEventListener('change', state => {
const isActive = state === 'active'
if (!isActive) return
setCurrentColorScheme(colorScheme)
})
return () => subscription.remove()
}, [colorScheme])
return isWeb ? colorScheme : currentColorScheme
}
src/view/nova/components/Box.tsx
+3
View File
@@ -0,0 +1,3 @@
import {View} from 'react-native'
import {styled} from '#/view/nova/system'
export const Box = styled(View)
src/view/nova/components/Button.tsx
+9
View File
@@ -0,0 +1,9 @@
import {Pressable} from 'react-native'
import {styled} from '#/view/nova/system'
export const Button = styled(Pressable, {
px: 'l',
py: 's',
bg: 'l3',
radius: 40,
})
src/view/nova/components/Typography.tsx
+74
View File
@@ -0,0 +1,74 @@
import {Text as RNText} from 'react-native'
import {styled} from '#/view/nova/system'
import {web} from '#/view/nova/util/platform'
export const Text = styled(RNText, {
color: 'l8',
fontSize: 's',
})
/**
* @see https://necolas.github.io/react-native-web/docs/accessibility/#semantic-html
* @see https://docs.expo.dev/develop/user-interface/fonts/
*/
export const H1 = styled(RNText, {
color: 'l8',
fontSize: 'l',
gtMobile: {
fontSize: 'xl',
},
...web({
role: 'heading',
'aria-level': 1,
}),
})
export const H2 = styled(RNText, {
color: 'l8',
fontSize: 'm',
gtMobile: {
fontSize: 'l',
},
...web({
role: 'heading',
'aria-level': 2,
}),
})
export const H3 = styled(RNText, {
color: 'l8',
fontSize: 'm',
...web({
role: 'heading',
'aria-level': 3,
}),
})
export const H4 = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'heading',
'aria-level': 4,
}),
})
export const H5 = styled(RNText, {
color: 'l8',
fontSize: 'xs',
...web({
role: 'heading',
'aria-level': 5,
}),
})
export const H6 = styled(RNText, {
color: 'l8',
fontSize: 'xxs',
...web({
role: 'heading',
'aria-level': 6,
}),
})
export const P = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'paragraph',
}),
})
src/view/nova/index.tsx
+4 -102
View File
@@ -1,102 +1,4 @@
import {View, Text as RNText} from 'react-native'
import {createSystem} from './lib/system'
import {light, dark} from './themes'
import {web} from './lib/utils'
export * from './lib/utils'
const {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
} = createSystem({
light,
dark,
})
export {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
}
export const Box = styled(View)
export const Text = styled(RNText, {
color: 'l8',
fontSize: 's',
})
/**
* @see https://necolas.github.io/react-native-web/docs/accessibility/#semantic-html
* @see https://docs.expo.dev/develop/user-interface/fonts/
*/
export const H1 = styled(RNText, {
color: 'l8',
fontSize: 'l',
gtMobile: {
fontSize: 'xl',
},
...web({
role: 'heading',
'aria-level': 1,
}),
})
export const H2 = styled(RNText, {
color: 'l8',
fontSize: 'm',
gtMobile: {
fontSize: 'l',
},
...web({
role: 'heading',
'aria-level': 2,
}),
})
export const H3 = styled(RNText, {
color: 'l8',
fontSize: 'm',
...web({
role: 'heading',
'aria-level': 3,
}),
})
export const H4 = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'heading',
'aria-level': 4,
}),
})
export const H5 = styled(RNText, {
color: 'l8',
fontSize: 'xs',
...web({
role: 'heading',
'aria-level': 5,
}),
})
export const H6 = styled(RNText, {
color: 'l8',
fontSize: 'xxs',
...web({
role: 'heading',
'aria-level': 6,
}),
})
export const P = styled(RNText, {
color: 'l8',
fontSize: 's',
...web({
role: 'paragraph',
}),
})
export * from '#/view/nova/system'
export * from '#/view/nova/components/Box'
export * from '#/view/nova/components/Typography'
export * from '#/view/nova/components/Button'
src/view/nova/lib/system.tsx
+9 -6
View File
@@ -55,11 +55,14 @@ export function createSystem<
theme,
}: React.PropsWithChildren<{theme: ThemeName}>) => (
<Context.Provider
value={{
themeName: theme,
theme: themes[theme],
themes,
}}>
value={React.useMemo(
() => ({
themeName: theme,
theme: themes[theme],
themes,
}),
[theme],
)}>
{children}
</Context.Provider>
)
@@ -74,7 +77,7 @@ export function createSystem<
function useBreakpoints() {
const {theme} = useTheme()
const [breakpoints, setBreakpoints] = React.useState(
const [breakpoints, setBreakpoints] = React.useState(() =>
theme.getActiveBreakpoints({width: Dimensions.get('window').width}),
)
src/view/nova/system.ts
+28
View File
@@ -0,0 +1,28 @@
/**
* Library imports
*/
import {createSystem} from './lib/system'
import {light, dark} from './themes'
const {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
} = createSystem({
light,
dark,
})
export {
ThemeProvider,
useTheme,
useTokens,
useBreakpoints,
useStyle,
useStyles,
styled,
}
src/view/nova/themes.ts
+10 -1
View File
@@ -16,6 +16,15 @@ const palette = {
export const light = createTheme({
tokens: {
space: {
xxs: 2,
xs: 4,
s: 8,
m: 12,
l: 18,
xl: 24,
xxl: 32,
},
color: {
primary: palette.blue,
l1: palette.white,
@@ -118,7 +127,7 @@ export const light = createTheme({
/**
* Shorthand for applying `fontSize` and `fontHeight`, according to our type scale.
*/
fontSize(value: 'xs' | 's' | 'm' | 'l' | 'xl', tokens) {
fontSize(value: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl', tokens) {
return {
fontSize: tokens.fontSize[value],
lineHeight: tokens.lineHeight[value],
src/view/nova/lib/utils.ts → src/view/nova/util/platform.ts
View File
src/view/nova/util/useColorModeTheme.ts
+9
View File
@@ -0,0 +1,9 @@
import * as persisted from '#/state/persisted'
import {useColorScheme_FIXED} from '#/lib/hooks/useColorScheme_FIXED'
export function useColorModeTheme(
theme: persisted.Schema['colorMode'],
): 'light' | 'dark' {
const colorScheme = useColorScheme_FIXED()
return (theme === 'system' ? colorScheme : theme) || 'light'
}