adding paper ui components

2025-04-23 10:05:19 +00:00 · 2024-08-13 19:30:22 +02:00 · 2024-08-13 19:30:22 +02:00 · b206e40d6d
commit b206e40d6d
parent 739cca0c59
9 changed files with 1621 additions and 106 deletions
--- a/app/client/mobile/App.styled.ts
+++ b/app/client/mobile/App.styled.ts
@ -0,0 +1,9 @@
+import {
+  StyleSheet,
+} from 'react-native';
+
+export  styles = StyleSheet.create({
+  highlight: {
+    fontWeight: '700',
+  },
+});
--- a/app/client/mobile/App.tsx
+++ b/app/client/mobile/App.tsx
@ -1,122 +1,129 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import React from 'react';
+import React, { useState } from 'react';
 import { AppContextProvider } from './src/context/AppContext';
+import { SettingsContextProvider } from './src/context/SettingsContext';
+import { styles } from './App.styled';

-import type {PropsWithChildren} from 'react';
 import {
  SafeAreaView,
-  ScrollView,
-  StatusBar,
  StyleSheet,
-  Text,
  useColorScheme,
  View,
 } from 'react-native';
+import { 
+  MD3LightTheme, MD3DarkTheme, TextInput, PaperProvider } from 'react-native-paper';

-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
+const databagColors = {
+  "light": {
+    "primary": "rgb(0, 108, 71)",
+    "onPrimary": "rgb(255, 255, 255)",
+    "primaryContainer": "rgb(142, 247, 193)",
+    "onPrimaryContainer": "rgb(0, 33, 19)",
+    "secondary": "rgb(121, 89, 0)",
+    "onSecondary": "rgb(255, 255, 255)",
+    "secondaryContainer": "rgb(255, 223, 160)",
+    "onSecondaryContainer": "rgb(38, 26, 0)",
+    "tertiary": "rgb(60, 100, 114)",
+    "onTertiary": "rgb(255, 255, 255)",
+    "tertiaryContainer": "rgb(192, 233, 250)",
+    "onTertiaryContainer": "rgb(0, 31, 40)",
+    "error": "rgb(186, 26, 26)",
+    "onError": "rgb(255, 255, 255)",
+    "errorContainer": "rgb(255, 218, 214)",
+    "onErrorContainer": "rgb(65, 0, 2)",
+    "background": "rgb(251, 253, 248)",
+    "onBackground": "rgb(25, 28, 26)",
+    "surface": "rgb(251, 253, 248)",
+    "onSurface": "rgb(25, 28, 26)",
+    "surfaceVariant": "rgb(220, 229, 220)",
+    "onSurfaceVariant": "rgb(64, 73, 67)",
+    "outline": "rgb(112, 121, 114)",
+    "outlineVariant": "rgb(192, 201, 193)",
+    "shadow": "rgb(0, 0, 0)",
+    "scrim": "rgb(0, 0, 0)",
+    "inverseSurface": "rgb(46, 49, 46)",
+    "inverseOnSurface": "rgb(239, 241, 237)",
+    "inversePrimary": "rgb(113, 218, 166)",
+    "elevation": {
+      "level0": "transparent",
+      "level1": "rgb(238, 246, 239)",
+      "level2": "rgb(231, 241, 234)",
+      "level3": "rgb(223, 237, 229)",
+      "level4": "rgb(221, 236, 227)",
+      "level5": "rgb(216, 233, 223)"
+    },
+    "surfaceDisabled": "rgba(25, 28, 26, 0.12)",
+    "onSurfaceDisabled": "rgba(25, 28, 26, 0.38)",
+    "backdrop": "rgba(42, 50, 45, 0.4)"
+  },
+  "dark": {
+    "primary": "rgb(113, 218, 166)",
+    "onPrimary": "rgb(0, 56, 35)",
+    "primaryContainer": "rgb(0, 82, 52)",
+    "onPrimaryContainer": "rgb(142, 247, 193)",
+    "secondary": "rgb(248, 189, 42)",
+    "onSecondary": "rgb(64, 45, 0)",
+    "secondaryContainer": "rgb(92, 67, 0)",
+    "onSecondaryContainer": "rgb(255, 223, 160)",
+    "tertiary": "rgb(164, 205, 221)",
+    "onTertiary": "rgb(5, 53, 66)",
+    "tertiaryContainer": "rgb(35, 76, 89)",
+    "onTertiaryContainer": "rgb(192, 233, 250)",
+    "error": "rgb(255, 180, 171)",
+    "onError": "rgb(105, 0, 5)",
+    "errorContainer": "rgb(147, 0, 10)",
+    "onErrorContainer": "rgb(255, 180, 171)",
+    "background": "rgb(25, 28, 26)",
+    "onBackground": "rgb(225, 227, 223)",
+    "surface": "rgb(25, 28, 26)",
+    "onSurface": "rgb(225, 227, 223)",
+    "surfaceVariant": "rgb(64, 73, 67)",
+    "onSurfaceVariant": "rgb(192, 201, 193)",
+    "outline": "rgb(138, 147, 140)",
+    "outlineVariant": "rgb(64, 73, 67)",
+    "shadow": "rgb(0, 0, 0)",
+    "scrim": "rgb(0, 0, 0)",
+    "inverseSurface": "rgb(225, 227, 223)",
+    "inverseOnSurface": "rgb(46, 49, 46)",
+    "inversePrimary": "rgb(0, 108, 71)",
+    "elevation": {
+      "level0": "transparent",
+      "level1": "rgb(29, 38, 33)",
+      "level2": "rgb(32, 43, 37)",
+      "level3": "rgb(35, 49, 41)",
+      "level4": "rgb(36, 51, 43)",
+      "level5": "rgb(37, 55, 46)"
+    },
+    "surfaceDisabled": "rgba(225, 227, 223, 0.12)",
+    "onSurfaceDisabled": "rgba(225, 227, 223, 0.38)",
+    "backdrop": "rgba(42, 50, 45, 0.4)"
+  }
 }

 function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
