@granite-js/react-native 0.0.0-dev-20250725013859

package/src/router/types/screen-option.ts

@@ -0,0 +1,23 @@
+import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+import { Platform } from 'react-native';
+
+export const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+export const DEFAULT_HEADER_TINT_COLOR = '#333d4b';
+export const BASE_STACK_NAVIGATOR_STYLE: NativeStackNavigationOptions = {
+  contentStyle: {
+    backgroundColor: DEFAULT_BACKGROUND_COLOR,
+  },
+  headerTintColor: DEFAULT_HEADER_TINT_COLOR,
+  headerTitleStyle: {
+    color: 'transparent',
+  },
+  headerStyle: {
+    backgroundColor: DEFAULT_BACKGROUND_COLOR,
+  },
+  headerShadowVisible: false,
+
+  // FIX
+  // According to the docs, react-navigation's Android transition behavior should follow the OS default, but in reality, it doesn't.
+  // We've decided to solve this issue by unifying the animation to slide up from bottom.
+  animation: Platform.OS === 'android' ? 'fade_from_bottom' : 'default',
+};

package/src/router/utils/createParentRouteScreenMap.spec.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest';
+import { createParentRouteScreenMap } from './createParentRouteScreenMap';
+import type { RouteScreen } from '../types/RouteScreen';
+
+describe('createParentRouteScreenMap', () => {
+  describe('When there are nested layouts', () => {
+    it('Each page is mapped to its nearest parent layout', () => {
+      const paths: RouteScreen[] = [
+        { path: './granite-module/_layout', component: () => null },
+        { path: './granite-module/test', component: () => null },
+        { path: './about/_layout', component: () => null },
+        { path: './about/test', component: () => null },
+        { path: './about', component: () => null },
+        { path: './image', component: () => null },
+      ];
+
+      const layoutMap = createParentRouteScreenMap(paths, '_layout');
+
+      // Pages in granite-module directory are mapped to their layout
+      expect(layoutMap.get('./granite-module/test')?.path).toBe('./granite-module/_layout');
+
+      // Pages in about directory are mapped to their layout
+      expect(layoutMap.get('./about')?.path).toBe('./about/_layout');
+      expect(layoutMap.get('./about/test')?.path).toBe('./about/_layout');
+
+      // Pages without layout are undefined
+      expect(layoutMap.get('./image')).toBeUndefined();
+
+      // Layout files are not mapped because there's no layout at the root
+      expect(layoutMap.get('./granite-module/_layout')).toBeUndefined();
+      expect(layoutMap.get('./about/_layout')).toBeUndefined();
+    });
+
+    it('If there is a root layout, pages without layout are mapped to the root layout', () => {
+      const paths: RouteScreen[] = [
+        { path: './_layout', component: () => null },
+        { path: './image', component: () => null },
+        { path: './granite-module/_layout', component: () => null },
+        { path: './granite-module/test', component: () => null },
+        { path: './about/_layout', component: () => null },
+        { path: './about', component: () => null },
+        { path: './about/test', component: () => null },
+      ];
+
+      const layoutMap = createParentRouteScreenMap(paths, '_layout');
+
+      // Pages in each directory are mapped to their layout
+      expect(layoutMap.get('./granite-module/test')?.path).toBe('./granite-module/_layout');
+      expect(layoutMap.get('./about')?.path).toBe('./about/_layout');
+      expect(layoutMap.get('./about/test')?.path).toBe('./about/_layout');
+
+      // Pages without layout are mapped to root layout
+      expect(layoutMap.get('./image')?.path).toBe('./_layout');
+      expect(layoutMap.get('./_layout')).toBeUndefined();
+      expect(layoutMap.get('./granite-module/_layout')?.path).toBe('./_layout');
+      expect(layoutMap.get('./about/_layout')?.path).toBe('./_layout');
+    });
+
+    it('Layout mapping works correctly in nested directory structure', () => {
+      const paths: RouteScreen[] = [
+        { path: './nested', component: () => null },
+        { path: './nested/_layout', component: () => null },
+        { path: './nested/test', component: () => null },
+      ];
+
+      const layoutMap = createParentRouteScreenMap(paths, '_layout');
+
+      // nested is mapped to nested/_layout
+      expect(layoutMap.get('./nested')?.path).toBe('./nested/_layout');
+
+      // nested/test is mapped to nested/_layout
+      expect(layoutMap.get('./nested/test')?.path).toBe('./nested/_layout');
+
+      expect(layoutMap.get('./nested/_layout')?.path).toBeUndefined();
+    });
+
+    it('Layout mapping works correctly in double nested directory structure', () => {
+      const paths: RouteScreen[] = [
+        { path: './nested/_layout', component: () => null },
+        { path: './nested/test', component: () => null },
+        { path: './nested/deep/_layout', component: () => null },
+        { path: './nested/deep/test', component: () => null },
+      ];
+
+      const layoutMap = createParentRouteScreenMap(paths, '_layout');
+
+      // nested/test is mapped to nested/_layout
+      expect(layoutMap.get('./nested/test')?.path).toBe('./nested/_layout');
+
+      // nested/deep/test is mapped to nested/deep/_layout
+      expect(layoutMap.get('./nested/deep/test')?.path).toBe('./nested/deep/_layout');
+
+      // nested/deep/_layout is mapped to nested/_layout
+      expect(layoutMap.get('./nested/deep/_layout')?.path).toBe('./nested/_layout');
+
+      // nested/_layout is not mapped
+      expect(layoutMap.get('./nested/_layout')?.path).toBeUndefined();
+    });
+
+    it('Layout mapping works correctly in triple nested directory structure', () => {
+      const paths: RouteScreen[] = [
+        { path: './nested/_layout', component: () => null },
+        { path: './nested/test', component: () => null },
+        { path: './nested/deep/_layout', component: () => null },
+        { path: './nested/deep/test', component: () => null },
+        { path: './nested/deep/deeper/_layout', component: () => null },
+        { path: './nested/deep/deeper/test', component: () => null },
+      ];
+
+      const layoutMap = createParentRouteScreenMap(paths, '_layout');
+
+      // nested/test is mapped to nested/_layout
+      expect(layoutMap.get('./nested/test')?.path).toBe('./nested/_layout');
+
+      // nested/deep/test is mapped to nested/deep/_layout
+      expect(layoutMap.get('./nested/deep/test')?.path).toBe('./nested/deep/_layout');
+
+      // nested/deep/deeper/test is mapped to nested/deep/deeper/_layout
+      expect(layoutMap.get('./nested/deep/deeper/test')?.path).toBe('./nested/deep/deeper/_layout');
+
+      // nested/deep/deeper/_layout is mapped to nested/deep/_layout
+      expect(layoutMap.get('./nested/deep/deeper/_layout')?.path).toBe('./nested/deep/_layout');
+
+      // nested/deep/_layout is mapped to nested/_layout
+      expect(layoutMap.get('./nested/deep/_layout')?.path).toBe('./nested/_layout');
+
+      // nested/_layout is not mapped
+      expect(layoutMap.get('./nested/_layout')?.path).toBeUndefined();
+    });
+  });
+
+  describe('When there are no layouts', () => {
+    it('All pages are mapped to undefined', () => {
+      const paths: RouteScreen[] = [
+        { path: './page1', component: () => null },
+        { path: './page2', component: () => null },
+        { path: './nested/page3', component: () => null },
+        { path: './nested/deep/page4', component: () => null },
+      ];
+
+      const layoutMap = createParentRouteScreenMap(paths, '_layout');
+
+      // All pages are undefined
+      expect(layoutMap.get('./page1')).toBeUndefined();
+      expect(layoutMap.get('./page2')).toBeUndefined();
+      expect(layoutMap.get('./nested/page3')).toBeUndefined();
+      expect(layoutMap.get('./nested/deep/page4')).toBeUndefined();
+    });
+  });
+
+  it('Nested _layout is mapped to parent _layout', () => {
+    const paths: RouteScreen[] = [
+      { path: './_layout', component: () => null },
+      { path: './nested/_layout', component: () => null },
+      { path: './nested/test', component: () => null },
+      { path: './nested/deep/_layout', component: () => null },
+      { path: './nested/deep/test', component: () => null },
+    ];
+
+    const layoutMap = createParentRouteScreenMap(paths, '_layout');
+    expect(layoutMap.get('./nested/deep/test')?.path).toBe('./nested/deep/_layout');
+    expect(layoutMap.get('./nested/deep/_layout')?.path).toBe('./nested/_layout');
+    expect(layoutMap.get('./nested/_layout')?.path).toBe('./_layout');
+    expect(layoutMap.get('./_layout')?.path).toBeUndefined();
+  });
+});

