forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Spring cleaning (#7640)
* delete breakpoint layouts
* delete empty file
* delete legacy radio buttons
* delete selectable button
* rm radio buttons from debug
* delete storage.ts
* delete type-assertions.ts
authored by
Samuel Newman
and committed by
GitHub
fa8607b8
23e62b18
+1
-421
-52
src/lib/storage.ts
-52
src/lib/storage.ts
···
1
-
import AsyncStorage from '@react-native-async-storage/async-storage'
2
-
3
-
export async function loadString(key: string): Promise<string | null> {
4
-
try {
5
-
return await AsyncStorage.getItem(key)
6
-
} catch {
7
-
// not sure why this would fail... even reading the RN docs I'm unclear
8
-
return null
9
-
}
10
-
}
11
-
12
-
export async function saveString(key: string, value: string): Promise<boolean> {
13
-
try {
14
-
await AsyncStorage.setItem(key, value)
15
-
return true
16
-
} catch {
17
-
return false
18
-
}
19
-
}
20
-
21
-
export async function load(key: string): Promise<any | null> {
22
-
try {
23
-
const str = await AsyncStorage.getItem(key)
24
-
if (typeof str !== 'string') {
25
-
return null
26
-
}
27
-
return JSON.parse(str)
28
-
} catch {
29
-
return null
30
-
}
31
-
}
32
-
33
-
export async function save(key: string, value: any): Promise<boolean> {
34
-
try {
35
-
await AsyncStorage.setItem(key, JSON.stringify(value))
36
-
return true
37
-
} catch {
38
-
return false
39
-
}
40
-
}
41
-
42
-
export async function remove(key: string): Promise<void> {
43
-
try {
44
-
await AsyncStorage.removeItem(key)
45
-
} catch {}
46
-
}
47
-
48
-
export async function clear(): Promise<void> {
49
-
try {
50
-
await AsyncStorage.clear()
51
-
} catch {}
52
-
}
-3
src/lib/type-assertions.ts
-3
src/lib/type-assertions.ts
src/screens/StarterPack/Wizard/StepFinished.tsx
src/screens/StarterPack/Wizard/StepFinished.tsx
This is a binary file and will not be displayed.
-164
src/view/com/util/forms/RadioButton.tsx
-164
src/view/com/util/forms/RadioButton.tsx
···
1
-
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
2
-
3
-
import {choose} from '#/lib/functions'
4
-
import {useTheme} from '#/lib/ThemeContext'
5
-
import {Text} from '../text/Text'
6
-
import {Button, ButtonType} from './Button'
7
-
8
-
export function RadioButton({
9
-
testID,
10
-
type = 'default-light',
11
-
label,
12
-
isSelected,
13
-
style,
14
-
onPress,
15
-
}: {
16
-
testID?: string
17
-
type?: ButtonType
18
-
label: string | JSX.Element
19
-
isSelected: boolean
20
-
style?: StyleProp<ViewStyle>
21
-
onPress: () => void
22
-
}) {
23
-
const theme = useTheme()
24
-
const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
25
-
primary: {
26
-
borderColor: theme.palette.primary.text,
27
-
},
28
-
secondary: {
29
-
borderColor: theme.palette.secondary.text,
30
-
},
31
-
inverted: {
32
-
borderColor: theme.palette.inverted.text,
33
-
},
34
-
'primary-outline': {
35
-
borderColor: theme.palette.primary.border,
36
-
},
37
-
'secondary-outline': {
38
-
borderColor: theme.palette.secondary.border,
39
-
},
40
-
'primary-light': {
41
-
borderColor: theme.palette.primary.border,
42
-
},
43
-
'secondary-light': {
44
-
borderColor: theme.palette.secondary.border,
45
-
},
46
-
default: {
47
-
borderColor: theme.palette.default.border,
48
-
},
49
-
'default-light': {
50
-
borderColor: theme.palette.default.borderDark,
51
-
},
52
-
})
53
-
const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
54
-
type,
55
-
{
56
-
primary: {
57
-
backgroundColor: theme.palette.primary.text,
58
-
},
59
-
secondary: {
60
-
backgroundColor: theme.palette.secondary.text,
61
-
},
62
-
inverted: {
63
-
backgroundColor: theme.palette.inverted.text,
64
-
},
65
-
'primary-outline': {
66
-
backgroundColor: theme.palette.primary.background,
67
-
},
68
-
'secondary-outline': {
69
-
backgroundColor: theme.palette.secondary.background,
70
-
},
71
-
'primary-light': {
72
-
backgroundColor: theme.palette.primary.background,
73
-
},
74
-
'secondary-light': {
75
-
backgroundColor: theme.palette.secondary.background,
76
-
},
77
-
default: {
78
-
backgroundColor: theme.palette.primary.background,
79
-
},
80
-
'default-light': {
81
-
backgroundColor: theme.palette.primary.background,
82
-
},
83
-
},
84
-
)
85
-
const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
86
-
primary: {
87
-
color: theme.palette.primary.text,
88
-
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
89
-
},
90
-
secondary: {
91
-
color: theme.palette.secondary.text,
92
-
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
93
-
},
94
-
inverted: {
95
-
color: theme.palette.inverted.text,
96
-
fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
97
-
},
98
-
'primary-outline': {
99
-
color: theme.palette.primary.textInverted,
100
-
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
101
-
},
102
-
'secondary-outline': {
103
-
color: theme.palette.secondary.textInverted,
104
-
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
105
-
},
106
-
'primary-light': {
107
-
color: theme.palette.primary.textInverted,
108
-
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
109
-
},
110
-
'secondary-light': {
111
-
color: theme.palette.secondary.textInverted,
112
-
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
113
-
},
114
-
default: {
115
-
color: theme.palette.default.text,
116
-
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
117
-
},
118
-
'default-light': {
119
-
color: theme.palette.default.text,
120
-
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
121
-
},
122
-
})
123
-
return (
124
-
<Button testID={testID} type={type} onPress={onPress} style={style}>
125
-
<View style={styles.outer}>
126
-
<View style={[circleStyle, styles.circle]}>
127
-
{isSelected ? (
128
-
<View style={[circleFillStyle, styles.circleFill]} />
129
-
) : undefined}
130
-
</View>
131
-
{typeof label === 'string' ? (
132
-
<Text type="button" style={[labelStyle, styles.label]}>
133
-
{label}
134
-
</Text>
135
-
) : (
136
-
<View style={styles.label}>{label}</View>
137
-
)}
138
-
</View>
139
-
</Button>
140
-
)
141
-
}
142
-
143
-
const styles = StyleSheet.create({
144
-
outer: {
145
-
flexDirection: 'row',
146
-
alignItems: 'center',
147
-
},
148
-
circle: {
149
-
width: 26,
150
-
height: 26,
151
-
borderRadius: 15,
152
-
padding: 4,
153
-
borderWidth: 1,
154
-
marginRight: 10,
155
-
},
156
-
circleFill: {
157
-
width: 16,
158
-
height: 16,
159
-
borderRadius: 10,
160
-
},
161
-
label: {
162
-
flex: 1,
163
-
},
164
-
})
-46
src/view/com/util/forms/RadioGroup.tsx
-46
src/view/com/util/forms/RadioGroup.tsx
···
1
-
import {useState} from 'react'
2
-
import {View} from 'react-native'
3
-
4
-
import {s} from '#/lib/styles'
5
-
import {ButtonType} from './Button'
6
-
import {RadioButton} from './RadioButton'
7
-
8
-
export interface RadioGroupItem {
9
-
label: string | JSX.Element
10
-
key: string
11
-
}
12
-
13
-
export function RadioGroup({
14
-
testID,
15
-
type,
16
-
items,
17
-
initialSelection = '',
18
-
onSelect,
19
-
}: {
20
-
testID?: string
21
-
type?: ButtonType
22
-
items: RadioGroupItem[]
23
-
initialSelection?: string
24
-
onSelect: (key: string) => void
25
-
}) {
26
-
const [selection, setSelection] = useState<string>(initialSelection)
27
-
const onSelectInner = (key: string) => {
28
-
setSelection(key)
29
-
onSelect(key)
30
-
}
31
-
return (
32
-
<View>
33
-
{items.map((item, i) => (
34
-
<RadioButton
35
-
key={item.key}
36
-
testID={testID ? `${testID}-${item.key}` : undefined}
37
-
style={i !== 0 ? s.mt2 : undefined}
38
-
type={type}
39
-
label={item.label}
40
-
isSelected={item.key === selection}
41
-
onPress={() => onSelectInner(item.key)}
42
-
/>
43
-
))}
44
-
</View>
45
-
)
46
-
}
-75
src/view/com/util/forms/SelectableBtn.tsx
-75
src/view/com/util/forms/SelectableBtn.tsx
···
1
-
import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native'
2
-
3
-
import {usePalette} from '#/lib/hooks/usePalette'
4
-
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
5
-
import {Text} from '../text/Text'
6
-
7
-
interface SelectableBtnProps {
8
-
testID?: string
9
-
selected: boolean
10
-
label: string
11
-
left?: boolean
12
-
right?: boolean
13
-
onSelect: () => void
14
-
accessibilityHint?: string
15
-
style?: StyleProp<ViewStyle>
16
-
}
17
-
18
-
export function SelectableBtn({
19
-
testID,
20
-
selected,
21
-
label,
22
-
left,
23
-
right,
24
-
onSelect,
25
-
accessibilityHint,
26
-
style,
27
-
}: SelectableBtnProps) {
28
-
const pal = usePalette('default')
29
-
const palPrimary = usePalette('inverted')
30
-
const needsWidthStyles = !style || !('width' in style || 'flex' in style)
31
-
const {isMobile} = useWebMediaQueries()
32
-
return (
33
-
<Pressable
34
-
testID={testID}
35
-
style={[
36
-
styles.btn,
37
-
needsWidthStyles && {
38
-
flex: isMobile ? 1 : undefined,
39
-
width: !isMobile ? 100 : undefined,
40
-
},
41
-
left && styles.btnLeft,
42
-
right && styles.btnRight,
43
-
pal.border,
44
-
selected ? palPrimary.view : pal.view,
45
-
style,
46
-
]}
47
-
onPress={onSelect}
48
-
accessibilityRole="button"
49
-
accessibilityLabel={label}
50
-
accessibilityHint={accessibilityHint}>
51
-
<Text style={selected ? palPrimary.text : pal.text}>{label}</Text>
52
-
</Pressable>
53
-
)
54
-
}
55
-
56
-
const styles = StyleSheet.create({
57
-
btn: {
58
-
flexDirection: 'row',
59
-
justifyContent: 'center',
60
-
flexGrow: 1,
61
-
borderWidth: 1,
62
-
borderLeftWidth: 0,
63
-
paddingHorizontal: 10,
64
-
paddingVertical: 10,
65
-
},
66
-
btnLeft: {
67
-
borderTopLeftRadius: 8,
68
-
borderBottomLeftRadius: 8,
69
-
borderLeftWidth: 1,
70
-
},
71
-
btnRight: {
72
-
borderTopRightRadius: 8,
73
-
borderBottomRightRadius: 8,
74
-
},
75
-
})
-11
src/view/com/util/layouts/Breakpoints.tsx
-11
src/view/com/util/layouts/Breakpoints.tsx
···
1
-
import React from 'react'
2
-
3
-
export const Desktop = ({}: React.PropsWithChildren<{}>) => null
4
-
export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
5
-
export const Tablet = ({}: React.PropsWithChildren<{}>) => null
6
-
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
7
-
<>{children}</>
8
-
)
9
-
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
10
-
<>{children}</>
11
-
)
-20
src/view/com/util/layouts/Breakpoints.web.tsx
-20
src/view/com/util/layouts/Breakpoints.web.tsx
···
1
-
import React from 'react'
2
-
import MediaQuery from 'react-responsive'
3
-
4
-
export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
5
-
<MediaQuery minWidth={1300}>{children}</MediaQuery>
6
-
)
7
-
export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
8
-
<MediaQuery minWidth={800}>{children}</MediaQuery>
9
-
)
10
-
export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
11
-
<MediaQuery minWidth={800} maxWidth={1300 - 1}>
12
-
{children}
13
-
</MediaQuery>
14
-
)
15
-
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
16
-
<MediaQuery maxWidth={1300 - 1}>{children}</MediaQuery>
17
-
)
18
-
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
19
-
<MediaQuery maxWidth={800 - 1}>{children}</MediaQuery>
20
-
)
-21
src/view/com/util/layouts/withBreakpoints.tsx
-21
src/view/com/util/layouts/withBreakpoints.tsx
···
1
-
import React from 'react'
2
-
3
-
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
4
-
import {isNative} from '#/platform/detection'
5
-
6
-
export const withBreakpoints = <P extends object>(
7
-
Mobile: React.ComponentType<P>,
8
-
Tablet: React.ComponentType<P>,
9
-
Desktop: React.ComponentType<P>,
10
-
): React.FC<P> =>
11
-
function WithBreakpoints(props: P) {
12
-
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
13
-
14
-
if (isMobile || isNative) {
15
-
return <Mobile {...props} />
16
-
}
17
-
if (isTabletOrMobile) {
18
-
return <Tablet {...props} />
19
-
}
20
-
return <Desktop {...props} />
21
-
}
+1
-29
src/view/screens/Debug.tsx
+1
-29
src/view/screens/Debug.tsx
···
10
10
import {EmptyState} from '#/view/com/util/EmptyState'
11
11
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
12
12
import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
13
-
import {Button, ButtonType} from '#/view/com/util/forms/Button'
13
+
import {Button} from '#/view/com/util/forms/Button'
14
14
import {
15
15
DropdownButton,
16
16
DropdownItem,
17
17
} from '#/view/com/util/forms/DropdownButton'
18
-
import {RadioGroup} from '#/view/com/util/forms/RadioGroup'
19
18
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
20
19
import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder'
21
20
import {Text} from '#/view/com/util/text/Text'
···
139
138
<DropdownButtonsView />
140
139
<Heading label="Toggle Buttons" />
141
140
<ToggleButtonsView />
142
-
<Heading label="Radio Buttons" />
143
-
<RadioButtonsView />
144
141
<View style={s.footerSpacer} />
145
142
</ScrollView>
146
143
)
···
503
500
</View>
504
501
)
505
502
}
506
-
507
-
const RADIO_BUTTON_ITEMS = [
508
-
{key: 'default-light', label: 'Default Light'},
509
-
{key: 'primary', label: 'Primary'},
510
-
{key: 'secondary', label: 'Secondary'},
511
-
{key: 'inverted', label: 'Inverted'},
512
-
{key: 'primary-outline', label: 'Primary Outline'},
513
-
{key: 'secondary-outline', label: 'Secondary Outline'},
514
-
{key: 'primary-light', label: 'Primary Light'},
515
-
{key: 'secondary-light', label: 'Secondary Light'},
516
-
]
517
-
function RadioButtonsView() {
518
-
const defaultPal = usePalette('default')
519
-
const [rgType, setRgType] = React.useState<ButtonType>('default-light')
520
-
return (
521
-
<View style={[defaultPal.view]}>
522
-
<RadioGroup
523
-
type={rgType}
524
-
items={RADIO_BUTTON_ITEMS}
525
-
initialSelection="default-light"
526
-
onSelect={v => setRgType(v as ButtonType)}
527
-
/>
528
-
</View>
529
-
)
530
-
}