fit: lint & typo

apps/native/components.json

@@ -0,0 +1,7 @@
+{
+  "platforms": "native-only",
+  "aliases": {
+    "components": "~/components",
+    "lib": "~/lib"
+  }
+}

apps/native/package.json

@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@expo/metro-config": "^0.10.7",
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-navigation/drawer": "^6.6.15",
     "@shopify/flash-list": "1.4.3",
     "@tanstack/react-query": "^5.8.1",
     "@trpc/client": "next",
@@ -26,28 +28,31 @@
     "expo": "^49.0.18",
     "expo-constants": "~14.4.2",
     "expo-linking": "~5.0.2",
+    "expo-navigation-bar": "^2.8.1",
     "expo-router": "2.0.12",
     "expo-splash-screen": "~0.22.0",
     "expo-status-bar": "~1.7.1",
     "nativewind": "^4.0.13",
+    "lucide-react-native": "^0.373.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.7",
     "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0",
+    "react-native-reanimated": "3.8.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.1",
     "superjson": "2.2.0",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.5.3",
     "@acme/api": "workspace:^0.1.0",
     "@acme/tailwind-config": "workspace:^0.1.0",
     "@acme/tsconfig": "workspace:^0.1.0",
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/runtime": "^7.23.2",
+    "@biomejs/biome": "^1.5.3",
     "@expo/config-plugins": "^7.2.5",
     "@types/babel__core": "^7.20.4",
     "@types/react": "^18.2.37",

apps/native/src/components/DrawerToggle.tsx

@@ -1,11 +1,14 @@
-import { DrawerNavigationProp } from "@react-navigation/drawer";
+import type { DrawerNavigationProp } from "@react-navigation/drawer";
 import { useNavigation } from "expo-router";
-import { AlignJustify } from "lucide-react-native";
 import { Pressable, View } from "react-native";