package/src/router/utils/createParentRouteScreenMap.ts

@@ -0,0 +1,136 @@
+import { getFileNameFromPath } from './path';
+import type { RouteScreen } from '../types/RouteScreen';
+
+/**
+ * Extracts only the directory path from a given file path
+ * Example) './about/test' -> './about'
+ * Example) './about'     -> '.' (default logic)
+ *  but... For testing, if the path is included in 'layoutDirs', return as is
+ */
+function getDirectoryPath(filePath: string, layoutDirs: Set<string>): string {
+  // If included in layoutDirs, this path itself is a directory-based route
+  if (layoutDirs.has(filePath)) {
+    return filePath;
+  }
+
+  const lastSlashIndex = filePath.lastIndexOf('/');
+  if (lastSlashIndex === -1) {
+    // If there's no slash, treat as '.'
+    return '.';
+  }
+  const dirPath = filePath.substring(0, lastSlashIndex);
+  return dirPath === '' ? '.' : dirPath;
+}
+
+/**
+ * Get parent directory path
+ * Example) './nested/deep' -> './nested'
+ * Example) './nested' -> '.'
+ * Example) '.' -> '' (no more parent)
+ */
+function getParentDirectory(dirPath: string): string {
+  if (dirPath === '.' || dirPath === '') {
+    return '';
+  }
+  const idx = dirPath.lastIndexOf('/');
+  if (idx === -1) {
+    return '.';
+  }
+  const parent = dirPath.substring(0, idx);
+  return parent === '' ? '.' : parent;
+}
+
+/**
+ * @name createParentRouteScreenMap
+ * @description
+ *   Finds a specific keyword in a given list of files and
+ *   maps each page/layout to use its "nearest parent layout"
+ */
+export function createParentRouteScreenMap(routeScreens: RouteScreen[], keyword: string): Map<string, RouteScreen> {
+  // 1) Find keyword files and record their directories in layoutDirs set
+  //    Example) "./about/[keyword]" -> layoutDirs.add("./about")
+  const layoutDirs = new Set<string>();
+  const layoutScreens = new Map<string, RouteScreen>();
+
+  for (const screen of routeScreens) {
+    const fileName = getFileNameFromPath(screen.path, { withExtension: false });
+    if (fileName === keyword) {
+      const dirPath = screen.path.substring(0, screen.path.lastIndexOf('/'));
+      layoutDirs.add(dirPath || '.'); // Store directory path like './about'
+    }
+  }
+
+  // 2) Create layoutScreens (directory->keyword file) mapping
+  for (const screen of routeScreens) {
+    const fileName = getFileNameFromPath(screen.path, { withExtension: false });
+    if (fileName === keyword) {
+      // The directory this keyword file belongs to is already in layoutDirs
+      // dirPath: './about', './nested', etc.
+      const dirPath = getDirectoryPath(screen.path, layoutDirs);
+      layoutScreens.set(dirPath, screen);
+    }
+  }
+
+  /**
+   * 3) Function to find the nearest layout by traversing up parent directories
+   *    - skipSameDir: whether to check from own directory or from parent
+   *
+   *    memo: (dirPath + '|' + skipSameDir) -> RouteScreen | undefined
+   */
+  const memo = new Map<string, RouteScreen | undefined>();
+
+  function findNearestLayout(dir: string, skipSameDir = false): RouteScreen | undefined {
+    const cacheKey = dir + '|' + skipSameDir;
+    if (memo.has(cacheKey)) {
+      return memo.get(cacheKey);
+    }
+
+    let current = dir;
+
+    if (skipSameDir) {
+      current = getParentDirectory(current);
+    }
+
+    while (current) {
+      if (layoutScreens.has(current)) {
+        const foundLayout = layoutScreens.get(current);
+        memo.set(cacheKey, foundLayout);
+        return foundLayout;
+      }
+      if (current === '.' || current === '') {
+        break;
+      }
+      current = getParentDirectory(current);
+    }
+
+    memo.set(cacheKey, undefined);
+    return undefined;
+  }
+
+  // 4) Finally create "path -> parent layout" mapping
+  const parentRouteScreenMap = new Map<string, RouteScreen>();
+
+  for (const screen of routeScreens) {
+    const fileName = getFileNameFromPath(screen.path, { withExtension: false });
+
+    // Get the "directory" this file (or directory) belongs to
+    const dirPath = getDirectoryPath(screen.path, layoutDirs);
+
+    if (fileName === keyword) {
+      // (1) If this is a keyword file, search for layout in "parent directory"
+      //     => must skip self (skipSameDir=true)
+      const parentLayout = findNearestLayout(dirPath, true);
+      if (parentLayout) {
+        parentRouteScreenMap.set(screen.path, parentLayout);
+      }
+    } else {
+      // (2) If it's a regular page (or regular file), search for layout from own directory up
+      const nearestLayout = findNearestLayout(dirPath, false);
+      if (nearestLayout) {
+        parentRouteScreenMap.set(screen.path, nearestLayout);
+      }
+    }
+  }
+
+  return parentRouteScreenMap;
+}

