ignite-parse-auth-kit 1.0.0

package/app/i18n/ko.ts

@@ -0,0 +1,129 @@
+import demoKo from "./demo-ko" // @demo remove-current-line
+import { Translations } from "./en"
+
+const ko: Translations = {
+  common: {
+    ok: "확인!",
+    cancel: "취소",
+    back: "뒤로",
+    logOut: "로그아웃", // @demo remove-current-line
+  },
+  welcomeScreen: {
+    postscript:
+      "잠깐! — 지금 보시는 것은 아마도 당신의 앱의 모양새가 아닐겁니다. (디자이너분이 이렇게 건내주셨다면 모를까요. 만약에 그렇다면, 이대로 가져갑시다!) ",
+    readyForLaunch: "출시 준비가 거의 끝난 나만의 앱!",
+    exciting: "(오, 이거 신나는데요!)",
+    letsGo: "가보자구요!", // @demo remove-current-line
+  },
+  errorScreen: {
+    title: "뭔가 잘못되었습니다!",
+    friendlySubtitle:
+      "이 화면은 오류가 발생할 때 프로덕션에서 사용자에게 표시됩니다. 이 메시지를 커스터마이징 할 수 있고(해당 파일은 `app/i18n/ko.ts` 에 있습니다) 레이아웃도 마찬가지로 수정할 수 있습니다(`app/screens/error`). 만약 이 오류화면을 완전히 없에버리고 싶다면 `app/app.tsx` 파일에서 <ErrorBoundary> 컴포넌트를 확인하기 바랍니다.",
+    reset: "초기화",
+    traceTitle: "%{name} 스택에서의 오류", // @demo remove-current-line
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "너무 텅 비어서.. 너무 슬퍼요..",
+      content: "데이터가 없습니다. 버튼을 눌러서 리프레쉬 하시거나 앱을 리로드하세요.",
+      button: "다시 시도해봅시다",
+    },
+  },
+  // @demo remove-block-start
+  errors: {
+    invalidEmail: "잘못된 이메일 주소 입니다.",
+  },
+  loginScreen: {
+    logIn: "로그인",
+    enterDetails:
+      "일급비밀 정보를 해제하기 위해 상세 정보를 입력하세요. 무엇이 기다리고 있는지 절대 모를겁니다. 혹은 알 수 있을지도 모르겠군요. 엄청 복잡한 뭔가는 아닙니다.",
+    emailFieldLabel: "이메일",
+    passwordFieldLabel: "비밀번호",
+    emailFieldPlaceholder: "이메일을 입력하세요",
+    passwordFieldPlaceholder: "엄청 비밀스러운 암호를 입력하세요",
+    tapToLogIn: "눌러서 로그인 하기!",
+    hint: "힌트: 가장 좋아하는 암호와 아무런 아무 이메일 주소나 사용할 수 있어요 :)",
+  },
+  demoNavigator: {
+    componentsTab: "컴포넌트",
+    debugTab: "디버그",
+    communityTab: "커뮤니티",
+    podcastListTab: "팟캐스트",
+  },
+  demoCommunityScreen: {
+    title: "커뮤니티와 함께해요",
+    tagLine:
+      "전문적인 React Native 엔지니어들로 구성된 Infinite Red 커뮤니티에 접속해서 함께 개발 실력을 향상시켜 보세요!",
+    joinUsOnSlackTitle: "Slack 에 참여하세요",
+    joinUsOnSlack:
+      "전 세계 React Native 엔지니어들과 함께할 수 있는 곳이 있었으면 좋겠죠? Infinite Red Community Slack 에서 대화에 참여하세요! 우리의 성장하는 커뮤니티는 질문을 던지고, 다른 사람들로부터 배우고, 네트워크를 확장할 수 있는 안전한 공간입니다. ",
+    joinSlackLink: "Slack 에 참여하기",
+    makeIgniteEvenBetterTitle: "Ignite 을 향상시켜요",
+    makeIgniteEvenBetter:
+      "Ignite 을 더 좋게 만들 아이디어가 있나요? 기쁜 소식이네요. 우리는 항상 최고의 React Native 도구를 구축하는데 도움을 줄 수 있는 분들을 찾고 있습니다. GitHub 에서 Ignite 의 미래를 만들어 가는것에 함께해 주세요.",
+    contributeToIgniteLink: "Ignite 에 기여하기",
+    theLatestInReactNativeTitle: "React Native 의 최신정보",
+    theLatestInReactNative: "React Native 가 제공하는 모든 최신 정보를 알려드립니다.",
+    reactNativeRadioLink: "React Native 라디오",
+    reactNativeNewsletterLink: "React Native 뉴스레터",
+    reactNativeLiveLink: "React Native 라이브 스트리밍",
+    chainReactConferenceLink: "Chain React 컨퍼런스",
+    hireUsTitle: "다음 프로젝트에 Infinite Red 를 고용하세요",
+    hireUs:
+      "프로젝트 전체를 수행하든, 실무 교육을 통해 팀의 개발 속도에 박차를 가하든 상관없이, Infinite Red 는 React Native 프로젝트의 모든 분야의 에서 도움을 드릴 수 있습니다.",
+    hireUsLink: "메세지 보내기",
+  },
+  demoShowroomScreen: {
+    jumpStart: "프로젝트를 바로 시작할 수 있는 컴포넌트들!",
+    lorem2Sentences:
+      "별 하나에 추억과, 별 하나에 사랑과, 별 하나에 쓸쓸함과, 별 하나에 동경(憧憬)과, 별 하나에 시와, 별 하나에 어머니, 어머니",
+    demoHeaderTxExample: "야호",
+    demoViaTxProp: "`tx` Prop 을 통해",
+    demoViaSpecifiedTxProp: "`{{prop}}Tx` Prop 을 통해",
+  },
+  demoDebugScreen: {
+    howTo: "사용방법",
+    title: "디버그",
+    tagLine:
+      "축하합니다. 여기 아주 고급스러운 React Native 앱 템플릿이 있습니다. 이 보일러 플레이트를 사용해보세요!",
+    reactotron: "Reactotron 으로 보내기",
+    reportBugs: "버그 보고하기",
+    demoList: "데모 목록",
+    demoPodcastList: "데모 팟캐스트 목록",
+    androidReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후, 터미널에서 adb reverse tcp:9090 tcp:9090 을 실행한 다음 앱을 다시 실행해보세요.",
+    iosReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+    macosReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+    webReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+    windowsReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+  },
+  demoPodcastListScreen: {
+    title: "React Native 라디오 에피소드",
+    onlyFavorites: "즐겨찾기만 보기",
+    favoriteButton: "즐겨찾기",
+    unfavoriteButton: "즐겨찾기 해제",
+    accessibility: {
+      cardHint:
+        "에피소드를 들으려면 두 번 탭하세요. 이 에피소드를 좋아하거나 싫어하려면 두 번 탭하고 길게 누르세요.",
+      switch: "즐겨찾기를 사용하려면 스위치를 사용하세요.",
+      favoriteAction: "즐겨찾기 토글",
+      favoriteIcon: "좋아하는 에피소드",
+      unfavoriteIcon: "즐겨찾기하지 않은 에피소드",
+      publishLabel: "{{date}} 에 발행됨",
+      durationLabel: "소요시간: {{hours}}시간 {{minutes}}분 {{seconds}}초",
+    },
+    noFavoritesEmptyState: {
+      heading: "조금 텅 비어 있네요.",
+      content: "즐겨찾기가 없습니다. 에피소드에 있는 하트를 눌러서 즐겨찾기에 추가하세요.",
+    },
+  },
+  // @demo remove-block-start
+  ...demoKo,
+  // @demo remove-block-end
+}
+
+export default ko

