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

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

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest';
+import {
+  excludeDynamicNamePattern,
+  excludeFileExtension,
+  excludeRelativePath,
+  getFileNameFromPath,
+  getRoutePath,
+} from './path';
+
+describe('excludeFileExtension', () => {
+  it('"./index.ts" is changed to "./index"', () => {
+    expect(excludeFileExtension('./index.ts')).toEqual('./index');
+  });
+
+  it('"./index.js" is changed to "./index"', () => {
+    expect(excludeFileExtension('./index.js')).toEqual('./index');
+  });
+
+  it('"./list/detail.tsx" is changed to "./list/detail"', () => {
+    expect(excludeFileExtension('./list/detail.tsx')).toEqual('./list/detail');
+  });
+
+  it('"./list/detail.jsx" is changed to "./list/detail"', () => {
+    expect(excludeFileExtension('./list/detail.jsx')).toEqual('./list/detail');
+  });
+
+  it('"./detail.foo" remains as "./detail.foo"', () => {
+    expect(excludeFileExtension('./detail.foo')).toEqual('./detail.foo');
+  });
+});
+
+describe('excludeRelativePath', () => {
+  it('"./index.tsx" is changed to "index.tsx"', () => {
+    expect(excludeRelativePath('./index.tsx')).toEqual('index.tsx');
+  });
+
+  it('"./../index.tsx" is changed to "index.tsx"', () => {
+    expect(excludeRelativePath('./../index.tsx')).toEqual('index.tsx');
+  });
+
+  it('"../../index.tsx" is changed to "index.tsx"', () => {
+    expect(excludeRelativePath('../../index.tsx')).toEqual('index.tsx');
+  });
+});
+
+describe('excludeDynamicNamePattern', () => {
+  it('"[id]" is changed to "id"', () => {
+    expect(excludeDynamicNamePattern('[id]')).toEqual('id');
+  });
+
+  it('"[id]/[name]" is changed to "id/name"', () => {
+    expect(excludeDynamicNamePattern('[id]/[name]')).toEqual('id/name');
+  });
+});
+
+describe('getRoutePath', () => {
+  describe('posix', () => {
+    it('"/index.tsx" is converted to "/"', () => {
+      expect(getRoutePath('/index.tsx')).toEqual('/');
+    });
+
+    it('"/index.ts" is converted to "/"', () => {
+      expect(getRoutePath('/index.tsx')).toEqual('/');
+    });
+
+    it('"/list/index.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('/list/index.tsx')).toEqual('/list');
+    });
+
+    it('"/list/detail.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('/list/detail.tsx')).toEqual('/list/detail');
+    });
+
+    it('"/list/[id].tsx" is converted to "/:id"', () => {
+      expect(getRoutePath('/list/[id].tsx')).toEqual('/list/:id');
+    });
+
+    it('"/list/[id].js" is converted to "/:id"', () => {
+      expect(getRoutePath('/list/[id].js')).toEqual('/list/:id');
+    });
+  });
+
+  describe('window', () => {
+    it('"\\index.tsx" is converted to "/"', () => {
+      expect(getRoutePath('\\index.tsx')).toEqual('/');
+    });
+
+    it('"\\index.ts" is converted to "/"', () => {
+      expect(getRoutePath('\\index.tsx')).toEqual('/');
+    });
+
+    it('"\\list\\index.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('\\list\\index.tsx')).toEqual('/list');
+    });
+
+    it('"\\list\\detail.tsx" is converted to "/list"', () => {
+      expect(getRoutePath('\\list\\detail.tsx')).toEqual('/list/detail');
+    });
+
+    it('"\\list\\[id].tsx" is converted to "/:id"', () => {
+      expect(getRoutePath('\\list\\[id].tsx')).toEqual('/list/:id');
+    });
+
+    it('"\\list\\[id].js" is converted to "/:id"', () => {
+      expect(getRoutePath('\\list\\[id].js')).toEqual('/list/:id');
+    });
+  });
+});
+
+describe('getFileNameFromPath', () => {
+  it('extracts filename from file path', () => {
+    const result = getFileNameFromPath('/path/to/file.txt');
+    expect(result).toBe('file.txt');
+  });
+
+  it('returns the filename when path is just a filename', () => {
+    const result = getFileNameFromPath('file.txt');
+    expect(result).toBe('file.txt');
+  });
+
+  it('returns empty string when path is empty', () => {
+    const result = getFileNameFromPath('');
+    expect(result).toBe('');
+  });
+
+  it('returns empty string when path ends with slash', () => {
+    const result = getFileNameFromPath('/path/to/directory/');
+    expect(result).toBe('');
+  });
+
+  it('extracts filename without extension using withExtension option', () => {
+    const result = getFileNameFromPath('/path/to/file.txt', { withExtension: false });
+    expect(result).toBe('file');
+  });
+});

