From 5b2933e8e539034f0274ce32dd309b292e928831 Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi Date: Mon, 11 Nov 2024 15:06:57 +0100 Subject: [PATCH 1/5] refactor: updates core folder to lib --- docs/src/content/docs/guides/authentication.mdx | 4 ++-- docs/src/content/docs/recipes/sentry-setup.mdx | 2 +- docs/src/content/docs/testing/unit-testing.mdx | 2 +- src/{core => lib}/auth/index.tsx | 0 src/{core => lib}/auth/utils.tsx | 2 +- src/{core => lib}/env.js | 0 src/{core => lib}/hooks/index.tsx | 0 src/{core => lib}/hooks/use-is-first-time.tsx | 0 src/{core => lib}/hooks/use-selected-theme.tsx | 0 src/{core => lib}/i18n/index.tsx | 0 src/{core => lib}/i18n/react-i18next.d.ts | 0 src/{core => lib}/i18n/resources.ts | 0 src/{core => lib}/i18n/types.ts | 0 src/{core => lib}/i18n/utils.tsx | 0 src/{core => lib}/index.tsx | 0 src/{core => lib}/storage.tsx | 0 src/{core => lib}/test-utils.tsx | 0 src/{core => lib}/use-theme-config.tsx | 2 +- src/{core => lib}/utils.ts | 0 19 files changed, 6 insertions(+), 6 deletions(-) rename src/{core => lib}/auth/index.tsx (100%) rename src/{core => lib}/auth/utils.tsx (81%) rename src/{core => lib}/env.js (100%) rename src/{core => lib}/hooks/index.tsx (100%) rename src/{core => lib}/hooks/use-is-first-time.tsx (100%) rename src/{core => lib}/hooks/use-selected-theme.tsx (100%) rename src/{core => lib}/i18n/index.tsx (100%) rename src/{core => lib}/i18n/react-i18next.d.ts (100%) rename src/{core => lib}/i18n/resources.ts (100%) rename src/{core => lib}/i18n/types.ts (100%) rename src/{core => lib}/i18n/utils.tsx (100%) rename src/{core => lib}/index.tsx (100%) rename src/{core => lib}/storage.tsx (100%) rename src/{core => lib}/test-utils.tsx (100%) rename src/{core => lib}/use-theme-config.tsx (94%) rename src/{core => lib}/utils.ts (100%) diff --git a/docs/src/content/docs/guides/authentication.mdx b/docs/src/content/docs/guides/authentication.mdx index 659ccb7b..e664b9d9 100644 --- a/docs/src/content/docs/guides/authentication.mdx +++ b/docs/src/content/docs/guides/authentication.mdx @@ -42,10 +42,10 @@ The store is composed of 2 states and 3 actions: ## Use Authentication store -You guessed it, you only need to import the store from `@/core` and use it in your component or even call store actions from outside React. +You guessed it, you only need to import the store from `@/lib` and use it in your component or even call store actions from outside React. ```tsx -import { useAuth, hydrate } from '@/core'; +import { useAuth, hydrate } from '@/lib'; hydrate(); // call this when the application is started to check if the user is authenticated or not diff --git a/docs/src/content/docs/recipes/sentry-setup.mdx b/docs/src/content/docs/recipes/sentry-setup.mdx index e9271f41..e8ba8465 100644 --- a/docs/src/content/docs/recipes/sentry-setup.mdx +++ b/docs/src/content/docs/recipes/sentry-setup.mdx @@ -170,7 +170,7 @@ The starter kit did not come with Sentry pre-configured, but it's very easy to s Then, initialize Sentry and configure it with navigation in your `src/app/_layout.tsx` file: ```tsx title='src/app/_layout.tsx' - import { initSentry, useSentryNavigationConfig } from '@/core/sentry'; + import { initSentry, useSentryNavigationConfig } from '@/lib/sentry'; import * as Sentry from '@sentry/react-native'; initSentry(); diff --git a/docs/src/content/docs/testing/unit-testing.mdx b/docs/src/content/docs/testing/unit-testing.mdx index d11aa722..e664e3f3 100644 --- a/docs/src/content/docs/testing/unit-testing.mdx +++ b/docs/src/content/docs/testing/unit-testing.mdx @@ -41,7 +41,7 @@ First, let's create a new file called `login-form.test.tsx` in the `src/screens/ -As you may notice from the code, we are importing a bunch of things from the `@/core/test-utils` directory. This is a simple file that exports everything from the `@testing-library/react-native` library and overrides the `render` function to wrap the component with the providers we need. This way, we don't have to import the providers in every test file. +As you may notice from the code, we are importing a bunch of things from the `@/lib/test-utils` directory. This is a simple file that exports everything from the `@testing-library/react-native` library and overrides the `render` function to wrap the component with the providers we need. This way, we don't have to import the providers in every test file. :::tip You can update this file to add any other providers you need to wrap your components with as well as any other utility functions you need to use in your tests. diff --git a/src/core/auth/index.tsx b/src/lib/auth/index.tsx similarity index 100% rename from src/core/auth/index.tsx rename to src/lib/auth/index.tsx diff --git a/src/core/auth/utils.tsx b/src/lib/auth/utils.tsx similarity index 81% rename from src/core/auth/utils.tsx rename to src/lib/auth/utils.tsx index cfbf7ade..04499d69 100644 --- a/src/core/auth/utils.tsx +++ b/src/lib/auth/utils.tsx @@ -1,4 +1,4 @@ -import { getItem, removeItem, setItem } from '@/core/storage'; +import { getItem, removeItem, setItem } from '@/lib/storage'; const TOKEN = 'token'; diff --git a/src/core/env.js b/src/lib/env.js similarity index 100% rename from src/core/env.js rename to src/lib/env.js diff --git a/src/core/hooks/index.tsx b/src/lib/hooks/index.tsx similarity index 100% rename from src/core/hooks/index.tsx rename to src/lib/hooks/index.tsx diff --git a/src/core/hooks/use-is-first-time.tsx b/src/lib/hooks/use-is-first-time.tsx similarity index 100% rename from src/core/hooks/use-is-first-time.tsx rename to src/lib/hooks/use-is-first-time.tsx diff --git a/src/core/hooks/use-selected-theme.tsx b/src/lib/hooks/use-selected-theme.tsx similarity index 100% rename from src/core/hooks/use-selected-theme.tsx rename to src/lib/hooks/use-selected-theme.tsx diff --git a/src/core/i18n/index.tsx b/src/lib/i18n/index.tsx similarity index 100% rename from src/core/i18n/index.tsx rename to src/lib/i18n/index.tsx diff --git a/src/core/i18n/react-i18next.d.ts b/src/lib/i18n/react-i18next.d.ts similarity index 100% rename from src/core/i18n/react-i18next.d.ts rename to src/lib/i18n/react-i18next.d.ts diff --git a/src/core/i18n/resources.ts b/src/lib/i18n/resources.ts similarity index 100% rename from src/core/i18n/resources.ts rename to src/lib/i18n/resources.ts diff --git a/src/core/i18n/types.ts b/src/lib/i18n/types.ts similarity index 100% rename from src/core/i18n/types.ts rename to src/lib/i18n/types.ts diff --git a/src/core/i18n/utils.tsx b/src/lib/i18n/utils.tsx similarity index 100% rename from src/core/i18n/utils.tsx rename to src/lib/i18n/utils.tsx diff --git a/src/core/index.tsx b/src/lib/index.tsx similarity index 100% rename from src/core/index.tsx rename to src/lib/index.tsx diff --git a/src/core/storage.tsx b/src/lib/storage.tsx similarity index 100% rename from src/core/storage.tsx rename to src/lib/storage.tsx diff --git a/src/core/test-utils.tsx b/src/lib/test-utils.tsx similarity index 100% rename from src/core/test-utils.tsx rename to src/lib/test-utils.tsx diff --git a/src/core/use-theme-config.tsx b/src/lib/use-theme-config.tsx similarity index 94% rename from src/core/use-theme-config.tsx rename to src/lib/use-theme-config.tsx index 051dbc4b..ccebf9fa 100644 --- a/src/core/use-theme-config.tsx +++ b/src/lib/use-theme-config.tsx @@ -5,7 +5,7 @@ import { } from '@react-navigation/native'; import { useColorScheme } from 'nativewind'; -import colors from '@/ui/colors'; +import colors from '@/components/ui/colors'; const DarkTheme: Theme = { ..._DarkTheme, diff --git a/src/core/utils.ts b/src/lib/utils.ts similarity index 100% rename from src/core/utils.ts rename to src/lib/utils.ts From 23edbc9a07def7cfae76ea5311d13c02850be279 Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi Date: Mon, 11 Nov 2024 15:08:02 +0100 Subject: [PATCH 2/5] refactor: update ui folder to components/ui --- docs/src/content/docs/ui-and-theme/Forms.mdx | 2 +- src/app/(app)/_layout.tsx | 8 ++++---- src/app/(app)/index.tsx | 4 ++-- src/app/(app)/settings.tsx | 12 +++++++++--- src/app/(app)/style.tsx | 2 +- src/app/[...messing].tsx | 2 +- src/app/_layout.tsx | 4 ++-- src/app/feed/[id].tsx | 7 ++++++- src/app/feed/add-post.tsx | 9 +++++++-- src/app/login.tsx | 4 ++-- src/app/onboarding.tsx | 10 ++++++++-- src/components/buttons.tsx | 2 +- src/components/card.tsx | 2 +- src/components/colors.tsx | 4 ++-- src/components/inputs.tsx | 6 +++--- src/components/login-form.test.tsx | 2 +- src/components/login-form.tsx | 2 +- src/components/settings/item.tsx | 6 +++--- src/components/settings/items-container.tsx | 4 ++-- src/components/settings/language-item.tsx | 16 ++++++++-------- src/components/settings/theme-item.tsx | 14 +++++++------- src/components/title.tsx | 2 +- src/components/typography.tsx | 2 +- src/{ => components}/ui/button.test.tsx | 2 +- src/{ => components}/ui/button.tsx | 8 ++++---- src/{ => components}/ui/checkbox.test.tsx | 2 +- src/{ => components}/ui/checkbox.tsx | 8 +++----- src/{ => components}/ui/colors.js | 0 .../ui/focus-aware-status-bar.tsx | 0 src/{ => components}/ui/icons/arrow-right.tsx | 2 +- src/{ => components}/ui/icons/caret-down.tsx | 0 src/{ => components}/ui/icons/feed.tsx | 0 src/{ => components}/ui/icons/github.tsx | 0 src/{ => components}/ui/icons/home.tsx | 0 src/{ => components}/ui/icons/index.tsx | 0 src/{ => components}/ui/icons/language.tsx | 0 src/{ => components}/ui/icons/rate.tsx | 0 src/{ => components}/ui/icons/settings.tsx | 0 src/{ => components}/ui/icons/share.tsx | 0 src/{ => components}/ui/icons/style.tsx | 0 src/{ => components}/ui/icons/support.tsx | 0 src/{ => components}/ui/icons/website.tsx | 0 src/{ => components}/ui/image.tsx | 0 src/{ => components}/ui/index.tsx | 0 src/{ => components}/ui/input.test.tsx | 2 +- src/{ => components}/ui/input.tsx | 4 ++-- src/{ => components}/ui/list.tsx | 0 .../ui/modal-keyboard-aware-scroll-view.tsx | 0 src/{ => components}/ui/modal.tsx | 4 ++-- src/{ => components}/ui/progress-bar.tsx | 0 src/{ => components}/ui/select.test.tsx | 4 ++-- src/{ => components}/ui/select.tsx | 6 +++--- src/{ => components}/ui/text.tsx | 10 +++++----- src/{ => components}/ui/utils.tsx | 0 tsconfig.json | 2 +- 55 files changed, 100 insertions(+), 80 deletions(-) rename src/{ => components}/ui/button.test.tsx (98%) rename src/{ => components}/ui/button.tsx (97%) rename src/{ => components}/ui/checkbox.test.tsx (99%) rename src/{ => components}/ui/checkbox.tsx (97%) rename src/{ => components}/ui/colors.js (100%) rename src/{ => components}/ui/focus-aware-status-bar.tsx (100%) rename src/{ => components}/ui/icons/arrow-right.tsx (95%) rename src/{ => components}/ui/icons/caret-down.tsx (100%) rename src/{ => components}/ui/icons/feed.tsx (100%) rename src/{ => components}/ui/icons/github.tsx (100%) rename src/{ => components}/ui/icons/home.tsx (100%) rename src/{ => components}/ui/icons/index.tsx (100%) rename src/{ => components}/ui/icons/language.tsx (100%) rename src/{ => components}/ui/icons/rate.tsx (100%) rename src/{ => components}/ui/icons/settings.tsx (100%) rename src/{ => components}/ui/icons/share.tsx (100%) rename src/{ => components}/ui/icons/style.tsx (100%) rename src/{ => components}/ui/icons/support.tsx (100%) rename src/{ => components}/ui/icons/website.tsx (100%) rename src/{ => components}/ui/image.tsx (100%) rename src/{ => components}/ui/index.tsx (100%) rename src/{ => components}/ui/input.test.tsx (98%) rename src/{ => components}/ui/input.tsx (94%) rename src/{ => components}/ui/list.tsx (100%) rename src/{ => components}/ui/modal-keyboard-aware-scroll-view.tsx (100%) rename src/{ => components}/ui/modal.tsx (97%) rename src/{ => components}/ui/progress-bar.tsx (100%) rename src/{ => components}/ui/select.test.tsx (95%) rename src/{ => components}/ui/select.tsx (97%) rename src/{ => components}/ui/text.tsx (86%) rename src/{ => components}/ui/utils.tsx (100%) diff --git a/docs/src/content/docs/ui-and-theme/Forms.mdx b/docs/src/content/docs/ui-and-theme/Forms.mdx index 28a01b35..4070cc7f 100644 --- a/docs/src/content/docs/ui-and-theme/Forms.mdx +++ b/docs/src/content/docs/ui-and-theme/Forms.mdx @@ -57,7 +57,7 @@ import React from 'react'; import { useForm } from 'react-hook-form'; import * as z from 'zod'; -import { useAuth } from '@/core'; +import { useAuth } from '@/lib'; import { Button, ControlledInput, View } from '@/ui'; const schema = z.object({ diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx index 086e551e..084a99cb 100644 --- a/src/app/(app)/_layout.tsx +++ b/src/app/(app)/_layout.tsx @@ -2,13 +2,13 @@ import { Link, Redirect, SplashScreen, Tabs } from 'expo-router'; import React, { useCallback, useEffect } from 'react'; -import { useAuth, useIsFirstTime } from '@/core'; -import { Pressable, Text } from '@/ui'; +import { Pressable, Text } from '@/components/ui'; import { Feed as FeedIcon, Settings as SettingsIcon, Style as StyleIcon, -} from '@/ui/icons'; +} from '@/components/ui/icons'; +import { useAuth, useIsFirstTime } from '@/lib'; export default function TabLayout() { const status = useAuth.use.status(); @@ -68,7 +68,7 @@ const CreateNewPostLink = () => { return ( - Create + Create ); diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index 4163a4cd..a026dfae 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -4,13 +4,13 @@ import React from 'react'; import type { Post } from '@/api'; import { usePosts } from '@/api'; import { Card } from '@/components/card'; -import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui'; +import { EmptyList, FocusAwareStatusBar, Text, View } from '@/components/ui'; export default function Feed() { const { data, isPending, isError } = usePosts(); const renderItem = React.useCallback( ({ item }: { item: Post }) => , - [] + [], ); if (isError) { diff --git a/src/app/(app)/settings.tsx b/src/app/(app)/settings.tsx index 13cf446a..8428f03a 100644 --- a/src/app/(app)/settings.tsx +++ b/src/app/(app)/settings.tsx @@ -6,9 +6,15 @@ import { Item } from '@/components/settings/item'; import { ItemsContainer } from '@/components/settings/items-container'; import { LanguageItem } from '@/components/settings/language-item'; import { ThemeItem } from '@/components/settings/theme-item'; -import { translate, useAuth } from '@/core'; -import { colors, FocusAwareStatusBar, ScrollView, Text, View } from '@/ui'; -import { Github, Rate, Share, Support, Website } from '@/ui/icons'; +import { + colors, + FocusAwareStatusBar, + ScrollView, + Text, + View, +} from '@/components/ui'; +import { Github, Rate, Share, Support, Website } from '@/components/ui/icons'; +import { translate, useAuth } from '@/lib'; export default function Settings() { const signOut = useAuth.use.signOut(); diff --git a/src/app/(app)/style.tsx b/src/app/(app)/style.tsx index b919ef35..2731161e 100644 --- a/src/app/(app)/style.tsx +++ b/src/app/(app)/style.tsx @@ -4,7 +4,7 @@ import { Buttons } from '@/components/buttons'; import { Colors } from '@/components/colors'; import { Inputs } from '@/components/inputs'; import { Typography } from '@/components/typography'; -import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/ui'; +import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/components/ui'; export default function Style() { return ( diff --git a/src/app/[...messing].tsx b/src/app/[...messing].tsx index 4f07d7cc..f64f54b5 100644 --- a/src/app/[...messing].tsx +++ b/src/app/[...messing].tsx @@ -1,6 +1,6 @@ import { Link, Stack } from 'expo-router'; -import { Text, View } from '@/ui'; +import { Text, View } from '@/components/ui'; export default function NotFoundScreen() { return ( diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index 926671e9..c9346c11 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -11,8 +11,8 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { KeyboardProvider } from 'react-native-keyboard-controller'; import { APIProvider } from '@/api'; -import { hydrateAuth, loadSelectedTheme } from '@/core'; -import { useThemeConfig } from '@/core/use-theme-config'; +import { hydrateAuth, loadSelectedTheme } from '@/lib'; +import { useThemeConfig } from '@/lib/use-theme-config'; export { ErrorBoundary } from 'expo-router'; diff --git a/src/app/feed/[id].tsx b/src/app/feed/[id].tsx index 64e4e539..2e7c086e 100644 --- a/src/app/feed/[id].tsx +++ b/src/app/feed/[id].tsx @@ -2,7 +2,12 @@ import { Stack, useLocalSearchParams } from 'expo-router'; import * as React from 'react'; import { usePost } from '@/api'; -import { ActivityIndicator, FocusAwareStatusBar, Text, View } from '@/ui'; +import { + ActivityIndicator, + FocusAwareStatusBar, + Text, + View, +} from '@/components/ui'; export default function Post() { const local = useLocalSearchParams<{ id: string }>(); diff --git a/src/app/feed/add-post.tsx b/src/app/feed/add-post.tsx index a3741150..d110cb04 100644 --- a/src/app/feed/add-post.tsx +++ b/src/app/feed/add-post.tsx @@ -6,7 +6,12 @@ import { showMessage } from 'react-native-flash-message'; import { z } from 'zod'; import { useAddPost } from '@/api'; -import { Button, ControlledInput, showErrorMessage, View } from '@/ui'; +import { + Button, + ControlledInput, + showErrorMessage, + View, +} from '@/components/ui'; const schema = z.object({ title: z.string().min(10), @@ -37,7 +42,7 @@ export default function AddPost() { onError: () => { showErrorMessage('Error adding post'); }, - } + }, ); }; return ( diff --git a/src/app/login.tsx b/src/app/login.tsx index deacb6d2..1825f824 100644 --- a/src/app/login.tsx +++ b/src/app/login.tsx @@ -3,8 +3,8 @@ import React from 'react'; import type { LoginFormProps } from '@/components/login-form'; import { LoginForm } from '@/components/login-form'; -import { useAuth } from '@/core'; -import { FocusAwareStatusBar } from '@/ui'; +import { FocusAwareStatusBar } from '@/components/ui'; +import { useAuth } from '@/lib'; export default function Login() { const router = useRouter(); diff --git a/src/app/onboarding.tsx b/src/app/onboarding.tsx index 4d0be844..4a001180 100644 --- a/src/app/onboarding.tsx +++ b/src/app/onboarding.tsx @@ -2,8 +2,14 @@ import { useRouter } from 'expo-router'; import React from 'react'; import { Cover } from '@/components/cover'; -import { useIsFirstTime } from '@/core/hooks'; -import { Button, FocusAwareStatusBar, SafeAreaView, Text, View } from '@/ui'; +import { + Button, + FocusAwareStatusBar, + SafeAreaView, + Text, + View, +} from '@/components/ui'; +import { useIsFirstTime } from '@/lib/hooks'; export default function Onboarding() { const [_, setIsFirstTime] = useIsFirstTime(); const router = useRouter(); diff --git a/src/components/buttons.tsx b/src/components/buttons.tsx index 480939f1..762e5911 100644 --- a/src/components/buttons.tsx +++ b/src/components/buttons.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Button, View } from '@/ui'; +import { Button, View } from '@/components/ui'; import { Title } from './title'; diff --git a/src/components/card.tsx b/src/components/card.tsx index f5792296..02f297e1 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -2,7 +2,7 @@ import { Link } from 'expo-router'; import React from 'react'; import type { Post } from '@/api'; -import { Image, Pressable, Text, View } from '@/ui'; +import { Image, Pressable, Text, View } from '@/components/ui'; type Props = Post; diff --git a/src/components/colors.tsx b/src/components/colors.tsx index 3ae5dc56..06df6b9b 100644 --- a/src/components/colors.tsx +++ b/src/components/colors.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Text, View } from '@/ui'; -import colors from '@/ui/colors'; +import { Text, View } from '@/components/ui'; +import colors from '@/components/ui/colors'; import { Title } from './title'; type ColorName = keyof typeof colors; diff --git a/src/components/inputs.tsx b/src/components/inputs.tsx index f28add4d..22e18e84 100644 --- a/src/components/inputs.tsx +++ b/src/components/inputs.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import type { OptionType } from '@/ui'; -import { Input, Select, View } from '@/ui'; -import { Checkbox, Radio, Switch } from '@/ui'; +import type { OptionType } from '@/components/ui'; +import { Input, Select, View } from '@/components/ui'; +import { Checkbox, Radio, Switch } from '@/components/ui'; import { Title } from './title'; diff --git a/src/components/login-form.test.tsx b/src/components/login-form.test.tsx index 9d3914bc..c60d72a7 100644 --- a/src/components/login-form.test.tsx +++ b/src/components/login-form.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { cleanup, screen, setup, waitFor } from '@/core/test-utils'; +import { cleanup, screen, setup, waitFor } from '@/lib/test-utils'; import type { LoginFormProps } from './login-form'; import { LoginForm } from './login-form'; diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx index eca00bad..c67b1c01 100644 --- a/src/components/login-form.tsx +++ b/src/components/login-form.tsx @@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'; import { KeyboardAvoidingView } from 'react-native-keyboard-controller'; import * as z from 'zod'; -import { Button, ControlledInput, Text, View } from '@/ui'; +import { Button, ControlledInput, Text, View } from '@/components/ui'; const schema = z.object({ name: z.string().optional(), diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx index 96219595..270fd2b4 100644 --- a/src/components/settings/item.tsx +++ b/src/components/settings/item.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type { TxKeyPath } from '@/core'; -import { Pressable, Text, View } from '@/ui'; -import { ArrowRight } from '@/ui/icons'; +import { Pressable, Text, View } from '@/components/ui'; +import { ArrowRight } from '@/components/ui/icons'; +import type { TxKeyPath } from '@/lib'; type ItemProps = { text: TxKeyPath; diff --git a/src/components/settings/items-container.tsx b/src/components/settings/items-container.tsx index 67012530..3193bcc9 100644 --- a/src/components/settings/items-container.tsx +++ b/src/components/settings/items-container.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import type { TxKeyPath } from '@/core'; -import { Text, View } from '@/ui'; +import { Text, View } from '@/components/ui'; +import type { TxKeyPath } from '@/lib'; type Props = { children: React.ReactNode; diff --git a/src/components/settings/language-item.tsx b/src/components/settings/language-item.tsx index 0115411e..a7e77d97 100644 --- a/src/components/settings/language-item.tsx +++ b/src/components/settings/language-item.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import { useSelectedLanguage } from '@/core'; -import { translate } from '@/core'; -import type { Language } from '@/core/i18n/resources'; -import type { OptionType } from '@/ui'; -import { Options, useModal } from '@/ui'; +import type { OptionType } from '@/components/ui'; +import { Options, useModal } from '@/components/ui'; +import { useSelectedLanguage } from '@/lib'; +import { translate } from '@/lib'; +import type { Language } from '@/lib/i18n/resources'; import { Item } from './item'; @@ -16,7 +16,7 @@ export const LanguageItem = () => { setLanguage(option.value as Language); modal.dismiss(); }, - [setLanguage, modal] + [setLanguage, modal], ); const langs = React.useMemo( @@ -24,12 +24,12 @@ export const LanguageItem = () => { { label: translate('settings.english'), value: 'en' }, { label: translate('settings.arabic'), value: 'ar' }, ], - [] + [], ); const selectedLanguage = React.useMemo( () => langs.find((lang) => lang.value === language), - [language, langs] + [language, langs], ); return ( diff --git a/src/components/settings/theme-item.tsx b/src/components/settings/theme-item.tsx index f0a46e56..a26fccae 100644 --- a/src/components/settings/theme-item.tsx +++ b/src/components/settings/theme-item.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import type { ColorSchemeType } from '@/core'; -import { translate, useSelectedTheme } from '@/core'; -import type { OptionType } from '@/ui'; -import { Options, useModal } from '@/ui'; +import type { OptionType } from '@/components/ui'; +import { Options, useModal } from '@/components/ui'; +import type { ColorSchemeType } from '@/lib'; +import { translate, useSelectedTheme } from '@/lib'; import { Item } from './item'; @@ -16,7 +16,7 @@ export const ThemeItem = () => { setSelectedTheme(option.value as ColorSchemeType); modal.dismiss(); }, - [setSelectedTheme, modal] + [setSelectedTheme, modal], ); const themes = React.useMemo( @@ -25,12 +25,12 @@ export const ThemeItem = () => { { label: `${translate('settings.theme.light')} 🌞`, value: 'light' }, { label: `${translate('settings.theme.system')} ⚙️`, value: 'system' }, ], - [] + [], ); const theme = React.useMemo( () => themes.find((t) => t.value === selectedTheme), - [selectedTheme, themes] + [selectedTheme, themes], ); return ( diff --git a/src/components/title.tsx b/src/components/title.tsx index a0dd88af..cd082044 100644 --- a/src/components/title.tsx +++ b/src/components/title.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Text, View } from '@/ui'; +import { Text, View } from '@/components/ui'; type Props = { text: string; diff --git a/src/components/typography.tsx b/src/components/typography.tsx index cd027eaf..ef43ff80 100644 --- a/src/components/typography.tsx +++ b/src/components/typography.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Text, View } from '@/ui'; +import { Text, View } from '@/components/ui'; import { Title } from './title'; diff --git a/src/ui/button.test.tsx b/src/components/ui/button.test.tsx similarity index 98% rename from src/ui/button.test.tsx rename to src/components/ui/button.test.tsx index 5fc5f2ef..b70ca840 100644 --- a/src/ui/button.test.tsx +++ b/src/components/ui/button.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Text } from 'react-native'; -import { cleanup, render, screen, setup } from '@/core/test-utils'; +import { cleanup, render, screen, setup } from '@/lib/test-utils'; import { Button } from './button'; diff --git a/src/ui/button.tsx b/src/components/ui/button.tsx similarity index 97% rename from src/ui/button.tsx rename to src/components/ui/button.tsx index c0435d57..8507ba91 100644 --- a/src/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -58,7 +58,7 @@ const button = tv({ label: 'text-sm', indicator: 'h-2', }, - icon: { container: 'h-9 w-9' }, + icon: { container: 'size-9' }, }, disabled: { true: { @@ -105,11 +105,11 @@ export const Button = React.forwardRef( textClassName = '', ...props }, - ref + ref, ) => { const styles = React.useMemo( () => button({ variant, disabled, size }), - [variant, disabled, size] + [variant, disabled, size], ); return ( @@ -142,5 +142,5 @@ export const Button = React.forwardRef( )} ); - } + }, ); diff --git a/src/ui/checkbox.test.tsx b/src/components/ui/checkbox.test.tsx similarity index 99% rename from src/ui/checkbox.test.tsx rename to src/components/ui/checkbox.test.tsx index 6c656262..5df542bb 100644 --- a/src/ui/checkbox.test.tsx +++ b/src/components/ui/checkbox.test.tsx @@ -3,7 +3,7 @@ import 'react-native'; import React from 'react'; -import { cleanup, screen, setup } from '@/core/test-utils'; +import { cleanup, screen, setup } from '@/lib/test-utils'; import { Checkbox, Radio, Switch } from './checkbox'; diff --git a/src/ui/checkbox.tsx b/src/components/ui/checkbox.tsx similarity index 97% rename from src/ui/checkbox.tsx rename to src/components/ui/checkbox.tsx index 17c28357..fc52bc10 100644 --- a/src/ui/checkbox.tsx +++ b/src/components/ui/checkbox.tsx @@ -8,7 +8,7 @@ import { } from 'react-native'; import Svg, { Path } from 'react-native-svg'; -import colors from '@/ui/colors'; +import colors from '@/components/ui/colors'; import { Text } from './text'; @@ -159,9 +159,7 @@ export const RadioIcon = ({ checked = false }: IconProps) => { transition={{ borderColor: { duration: 100, type: 'timing' } }} > { /> ( ((props, ref) => { {error && ( {error} diff --git a/src/ui/list.tsx b/src/components/ui/list.tsx similarity index 100% rename from src/ui/list.tsx rename to src/components/ui/list.tsx diff --git a/src/ui/modal-keyboard-aware-scroll-view.tsx b/src/components/ui/modal-keyboard-aware-scroll-view.tsx similarity index 100% rename from src/ui/modal-keyboard-aware-scroll-view.tsx rename to src/components/ui/modal-keyboard-aware-scroll-view.tsx diff --git a/src/ui/modal.tsx b/src/components/ui/modal.tsx similarity index 97% rename from src/ui/modal.tsx rename to src/components/ui/modal.tsx index d5039758..4adcc7ea 100644 --- a/src/ui/modal.tsx +++ b/src/components/ui/modal.tsx @@ -159,7 +159,7 @@ const ModalHeader = React.memo(({ title, dismiss }: ModalHeaderProps) => { <> {title && ( - + {title} @@ -176,7 +176,7 @@ const CloseButton = ({ close }: { close: () => void }) => { return ( { {error && ( {error} diff --git a/src/ui/text.tsx b/src/components/ui/text.tsx similarity index 86% rename from src/ui/text.tsx rename to src/components/ui/text.tsx index 708a068f..682fe7fb 100644 --- a/src/ui/text.tsx +++ b/src/components/ui/text.tsx @@ -3,8 +3,8 @@ import type { TextProps, TextStyle } from 'react-native'; import { I18nManager, StyleSheet, Text as NNText } from 'react-native'; import { twMerge } from 'tailwind-merge'; -import type { TxKeyPath } from '@/core/i18n'; -import { translate } from '@/core/i18n'; +import type { TxKeyPath } from '@/lib/i18n'; +import { translate } from '@/lib/i18n'; interface Props extends TextProps { className?: string; @@ -22,9 +22,9 @@ export const Text = ({ () => twMerge( 'text-base text-black dark:text-white font-inter font-normal', - className + className, ), - [className] + [className], ); const nStyle = React.useMemo( @@ -35,7 +35,7 @@ export const Text = ({ }, style, ]) as TextStyle, - [style] + [style], ); return ( diff --git a/src/ui/utils.tsx b/src/components/ui/utils.tsx similarity index 100% rename from src/ui/utils.tsx rename to src/components/ui/utils.tsx diff --git a/tsconfig.json b/tsconfig.json index 3238a31c..16482ba6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "baseUrl": ".", "paths": { "@/*": ["./src/*"], - "@env": ["./src/core/env.js"] + "@env": ["./src/lib/env.js"] }, "esModuleInterop": true, "checkJs": true From 7e9df354a37e52d1528bcf86c5150b90efd568bf Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi Date: Mon, 11 Nov 2024 15:14:27 +0100 Subject: [PATCH 3/5] refactor: update to use the new ui folder --- .vscode/project.code-snippets | 36 +++++++++--------- babel.config.js | 2 +- .../environment-vars-config.mdx | 6 +-- .../getting-started/project-structure.mdx | 38 +++++++++---------- .../content/docs/guides/authentication.mdx | 4 +- .../docs/guides/internationalization.mdx | 12 +++--- docs/src/content/docs/guides/storage.mdx | 2 +- .../src/content/docs/recipes/sentry-setup.mdx | 4 +- .../src/content/docs/testing/unit-testing.mdx | 2 +- docs/src/content/docs/ui-and-theme/Forms.mdx | 2 +- .../content/docs/ui-and-theme/components.mdx | 18 ++++----- .../content/docs/ui-and-theme/ui-theming.mdx | 4 +- 12 files changed, 65 insertions(+), 65 deletions(-) diff --git a/.vscode/project.code-snippets b/.vscode/project.code-snippets index 9f957fff..8f6d8802 100644 --- a/.vscode/project.code-snippets +++ b/.vscode/project.code-snippets @@ -4,30 +4,30 @@ "body": [ "", " $1", - "" + "", ], - "description": "A Simple View " + "description": "A Simple View ", }, "Text": { "prefix": "t", "body": [ "", " $1", - "" + "", ], - "description": "A Simple Text" + "description": "A Simple Text", }, "export *": { "prefix": "ex *", "body": ["export * from '.$1';"], - "description": "export *" + "description": "export *", }, "Component": { "prefix": "comp", "body": [ "import * as React from 'react';", "", - "import { Text, View } from '@/ui';", + "import { Text, View } from '@/components/ui';", "", "type Props = {", " $2", @@ -39,9 +39,9 @@ " ", " );", "};", - "" + "", ], - "description": "Component" + "description": "Component", }, // https://snippet-generator.app/?description=useQuery+with+variables&tabtrigger=useqv&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D+%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C+%0A++fetcher%3A+%28variables%29+%3D%3E+%7B%0A++++return+client%0A++++++.get%28%60%242%2F%5C%5C%24%7Bvariables.%24%7B5%7D%7D%60%29%22%2C%0A++++++.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A%7D%29%3B%0A&mode=vscode "useQuery with variables": { @@ -63,9 +63,9 @@ " .then((response) => response.data);", " },", "});", - "" + "", ], - "description": "useQuery with variables" + "description": "useQuery with variables", }, //https://snippet-generator.app/?description=useQuery&tabtrigger=useq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Response+%3D+%7B%243%7D%3B%0Atype+Variables+%3D+void%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C%0A++fetcher%3A+%28%29+%3D%3E+%7B%0A++++return+client.get%28%60%242%60%29.then%28%28response%29+%3D%3E+response.data.posts%29%3B%0A++%7D%2C%0A%7D%29%3B%0A&mode=vscode "useQuery": { @@ -85,9 +85,9 @@ " return client.get(`$2`).then((response) => response.data.posts);", " },", "});", - "" + "", ], - "description": "useQuery" + "description": "useQuery", }, //https://snippet-generator.app/?description=useInfiniteQuery&tabtrigger=useiq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createInfiniteQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%2Fclient%27%3B%0Aimport+%7B+DEFAULT_LIMIT%2C+getNextPageParam+%7D+from+%27..%2Fcommon%2Futils%27%3B%0Aimport+type+%7B+PaginateQuery+%7D+from+%27..%2Ftypes%27%3B%0A%0Atype+Response+%3D+void%3B%0Atype+Variables+%3D+PaginateQuery%3C%243%3E%3B%0A%0Aexport+const+use%241+%3D+createInfiniteQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C%0A++fetcher%3A+%28_variables%3A+any%2C+%7B+pageParam+%7D%29%3A+Promise%3CResponse%3E+%3D%3E+%7B%0A++++return+client%28%7B%0A++++++url%3A+%60%2F%242%2F%60%2C%0A++++++method%3A+%27GET%27%2C%0A++++++params%3A+%7B%0A++++++++limit%3A+DEFAULT_LIMIT%2C%0A++++++++offset%3A+pageParam%2C%0A++++++%7D%2C%0A++++%7D%29.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A++getNextPageParam%2C%0A++initialPageParam%3A+0%2C%0A%7D%29%3B&mode=vscode "useInfiniteQuery": { @@ -117,9 +117,9 @@ " },", " getNextPageParam,", " initialPageParam: 0,", - "});" + "});", ], - "description": "useInfiniteQuery" + "description": "useInfiniteQuery", }, //https://snippet-generator.app/?description=useMutation+&tabtrigger=usem&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createMutation+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D+%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createMutation%3CResponse%2C+Variables%2C+AxiosError%3E%28%0A++async+%28variables%29+%3D%3E%0A++++client%28%7B%0A++++++url%3A+%27%242%27%2C%0A++++++method%3A+%27POST%27%2C%0A++++++data%3A+variables%2C%0A++++%7D%29.then%28%28response%29+%3D%3E+response.data%29%0A%29%3B&mode=vscode @@ -141,13 +141,13 @@ " method: 'POST',", " data: variables,", " }).then((response) => response.data)", - "});" + "});", ], - "description": "useMutation " + "description": "useMutation ", }, "navigate": { "prefix": "navigate", "body": ["const { navigate } = useNavigation();", ""], - "description": "navigate" - } + "description": "navigate", + }, } diff --git a/babel.config.js b/babel.config.js index 06392144..106f3b21 100644 --- a/babel.config.js +++ b/babel.config.js @@ -12,7 +12,7 @@ module.exports = function (api) { root: ['./'], alias: { '@': './src', - '@env': './src/core/env.js', + '@env': './src/lib/env.js', }, extensions: [ '.ios.ts', diff --git a/docs/src/content/docs/getting-started/environment-vars-config.mdx b/docs/src/content/docs/getting-started/environment-vars-config.mdx index b00b7160..b1f47233 100644 --- a/docs/src/content/docs/getting-started/environment-vars-config.mdx +++ b/docs/src/content/docs/getting-started/environment-vars-config.mdx @@ -10,7 +10,7 @@ import Code from '../../../components/code.astro'; Managing environment variables in your project is an essential task, but it can also be challenging. That's why we have included a complete setup for environment variables in this project. This setup comes with validation and type-checking using the `zod` library. -All the code related to environment variables is located in the `env.js` and `src/core/env.js` files. The `env.js` read the `APP_ENV` variable and loads the correct `.env` file, then defines the `zod` schema for the environment variables for client and build-time, parses the `_env` object, and returns the parsed object, or throws errors in case of invalid or missing variables. +All the code related to environment variables is located in the `env.js` and `src/lib/env.js` files. The `env.js` read the `APP_ENV` variable and loads the correct `.env` file, then defines the `zod` schema for the environment variables for client and build-time, parses the `_env` object, and returns the parsed object, or throws errors in case of invalid or missing variables. To increase security, we are splitting environment variables into two parts: @@ -90,7 +90,7 @@ export const client = axios.create({ ``` :::note[Important] -Using `import { Env } from '@env';` will import the env from the `src/core/env.js` file, which export client only env vars. +Using `import { Env } from '@env';` will import the env from the `src/lib/env.js` file, which export client only env vars. ::: 6. Use `APP_ENV` to load the correct `.env` file : @@ -147,7 +147,7 @@ Now it's as easy as importing `Env` , `ClientEnv` and `withEnvSuffix` from the ` Here, we added a separate file to export all variables that have already been passed in the `extra` property to the client side. We added a little bit of magic to make it type-safe and easy to use. - + Now the environment variables are ready to use in your project. You can access them in your code by importing `Env` from `@env` and using it like this: diff --git a/docs/src/content/docs/getting-started/project-structure.mdx b/docs/src/content/docs/getting-started/project-structure.mdx index b1fc9b2a..35679f97 100644 --- a/docs/src/content/docs/getting-started/project-structure.mdx +++ b/docs/src/content/docs/getting-started/project-structure.mdx @@ -25,6 +25,21 @@ If you open the new project in VSCode you will see the following structure: - login.tsx - onboarding.tsx - components ## any reusable components + - ui ## core ui and theme configuration + - button.tsx + - checkbox.tsx + - colors.js + - focus-aware-status-bar.tsx + - icons + - image.tsx + - index.tsx + - input.tsx + - list.tsx + - modal.tsx + - progress-bar.tsx + - select.tsx + - text.tsx + - utils.tsx - buttons.tsx - card.tsx - colors.tsx @@ -35,7 +50,7 @@ If you open the new project in VSCode you will see the following structure: - settings/ - title.tsx - typography.tsx -- core ## core files such as auth, localization, storage and more +- lib ## core files such as auth, localization, storage and more - auth - env.js - hooks @@ -51,29 +66,14 @@ If you open the new project in VSCode you will see the following structure: - en.json - types ## global types - index.ts -- ui ## core ui and theme configuration - - button.tsx - - checkbox.tsx - - colors.js - - focus-aware-status-bar.tsx - - icons - - image.tsx - - index.tsx - - input.tsx - - list.tsx - - modal.tsx - - progress-bar.tsx - - select.tsx - - text.tsx - - utils.tsx -- `ui`: This folder contains all the UI components and the theme configuration. We provide minimal components with a basic `obytes` theme. You can add your own components and theme configuration here. +- `components/ui`: This folder contains all the UI components and the theme configuration. We provide minimal components with a basic `obytes` theme. You can add your own components and theme configuration here. -- `components`: This folder contains the components of the app. mainly components used inside the app folder. The only difference between `ui` and `components` is that `ui` is more generic and can be used in any project, while `components` are more specific to the project. +- `components`: This folder contains the components of the app. mainly components used inside the app folder. -- `core`: This folder contains the core files, such as authentication, localization, storage, and more. It can be shared with other projects. That's why we are only including modules that have nothing to do with project logic. This approach helps us share code between projects and also update the starter with new features. +- `lib`: This folder contains the core files, such as authentication, localization, storage, and more. It can be shared with other projects. That's why we are only including modules that have nothing to do with project logic. This approach helps us share code between projects and also update the starter with new features. - `app`: This folder contains the routes of the app, along with its layout routes such as stack and tab navigation structures. We provide a basic navigation structure for the demo app that you can modify to fit your needs. diff --git a/docs/src/content/docs/guides/authentication.mdx b/docs/src/content/docs/guides/authentication.mdx index e664b9d9..fbb2e113 100644 --- a/docs/src/content/docs/guides/authentication.mdx +++ b/docs/src/content/docs/guides/authentication.mdx @@ -20,7 +20,7 @@ Zustand works very well with TypeScript and can be easily used outside the React As mentioned earlier, we use Zustand to manage the authentication state of the application. The authentication store is located in `src/store/auth` and is utilized for managing the authentication state of the application. - + The store is composed of 2 states and 3 actions: @@ -32,7 +32,7 @@ The store is composed of 2 states and 3 actions: - `useToken`: The token of the user. It is used to authenticate the user to the API. It is stored in the storage of the device and we use it to hydrate the authentication status state when the application is started. - For the Demo app `useToken` is a simple object that contains the `accessToken` and the `refreshToken`. You can add more fields if you update the `TokenType` type in `src/core/auth/utils.ts`. + For the Demo app `useToken` is a simple object that contains the `accessToken` and the `refreshToken`. You can add more fields if you update the `TokenType` type in `src/lib/auth/utils.ts`. - `signIn`: TThe function performs user sign-in. It accepts a token as a parameter, sets the token state, stores it locally, and updates the status to `signIn`. diff --git a/docs/src/content/docs/guides/internationalization.mdx b/docs/src/content/docs/guides/internationalization.mdx index 25917de6..6dc9d427 100644 --- a/docs/src/content/docs/guides/internationalization.mdx +++ b/docs/src/content/docs/guides/internationalization.mdx @@ -12,12 +12,12 @@ The starter comes with a basic internationalization setup. It uses [expo-localiz ## Adding a new language -Mainly the demo app supports two languages: English and Arabic (RTL). You can add more languages by adding the translation files in the `src/translations` folder and adding the language code to the `src/core/i18n/resources.ts` file. +Mainly the demo app supports two languages: English and Arabic (RTL). You can add more languages by adding the translation files in the `src/translations` folder and adding the language code to the `src/lib/i18n/resources.ts` file. - + :::tip -Anything related to internationalization should be found in the `src/core/i18n` folder. +Anything related to internationalization should be found in the `src/lib/i18n` folder. ::: ## Using translations in your app @@ -30,7 +30,7 @@ The i18n core module provides a set of utility functions to help you use transla import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Text } from '@/ui'; +import { Text } from '@/components/ui'; export const Foo = () => { const { t } = useTranslation(); @@ -47,7 +47,7 @@ or as `Text` component comes with translation support, you can easily use it as ```tsx import React from 'react'; -import { Text } from '@/ui'; +import { Text } from '@/components/ui'; export const Foo = () => { return ; @@ -58,7 +58,7 @@ export const Foo = () => { Additionally, the `useSetLanguage` hook will save the selected language in device storage using `MMKV` and will be used as the default language when the app is opened again As well as adding some extra config for RTL languages while updating the selected language. - + ## Robust translation diff --git a/docs/src/content/docs/guides/storage.mdx b/docs/src/content/docs/guides/storage.mdx index 491099d8..2235de72 100644 --- a/docs/src/content/docs/guides/storage.mdx +++ b/docs/src/content/docs/guides/storage.mdx @@ -12,6 +12,6 @@ import CodeBlock from '../../../components/code.astro'; The starter comes with a simple storage module that uses [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) to store data in a key-value format. We also added a simple storage utility to assist you in using the storage module. - + The `react-native-mmkv` library provides various features such as using hooks and adding encryption to stored data. Feel free to check the [official docs](https://github.com/mrousavy/react-native-mmkv) for more information. diff --git a/docs/src/content/docs/recipes/sentry-setup.mdx b/docs/src/content/docs/recipes/sentry-setup.mdx index e8ba8465..7665d709 100644 --- a/docs/src/content/docs/recipes/sentry-setup.mdx +++ b/docs/src/content/docs/recipes/sentry-setup.mdx @@ -132,9 +132,9 @@ The starter kit did not come with Sentry pre-configured, but it's very easy to s ``` 8. Now you are ready to initialize Sentry in your app. - Create a new file `src/core/sentry.ts` and add the following code: + Create a new file `src/lib/sentry.ts` and add the following code: - ```tsx title='src/core/sentry.ts' + ```tsx title='src/lib/sentry.ts' import { useNavigationContainerRef } from 'expo-router'; import { useEffect } from 'react'; import * as Sentry from '@sentry/react-native'; diff --git a/docs/src/content/docs/testing/unit-testing.mdx b/docs/src/content/docs/testing/unit-testing.mdx index e664e3f3..9f64512c 100644 --- a/docs/src/content/docs/testing/unit-testing.mdx +++ b/docs/src/content/docs/testing/unit-testing.mdx @@ -46,7 +46,7 @@ As you may notice from the code, we are importing a bunch of things from the `@/ :::tip You can update this file to add any other providers you need to wrap your components with as well as any other utility functions you need to use in your tests. - + use `setup` function in case you need to test interactions with the component. It returns a user (userEvent) object that you can use to interact with the component. ::: diff --git a/docs/src/content/docs/ui-and-theme/Forms.mdx b/docs/src/content/docs/ui-and-theme/Forms.mdx index 4070cc7f..02d60454 100644 --- a/docs/src/content/docs/ui-and-theme/Forms.mdx +++ b/docs/src/content/docs/ui-and-theme/Forms.mdx @@ -58,7 +58,7 @@ import { useForm } from 'react-hook-form'; import * as z from 'zod'; import { useAuth } from '@/lib'; -import { Button, ControlledInput, View } from '@/ui'; +import { Button, ControlledInput, View } from '@/components/ui'; const schema = z.object({ email: z.string().email(), diff --git a/docs/src/content/docs/ui-and-theme/components.mdx b/docs/src/content/docs/ui-and-theme/components.mdx index 99a77d85..90105770 100644 --- a/docs/src/content/docs/ui-and-theme/components.mdx +++ b/docs/src/content/docs/ui-and-theme/components.mdx @@ -11,7 +11,7 @@ import CodeBlock from '../../../components/code.astro'; The starter comes with a set of basic components and a simple design system based on Nativewind to help you get started and save you time. -All those components can be found in the `src/ui/core` folder. Our philosophy is to keep the components as simple as possible and to avoid adding too much logic to them. This way, they are easier to reuse and customize. +All those components can be found in the `src/components/ui` folder. Our philosophy is to keep the components as simple as possible and to avoid adding too much logic to them. This way, they are easier to reuse and customize. Based on your needs, you can either use them as they are or customize them to fit your needs. You can also create new ones based on the same approach. @@ -57,7 +57,7 @@ We also provide an `EmptyList` component that you can use to display a message w ```tsx import * as React from 'react'; -import { List, EmptyList, Text } from '@/ui'; +import { List, EmptyList, Text } from '@/components/ui'; const MyComponent = () => { return ( @@ -86,7 +86,7 @@ The `cssInterop` function from `nativewind` is used to apply styling and, in thi ```tsx import * as React from 'react'; -import { Image } from '@/ui'; +import { Image } from '@/components/ui'; const MyComponent = () => { return ( @@ -184,7 +184,7 @@ Read more about Handling Forms [here](../forms/). ```tsx import * as React from 'react'; -import { Input, View } from '@/ui'; +import { Input, View } from '@/components/ui'; const MyComponent = () => { return ( @@ -215,7 +215,7 @@ Based on your needs, you can use the `Modal` if you don't have a fixed height fo ```tsx import * as React from 'react'; -import { Modal, useModal, View, Button, Text } from '@/ui'; +import { Modal, useModal, View, Button, Text } from '@/components/ui'; const MyComponent = () => { const modal = useModal(); @@ -258,8 +258,8 @@ Feel free to update the component implementation to fit your need and as you kee ```tsx import * as React from 'react'; -import type { Option } from '@/ui'; -import { SelectInput, View } from '@/ui'; +import type { Option } from '@/components/ui'; +import { SelectInput, View } from '@/components/ui'; const options: Option[] = [ { value: 'chocolate', label: 'Chocolate' }, @@ -315,7 +315,7 @@ Animations are applied to the icons using the `MotiView` component from the `mot **Use Case** ```tsx -import { Checkbox } from '@/ui'; +import { Checkbox } from '@/components/ui'; const App = () => { const [checked, setChecked] = useState(false); @@ -336,7 +336,7 @@ By default the component will render a label with the text you passed as label p For rendering a custom Checkbox, you can use the `Checkbox.Root`, `Checkbox.Icon`, and `Checkbox.Label` components. ```tsx -import { Checkbox } from '@/ui'; +import { Checkbox } from '@/components/ui'; const App = () => { const [checked, setChecked] = useState(false); diff --git a/docs/src/content/docs/ui-and-theme/ui-theming.mdx b/docs/src/content/docs/ui-and-theme/ui-theming.mdx index 1ae7475e..f84035f2 100644 --- a/docs/src/content/docs/ui-and-theme/ui-theming.mdx +++ b/docs/src/content/docs/ui-and-theme/ui-theming.mdx @@ -72,7 +72,7 @@ This template comes with dark mode support out of the box, and it's very easy to Since we're using [nativewind](https://www.nativewind.dev/) (which uses Tailwind CSS under the hood) and expo-router we let them handle the application of theme, and we just take care of the colors we want. We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeConfig.tsx` to get the theme object that we pass to ThemeProvider directly. For more information check out [expo-router](https://docs.expo.dev/router/appearance/) - + @@ -81,7 +81,7 @@ We set the colors in `ui/theme/colors.js` and we use them in our hook `useThemeC We use the `loadSelectedTheme` function to load the theme from the storage if there's a theme saved in the storage, otherwise, we let nativwind use the default theme (system). To set the selected theme, we use the `useSelectedTheme` hook, which sets the theme in the storage and updates the color scheme of the app. - + ### Add dark mode for each component From 947851f383112b828318ba06fa56ae5b3c50c705 Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi Date: Mon, 11 Nov 2024 17:09:21 +0100 Subject: [PATCH 4/5] fix: fix new ui path --- docs/src/content/docs/ui-and-theme/Forms.mdx | 4 ++-- .../src/content/docs/ui-and-theme/components.mdx | 16 ++++++++-------- docs/src/content/docs/ui-and-theme/fonts.mdx | 2 +- tailwind.config.js | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/src/content/docs/ui-and-theme/Forms.mdx b/docs/src/content/docs/ui-and-theme/Forms.mdx index 02d60454..03fee5f9 100644 --- a/docs/src/content/docs/ui-and-theme/Forms.mdx +++ b/docs/src/content/docs/ui-and-theme/Forms.mdx @@ -20,12 +20,12 @@ As we mention in the components section of the documentation [here](../component Here is the complete code of our `ControlledInput` when we use `useController` hook from react-hook-form to handle form state and validation rules: - + If you want to create your own controlled component, you just need to make sure your component props type extends from `InputControllerType` the same way we are using it with `ControlledInput`. Here is another example of a Select input we create using the same approach as `ControlledInput`: - + ## Use Case diff --git a/docs/src/content/docs/ui-and-theme/components.mdx b/docs/src/content/docs/ui-and-theme/components.mdx index 90105770..f3612378 100644 --- a/docs/src/content/docs/ui-and-theme/components.mdx +++ b/docs/src/content/docs/ui-and-theme/components.mdx @@ -45,7 +45,7 @@ To save time when creating new components or screens, we can simply start typing The `List` component references the FlashList component from the `@shopify/flash-list` package. - + **Props** @@ -75,7 +75,7 @@ const MyComponent = () => { For the `Image` component, we use the `expo-image` library to provide a fast and performant image component. The `Image` component is a wrapper around the `Image` component from `expo-image` package with additional styling provided by `nativewind`. The `cssInterop` function from `nativewind` is used to apply styling and, in this way, the `className` property is applied to the `style` property of the `Image` component. - + **Props** @@ -104,7 +104,7 @@ const MyComponent = () => { With this custom Text component, you can use the translation key as the `tx` prop, and it will automatically translate the text based on the current locale, as well as support right-to-left (RTL) languages based on the selected locale. - + :::tip You can also use the `t` snippet to create a simple Text with a default `className`. @@ -142,7 +142,7 @@ The `tv` function from `tailwind-variants` is used to create a function that gen Each variant should include styles for the `container`, `indicator`, and `label` keys. The `container` style is for the `Pressable`, the `label` style is for the `Text` component, and the `indicator` style is for the `ActivityIndicator` component when the `loading` prop is `true`. - + **Props** @@ -168,7 +168,7 @@ The component utilizes the tv function from Tailwind Variants to define styling We tried to keep the ` Input` component as simple as possible, but you can add more functionality, such as `onFocus` and `onBlur`, or adding left and right icons to the input. - + **Props** @@ -203,7 +203,7 @@ We opt to use a bottom sheet instead of a modal to make it more flexible and eas Based on your needs, you can use the `Modal` if you don't have a fixed height for the modal content. - + **Props** @@ -241,7 +241,7 @@ The component uses the `tv` function from Tailwind Variants to define styling sl Feel free to update the component implementation to fit your need and as you keep the same Props signature for the `Select` component the component will work with our form handling solution without any changes. - + **Props** @@ -299,7 +299,7 @@ For handling common functionality like handling press events and accessibility s Animations are applied to the icons using the `MotiView` component from the `moti` library. These animations change the appearance of the icons based on their checked state. - + **Props** diff --git a/docs/src/content/docs/ui-and-theme/fonts.mdx b/docs/src/content/docs/ui-and-theme/fonts.mdx index 9627863e..063de34b 100644 --- a/docs/src/content/docs/ui-and-theme/fonts.mdx +++ b/docs/src/content/docs/ui-and-theme/fonts.mdx @@ -31,7 +31,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({ Next, Make sure to add your new font to Tailwind CSS config to use it with `className` ```js title="tailwind.config.js" -const colors = require('./src/ui/theme/colors'); +const colors = require('./src/components/ui/theme/colors'); /** @type {import('tailwindcss').Config} */ module.exports = { diff --git a/tailwind.config.js b/tailwind.config.js index 7686df65..7f55b7af 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,4 @@ -const colors = require('./src/ui/colors'); +const colors = require('./src/components/ui/colors'); /** @type {import('tailwindcss').Config} */ module.exports = { From 775265f7bddbfeeb4f69570fc80f2f08a8d715b1 Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi Date: Mon, 11 Nov 2024 17:21:53 +0100 Subject: [PATCH 5/5] fix: fix tailwind class order warnings --- src/app/(app)/_layout.tsx | 2 +- src/components/ui/input.tsx | 4 ++-- src/components/ui/select.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx index 084a99cb..5eddb4a8 100644 --- a/src/app/(app)/_layout.tsx +++ b/src/app/(app)/_layout.tsx @@ -68,7 +68,7 @@ const CreateNewPostLink = () => { return ( - Create + Create ); diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 8d544da3..104a8f92 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -19,7 +19,7 @@ const inputTv = tv({ container: 'mb-2', label: 'text-grey-100 mb-1 text-lg dark:text-neutral-100', input: - 'font-inter mt-0 rounded-xl border-[0.5px] border-neutral-300 bg-neutral-100 px-4 py-3 text-base font-medium leading-5 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white', + 'mt-0 rounded-xl border-[0.5px] border-neutral-300 bg-neutral-100 px-4 py-3 font-inter text-base font-medium leading-5 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white', }, variants: { @@ -114,7 +114,7 @@ export const Input = React.forwardRef((props, ref) => { {error && ( {error} diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index 76885031..61c4ea1a 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -210,7 +210,7 @@ export const Select = (props: SelectProps) => { {error && ( {error}