@lowdefy/shell 0.0.0-experimental-20261019052246

package/src/components/LoadingScreen.js

@@ -0,0 +1,35 @@
+/*
+  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 { ActivityIndicator, View } from 'react-native';
+
+import styles from './styles.js';
+import useSurfaceTokens from './useSurfaceTokens.js';
+
+function LoadingScreen() {
+  const tokens = useSurfaceTokens();
+  return (
+    <View
+      style={[styles.centered, { backgroundColor: tokens.colorGroupedBackground }]}
+      testID="shell-loading"
+    >
+      <ActivityIndicator color={tokens.colorSecondaryLabel} />
+    </View>
+  );
+}
+
+export default LoadingScreen;

package/src/components/MenuButton.js

@@ -0,0 +1,108 @@
+/*
+  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, { useState } from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { router } from 'expo-router';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Icon } from '@lowdefy/client-native';
+
+import { useSessionState } from '../ShellContext.js';
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  backdrop: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  sheet: {
+    width: '80%',
+    maxWidth: 360,
+    backgroundColor: '#ffffff',
+  },
+  item: {
+    alignItems: 'center',
+    columnGap: 16,
+    flexDirection: 'row',
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+  },
+  itemText: {
+    fontSize: 17,
+  },
+});
+
+// The drawer frame: a header button that opens the app's drawer menu over the screen, each item
+// with its icon drawn from the icon data the root carries. Picking an item replaces the stack with
+// that page.
+function MenuButton({ items }) {
+  const [open, setOpen] = useState(false);
+  const { root } = useSessionState();
+  const insets = useSafeAreaInsets();
+  function openPage(pageId) {
+    setOpen(false);
+    const path = root.pageIndex.find((entry) => entry.pageId === pageId)?.path;
+    if (router.canDismiss()) router.dismissAll();
+    router.replace(`/${path}`);
+  }
+  return (
+    <>
+      <Pressable
+        accessibilityLabel="Menu"
+        accessibilityRole="button"
+        onPress={() => setOpen(true)}
+        style={styles.button}
+        testID="shell-menu"
+      >
+        <Text style={styles.buttonText}>Menu</Text>
+      </Pressable>
+      <Modal animationType="fade" onRequestClose={() => setOpen(false)} transparent visible={open}>
+        <View style={styles.backdrop}>
+          <ScrollView style={[styles.sheet, { paddingTop: insets.top }]}>
+            {items.map((item) => (
+              <Pressable
+                accessibilityRole="button"
+                key={item.pageId}
+                onPress={() => openPage(item.pageId)}
+                style={styles.item}
+                testID={`menu-${item.pageId}`}
+              >
+                {item.iconData ? (
+                  <Icon data={item.iconData} size={22} testID={`menu-${item.pageId}-icon`} />
+                ) : null}
+                <Text style={styles.itemText}>{item.title ?? item.pageId}</Text>
+              </Pressable>
+            ))}
+          </ScrollView>
+          <Pressable
+            accessibilityLabel="Close menu"
+            onPress={() => setOpen(false)}
+            style={{ flex: 1 }}
+          />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+export default MenuButton;

package/src/components/MenuButton.test.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 { jest } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import MenuButton from './MenuButton.js';
+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();
+});

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,56 @@
+/*
+  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 { 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.
+function OtherPageScreen({ path }) {
+  const { session } = useShell();
+  const [notFound, setNotFound] = useState(false);
+  useEffect(() => {
+    let active = true;
+    session
+      .fetchOtherPage(path)
+      .then((result) => {
+        if (!active) return;
+        if (result.surface === 'web') {
+          Linking.openURL(`${session.apiBase}/${path}`);
+          if (router.canGoBack()) router.back();
+          return;
+        }
+        setNotFound(true);
+      })
+      .catch(() => {
+        if (active) setNotFound(true);
+      });
+    return () => {
+      active = false;
+    };
+  }, [path, session]);
+  if (!notFound) {
+    return <LoadingScreen />;
+  }
+  return <MessageScreen testID="shell-not-found" title="Page not found" />;
+}
+
+export default OtherPageScreen;