refactor(example): remove alternative ways of using StackContainer in example (#146)

## Description

- **Remove alternative way of providing `StackContainer` with path
configuration**

It unnecessarily complicates things, we don't need it. In both
approaches we need to specify available screens (paths in current
nomenclature) up front anyway. It is fine to specify just the config.

## Test code and steps to reproduce

`TestScreenStack`

## Checklist

- [ ] Ensured that CI passes

Author: kkafar

apps/src/tests/TestScreenStack/StackContainer.tsx

@@ -33,10 +33,7 @@ export const StackContainerPath = (_: Path) => {
 };
 
 interface StackContainerProps {
-  children?: {
-    props: Path;
-  }[];
-  config?: Path[];
+  pathConfigs: Path[];
   options?: StackProps;
 }
 
@@ -64,35 +61,25 @@ export function useStackNavigation() {
   return context;
 }
 
-export function StackContainer({ children, config }: StackContainerProps) {
-  const [stack, setStack] = React.useState<Screen[]>([]);
+function requireNotEmptyPaths(pathConfigs?: Path[]) {
+  if (pathConfigs == null || pathConfigs.length === 0) {
+    throw new Error('[RNScreens] There must be at least one path configured');
+  }
+}
 
-  const paths: Path[] = React.useMemo(() => {
-    const configuredPaths =
-      config?.length !== undefined && config?.length
-        ? config
-        : children?.map(child => child.props);
-
-    if (
-      configuredPaths?.length === undefined ||
-      configuredPaths?.length === 0
-    ) {
-      throw new Error(
-        'There must be at least one path configured, please define paths using StackContainerPath components or the config prop',
-      );
-    }
+export function StackContainer({ pathConfigs }: StackContainerProps) {
+  requireNotEmptyPaths(pathConfigs);
 
-    return configuredPaths;
-  }, [children, config]);
+  const [stack, setStack] = React.useState<Screen[]>([]);
 
   const pathsMap = React.useMemo(
-    () => Object.fromEntries(paths.map(path => [path.name, path])),
-    [paths],
+    () => Object.fromEntries(pathConfigs.map(config => [config.name, config])),
+    [pathConfigs],
   );
 
   const push = React.useCallback(
     (name: string) => {
-      const requestedPath = pathsMap?.[name];
+      const requestedPath = pathsMap[name];
 
       if (!requestedPath) {
         throw new Error(`Path with name ${name} is not defined`);
@@ -148,15 +135,15 @@ export function StackContainer({ children, config }: StackContainerProps) {
 
   React.useEffect(() => {
     if (stack.length === 0) {
-      const firstPath = paths?.[0]?.name;
+      const firstPath = pathConfigs[0].name;
 
       if (!firstPath) {
         throw new Error('There must be at least one path defined');
       }
 
       push(firstPath);
     }
-  }, [paths, push, stack.length]);
+  }, [pathConfigs, push, stack.length]);
 
   console.log('StackContainer render', stack);
 

apps/src/tests/TestScreenStack/index.tsx

@@ -1,37 +1,10 @@
 import React from 'react';
 
-
-// Alternative way to define stack
-
-// import { Button } from 'react-native';
-// import { ScreenLayout } from './ScreenLayout';
-// import { StackContainer, StackContainerPath, useStackNavigation } from './StackContainer';
-
-// const TestComponent = () => {
-//    const navigation = useStackNavigation();
-
-//    return (
-//       <ScreenLayout>
-//          <Button onPress={() => navigation.push('A')} title="Push A" />
-//          <Button onPress={() => navigation.push('B')} title="Push B" />
-//       </ScreenLayout>
-//    );
-// };
-
-// export default function App() {
-//    return (
-//       <StackContainer>
-//          <StackContainerPath name="A" component={TestComponent} />
-//          <StackContainerPath name="B" component={TestComponent} />
-//       </StackContainer>
-//   );
-// }
-
 import { generateStackWithNames } from './helper';
 import { StackContainer } from './StackContainer';
 
 export default function App() {
   return (
-    <StackContainer config={generateStackWithNames(['A', 'B', 'C'])}/>
+    <StackContainer pathConfigs={generateStackWithNames(['A', 'B', 'C'])} />
   );
 }