linked-data-browser 0.0.7 → 0.0.8-alpha.0

package/.env

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_IS_SERVER_HOSTED=false
+EXPO_PUBLIC_DEFAULT_ISSUER=http://localhost:3000

package/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
   rules: {
     'prettier/prettier': ['error'],
     'react/no-unstable-nested-components': 0,
+    'react-native/no-inline-styles': 0,
     '@typescript-eslint/no-unused-vars': 1,
     'no-restricted-imports': [
       'error',

package/app/index.tsx

@@ -12,6 +12,8 @@ export function Screen() {
     ? 'server-ui'
     : 'standalone-app';
 
+  const defaultIssuer = process.env.EXPO_PUBLIC_DEFAULT_ISSUER;
+
   return (
     <SafeAreaProvider>
       <StatusBar />
@@ -20,6 +22,7 @@ export function Screen() {
         mode={mode}
         renderHomepage={() => <Text>Hopepage</Text>}
         renderLogo={() => <Text>Logo</Text>}
+        defaultIssuer={defaultIssuer}
       />
     </SafeAreaProvider>
   );

package/babel.config.js

@@ -2,14 +2,13 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: [
-      ['babel-preset-expo', {
-        jsxImportSource: 'nativewind',
-        unstable_transformProfile: 'hermes-canary'
-      }],
-      'nativewind/babel'
+      [
+        'babel-preset-expo',
+        {
+          unstable_transformProfile: 'hermes-canary',
+        },
+      ],
     ],
-    plugins: [
-      '@babel/plugin-syntax-import-meta'
-    ]
+    plugins: ['@babel/plugin-syntax-import-meta'],
   };
 };

package/components/DataBrowser.tsx

@@ -1,31 +1,21 @@
-import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { BrowserSolidLdoProvider } from '@ldo/solid-react';
 import React, { FunctionComponent } from 'react';
 import { Layout } from './nav/Layout';
 import { PortalHost } from '@rn-primitives/portal';
 import { TargetResourceProvider } from './TargetResourceProvider';
-import { ResourceViewConfig } from './ResourceView';
 import { NotifierWrapper } from 'react-native-notifier';
 import { Platform } from 'react-native';
 import { ThemeProvider } from './ThemeProvider';
+import {
+  DataBrowserConfig,
+  DataBrowserConfigContext,
+  DataBrowserConfigProps,
+} from './DataBrowserContext';
 
-export interface DataBrowserConfig {
-  views: ResourceViewConfig[];
-  mode: 'standalone-app' | 'server-ui';
-  defaultIssuer?: string;
-  origin?: string;
-  renderHomepage?: () => ReactNode;
-  renderLogo?: () => ReactNode;
-}
-
-// @ts-ignore This will be filled in once the component mounts
-export const DataBrowserConfigContext = createContext<DataBrowserConfig>({});
-
-export function useDataBrowserConfig() {
-  return useContext(DataBrowserConfigContext);
-}
-
-export const DataBrowser: FunctionComponent<DataBrowserConfig> = (props) => {
+export const DataBrowser: FunctionComponent<DataBrowserConfigProps> = (
+  props,
+) => {
   const providerProps = useMemo<DataBrowserConfig>(() => {
     return {
       origin:

package/components/DataBrowserContext.ts

@@ -0,0 +1,24 @@
+import { createContext, ReactNode, useContext } from 'react';
+import { ResourceViewConfig } from './ResourceView';
+
+export interface DataBrowserConfigProps {
+  views: ResourceViewConfig[];
+  mode: 'standalone-app' | 'server-ui';
+  defaultIssuer?: string;
+  origin?: string;
+  renderHomepage?: () => ReactNode;
+  renderLogo?: () => ReactNode;
+}
+
+export interface DataBrowserConfig extends DataBrowserConfigProps {
+  defaultIssuer: string;
+}
+
+export const DataBrowserConfigContext = createContext<DataBrowserConfig>(
+  // @ts-ignore This will be filled in once the component mounts
+  {},
+);
+
+export function useDataBrowserConfig() {
+  return useContext(DataBrowserConfigContext);
+}

package/components/TargetResourceProvider.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 import { SolidLeaf, SolidContainer } from '@ldo/connected-solid';
 import { InvalidIdentifierResource } from '@ldo/connected';
-import { useDataBrowserConfig } from './DataBrowser';
+import { useDataBrowserConfig } from './DataBrowserContext';
 import { useResource } from '@ldo/solid-react';
 import { Platform } from 'react-native';
 

package/components/ThemeProvider.tsx

@@ -17,7 +17,6 @@ import {
   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';
@@ -57,14 +56,14 @@ const usePlatformSpecificSetup = Platform.select({
 export const ThemeProvider: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
-  const { colorScheme, setColorScheme } = useColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorSchemeName>();
   const [loadingColorScheme, setLoadingColorScheme] = useState(true);
 
   usePlatformSpecificSetup();
 
   useEffect(() => {
     const lookupCurColorScheme = async () => {
-      setColorScheme(Appearance.getColorScheme() ?? 'system');
+      setColorScheme(Appearance.getColorScheme() ?? 'light');
       const storedColorSchemeName: ColorSchemeName =
         ((await AsyncStorage.getItem(COLOR_SCHEME_KEY)) as ColorSchemeName) ||
         Appearance.getColorScheme();
@@ -74,7 +73,6 @@ export const ThemeProvider: FunctionComponent<PropsWithChildren> = ({
       setLoadingColorScheme(false);
     };
     lookupCurColorScheme();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const context = useMemo(

package/components/common/LoadingBar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTheme } from '@react-navigation/native';
 import { FunctionComponent } from 'react';
 import { Bar } from 'react-native-progress';
+import { StyleSheet } from 'react-native';
 
 interface LoadingBarProps {
   isLoading: boolean;
@@ -21,7 +22,16 @@ export const LoadingBar: FunctionComponent<LoadingBarProps> = ({
       borderWidth={0}
       borderRadius={0}
       width={null}
-      className="absolute top-0 left-0 right-0"
+      style={styles.bar}
     />
   );
 };
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/components/common/ProfileAvatar.tsx

@@ -2,22 +2,19 @@ import React from 'react';
 import { SolidProfile } from '../../.ldo/profile.typings';
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import { Text } from '../ui/text';
-import { User } from '../../lib/icons/User';
+import { User } from 'lucide-react-native';
 import { FunctionComponent } from 'react';
 
 interface ProfileAvatarProps {
   profile?: SolidProfile;
-  className?: string;
+  style?: any;
 }
 
 export const ProfileAvatar: FunctionComponent<ProfileAvatarProps> = ({
   profile,
-  className,
+  style,
 }) => (
-  <Avatar
-    alt={profile?.fn ? `${profile.fn}'s Avatar` : ''}
-    className={className}
-  >
+  <Avatar alt={profile?.fn ? `${profile.fn}'s Avatar` : ''} style={style}>
     <AvatarImage source={{ uri: profile?.hasPhoto?.['@id'] }} />
     <AvatarFallback>
       <Text>

package/components/nav/Layout.tsx

@@ -7,11 +7,12 @@ import React, {
 import { ResourceViewConfig } from '../ResourceView';
 
 import { Header } from './header/Header';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useViewContext, ViewContextProvider } from '../useViewContext';
 import { DialogProvider } from './DialogProvider';
 import { useSolidAuth } from '@ldo/solid-react';
 import { SharingModalProvider } from '../sharing/SharingModal';
+import { useTheme } from '@react-navigation/native';
 
 export const ValidViewContext = createContext<{
   validViews: ResourceViewConfig[];
@@ -22,6 +23,7 @@ export const ValidViewContext = createContext<{
 
 export const Layout: FunctionComponent = () => {
   const { ranInitialAuthCheck } = useSolidAuth();
+  const { colors } = useTheme();
 
   if (!ranInitialAuthCheck) {
     return <></>;
@@ -31,9 +33,13 @@ export const Layout: FunctionComponent = () => {
     <DialogProvider>
       <ViewContextProvider>
         <SharingModalProvider>
-          <Header />
-          <View className="flex-1 z-0">
-            <RenderView />
+          <View
+            style={[styles.container, { backgroundColor: colors.background }]}
+          >
+            <Header />
+            <View style={styles.contentView}>
+              <RenderView />
+            </View>
           </View>
         </SharingModalProvider>
       </ViewContextProvider>
@@ -55,3 +61,13 @@ export const RenderView: FunctionComponent = () => {
   const CurView = curViewConfig.view;
   return <CurView />;
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentView: {
+    flex: 1,
+    zIndex: 0,
+  },
+});

package/components/nav/header/AddressBox.tsx

@@ -1,20 +1,23 @@
 import React, { useEffect, useMemo } from 'react';
 import { FunctionComponent, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, StyleSheet, ScrollView } from 'react-native';
 import { Input } from '../../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 { ChevronRight } from 'lucide-react-native';
+import { ChevronsRight } from 'lucide-react-native';
+import { TextCursorInput } from 'lucide-react-native';
+import { RefreshCw } from 'lucide-react-native';
+import { ArrowRight } from 'lucide-react-native';
 import { Button } from '../../../components/ui/button';
 import { Text } from '../../ui/text';
 import { useTargetResource } from '../../TargetResourceProvider';
+import { useTheme } from '@react-navigation/native';
+import { Icon } from '../../../components/ui/icon';
 
 export const AddressBox: FunctionComponent = () => {
   const [isTextMode, setIsTextMode] = useState(false);
   const { targetUri, refresh, navigateTo, targetResource } =
     useTargetResource();
+  const { colors } = useTheme();
 
   const [textBoxValue, setTextBoxValue] = useState(targetUri ?? '');
   useEffect(() => {
@@ -51,9 +54,9 @@ export const AddressBox: FunctionComponent = () => {
   }, [targetUri]);
 
   return (
-    <View className="flex-1">
+    <View style={styles.container}>
       <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"
+        style={[styles.input, { backgroundColor: colors.border }]}
         onFocus={() => setIsTextMode(true)}
         onBlur={() => setTimeout(() => setIsTextMode(false), 100)}
         onChangeText={setTextBoxValue}
@@ -66,22 +69,41 @@ export const AddressBox: FunctionComponent = () => {
       />
       <Button
         variant="secondary"
-        className="absolute left-0 w-10 h-10"
+        style={styles.leftButton}
         onPress={() => setIsTextMode((val) => !val)}
-        iconLeft={
-          isTextMode ? (
-            <ChevronsRight size={20} />
-          ) : (
-            <TextCursorInput size={20} />
-          )
-        }
+        iconLeft={isTextMode ? ChevronsRight : TextCursorInput}
+        textStyle={styles.buttonText}
       />
+      <ScrollView
+        style={styles.breadcrumbContainer}
+        contentContainerStyle={styles.breadcrumbContentContainer}
+        pointerEvents="none"
+        horizontal
+      >
+        {!isTextMode &&
+          breadcrumbInfo.map((item, index) => (
+            <View style={styles.breadcrumbItem} key={item.uri}>
+              <TouchableOpacity onPress={() => navigateTo(item.uri)}>
+                <View pointerEvents="auto">
+                  <Text style={styles.breadcrumbText} size="sm">
+                    {item.name}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+              {index !== breadcrumbInfo.length - 1 ? (
+                <Icon icon={ChevronRight} style={styles.chevron} />
+              ) : (
+                <View style={styles.spacer} />
+              )}
+            </View>
+          ))}
+      </ScrollView>
       {(() => {
         const shouldRefresh = targetUri === textBoxValue || !isTextMode;
         return (
           <Button
             variant="secondary"
-            className="absolute right-0 w-10 h-10"
+            style={styles.rightButton}
             onPressIn={() => {
               if (shouldRefresh) {
                 refresh();
@@ -89,39 +111,73 @@ export const AddressBox: FunctionComponent = () => {
                 navigateTo(textBoxValue);
               }
             }}
-          >
-            <Text className={targetResource?.isLoading() ? 'animate-spin' : ''}>
-              {shouldRefresh || targetResource?.isLoading() ? (
-                <RefreshCw size={20} />
-              ) : (
-                <ArrowRight size={20} />
-              )}
-            </Text>
-          </Button>
+            iconLeft={
+              shouldRefresh || targetResource?.isLoading()
+                ? RefreshCw
+                : ArrowRight
+            }
+            textStyle={styles.buttonText}
+          />
         );
       })()}
-      <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" size="sm">
-                    {item.name}
-                  </Text>
-                </View>
-              </TouchableOpacity>
-            </View>
-          ))}
-      </View>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: 40,
+  },
+  input: {
+    flex: 1,
+    borderWidth: 0,
+    paddingHorizontal: 40,
+    height: 40,
+    fontSize: 14,
+  },
+  leftButton: {
+    position: 'absolute',
+    left: 0,
+    width: 40,
+    height: 40,
+  },
+  rightButton: {
+    position: 'absolute',
+    right: 0,
+    width: 40,
+    height: 40,
+  },
+  breadcrumbContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    marginLeft: 40,
+    marginRight: 40,
+  },
+  breadcrumbContentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  breadcrumbItem: {
+    flexDirection: 'row',
+  },
+  chevron: {
+    width: 16,
+    height: 16,
+    marginRight: 2,
+    color: 'hsl(var(--muted-foreground))',
+  },
+  spacer: {
+    width: 8,
+  },
+  breadcrumbText: {
+    marginRight: 2,
+    textDecorationLine: 'underline',
+  },
+  buttonText: {
+    fontSize: 20,
+  },
+});

package/components/nav/header/AvatarMenu.tsx

@@ -1,7 +1,7 @@
 import { useResource, useSolidAuth, useSubject } from '@ldo/solid-react';
 import React from 'react';
 import { FunctionComponent } from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { SolidProfileShapeType } from '../../../.ldo/profile.shapeTypes';
 import { Text } from '../../ui/text';
 import { Button } from '../../ui/button';
@@ -13,9 +13,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu';
-import { LogOut } from '../../../lib/icons/LogOut';
+import { LogOut } from 'lucide-react-native';
 import { useTargetResource } from '../../TargetResourceProvider';
 import { ProfileAvatar } from '../../common/ProfileAvatar';
+import { Icon } from '../../ui/icon';
 
 export const AvatarMenu: FunctionComponent = () => {
   const { session, logout } = useSolidAuth();
@@ -29,14 +30,14 @@ export const AvatarMenu: FunctionComponent = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button key="setMemu" variant="ghost" className="w-10">
+        <Button key="setMemu" variant="ghost" style={styles.button}>
           <ProfileAvatar profile={profile} />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-64 native:w-72 mr-2 mt-2">
-        <View className="p-2 flex-row items-center">
-          <ProfileAvatar profile={profile} className="w-20 h-20" />
-          <View className="ml-2">
+      <DropdownMenuContent style={styles.dropdownContent}>
+        <View style={styles.profileContainer}>
+          <ProfileAvatar profile={profile} style={styles.profileAvatar} />
+          <View style={styles.profileInfo}>
             <Text>{profile?.fn || ''}</Text>
             <Button
               size="sm"
@@ -49,11 +50,42 @@ export const AvatarMenu: FunctionComponent = () => {
         <ThemeToggleMenu />
         <DropdownMenuSeparator />
         <DropdownMenuItem onPress={logout}>
-          <Text className="flex flex-row gap-1 items-center">
-            <LogOut /> Log Out
-          </Text>
+          <View style={styles.logoutText}>
+            <Icon icon={LogOut} />
+            <Text>Log Out</Text>
+          </View>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
 };
+
+const styles = StyleSheet.create({
+  button: {
+    width: 40,
+  },
+  dropdownContent: {
+    width: 256,
+    marginRight: 8,
+    marginTop: 8,
+  },
+  profileContainer: {
+    padding: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  profileAvatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+  },
+  profileInfo: {
+    marginLeft: 8,
+    gap: 8,
+  },
+  logoutText: {
+    flexDirection: 'row',
+    gap: 4,
+    alignItems: 'center',
+  },
+});

package/components/nav/header/Header.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { useSolidAuth } from '@ldo/solid-react';
 import { FunctionComponent } from 'react';
-import { View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { AddressBox } from './AddressBox';
 import { AvatarMenu } from './AvatarMenu';
 import { SignInMenu } from './SignInMenu';
 import { ViewMenu } from './ViewMenu';
 import { Card } from '../../ui/card';
 import { Button } from '../../ui/button';
-import { UserPlus } from '../../../lib/icons/UserPlus';
+import { UserPlus } from 'lucide-react-native';
 import { useSharingModal } from '../../sharing/SharingModal';
 
 export const Header: FunctionComponent = () => {
@@ -16,28 +16,35 @@ export const Header: FunctionComponent = () => {
   const { openSharingModal } = useSharingModal();
 
   return (
-    <Card
-      className={
-        'h-12 flex-row justify-between items-center rounded-none border-0 sm:p-2 p-1 z-[1]'
-      }
-    >
+    <Card style={styles.card}>
       <AddressBox />
-      <View className="mr-1" />
       {session.isLoggedIn && (
-        <>
-          <Button
-            key="setMemu"
-            variant="ghost"
-            className="w-10"
-            onPress={openSharingModal}
-            iconLeft={<UserPlus />}
-          />
-          <View className="mr-1" />
-        </>
+        <Button
+          key="setMemu"
+          variant="ghost"
+          style={styles.shareButton}
+          onPress={openSharingModal}
+          iconLeft={UserPlus}
+        />
       )}
       <ViewMenu />
-      <View className="mr-1" />
       {session.isLoggedIn ? <AvatarMenu /> : <SignInMenu />}
     </Card>
   );
 };
+
+const styles = StyleSheet.create({
+  card: {
+    height: 48, // h-12 = 3rem = 48px
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: 0, // rounded-none
+    borderWidth: 0, // border-0
+    padding: 8,
+    zIndex: 1, // z-[1]
+  },
+  shareButton: {
+    width: 40, // w-10 = 2.5rem = 40px
+  },
+});