package/src/router/utils/path.ts

@@ -0,0 +1,105 @@
+import { matchDynamicName } from './matchers';
+
+/**
+ * Converts Windows-style paths to Posix-based paths.
+ *
+ * @example
+ * ```ts
+ * toPosixBasedPath(".\\index.tsx") // "./index.tsx"
+ * toPosixBasedPath("..\\..\\index.tsx") // "../../index.tsx"
+ * ```
+ */
+function toPosixBasedPath(filePath: string): string {
+  return filePath.replace(/\\/g, '/');
+}
+
+/**
+ * @name excludeFileExtension
+ * @description Removes file extension.
+ */
+export function excludeFileExtension(name: string): string {
+  return name.replace(/\.(tsx|jsx|ts|js)$/g, '');
+}
+
+/**
+ * @name excludeRelativePath
+ * @description Removes relative path from path.
+ * @example
+ * ```ts
+ * excludeRelativePath("./index.tsx") // "index.tsx"
+ * excludeRelativePath("./list/detail.tsx") // "list/detail.tsx"
+ * excludeRelativePath("../../index.tsx") // "index.tsx"
+ * ```
+ */
+export function excludeRelativePath(filePath: string): string {
+  return filePath.replace(/^(?:\.\.?\/)+/g, '');
+}
+
+/**
+ * @name excludeDynamicNamePattern
+ * @description Removes `[` `]` from dynamic route pattern.
+ * @example
+ * ```ts
+ * excludeDynamicNamePattern("[id]") // "id"
+ * excludeDynamicNamePattern("[id]/[name]") // "id/name"
+ * ```
+ */
+export function excludeDynamicNamePattern(filePath: string): string {
+  return filePath.replace(/\[|\]/g, '');
+}
+
+/**
+ * @name getRoutePath
+ * @description Converts to route path.
+ * @example
+ * ```ts
+ * getRoutePath('./index.tsx') // "/"
+ * getRoutePath('./list/index.tsx') // "/list"
+ * getRoutePath('./list/detail.tsx') // "/list/detail"
+ * getRoutePath('./list/[id].js') // "/list/:id"
+ * ```
+ */
+export function getRoutePath(filePath: string): string {
+  const posixBasedPath = toPosixBasedPath(filePath);
+  const normalPath = excludeRelativePath(excludeFileExtension(posixBasedPath));
+
+  const routePath = normalPath
+    .split('/')
+    .map((segment) => {
+      if (segment === 'index') {
+        return '';
+      }
+
+      if (matchDynamicName(segment)) {
+        return `:${excludeDynamicNamePattern(segment)}`;
+      }
+
+      return segment;
+    })
+    .filter((segment) => segment.length > 0)
+    .join('/');
+
+  return '/' + routePath;
+}
+
+/**
+ * @name getFileNameFromPath
+ * @description Extracts filename from file path.
+ * @example
+ * ```ts
+ * getFileNameFromPath('/path/to/file.txt') // "file.txt"
+ * getFileNameFromPath('file.txt') // "file.txt"
+ * getFileNameFromPath('') // ""
+ * getFileNameFromPath('/path/to/directory/') // ""
+ * getFileNameFromPath('/path/to/file.txt', { withExtension: false }) // "file"
+ * ```
+ */
+export function getFileNameFromPath(
+  filePath: string,
+  options: { withExtension?: boolean } = {
+    withExtension: true,
+  }
+): string {
+  const fileName = filePath.split('/').pop() || '';
+  return options.withExtension ? fileName : fileName.replace(/\.[^.]+$/g, '');
+}