+  const colorScheme = useColorScheme();
+  const [text, setText] = useState('');

-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+  const theme =
+    colorScheme === 'dark'
+      ? { ...MD3DarkTheme, colors: databagColors.dark }
+      : { ...MD3LightTheme, colors: databagColors.light };

  return (
    <AppContextProvider>
-      <SafeAreaView style={backgroundStyle}>
-        <StatusBar
-          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-          backgroundColor={backgroundStyle.backgroundColor}
-        />
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={backgroundStyle}>
-          <Header />
-          <View
-            style={{
-              backgroundColor: isDarkMode ? Colors.black : Colors.white,
-            }}>
-            <Section title="Step One">
-              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-              screen and then come back to see your edits.
-            </Section>
-            <Section title="See Your Changes">
-              <ReloadInstructions />
-            </Section>
-            <Section title="Debug">
-              <DebugInstructions />
-            </Section>
-            <Section title="Learn More">
-              Read the docs to discover what to do next:
-            </Section>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
+      <SettingsContextProvider>
+        <PaperProvider theme={theme}>
+          <SafeAreaView style={{ backgroundColor: '#888888' }}>
+            <TextInput
+              mode="outlined"
+              label="Email"
+              value={text}
+              onChangeText={text => setText(text)}
+            />
+          </SafeAreaView>
+        </PaperProvider>
+      </SettingsContextProvider>
    </AppContextProvider>
  );
 }

-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
 export default App;
--- a/app/client/mobile/ios/Podfile.lock
+++ b/app/client/mobile/ios/Podfile.lock
@ -935,6 +935,8 @@ PODS:
  - React-Mapbuffer (0.74.3):
    - glog
    - React-debug
+  - react-native-safe-area-context (4.10.8):
+    - React-Core
  - react-native-sqlite-storage (6.0.1):
    - React-Core
  - React-nativeconfig (0.74.3)
@ -1166,6 +1168,27 @@ PODS:
    - React-logger (= 0.74.3)
    - React-perflogger (= 0.74.3)
    - React-utils (= 0.74.3)
