chore(examples): allow modifying route blueprints passed to StackContainer (#3626)

## Description  

**Expose `StackContainerWithDynamicRouteConfigs` component**
It's a wrapper for `StackContainer`. It adds `StackRouteConfigContext`,
which can be used to modify route options stored in route
configurations.

This is different from what
<#3625>
introduced, because this does not impact existing route instances. Only
blueprints.

I created separate component to keep the `StackContainer` logic thin.

Author: kkafar

apps/src/shared/gamma/containers/stack/StackContainer.tsx

@@ -95,7 +95,7 @@ function useSanitizeRouteConfigs(
   routeConfigs?: StackRouteConfig[] | undefined | null,
 ) {
   if (!routeConfigs || routeConfigs.length === 0) {
-    throw new Error('[RNScreens] There must be at least one route configured');
+    throw new Error('[Stack] There must be at least one route configured');
   }
 
   // Do not recompute in case the routeConfigs have not changed
@@ -106,6 +106,6 @@ function useSanitizeRouteConfigs(
   }, [routeConfigs]);
 
   if (!areNamesUnique) {
-    throw new Error('[RNScreens] All routes must have unique names');
+    throw new Error('[Stack] All routes must have unique names');
   }
 }

apps/src/shared/gamma/containers/stack/StackContainerWithDynamicRouteConfigs.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StackContainer } from './StackContainer';
+import { StackContainerProps, StackRouteOptions } from './StackContainer.types';
+import { StackRouteConfigContext } from './contexts/StackRouteConfigContext';
+
+/**
+ * StackContainer wrapped in context allowing for modifying options
+ * of route configs.
+ * See StackRouteConfigContext.
+ */
+export function StackContainerWithDynamicRouteConfigs(
+  props: StackContainerProps,
+) {
+  const [routeConfigs, setRouteConfigs] = React.useState(props.routeConfigs);
+
+  const updateRouteConfigWithOptions = React.useCallback(
+    (routeName: string, options: Partial<StackRouteOptions>) => {
+      setRouteConfigs(prevConfigs => {
+        const routeConfigIndex = prevConfigs.findIndex(
+          config => config.name === routeName,
+        );
+
+        if (routeConfigIndex === -1) {
+          throw new Error(`Route with name "${routeName}" not found`);
+        }
+
+        return prevConfigs.toSpliced(routeConfigIndex, 1, {
+          ...prevConfigs[routeConfigIndex],
+          options,
+        });
+      });
+    },
+    [],
+  );
+
+  return (
+    <StackRouteConfigContext
+      value={{
+        routeConfigs,
+        updateRouteConfigWithOptions,
+      }}>
+      <StackContainer routeConfigs={routeConfigs} />
+    </StackRouteConfigContext>
+  );
+}

apps/src/shared/gamma/containers/stack/contexts/StackRouteConfigContext.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type {
+  StackRouteConfig,
+  StackRouteOptions,
+} from '../StackContainer.types';
+
+export type StackRouteConfigContextPayload = {
+  routeConfigs: StackRouteConfig[];
+  updateRouteConfigWithOptions: (
+    routeName: string,
+    options: Partial<StackRouteOptions>,
+  ) => void;
+};
+
+export const StackRouteConfigContext =
+  React.createContext<StackRouteConfigContextPayload | null>(null);

apps/src/shared/gamma/containers/stack/hooks/useStackRouteConfigContext.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StackRouteConfigContext } from '../contexts/StackRouteConfigContext';
+
+export function useStackRouteConfigContext() {
+  const context = React.useContext(StackRouteConfigContext);
+
+  if (!context) {
+    throw new Error(
+      'useStackRouteConfigContext must be used within a StackContainerWithContext',
+    );
+  }
+
+  return context;
+}

apps/src/shared/gamma/containers/stack/index.ts

@@ -5,7 +5,10 @@ export type {
 } from './StackContainer.types';
 
 export type { StackNavigationContextPayload } from './contexts/StackNavigationContext';
+export type { StackRouteConfigContextPayload } from './contexts/StackRouteConfigContext';
 
 export { useStackNavigationContext } from './hooks/useStackNavigationContext';
+export { useStackRouteConfigContext } from './hooks/useStackRouteConfigContext';
 
 export { StackContainer } from './StackContainer';
+export { StackContainerWithDynamicRouteConfigs } from './StackContainerWithDynamicRouteConfigs';

apps/src/tests/single-feature-tests/stack-v5/prevent-native-dismiss-nested-stack.tsx

@@ -89,7 +89,6 @@ function AScreen() {
       <RouteInformation routeName="A" />
       <PreventNativeDismissInfo />
       <NavigationButtons isPopEnabled routeNames={['A', 'B', 'NestedStack']} />
-      <TogglePreventNativeDismiss />
     </CenteredLayoutView>
   );
 }
@@ -167,7 +166,6 @@ function NestedAScreen() {
       <RouteInformation routeName="NestedA" />
       <PreventNativeDismissInfo />
       <NavigationButtons isPopEnabled routeNames={['NestedA', 'NestedB']} />
-      <TogglePreventNativeDismiss />
     </CenteredLayoutView>
   );
 }

apps/src/tests/single-feature-tests/stack-v5/prevent-native-dismiss-single-stack.tsx

@@ -78,7 +78,6 @@ function AScreen() {
       <RouteInformation routeName="A" />
       <PreventNativeDismissInfo />
       <NavigationButtons isPopEnabled={true} />
-      <TogglePreventNativeDismiss />
     </CenteredLayoutView>
   );
 }