linked-data-browser 0.0.6 → 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/.ldo/profile.shapeTypes.ts

@@ -2,12 +2,12 @@ import { ShapeType } from "@ldo/ldo";
 import { profileSchema } from "./profile.schema";
 import { profileContext } from "./profile.context";
 import {
-  SolidProfileShape,
-  AddressShape,
-  EmailShape,
-  PhoneNumberShape,
-  TrustedAppShape,
-  RSAPublicKeyShape,
+  SolidProfile,
+  Address,
+  Email,
+  PhoneNumber,
+  TrustedApp,
+  RSAPublicKey,
 } from "./profile.typings";
 
 /**
@@ -17,54 +17,54 @@ import {
  */
 
 /**
- * SolidProfileShape ShapeType
+ * SolidProfile ShapeType
  */
-export const SolidProfileShapeShapeType: ShapeType<SolidProfileShape> = {
+export const SolidProfileShapeType: ShapeType<SolidProfile> = {
   schema: profileSchema,
   shape: "https://shaperepo.com/schemas/solidProfile#SolidProfileShape",
   context: profileContext,
 };
 
 /**
- * AddressShape ShapeType
+ * Address ShapeType
  */
-export const AddressShapeShapeType: ShapeType<AddressShape> = {
+export const AddressShapeType: ShapeType<Address> = {
   schema: profileSchema,
   shape: "https://shaperepo.com/schemas/solidProfile#AddressShape",
   context: profileContext,
 };
 
 /**
- * EmailShape ShapeType
+ * Email ShapeType
  */
-export const EmailShapeShapeType: ShapeType<EmailShape> = {
+export const EmailShapeType: ShapeType<Email> = {
   schema: profileSchema,
   shape: "https://shaperepo.com/schemas/solidProfile#EmailShape",
   context: profileContext,
 };
 
 /**
- * PhoneNumberShape ShapeType
+ * PhoneNumber ShapeType
  */
-export const PhoneNumberShapeShapeType: ShapeType<PhoneNumberShape> = {
+export const PhoneNumberShapeType: ShapeType<PhoneNumber> = {
   schema: profileSchema,
   shape: "https://shaperepo.com/schemas/solidProfile#PhoneNumberShape",
   context: profileContext,
 };
 
 /**
- * TrustedAppShape ShapeType
+ * TrustedApp ShapeType
  */
-export const TrustedAppShapeShapeType: ShapeType<TrustedAppShape> = {
+export const TrustedAppShapeType: ShapeType<TrustedApp> = {
   schema: profileSchema,
   shape: "https://shaperepo.com/schemas/solidProfile#TrustedAppShape",
   context: profileContext,
 };
 
 /**
- * RSAPublicKeyShape ShapeType
+ * RSAPublicKey ShapeType
  */
-export const RSAPublicKeyShapeShapeType: ShapeType<RSAPublicKeyShape> = {
+export const RSAPublicKeyShapeType: ShapeType<RSAPublicKey> = {
   schema: profileSchema,
   shape: "https://shaperepo.com/schemas/solidProfile#RSAPublicKeyShape",
   context: profileContext,

package/.ldo/profile.typings.ts

@@ -7,9 +7,9 @@ import { LdoJsonldContext, LdSet } from "@ldo/ldo";
  */
 
 /**
- * SolidProfileShape Type
+ * SolidProfile Type
  */
-export interface SolidProfileShape {
+export interface SolidProfile {
   "@id"?: string;
   "@context"?: LdoJsonldContext;
   /**
@@ -34,11 +34,11 @@ export interface SolidProfileShape {
   /**
    * The person's street address.
    */
-  hasAddress?: LdSet<AddressShape>;
+  hasAddress?: LdSet<Address>;
   /**
    * The person's email.
    */
-  hasEmail?: LdSet<EmailShape>;
+  hasEmail?: LdSet<Email>;
   /**
    * A link to the person's photo
    */
@@ -52,7 +52,7 @@ export interface SolidProfileShape {
   /**
    * Person's telephone number
    */
-  hasTelephone?: LdSet<PhoneNumberShape>;
+  hasTelephone?: LdSet<PhoneNumber>;
   /**
    * An alternative way to define a person's telephone number using a string
    */
@@ -68,11 +68,11 @@ export interface SolidProfileShape {
   /**
    * A list of app origins that are trusted by this user
    */
-  trustedApp?: LdSet<TrustedAppShape>;
+  trustedApp?: LdSet<TrustedApp>;
   /**
    * A list of RSA public keys that are associated with private keys the user holds.
    */
-  key?: LdSet<RSAPublicKeyShape>;
+  key?: LdSet<RSAPublicKey>;
   /**
    * The user's LDP inbox to which apps can post notifications
    */
@@ -118,9 +118,9 @@ export interface SolidProfileShape {
 }
 
 /**
- * AddressShape Type
+ * Address Type
  */
-export interface AddressShape {
+export interface Address {
   "@id"?: string;
   "@context"?: LdoJsonldContext;
   /**
@@ -146,9 +146,9 @@ export interface AddressShape {
 }
 
 /**
- * EmailShape Type
+ * Email Type
  */
-export interface EmailShape {
+export interface Email {
   "@id"?: string;
   "@context"?: LdoJsonldContext;
   /**
@@ -198,9 +198,9 @@ export interface EmailShape {
 }
 
 /**
- * PhoneNumberShape Type
+ * PhoneNumber Type
  */
-export interface PhoneNumberShape {
+export interface PhoneNumber {
   "@id"?: string;
   "@context"?: LdoJsonldContext;
   /**
@@ -250,9 +250,9 @@ export interface PhoneNumberShape {
 }
 
 /**
- * TrustedAppShape Type
+ * TrustedApp Type
  */
-export interface TrustedAppShape {
+export interface TrustedApp {
   "@id"?: string;
   "@context"?: LdoJsonldContext;
   /**
@@ -281,9 +281,9 @@ export interface TrustedAppShape {
 }
 
 /**
- * RSAPublicKeyShape Type
+ * RSAPublicKey Type
  */
-export interface RSAPublicKeyShape {
+export interface RSAPublicKey {
   "@id"?: string;
   "@context"?: LdoJsonldContext;
   /**

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

@@ -1,6 +1,14 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
+    presets: [
+      [
+        'babel-preset-expo',
+        {
+          unstable_transformProfile: 'hermes-canary',
+        },
+      ],
+    ],
+    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

@@ -1,23 +1,20 @@
 import React from 'react';
-import { SolidProfileShape } from '../../.ldo/profile.typings';
+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?: SolidProfileShape;
-  className?: string;
+  profile?: SolidProfile;
+  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,
+  },
+});