+import { AlignJustify } from "~/components/Icons";
 import { cn } from "~/lib/utils";
 
 export function DrawerToggle() {
-	const navigation = useNavigation<DrawerNavigationProp<object>>();
+	const navigation = useNavigation<DrawerNavigationProp<{
+		Home: undefined;
+		Settings: undefined;
+	}>>();
 
 	return (
 		<Pressable

apps/native/src/components/Icons.tsx

@@ -0,0 +1,38 @@
+import {
+    AlignJustify,
+    Check,
+    ChevronDown,
+    ChevronRight,
+    ChevronUp,
+    type LucideIcon, MoonStar,
+    Sun,
+    X,
+} from "lucide-react-native";
+import { cssInterop } from "nativewind";
+
+function interopIcon(icon: LucideIcon) {
+    cssInterop(icon, {
+        interopIcon: true,
+    });
+    //     // class: {
+    //     //   target: 'style',
+    //     //   nativeStyleToProp: {
+    //     //     color: true,
+    //     //     opacity: true,
+    //     //   },
+    //     // },
+    // });
+}
+
+interopIcon(ChevronUp);
+interopIcon(ChevronDown);
+interopIcon(Check);
+interopIcon(AlignJustify);
+interopIcon(ChevronRight);
+interopIcon(Sun);
+interopIcon(MoonStar);
+interopIcon(X);
+
+
+export { Check, ChevronDown, ChevronUp, AlignJustify, Sun, MoonStar, ChevronRight, X };
+export type { LucideIcon };

apps/native/src/components/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { MoonStar, Sun } from "lucide-react-native";
+import { MoonStar, Sun } from "~/components/Icons";
 import { useColorScheme } from "nativewind";
 import { Pressable, View } from "react-native";
 import { setAndroidNavigationBar } from "~/lib/android-navigation-bar";

apps/native/src/components/primitives/accordion/index.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import * as Slot from '~/components/primitives/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '~/components/primitives/types';
+import type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionRootProps,
+  RootContext,
+} from './types';
+import { useControllableState } from '~/components/primitives/hooks';
+
+const AccordionContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & AccordionRootProps>(
+  (
+    {
+      asChild,
+      type,
+      disabled,
+      collapsible = true,
+      value: valueProp,
+      onValueChange: onValueChangeProps,
+      defaultValue,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [value = type === 'multiple' ? [] : undefined, onValueChange] = useControllableState<
+      (string | undefined) | string[]
+    >({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProps as (state: string | string[] | undefined) => void,
+    });
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AccordionContext.Provider
+        value={{
+          type,
+          disabled,
+          collapsible,
+          value,
+          onValueChange,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeAccordion';
+
+function useRootContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      'Accordion compound components cannot be rendered outside the Accordion component'
+    );
+  }
+  return context;
+}
+
+type AccordionItemContext = AccordionItemProps & {
+  nativeID: string;
+  isExpanded: boolean;
+};
+
+const AccordionItemContext = React.createContext<AccordionItemContext | null>(null);
+
+const Item = React.forwardRef<ViewRef, SlottableViewProps & AccordionItemProps>(
+  ({ asChild, value, disabled, ...viewProps }, ref) => {
+    const { value: rootValue } = useRootContext();
+    const nativeID = React.useId();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <AccordionItemContext.Provider
+        value={{
+          value,
+          disabled,
+          nativeID,
+          isExpanded: isItemExpanded(rootValue, value),
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'ItemNativeAccordion';
+
+function useItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      'AccordionItem compound components cannot be rendered outside the AccordionItem component'
+    );
+  }
+  return context;
+}
+
+const Header = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const { disabled: rootDisabled } = useRootContext();
+  const { disabled: itemDisabled, isExpanded } = useItemContext();
+
+  const Component = asChild ? Slot.View : View;
+  return (
+    <Component
+      ref={ref}
+      role='heading'
+      aria-expanded={isExpanded}
+      aria-disabled={rootDisabled ?? itemDisabled}
+      {...props}
+    />
+  );
+});
+
+Header.displayName = 'HeaderNativeAccordion';
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled: disabledProp, ...props }, ref) => {
+    const {
+      disabled: rootDisabled,
+      type,
+      onValueChange,
+      value: rootValue,
+      collapsible,
+    } = useRootContext();
+    const { nativeID, disabled: itemDisabled, value, isExpanded } = useItemContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (rootDisabled || itemDisabled) return;
+      if (type === 'single') {
+        const newValue = collapsible ? (value === rootValue ? undefined : value) : value;
+        onValueChange(newValue);
+      }
+      if (type === 'multiple') {
+        const rootToArray = toStringArray(rootValue);
+        const newValue = collapsible
+          ? rootToArray.includes(value)
+            ? rootToArray.filter((val) => val !== value)
+            : rootToArray.concat(value)
+          : [...new Set(rootToArray.concat(value))];
+        // @ts-ignore - `newValue` is of type `string[]` which is OK
+        onValueChange(newValue);
+      }
+      onPressProp?.(ev);
+    }
+
+    const isDisabled = disabledProp || rootDisabled || itemDisabled;
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        key={`${nativeID}-${JSON.stringify(rootValue)}-${isDisabled}-${collapsible}-${type}`}
+        nativeID={nativeID}
+        aria-disabled={isDisabled}
+        role='button'
+        onPress={onPress}
+        accessibilityState={{
+          expanded: isExpanded,
+          disabled: isDisabled,
+        }}
+        disabled={isDisabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeAccordion';
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & AccordionContentProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { type } = useRootContext();
+    const { nativeID, isExpanded } = useItemContext();
+
+    if (!forceMount) {
+      if (!isExpanded) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        aria-hidden={!(forceMount || isExpanded)}
+        aria-labelledby={nativeID}
+        role={type === 'single' ? 'region' : 'summary'}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeAccordion';
+
+export { Content, Header, Item, Root, Trigger, useRootContext, useItemContext };
+
+function toStringArray(value?: string | string[]) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
+
+function isItemExpanded(rootValue: string | string[] | undefined, value: string) {
+  return Array.isArray(rootValue) ? rootValue.includes(value) : rootValue === value;
+}

apps/native/src/components/primitives/accordion/types.ts

@@ -0,0 +1,52 @@
+import type { ForceMountable } from "~/components/primitives/types";
+
+type RootContext = {
+  type: "single" | "multiple";
+  value: (string | undefined) | string[];
+  onValueChange:
+    | ((value: string | undefined) => void)
+    | ((value: string[]) => void);
+  collapsible: boolean;
+  disabled?: boolean;
+};
+
+type SingleRootProps = {
+  type: "single";
+  defaultValue?: string | undefined;
+  value?: string | undefined;
+  onValueChange?: (value: string | undefined) => void;
+};
+
+type MultipleRootProps = {
+  type: "multiple";
+  defaultValue?: string[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+};
+
+type AccordionRootProps = (SingleRootProps | MultipleRootProps) & {
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  collapsible?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+  /**
+   * Platform: WEB ONLY
+   */
+  orientation?: "vertical" | "horizontal";
+};
+
+type AccordionItemProps = {
+  value: string;
+  disabled?: boolean;
+};
+type AccordionContentProps = ForceMountable;
+
+export type {
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionRootProps,
+  RootContext,
+};