From fa8607b861e0719d76778aa14af0745313640e33 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 3 Feb 2025 14:18:13 -0800 Subject: [PATCH] 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 --- src/lib/storage.ts | 52 ------ src/lib/type-assertions.ts | 3 - .../StarterPack/Wizard/StepFinished.tsx | 0 src/view/com/util/forms/RadioButton.tsx | 164 ------------------ src/view/com/util/forms/RadioGroup.tsx | 46 ----- src/view/com/util/forms/SelectableBtn.tsx | 75 -------- src/view/com/util/layouts/Breakpoints.tsx | 11 -- src/view/com/util/layouts/Breakpoints.web.tsx | 20 --- src/view/com/util/layouts/withBreakpoints.tsx | 21 --- src/view/screens/Debug.tsx | 30 +--- 10 files changed, 1 insertion(+), 421 deletions(-) delete mode 100644 src/lib/storage.ts delete mode 100644 src/lib/type-assertions.ts delete mode 100644 src/screens/StarterPack/Wizard/StepFinished.tsx delete mode 100644 src/view/com/util/forms/RadioButton.tsx delete mode 100644 src/view/com/util/forms/RadioGroup.tsx delete mode 100644 src/view/com/util/forms/SelectableBtn.tsx delete mode 100644 src/view/com/util/layouts/Breakpoints.tsx delete mode 100644 src/view/com/util/layouts/Breakpoints.web.tsx delete mode 100644 src/view/com/util/layouts/withBreakpoints.tsx diff --git a/src/lib/storage.ts b/src/lib/storage.ts deleted file mode 100644 index dc5fb620fd..0000000000 --- a/src/lib/storage.ts +++ /dev/null @@ -1,52 +0,0 @@ -import AsyncStorage from '@react-native-async-storage/async-storage' - -export async function loadString(key: string): Promise { - try { - return await AsyncStorage.getItem(key) - } catch { - // not sure why this would fail... even reading the RN docs I'm unclear - return null - } -} - -export async function saveString(key: string, value: string): Promise { - try { - await AsyncStorage.setItem(key, value) - return true - } catch { - return false - } -} - -export async function load(key: string): Promise { - try { - const str = await AsyncStorage.getItem(key) - if (typeof str !== 'string') { - return null - } - return JSON.parse(str) - } catch { - return null - } -} - -export async function save(key: string, value: any): Promise { - try { - await AsyncStorage.setItem(key, JSON.stringify(value)) - return true - } catch { - return false - } -} - -export async function remove(key: string): Promise { - try { - await AsyncStorage.removeItem(key) - } catch {} -} - -export async function clear(): Promise { - try { - await AsyncStorage.clear() - } catch {} -} diff --git a/src/lib/type-assertions.ts b/src/lib/type-assertions.ts deleted file mode 100644 index 6b5db51247..0000000000 --- a/src/lib/type-assertions.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const getKeys = Object.keys as ( - obj: T, -) => Array diff --git a/src/screens/StarterPack/Wizard/StepFinished.tsx b/src/screens/StarterPack/Wizard/StepFinished.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx deleted file mode 100644 index 7cf0f2d731..0000000000 --- a/src/view/com/util/forms/RadioButton.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' - -import {choose} from '#/lib/functions' -import {useTheme} from '#/lib/ThemeContext' -import {Text} from '../text/Text' -import {Button, ButtonType} from './Button' - -export function RadioButton({ - testID, - type = 'default-light', - label, - isSelected, - style, - onPress, -}: { - testID?: string - type?: ButtonType - label: string | JSX.Element - isSelected: boolean - style?: StyleProp - onPress: () => void -}) { - const theme = useTheme() - const circleStyle = choose>(type, { - primary: { - borderColor: theme.palette.primary.text, - }, - secondary: { - borderColor: theme.palette.secondary.text, - }, - inverted: { - borderColor: theme.palette.inverted.text, - }, - 'primary-outline': { - borderColor: theme.palette.primary.border, - }, - 'secondary-outline': { - borderColor: theme.palette.secondary.border, - }, - 'primary-light': { - borderColor: theme.palette.primary.border, - }, - 'secondary-light': { - borderColor: theme.palette.secondary.border, - }, - default: { - borderColor: theme.palette.default.border, - }, - 'default-light': { - borderColor: theme.palette.default.borderDark, - }, - }) - const circleFillStyle = choose>( - type, - { - primary: { - backgroundColor: theme.palette.primary.text, - }, - secondary: { - backgroundColor: theme.palette.secondary.text, - }, - inverted: { - backgroundColor: theme.palette.inverted.text, - }, - 'primary-outline': { - backgroundColor: theme.palette.primary.background, - }, - 'secondary-outline': { - backgroundColor: theme.palette.secondary.background, - }, - 'primary-light': { - backgroundColor: theme.palette.primary.background, - }, - 'secondary-light': { - backgroundColor: theme.palette.secondary.background, - }, - default: { - backgroundColor: theme.palette.primary.background, - }, - 'default-light': { - backgroundColor: theme.palette.primary.background, - }, - }, - ) - const labelStyle = choose>(type, { - primary: { - color: theme.palette.primary.text, - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, - }, - secondary: { - color: theme.palette.secondary.text, - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, - }, - inverted: { - color: theme.palette.inverted.text, - fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined, - }, - 'primary-outline': { - color: theme.palette.primary.textInverted, - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, - }, - 'secondary-outline': { - color: theme.palette.secondary.textInverted, - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, - }, - 'primary-light': { - color: theme.palette.primary.textInverted, - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, - }, - 'secondary-light': { - color: theme.palette.secondary.textInverted, - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, - }, - default: { - color: theme.palette.default.text, - fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, - }, - 'default-light': { - color: theme.palette.default.text, - fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, - }, - }) - return ( - - ) -} - -const styles = StyleSheet.create({ - outer: { - flexDirection: 'row', - alignItems: 'center', - }, - circle: { - width: 26, - height: 26, - borderRadius: 15, - padding: 4, - borderWidth: 1, - marginRight: 10, - }, - circleFill: { - width: 16, - height: 16, - borderRadius: 10, - }, - label: { - flex: 1, - }, -}) diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx deleted file mode 100644 index e2a26dc495..0000000000 --- a/src/view/com/util/forms/RadioGroup.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import {useState} from 'react' -import {View} from 'react-native' - -import {s} from '#/lib/styles' -import {ButtonType} from './Button' -import {RadioButton} from './RadioButton' - -export interface RadioGroupItem { - label: string | JSX.Element - key: string -} - -export function RadioGroup({ - testID, - type, - items, - initialSelection = '', - onSelect, -}: { - testID?: string - type?: ButtonType - items: RadioGroupItem[] - initialSelection?: string - onSelect: (key: string) => void -}) { - const [selection, setSelection] = useState(initialSelection) - const onSelectInner = (key: string) => { - setSelection(key) - onSelect(key) - } - return ( - - {items.map((item, i) => ( - onSelectInner(item.key)} - /> - ))} - - ) -} diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx deleted file mode 100644 index 76161b433d..0000000000 --- a/src/view/com/util/forms/SelectableBtn.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {Text} from '../text/Text' - -interface SelectableBtnProps { - testID?: string - selected: boolean - label: string - left?: boolean - right?: boolean - onSelect: () => void - accessibilityHint?: string - style?: StyleProp -} - -export function SelectableBtn({ - testID, - selected, - label, - left, - right, - onSelect, - accessibilityHint, - style, -}: SelectableBtnProps) { - const pal = usePalette('default') - const palPrimary = usePalette('inverted') - const needsWidthStyles = !style || !('width' in style || 'flex' in style) - const {isMobile} = useWebMediaQueries() - return ( - - {label} - - ) -} - -const styles = StyleSheet.create({ - btn: { - flexDirection: 'row', - justifyContent: 'center', - flexGrow: 1, - borderWidth: 1, - borderLeftWidth: 0, - paddingHorizontal: 10, - paddingVertical: 10, - }, - btnLeft: { - borderTopLeftRadius: 8, - borderBottomLeftRadius: 8, - borderLeftWidth: 1, - }, - btnRight: { - borderTopRightRadius: 8, - borderBottomRightRadius: 8, - }, -}) diff --git a/src/view/com/util/layouts/Breakpoints.tsx b/src/view/com/util/layouts/Breakpoints.tsx deleted file mode 100644 index 45dc236158..0000000000 --- a/src/view/com/util/layouts/Breakpoints.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -export const Desktop = ({}: React.PropsWithChildren<{}>) => null -export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null -export const Tablet = ({}: React.PropsWithChildren<{}>) => null -export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => ( - <>{children} -) -export const Mobile = ({children}: React.PropsWithChildren<{}>) => ( - <>{children} -) diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx deleted file mode 100644 index 5106e3e1f8..0000000000 --- a/src/view/com/util/layouts/Breakpoints.web.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import MediaQuery from 'react-responsive' - -export const Desktop = ({children}: React.PropsWithChildren<{}>) => ( - {children} -) -export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => ( - {children} -) -export const Tablet = ({children}: React.PropsWithChildren<{}>) => ( - - {children} - -) -export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => ( - {children} -) -export const Mobile = ({children}: React.PropsWithChildren<{}>) => ( - {children} -) diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx deleted file mode 100644 index 71971c604b..0000000000 --- a/src/view/com/util/layouts/withBreakpoints.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {isNative} from '#/platform/detection' - -export const withBreakpoints =

( - Mobile: React.ComponentType

, - Tablet: React.ComponentType

, - Desktop: React.ComponentType

, -): React.FC

=> - function WithBreakpoints(props: P) { - const {isMobile, isTabletOrMobile} = useWebMediaQueries() - - if (isMobile || isNative) { - return - } - if (isTabletOrMobile) { - return - } - return - } diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index 60dc089dd8..1a236f8bcd 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -10,12 +10,11 @@ import {PaletteColorName, ThemeProvider} from '#/lib/ThemeContext' import {EmptyState} from '#/view/com/util/EmptyState' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' -import {Button, ButtonType} from '#/view/com/util/forms/Button' +import {Button} from '#/view/com/util/forms/Button' import { DropdownButton, DropdownItem, } from '#/view/com/util/forms/DropdownButton' -import {RadioGroup} from '#/view/com/util/forms/RadioGroup' import {ToggleButton} from '#/view/com/util/forms/ToggleButton' import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' import {Text} from '#/view/com/util/text/Text' @@ -139,8 +138,6 @@ function ControlsView() { - - ) @@ -503,28 +500,3 @@ function ToggleButtonsView() { ) } - -const RADIO_BUTTON_ITEMS = [ - {key: 'default-light', label: 'Default Light'}, - {key: 'primary', label: 'Primary'}, - {key: 'secondary', label: 'Secondary'}, - {key: 'inverted', label: 'Inverted'}, - {key: 'primary-outline', label: 'Primary Outline'}, - {key: 'secondary-outline', label: 'Secondary Outline'}, - {key: 'primary-light', label: 'Primary Light'}, - {key: 'secondary-light', label: 'Secondary Light'}, -] -function RadioButtonsView() { - const defaultPal = usePalette('default') - const [rgType, setRgType] = React.useState('default-light') - return ( - - setRgType(v as ButtonType)} - /> - - ) -}