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

Better naming, better code

Browse Source
This commit is contained in:
Eric Bailey
2023-12-21 16:58:27 -06:00
parent b3e19afd63
commit 3e11c11e59
7 changed files with 184 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/README.md
+13 -24
View File
@@ -1,34 +1,23 @@
# Application Layout Framework (ALF)
```tsx
import { View } from 'react-native'
import { useAlf } from '#/alf'
import { H3 } from '#/view/com/Typography'
import {View} from 'react-native'
import {atoms, useTheme, useBreakpoints, web} from '#/alf'
import {H3, Text} from '#/view/com/Typography'
function App() {
const { styles, breakpoints } = useAlf()
const theme = useAlf()
const breakpoints = useBreakpoints()
return (
<View style={[styles.flex.row, styles.padding.pa.xl]}>
<H3 style={[styles.padding.pb.m, styles.color.primary]}>I'm the blue color</H3>
</View>
)
}
```
Is a little nicer than:
```tsx
import { View } from 'react-native'
import { useTheme, styles } from '#/alf'
import { H3 } from '#/view/com/Typography'
function App() {
const theme = useTheme()
return (
<View style={[styles.flex.row, styles.padding.pa.xl]}>
<H3 style={[styles.padding.pb.m, theme.color.primary]}>I'm the blue color</H3>
<View style={[atoms.flex.row, atoms.padding.pa.xl, web({height: '100vh'})]}>
<H3 style={[atoms.padding.pb.m, theme.atoms.color.primary]}>
I'm the blue color
</H3>
{breakpoints.gtMobile && (
<Text style={[theme.atoms.backgroundColor.l1]}>Only visible on tablet and above!</Text>
)}
</View>
)
}
src/alf/styles.ts → src/alf/atoms.ts
+1 -1
View File
@@ -252,7 +252,7 @@ const margin = Object.keys(tokens.space).reduce(
},
)
export const styles = {
export const atoms = {
radius,
padding,
margin,
src/alf/index.tsx
+6 -7
View File
@@ -2,8 +2,7 @@ import React from 'react'
import {Dimensions} from 'react-native'
import * as themes from '#/alf/themes'
export * as tokens from '#/alf/tokens'
export {styles} from '#/alf/styles'
export {atoms} from '#/alf/atoms'
export * from '#/alf/util/platform'
type BreakpointName = keyof typeof breakpoints
@@ -34,7 +33,7 @@ function getActiveBreakpoints({width}: {width: number}) {
*/
export const Context = React.createContext<{
themeName: themes.ThemeName
styles: themes.Theme
theme: themes.Theme
breakpoints: {
active: BreakpointName | undefined
gtMobile: boolean
@@ -42,7 +41,7 @@ export const Context = React.createContext<{
}
}>({
themeName: 'light',
styles: themes.light,
theme: themes.light,
breakpoints: {
active: undefined,
gtMobile: false,
@@ -73,7 +72,7 @@ export function ThemeProvider({
value={React.useMemo(
() => ({
themeName: themeName,
styles: theme,
theme: theme,
breakpoints,
}),
[theme, themeName, breakpoints],
@@ -83,8 +82,8 @@ export function ThemeProvider({
)
}
export function useAlf() {
return React.useContext(Context)
export function useTheme() {
return React.useContext(Context).theme
}
export function useBreakpoints() {
src/alf/themes.ts
+35 -32
View File
@@ -1,5 +1,4 @@
import * as tokens from '#/alf/tokens'
import {styles as sharedStyles} from '#/alf/styles'
export type ThemeName = 'light' | 'dark'
export type Theme = typeof light
@@ -47,37 +46,41 @@ export const darkPalette: Palette = {
} as const
export const light = {
...sharedStyles,
color: Object.keys(lightPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
color: lightPalette[k],
}
return acc
}, {} as Record<keyof Palette, {color: string}>),
backgroundColor: Object.keys(lightPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
backgroundColor: lightPalette[k],
}
return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>),
palette: lightPalette,
atoms: {
color: Object.keys(lightPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
color: lightPalette[k],
}
return acc
}, {} as Record<keyof Palette, {color: string}>),
backgroundColor: Object.keys(lightPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
backgroundColor: lightPalette[k],
}
return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>),
},
} as const
export const dark = {
...sharedStyles,
color: Object.keys(darkPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
color: darkPalette[k],
}
return acc
}, {} as Record<keyof Palette, {color: string}>),
backgroundColor: Object.keys(darkPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
backgroundColor: darkPalette[k],
}
return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>),
export const dark: Theme = {
palette: darkPalette,
atoms: {
color: Object.keys(darkPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
color: darkPalette[k],
}
return acc
}, {} as Record<keyof Palette, {color: string}>),
backgroundColor: Object.keys(darkPalette).reduce((acc, key) => {
const k = key as keyof Palette
acc[k] = {
backgroundColor: darkPalette[k],
}
return acc
}, {} as Record<keyof Palette, {backgroundColor: string}>),
},
} as const
src/view/com/Button.tsx
+25 -26
View File
@@ -1,6 +1,7 @@
import React from 'react'
import {Pressable, Text, PressableProps, TextProps} from 'react-native'
import {useAlf, tokens} from '#/alf'
import * as tokens from '#/alf/tokens'
import {useTheme, atoms} from '#/alf'
export type ButtonType =
| 'primary'
@@ -33,18 +34,18 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
export type ButtonTextProps = TextProps & VariantProps
export function Button({children, style, type, size, ...rest}: ButtonProps) {
const {styles} = useAlf()
const t = useTheme()
const {baseStyles, hoverStyles} = React.useMemo(() => {
const baseStyles = []
const hoverStyles = []
switch (type) {
case 'primary':
baseStyles.push(styles.backgroundColor.primary)
baseStyles.push(t.atoms.backgroundColor.primary)
break
case 'secondary':
baseStyles.push(styles.backgroundColor.l2)
hoverStyles.push(styles.backgroundColor.l1)
baseStyles.push(t.atoms.backgroundColor.l2)
hoverStyles.push(t.atoms.backgroundColor.l1)
break
default:
}
@@ -52,18 +53,18 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
switch (size) {
case 'large':
baseStyles.push(
styles.padding.py.m,
styles.padding.px.xl,
styles.radius.m,
styles.flex.gap.s,
atoms.padding.py.m,
atoms.padding.px.xl,
atoms.radius.m,
atoms.flex.gap.s,
)
break
case 'small':
baseStyles.push(
styles.padding.py.s,
styles.padding.px.m,
styles.radius.s,
styles.flex.gap.xs,
atoms.padding.py.s,
atoms.padding.px.m,
atoms.radius.s,
atoms.flex.gap.xs,
)
break
default:
@@ -73,7 +74,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
baseStyles,
hoverStyles,
}
}, [type, size, styles])
}, [type, size, t])
const [state, setState] = React.useState({
pressed: false,
@@ -122,8 +123,8 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
<Pressable
{...rest}
style={state => [
styles.flex.row,
styles.flex.alignCenter,
atoms.flex.row,
atoms.flex.alignCenter,
...baseStyles,
...(state.hovered ? hoverStyles : []),
typeof style === 'function' ? style(state) : style,
@@ -154,7 +155,7 @@ export function ButtonText({
size,
...rest
}: ButtonTextProps) {
const {styles} = useAlf()
const t = useTheme()
const textStyles = React.useMemo(() => {
const base = []
@@ -163,33 +164,31 @@ export function ButtonText({
base.push({color: tokens.color.white})
break
case 'secondary':
base.push(styles.color.l5)
base.push(t.atoms.color.l5)
break
default:
}
switch (size) {
case 'small':
base.push(styles.font.s, {paddingBottom: 1})
base.push(atoms.font.s, {paddingBottom: 1})
break
case 'large':
base.push(styles.font.m, {paddingBottom: 1})
base.push(atoms.font.m, {paddingBottom: 1})
break
default:
}
return base
}, [type, size, styles])
console.log(textStyles)
}, [type, size, t])
return (
<Text
{...rest}
style={[
styles.flex.one,
styles.font.semi,
styles.font.center,
atoms.flex.one,
atoms.font.semi,
atoms.font.center,
...textStyles,
style,
]}>
src/view/com/Typography.tsx
+15 -15
View File
@@ -1,14 +1,14 @@
import React from 'react'
import {Text as RNText, TextProps} from 'react-native'
import {useAlf, web} from '#/alf'
import {useTheme, atoms, web} from '#/alf'
export function Text({style, ...rest}: TextProps) {
const {styles} = useAlf()
return <RNText style={[styles.font.s, styles.color.l7, style]} {...rest} />
const t = useTheme()
return <RNText style={[atoms.font.s, t.atoms.color.l7, style]} {...rest} />
}
export function H1({style, ...rest}: TextProps) {
const {styles} = useAlf()
const t = useTheme()
const attr =
web({
role: 'heading',
@@ -18,13 +18,13 @@ export function H1({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[styles.font.xxl, styles.font.bold, styles.color.l7, style]}
style={[atoms.font.xxl, atoms.font.bold, t.atoms.color.l7, style]}
/>
)
}
export function H2({style, ...rest}: TextProps) {
const {styles} = useAlf()
const t = useTheme()
const attr =
web({
role: 'heading',
@@ -34,13 +34,13 @@ export function H2({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[styles.font.l, styles.font.bold, styles.color.l7, style]}
style={[atoms.font.l, atoms.font.bold, t.atoms.color.l7, style]}
/>
)
}
export function H3({style, ...rest}: TextProps) {
const {styles} = useAlf()
const t = useTheme()
const attr =
web({
role: 'heading',
@@ -50,13 +50,13 @@ export function H3({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[styles.font.m, styles.font.bold, styles.color.l7, style]}
style={[atoms.font.m, atoms.font.bold, t.atoms.color.l7, style]}
/>
)
}
export function H4({style, ...rest}: TextProps) {
const {styles} = useAlf()
const t = useTheme()
const attr =
web({
role: 'heading',
@@ -66,13 +66,13 @@ export function H4({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[styles.font.s, styles.font.bold, styles.color.l7, style]}
style={[atoms.font.s, atoms.font.bold, t.atoms.color.l7, style]}
/>
)
}
export function H5({style, ...rest}: TextProps) {
const {styles} = useAlf()
const t = useTheme()
const attr =
web({
role: 'heading',
@@ -82,13 +82,13 @@ export function H5({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[styles.font.xs, styles.font.bold, styles.color.l7, style]}
style={[atoms.font.xs, atoms.font.bold, t.atoms.color.l7, style]}
/>
)
}
export function H6({style, ...rest}: TextProps) {
const {styles} = useAlf()
const t = useTheme()
const attr =
web({
role: 'heading',
@@ -98,7 +98,7 @@ export function H6({style, ...rest}: TextProps) {
<RNText
{...attr}
{...rest}
style={[styles.font.xxs, styles.font.bold, styles.color.l7, style]}
style={[atoms.font.xxs, atoms.font.bold, t.atoms.color.l7, style]}
/>
)
}
src/view/screens/DebugNew.tsx
+89 -89
View File
@@ -4,16 +4,15 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSetColorMode} from '#/state/shell'
import {useAlf, ThemeProvider as Alf} from '#/alf'
import {atoms, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
import {Button, ButtonText} from '#/view/com/Button'
import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
function ThemeSelector() {
const setColorMode = useSetColorMode()
const {styles} = useAlf()
return (
<View style={[styles.flex.row, styles.flex.gap.m]}>
<View style={[atoms.flex.row, atoms.flex.gap.m]}>
<Button
type="secondary"
size="small"
@@ -37,20 +36,21 @@ function ThemeSelector() {
}
function BreakpointDebugger() {
const {styles, breakpoints} = useAlf()
const t = useTheme()
const breakpoints = useBreakpoints()
return (
<View>
<H3 style={[styles.padding.pb.m]}>Breakpoint Debugger</H3>
<Text style={[styles.padding.pb.m]}>
<H3 style={[atoms.padding.pb.m]}>Breakpoint Debugger</H3>
<Text style={[atoms.padding.pb.m]}>
Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
{breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
{breakpoints.gtTablet && <Text>desktop</Text>}
</Text>
<Text
style={[
styles.padding.pa.m,
styles.backgroundColor.l1,
atoms.padding.pa.m,
t.atoms.backgroundColor.l1,
{fontFamily: 'monospace'},
]}>
{JSON.stringify(breakpoints, null, 2)}
@@ -60,37 +60,37 @@ function BreakpointDebugger() {
}
function ThemedSection() {
const {styles} = useAlf()
const t = useTheme()
return (
<View style={[styles.backgroundColor.l0, styles.padding.pa.m]}>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>
<View style={[t.atoms.backgroundColor.l0, atoms.padding.pa.m]}>
<H3 style={[atoms.padding.pb.m, atoms.font.bold]}>
Colors (this theme is always light)
</H3>
<View style={[styles.flex.row, styles.flex.gap.m]}>
<View style={[atoms.flex.row, atoms.flex.gap.m]}>
<View
style={[styles.flex.one, styles.backgroundColor.l0, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l0, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l1, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l1, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l2, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l2, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l3, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l3, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l4, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l4, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l5, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l5, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l6, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l6, {height: 60}]}
/>
<View
style={[styles.flex.one, styles.backgroundColor.l7, {height: 60}]}
style={[atoms.flex.one, t.atoms.backgroundColor.l7, {height: 60}]}
/>
</View>
</View>
@@ -98,15 +98,15 @@ function ThemedSection() {
}
export function DebugScreen() {
const {styles} = useAlf()
const t = useTheme()
return (
<ScrollView>
<CenteredView style={[styles.backgroundColor.l0]}>
<CenteredView style={[t.atoms.backgroundColor.l0]}>
<View
style={[
styles.padding.pa.xl,
styles.flex.gap.xxl,
atoms.padding.pa.xl,
atoms.flex.gap.xxl,
{paddingBottom: 200},
]}>
<ThemeSelector />
@@ -114,61 +114,61 @@ export function DebugScreen() {
<BreakpointDebugger />
<View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Colors</H3>
<View style={[styles.flex.row, styles.flex.gap.m]}>
<H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Colors</H3>
<View style={[atoms.flex.row, atoms.flex.gap.m]}>
<View
style={[
styles.flex.one,
styles.backgroundColor.l0,
atoms.flex.one,
t.atoms.backgroundColor.l0,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l1,
atoms.flex.one,
t.atoms.backgroundColor.l1,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l2,
atoms.flex.one,
t.atoms.backgroundColor.l2,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l3,
atoms.flex.one,
t.atoms.backgroundColor.l3,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l4,
atoms.flex.one,
t.atoms.backgroundColor.l4,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l5,
atoms.flex.one,
t.atoms.backgroundColor.l5,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l6,
atoms.flex.one,
t.atoms.backgroundColor.l6,
{height: 60},
]}
/>
<View
style={[
styles.flex.one,
styles.backgroundColor.l7,
atoms.flex.one,
t.atoms.backgroundColor.l7,
{height: 60},
]}
/>
@@ -176,76 +176,76 @@ export function DebugScreen() {
</View>
<View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Spacing</H3>
<H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Spacing</H3>
<View style={[styles.flex.gap.m]}>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.gap.m]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xxs (2px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.xxs,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.xxs,
t.atoms.backgroundColor.l3,
]}
/>
</View>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xs (4px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.xs,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.xs,
t.atoms.backgroundColor.l3,
]}
/>
</View>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>s (8px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.s,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.s,
t.atoms.backgroundColor.l3,
]}
/>
</View>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>m (12px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.m,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.m,
t.atoms.backgroundColor.l3,
]}
/>
</View>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>l (18px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.l,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.l,
t.atoms.backgroundColor.l3,
]}
/>
</View>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xl (24px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.xl,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.xl,
t.atoms.backgroundColor.l3,
]}
/>
</View>
<View style={[styles.flex.row, styles.flex.alignCenter]}>
<View style={[atoms.flex.row, atoms.flex.alignCenter]}>
<Text style={{width: 80}}>xxl (32px)</Text>
<View
style={[
styles.flex.one,
styles.padding.pt.xxl,
styles.backgroundColor.l3,
atoms.flex.one,
atoms.padding.pt.xxl,
t.atoms.backgroundColor.l3,
]}
/>
</View>
@@ -253,13 +253,13 @@ export function DebugScreen() {
</View>
<View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Typography</H3>
<H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Typography</H3>
<View
style={[
styles.flex.gap.m,
styles.padding.pa.m,
styles.backgroundColor.l1,
atoms.flex.gap.m,
atoms.padding.pa.m,
t.atoms.backgroundColor.l1,
]}>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
@@ -268,34 +268,34 @@ export function DebugScreen() {
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<Text style={[styles.font.xxl]}>H1 Size Text</Text>
<Text style={[styles.font.xl]}>H2 Size Text</Text>
<Text style={[styles.font.l]}>H3 Size Text</Text>
<Text style={[styles.font.m]}>H4 Size Text</Text>
<Text style={[styles.font.s]}>H5 Size Text</Text>
<Text style={[styles.font.xs]}>H6 Size Text</Text>
<Text style={[styles.font.xxs]}>Very Small Size Text</Text>
<Text style={[atoms.font.xxl]}>H1 Size Text</Text>
<Text style={[atoms.font.xl]}>H2 Size Text</Text>
<Text style={[atoms.font.l]}>H3 Size Text</Text>
<Text style={[atoms.font.m]}>H4 Size Text</Text>
<Text style={[atoms.font.s]}>H5 Size Text</Text>
<Text style={[atoms.font.xs]}>H6 Size Text</Text>
<Text style={[atoms.font.xxs]}>Very Small Size Text</Text>
</View>
</View>
<View>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Breakpoints</H3>
<H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Breakpoints</H3>
</View>
<Alf theme="light">
<ThemedSection />
</Alf>
<View style={[styles.flex.gap.m, styles.flex.alignStart]}>
<H3 style={[styles.padding.pb.m, styles.font.bold]}>Buttons</H3>
<View style={[atoms.flex.gap.m, atoms.flex.alignStart]}>
<H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Buttons</H3>
<Button>
{({state}) => (
<View
style={[
styles.padding.pa.m,
styles.radius.round,
styles.backgroundColor.l2,
atoms.padding.pa.m,
atoms.radius.round,
t.atoms.backgroundColor.l2,
]}>
<Text>Unstyled button, state: {JSON.stringify(state)}</Text>
</View>