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

@@ -1,52 +0,0 @@
-import AsyncStorage from '@react-native-async-storage/async-storage'
-
-export async function loadString(key: string): Promise<string | null> {
-  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<boolean> {
-  try {
-    await AsyncStorage.setItem(key, value)
-    return true
-  } catch {
-    return false
-  }
-}
-
-export async function load(key: string): Promise<any | null> {
-  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<boolean> {
-  try {
-    await AsyncStorage.setItem(key, JSON.stringify(value))
-    return true
-  } catch {
-    return false
-  }
-}
-
-export async function remove(key: string): Promise<void> {
-  try {
-    await AsyncStorage.removeItem(key)
-  } catch {}
-}
-
-export async function clear(): Promise<void> {
-  try {
-    await AsyncStorage.clear()
-  } catch {}
-}

src/lib/type-assertions.ts

@@ -1,3 +0,0 @@
-export const getKeys = Object.keys as <T extends object>(
-  obj: T,
-) => Array<keyof T>

src/view/com/util/forms/RadioButton.tsx

@@ -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<ViewStyle>
-  onPress: () => void
-}) {
-  const theme = useTheme()
-  const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(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<TextStyle, Record<ButtonType, TextStyle>>(
-    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<TextStyle, Record<ButtonType, TextStyle>>(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 (
-    <Button testID={testID} type={type} onPress={onPress} style={style}>
-      <View style={styles.outer}>
-        <View style={[circleStyle, styles.circle]}>
-          {isSelected ? (
-            <View style={[circleFillStyle, styles.circleFill]} />
-          ) : undefined}
-        </View>
-        {typeof label === 'string' ? (
-          <Text type="button" style={[labelStyle, styles.label]}>
-            {label}
-          </Text>
-        ) : (
-          <View style={styles.label}>{label}</View>
-        )}
-      </View>
-    </Button>
-  )
-}
-
-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,
-  },
-})

src/view/com/util/forms/RadioGroup.tsx

@@ -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<string>(initialSelection)
-  const onSelectInner = (key: string) => {
-    setSelection(key)
-    onSelect(key)
-  }
-  return (
-    <View>
-      {items.map((item, i) => (
-        <RadioButton
-          key={item.key}
-          testID={testID ? `${testID}-${item.key}` : undefined}
-          style={i !== 0 ? s.mt2 : undefined}
-          type={type}
-          label={item.label}
-          isSelected={item.key === selection}
-          onPress={() => onSelectInner(item.key)}
-        />
-      ))}
-    </View>
-  )
-}

src/view/com/util/forms/SelectableBtn.tsx

@@ -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<ViewStyle>
-}
-
-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 (
-    <Pressable
-      testID={testID}
-      style={[
-        styles.btn,
-        needsWidthStyles && {
-          flex: isMobile ? 1 : undefined,
-          width: !isMobile ? 100 : undefined,
-        },
-        left && styles.btnLeft,
-        right && styles.btnRight,
-        pal.border,
-        selected ? palPrimary.view : pal.view,
-        style,
-      ]}
-      onPress={onSelect}
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      accessibilityHint={accessibilityHint}>
-      <Text style={selected ? palPrimary.text : pal.text}>{label}</Text>
-    </Pressable>
-  )
-}
-
-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,
-  },
-})

src/view/com/util/layouts/Breakpoints.tsx

@@ -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}</>
-)

src/view/com/util/layouts/Breakpoints.web.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import MediaQuery from 'react-responsive'
-
-export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
-  <MediaQuery minWidth={1300}>{children}</MediaQuery>
-)
-export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
-  <MediaQuery minWidth={800}>{children}</MediaQuery>
-)
-export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
-  <MediaQuery minWidth={800} maxWidth={1300 - 1}>
-    {children}
-  </MediaQuery>
-)
-export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
-  <MediaQuery maxWidth={1300 - 1}>{children}</MediaQuery>
-)
-export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
-  <MediaQuery maxWidth={800 - 1}>{children}</MediaQuery>
-)

src/view/com/util/layouts/withBreakpoints.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
-
-export const withBreakpoints = <P extends object>(
-  Mobile: React.ComponentType<P>,
-  Tablet: React.ComponentType<P>,
-  Desktop: React.ComponentType<P>,
-): React.FC<P> =>
-  function WithBreakpoints(props: P) {
-    const {isMobile, isTabletOrMobile} = useWebMediaQueries()
-
-    if (isMobile || isNative) {
-      return <Mobile {...props} />
-    }
-    if (isTabletOrMobile) {
-      return <Tablet {...props} />
-    }
-    return <Desktop {...props} />
-  }

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() {
       <DropdownButtonsView />
       <Heading label="Toggle Buttons" />
       <ToggleButtonsView />
-      <Heading label="Radio Buttons" />
-      <RadioButtonsView />
       <View style={s.footerSpacer} />
     </ScrollView>
   )
@@ -503,28 +500,3 @@ function ToggleButtonsView() {
     </View>
   )
 }
-
-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<ButtonType>('default-light')
-  return (
-    <View style={[defaultPal.view]}>
-      <RadioGroup
-        type={rgType}
-        items={RADIO_BUTTON_ITEMS}
-        initialSelection="default-light"
-        onSelect={v => setRgType(v as ButtonType)}
-      />
-    </View>
-  )
-}