linked-data-browser 0.0.0

package/components/TargetResourceProvider.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  FunctionComponent,
+  PropsWithChildren,
+  createContext,
+  useContext,
+} from 'react';
+import { SolidLeaf, SolidContainer } from '@ldo/connected-solid';
+import { InvalidIdentifierResource } from '@ldo/connected';
+import { useDataBrowserConfig } from './DataBrowser';
+import { useResource } from '@ldo/solid-react';
+import { Platform } from 'react-native';
+
+interface UseTargetResourceContext {
+  targetUri?: string;
+  targetResource?: SolidLeaf | SolidContainer | InvalidIdentifierResource;
+  refresh: () => void;
+  navigateTo: (uri: string) => void;
+}
+
+// @ts-ignore The default value will be filled in upon mount
+const TargetResourceContext = createContext<UseTargetResourceContext>({});
+
+export function useTargetResource() {
+  return useContext(TargetResourceContext);
+}
+
+export const TargetResourceProvider: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
+  const { mode, origin } = useDataBrowserConfig();
+
+  /**
+   * URL Management
+   */
+  const [currentUrl, setCurrentUrl] = useState<URL>(() => {
+    return Platform.OS === 'web' ? new URL(window.location.href) : new URL('');
+  });
+
+  // Sync with addressbar
+  const handleUrlChange = useCallback(() => {
+    setCurrentUrl(new URL(window.location.href));
+  }, []);
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      // 1. Listen for 'popstate' events (triggered by browser back/forward buttons, or history.go())
+      window.addEventListener('popstate', handleUrlChange);
+
+      // 2. Patch history methods to also trigger our handler
+      // This ensures our hook reacts when the app itself changes the URL programmatically.
+      const originalPushState = history.pushState;
+      const originalReplaceState = history.replaceState;
+
+      history.pushState = function (...args) {
+        originalPushState.apply(history, args);
+        handleUrlChange(); // Trigger update after pushState
+      };
+
+      history.replaceState = function (...args) {
+        originalReplaceState.apply(history, args);
+        handleUrlChange(); // Trigger update after replaceState
+      };
+
+      // Cleanup: Remove event listener and restore original history methods on unmount
+      return () => {
+        window.removeEventListener('popstate', handleUrlChange);
+        history.pushState = originalPushState;
+        history.replaceState = originalReplaceState;
+      };
+    }
+  }, [handleUrlChange]);
+
+  const navigateTo = useCallback(
+    (newRoute: string) => {
+      const newUrl = new URL(newRoute);
+      let finalUrl: string;
+      if (mode === 'server-ui' && newUrl.origin === origin) {
+        finalUrl = newRoute;
+      } else {
+        finalUrl = `${origin}?uri=${encodeURIComponent(newRoute)}`;
+      }
+      setCurrentUrl(new URL(finalUrl));
+      if (Platform.OS === 'web') {
+        window.history.pushState(null, '', finalUrl);
+      }
+    },
+    [origin, mode],
+  );
+
+  /**
+   * Target Resource Management
+   */
+  const targetUri = useMemo<string | undefined>(() => {
+    const searchParams = currentUrl.searchParams.get('uri');
+    if (searchParams) return searchParams;
+    // If we're a standalone app and the uri isn't provided in the search params, it's undefined
+    if (mode === 'standalone-app') return undefined;
+    // Must be in web if this is server-hosted
+    const curOrigin = currentUrl.origin;
+    const curPathname = currentUrl.pathname;
+    const curHash = currentUrl.hash;
+    return `${curOrigin}${curPathname}${curHash}`;
+  }, [currentUrl, mode]);
+
+  const targetResource = useResource(targetUri);
+
+  const refresh = useCallback(async () => {
+    if (targetResource) {
+      await targetResource?.read();
+    }
+  }, [targetResource]);
+
+  const context = useMemo(
+    () => ({
+      targetUri,
+      targetResource,
+      refresh,
+      navigateTo,
+    }),
+    [targetUri, targetResource, refresh, navigateTo],
+  );
+
+  return (
+    <TargetResourceContext.Provider value={context}>
+      {children}
+    </TargetResourceContext.Provider>
+  );
+};

