nx-react-native-cli 2.7.0 → 3.0.0

package/templates/shared/apps/mobile/src/screens/LandingScreen/landing.screen.tsx

@@ -1,17 +1,241 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Image, View } from 'react-native';
 
-import { ScreenContainer, ScreenHeader } from '@/components';
+import {
+  Alert,
+  BottomSheet,
+  Button,
+  DateModalInput,
+  DateTextInput,
+  Divider,
+  InputLayout,
+  Modal,
+  OutlinedButton,
+  ScreenContainer,
+  ScreenHeader,
+  SelectDropdown,
+  Skeleton,
+  TextInput,
+  Toast,
+  Typography,
+  useBottomSheet,
+  useModal,
+} from '@/components';
+import { requestPushNotification, useToggleDarkMode } from '@/hooks';
 import { PublicScreenProps, Screens } from '@/routes';
-import { toast } from '@/utils';
+import { tw } from '@/tailwind';
 
-export function LandingScreen(props: PublicScreenProps<Screens.LANDING>) {
-  function toastHi() {
-    toast('Hi!');
-  }
+const DROPDOWN_OPTIONS = [
+  { id: '1', label: 'React Native' },
+  { id: '2', label: 'Flutter' },
+  { id: '3', label: 'SwiftUI' },
+  { id: '4', label: 'Jetpack Compose' },
+];
+
+function SectionTitle({ title }: { title: string }) {
+  return <Typography style={tw`mb-2 mt-6 text-lg font-semibold`}>{title}</Typography>;
+}
+
+export function LandingScreen(_props: PublicScreenProps<Screens.LANDING>) {
+  const [textValue, setTextValue] = useState('');
+  const [dateModalValue, setDateModalValue] = useState<Date | undefined>();
+  const [dateTextValue, setDateTextValue] = useState<Date | undefined>();
+  const [selectedDropdown, setSelectedDropdown] = useState<string | undefined>();
+  const { hideModal, isVisible: isModalVisible, showModal } = useModal();
+  const { closeSheet, expandSheet, sheetRef } = useBottomSheet();
+  const { colorScheme, toggleColorScheme } = useToggleDarkMode();
+  const isDark = colorScheme === 'dark';
 
   return (
     <ScreenContainer>
-      <ScreenHeader title="Landing" onExtraActionPress={toastHi} />
+      <ScreenHeader hasBackButton={false} title="Component Showcase" />
+      <View style={tw`px-4 pb-8`}>
+        {/* Logo */}
+        <View style={tw`mt-4 items-center`}>
+          <Image source={require('@/assets/images/logo.png')} style={{ height: 80, width: 80 }} />
+        </View>
+
+        {/* Theme Toggle */}
+        <SectionTitle title="Theme" />
+        <Button
+          title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+          onPress={toggleColorScheme}
+        />
+
+        <Button
+          style={tw`mt-3`}
+          title="Request Push Notifications"
+          onPress={() => requestPushNotification()}
+        />
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Typography */}
+        <SectionTitle title="Typography" />
+        <Typography style={tw`text-2xl font-bold`}>Heading Bold</Typography>
+        <Typography style={tw`text-lg font-semibold`}>Subheading Semibold</Typography>
+        <Typography style={tw`text-base`}>Body text regular</Typography>
+        <Typography style={tw`text-sm text-gray-500`}>Caption text</Typography>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Buttons */}
+        <SectionTitle title="Buttons" />
+        <View style={tw`gap-3`}>
+          <Button title="Primary Button" onPress={() => {}} />
+          <Button isLoading title="Loading Button" onPress={() => {}} />
+          <Button isDisabled title="Disabled Button" onPress={() => {}} />
+          <OutlinedButton title="Outlined Button" onPress={() => {}} />
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* TextInput */}
+        <SectionTitle title="Text Input" />
+        <View style={tw`gap-3`}>
+          <InputLayout isRequired label="Name">
+            <TextInput
+              placeholder="Enter your name"
+              value={textValue}
+              onChangeText={setTextValue}
+            />
+          </InputLayout>
+          <InputLayout error="This field is required" label="With Error">
+            <TextInput placeholder="Something went wrong" value="" onChangeText={() => {}} />
+          </InputLayout>
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Select Dropdown */}
+        <SectionTitle title="Select Dropdown" />
+        <InputLayout label="Framework">
+          <SelectDropdown
+            options={DROPDOWN_OPTIONS}
+            placeholder="Choose a framework"
+            selectedId={selectedDropdown}
+            onSelect={setSelectedDropdown}
+          />
+        </InputLayout>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Date Inputs */}
+        <SectionTitle title="Date Modal Input" />
+        <InputLayout label="Birthday">
+          <DateModalInput
+            maximumDate={new Date()}
+            placeholder="Pick a date"
+            value={dateModalValue}
+            onChange={setDateModalValue}
+          />
+        </InputLayout>
+
+        <SectionTitle title="Date Text Input" />
+        <InputLayout label="Date of Birth">
+          <DateTextInput value={dateTextValue} onChange={setDateTextValue} />
+        </InputLayout>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Skeleton */}
+        <SectionTitle title="Skeleton" />
+        <View style={tw`gap-2`}>
+          <Skeleton isLoading>
+            <View style={tw`h-5 w-3/4 rounded`} />
+          </Skeleton>
+          <Skeleton isLoading>
+            <View style={tw`h-5 w-1/2 rounded`} />
+          </Skeleton>
+          <Skeleton isLoading>
+            <View style={tw`h-10 w-full rounded-xl`} />
+          </Skeleton>
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Alert */}
+        <SectionTitle title="Alerts" />
+        <View style={tw`gap-3`}>
+          <Button
+            title="Show Error Alert"
+            onPress={() =>
+              Alert.error({
+                message: 'Something went wrong. Please try again.',
+                title: 'Request Failed',
+              })
+            }
+          />
+          <Button
+            title="Show Success Alert"
+            onPress={() =>
+              Alert.success({
+                title: 'Profile Updated',
+              })
+            }
+          />
+          <Button
+            title="Show Warning Alert"
+            onPress={() =>
+              Alert.warning({
+                actions: [
+                  { label: 'Cancel', variant: 'cancel' },
+                  { label: 'Delete', onPress: () => {} },
+                ],
+                message: 'This action cannot be undone.',
+                title: 'Delete Account',
+              })
+            }
+          />
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Toast */}
+        <SectionTitle title="Toasts" />
+        <View style={tw`gap-3`}>
+          <Button title="Success Toast" onPress={() => Toast.success('Profile saved')} />
+          <Button title="Error Toast" onPress={() => Toast.error('Something went wrong')} />
+          <Button title="Info Toast" onPress={() => Toast.info('New version available')} />
+          <Button title="Warning Toast" onPress={() => Toast.warning('Check your connection')} />
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Modal */}
+        <SectionTitle title="Modal" />
+        <Button title="Open Modal" onPress={showModal} />
+        <Modal isVisible={isModalVisible} onBackButtonPress={hideModal} onBackdropPress={hideModal}>
+          <View pointerEvents="box-none" style={tw`flex-1 items-center justify-center`}>
+            <View style={tw`dark:bg-sheet mx-8 w-[85%] rounded-2xl bg-white p-6`}>
+              <Typography style={tw`text-lg font-semibold`}>Modal Title</Typography>
+              <Typography style={tw`dark:text-subtitle mt-2 text-sm text-gray-500`}>
+                This is a custom modal with any content you want.
+              </Typography>
+              <Button style={tw`mt-4`} title="Close" onPress={hideModal} />
+            </View>
+          </View>
+        </Modal>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Bottom Sheet */}
+        <SectionTitle title="Bottom Sheet" />
+        <Button title="Open Bottom Sheet" onPress={expandSheet} />
+        <BottomSheet
+          backgroundStyle={tw`dark:bg-sheet bg-white`}
+          sheetRef={sheetRef}
+          snapPoints={['40%']}
+        >
+          <View style={tw`p-6`}>
+            <Typography style={tw`text-lg font-semibold`}>Bottom Sheet</Typography>
+            <Typography style={tw`dark:text-subtitle mt-2 text-sm text-gray-500`}>
+              Swipe down or tap the backdrop to dismiss.
+            </Typography>
+            <Button style={tw`mt-4`} title="Close" onPress={closeSheet} />
+          </View>
+        </BottomSheet>
+      </View>
     </ScreenContainer>
   );
 }