package/src/router/utils/screen.tsx

@@ -0,0 +1,95 @@
+import { getRoutePath } from './path';
+import { routeMap } from '../createRoute';
+import { RequireContext, RouteScreen } from '../types';
+
+/**
+ * @kind function
+ * @name getRouteScreens
+ * @description
+ * Gets screens from the pages folder.
+ *
+ * @param {RequireContext} context - Object containing information about screens in Router
+ * @returns {RouteScreen[]} screens - Returns a list of screens that can be navigated to.
+ *
+ * @example
+ * ```tsx
+ * import { getRouteScreens } from '@granite-js/react-native';
+ *
+ * const context = require.context('../pages');
+ * const screens = getRouteScreens(context);
+ * ```
+ */
+export function getRouteScreens(context: RequireContext): RouteScreen[] {
+  const screens = context.keys().map((key) => {
+    const path = getRoutePath(key);
+
+    /**
+     * Keep export default option for backward compatibility.
+     * If migrated to type-safe, only export Route will be needed.
+     */
+    const component = context(key)?.default ?? routeMap.get(context(key)?.Route?._path)?.component;
+
+    if (component == null) {
+      throw new Error(`Page component not found in ${key}.`);
+    }
+
+    return {
+      path,
+      component,
+    };
+  });
+
+  return screens;
+}
+
+/**
+ * @kind function
+ * @name getScreenPathMapConfig
+ * @description Maps paths of screens.
+ *
+ * @param {RouteScreen[]} routeScreens - List of screens that can be navigated to
+ */
+export function getScreenPathMapConfig(routeScreens: RouteScreen[]) {
+  const screensConfig: ScreenPath = {};
+
+  routeScreens.forEach((routeScreen) => {
+    const routePath = routeScreen.path;
+
+    if (screensConfig[routePath] != null) {
+      throw new Error(`${routePath} is already registered. Please check for duplicate paths.`);
+    }
+
+    screensConfig[routePath] = {
+      path: routePath,
+    };
+  });
+
+  // @see https://reactnavigation.org/docs/configuring-links/#matching-exact-paths
+  // This is a mapping for the root path ('/') for deep link handling.
+  // Example: To handle URLs like scheme://{service_name}?name=John,
+  // map the root path to an empty string to correctly extract query parameters.
+  screensConfig['/'] = {
+    path: '',
+  };
+
+  // https://reactnavigation.org/docs/configuring-links/#handling-unmatched-routes-or-404
+  screensConfig['/_404'] = {
+    path: '*',
+  };
+
+  return screensConfig;
+}
+
+/**
+ * @name ScreenPath
+ * @description
+ * Type representing screen paths.
+ *
+ * @typedef {Record<string, { path?: string }>} ScreenPath
+ */
+export type ScreenPath = Record<
+  string,
+  {
+    path?: string;
+  }
+>;

package/src/scroll-view-inertial-background/ScrollViewInertialBackground.tsx