package/components/ThemeProvider.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect } from 'react';
+import '~/global.css';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  FunctionComponent,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { Appearance, ColorSchemeName, Platform } from 'react-native';
+import {
+  ThemeProvider as ApplicationThemeProvider,
+  DarkTheme,
+  DefaultTheme,
+  Theme,
+} from '@react-navigation/native';
+import { NAV_THEME } from '~/lib/constants';
+import { useColorScheme } from 'nativewind';
+import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
+
+const COLOR_SCHEME_KEY = 'colorScheme';
+
+const LIGHT_THEME: Theme = {
+  ...DefaultTheme,
+  colors: NAV_THEME.light,
+};
+
+const DARK_THEME: Theme = {
+  ...DarkTheme,
+  colors: NAV_THEME.dark,
+};
+
+interface UseThemeChangeContext {
+  setColorScheme: (scheme: NonNullable<ColorSchemeName>) => void;
+  loadingColorScheme: boolean;
+  colorScheme: NonNullable<ColorSchemeName>;
+}
+
+const ThemeProviderContext = createContext<UseThemeChangeContext>({
+  loadingColorScheme: true,
+  setColorScheme: () => {},
+  colorScheme: 'light',
+});
+
+export function useThemeChange() {
+  return useContext(ThemeProviderContext);
+}
+
+const usePlatformSpecificSetup = Platform.select({
+  web: useSetWebBackgroundClassName,
+  android: useSetAndroidNavigationBar,
+  default: noop,
+});
+
+export const ThemeProvider: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
+  const { colorScheme, setColorScheme } = useColorScheme();
+  const [loadingColorScheme, setLoadingColorScheme] = useState(true);
+
+  usePlatformSpecificSetup();
+
+  useEffect(() => {
+    const lookupCurColorScheme = async () => {
+      setColorScheme(Appearance.getColorScheme() ?? 'system');
+      const storedColorSchemeName: ColorSchemeName =
+        ((await AsyncStorage.getItem(COLOR_SCHEME_KEY)) as ColorSchemeName) ||
+        Appearance.getColorScheme();
+      if (storedColorSchemeName) {
+        setColorScheme(storedColorSchemeName);
+      }
+      setLoadingColorScheme(false);
+    };
+    lookupCurColorScheme();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const context = useMemo(
+    () => ({
+      setColorScheme: async (newColorScheme: NonNullable<ColorSchemeName>) => {
+        setColorScheme(newColorScheme);
+        await AsyncStorage.setItem(COLOR_SCHEME_KEY, newColorScheme);
+      },
+      loadingColorScheme,
+      colorScheme: colorScheme ?? 'light',
+    }),
+    [loadingColorScheme, colorScheme, setColorScheme],
+  );
+
+  return (
+    <>
+      <ApplicationThemeProvider
+        value={context.colorScheme === 'light' ? LIGHT_THEME : DARK_THEME}
+      >
+        <ThemeProviderContext.Provider value={context}>
+          {children}
+        </ThemeProviderContext.Provider>
+      </ApplicationThemeProvider>
+    </>
+  );
+};
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === 'web' && typeof window === 'undefined'
+    ? React.useEffect
+    : React.useLayoutEffect;
+
+function useSetWebBackgroundClassName() {
+  useIsomorphicLayoutEffect(() => {
+    // Adds the background color to the html element to prevent white background on overscroll.
+    document.documentElement.classList.add('bg-background');
+  }, []);
+}
+
+function useSetAndroidNavigationBar() {
+  React.useLayoutEffect(() => {
+    setAndroidNavigationBar(Appearance.getColorScheme() ?? 'light');
+  }, []);
+}
+
+function noop() {}

package/components/nav/DialogProvider.tsx

@@ -0,0 +1,140 @@
+// components/DialogProvider.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+} from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from '~/components/ui/dialog';
+import { TextInput, View } from 'react-native';
+import { Button } from '~/components/ui/button';
+import { Text } from '../ui/text';
+
+type DialogOptions =
+  | { type: 'confirm'; title: string; message?: string }
+  | { type: 'prompt'; title: string; message?: string; defaultValue?: string };
+
+type DialogContextType = {
+  prompt: (
+    title: string,
+    message?: string,
+    defaultValue?: string,
+  ) => Promise<null | string>;
+  confirm: (title: string, message?: string) => Promise<boolean>;
+  showDialog: (options: DialogOptions) => Promise<boolean | string>;
+};
+
+const DialogContext = createContext<DialogContextType | null>(null);
+
+export const useDialog = () => {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error('useDialog must be used within DialogProvider');
+  return ctx;
+};
+
+export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [options, setOptions] = useState<DialogOptions | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const resolver = useRef<(val: boolean | string) => void>(() => {});
+
+  const showDialog = useCallback(
+    (opts: DialogOptions): Promise<boolean | string> => {
+      return new Promise((resolve) => {
+        resolver.current = resolve;
+        setOptions(opts);
+        setInputValue(opts.type === 'prompt' ? (opts.defaultValue ?? '') : '');
+        setVisible(true);
+      });
+    },
+    [],
+  );
+
+  const prompt = useCallback(
+    async (
+      title: string,
+      message?: string,
+      defaultValue?: string,
+    ): Promise<null | string> => {
+      return showDialog({
+        type: 'prompt',
+        title,
+        message,
+        defaultValue,
+      }) as Promise<string | null>;
+    },
+    [showDialog],
+  );
+
+  const confirm = useCallback(
+    async (title: string, message?: string): Promise<boolean> => {
+      return showDialog({
+        type: 'confirm',
+        title,
+        message,
+      }) as Promise<boolean>;
+    },
+    [showDialog],
+  );
+
+  const handleCancel = () => {
+    setVisible(false);
+    resolver.current?.(options?.type === 'confirm' ? false : '');
+  };
+
+  const handleConfirm = () => {
+    setVisible(false);
+    resolver.current?.(options?.type === 'confirm' ? true : inputValue);
+  };
+
+  return (
+    <DialogContext.Provider value={{ showDialog, prompt, confirm }}>
+      {children}
+      <Dialog open={visible} onOpenChange={setVisible}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{options?.title}</DialogTitle>
+            {options?.message && (
+              <DialogDescription>{options.message}</DialogDescription>
+            )}
+          </DialogHeader>
+
+          {options?.type === 'prompt' && (
+            <View className="my-2">
+              <TextInput
+                value={inputValue}
+                onChangeText={setInputValue}
+                placeholder="Enter text..."
+                className="border p-2 rounded"
+                autoFocus
+                onSubmitEditing={handleConfirm}
+              />
+            </View>
+          )}
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="ghost" onPress={handleCancel}>
+                <Text>Cancel</Text>
+              </Button>
+            </DialogClose>
+            <Button onPress={handleConfirm}>
+              <Text>Ok</Text>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DialogContext.Provider>
+  );
+};

