From 568eb95791c78c9762ca0ecdcab871368cda3340 Mon Sep 17 00:00:00 2001 From: Priya Power <49959312+priyapower@users.noreply.github.com> Date: Mon, 23 Sep 2024 12:30:47 -0500 Subject: [PATCH 1/5] Add readme from prototype with sections for new docs --- README.md | 425 +++++++++++++++++++++- apps/rufferal/src/app/screens/Screens.tsx | 3 +- 2 files changed, 415 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 4456d61..bba5870 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,420 @@ -# RufferalFrontend +# Rufferal Frontend + +blarg + +Things to think about + +- graphql +- error handling +- security handling +- unit testing +- integration testing +- e2e testing +- deployment +- env vars and secrets +- deployment +- other developer nice to haves + +## Device Support +_coming soon_ + +### List of devices +_coming soon_ + +### Mobile/Web mobile Viewport sizes + +- Designed for mobile displays from 320×568 through 430×1004 +- Primary test devices + - ANDROID + - Galaxy S8 + - 360 x 740 + - IOS + - iPhone X + - 375 x 812 +- Smallest test devices + - ANDROID + - Galaxy S7 + - 360 x 640 + - IOS + - iPhone 5/SE + - 320 x 568 +- Largest test devices + - ANDROID + - Galaxy Z Flip 5 + - 412 x 1004 + - IOS + - iPhone 15 Pro Max + - 430 x 932 + +### Tablet Viewport sizes +_coming soon_ + +### Desktop Viewport sizes +_coming soon_ + +## Themes +_coming soon_ + +## Installation +_coming soon_ + +## (PROTOTYPE) Themes + +### Colors + +- PRIMARY (slate gray) + - ORIGINAL + - #667080 + - TAILWIND TRANSLATION (until custom colors are handled) + - #6b7280 + - `bg-gray-500` + - `text-white` [pairing] + - `border-gray-500` + - `text-gray-500` +- SECONDARY (light slate gray) + - ORIGINAL + - #EEF1F4 + - TAILWIND TRANSLATION (until custom colors are handled) + - #cbd5e1 + - `bg-slate-200` + - `text-gray-500` [pairing] + - `text-zinc-300` [pairing] + - `border-slate-200` + - `text-slate-200` +- TERTIARY (dark gray) + - ORIGINAL + - #252529 + - TAILWIND TRANSLATION (until custom colors are handled) + - #18181b + - `bg-zinc-900` + - `text-white` [pairing] + - `border-zinc-900` + - `text-zinc-900` +- QUATERNARY (gray) + - ORIGINAL + - #8A8A8F + - TAILWIND TRANSLATION (until custom colors are handled) + - _used for icon tint_ + - #71717a + - `bg-zinc-500` + - `text-zinc-900` [pairing] + - `border-zinc-500` + - `text-zinc-500` +- DISABLED (light gray) + - ORIGINAL + - #C8C7CC + - TAILWIND TRANSLATION (until custom colors are handled) + - _used for text color_ + - #d4d4d8 + - `text-zinc-300` + - `bg-zinc-300` + - `text-white` [pairing] + - `text-gray-500` [pairing] + - `border-zinc-300` +- NEUTRALS + - black + - #000 + - `bg-black` + - `border-black` + - `text-black` + - white + - #fff + - `bg-white` + - `border-white` + - `text-white` + +## (PROTOTYPE) Install + +Setup assumes you have a MacOS + +### Prereqs + +- [Homebrew](https://brew.sh/) + + ```shell + /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + ``` + +- npm and node + + ```shell + brew install node + node -v + npm -v + ``` + +- watchman + + ```shell + brew install watchman + ``` + +- NX + + ```shell + npm install -g nx + ``` + +- Java Development Kit + + ```shell + brew install --cask zulu@17 + ``` + + - After the JDK installation, update `~/.zshrc` (or in `~/.bash_profile`) + - Get path to where cask was installed to double-click installer (probably located at `/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home`) + ```shell + brew info --cask zulu@17 + ``` + - Add or update your JAVA_HOME environment variable to `.zshrc` + ```bash + # Update with appropriate path on your local + export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home + ``` + +- [Android Studio](https://developer.android.com/studio) + + - Download and setup + - While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked: + - Android SDK + - Android SDK Platform + - Android Virtual Device + +- Android SDK + + - Open Android Studio + - Click on "More Actions" button and select "SDK Manager" + - The SDK Manager can also be found within the Android Studio "Settings" dialog, under Languages & Frameworks → Android SDK + - Select the "SDK Platforms" tab from within the SDK Manager + - Check the box next to "Show Package Details" in the bottom right corner + - Look for and expand the Android 14 (UpsideDownCake) entry + - Make sure the following items are checked: + - Android SDK Platform 34 + - Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image or (for Apple M1 Silicon) Google APIs ARM 64 v8a System Image + - Next, select the "SDK Tools" tab + - Check the box next to "Show Package Details" here as well + - Look for and expand the "Android SDK Build-Tools" entry + - Make sure that 34.0.0 is selected + - Finally, click "Apply" to download and install the Android SDK and related build tools + +- Android env variable + + - Add the following lines to your `~/.zprofile` or `~/.zshrc` (if you are using bash, then `~/.bash_profile` or `~/.bashrc`) config file: + + ```bash + export ANDROID_HOME=$HOME/Library/Android/sdk + export PATH=$PATH:$ANDROID_HOME/emulator + export PATH=$PATH:$ANDROID_HOME/platform-tools + ``` + +- Android [AVD](https://developer.android.com/studio/run/managing-avds.html) + + - Open Android Studio + - Setup a virtual device + - Create a new AVD + - Select "Create Virtual Device..." + - Then pick any Phone from the list (I like to select the smallest phone to start with) + - Click "Next" + - Select the `UpsideDownCake API Level 34` image + - If it is not selectable, select the download icon + - Click "Next" then "Finish" to create your AVD + - At this point you should be able to click on the green triangle button next to your AVD to launch it (though we don't have a project yet) + +- [XCode](https://apps.apple.com/us/app/xcode/id497799835?mt=12) + + - Download and setup + - Select options for laptop/desktop and ios/iphone development + - Setup command line tools (do not use terminal commands - this can messup your setup) + - Open Xcode + - Choose Settings... (or Preferences...) from the Xcode menu + - Go to the Locations panel + - Install the tools by selecting the most recent version in the Command Line Tools dropdown + +- Pod + + ```shell + gem install cocoapods + ``` + +### Clone the repository + +```shell +git clone git@github.com:Ruffrl/rufferal-frontend.git +cd rufferal-frontend +``` + +### Install dependencies + +- Desktop/mobile-web + + ```shell + npm install + nx run store:build + nx run webApp:build + ``` + +- Android + + ```shell + nx run rufferal:build-android + ``` + +- Build ios + + ```shell + nx run rufferal:build-ios + ``` + + If this fails, try: + + ```shell + cd apps/rufferal + bundle + cd ios + pod install + cd ../.. + nx run rufferal:build-ios + ``` + + ```shell + cd apps/rufferal && bundle && cd ios && pod install && cd ../../.. + nx run rufferal:build-ios + ``` + +### Serve + +- Backend server required to interact with frontend app + + - [Backend setup](https://github.com/Ruffrl/rufferal-backend?tab=readme-ov-file#install) + +- Launch desktop/mobile-web + + ```shell + npx nx serve webApp + ``` + + - Visit http://localhost:3000 to see test app + +- Launch android + + - Open Android Studio + - Launch any virtual device (you can load the frontend project, or apps/rufferal or apps/rufferal/android - your choice) + + ```shell + npx nx run rufferal:start + + # In a seperate terminal + npx nx run rufferal:run-android + + # If Android needs a bundle/build reset + cd apps/rufferal/android + ./gradlew clean + ./gradlew wrapper + ./gradlew bundleRelease + + # Manually bundle + cd apps/rufferal + npx react-native bundle --platform android --dev false --reset-cache --entry-file src/main.tsx --bundle-output android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle + + # With Assets + cd apps/rufferal + npx react-native bundle --platform android --dev false --reset-cache --entry-file src/main.tsx --bundle-output android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle --assets-dest android/app/src/main/res + + cd apps/rufferal && npx react-native bundle --platform android --dev false --reset-cache --entry-file src/main.tsx --bundle-output android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle --assets-dest android/app/src/main/res && cd ../.. + ``` + + - The Rufferal app should launch within the Android Studio virtual device! + - If this launched a separate Simulator, you can technically close Android Studio if you want + +- Launch ios + + - Open Xcode + - Load apps/rufferal/ios + + ```shell + npx nx run rufferal:start + + # In a seperate terminal + npx nx run rufferal:run-ios + ``` + + - An Emulator should launch with ios and contain Rufferal app! + - If this launched a separate Simulator, you can technically close XCode if you want + +--- + +### Original NX Notes + +#### Integrate with editors + +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. + +#### Start the application + +Run `npx nx serve rufferal` to start the development server. Happy coding! + +#### Build for production + +Run `npx nx build rufferal` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed. + +#### Running tasks + +To execute tasks with Nx use the following syntax: + +``` +npx nx <...options> +``` + +You can also run multiple targets: + +``` +npx nx run-many -t +``` + +..or add `-p` to filter specific projects + +``` +npx nx run-many -t -p +``` + +Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/features/run-tasks). + +#### Set up CI! + +Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further. + +- [Set up remote caching](https://nx.dev/features/share-your-cache) +- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) +- [Learn more how to setup CI](https://nx.dev/recipes/ci) + +#### Explore the project graph + +Run `npx nx graph` to show the graph of the workspace. +It will show tasks that you can run with Nx. + +- [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) + +#### Connect with us! + +- [Join the community](https://nx.dev/community) +- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools) +- [Follow us on Twitter](https://twitter.com/nxdevtools) + +## NX Notes ✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨. -[Learn more about this workspace setup and its capabilities](https://nx.dev/nx-api/expo?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed! +[Learn more about this workspace setup and its capabilities](https://nx.dev/nx-api/expo?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed! -## Finish your CI setup +### Finish your CI setup [Click here to finish setting up your workspace!](https://cloud.nx.app/connect/FWnkRYuUP7) - -## Run tasks +### Run tasks To run the dev server for your app, use: @@ -30,12 +433,12 @@ To see all available targets to run for a project, run: ```sh npx nx show project rufferal ``` - + These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files. [More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -## Add new projects +### Add new projects While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature. @@ -57,25 +460,25 @@ You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx [Learn more about Nx plugins »](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry »](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - [Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -## Install Nx Console +### Install Nx Console Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ. [Install Nx Console »](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) -## Useful links +### Useful links Learn more: -- [Learn more about this workspace setup](https://nx.dev/nx-api/expo?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) +- [Learn more about this workspace setup](https://nx.dev/nx-api/expo?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) - [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) And join the Nx community: + - [Discord](https://go.nx.dev/community) - [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl) - [Our Youtube channel](https://www.youtube.com/@nxdevtools) diff --git a/apps/rufferal/src/app/screens/Screens.tsx b/apps/rufferal/src/app/screens/Screens.tsx index d4daffc..1e7d6fb 100644 --- a/apps/rufferal/src/app/screens/Screens.tsx +++ b/apps/rufferal/src/app/screens/Screens.tsx @@ -23,7 +23,6 @@ export const Screens = observer(() => { {/* ⬇️⬇️⬇️ CURRENT DEVELOPMENT PAGE ⬇️⬇️⬇️ */} - {/* ⬆️⬆️⬆️ CURRENT DEVELOPMENT PAGE ⬆️⬆️⬆️ */} { - {/* */} + From ff40c692df5ec7e0569637d82dee02c980c6be81 Mon Sep 17 00:00:00 2001 From: Priya Power <49959312+priyapower@users.noreply.github.com> Date: Mon, 23 Sep 2024 13:34:45 -0500 Subject: [PATCH 2/5] Fix exports --- README.md | 87 +++++++++++++++++-- ui/src/components/atoms/button/button.tsx | 2 +- .../field-input-area/field-input-area.tsx | 2 +- .../atoms/field-input/field-input.tsx | 2 +- .../atoms/field-select/field-select.tsx | 4 +- ui/src/components/index.ts | 2 +- ui/src/components/molecules/index.ts | 4 +- .../cats/cat-personality/cat-personality.tsx | 2 +- .../dogs/dog-personality/dog-personality.tsx | 2 +- .../pets/create/pet-careplan-options.tsx | 2 +- .../pages/pets/manage-pets/manage-pets.tsx | 2 +- .../profiles/create/pet-splash/pet-splash.tsx | 2 +- 12 files changed, 93 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index bba5870..82ad6dc 100644 --- a/README.md +++ b/README.md @@ -15,13 +15,13 @@ Things to think about - deployment - other developer nice to haves -## Device Support -_coming soon_ +## Device support -### List of devices -_coming soon_ +- IOS (versions _coming soon_ and above) +- Android (versions _coming soon_ and above) +- mobile-web and desktop _coming soon_ -### Mobile/Web mobile Viewport sizes +### Mobile/web mobile viewport sizes - Designed for mobile displays from 320×568 through 430×1004 - Primary test devices @@ -46,17 +46,88 @@ _coming soon_ - iPhone 15 Pro Max - 430 x 932 -### Tablet Viewport sizes +### Tablet viewport sizes + _coming soon_ -### Desktop Viewport sizes +### Desktop viewport sizes + _coming soon_ ## Themes + _coming soon_ ## Installation -_coming soon_ + +### How this app was setup + +1. Create a new NX app with expo + + ```bash + npx create-nx-workspace@latest --preset=expo --appName=rufferal + + ✔ Where would you like to create your workspace? · rufferal-frontend + ✔ Test runner to use for end to end (E2E) tests · cypress + ✔ Which CI provider would you like to use? · github + ``` + +2. Create libraries + + ```bash + # UI LIBRARY + npx nx generate @nx/expo:lib ui + # I added my personal UI setup that follows "Atomic Design" methodologies + + # ASSETS + npx nx generate @nx/expo:lib assets + + # STORE (currently MobX) + npx nx generate @nx/expo:lib store + + # UTILS + npx nx generate @nx/expo:lib utils + + # STYLES CONFIGURATION (currently Tailwind) + npx nx generate @nx/expo:lib tailwind + # Chose to use explicit naming instead of generic naming because most of the work in this library will be unique to Tailwind configuration + # For custom tailwind configurations and branding/theme alignment + ``` + +3. Name libraries accordingly + + In `tsconfig.base.json`: + + ```json + { + ... + "paths": { + "@rufferal/assets/*": ["assets/*"], + "@rufferal/store": ["store/src/index.ts"], + "@rufferal/tailwind": ["tailwind/src/index.ts"], + "@rufferal/ui": ["ui/src/index.ts"], + "@rufferal/utils": ["utils/src/index.ts"] + } + } + ``` + +4. Generate components + +```bash +nx g @nx/expo:component bottomsheet --directory ui/src/components/atoms/bottomsheet --nameAndDirectoryFormat=as-provided --export=false + +# Updates +# - Convert component to arrow component without a default export +# - Export component from directory +# - +# - +``` + +Personally, I ended up not using the component generator as it currently is + +- I would like to setup a component generator that applies my system/library expectations + - Creates functional (arrow) components instead of default exported normal function componets + - exports to local component folder (if in atoms, export is in ./atoms/index.ts, etc) ## (PROTOTYPE) Themes diff --git a/ui/src/components/atoms/button/button.tsx b/ui/src/components/atoms/button/button.tsx index 600dbad..feea782 100644 --- a/ui/src/components/atoms/button/button.tsx +++ b/ui/src/components/atoms/button/button.tsx @@ -12,7 +12,7 @@ import { Text, View, } from 'react-native'; -import { ButtonType, FieldSize, FieldState } from '../types/field-types'; +import { ButtonType, FieldSize, FieldState } from '..'; interface Props extends PressableProps { loading?: boolean; diff --git a/ui/src/components/atoms/field-input-area/field-input-area.tsx b/ui/src/components/atoms/field-input-area/field-input-area.tsx index 1eab065..cd4c521 100644 --- a/ui/src/components/atoms/field-input-area/field-input-area.tsx +++ b/ui/src/components/atoms/field-input-area/field-input-area.tsx @@ -6,7 +6,7 @@ import { } from '@rufferal/utils'; import { Image } from 'expo-image'; import { Platform, TextInput, TextInputProps, View } from 'react-native'; -import { FieldSize, FieldState } from '../types/field-types'; +import { FieldSize, FieldState } from '..'; export interface FieldInputAreaProps extends Omit { onSubmit?: () => void; diff --git a/ui/src/components/atoms/field-input/field-input.tsx b/ui/src/components/atoms/field-input/field-input.tsx index 3702724..7ef1217 100644 --- a/ui/src/components/atoms/field-input/field-input.tsx +++ b/ui/src/components/atoms/field-input/field-input.tsx @@ -6,7 +6,7 @@ import { } from '@rufferal/utils'; import { Image } from 'expo-image'; import { Platform, TextInput, TextInputProps, View } from 'react-native'; -import { FieldSize, FieldState } from '../types/field-types'; +import { FieldSize, FieldState } from '..'; export interface FieldInputProps extends TextInputProps { onSubmit?: () => void; diff --git a/ui/src/components/atoms/field-select/field-select.tsx b/ui/src/components/atoms/field-select/field-select.tsx index ebdb672..4483040 100644 --- a/ui/src/components/atoms/field-select/field-select.tsx +++ b/ui/src/components/atoms/field-select/field-select.tsx @@ -10,8 +10,8 @@ import { Image } from 'expo-image'; import { useState } from 'react'; import { Platform, Text, View } from 'react-native'; import { Dropdown } from 'react-native-element-dropdown'; -import { OtherOption } from '../../molecules/select/select'; -import { FieldOption, FieldSize, FieldState } from '../types/field-types'; +import { OtherOption } from '../../molecules'; +import { FieldOption, FieldSize, FieldState } from '../'; export interface FieldSelectProps