diff --git a/NOTES.md b/NOTES.md deleted file mode 100644 index 71f4d5f..0000000 --- a/NOTES.md +++ /dev/null @@ -1,151 +0,0 @@ -``` -origin git@github.com:Ruffrl/rufferal-frontend.git (fetch) -origin git@github.com:Ruffrl/rufferal-frontend.git (push) -``` - -// Create a new NX app with expo - -``` -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 -``` - -// Reset git remote - -``` -git remote add origin https://github.com/Ruffrl/rufferal-frontend.git -``` - -// Create a library for shared components - -``` -npx nx generate @nx/expo:lib lib/ui - -``` - -// Add base libraries - -``` -react-native-reanimated -react-native-gesture-handler -@react-navigation/native -react-native-safe-area-context -@react-native-community/masked-view -react-router-dom@6 -@mui/material -@emotion/react -@emotion/styled -@gorhom/bottom-sheet -twrnc -expo-camera -mobx -mobx-persist-store -mobx-react-lite -@react-native-async-storage/async-storage -react-hook-form -yup -@hookform/resolvers -@ouroboros/react-native-picker -@react-native-assets/slider -react-native-swiper -``` - -// Missing from web - -``` -"@babel/plugin-proposal-export-namespace-from": "^7.18.9", -"react-native-web-swiper": "^2.2.4", -"react-native-web": "~0.19.11", -"react-webcam": "^7.2.0", -``` - -// Test components Test shared library - -``` -nx g @nx/expo:component Bottomsheet --directory lib/ui/src/components/atoms/Bottomsheet - -// import React from 'react'; -import { Text, View } from 'react-native'; - -/* eslint-disable-next-line */ -export interface BottomsheetProps {} - -export const Bottomsheet = (props: BottomsheetProps) => { - return ( - - Welcome to bottomsheet! - - ); -}; - - -export { Bottomsheet } from './Bottomsheet/bottomsheet'; - - -export * from './atoms'; - - -export * from './components'; -``` - -// Add a "store" library - -``` -npx nx generate @nx/expo:lib lib/store - -``` - -// Add store component - -``` -nx g @nx/expo:component account-store --directory lib/store/src/account-store --export -``` - -// Add pet profile UI components - -``` -nx g @nx/expo:component create-pet-onboarding --directory lib/ui/src/components/pages/pets/create-pet-onboarding --nameAndDirectoryFormat=as-provided --export=false - -nx g @nx/expo:component create-pet-details --directory lib/ui/src/components/pages/pets/create-pet-details --nameAndDirectoryFormat=as-provided --export=false - -nx g @nx/expo:component create-pet-photo --directory lib/ui/src/components/pages/pets/create-pet-photo --nameAndDirectoryFormat=as-provided --export=false - -nx g @nx/expo:component create-pet-personality --directory lib/ui/src/components/pages/pets/create-pet-personality --nameAndDirectoryFormat=as-provided --export=false - -nx g @nx/expo:component create-pet-careplan --directory lib/ui/src/components/pages/pets/create-pet-careplan --nameAndDirectoryFormat=as-provided --export=false - - nx g @nx/expo:component manage-pets --directory lib/ui/src/components/pages/pets/manage-pets --nameAndDirectoryFormat=as-provided --export=false -``` - -// Add an "assets" library - -``` -npx nx generate @nx/expo:lib lib/assets - -``` - -// Install assets - -``` -npx expo install expo-asset - - -[ - "expo-asset", - { - "assets": ["../../lib/assets"] - } -] -``` - -// Install fonts - -// Components -``` -nx g @nx/expo:component h2 --directory lib/ui/src/components/atoms/h2 --nameAndDirectoryFormat=as-provided --export=false - -nx g @nx/expo:component button --directory lib/ui/src/components/atoms/button --nameAndDirectoryFormat=as-provided --export=false -``` diff --git a/README.md b/README.md index 82ad6dc..3fd69e3 100644 --- a/README.md +++ b/README.md @@ -113,21 +113,330 @@ _coming soon_ 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 -# - -# - -``` + ```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 + # - `ui/src/components/atoms/index.ts` + # - `export { Bottomsheet } from './bottomsheet/bottomsheet';` + # - `ui/src/components/index.ts` + # - `export * from './atoms';` + # - `ui/src/index.ts` + # - `export * from './components';` + ``` + + Personally, I ended up not using the component generator as it currently is -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) -- 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) +5. Manage expo assets and update config accordingly + + - [expo-asset](https://docs.expo.dev/versions/latest/sdk/asset/) + - [expo-font](https://docs.expo.dev/versions/latest/sdk/font/) + - [expo-image-picker](https://docs.expo.dev/versions/latest/sdk/imagepicker/) + - [expo-image-manipulator](https://docs.expo.dev/versions/latest/sdk/imagemanipulator/) + - [expo-camera](https://docs.expo.dev/versions/latest/sdk/camera/) + + - `apps/rufferal/app.json` + + ```json + { + ... + + "plugins": [ + [ + "expo-image-picker", + { + "photosPermission": "Allow Rufferal to access your photos" + } + ], + [ + "expo-camera", + { + "cameraPermission": "Allow Rufferal to access your camera", + "microphonePermission": "Allow Rufferal to access your microphone", + "recordAudioAndroid": true + } + ], + [ + "expo-asset", + { + "assets": ["../../lib/assets/images"] + } + ], + [ + "expo-font", + { + "fonts": [ + "../../assets/src/fonts/proxima-nova/proximanova_bold.otf", + "../../assets/src/fonts/proxima-nova/proximanova_extrabold.otf", + "../../assets/src/fonts/proxima-nova/proximanova_semibold.otf", + "../../assets/src/fonts/inter/inter_bold.otf", + "../../assets/src/fonts/inter/inter_regular_italic.otf", + "../../assets/src/fonts/inter/inter_regular.otf", + "../../assets/src/fonts/inter/inter_semibold.otf", + "../../assets/src/fonts/inter/inter_medium.otf" + ] + } + ] + ] + } + ``` + +6. Manage custom styles + + - Using [Tailwind](https://tailwindcss.com/docs/adding-custom-styles) and [package](https://www.npmjs.com/package/twrnc) docs + - Add custom fonts + - Add style/theme overrides + - Currently in a single config file + - `tailwind/src/tailwind.config.js` + + ```javascript + import { moderateScale } from '@rufferal/utils'; + + /** @type {import('tailwindcss').Config} */ + module.exports = { + content: [], + theme: { + extend: { + colors: { + blizzardBlue: { + 50: '#ECFDFF', + 100: '#CEF8FF', + 200: '#A0EFFE', // PRIMARY + 300: '#64E2FC', + 400: '#1DCBF3', + 500: '#01ADD9', + 600: '#0489B6', + 700: '#0B6E93', + 800: '#135977', + 900: '#144A65', + 950: '#073145', + }, + whitePointer: { + 50: '#FDF9FF', // PRIMARY + 100: '#F7E8FF', + 200: '#F0D5FF', + 300: '#E4B4FE', + 400: '#D484FC', + 500: '#C355F7', + 600: '#B233EA', + 700: '#9B22CE', + 800: '#8221A8', + 900: '#6A1C87', + 950: '#4B0764', + }, + balticSea: { + 50: '#F6F4F9', + 100: '#EFEBF4', + 200: '#E2DBEA', + 300: '#D0C5DC', + 400: '#BEADCC', + 500: '#AF98BC', + 600: '#9D81AA', + 700: '#896E94', + 800: '#6E5B78', + 900: '#5B4D62', + 950: '#2B242E', // PRIMARY + }, + electricViolet: { + 50: '#FBF5FF', + 100: '#F6E8FF', + 200: '#EFD6FE', + 300: '#E2B5FD', + 400: '#D086FA', + 500: '#BE58F4', + 600: '#AC36E7', + 700: '#9525CB', // PRIMARY + 800: '#7D23A6', + 900: '#661E85', + 950: '#470962', + }, + seance: { + 50: '#FBF5FF', + 100: '#F6E9FE', + 200: '#EFD6FE', + 300: '#E2B6FC', + 400: '#D087F9', + 500: '#BE59F3', + 600: '#AC37E6', + 700: '#9526CA', + 800: '#7D24A5', // PRIMARY + 900: '#671E85', + 950: '#480962', + }, + wildSand: { + 50: '#F6F6F6', // PRIMARY + 100: '#EFEFEF', + 200: '#DCDCDC', + 300: '#BDBDBD', + 400: '#989898', + 500: '#7C7C7C', + 600: '#656565', + 700: '#525252', + 800: '#464646', + 900: '#3D3D3D', + 950: '#292929', + }, + iron: { + 50: '#F7F7F7', + 100: '#EDEDED', + 200: '#D8D8D8', // DISABLED + 300: '#D1D1D1', // PRIMARY + 400: '#ADADAD', + 500: '#999999', // DISABLED + 600: '#888888', + 700: '#7B7B7B', + 800: '#676767', + 900: '#545454', + 950: '#363636', + }, + graySuit: { + 50: '#F9F8FA', + 100: '#F4F2F5', + 200: '#E9E8EC', + 300: '#D8D5DD', + 400: '#CAC4D0', // PRIMARY + 500: '#AA9FB3', + 600: '#97889F', + 700: '#83768B', + 800: '#6E6275', + 900: '#5A5260', + 950: '#3C3540', + }, + saltBox: { + 50: '#FAF9FA', + 100: '#F3F2F5', + 200: '#E8E4EA', + 300: '#D4CED9', + 400: '#BBB1C1', + 500: '#9E90A5', + 600: '#807188', + 700: '#695C6F', // PRIMARY + 800: '#564C5C', + 900: '#4A424D', + 950: '#2B242E', + }, + lola: { + 50: '#F9F8FA', + 100: '#F4F2F5', + 200: '#EBE7ED', + 300: '#D5CED9', // PRIMARY + 400: '#C5BBCA', + 500: '#AE9FB3', + 600: '#9A889F', + 700: '#88758C', + 800: '#716275', + 900: '#5E5161', + 950: '#3E3540', + }, + red: { + 50: '#fff3f1', + 100: '#ffe3df', + 200: '#ffcbc4', + 300: '#ffa69b', + 400: '#ff7462', + 500: '#ff4931', + 600: '#e8270e', // PRIMARY + 700: '#cb200a', + 800: '#a71f0d', + 900: '#8a2012', + 950: '#4c0b03', + }, + silver: { + 50: '#F7F7F7', + 100: '#EDEDED', + 200: '#DFDFDF', + 300: '#C9C9C9', // PRIMARY + 400: '#ADADAD', + 500: '#999999', + 600: '#888888', + 700: '#7B7B7B', + 800: '#676767', + 900: '#545454', + 950: '#363636', + }, + codGray: { + 50: '#F6F6F6', + 100: '#E7E7E7', + 200: '#D1D1D1', + 300: '#B0B0B0', + 400: '#888888', + 500: '#6D6D6D', + 600: '#5D5D5D', + 700: '#4F4F4F', + 800: '#454545', + 900: '#3D3D3D', + 950: '#080808', // PRIMARY + }, + amethystSmoke: { + 50: '#F9F8FA', + 100: '#F4F2F5', + 200: '#EAE7ED', + 300: '#D9D4DE', + 400: '#C3BCC9', + 500: '#AC9FB3', + 600: '#9F90A5', // PRIMARY + 700: '#86758C', + 800: '#706275', + 900: '#5D5161', + 950: '#3D3540', + }, + azureRadiance: { + 100: '#D6F2FF', + 200: '#B5EAFF', + 300: '#83DFFF', + 400: '#48CBFF', + 50: '#EDFAFF', + 500: '#1EACFF', + 600: '#068EFF', + 700: '#007AFF', // PRIMARY + 800: '#085DC5', + 900: '#0D519B', + 950: '#0E315D', + }, + chatelle: { + 50: '#FAF8FA', + 100: '#F4F2F5', + 200: '#EAE8EC', + 300: '#D9D5DD', + 400: '#BCB1C1', // PRIMARY + 500: '#AE9FB3', + 600: '#9B889F', + 700: '#88758C', + 800: '#716275', + 900: '#5D5260', + 950: '#3E3540', + }, + }, + fontFamily: { + body: ['Inter Regular'], // 400 + bodyItalic: ['Inter Regular Italic'], + bodyMedium: ['Inter Medium'], // 500 + bodySemibold: ['Inter Semibold'], // 600 + bodyBold: ['Inter Bold'], // 700 + headerSemibold: ['Proxima Nova Semibold'], // 600 + headerBold: ['Proxima Nova Bold'], // 700 + headerExtrabold: ['Proxima Nova Extrabold'], // 800 + }, + fontSize: { + b1: [`${moderateScale(10)}px`, `${moderateScale(14)}px`], + b2: [`${moderateScale(12)}px`, `${moderateScale(16)}px`], + b3: [`${moderateScale(14)}px`, `${moderateScale(20)}px`], + b4: [`${moderateScale(16)}px`, `${moderateScale(24)}px`], + h3: [`${moderateScale(22)}px`, `${moderateScale(26)}px`], + h2: [`${moderateScale(28)}px`, `${moderateScale(30)}px`], + h1: [`${moderateScale(32)}px`, `${moderateScale(36)}px`], + }, + }, + }, + plugins: [], + }; + ``` ## (PROTOTYPE) Themes diff --git a/package-lock.json b/package-lock.json index c81996e..e5793dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "expo-camera": "~15.0.16", "expo-font": "~12.0.10", "expo-image": "~1.12.15", + "expo-image-manipulator": "~12.0.5", "expo-image-picker": "~15.0.7", "expo-splash-screen": "~0.27.4", "expo-status-bar": "~1.12.1", @@ -16548,6 +16549,18 @@ "expo": "*" } }, + "node_modules/expo-image-manipulator": { + "version": "12.0.5", + "resolved": "https://registry.npmjs.org/expo-image-manipulator/-/expo-image-manipulator-12.0.5.tgz", + "integrity": "sha512-zJ8yINjckYw/yfoSuICt4yJ9xr112+W9e5QVXwK3nCAHr7sv45RQ5sxte0qppf594TPl+UoV6Tjim7WpoKipRQ==", + "license": "MIT", + "dependencies": { + "expo-image-loader": "~4.7.0" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-image-picker": { "version": "15.0.7", "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-15.0.7.tgz", diff --git a/package.json b/package.json index a63e699..0890b70 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,8 @@ "react-router-dom": "^6.26.2", "tslib": "^2.3.0", "twrnc": "^4.5.1", - "yup": "^1.4.0" + "yup": "^1.4.0", + "expo-image-manipulator": "~12.0.5" }, "devDependencies": { "@expo/cli": "~0.18.13",