package/components/nav/Layout.tsx

@@ -0,0 +1,118 @@
+import React, {
+  createContext,
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+} from 'react';
+import { useTargetResource } from '../TargetResourceProvider';
+import { ResourceViewConfig } from '../ResourceView';
+import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
+import { TextCursorInput } from '~/lib/icons/TextCursorInput';
+import { CircleSlash } from '~/lib/icons/CircleSlash';
+import { OctagonX } from '~/lib/icons/OctagonX';
+import { ShieldX } from '~/lib/icons/ShieldX';
+import { CircleX } from '~/lib/icons/CircleX';
+import { Header } from './header/Header';
+import { View } from 'react-native';
+import { useValidView, ValidViewProvider } from './useValidView';
+import { DialogProvider } from './DialogProvider';
+
+export const ValidViewContext = createContext<{
+  validViews: ResourceViewConfig[];
+  curViewConfig: ResourceViewConfig;
+  setCurViewConfig: Dispatch<SetStateAction<ResourceViewConfig>>;
+  // @ts-ignore This will be filled in later
+}>({});
+
+export const Layout: FunctionComponent = () => {
+  return (
+    <DialogProvider>
+      <ValidViewProvider>
+        <Header />
+        <View className="flex-1 z-0">
+          <RenderView />
+        </View>
+      </ValidViewProvider>
+    </DialogProvider>
+  );
+};
+
+/**
+ * =============================================================================
+ * Render View
+ * =============================================================================
+ */
+
+export const RenderView: FunctionComponent = () => {
+  const { targetUri, targetResource } = useTargetResource();
+
+  const { curViewConfig } = useValidView();
+
+  // Handle Edge cases
+  if (!targetResource || !targetUri) {
+    return (
+      <ErrorMessageResourceView
+        icon={TextCursorInput}
+        message="Enter a URI in the address bar to view a resource."
+      />
+    );
+  } else if (targetResource.type === 'InvalidIdentifierResouce') {
+    return (
+      <ErrorMessageResourceView
+        icon={CircleSlash}
+        message={`${targetResource.uri} is an invalid URI.`}
+      />
+    );
+  } else if (targetResource?.isDoingInitialFetch()) {
+    return <></>;
+  } else if (targetResource?.isAbsent()) {
+    return (
+      <ErrorMessageResourceView
+        icon={CircleSlash}
+        message={`${targetResource.uri} either doesn't exist or you don't have read access to it.`}
+      />
+    );
+  } else if (targetResource?.status.isError) {
+    switch (targetResource.status.type) {
+      case 'noncompliantPodError':
+        return (
+          <ErrorMessageResourceView
+            icon={OctagonX}
+            message={`${targetResource.uri} returned a response that is not compliant with the Linked Web Storage specification: ${targetResource.status.message}`}
+          />
+        );
+      case 'serverError':
+        return (
+          <ErrorMessageResourceView
+            icon={OctagonX}
+            message={`${targetResource.uri} encountered an internal server error: ${targetResource.status.message}`}
+          />
+        );
+      case 'unauthenticatedError':
+        return (
+          <ErrorMessageResourceView
+            icon={ShieldX}
+            message={`${targetResource.uri} requires you to log in to view.`}
+          />
+        );
+      case 'unauthorizedError':
+        return (
+          <ErrorMessageResourceView
+            icon={ShieldX}
+            message={`You don't have access to ${targetResource.uri}.`}
+          />
+        );
+      case 'unexpectedHttpError':
+      case 'unexpectedResourceError':
+      default:
+        return (
+          <ErrorMessageResourceView
+            icon={CircleX}
+            message={`An unexpected error occurred: ${targetResource.status.message}.`}
+          />
+        );
+    }
+  }
+  const CurView = curViewConfig.view;
+  return <CurView />;
+};