package/app/i18n/translate.ts

@@ -0,0 +1,33 @@
+import i18n from "i18next"
+import type { TOptions } from "i18next"
+
+import { TxKeyPath } from "."
+
+/**
+ * Translates text.
+ * @param {TxKeyPath} key - The i18n key.
+ * @param {TOptions} options - The i18n options.
+ * @returns {string} - The translated text.
+ * @example
+ * Translations:
+ *
+ * ```en.ts
+ * {
+ *  "hello": "Hello, {{name}}!"
+ * }
+ * ```
+ *
+ * Usage:
+ * ```ts
+ * import { translate } from "./i18n"
+ *
+ * translate("hello", { name: "world" })
+ * // => "Hello world!"
+ * ```
+ */
+export function translate(key: TxKeyPath, options?: TOptions): string {
+  if (i18n.isInitialized) {
+    return i18n.t(key, options)
+  }
+  return key
+}

package/app/lib/Parse/index.ts

@@ -0,0 +1,2 @@
+export * from './parse'
+export { default } from './parse'

package/app/lib/Parse/parse.ts

@@ -0,0 +1,62 @@
+import { initializeParse } from "@parse/react-native"
+import AsyncStorage from "@react-native-async-storage/async-storage"
+import Parse from "parse/react-native"
+import 'react-native-get-random-values';
+
+
+// Runtime guard + type narrowing
+const getEnv = (key: string): string => {
+  const v = process.env[key]
+  if (!v) throw new Error(`Missing required env var: ${key}`)
+  return v
+}
+
+// Parse server details (now guaranteed strings)
+const PARSE_SERVER_URL = getEnv("EXPO_PUBLIC_SERVER_URL")
+const PARSE_APP_ID = getEnv("EXPO_PUBLIC_APP_ID")
+const PARSE_JS_KEY = getEnv("EXPO_PUBLIC_JAVASCRIPT_KEY")
+
+// console.log("Initializing Parse with server URL:", PARSE_SERVER_URL)
+
+// Initialize Parse with AsyncStorage for React Native
+initializeParse(
+  PARSE_SERVER_URL,
+  PARSE_APP_ID,
+  PARSE_JS_KEY || 'undefined'
+)
+
+// Configure Parse only once
+if (!Parse.applicationId) {
+  // @ts-ignore - serverURL is writeable at runtime
+  Parse.serverURL = PARSE_SERVER_URL
+  Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY)
+  
+  // Set AsyncStorage first
+  Parse.setAsyncStorage(AsyncStorage)
+  
+  // Then enable local datastore
+  Parse.enableLocalDatastore()
+}
+
+// Type-safe wrapper functions
+export const getCurrentUser = async (): Promise<Parse.User | null> => {
+  try {
+    return await Parse.User.currentAsync()
+  } catch (error) {
+    console.error("Error getting current user:", error)
+    return null
+  }
+}
+
+export const fetchAllUsers = async (): Promise<Parse.User[]> => {
+  try {
+    const query = new Parse.Query('_User')
+    const results = await query.find()
+    return results as unknown as Parse.User[]
+  } catch (error) {
+    console.error("Error fetching users:", error)
+    return []
+  }
+}
+
+export default Parse

