@lowdefy/shell 3.23.3 → 7.2.0

package/src/components/MenuButton.test.js

@@ -0,0 +1,74 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { jest } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import MenuButton from './MenuButton.js';
+import { iosColors, ThemeContext } from '@lowdefy/client-native';
+import ShellContext from '../ShellContext.js';
+
+jest.mock('expo-router', () => ({
+  router: { canDismiss: () => false, replace: jest.fn() },
+}));
+
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
+}));
+
+const house = { node: [['path', { d: 'M3 10a2 2 0 0 1 .709-1.528l7-6' }]] };
+
+test('the drawer menu draws each item icon from the icon data the root carries', async () => {
+  const state = { root: { pageIndex: [{ pageId: 'today', path: 'today' }] } };
+  const session = { getState: () => state, subscribe: () => () => undefined };
+  await render(
+    <ShellContext.Provider value={{ session }}>
+      <MenuButton
+        items={[
+          { pageId: 'today', title: 'Today', icon: 'House', iconData: house },
+          { pageId: 'jobs', title: 'Jobs' },
+        ]}
+      />
+    </ShellContext.Provider>
+  );
+  fireEvent.press(screen.getByTestId('shell-menu'));
+  expect(await screen.findByTestId('menu-today-icon')).toBeTruthy();
+  expect(screen.queryByTestId('menu-jobs-icon')).toBeNull();
+  expect(screen.getByText('Jobs')).toBeTruthy();
+});
+
+test('the drawer menu takes the theme tokens in dark mode', async () => {
+  const state = { root: { pageIndex: [] } };
+  const session = { getState: () => state, subscribe: () => () => undefined };
+  const tokens = { ...iosColors.dark, colorTint: '#0A84FF' };
+  await render(
+    <ThemeContext.Provider value={{ isDark: true, tokens }}>
+      <ShellContext.Provider value={{ session }}>
+        <MenuButton items={[{ pageId: 'jobs', title: 'Jobs', iconData: house }]} />
+      </ShellContext.Provider>
+    </ThemeContext.Provider>
+  );
+  expect(screen.getByText('Menu')).toHaveStyle({ color: '#0A84FF' });
+  fireEvent.press(screen.getByTestId('shell-menu'));
+  expect(await screen.findByText('Jobs')).toHaveStyle({ color: tokens.colorLabel });
+  expect(screen.getByTestId('menu-jobs-icon', { includeHiddenElements: true }).props.color).toBe(
+    tokens.colorLabel
+  );
+  expect(screen.getByText('Jobs').parent.parent.parent).toHaveStyle({
+    backgroundColor: tokens.colorGroupedBackground,
+  });
+});

package/src/components/MessageScreen.js

