feat: Add @bothrs/expo for reusable expo utils, hooks and components

package.json

@@ -19,7 +19,7 @@
       "email": "[email protected]"
     },
     {
-      "name": "Thomas Geysels",
+      "name": "Thomas Ghysels",
       "email": "[email protected]"
     },
     {
@@ -37,6 +37,10 @@
     {
       "name": "Thorr Stevens",
       "email": "[email protected]"
+    },
+    {
+      "name": "Emiel De Vleeschouwer",
+      "email": "[email protected]"
     }
   ],
   "license": "MIT",

packages/expo/.eslintignore

@@ -0,0 +1,8 @@
+coverage/
+node_modules/
+lib/
+dist/
+esm/
+example/
+
+*.js

packages/expo/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = { 
+  extends: [
+    '../../.eslintrc.js',
+    '@bothrs/eslint-config/react',
+    '@bothrs/eslint-config/react-native',
+  ],
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module'
+  },
+  rules: {
+    "unused-imports/no-unused-imports": "off",
+  }
+}

packages/expo/.gitignore

@@ -0,0 +1,64 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+
+# VSCode
+.vscode/
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.classpath
+.cxx
+.gradle
+.idea
+.project
+.settings
+local.properties
+android.iml
+
+# Cocoapods
+#
+example/ios/Pods
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Expo
+.expo/*
+
+# generated by bob
+lib/

packages/expo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Bothrs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/expo/README.md

@@ -0,0 +1,236 @@
+# @bothrs/expo
+
+A set of reusable Expo components, hooks, and utilities for Bothrs projects
+
+## Installation
+
+```bash
+npm install @bothrs/expo
+```
+
+## Providers
+
+### SentryProvider
+
+A provider that wraps your app with Sentry init and an `ErrorBoundary` component. This is useful for catching errors and reporting them to Sentry.
+
+`App.tsx`
+
+```tsx
+import { SentryProvider } from '@bothrs/expo'
+
+// ...
+
+<SentryProvider
+    sentryConfig={{
+        dsn: '', // YOUR DSN FROM SENTRY HERE
+        enabled: isLocalDevelopment,
+        enableInExpoDevelopment: true, // Turn this off when you're done testing
+        debug: true,
+        release: `${appName}@${appVersion}`,
+        environment: 'frontend',
+        tracesSampleRate: 1,
+    }}
+    renderErrorScreen={() => <CustomErrorScreen />}
+>
+  <YourApp />
+</SentryProvider>
+```
+
+## Components
+
+### DynamicBottomSheet
+
+A bottom sheet that automatically expands and collapses based on the content inside of it.
+
+`App.tsx`
+
+```tsx
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
+
+// ...
+
+<BottomSheetModalProvider>
+  <YourApp />
+</BottomSheetModalProvider>
+```
+
+`SomeScreen.tsx`
+
+```tsx
+import { BottomSheetModal } from '@gorhom/bottom-sheet'
+import { DynamicBottomSheet } from '@bothrs/expo'
+
+// ...
+
+const bottomSheetRef = useRef<BottomSheetModal>(null)
+
+// -- Handlers --
+
+const onShowBottomSheet = () => {
+    bottomSheetRef.current?.present()
+}
+
+// ...
+
+<>
+    <DynamicBottomSheet
+        ref={bottomSheetRef}
+        // snapPoints={['50%', '100%']}
+    >
+        <YourContent />
+    </DynamicBottomSheet>
+</>
+```
+
+### Gradient
+
+A component that renders a gradient background from a CSS linear gradient string.
+
+```tsx
+import { Gradient } from '@bothrs/expo'
+
+// ...
+
+<Gradient
+    linearGradient="linear-gradient(180.0deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.96) 85%)"
+/>
+```
+
+## Utils
+
+### parseGradient
+
+A utility function that parses a CSS linear gradient string and returns an array of colors and locations to use with `expo-linear-gradient`.
+
+```tsx
+import { parseGradient } from '@bothrs/expo'
+import { LinearGradient } from 'expo-linear-gradient'
+
+const { colors, locations } = parseGradient(
+    'linear-gradient(180.0deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.96) 85%)'
+)
+
+<LinearGradient
+    colors={colors} // ['rgba(15, 15, 15, 0)', 'rgba(15, 15, 15, 0.96)']
+    locations={locations} // [0, 0.85]
+/>
+```
+
+### parseConstants
+
+A utility function that parses the Expo Constants object and returns a new object with only the properties you need, regardles of whether you're in Expo Go, a Dev Client or the Standalone Production App.
+
+Useful to e.g. get the app version and name. Determine which back-end to contact per environment, including your local back-end url in development mode, so you can test on your own device without extra tunnels.
+
+`constants.tsx`
+
+```tsx
+import Constants from 'expo-constants'
+import { parseConstants } from '@bothrs/expo'
+
+// To determine yourself based on your branch strategy
+const branchConfig = {
+    devBranches: ['dev-preview'], // -> branchEnv = 'development'
+    stageBranches: ['staging'], // -> branchEnv = 'staging'
+    prodBranches: ['prod'], // -> branchEnv = 'production'
+}
+
+// Parse constants using your branchConfig
+const {
+    localUrl,
+    appName,
+    appVersion,
+    sdkVersion,
+    iosBuildnumber,
+    androidVersionCode,
+    branchName,
+    branchEnv,
+    isLocalDevelopment,
+    isDevelopment,
+    isStaging,
+    isProduction,
+} = parseConstants(Constants, branchConfig)
+
+// Determine your back-end url based on the environment info
+
+let api = localUrl // <-- Your local back-end url based on debugger IP
+if (!isLocalDevelopment) api = 'https://dev-api.example.com' 
+if (isStaging) api = 'https://staging-api.example.com'
+if (isProduction) api = 'https://api.example.com'
+
+// Re-export what you need
+export {
+    // based on constants
+    api
+    ...
+    // parsed constants
+    localUrl,
+    appName,
+    appVersion,
+    sdkVersion,
+    iosBuildnumber,
+    androidVersionCode,
+    branchName,
+    branchEnv,
+    isLocalDevelopment,
+    isDevelopment,
+    isStaging,
+    isProduction,
+}
+```
+
+### conditionalMarkup
+
+Helper to avoid ternaries in conditional styled-components styling.
+
+```tsx
+import styled from 'styled-components/native'
+import { conditionalMarkup } from '@bothrs/expo'
+
+// ...
+
+const StMarkupTest = styled.Text<{ orientation: 'landscape' | 'portrait' }>`
+  ${({ orientation }) => conditionalMarkup(
+    orientation === 'portrait' && 'text-decoration: underline;',
+    orientation === 'portrait' && 'color: blue;',
+    orientation === 'landscape' && 'color: red;',
+    orientation === 'landscape' && 'font-weight: bold;',
+  )}
+`
+```
+
+## Hooks
+
+### useSvgDimensions
+
+`SomeSvgIllustration.tsx`
+
+```tsx
+import { Dimensions } from 'react-native'
+import { Svg, SvgProps, Path, ... } from 'react-native-svg'
+import { useSvgDimensions } from '@bothrs/expo'
+
+const SomeSvgIllustration = (props: SvgProps) => {
+    // Map original svg dimensions to props for the svg component
+    const { width, height, viewBox } = useSvgDimensions({
+        originalWidth: 100,
+        originalHeight: 100,
+        containerWidth: Dimensions.get('window').width,
+    })
+
+    // -- Render --
+
+    return (
+        <Svg
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            {...props}
+        >
+            {/* ... your SVG code here ... */}
+        </Svg>
+    )
+}
+```
+

packages/expo/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    'module:metro-react-native-babel-preset',
+    [
+      '@babel/preset-react', { runtime: 'automatic' }
+    ]
+  ],
+}

packages/expo/example/.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*