diff --git a/docs/README.md b/docs/README.md index 0c6c2c27..ac1e15bd 100644 --- a/docs/README.md +++ b/docs/README.md @@ -26,16 +26,6 @@ This command generates static content into the `build` directory and can be serv ### Deployment -Using SSH: +We are hosting docs on vercel, co you could just use this command: -``` -$ USE_SSH=true yarn deploy -``` - -Not using SSH: - -``` -$ GIT_USER= yarn deploy -``` - -If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. +- vercel --prod diff --git a/docs/docs/data-management/MOCKING.md b/docs/docs/data-management/MOCKING.md index 9a4e775c..bbddf2a2 100644 --- a/docs/docs/data-management/MOCKING.md +++ b/docs/docs/data-management/MOCKING.md @@ -18,7 +18,7 @@ description: Mocking - check how to mock data from backend and display it for us This template uses [MSW](https://mswjs.io/docs) to mock data. -Mocks are automatically generated with orval script - you can check [docs here](/api-connection) +Mocks are automatically generated with orval script - you can check [docs here](/docs/api-connection) ## Enabling mocks diff --git a/docs/src/components/HomePageHeader/HeaderButtons.tsx b/docs/src/components/HomePageHeader/HeaderButtons.tsx new file mode 100644 index 00000000..80c85563 --- /dev/null +++ b/docs/src/components/HomePageHeader/HeaderButtons.tsx @@ -0,0 +1,26 @@ +import styles from './styles.module.css' +import Link from '@docusaurus/Link' +import clsx from 'clsx' + +export default function HeaderButtons() { + return ( +
+ + Read docs + + + Try it + +
+ ) +} diff --git a/docs/src/pages/components/ImageSlider.tsx b/docs/src/components/HomePageHeader/ImageSlider.tsx similarity index 67% rename from docs/src/pages/components/ImageSlider.tsx rename to docs/src/components/HomePageHeader/ImageSlider.tsx index f20da9ee..26ac602f 100644 --- a/docs/src/pages/components/ImageSlider.tsx +++ b/docs/src/components/HomePageHeader/ImageSlider.tsx @@ -1,4 +1,4 @@ -import styles from '../index.module.css' +import styles from './styles.module.css' import Slider from 'react-slick' const sliderSettings = { @@ -48,14 +48,16 @@ const sliderImages = [ }, ] -export const ImageSlider = () => ( -
- - {sliderImages.map((image, index) => ( -
- {image.alt} -
- ))} - -
-) +export default function ImageSlider() { + return ( +
+ + {sliderImages.map((image, index) => ( +
+ {image.alt} +
+ ))} + +
+ ) +} diff --git a/docs/src/pages/HomepageHeader.tsx b/docs/src/components/HomePageHeader/index.tsx similarity index 75% rename from docs/src/pages/HomepageHeader.tsx rename to docs/src/components/HomePageHeader/index.tsx index e9bd8bf8..04244502 100644 --- a/docs/src/pages/HomepageHeader.tsx +++ b/docs/src/components/HomePageHeader/index.tsx @@ -1,11 +1,12 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import { HeaderButtons } from './components/HeaderButtons' -import { ImageSlider } from './components/ImageSlider' -import styles from './index.module.css' + +import styles from './styles.module.css' import Heading from '@theme/Heading' import clsx from 'clsx' +import HeaderButtons from './HeaderButtons' +import ImageSlider from './ImageSlider' -export function HomepageHeader() { +export default function HomepageHeader() { const { siteConfig } = useDocusaurusContext() return ( diff --git a/docs/src/pages/index.module.css b/docs/src/components/HomePageHeader/styles.module.css similarity index 100% rename from docs/src/pages/index.module.css rename to docs/src/components/HomePageHeader/styles.module.css diff --git a/docs/src/pages/components/HeaderButtons.tsx b/docs/src/pages/components/HeaderButtons.tsx deleted file mode 100644 index 0b8ee94d..00000000 --- a/docs/src/pages/components/HeaderButtons.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styles from '../index.module.css' -import Link from '@docusaurus/Link' -import clsx from 'clsx' - -export const HeaderButtons = () => ( -
- - Read docs - - - Try it - -
-) diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index dd0906ee..eb615473 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,6 +1,6 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures' import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import { HomepageHeader } from './HomepageHeader' +import HomepageHeader from '@site/src/components/HomePageHeader' import Layout from '@theme/Layout' export default function Home(): JSX.Element { diff --git a/src/constants/index.ts b/src/constants/index.ts index fcbb97bd..e84be9ac 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -6,3 +6,4 @@ export * from './images' export * from './navigation' export * from './regex' export * from './time' +export * from './links' diff --git a/src/constants/links.ts b/src/constants/links.ts index 9a2c87f7..00b10193 100644 --- a/src/constants/links.ts +++ b/src/constants/links.ts @@ -1,2 +1,4 @@ export const APP_STORE_URL = `https://apps.apple.com/app/id` export const PLAY_STORE_URL = `https://play.google.com/store/apps/details?id=` +export const BACA_APP_URL = `https://binarapps.online/sign-in` +export const BACA_DOCS_URL = `https://baca-docs.vercel.app/docs/overview` diff --git a/src/design-system/components/Text/Text.tsx b/src/design-system/components/Text/Text.tsx index afab8afa..c7168fb6 100644 --- a/src/design-system/components/Text/Text.tsx +++ b/src/design-system/components/Text/Text.tsx @@ -248,6 +248,10 @@ Text.XlBold = generateTextVariant('XlBold') Text.XlMedium = generateTextVariant('XlMedium') Text.XlRegular = generateTextVariant('XlRegular') Text.XlSemibold = generateTextVariant('XlSemibold') +Text.XxlBold = generateTextVariant('XxlBold') +Text.XxlMedium = generateTextVariant('XxlMedium') +Text.XxlRegular = generateTextVariant('XxlRegular') +Text.XxlSemibold = generateTextVariant('XxlSemibold') export { Display, Text } diff --git a/src/design-system/config/textVariants.ts b/src/design-system/config/textVariants.ts index 276ca54c..43f3b3b2 100644 --- a/src/design-system/config/textVariants.ts +++ b/src/design-system/config/textVariants.ts @@ -17,6 +17,10 @@ export type TextVariant = | 'XlMedium' | 'XlRegular' | 'XlSemibold' + | 'XxlBold' + | 'XxlMedium' + | 'XxlRegular' + | 'XxlSemibold' | 'XsBold' | 'XsMedium' | 'XsRegular' @@ -47,6 +51,11 @@ export const textVariants: { XlRegular: { fontWeight: 'Regular', fontSize: 'xl' }, // FIXME: Investigate why Semibold is crashing XlSemibold: { fontWeight: 'Bold', fontSize: 'xl' }, + XxlBold: { fontWeight: 'Bold', fontSize: 'xxl' }, + XxlMedium: { fontWeight: 'Medium', fontSize: 'xxl' }, + XxlRegular: { fontWeight: 'Regular', fontSize: 'xxl' }, + // FIXME: Investigate why Semibold is crashing + XxlSemibold: { fontWeight: 'Bold', fontSize: 'xxl' }, XsBold: { fontWeight: 'Bold', fontSize: 'xs' }, XsMedium: { fontWeight: 'Medium', fontSize: 'xs' }, XsRegular: { fontWeight: 'Regular', fontSize: 'xs' }, diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts index 00190a60..01548ef1 100644 --- a/src/design-system/config/theme.ts +++ b/src/design-system/config/theme.ts @@ -93,7 +93,7 @@ export const ProjectColors = { //CONFIG: Add your project specific colors here modalBackground: 'rgba(0, 0, 0, 0.5)', } -export type TextFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' +export type TextFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' export type DisplayFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' export type FontWeight = 'Regular' | 'Medium' | 'Semibold' | 'Bold' @@ -103,6 +103,7 @@ export const fontTextSize: { [key in TextFontSize]: number } = { md: 16, lg: 18, xl: 20, + xxl: 22, } as const export const fontDisplaySize: { [key in DisplayFontSize]: number } = { diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 3894e7c4..5708120d 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -207,7 +207,11 @@ "reset_password": "Reset password" }, "home_screen": { - "details": "Details" + "details": "Details", + "header_title": "BACA - react native starter", + "header_subtitle": "Start your react native project and boost your productivity", + "read_docs": "Read docs", + "try_it": "Try it" }, "landing_screen": { "go_to_blog": "Open blog", diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index 1e255276..4dfb11dd 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -207,7 +207,11 @@ "reset_password": "Zresetuj hasło" }, "home_screen": { - "details": "Detale" + "details": "Detale", + "header_subtitle": "Zacznij swój projekt w react native i zwiększ swoją produktywność", + "header_title": "BACA - react native starter", + "read_docs": "Przeczytaj dokumentacje", + "try_it": "Wypróbuj" }, "landing_screen": { "go_to_blog": "Otwórz blog", diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index e9484291..7859b39e 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -5,7 +5,6 @@ import { router } from 'expo-router' export const HomeScreen = () => { const { t } = useTranslation() - useScreenOptions({ title: t('navigation.screen_titles.home'), }) diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx index ffafaf54..52f5b661 100644 --- a/src/screens/LandingScreen.tsx +++ b/src/screens/LandingScreen.tsx @@ -1,38 +1,100 @@ -import { CompanyLogo, KeyboardAwareScrollView, LandingHeader } from '@baca/components' -import { Button, Center, Text } from '@baca/design-system' +import { KeyboardAwareScrollView, LandingHeader } from '@baca/components' +import { BACA_DOCS_URL } from '@baca/constants' +import { Button, Center, Text, Box } from '@baca/design-system' import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks' -import { router } from 'expo-router' +import { draftImages } from '@baca/screens' +import { useRouter } from 'expo-router' +import { useState, useEffect, useMemo } from 'react' +import { ImageSourcePropType, Linking, Image, Dimensions, StyleSheet } from 'react-native' export const LandingScreen = () => { const { t } = useTranslation() + const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width) - useScreenOptions({ - title: t('navigation.screen_titles.home'), - }) + const { push } = useRouter() - const navigateToBlog = useCallback(() => { - router.navigate('/blog') - }, []) + const navigateToLogin = useCallback(() => push('/sign-in'), [push]) + const navigateToDocs = useCallback(() => Linking.openURL(BACA_DOCS_URL), []) - const navigateToBigForm = useCallback(() => { - router.navigate('/big-form') + useEffect(() => { + const onChange = ({ window }: { window: { width: number } }) => setScreenWidth(window.width) + const subscription = Dimensions.addEventListener('change', onChange) + return () => subscription?.remove() }, []) + const imageWidth = useMemo(() => { + if (screenWidth >= 1100) { + return '25%' + } else if (screenWidth >= 767) { + return '50%' + } else { + return '100%' + } + }, [screenWidth]) + + const paddingBetweenImages = useMemo(() => { + if (screenWidth >= 1100) { + return 2 + } else if (screenWidth >= 767) { + return 8 + } else if (screenWidth <= 400) { + return 4 + } else { + return 16 + } + }, [screenWidth]) + + const renderItem = (item: ImageSourcePropType, index: number) => ( + + + + + + ) + + useScreenOptions({ + title: t('navigation.screen_titles.home'), + }) + return ( -
- - {t('hello')} - {t('thanks')} - {t('app_information')} - - +
+ + {t('home_screen.header_title')} + + + {t('home_screen.header_subtitle')} + + + + + + {t('home_screen.try_it')} + + + + + {draftImages.map(renderItem)} +
) } + +const styles = StyleSheet.create({ + imageSize: { + borderRadius: 16, + height: '100%', + width: '100%', + }, +}) diff --git a/src/screens/drafts/images.ts b/src/screens/drafts/images.ts new file mode 100644 index 00000000..91937b6b --- /dev/null +++ b/src/screens/drafts/images.ts @@ -0,0 +1,8 @@ +import { ImageSourcePropType } from 'react-native' + +export const draftImages: ImageSourcePropType[] = [ + require('./iphone_signup_draft_light.png'), + require('./iphone_signup_draft_dark.png'), + require('./iphone_settings_draft_light.png'), + require('./iphone_settings_draft_dark.png'), +] diff --git a/src/screens/drafts/iphone_settings_draft_dark.png b/src/screens/drafts/iphone_settings_draft_dark.png new file mode 100644 index 00000000..e80fd5ee Binary files /dev/null and b/src/screens/drafts/iphone_settings_draft_dark.png differ diff --git a/src/screens/drafts/iphone_settings_draft_light.png b/src/screens/drafts/iphone_settings_draft_light.png new file mode 100644 index 00000000..eb4bf248 Binary files /dev/null and b/src/screens/drafts/iphone_settings_draft_light.png differ diff --git a/src/screens/drafts/iphone_signup_draft_dark.png b/src/screens/drafts/iphone_signup_draft_dark.png new file mode 100644 index 00000000..d6e96652 Binary files /dev/null and b/src/screens/drafts/iphone_signup_draft_dark.png differ diff --git a/src/screens/drafts/iphone_signup_draft_light.png b/src/screens/drafts/iphone_signup_draft_light.png new file mode 100644 index 00000000..b0f117b9 Binary files /dev/null and b/src/screens/drafts/iphone_signup_draft_light.png differ diff --git a/src/screens/index.ts b/src/screens/index.ts index 8eff38bd..1ee28740 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -15,3 +15,4 @@ export * from './SettingsScreen' export * from './TestFormScreen' export * from './TypographyScreen' export * from './UserSessionScreen' +export * from './drafts/images'