Cleaner DealInfo screen

.vscode/settings.json

@@ -9,6 +9,10 @@
       "unstable_ts_config",
     ],
   },
+  "eslint.codeActionsOnSave.mode": "problems",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+  },
   "dprint.path": "bin/dprint",
   "[typescript]": {
     "editor.defaultFormatter": "dprint.dprint",

src/base/components/button/__tests__/testHelpers.ts

@@ -2,7 +2,7 @@ import type { JestNativeMatchers } from '@testing-library/jest-native/extend-exp
 import { Platform } from 'react-native';
 import type { ReactTestInstance } from 'react-test-renderer';
 import { assert } from '../../../assert';
-import type { ButtonColours } from '../button';
+import type { ButtonColour } from '../button';
 import { buttonColours } from '../button';
 
 type ToHaveStyleParam = Parameters<JestNativeMatchers<void>['toHaveStyle']>[0];
@@ -14,7 +14,7 @@ type ToHaveStyleParam = Parameters<JestNativeMatchers<void>['toHaveStyle']>[0];
  */
 export function expectButtonColour(
   buttonTextElement: ReactTestInstance,
-  colour: ButtonColours,
+  colour: ButtonColour,
 ): void {
   const button = Platform.select({
     ios: buttonTextElement,

src/base/components/button/button.tsx

@@ -1,40 +1,40 @@
-import { Button as ReactNativeButton, StyleSheet, View } from 'react-native';
 import type { ButtonProps as ReactNativeButtonProps } from 'react-native';
+import { Button as ReactNativeButton } from 'react-native';
+import { colours } from '../../constants/colours';
+import { Column } from '../../layout/flex';
 
 /** Exported for testing. */
 export const buttonColours = {
-  orange: '#ffbd59',
-  green: '#82f152',
-  lightGreen: '#a0ff77',
-  veryLightGreen: '#aaff85',
-  red: '#f15e5e',
-  lightRed: '#ffb7b7',
-  veryLightRed: '#ffcfcf',
+  primary: colours.primary,
+  secondary: colours.secondary,
 } as const;
 
-export type ButtonColours = keyof typeof buttonColours;
+export type ButtonColour = keyof typeof buttonColours;
 
 type ButtonProps = {
   title: ReactNativeButtonProps['title'];
   onPress: ReactNativeButtonProps['onPress'];
-  color: ButtonColours;
+  colour: ButtonColour;
+  /**
+   * Whether the button width should grow to fit it's content
+   * when sharing a flex container with other buttons.
+   * @default false
+   */
+  fitContent?: boolean;
 };
 
-export function Button({ color, title, onPress }: ButtonProps): React.JSX.Element {
-  const buttonColour = buttonColours[color];
+export function Button({ title, onPress, colour, fitContent = false }: ButtonProps): React.JSX.Element {
+  const buttonColour = buttonColours[colour];
   return (
-    // TODO: Could use a custom Pressable component to add styles, instead of a Button wrapped in a View.
-    <View style={styles.container}>
+    // Buttons are wrapped in a flex column so they can always expand horizontally
+    // to the width of their container.
+    <Column
+      {...(fitContent && {
+        grow: 1,
+        shrink: 1,
+      })}
+    >
       <ReactNativeButton title={title} onPress={onPress} color={buttonColour} />
-    </View>
+    </Column>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    // Buttons should expand to fill available container space by default.
-    // Larger buttons are better for mobile touch targets.
-    flexBasis: 1,
-    flexGrow: 1,
-  },
-});

src/base/components/card/card.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { StyleSheet } from 'react-native';
+import { colours } from '../../constants/colours';
+import { sizes } from '../../constants/sizes';
+import type { FlexLayoutProps } from '../../layout/flex';
+import { Column, Row } from '../../layout/flex';
+
+export type CardProps = {
+  /**
+   * Which type of Flex layout to use.
+   * @default 'column'
+   */
+  direction?: 'row' | 'column';
+} & FlexLayoutProps;
+
+/**
+ * A Card is a styled Flex container.
+ */
+export function Card({ direction = 'column', style, ...props }: CardProps): React.JSX.Element {
+  const FlexContainer = direction === 'column' ? Column : Row;
+  return <FlexContainer {...props} style={[styles.card, style]} />;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: sizes.medium,
+    backgroundColor: colours.foreground,
+    boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
+  },
+});

src/base/components/loading/loading.tsx

@@ -12,10 +12,10 @@ type LoadingProps = {
   size?: keyof typeof sizeToScale;
 };
 
-export function Loading({ size }: LoadingProps): React.JSX.Element {
+export function Loading({ size = 'medium' }: LoadingProps): React.JSX.Element {
   return (
     <Spinner>
-      <ArcIcon scaleSize={sizeToScale[size ?? 'medium']} />
+      <ArcIcon scaleSize={sizeToScale[size]} />
     </Spinner>
   );
 }

src/base/components/spinner/spinner.tsx

@@ -11,7 +11,7 @@ type SpinnerProps = React.PropsWithChildren<{
  */
 export function Spinner({
   children,
-  revsPerSecond,
+  revsPerSecond = 1,
 }: SpinnerProps): React.JSX.Element {
   const rotationValue = useRef(new Animated.Value(0)).current;
 
@@ -21,7 +21,7 @@ export function Spinner({
     Animated.loop(
       Animated.timing(rotationValue, {
         toValue: 1,
-        duration: 1000 / (revsPerSecond ?? 1),
+        duration: 1000 / revsPerSecond,
         easing: Easing.linear,
         // On web, looping does not work with useNativeDriver enabled.
         useNativeDriver: Platform.OS !== 'web',

src/base/components/text/link.tsx

@@ -0,0 +1,63 @@
+import Icon from '@expo/vector-icons/MaterialIcons';
+import type React from 'react';
+import { useState } from 'react';
+import { Platform, Pressable, StyleSheet } from 'react-native';
+import { colours } from '../../constants/colours';
+import { Row } from '../../layout/flex';
+import type { TextProps } from './text';
+import { Text } from './text';
+
+export type LinkProps = Omit<TextProps, 'children' | 'colour'> & {
+  children: string;
+  onPress: () => void;
+};
+
+/**
+ * A styled Text element that should open a link when pressed.
+ * Intended to be nested within a Text element.
+ */
+export function Link({ onPress, children, ...props }: LinkProps): React.JSX.Element {
+  const [pressed, setPressed] = useState(false);
+
+  // I noticed that only on Android, Text following the View would not have adequate spacing.
+  // The end of the view and the start of the Text would be touching or overlapping.
+  // This padding was added to help that. The value was chosen manually after checking what looks good enough.
+  // I however have no idea _why_ this value is the right one to look good enough.
+  //
+  // It also expects that the Text next to this Link will have a space " " first,
+  // because my TextPart algorithm should do that.
+  const paddingEnd = children.length * 0.75;
+
+  return (
+    <Pressable
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      onPress={onPress}
+      style={Platform.OS === 'android' ? [styles.pressableAndroid, { paddingEnd }] : undefined}
+    >
+      <Row alignItems='center'>
+        <Text {...props} colour={pressed ? 'primaryLight' : 'primaryDark'}>
+          {children}
+        </Text>
+        <Icon
+          name='arrow-outward'
+          color={pressed ? colours.primaryLight : colours.primaryDark}
+        />
+      </Row>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressableAndroid: {
+    // Nesting Views within Text on Android will add extra bottom margin/something to the View,
+    // which you can't get rid of. This makes the text/items within the View render higher than the surrounding text.
+    //
+    // This workaround moves the view down by a fixed amount that roughly aligns the View with the Text.
+    // It's not perfect and should be replaced when this issue is fixed:
+    // https://github.com/facebook/react-native/issues/31955
+    // This workaround was suggested in the same issue:
+    // https://github.com/facebook/react-native/issues/31955#issuecomment-1586109201
+    transform: [{ translateY: 2 }],
+  },
+});

src/base/components/text/text.tsx

@@ -7,7 +7,11 @@ import type { FontSize, FontWeight } from '../../constants/text';
 import { fontSizes, fontWeights } from '../../constants/text';
 import { UnreachableError } from '../../unreachableError';
 
-type TextColour = 'normal' | 'light' | 'veryLight';
+type TextColour =
+  | 'normal'
+  | 'light'
+  | 'veryLight'
+  | keyof Pick<typeof colours, 'primaryDark' | 'primaryLight' | 'secondaryDark'>;
 
 export type TextProps = {
   /** Default: medium */
@@ -27,7 +31,7 @@ export type TextProps = {
   >;
 } & Omit<RNTextProps, 'style' | 'children'>;
 
-type StatusTextColour = 'success' | 'warning' | 'error';
+type StatusTextColour = keyof Pick<typeof colours, 'success' | 'warning' | 'error'>;
 type StatusTextProps = Omit<TextProps, 'colour'> & { colour: StatusTextColour };
 
 type InternalTextProps = TextProps | StatusTextProps;
@@ -95,6 +99,12 @@ function getTextColour(colour: TextColour | StatusTextColour): TextStyle['color'
       return colours.copyLight;
     case 'veryLight':
       return colours.copyLighter;
+    case 'primaryDark':
+      return colours.primaryDark;
+    case 'primaryLight':
+      return colours.primaryLight;
+    case 'secondaryDark':
+      return colours.secondaryDark;
     case 'success':
       return colours.successContent;
     case 'warning':

src/base/constants/colours.ts

@@ -3,6 +3,7 @@
 // and the secondary colour's hue being at 210 degrees.
 // 'foreground' was manually lightened to pure white because it needs to blend in
 // with deal image backgrounds, which are white.
+// 'copy' was darkened to black for contrast on the new 'foreground'.
 // 'success', 'warning' and 'error' were manually softened/lightened a bit from the generated colours.
 export const colours = {
   primary: 'rgb(237, 188, 89)',
@@ -19,7 +20,7 @@ export const colours = {
   foreground: 'rgb(255, 255, 255)',
   border: 'rgb(226, 224, 221)',
 
-  copy: 'rgb(41, 39, 35)',
+  copy: 'rgb(0, 0, 0)',
   copyLight: 'rgb(110, 105, 94)',
   copyLighter: 'rgb(149, 143, 132)',
 

src/base/layout/flex.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { type Size, sizes } from '../constants/sizes';
 
-type FlexLayoutProps = {
+export type FlexLayoutProps = {
   children: ReactNode;
   /** Default: space-between */
   justifyContent?: ViewStyle['justifyContent'];

src/base/links/openLink.ts

@@ -0,0 +1,8 @@
+import { openURL } from 'expo-linking';
+
+/**
+ * Open a link, likely in another app.
+ */
+export async function openLink(url: string): Promise<void> {
+  await openURL(url).catch(() => console.log('User cancelled dialog'));
+}

src/feed-parser/__tests__/fixtures/regenValidFixtures.ts

@@ -9,7 +9,8 @@ import { join } from 'node:path';
 import { convertToOzbargainFeed } from '../../parser';
 import { parseRssFeedFromString, validFixtures } from './getFixtures';
 
-const VALID_FIXTURES_DIR = join(import.meta.dirname, 'valid');
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+const VALID_FIXTURES_DIR = join(import.meta.dirname ?? __dirname, 'valid');
 
 // Will overwrite any existing file.
 async function writeFileToDisk(