+  - RNVectorIcons (10.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
  - SocketRocket (0.7.0)
  - Yoga (0.0.0)

@ -1202,6 +1225,7 @@ DEPENDENCIES:
  - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
  - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
  - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
  - react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`)
  - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
  - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@ -1226,6 +1250,7 @@ DEPENDENCIES:
  - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
  - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
  - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
  - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)

 SPEC REPOS:
@ -1294,6 +1319,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/ReactCommon/logger"
  React-Mapbuffer:
    :path: "../node_modules/react-native/ReactCommon"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
  react-native-sqlite-storage:
    :path: "../node_modules/react-native-sqlite-storage"
  React-nativeconfig:
@ -1342,6 +1369,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/ReactCommon/react/utils"
  ReactCommon:
    :path: "../node_modules/react-native/ReactCommon"
+  RNVectorIcons:
+    :path: "../node_modules/react-native-vector-icons"
  Yoga:
    :path: "../node_modules/react-native/ReactCommon/yoga"

@ -1376,6 +1405,7 @@ SPEC CHECKSUMS:
  React-jsitracing: 6b3c8c98313642140530f93c46f5a6ca4530b446
  React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304
  React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a
+  react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
  react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
  React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb
  React-NativeModulesApple: 585d1b78e0597de364d259cb56007052d0bda5e5
@ -1400,6 +1430,7 @@ SPEC CHECKSUMS:
  React-runtimescheduler: 0c80752bceb80924cb8a4babc2a8e3ed70d41e87
  React-utils: a06061b3887c702235d2dac92dacbd93e1ea079e
  ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4
+  RNVectorIcons: 2a2f79274248390b80684ea3c4400bd374a15c90
  SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
  Yoga: 04f1db30bb810187397fa4c37dd1868a27af229c

--- a/app/client/mobile/package.json
+++ b/app/client/mobile/package.json
@ -13,7 +13,10 @@
    "databag-client-sdk": "^0.0.22",
    "react": "18.2.0",
    "react-native": "0.74.3",
-    "react-native-sqlite-storage": "^6.0.1"
+    "react-native-paper": "^5.12.5",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-sqlite-storage": "^6.0.1",
+    "react-native-vector-icons": "^10.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
--- a/app/client/mobile/src/constants/Strings.js
+++ b/app/client/mobile/src/constants/Strings.js
--- a/app/client/mobile/src/context/AppContext.tsx
+++ b/app/client/mobile/src/context/AppContext.tsx
--- a/app/client/mobile/src/context/SettingsContext.tsx
+++ b/app/client/mobile/src/context/SettingsContext.tsx
@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useSettingsContext } from './useSettingsContext.hook';
+
+export const SettingsContext = createContext({});
+
+export function SettingsContextProvider({ children }) {
+  const { state, actions } = useSettingsContext();
+  return (
+    <SettingsContext.Provider value={{ state, actions }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
--- a/app/client/mobile/src/context/useSettingsContext.hook.ts
+++ b/app/client/mobile/src/context/useSettingsContext.hook.ts
@ -0,0 +1,29 @@
+import { useEffect, useContext, useState, useRef } from 'react';
+import { getLanguageStrings } from '../constants/Strings';
+import { useWindowDimensions } from 'react-native';
+
+export function useSettingsContext() {
+  const dim = useWindowDimensions();
+  const [state, setState] = useState({
+    strings: {},
+    wide: null,
+    splt: null,
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => {
+    const strings = getLanguageStrings();
+    const wide = dim.width > dim.height;
+    const split = dim.width > 650;
+    updateState({ strings, wide, split });
+  }, []);
+
+  const actions = {
+  };
+
+  return { state, actions }
+}
+
--- a/app/client/mobile/yarn.lock
+++ b/app/client/mobile/yarn.lock
@ -1662,6 +1662,18 @@ __metadata:
  languageName: node
  linkType: hard

+"@callstack/react-theme-provider@npm:^3.0.9":
+  version: 3.0.9
+  resolution: "@callstack/react-theme-provider@npm:3.0.9"
+  dependencies:
+    deepmerge: ^3.2.0
+    hoist-non-react-statics: ^3.3.0
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: f888ef0b8f993d393a9d49864f75b04b5cf7259e72f290ec570fc5e314315f75c979b03b391243a72578ab55db4ffcdd4dc9dc1a2f8ec2b516cabb958971a85e
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
  version: 4.4.0
  resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@ -3016,7 +3028,10 @@ __metadata:
    prettier: 2.8.8
    react: 18.2.0
    react-native: 0.74.3
+    react-native-paper: ^5.12.5
+    react-native-safe-area-context: ^4.10.8
    react-native-sqlite-storage: ^6.0.1
+    react-native-vector-icons: ^10.1.0
    react-test-renderer: 18.2.0
    typescript: 5.0.4
  languageName: unknown
@ -3779,6 +3794,17 @@ __metadata:
  languageName: node
  linkType: hard

+"cliui@npm:^7.0.2":
+  version: 7.0.4
+  resolution: "cliui@npm:7.0.4"
+  dependencies:
+    string-width: ^4.2.0
+    strip-ansi: ^6.0.0
+    wrap-ansi: ^7.0.0
+  checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^8.0.1":
  version: 8.0.1
  resolution: "cliui@npm:8.0.1"
@ -3822,7 +3848,7 @@ __metadata:
  languageName: node
  linkType: hard

-"color-convert@npm:^1.9.0":
+"color-convert@npm:^1.9.0, color-convert@npm:^1.9.3":
  version: 1.9.3
  resolution: "color-convert@npm:1.9.3"
  dependencies:
@ -3847,13 +3873,33 @@ __metadata:
  languageName: node
  linkType: hard

-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
  version: 1.1.4
  resolution: "color-name@npm:1.1.4"
  checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
  languageName: node
  linkType: hard

+"color-string@npm:^1.6.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5
+  languageName: node
+  linkType: hard
+
+"color@npm:^3.1.2":
+  version: 3.2.1
+  resolution: "color@npm:3.2.1"
+  dependencies:
+    color-convert: ^1.9.3
+    color-string: ^1.6.0
+  checksum: f81220e8b774d35865c2561be921f5652117638dcda7ca4029262046e37fc2444ac7bbfdd110cf1fd9c074a4ee5eda8f85944ffbdda26186b602dd9bb05f6400
+  languageName: node
+  linkType: hard
+
 "colorette@npm:^1.0.7":
  version: 1.4.0
  resolution: "colorette@npm:1.4.0"
@ -4099,6 +4145,13 @@ __metadata:
  languageName: node
  linkType: hard

+"deepmerge@npm:^3.2.0":
+  version: 3.3.0
+  resolution: "deepmerge@npm:3.3.0"
+  checksum: 4322195389e0170a0443c07b36add19b90249802c4b47b96265fdc5f5d8beddf491d5e50cbc5bfd65f85ccf76598173083863c202f5463b3b667aca8be75d5ac
+  languageName: node
+  linkType: hard
+
 "deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.0":
  version: 4.3.1
  resolution: "deepmerge@npm:4.3.1"
@ -5354,6 +5407,15 @@ __metadata:
  languageName: node
  linkType: hard

+"hoist-non-react-statics@npm:^3.3.0":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: ^16.7.0
+  checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8
+  languageName: node
+  linkType: hard
+
 "html-escaper@npm:^2.0.0":
  version: 2.0.2
  resolution: "html-escaper@npm:2.0.2"
@ -5552,6 +5614,13 @@ __metadata:
  languageName: node
  linkType: hard

+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
  version: 2.0.0
  resolution: "is-async-function@npm:2.0.0"
@ -7885,7 +7954,7 @@ __metadata:
  languageName: node
  linkType: hard

-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
  version: 15.8.1
  resolution: "prop-types@npm:15.8.1"
  dependencies:
@ -7957,7 +8026,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-is@npm:^16.13.1":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
  version: 16.13.1
  resolution: "react-is@npm:16.13.1"
  checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@ -7971,6 +8040,32 @@ __metadata:
  languageName: node
  linkType: hard

+"react-native-paper@npm:^5.12.5":
+  version: 5.12.5
+  resolution: "react-native-paper@npm:5.12.5"
+  dependencies:
+    "@callstack/react-theme-provider": ^3.0.9
+    color: ^3.1.2
+    use-latest-callback: ^0.1.5
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: "*"
+    react-native-vector-icons: "*"
+  checksum: 35ce56e0bb19c46ce85adc47a504527b7ec455d1a15f3ace0d6fd438abd51b1fe30e1b44351950e16d6376ddbc18ecc94b558e267767d0a9fd886a5f66a4c322
+  languageName: node
+  linkType: hard
+
+"react-native-safe-area-context@npm:^4.10.8":
+  version: 4.10.8
+  resolution: "react-native-safe-area-context@npm:4.10.8"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: eced388ae7cc712f75e43cba302b612c8fecceb8ec8b39cff21b6bc29debe2fdc24423f67609af244d919c3ed871dd1d36c6adc97a8960a938984d333490e653
+  languageName: node
+  linkType: hard
+
 "react-native-sqlite-storage@npm:^6.0.1":
  version: 6.0.1
  resolution: "react-native-sqlite-storage@npm:6.0.1"
@ -7980,6 +8075,21 @@ __metadata:
  languageName: node
  linkType: hard

+"react-native-vector-icons@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "react-native-vector-icons@npm:10.1.0"
+  dependencies:
+    prop-types: ^15.7.2
+    yargs: ^16.1.1
+  bin:
+    fa-upgrade.sh: bin/fa-upgrade.sh
+    fa5-upgrade: bin/fa5-upgrade.sh
+    fa6-upgrade: bin/fa6-upgrade.sh
+    generate-icon: bin/generate-icon.js
+  checksum: c1e1d7c7ccc110e99caaed4d57324d5331dfa91817183350d2fd4df16d2302e7363da1f7a2b87011da3936b77aac3a7bf8ee11844dd8786b8b7dbc6553494866
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.74.3":
  version: 0.74.3
  resolution: "react-native@npm:0.74.3"
@ -8612,6 +8722,15 @@ __metadata:
  languageName: node
  linkType: hard

+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: ^0.3.1
+  checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
  version: 1.0.5
  resolution: "sisteransi@npm:1.0.5"
@ -9339,6 +9458,15 @@ __metadata:
  languageName: node
  linkType: hard

+"use-latest-callback@npm:^0.1.5":
+  version: 0.1.11
+  resolution: "use-latest-callback@npm:0.1.11"
+  peerDependencies:
+    react: ">=16.8"
+  checksum: cc6df404a4ed3a39d0eb014a815c2e568a6abbe8c5ff09f9205a08bf68e86201826ed633865a6056ca0fd9581e0e7e70f18ca26c592a9eaccea5d244cf283b1f
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
  version: 1.0.2
  resolution: "util-deprecate@npm:1.0.2"
@ -9653,6 +9781,13 @@ __metadata:
  languageName: node
  linkType: hard

+"yargs-parser@npm:^20.2.2":
+  version: 20.2.9
+  resolution: "yargs-parser@npm:20.2.9"
+  checksum: 8bb69015f2b0ff9e17b2c8e6bfe224ab463dd00ca211eece72a4cd8a906224d2703fb8a326d36fdd0e68701e201b2a60ed7cf81ce0fd9b3799f9fe7745977ae3
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^21.1.1":
  version: 21.1.1
  resolution: "yargs-parser@npm:21.1.1"
@ -9679,6 +9814,21 @@ __metadata:
  languageName: node
  linkType: hard

+"yargs@npm:^16.1.1":
+  version: 16.2.0
+  resolution: "yargs@npm:16.2.0"
+  dependencies:
+    cliui: ^7.0.2
+    escalade: ^3.1.1
+    get-caller-file: ^2.0.5
+    require-directory: ^2.1.1
+    string-width: ^4.2.0
+    y18n: ^5.0.5
+    yargs-parser: ^20.2.2
+  checksum: b14afbb51e3251a204d81937c86a7e9d4bdbf9a2bcee38226c900d00f522969ab675703bee2a6f99f8e20103f608382936034e64d921b74df82b63c07c5e8f59
+  languageName: node
+  linkType: hard
+
 "yargs@npm:^17.3.1, yargs@npm:^17.6.2":
  version: 17.7.2
  resolution: "yargs@npm:17.7.2"