package/src/router/utils/defaultParserParams.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { defaultParserParams } from './defaultParserParams';
+
+describe('defaultParserParams', () => {
+  it('Parses numeric and boolean values from strings', () => {
+    const result = defaultParserParams({ foo: '123', bar: 'true' });
+    expect(result).toEqual({
+      foo: 123,
+      bar: true,
+    });
+  });
+
+  it('Parses parameters in query string format', () => {
+    const result = defaultParserParams({ foo: '123', bar: 'true' });
+    expect(result).toEqual({
+      foo: 123,
+      bar: true,
+    });
+  });
+
+  it('Maintains original value for unparseable strings', () => {
+    const result = defaultParserParams({ name: 'john', age: 'invalid' });
+    expect(result).toEqual({
+      name: 'john',
+      age: 'invalid',
+    });
+  });
+
+  it('Parses JSON format arrays', () => {
+    const result = defaultParserParams({ numbers: '[1,2,3]', strings: '["a","b"]' });
+    expect(result).toEqual({
+      numbers: [1, 2, 3],
+      strings: ['a', 'b'],
+    });
+  });
+
+  it('Parses JSON format objects', () => {
+    const result = defaultParserParams({ user: '{"name":"john","age":30}' });
+    expect(result).toEqual({
+      user: {
+        name: 'john',
+        age: 30,
+      },
+    });
+  });
+});