package/templates/shared/apps/mobile/src/stores/local-storage.store.ts

@@ -1,15 +1,17 @@
 import { StateCreator, create } from 'zustand';
 import { PersistOptions, createJSONStorage, persist } from 'zustand/middleware';
 
+import { createThemeSlice, ThemeSlice } from './theme.slice';
 import { createUserSlice, UserSlice } from './user.slice';
 
 import { MmkvStorage } from '@/stores/mmkvStorage';
 
-export type LocalStorageStore = UserSlice & {
-  _hasHydrated: boolean;
-  setHasHydrated: (hasHydrated: boolean) => void;
-  clear: () => void;
-};
+export type LocalStorageStore = UserSlice &
+  ThemeSlice & {
+    _hasHydrated: boolean;
+    setHasHydrated: (hasHydrated: boolean) => void;
+    clear: () => void;
+  };
 
 type MyPersist = (
   config: StateCreator<LocalStorageStore>,
@@ -21,9 +23,11 @@ export const useLocalStorageStore = create<LocalStorageStore, []>(
     (set, get, store) =>
       (() => {
         const userSlice = createUserSlice(set, get, store);
+        const themeSlice = createThemeSlice(set, get, store);
 
         return {
           ...userSlice,
+          ...themeSlice,
           _hasHydrated: false,
           clear: () => {
             userSlice.signOut();

package/templates/shared/apps/mobile/src/stores/theme.slice.ts

@@ -0,0 +1,15 @@
+import { StateCreator } from 'zustand';
+
+export type ColorScheme = 'light' | 'dark';
+
+export type ThemeSlice = {
+  colorScheme: ColorScheme;
+  setColorScheme: (scheme: ColorScheme) => void;
+  toggleColorScheme: () => void;
+};
+
+export const createThemeSlice: StateCreator<ThemeSlice> = (set, get) => ({
+  colorScheme: 'light',
+  setColorScheme: (scheme: ColorScheme) => set({ colorScheme: scheme }),
+  toggleColorScheme: () => set({ colorScheme: get().colorScheme === 'light' ? 'dark' : 'light' }),
+});

package/templates/shared/apps/mobile/src/stores/user.slice.ts

@@ -9,14 +9,18 @@ export type User = {
 };
 
 export type UserSlice = {
+  pushNotificationsEnabled: boolean;
   setUser: (user: User | null) => void;
+  setPushNotificationsEnabled: (value: boolean) => void;
   signOut: () => void;
   user: User | null;
   clear: () => void;
 };
 
 export const createUserSlice: StateCreator<UserSlice> = (set) => ({
-  clear: () => set({ user: null }),
+  clear: () => set({ pushNotificationsEnabled: true, user: null }),
+  pushNotificationsEnabled: true,
+  setPushNotificationsEnabled: (value: boolean) => set({ pushNotificationsEnabled: value }),
   setUser: (user: User | null) => set({ user }),
   signOut: () => set({ user: null }),
   user: null,

package/templates/shared/apps/mobile/src/tailwind/index.ts

@@ -60,13 +60,13 @@ export const errorContainerStyle = (err: boolean) => err && tw`border-red-600`;
 
 export const disabledInputStyle = (isDisabled: boolean) => isDisabled && tw`opacity-50`;
 
-export const focusedInputStyle = (isFocused: boolean) => isFocused && tw``;
+export const focusedInputStyle = (isFocused: boolean) => isFocused && tw`border-primary-400`;
 
 export const errorTextStyle = (err: boolean) => err && tw`text-red-600`;
 
-export const defaultInputContainerStyle = tw`ios:px-4 ios:py-3.5 android:py-1 android:px-3 android:min-h-[50px] flex-row rounded-xl border border-[#3a4556] bg-[#2a3544]`;
+export const defaultInputContainerStyle = tw`ios:px-4 ios:py-3.5 android:py-1 android:px-3 android:min-h-[50px] flex-row rounded-xl border border-gray-300 bg-white`;
 export const defaultInputTextStyle = [
-  tw`flex-1 font-normal text-[#f8f9fa]`,
+  tw`flex-1 font-normal text-gray-900`,
   CONFIG.IS_ANDROID ? { textAlignVertical: 'center' } : null,
 ];
 

package/templates/shared/apps/mobile/tailwind.config.js

@@ -39,6 +39,20 @@ module.exports = {
         2: '2 2 0%',
       },
       colors: {
+        white: '#ffffff',
+        background: '#0f1419',
+        disabled: '#6b7280',
+        divider: '#3a4556',
+        error: '#ef4444',
+        foreground: '#f8f9fa',
+        muted: '#e1e4e8',
+        overlay: '#1e2d3d',
+        placeholder: '#8b92a0',
+        sheet: '#1a2332',
+        subtitle: '#8b92a0',
+        success: '#22c55e',
+        surface: '#2a3544',
+        underlay: '#131a26',
         // https://uicolors.app/create
         gray: {
           50: '#f7f8f8',

package/templates/shared/patches/react-native-animatable+1.4.0.patch

@@ -0,0 +1,71 @@
+diff --git a/node_modules/react-native-animatable/createAnimatableComponent.js b/node_modules/react-native-animatable/createAnimatableComponent.js
+index 7be96ea..e8fd51a 100644
+--- a/node_modules/react-native-animatable/createAnimatableComponent.js
++++ b/node_modules/react-native-animatable/createAnimatableComponent.js
+@@ -31,6 +31,9 @@ const INTERPOLATION_STYLE_PROPERTIES = [
+   'textDecorationColor',
+   // Image styles
+   'tintColor',
++  // 'width', 'height'
++  'width',
++  'height'
+ ];
+ 
+ const ZERO_CLAMPED_STYLE_PROPERTIES = ['width', 'height'];
+@@ -241,10 +244,7 @@ export default function createAnimatableComponent(WrappedComponent) {
+       );
+       Object.keys(currentTransitionValues).forEach((key) => {
+         const value = currentTransitionValues[key];
+-        if (
+-          INTERPOLATION_STYLE_PROPERTIES.indexOf(key) !== -1 ||
+-          typeof value !== 'number'
+-        ) {
++        if (INTERPOLATION_STYLE_PROPERTIES.indexOf(key) !== -1) {
+           transitionValues[key] = new Animated.Value(0);
+           styleValues[key] = value;
+         } else {
+@@ -454,30 +454,18 @@ export default function createAnimatableComponent(WrappedComponent) {
+         if (!transitionValue) {
+           transitionValue = new Animated.Value(0);
+         }
+-        const needsInterpolation =
+-          INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1 ||
+-          typeof value !== 'number';
+-        const needsZeroClamping =
+-          ZERO_CLAMPED_STYLE_PROPERTIES.indexOf(property) !== -1;
++        const needsInterpolation = INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1;
++        const needsZeroClamping = ZERO_CLAMPED_STYLE_PROPERTIES.indexOf(property) !== -1;
+         if (needsInterpolation) {
+           transitionValue.setValue(0);
+           transitionStyle[property] = transitionValue.interpolate({
+             inputRange: [0, 1],
+             outputRange: [fromValue, toValue],
++            extrapolateLeft: needsZeroClamping ? 'clamp' : 'extend'
+           });
+           currentTransitionValues[property] = toValue;
+           toValuesFlat[property] = 1;
+         } else {
+-          if (needsZeroClamping) {
+-            transitionStyle[property] = transitionValue.interpolate({
+-              inputRange: [0, 1],
+-              outputRange: [0, 1],
+-              extrapolateLeft: 'clamp',
+-            });
+-            currentTransitionValues[property] = toValue;
+-          } else {
+-            transitionStyle[property] = transitionValue;
+-          }
+           transitionValue.setValue(fromValue);
+         }
+       });
+@@ -504,9 +492,7 @@ export default function createAnimatableComponent(WrappedComponent) {
+ 
+       Object.keys(toValuesFlat).forEach((property) => {
+         const toValue = toValuesFlat[property];
+-        const needsInterpolation =
+-          INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1 ||
+-          typeof value !== 'number';
++        const needsInterpolation = INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1;
+         const needsZeroClamping =
+           ZERO_CLAMPED_STYLE_PROPERTIES.indexOf(property) !== -1;
+         const transitionStyle = this.state.transitionStyle[property];