package/app/navigators/AppNavigator.tsx

@@ -0,0 +1,145 @@
+/**
+ * The app navigator (formerly "AppNavigator" and "MainNavigator") is used for the primary
+ * navigation flows of your app.
+ * Generally speaking, it will contain an auth flow (registration, login, forgot password)
+ * and a "main" flow which the user will use once logged in.
+ */
+import React,{ ComponentProps, useEffect } from "react"
+import {
+  NavigationContainer,
+  NavigatorScreenParams, // @demo remove-current-line
+} from "@react-navigation/native"
+import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack"
+
+import Config from "@/config"
+import { useAuth } from "@/context/AuthContext" // @demo remove-current-line
+import { ErrorBoundary } from "@/screens/ErrorScreen/ErrorBoundary"
+import { LoginScreen } from "@/screens/LoginScreen" // @demo remove-current-line
+import { WelcomeScreen } from "@/screens/WelcomeScreen"
+import { RegisterScreen } from "@/screens/RegisterScreen" // @demo remove-current-line
+import { ChooseAuthScreen } from "@/screens/ChooseAuthScreen" // @demo remove-current-line
+import { ForgetPasswordScreen } from "@/screens/ForgetPasswordScreen"
+import { useAppTheme } from "@/theme/context"
+
+
+import { DemoNavigator, DemoTabParamList } from "./DemoNavigator" // @demo remove-current-line
+import { navigationRef, useBackButtonHandler } from "./navigationUtilities"
+import { Alert } from "react-native"
+import { showQueuedAlert } from "@/components"
+
+
+/**
+ * This type allows TypeScript to know what routes are defined in this navigator
+ * as well as what properties (if any) they might take when navigating to them.
+ *
+ * For more information, see this documentation:
+ *   https://reactnavigation.org/docs/params/
+ *   https://reactnavigation.org/docs/typescript#type-checking-the-navigator
+ *   https://reactnavigation.org/docs/typescript/#organizing-types
+ */
+export type AppStackParamList = {
+  Welcome: undefined
+  Login: undefined // @demo remove-current-line
+  Demo: NavigatorScreenParams<DemoTabParamList> // @demo remove-current-line
+  // 🔥 Your screens go here
+  Register: undefined
+	ChooseAuth: undefined
+	ForgetPassword: undefined
+	// IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST
+}
+
+/**
+ * This is a list of all the route names that will exit the app if the back button
+ * is pressed while in that screen. Only affects Android.
+ */
+const exitRoutes = Config.exitRoutes
+
+export type AppStackScreenProps<T extends keyof AppStackParamList> = NativeStackScreenProps<
+  AppStackParamList,
+  T
+>
+
+// Documentation: https://reactnavigation.org/docs/stack-navigator/
+const Stack = createNativeStackNavigator<AppStackParamList>()
+
+const AppStack = () => {
+  // @demo remove-block-start
+  const { isAuthenticated,checkServerStatus } = useAuth()
+  // @demo remove-block-end
+  const {
+    theme: { colors },
+  } = useAppTheme()
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      const status = await checkServerStatus();
+      if (!status.isRunning) {
+        showQueuedAlert({
+          title: "No connection",
+          message: status.message,
+       
+        })
+      }
+    };
+    
+    // Initial check
+    checkStatus();
+    
+    // Set up interval for periodic checks (every 30 seconds)
+    const intervalId = setInterval(checkStatus, 30000);
+    
+    // Clean up the interval when the component unmounts or when checkServerStatus changes
+    return () => clearInterval(intervalId);
+  }, [checkServerStatus])
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+        navigationBarColor: colors.background,
+        contentStyle: {
+          backgroundColor: colors.background,
+        },
+      }}
+      initialRouteName={isAuthenticated ? "Demo" : "Welcome"} // @demo remove-current-line
+    >
+      {/* @demo remove-block-start */}
+      {isAuthenticated ? (
+        <>
+          {/* @demo remove-block-end */}
+         
+          {/* @demo remove-block-start */}
+          <Stack.Screen name="Demo" component={DemoNavigator} />
+        </>
+      ) : (
+        <>
+         <Stack.Screen name="Welcome" component={WelcomeScreen} />
+         <Stack.Screen name="ChooseAuth" component={ChooseAuthScreen} />
+          <Stack.Screen name="Login" component={LoginScreen} />
+          <Stack.Screen name="Register" component={RegisterScreen} />
+          <Stack.Screen name="ForgetPassword" component={ForgetPasswordScreen} />
+        </>
+      )}
+      {/* @demo remove-block-end */}
+      {/** 🔥 Your screens go here */}
+      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */}
+    </Stack.Navigator>
+  )
+}
+
+export interface NavigationProps
+  extends Partial<ComponentProps<typeof NavigationContainer<AppStackParamList>>> {}
+
+export const AppNavigator = (props: NavigationProps) => {
+  const { navigationTheme } = useAppTheme()
+
+  useBackButtonHandler((routeName) => exitRoutes.includes(routeName))
+
+  return (
+    <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
+      <ErrorBoundary catchErrors={Config.catchErrors}>
+        <AppStack />
+      </ErrorBoundary>
+    </NavigationContainer>
+  )
+}