package/src/router/utils/defaultParserParams.ts

@@ -0,0 +1,19 @@
+/**
+ * Parses URL query string and converts it to an object.
+ * @param params - Query string to parse
+ * @returns Parsed query object
+ * @example
+ * // Input: { foo: '123', bar: 'true' }
+ * // Output: { foo: 123, bar: true }
+ */
+export function defaultParserParams(params?: Record<string, string>): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(params ?? {}).map(([key, value]) => {
+      try {
+        return [key, JSON.parse(value)];
+      } catch {
+        return [key, value];
+      }
+    })
+  );
+}

package/src/router/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './screen';
+export * from './defaultParserParams';

package/src/router/utils/matchers.ts

@@ -0,0 +1,5 @@
+/** `[page]` -> `page` */
+export function matchDynamicName(name: string): string | undefined {
+  // eslint-disable-next-line no-useless-escape
+  return name.match(/^\[([^[\](?:\.\.\.)]+?)\]$/)?.[1];
+}

package/src/router/utils/mergeParentLayoutScreen.spec.tsx

@@ -0,0 +1,112 @@
+import { render } from '@testing-library/react';
+import { ReactNode } from 'react';
+import { it, describe, expect } from 'vitest';
+import { Screen } from '..';
+import { mergeParentLayoutScreen } from './mergeParentLayoutScreen';
+import { RouteScreen } from '../types/RouteScreen';
+
+declare global {
+  interface HTMLElement {
+    innerHTML: string;
+  }
+}
+
+function ItemLayout({ children }: { children: ReactNode }) {
+  return <div id="item-layout">{children}</div>;
+}
+
+function RootLayout({ children }: { children: ReactNode }) {
+  return <div id="root-layout">{children}</div>;
+}
+
+function SubItemLayout({ children }: { children: ReactNode }) {
+  return <div id="sub-item-layout">{children}</div>;
+}
+
+describe('mergeParentLayoutScreen', () => {
+  it('Parent layout and child layout should be nested in the correct order', () => {
+    const map = new Map<string, RouteScreen>();
+
+    map.set('./item/detail', {
+      component: ItemLayout as Screen,
+      path: './item/_layout',
+    });
+
+    map.set('./item/_layout', {
+      component: RootLayout as Screen,
+      path: './_layout',
+    });
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail');
+
+    const { container } = render(<MergedLayout>item detail</MergedLayout>);
+
+    // Should be nested in order: RootLayout > ItemLayout > content
+    expect(container.innerHTML).toBe(
+      render(
+        <div id="root-layout">
+          <div id="item-layout">item detail</div>
+        </div>
+      ).container.innerHTML
+    );
+  });
+
+  it('Triple nested layout should render in the correct order', () => {
+    const map = new Map<string, RouteScreen>();
+
+    map.set('./item/detail/sub', {
+      component: SubItemLayout as Screen,
+      path: './item/detail/_layout',
+    });
+
+    map.set('./item/detail/_layout', {
+      component: ItemLayout as Screen,
+      path: './item/_layout',
+    });
+
+    map.set('./item/_layout', {
+      component: RootLayout as Screen,
+      path: './_layout',
+    });
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail/sub');
+
+    const { container } = render(<MergedLayout>sub item detail</MergedLayout>);
+
+    // Should be nested in order: RootLayout > ItemLayout > SubItemLayout > content
+    expect(container.innerHTML).toBe(
+      render(
+        <div id="root-layout">
+          <div id="item-layout">
+            <div id="sub-item-layout">sub item detail</div>
+          </div>
+        </div>
+      ).container.innerHTML
+    );
+  });
+
+  it('Single layout should render correctly', () => {
+    const map = new Map<string, RouteScreen>();
+
+    map.set('./item/detail', {
+      component: RootLayout as Screen,
+      path: './_layout',
+    });
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail');
+
+    const { container } = render(<MergedLayout>item detail</MergedLayout>);
+
+    expect(container.innerHTML).toBe(render(<div id="root-layout">item detail</div>).container.innerHTML);
+  });
+
+  it('Should render only content when no layout is defined', () => {
+    const map = new Map<string, RouteScreen>();
+
+    const MergedLayout = mergeParentLayoutScreen(map, './item/detail');
+
+    const { container } = render(<MergedLayout>item detail</MergedLayout>);
+
+    expect(container.innerHTML).toBe(render(<>item detail</>).container.innerHTML);
+  });
+});