package/components/nav/header/AddressBox.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useMemo } from 'react';
+import { FunctionComponent, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Input } from '~/components/ui/input';
+import { ChevronRight } from '~/lib/icons/ChevronRight';
+import { ChevronsRight } from '~/lib/icons/ChevronsRight';
+import { TextCursorInput } from '~/lib/icons/TextCursorInput';
+import { RefreshCw } from '~/lib/icons/RefreshCw';
+import { ArrowRight } from '~/lib/icons/ArrowRight';
+import { Button } from '~/components/ui/button';
+import { Text } from '../../ui/text';
+import { useTargetResource } from '../../TargetResourceProvider';
+
+export const AddressBox: FunctionComponent = () => {
+  const [isTextMode, setIsTextMode] = useState(false);
+  const { targetUri, refresh, navigateTo, targetResource } =
+    useTargetResource();
+
+  const [textBoxValue, setTextBoxValue] = useState(targetUri ?? '');
+  useEffect(() => {
+    setTextBoxValue(targetUri ?? '');
+  }, [targetUri]);
+
+  const breadcrumbInfo = useMemo<{ name: string; uri: string }[]>(() => {
+    if (!targetUri) return [];
+    try {
+      const uri = new URL(targetUri);
+      const pathSplit = uri.pathname.split('/').filter((val) => val !== '');
+      const endsInSlash = uri.pathname.endsWith('/');
+
+      let curUri = `${uri.origin}/`;
+      const info: { name: string; uri: string }[] = [
+        {
+          name: uri.host,
+          uri: curUri,
+        },
+      ];
+      pathSplit.forEach((name, index) => {
+        curUri +=
+          index === pathSplit.length - 1 && !endsInSlash ? name : `${name}/`;
+        info.push({
+          uri: curUri,
+          name,
+        });
+      });
+
+      return info;
+    } catch {
+      return [];
+    }
+  }, [targetUri]);
+
+  return (
+    <View className="flex-1">
+      <Input
+        className="flex-1 bg-secondary web:py-2.5 border-none pl-10 pr-10 h-[40px] text-sm web:focus-visible:ring-0 web:focus-visible:ring-transparent web:focus-visible:ring-offset-0 web:focus:outline-none web:outline-none"
+        onFocus={() => setIsTextMode(true)}
+        onBlur={() => setTimeout(() => setIsTextMode(false), 100)}
+        onChangeText={setTextBoxValue}
+        value={isTextMode ? textBoxValue : ''}
+        onSubmitEditing={() => {
+          if (textBoxValue) {
+            navigateTo(textBoxValue);
+          }
+        }}
+      />
+      <Button
+        variant="secondary"
+        className="absolute left-0 w-10 h-10"
+        onPress={() => setIsTextMode((val) => !val)}
+      >
+        <Text>
+          {isTextMode ? (
+            <ChevronsRight size={20} />
+          ) : (
+            <TextCursorInput size={20} />
+          )}
+        </Text>
+      </Button>
+      {(() => {
+        const shouldRefresh = targetUri === textBoxValue || !isTextMode;
+        return (
+          <Button
+            variant="secondary"
+            className="absolute right-0 w-10 h-10"
+            onPressIn={() => {
+              if (shouldRefresh) {
+                refresh();
+              } else if (textBoxValue) {
+                navigateTo(textBoxValue);
+              }
+            }}
+          >
+            <Text className={targetResource?.isLoading() ? 'animate-spin' : ''}>
+              {shouldRefresh || targetResource?.isLoading() ? (
+                <RefreshCw size={20} />
+              ) : (
+                <ArrowRight size={20} />
+              )}
+            </Text>
+          </Button>
+        );
+      })()}
+      <View
+        className="absolute top-0 left-0 right-0 bottom-0 flex-row-reverse items-center ml-10 mr-10 overflow-x-auto scrollbar-hide [direction:rtl]"
+        pointerEvents="none"
+      >
+        {!isTextMode &&
+          breadcrumbInfo.map((item, index) => (
+            <View className="flex-row" key={item.uri}>
+              {index !== breadcrumbInfo.length - 1 ? (
+                <ChevronRight className="w-4 h-4 mr-0.5 mt-0.5 text-gray-500" />
+              ) : (
+                <View className="w-2" />
+              )}
+              <TouchableOpacity onPress={() => navigateTo(item.uri)}>
+                <View pointerEvents="auto">
+                  <Text className="mr-0.5 underline text-sm">{item.name}</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+          ))}
+      </View>
+    </View>
+  );
+};

