create-expo-stack 2.6.5 → 2.7.0-next.2960d96

package/build/templates/packages/nativewindui/components/nativewind-ui/Avatar.tsx.ejs

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  ImageErrorEventData,
+  ImageLoadEventData,
+  NativeSyntheticEvent,
+  Image as RNImage,
+  View,
+} from 'react-native';
+
+import { cn } from '~/lib/cn';
+
+interface AvatarRootProps {
+  alt: string;
+}
+
+interface AvatarImageProps {
+  children?: React.ReactNode;
+  onLoadingStatusChange?: (status: 'error' | 'loaded') => void;
+}
+
+type AvatarState = 'loading' | 'error' | 'loaded';
+
+interface IRootContext extends AvatarRootProps {
+  status: AvatarState;
+  setStatus: (status: AvatarState) => void;
+}
+
+const RootContext = React.createContext<IRootContext | null>(null);
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & AvatarRootProps
+>(({ alt, className, ...viewProps }, ref) => {
+  const [status, setStatus] = React.useState<AvatarState>('loading');
+  return (
+    <RootContext.Provider value={{ alt, status, setStatus }}>
+      <View
+        ref={ref}
+        className={cn(
+          'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+          className
+        )}
+        {...viewProps}
+      />
+    </RootContext.Provider>
+  );
+});
+
+Avatar.displayName = 'Avatar';
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error(
+      'Avatar compound components cannot be rendered outside the Avatar component'
+    );
+  }
+  return context;
+}
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof RNImage>,
+  Omit<React.ComponentPropsWithoutRef<typeof RNImage>, 'alt'> & AvatarImageProps
+>(
+  (
+    {
+      onLoad: onLoadProps,
+      onError: onErrorProps,
+      onLoadingStatusChange,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { alt, setStatus, status } = useRootContext();
+
+    const onLoad = React.useCallback(
+      (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+        setStatus('loaded');
+        onLoadingStatusChange?.('loaded');
+        onLoadProps?.(e);
+      },
+      [onLoadProps]
+    );
+
+    const onError = React.useCallback(
+      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+        setStatus('error');
+        onLoadingStatusChange?.('error');
+        onErrorProps?.(e);
+      },
+      [onErrorProps]
+    );
+
+    if (status === 'error') {
+      return null;
+    }
+
+    return (
+      <RNImage
+        ref={ref}
+        alt={alt}
+        onLoad={onLoad}
+        onError={onError}
+        className={cn('aspect-square h-full w-full', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+AvatarImage.displayName = 'AvatarImage';
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+  const { alt, status } = useRootContext();
+
+  if (status !== 'error') {
+    return null;
+  }
+  return (
+    <View
+      ref={ref}
+      role={'img'}
+      aria-label={alt}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+AvatarFallback.displayName = 'AvatarFallback';
+
+export { Avatar, AvatarFallback, AvatarImage };

package/build/templates/packages/nativewindui/components/nativewind-ui/DatePicker.android.tsx.ejs

@@ -0,0 +1,66 @@
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Text } from '~/components/Text';
+
+export function DatePicker(
+  props: React.ComponentProps<typeof DateTimePicker> & {
+    mode: 'date' | 'time' | 'datetime';
+  }
+) {
+  const show = (currentMode: 'time' | 'date') => () => {
+    DateTimePickerAndroid.open({
+      value: props.value,
+      onChange: props.onChange,
+      mode: currentMode,
+      minimumDate: props.minimumDate,
+      maximumDate: props.maximumDate,
+    });
+  };
+
+  return (
+    <View className='flex-row gap-2.5'>
+      {props.mode.includes('date') && (
+        <View className='relative pt-1.5'>
+          <Pressable
+            onPress={show('date')}
+            className='border border-border active:opacity-80 px-5 py-3 rounded-md'
+          >
+            <Text variant='subhead'>
+              {new Intl.DateTimeFormat('en-US', {
+                dateStyle: 'medium',
+              }).format(props.value)}
+            </Text>
+          </Pressable>
+          <View className='absolute top-0 left-2 bg-card px-1'>
+            <Text variant='caption2' className='text-[10px] opacity-60'>
+              Date
+            </Text>
+          </View>
+        </View>
+      )}
+      {props.mode.includes('time') && (
+        <View className='relative pt-1.5'>
+          <Pressable
+            onPress={show('time')}
+            className='border border-border active:opacity-80 px-5 py-3 rounded-md'
+          >
+            <Text variant='subhead'>
+              {new Intl.DateTimeFormat('en-US', {
+                timeStyle: 'short',
+              }).format(props.value)}
+            </Text>
+          </Pressable>
+          <View className='absolute top-0 left-2 bg-card px-1'>
+            <Text variant='caption2' className='text-[10px] opacity-60'>
+              Time
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/DatePicker.tsx.ejs

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export function DatePicker(
+  props: React.ComponentProps<typeof DateTimePicker> & {
+    mode: 'date' | 'time' | 'datetime';
+  }
+) {
+  return <DateTimePicker {...props} />;
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/Picker.tsx.ejs

@@ -0,0 +1,39 @@
+import { Picker as RNPicker } from '@react-native-picker/picker';
+import { View } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+import { cn } from '~/lib/cn';
+
+export function Picker<T>({
+  mode = 'dropdown',
+  style,
+  dropdownIconColor,
+  dropdownIconRippleColor,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RNPicker<T>>) {
+  const { colors } = useColorScheme();
+  return (
+    <View
+      className={cn(
+        'bg-background border border-background ios:shadow-sm ios:shadow-black/5 rounded-md',
+        className
+      )}
+    >
+      <RNPicker
+        mode={mode}
+        style={
+          style ?? {
+            backgroundColor: colors.root,
+            borderRadius: 8,
+          }
+        }
+        dropdownIconColor={dropdownIconColor ?? colors.foreground}
+        dropdownIconRippleColor={dropdownIconRippleColor ?? colors.foreground}
+        {...props}
+      />
+    </View>
+  );
+}
+
+export const PickerItem = RNPicker.Item;

package/build/templates/packages/nativewindui/components/nativewind-ui/ProgressIndicator.tsx.ejs

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { cn } from '~/lib/cn';
+
+const DEFAULT_MAX = 100;
+
+const ProgressIndicator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value?: number;
+    max?: number;
+    getValueLabel?: (value: number, max: number) => string;
+  }
+>(
+  (
+    {
+      value: valueProp,
+      max: maxProp,
+      getValueLabel = defaultGetValueLabel,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const max = maxProp ?? DEFAULT_MAX;
+    const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
+    const progress = useDerivedValue(() => value ?? 0);
+
+    const indicator = useAnimatedStyle(() => {
+      return {
+        width: withSpring(
+          `${interpolate(
+            progress.value,
+            [0, 100],
+            [1, 100],
+            Extrapolation.CLAMP
+          )}%`,
+          { overshootClamping: true }
+        ),
+      };
+    });
+
+    return (
+      <View
+        role='progressbar'
+        ref={ref}
+        aria-valuemax={max}
+        aria-valuemin={0}
+        aria-valuenow={value}
+        aria-valuetext={getValueLabel(value, max)}
+        accessibilityValue={{
+          min: 0,
+          max,
+          now: value,
+          text: getValueLabel(value, max),
+        }}
+        className={cn(
+          'relative h-1 w-full overflow-hidden rounded-full',
+          className
+        )}
+        {...props}
+      >
+        <View className='absolute left-0 top-0 right-0 bottom-0 bg-muted opacity-20' />
+        <Animated.View
+          role='presentation'
+          style={indicator}
+          className={cn('h-full bg-primary')}
+        />
+      </View>
+    );
+  }
+);
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+
+export { ProgressIndicator };
+
+function defaultGetValueLabel(value: number, max: number) {
+  return `${Math.round((value / max) * 100)}%`;
+}
+
+function isValidValueNumber(value: any, max: number): value is number {
+  return (
+    typeof value === 'number' && !isNaN(value) && value <= max && value >= 0
+  );
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/SegmentedControl.tsx.ejs

@@ -0,0 +1,22 @@
+import RNSegmentedControl from '@react-native-segmented-control/segmented-control';
+import { Platform } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+
+export function SegmentedControl(
+  props: React.ComponentPropsWithoutRef<typeof RNSegmentedControl>
+) {
+  const { colorScheme, colors } = useColorScheme();
+  return (
+    <RNSegmentedControl
+      backgroundColor={
+        Platform.OS === 'android'
+          ? colorScheme === 'dark'
+            ? colors.background
+            : colors.grey6
+          : undefined
+      }
+      {...props}
+    />
+  );
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/Sheet.tsx.ejs

@@ -0,0 +1,59 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+} from '@gorhom/bottom-sheet';
+import * as React from 'react';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+
+const Sheet = React.forwardRef<
+  BottomSheetModal,
+  React.ComponentPropsWithoutRef<typeof BottomSheetModal>
+>(
+  (
+    { index = 0, backgroundStyle, style, handleIndicatorStyle, ...props },
+    ref
+  ) => {
+    const { colors } = useColorScheme();
+
+    const renderBackdrop = React.useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop {...props} disappearsOnIndex={-1} />
+      ),
+      []
+    );
+    return (
+      <BottomSheetModal
+        ref={ref}
+        index={0}
+        backgroundStyle={
+          backgroundStyle ?? {
+            backgroundColor: colors.card,
+          }
+        }
+        style={
+          style ?? {
+            borderWidth: 1,
+            borderColor: colors.grey5,
+            borderTopStartRadius: 16,
+            borderTopEndRadius: 16,
+          }
+        }
+        handleIndicatorStyle={
+          handleIndicatorStyle ?? {
+            backgroundColor: colors.grey4,
+          }
+        }
+        backdropComponent={renderBackdrop}
+        {...props}
+      />
+    );
+  }
+);
+
+function useSheetRef() {
+  return React.useRef<BottomSheetModal>(null);
+}
+
+export { Sheet, useSheetRef };

package/build/templates/packages/nativewindui/components/nativewind-ui/Slider.tsx.ejs

@@ -0,0 +1,28 @@
+import RNSlider from '@react-native-community/slider';
+import { Platform } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+import { COLORS } from '~/theme/colors';
+
+export function Slider({
+  thumbTintColor,
+  minimumTrackTintColor,
+  maximumTrackTintColor,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RNSlider>) {
+  const { colors } = useColorScheme();
+  return (
+    <RNSlider
+      thumbTintColor={
+        thumbTintColor ?? Platform.OS === 'ios' ? COLORS.white : colors.blue
+      }
+      minimumTrackTintColor={minimumTrackTintColor ?? colors.blue}
+      maximumTrackTintColor={
+        maximumTrackTintColor ?? Platform.OS === 'android'
+          ? colors.blue
+          : undefined
+      }
+      {...props}
+    />
+  );
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/Text.tsx.ejs

@@ -0,0 +1,55 @@
+import { VariantProps, cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { UITextView } from 'react-native-uitextview';
+
+import { cn } from '~/lib/cn';
+
+cssInterop(UITextView, { className: 'style' });
+
+const textVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      largeTitle: 'text-4xl',
+      title1: 'text-2xl',
+      title2: 'text-[22px] leading-7',
+      title3: 'text-xl',
+      heading: 'text-[17px] leading-6 font-semibold',
+      body: 'text-[17px] leading-6',
+      callout: 'text-base',
+      subhead: 'text-[15px] leading-6',
+      footnote: 'text-[13px] leading-5',
+      caption1: 'text-xs',
+      caption2: 'text-[11px] leading-4',
+    },
+    color: {
+      primary: '',
+      secondary: 'text-secondary-foreground/90',
+      tertiary: 'text-muted-foreground/90',
+      quarternary: 'text-muted-foreground/50',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+    color: 'primary',
+  },
+});
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  variant,
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof UITextView> & VariantProps<typeof textVariants>) {
+  const textClassName = React.useContext(TextClassContext);
+  return (
+    <UITextView
+      className={cn(textVariants({ variant, color }), textClassName, className)}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext, textVariants };

package/build/templates/packages/nativewindui/components/nativewind-ui/ThemeToggle.tsx.ejs

@@ -0,0 +1,39 @@
+import { Icon } from '@roninoss/icons';
+import { Appearance, Pressable, View } from 'react-native';
+import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
+
+import { cn } from '~/lib/cn';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { COLORS } from '~/theme/colors';
+
+export function ThemeToggle() {
+  const { colorScheme, toggleColorScheme } = useColorScheme();
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <Animated.View
+        className="items-center justify-center"
+        key={`toggle-${colorScheme}`}
+        entering={ZoomInRotate}>
+        <Pressable
+          onPress={() => {
+            // ColorScheme is set with `Appearance` as well for the iOS header search placeholder text: https://github.com/software-mansion/react-native-screens/discussions/1758
+            Appearance.setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
+            toggleColorScheme();
+          }}
+          className="opacity-80">
+          {colorScheme === 'dark'
+            ? ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon namingScheme="sfSymbol" name="moon.stars" color={COLORS.white} />
+                </View>
+              )
+            : ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon namingScheme="sfSymbol" name="sun.min" color={COLORS.black} />
+                </View>
+              )}
+        </Pressable>
+      </Animated.View>
+    </LayoutAnimationConfig>
+  );
+}

package/build/templates/packages/nativewindui/components/nativewind-ui/Toggle.tsx.ejs

@@ -0,0 +1,17 @@
+import { useColorScheme } from '~/lib/useColorScheme';
+import { COLORS } from '~/theme/colors';
+import { Switch } from 'react-native';
+
+export function Toggle(props: React.ComponentPropsWithoutRef<typeof Switch>) {
+  const { colors } = useColorScheme();
+  return (
+    <Switch
+      trackColor={{
+        true: colors.blue,
+        false: colors.grey,
+      }}
+      thumbColor={COLORS.white}
+      {...props}
+    />
+  );
+}

package/build/templates/packages/nativewindui/expo-env.d.ts.ejs

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/build/templates/packages/nativewindui/global.css.ejs

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 242 242 247;
+    --foreground: 0 0 0;
+    --card: 255 255 255;
+    --card-foreground: 8 28 30;
+    --popover: 230 230 235;
+    --popover-foreground: 0 0 0;
+    --primary: 0 123 254;
+    --primary-foreground: 255 255 255;
+    --secondary: 45 175 231;
+    --secondary-foreground: 255 255 255;
+    --muted: 175 176 180;
+    --muted-foreground: 142 142 147;
+    --accent: 255 40 84;
+    --accent-foreground: 255 255 255;
+    --destructive: 255 56 43;
+    --destructive-foreground: 255 255 255;
+    --border: 230 230 235;
+    --input: 210 210 215;
+    --ring: 230 230 235;
+
+    --android-background: 249 249 255;
+    --android-foreground: 0 0 0;
+    --android-card: 255 255 255;
+    --android-card-foreground: 24 28 35;
+    --android-popover: 215 217 228;
+    --android-popover-foreground: 0 0 0;
+    --android-primary: 0 112 233;
+    --android-primary-foreground: 255 255 255;
+    --android-secondary: 176 201 255;
+    --android-secondary-foreground: 20 55 108;
+    --android-muted: 193 198 215;
+    --android-muted-foreground: 113 119 134;
+    --android-accent: 169 73 204;
+    --android-accent-foreground: 255 255 255;
+    --android-destructive: 254 67 54;
+    --android-destructive-foreground: 255 255 255;
+    --android-border: 215 217 228;
+    --android-input: 210 210 215;
+    --android-ring: 215 217 228;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0 0;
+      --foreground: 255 255 255;
+      --card: 21 21 24;
+      --card-foreground: 255 255 255;
+      --popover: 40 40 42;
+      --popover-foreground: 255 255 255;
+      --primary: 3 133 255;
+      --primary-foreground: 255 255 255;
+      --secondary: 100 211 254;
+      --secondary-foreground: 255 255 255;
+      --muted: 70 70 73;
+      --muted-foreground: 142 142 147;
+      --accent: 255 52 95;
+      --accent-foreground: 255 255 255;
+      --destructive: 254 67 54;
+      --destructive-foreground: 255 255 255;
+      --border: 40 40 42;
+      --input: 55 55 57;
+      --ring: 40 40 42;
+
+      --android-background: 0 0 0;
+      --android-foreground: 255 255 255;
+      --android-card: 16 19 27;
+      --android-card-foreground: 224 226 237;
+      --android-popover: 39 42 50;
+      --android-popover-foreground: 224 226 237;
+      --android-primary: 3 133 255;
+      --android-primary-foreground: 255 255 255;
+      --android-secondary: 28 60 114;
+      --android-secondary-foreground: 189 209 255;
+      --android-muted: 216 226 255;
+      --android-muted-foreground: 139 144 160;
+      --android-accent: 83 0 111;
+      --android-accent-foreground: 238 177 255;
+      --android-destructive: 147 0 10;
+      --android-destructive-foreground: 255 255 255;
+      --android-border: 39 42 50;
+      --android-input: 55 55 57;
+      --android-ring: 39 42 50;
+    }
+  }
+}

package/build/templates/packages/nativewindui/lib/cn.ts.ejs

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/build/templates/packages/nativewindui/lib/useColorScheme.tsx.ejs

@@ -0,0 +1,14 @@
+import { useColorScheme as useNativewindColorScheme } from 'nativewind';
+
+import { COLORS } from '~/theme/colors';
+
+export function useColorScheme() {
+  const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
+  return {
+    colorScheme: colorScheme ?? 'light',
+    isDarkColorScheme: colorScheme === 'dark',
+    setColorScheme,
+    toggleColorScheme,
+    colors: COLORS[colorScheme ?? 'light'],
+  };
+}