From 3e11c11e596b0cec6c02a3f90acdeb95186c7704 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 21 Dec 2023 16:58:27 -0600 Subject: [PATCH] Better naming, better code --- src/alf/README.md | 37 +++---- src/alf/{styles.ts => atoms.ts} | 2 +- src/alf/index.tsx | 13 ++- src/alf/themes.ts | 67 ++++++------ src/view/com/Button.tsx | 51 +++++---- src/view/com/Typography.tsx | 30 +++--- src/view/screens/DebugNew.tsx | 178 ++++++++++++++++---------------- 7 files changed, 184 insertions(+), 194 deletions(-) rename src/alf/{styles.ts => atoms.ts} (99%) diff --git a/src/alf/README.md b/src/alf/README.md index 175b7d2b92..81a2096ffe 100644 --- a/src/alf/README.md +++ b/src/alf/README.md @@ -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 ( - -

I'm the blue color

- - ) -} -``` - -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 ( - -

I'm the blue color

+ +

+ I'm the blue color +

+ + {breakpoints.gtMobile && ( + Only visible on tablet and above! + )} ) } diff --git a/src/alf/styles.ts b/src/alf/atoms.ts similarity index 99% rename from src/alf/styles.ts rename to src/alf/atoms.ts index abf6123449..651ba0fc9e 100644 --- a/src/alf/styles.ts +++ b/src/alf/atoms.ts @@ -252,7 +252,7 @@ const margin = Object.keys(tokens.space).reduce( }, ) -export const styles = { +export const atoms = { radius, padding, margin, diff --git a/src/alf/index.tsx b/src/alf/index.tsx index c8ca3d0391..ce8f5e967f 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -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() { diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 51c2939b65..31d4ee2d0f 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -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), - backgroundColor: Object.keys(lightPalette).reduce((acc, key) => { - const k = key as keyof Palette - acc[k] = { - backgroundColor: lightPalette[k], - } - return acc - }, {} as Record), + 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), + backgroundColor: Object.keys(lightPalette).reduce((acc, key) => { + const k = key as keyof Palette + acc[k] = { + backgroundColor: lightPalette[k], + } + return acc + }, {} as Record), + }, } 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), - backgroundColor: Object.keys(darkPalette).reduce((acc, key) => { - const k = key as keyof Palette - acc[k] = { - backgroundColor: darkPalette[k], - } - return acc - }, {} as Record), +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), + backgroundColor: Object.keys(darkPalette).reduce((acc, key) => { + const k = key as keyof Palette + acc[k] = { + backgroundColor: darkPalette[k], + } + return acc + }, {} as Record), + }, } as const diff --git a/src/view/com/Button.tsx b/src/view/com/Button.tsx index 569743943f..974fb64837 100644 --- a/src/view/com/Button.tsx +++ b/src/view/com/Button.tsx @@ -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 & 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) { [ - 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 ( diff --git a/src/view/com/Typography.tsx b/src/view/com/Typography.tsx index c2a8139a8a..ffb35e3cd4 100644 --- a/src/view/com/Typography.tsx +++ b/src/view/com/Typography.tsx @@ -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 + const t = useTheme() + return } 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) { ) } 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) { ) } 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) { ) } 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) { ) } 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) { ) } 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) { ) } diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx index e64f5d596e..d6051a6e26 100644 --- a/src/view/screens/DebugNew.tsx +++ b/src/view/screens/DebugNew.tsx @@ -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 ( - +