package/components/nav/header/AvatarMenu.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { FunctionComponent } from 'react';
+import { StyleSheet } from 'react-native';
+
+export const AvatarMenu: FunctionComponent = () => {
+  return <></>;
+  // const [menuVisible, setMenuVisible] = useState(false);
+  // const { session, logout } = useSolidAuth();
+  // // TODO: Use WebId Resource to render a skeleton loader
+  // const webIdResource = useResource(session.webId);
+  // const profile = useSubject(SolidProfileShapeShapeType, session.webId);
+  // const renderAvatar = () => (
+  //   <TouchableWithoutFeedback onPress={() => setMenuVisible(true)}>
+  //     <Avatar
+  //       source={{ uri: 'https://api.lorem.space/image/face?w=150&h=150' }}
+  //     />
+  //   </TouchableWithoutFeedback>
+  // );
+  // return (
+  //   <Popover
+  //     anchor={renderAvatar}
+  //     visible={menuVisible}
+  //     placement="bottom end"
+  //     onBackdropPress={() => setMenuVisible(false)}
+  //     style={styles.popover}
+  //   >
+  //     <Layout>
+  //       <View style={styles.profileHeader}>
+  //         <Avatar
+  //           size="giant"
+  //           source={{ uri: 'https://api.lorem.space/image/face?w=150&h=150' }}
+  //         />
+  //         <View style={styles.profileText}>
+  //           <Text category="h6">{profile?.fn || ''}</Text>
+  //           <Button size="tiny">Edit your profile</Button>
+  //         </View>
+  //       </View>
+  //       <Divider />
+  //       <ThemeToggleMenu />
+  //       <Divider />
+  //       <MenuItem
+  //         onPress={logout}
+  //         title="Log Out"
+  //         accessoryLeft={(props) => <Icon {...props} name="log-out" />}
+  //       />
+  //     </Layout>
+  //   </Popover>
+  // );
+};
+
+const styles = StyleSheet.create({
+  popover: { width: 300, overflow: 'hidden', borderRadius: 12 },
+  profileHeader: { padding: 8, flexDirection: 'row', alignItems: 'center' },
+  profileText: {
+    marginLeft: 8,
+    justifyContent: 'space-around',
+    alignSelf: 'stretch',
+    alignItems: 'flex-start',
+    flex: 1,
+  },
+});