@@ -0,0 +1,99 @@
+import type { ComponentProps } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+
+interface ScrollViewInertialBackgroundProps {
+  topColor?: string;
+  bottomColor?: string;
+  spacer?: number;
+}
+
+/**
+ * @public
+ * @category UI
+ * @name ScrollViewInertialBackground
+ * @description
+ * Adds background colors to the top and bottom spaces of iOS `ScrollView` content to provide a natural visual effect when scrolling.
+ * In iOS, when scrolling reaches the end, a slight bouncing effect occurs, known as the [Bounce effect](https://medium.com/@wcandillon/ios-bounce-list-effect-with-react-native-5102e3a83999). Setting background colors in the spaces above and below the content can provide a more consistent user experience.
+ *
+ * @param {object} [props] - `props` object passed to the component.
+ * @param {string} [props.topColor] - Background color to apply to the top area of the scroll. Default is `adaptive.background` which is automatically applied based on the system theme.
+ * @param {string} [props.bottomColor] - Background color to apply to the bottom area of the scroll. Default is `adaptive.background` which is automatically applied based on the system theme.
+ * @param {number} [props.spacer] - Specifies the size of the space between the top and bottom areas where the background color is applied. Default uses the screen height obtained from [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions).
+ *
+ * @example
+ *
+ * ### Adding background colors to the top and bottom of a scroll view
+ *
+ * Adds red background color to the top and blue to the bottom of the scroll view. The background color is applied to areas outside the scroll.
+ *
+ * ```tsx
+ * import { ScrollView, View, Text } from 'react-native';
+ * import { ScrollViewInertialBackground } from '@granite-js/react-native';
+ *
+ * const dummies = Array.from({ length: 20 }, (_, i) => i);
+ *
+ * export function InertialBackgroundExample() {
+ *   return (
+ *     <ScrollView>
+ *       <ScrollViewInertialBackground topColor="red" bottomColor="blue" />
+ *       {dummies.map((i) => (
+ *         <View
+ *           key={`dummy-${i}`}
+ *           style={{ width: '100%', height: 100, borderBottomColor: 'black', borderBottomWidth: 1 }}
+ *         >
+ *           <Text>Try scrolling.</Text>
+ *         </View>
+ *       ))}
+ *     </ScrollView>
+ *   );
+ * }
+ * ```
+ */
+export function ScrollViewInertialBackground({
+  topColor,
+  bottomColor,
+  spacer: _spacer,
+}: ScrollViewInertialBackgroundProps) {
+  const windowHeight = useWindowDimensions().height;
+
+  const spacer = _spacer ?? windowHeight;
+  const topBackgroundColor = topColor ?? DEFAULT_BACKGROUND_COLOR;
+  const bottomBackgroundColor = bottomColor ?? DEFAULT_BACKGROUND_COLOR;
+
+  return (
+    <>
+      <HiddenView
+        style={{
+          height: spacer,
+          top: -spacer,
+          backgroundColor: topBackgroundColor,
+        }}
+      />
+      <HiddenView
+        style={{
+          height: spacer,
+          /** Reduces by the CTA GradientHeight area. */
+          bottom: -spacer + GRADIENT_HEIGHT,
+          backgroundColor: bottomBackgroundColor,
+        }}
+      />
+    </>
+  );
+}
+
+function HiddenView({ style, pointerEvents = 'none', ...props }: ComponentProps<typeof View>) {
+  return (
+    <View
+      pointerEvents={pointerEvents}
+      style={[{ position: 'absolute', width: '100%', zIndex: -1, left: 0, right: 0 }, style]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * FIXME:
+ * Gradient value for BottomCTA. Set as a fixed value to avoid peerDeps.
+ */
+const GRADIENT_HEIGHT = 37;
+const DEFAULT_BACKGROUND_COLOR = '#ffffff';

package/src/scroll-view-inertial-background/index.ts

@@ -0,0 +1 @@
+export * from './ScrollViewInertialBackground';

package/src/status-bar/StatusBar.android.tsx

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from 'react';
+import { StatusBar as BaseStatusBar, useColorScheme } from 'react-native';
+import type { StatusBarProps } from './types';
+import { toStatusBarContentStyle } from './utils';
+
+export function StatusBar({ style, animated, hidden, backgroundColor, translucent = true }: StatusBarProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const translucentWithNoBackgroundColor = translucent && backgroundColor == null;
+
+  return (
+    <BaseStatusBar
+      translucent={translucent}
+      barStyle={toStatusBarContentStyle(style, colorScheme)}
+      backgroundColor={translucentWithNoBackgroundColor ? 'transparent' : backgroundColor}
+      animated={animated}
+      hidden={hidden}
+    />
+  );
+}
+
+export function useStatusBar({ style, animated, hidden, backgroundColor, translucent = true }: StatusBarProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const translucentWithNoBackgroundColor = translucent && backgroundColor == null;
+
+  useLayoutEffect(() => {
+    BaseStatusBar.setTranslucent(translucent);
+    BaseStatusBar.setBarStyle(toStatusBarContentStyle(style, colorScheme));
+    BaseStatusBar.setBackgroundColor(
+      translucentWithNoBackgroundColor ? 'transparent' : (backgroundColor ?? 'transparent')
+    );
+
+    if (hidden !== undefined) {
+      BaseStatusBar.setHidden(hidden);
+    }
+  }, [colorScheme, translucentWithNoBackgroundColor, style, animated, hidden, backgroundColor, translucent]);
+}

package/src/status-bar/StatusBar.d.ts

@@ -0,0 +1,4 @@
+import type { StatusBarProps } from './types';
+
+export declare function StatusBar(props: StatusBarProps): JSX.Element;
+export declare function useStatusBar(props: StatusBarProps): void;

package/src/status-bar/StatusBar.ios.tsx

@@ -0,0 +1,34 @@
+import { useLayoutEffect } from 'react';
+import { useColorScheme } from 'react-native';
+import type { StatusBarProps } from './types';
+import { toStatusBarContentStyle } from './utils';
+import { useNavigation } from '../router/createRoute';
+
+export function StatusBar(props: StatusBarProps) {
+  useStatusBar(props);
+
+  return null;
+}
+
+export function useStatusBar({ style, hidden }: StatusBarProps) {
+  const navigation = useNavigation();
+  const colorScheme = useColorScheme() ?? 'light';
+
+  useLayoutEffect(() => {
+    let statusBarStyle: 'light' | 'dark';
+
+    switch (toStatusBarContentStyle(style, colorScheme)) {
+      case 'light-content':
+        statusBarStyle = 'light';
+        break;
+      case 'dark-content':
+        statusBarStyle = 'dark';
+        break;
+    }
+
+    navigation.setOptions({
+      statusBarStyle,
+      statusBarHidden: hidden,
+    });
+  }, [navigation, colorScheme, style, hidden]);
+}

package/src/status-bar/index.ts

@@ -0,0 +1,2 @@
+export { StatusBar, useStatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarStyle } from './types';

package/src/status-bar/types.ts

@@ -0,0 +1,21 @@
+export type StatusBarStyle = 'light' | 'dark' | 'auto' | 'inverted';
+
+export type StatusBarProps = {
+  /**
+   * @default 'auto'
+   */
+  style?: StatusBarStyle;
+  hidden?: boolean;
+  /**
+   * @platform android
+   */
+  animated?: boolean;
+  /**
+   * @platform android
+   */
+  backgroundColor?: string;
+  /**
+   * @platform android
+   */
+  translucent?: boolean;
+};

package/src/status-bar/utils.ts

@@ -0,0 +1,20 @@
+import type { StatusBarStyle } from './types';
+import type { ColorPreference } from '../initial-props';
+
+export function toStatusBarContentStyle(
+  statusBarStyle: StatusBarStyle = 'auto',
+  colorPreference: ColorPreference = 'light'
+): 'light-content' | 'dark-content' {
+  const resolvedStyle = (() => {
+    switch (statusBarStyle) {
+      case 'auto':
+        return colorPreference === 'light' ? 'dark' : 'light';
+      case 'inverted':
+        return colorPreference === 'light' ? 'light' : 'dark';
+      default:
+        return statusBarStyle;
+    }
+  })();
+
+  return resolvedStyle === 'light' ? 'light-content' : 'dark-content';
+}

package/src/types/global.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-var */
+import type { ComponentType } from 'react';
+
+export interface GraniteGlobal {
+  app: {
+    name: string;
+    scheme: string;
+  };
+}
+
+declare global {
+  // @internal
+  var __granite: GraniteGlobal;
+
+  // @internal
+  var Page: ComponentType<any>;
+
+  var window: { __granite: GraniteGlobal };
+  var global: { __granite: GraniteGlobal };
+}

package/src/use-back-event/index.ts

@@ -0,0 +1 @@
+export * from './useBackEvent';