package/src/router/utils/mergeParentLayoutScreen.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+import { RouteScreen } from '../types/RouteScreen';
+
+export type LayoutScreen = FC<{ children: ReactNode }>;
+
+/**
+ * Starting from the layout mapped to a specific path, traverses up to parent layouts,
+ * creates an array in the order of "innermost → outermost",
+ * then builds up the final wrapper component using reduce.
+ *
+ * Example) map:
+ *   './item/detail' => { component: ItemLayout, path: './item/_layout' }
+ *   './item/_layout' => { component: RootLayout, path: './_layout' }
+ *
+ * => layoutChain = [ItemLayout, RootLayout]
+ * => Final rendering result: <RootLayout><ItemLayout>children</ItemLayout></RootLayout>
+ */
+export function mergeParentLayoutScreen(screens: Map<string, RouteScreen>, path: string): LayoutScreen {
+  // Final wrapper component
+  let MergedLayout: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;
+
+  let currentPath: string | undefined = path;
+  while (currentPath) {
+    const routeScreen = screens.get(currentPath);
+    if (!routeScreen) {
+      break;
+    }
+
+    // Wrap with immediate parent wrapper
+    const LayoutScreen = routeScreen.component as LayoutScreen;
+    const ChildLayout = MergedLayout;
+    MergedLayout = ({ children }) => (
+      <LayoutScreen>
+        <ChildLayout>{children}</ChildLayout>
+      </LayoutScreen>
+    );
+
+    // Move to parent path
+    currentPath = routeScreen.path;
+  }
+
+  return MergedLayout;
+}