@@ -0,0 +1,51 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+import styles from './styles.js';
+import useSurfaceTokens from './useSurfaceTokens.js';
+
+// A full-screen message with an optional action button: update, error and not found screens.
+function MessageScreen({ action, body, testID, title }) {
+  const tokens = useSurfaceTokens();
+  return (
+    <View
+      style={[styles.centered, { backgroundColor: tokens.colorGroupedBackground }]}
+      testID={testID}
+    >
+      <Text style={[styles.title, { color: tokens.colorLabel }]}>{title}</Text>
+      {body ? (
+        <Text style={[styles.body, { color: tokens.colorSecondaryLabel }]}>{body}</Text>
+      ) : null}
+      {action ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={action.onPress}
+          style={({ pressed }) => [
+            styles.button,
+            { backgroundColor: tokens.colorTint, opacity: pressed ? 0.7 : 1 },
+          ]}
+        >
+          <Text style={styles.buttonText}>{action.title}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export default MessageScreen;

package/src/components/NavigationTheme.js

@@ -0,0 +1,33 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useMemo } from 'react';
+import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
+import { useTheme } from '@lowdefy/client-native';
+
+import getNavigationTheme from './getNavigationTheme.js';
+
+// Gives the shell's navigators (stacks and tabs) the app's theme for the mode showing.
+function NavigationTheme({ children }) {
+  const { isDark, tokens } = useTheme();
+  const value = useMemo(
+    () => getNavigationTheme({ base: isDark ? DarkTheme : DefaultTheme, isDark, tokens }),
+    [isDark, tokens]
+  );
+  return <ThemeProvider value={value}>{children}</ThemeProvider>;
+}
+
+export default NavigationTheme;

package/src/components/NoConnectionBanner.js

@@ -0,0 +1,51 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useSyncExternalStore } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import networkStatus from '../host/networkStatus.js';
+
+const styles = StyleSheet.create({
+  banner: {
+    backgroundColor: '#434343',
+    paddingBottom: 6,
+    alignItems: 'center',
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 13,
+  },
+});
+
+// Shown in the frame while the shell is offline (networkStatus: the phone's network, or Lowdefy
+// Dev's network injection). Cached pages still open; requests fail with the core's network
+// error, as in a browser that lost its connection.
+function NoConnectionBanner() {
+  const online = useSyncExternalStore(networkStatus.subscribe, networkStatus.isOnline);
+  const insets = useSafeAreaInsets();
+  if (online) {
+    return null;
+  }
+  return (
+    <View style={[styles.banner, { paddingTop: insets.top + 6 }]} testID="NoConnection">
+      <Text style={styles.text}>No connection</Text>
+    </View>
+  );
+}
+
+export default NoConnectionBanner;

package/src/components/NoConnectionBanner.test.js

@@ -0,0 +1,73 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { act, render, screen } from '@testing-library/react-native';
+
+import createDeviceInjections from '../dev/inject/createDeviceInjections.js';
+import NoConnectionBanner from './NoConnectionBanner.js';
+import { OFFLINE, ONLINE } from '../test/createFakeNetwork.js';
+
+// The phone's network, set by the tests through expo-network's listener.
+const mockNetwork = {
+  listeners: new Set(),
+  state: { isConnected: true, isInternetReachable: true },
+};
+jest.mock('expo-network', () => ({
+  addNetworkStateListener(listener) {
+    mockNetwork.listeners.add(listener);
+    return { remove: () => mockNetwork.listeners.delete(listener) };
+  },
+  getNetworkStateAsync: async () => mockNetwork.state,
+}));
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
+}));
+
+// The shell's own online state, which the banner reads.
+const networkStatus = jest.requireActual('../host/networkStatus.js').default;
+
+function changeNetwork(state) {
+  mockNetwork.state = state;
+  mockNetwork.listeners.forEach((listener) => listener(state));
+}
+
+afterEach(() => {
+  networkStatus.setInjectedOffline(false);
+  changeNetwork(ONLINE);
+});
+
+test('the banner shows while the phone is offline', async () => {
+  await render(<NoConnectionBanner />);
+  await act(async () => {});
+  expect(screen.queryByTestId('NoConnection')).toBeNull();
+  await act(async () => changeNetwork(OFFLINE));
+  expect(screen.getByText('No connection')).toBeTruthy();
+  await act(async () => changeNetwork(ONLINE));
+  expect(screen.queryByTestId('NoConnection')).toBeNull();
+});
+
+// A simulator shares the computer's network: Lowdefy Dev's network injection is how an agent
+// sees the banner there.
+test("the banner shows while Lowdefy Dev's injection holds the network offline", async () => {
+  const injections = createDeviceInjections({ networkStatus });
+  await render(<NoConnectionBanner />);
+  await act(async () => {});
+  await act(async () => injections.inject({ kind: 'network', value: 'offline' }));
+  expect(screen.getByTestId('NoConnection')).toBeTruthy();
+  await act(async () => injections.inject({ kind: 'network', value: 'online' }));
+  expect(screen.queryByTestId('NoConnection')).toBeNull();
+});

package/src/components/OtherPageScreen.js