package/app/navigators/DemoNavigator.tsx

@@ -0,0 +1,137 @@
+import { TextStyle, ViewStyle } from "react-native"
+import { BottomTabScreenProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs"
+import { CompositeScreenProps } from "@react-navigation/native"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+
+import { Icon } from "@/components/Icon"
+import { EpisodeProvider } from "@/context/EpisodeContext"
+import { translate } from "@/i18n/translate"
+import { DemoCommunityScreen } from "@/screens/DemoCommunityScreen"
+import { DemoDebugScreen } from "@/screens/DemoDebugScreen"
+import { DemoPodcastListScreen } from "@/screens/DemoPodcastListScreen"
+import { DemoShowroomScreen } from "@/screens/DemoShowroomScreen/DemoShowroomScreen"
+import type { ThemedStyle } from "@/theme/types"
+import { useAppTheme } from "@/theme/context"
+
+import { AppStackParamList, AppStackScreenProps } from "./AppNavigator"
+
+export type DemoTabParamList = {
+  DemoCommunity: undefined
+  DemoShowroom: { queryIndex?: string; itemIndex?: string }
+  DemoDebug: undefined
+  DemoPodcastList: undefined
+}
+
+/**
+ * Helper for automatically generating navigation prop types for each route.
+ *
+ * More info: https://reactnavigation.org/docs/typescript/#organizing-types
+ */
+export type DemoTabScreenProps<T extends keyof DemoTabParamList> = CompositeScreenProps<
+  BottomTabScreenProps<DemoTabParamList, T>,
+  AppStackScreenProps<keyof AppStackParamList>
+>
+
+const Tab = createBottomTabNavigator<DemoTabParamList>()
+
+/**
+ * This is the main navigator for the demo screens with a bottom tab bar.
+ * Each tab is a stack navigator with its own set of screens.
+ *
+ * More info: https://reactnavigation.org/docs/bottom-tab-navigator/
+ * @returns {JSX.Element} The rendered `DemoNavigator`.
+ */
+export function DemoNavigator() {
+  const { bottom } = useSafeAreaInsets()
+  const {
+    themed,
+    theme: { colors },
+  } = useAppTheme()
+
+  return (
+    <EpisodeProvider>
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+          tabBarHideOnKeyboard: true,
+          tabBarStyle: themed([$tabBar, { height: bottom + 70 }]),
+          tabBarActiveTintColor: colors.text,
+          tabBarInactiveTintColor: colors.text,
+          tabBarLabelStyle: themed($tabBarLabel),
+          tabBarItemStyle: themed($tabBarItem),
+        }}
+      >
+        <Tab.Screen
+          name="DemoShowroom"
+          component={DemoShowroomScreen}
+          options={{
+            tabBarLabel: translate("demoNavigator:componentsTab"),
+            tabBarIcon: ({ focused }) => (
+              <Icon
+                icon="components"
+                color={focused ? colors.tint : colors.tintInactive}
+                size={30}
+              />
+            ),
+          }}
+        />
+
+        <Tab.Screen
+          name="DemoCommunity"
+          component={DemoCommunityScreen}
+          options={{
+            tabBarLabel: translate("demoNavigator:communityTab"),
+            tabBarIcon: ({ focused }) => (
+              <Icon
+                icon="community"
+                color={focused ? colors.tint : colors.tintInactive}
+                size={30}
+              />
+            ),
+          }}
+        />
+
+        <Tab.Screen
+          name="DemoPodcastList"
+          component={DemoPodcastListScreen}
+          options={{
+            tabBarAccessibilityLabel: translate("demoNavigator:podcastListTab"),
+            tabBarLabel: translate("demoNavigator:podcastListTab"),
+            tabBarIcon: ({ focused }) => (
+              <Icon icon="podcast" color={focused ? colors.tint : colors.tintInactive} size={30} />
+            ),
+          }}
+        />
+
+        <Tab.Screen
+          name="DemoDebug"
+          component={DemoDebugScreen}
+          options={{
+            tabBarLabel: translate("demoNavigator:debugTab"),
+            tabBarIcon: ({ focused }) => (
+              <Icon icon="debug" color={focused ? colors.tint : colors.tintInactive} size={30} />
+            ),
+          }}
+        />
+      </Tab.Navigator>
+    </EpisodeProvider>
+  )
+}
+
+const $tabBar: ThemedStyle<ViewStyle> = ({ colors }) => ({
+  backgroundColor: colors.background,
+  borderTopColor: colors.transparent,
+})
+
+const $tabBarItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingTop: spacing.md,
+})
+
+const $tabBarLabel: ThemedStyle<TextStyle> = ({ colors, typography }) => ({
+  fontSize: 12,
+  fontFamily: typography.primary.medium,
+  lineHeight: 16,
+  color: colors.text,
+})
+
+// @demo remove-file