@@ -0,0 +1,95 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useEffect, useState } from 'react';
+import { Linking } from 'react-native';
+import { router } from 'expo-router';
+
+import LoadingScreen from './LoadingScreen.js';
+import MessageScreen from './MessageScreen.js';
+import reportShellError from '../host/reportShellError.js';
+import { useShell } from '../ShellContext.js';
+
+// A path no mobile page has. When the server has a web page there (it answers the shell with
+// { surface: 'web' }), the page opens in the system browser; otherwise it is not found. A request
+// or browser that failed is not "not found": it says so, and the fault is reported.
+function OtherPageScreen({ path, query = '' }) {
+  const { session } = useShell();
+  const [view, setView] = useState('loading');
+  const [loadError, setLoadError] = useState(null);
+  useEffect(() => {
+    let active = true;
+    function fail(error) {
+      if (!active) return;
+      reportShellError({ error, session });
+      setLoadError(error);
+      setView('failed');
+    }
+    session
+      .fetchOtherPage(path)
+      .then((result) => {
+        if (!active) return;
+        if (result.surface === 'web') {
+          // The query rides along: the web page reads its own _url_query.
+          const url = `${session.apiBase}/${path}${query ? `?${query}` : ''}`;
+          Linking.openURL(url)
+            .then(() => {
+              if (!active) return;
+              if (router.canGoBack()) {
+                router.back();
+                return;
+              }
+              // A cold start from a deep link has nothing to go back to. Going home on its own
+              // would open the browser again when the home page is itself web-only.
+              setView('opened');
+            })
+            .catch(fail);
+          return;
+        }
+        setView('notFound');
+      })
+      .catch(fail);
+    return () => {
+      active = false;
+    };
+  }, [path, query, session]);
+  if (view === 'opened') {
+    return (
+      <MessageScreen
+        action={{ title: 'Go home', onPress: () => router.replace('/') }}
+        body="This page is on the web, not in the app."
+        testID="shell-opened-in-browser"
+        title="Opened in your browser"
+      />
+    );
+  }
+  if (view === 'failed') {
+    return (
+      <MessageScreen
+        action={{ title: 'Go home', onPress: () => router.replace('/') }}
+        body={loadError?.message}
+        testID="shell-other-page-error"
+        title="This page could not be opened"
+      />
+    );
+  }
+  if (view === 'notFound') {
+    return <MessageScreen testID="shell-not-found" title="Page not found" />;
+  }
+  return <LoadingScreen />;
+}
+
+export default OtherPageScreen;

package/src/components/OtherPageScreen.test.js

@@ -0,0 +1,74 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { jest } from '@jest/globals';
+import { Linking } from 'react-native';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import { router } from 'expo-router';
+
+import OtherPageScreen from './OtherPageScreen.js';
+import ShellContext from '../ShellContext.js';
+
+jest.mock('expo-router', () => ({
+  router: { back: jest.fn(), canGoBack: jest.fn(), replace: jest.fn() },
+}));
+
+function renderScreen(result = { surface: 'web' }) {
+  const session = {
+    apiBase: 'https://app.test',
+    fetchOtherPage: jest.fn().mockResolvedValue(result),
+    getState: () => ({ lowdefy: { buildId: 'b1' } }),
+  };
+  return render(
+    <ShellContext.Provider value={{ session }}>
+      <OtherPageScreen path="reports" query="id=7" />
+    </ShellContext.Provider>
+  );
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.spyOn(Linking, 'openURL').mockResolvedValue(true);
+});
+
+test('a cold start opens the web page with its query and offers home, going nowhere on its own', async () => {
+  router.canGoBack.mockReturnValue(false);
+  await renderScreen();
+  expect(await screen.findByTestId('shell-opened-in-browser')).toBeTruthy();
+  expect(Linking.openURL).toHaveBeenCalledWith('https://app.test/reports?id=7');
+  expect(router.back).not.toHaveBeenCalled();
+  // Home could be this web-only page, which would open the browser again.
+  expect(router.replace).not.toHaveBeenCalled();
+  fireEvent.press(screen.getByText('Go home'));
+  expect(router.replace).toHaveBeenCalledWith('/');
+});
+
+test('with history it goes back after opening the browser', async () => {
+  router.canGoBack.mockReturnValue(true);
+  await renderScreen();
+  await waitFor(() => expect(router.back).toHaveBeenCalled());
+  expect(router.replace).not.toHaveBeenCalled();
+});
+
+test('a failed openURL says the page could not be opened, not that it was not found', async () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+  Linking.openURL.mockRejectedValue(new Error('no browser'));
+  await renderScreen();
+  expect(await screen.findByTestId('shell-other-page-error')).toBeTruthy();
+  expect(screen.getByText('no browser')).toBeTruthy();
+  consoleError.mockRestore();
+});