linked-data-browser 0.0.2 → 0.0.4

package/.ldo/profile.context.ts

@@ -8,12 +8,14 @@ import { LdoJsonldContext } from "@ldo/ldo";
 export const profileContext: LdoJsonldContext = {
   type: {
     "@id": "@type",
+    "@isCollection": true,
   },
   Person: {
     "@id": "http://schema.org/Person",
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       fn: {
         "@id": "http://www.w3.org/2006/vcard/ns#fn",
@@ -107,6 +109,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       fn: {
         "@id": "http://www.w3.org/2006/vcard/ns#fn",
@@ -238,6 +241,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -250,6 +254,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -262,6 +267,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -274,6 +280,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -286,6 +293,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -298,6 +306,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -310,6 +319,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -322,6 +332,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -334,6 +345,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -346,6 +358,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",
@@ -358,6 +371,7 @@ export const profileContext: LdoJsonldContext = {
     "@context": {
       type: {
         "@id": "@type",
+        "@isCollection": true,
       },
       value: {
         "@id": "http://www.w3.org/2006/vcard/ns#value",

package/.ldo/profile.typings.ts

@@ -154,7 +154,7 @@ export interface EmailShape {
   /**
    * The type of email.
    */
-  type?:
+  type?: LdSet<
     | {
         "@id": "Dom";
       }
@@ -187,7 +187,8 @@ export interface EmailShape {
       }
     | {
         "@id": "X400";
-      };
+      }
+  >;
   /**
    * The value of an email as a mailto link (Example <mailto:jane@example.com>)
    */
@@ -205,7 +206,7 @@ export interface PhoneNumberShape {
   /**
    * They type of Phone Number
    */
-  type?:
+  type?: LdSet<
     | {
         "@id": "Dom";
       }
@@ -238,7 +239,8 @@ export interface PhoneNumberShape {
       }
     | {
         "@id": "X400";
-      };
+      }
+  >;
   /**
    * The value of a phone number as a tel link (Example <tel:555-555-5555>)
    */

package/app/index.tsx

@@ -5,6 +5,7 @@ import { RawCodeConfig } from '../resourceViews/RawCode/RawCodeConfig';
 import { ContainerConfig } from '../resourceViews/Container/ContainerConfig';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { StatusBar } from 'react-native';
+import { ProfileConfig } from 'resourceViews/Profile/ProfileConfig';
 
 export function Screen() {
   const mode = process.env.EXPO_PUBLIC_IS_SERVER_HOSTED
@@ -15,7 +16,7 @@ export function Screen() {
     <SafeAreaProvider>
       <StatusBar />
       <DataBrowser
-        views={[ContainerConfig, RawCodeConfig]}
+        views={[ProfileConfig, ContainerConfig, RawCodeConfig]}
         mode={mode}
         renderHomepage={() => <Text>Hopepage</Text>}
         renderLogo={() => <Text>Logo</Text>}

package/components/ResourceView.tsx

@@ -1,7 +1,11 @@
-import { SolidContainer, SolidLeaf } from '@ldo/connected-solid';
+import {
+  SolidConnectedPlugin,
+  SolidContainer,
+  SolidLeaf,
+} from '@ldo/connected-solid';
+import { ConnectedLdoDataset } from '@ldo/connected';
 import { LucideIcon } from 'lucide-react-native';
 import { ElementType } from 'react';
-
 export interface ResourceViewConfig {
   name: string;
   displayName: string;
@@ -10,5 +14,6 @@ export interface ResourceViewConfig {
   canDisplay: (
     targetUri: string,
     targetResource: SolidLeaf | SolidContainer,
+    dataset: ConnectedLdoDataset<SolidConnectedPlugin[]>,
   ) => boolean;
 }

package/components/common/LoadingBar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTheme } from '@react-navigation/native';
+import { FunctionComponent } from 'react';
+import { Bar } from 'react-native-progress';
+
+interface LoadingBarProps {
+  isLoading: boolean;
+}
+
+export const LoadingBar: FunctionComponent<LoadingBarProps> = ({
+  isLoading,
+}) => {
+  const { colors } = useTheme();
+
+  if (!isLoading) return <></>;
+
+  return (
+    <Bar
+      color={colors.primary}
+      indeterminate
+      borderWidth={0}
+      borderRadius={0}
+      width={null}
+      className="absolute top-0 left-0 right-0"
+    />
+  );
+};

package/components/common/ProfileAvatar.tsx

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

package/components/nav/DialogProvider.tsx

@@ -15,9 +15,10 @@ import {
   DialogDescription,
   DialogClose,
 } from '../ui/dialog';
-import { TextInput, View } from 'react-native';
+import { View } from 'react-native';
 import { Button } from '../ui/button';
 import { Text } from '../ui/text';
+import { Input } from '../ui/input';
 
 type DialogOptions =
   | { type: 'confirm'; title: string; message?: string }
@@ -112,7 +113,7 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({
 
           {options?.type === 'prompt' && (
             <View className="my-2">
-              <TextInput
+              <Input
                 value={inputValue}
                 onChangeText={setInputValue}
                 placeholder="Enter text..."
@@ -125,13 +126,9 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({
 
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="ghost" onPress={handleCancel}>
-                <Text>Cancel</Text>
-              </Button>
+              <Button variant="ghost" onPress={handleCancel} text="Cancel" />
             </DialogClose>
-            <Button onPress={handleConfirm}>
-              <Text>Ok</Text>
-            </Button>
+            <Button onPress={handleConfirm} text="Ok" />
           </DialogFooter>
         </DialogContent>
       </Dialog>

package/components/nav/Layout.tsx

@@ -4,18 +4,14 @@ import React, {
   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 { useViewContext, ViewContextProvider } from '../useViewContext';
 import { DialogProvider } from './DialogProvider';
+import { useSolidAuth } from '@ldo/solid-react';
+import { SharingModalProvider } from 'components/sharing/SharingModal';
 
 export const ValidViewContext = createContext<{
   validViews: ResourceViewConfig[];
@@ -25,14 +21,22 @@ export const ValidViewContext = createContext<{
 }>({});
 
 export const Layout: FunctionComponent = () => {
+  const { ranInitialAuthCheck } = useSolidAuth();
+
+  if (!ranInitialAuthCheck) {
+    return <></>;
+  }
+
   return (
     <DialogProvider>
-      <ValidViewProvider>
-        <Header />
-        <View className="flex-1 z-0">
-          <RenderView />
-        </View>
-      </ValidViewProvider>
+      <ViewContextProvider>
+        <SharingModalProvider>
+          <Header />
+          <View className="flex-1 z-0">
+            <RenderView />
+          </View>
+        </SharingModalProvider>
+      </ViewContextProvider>
     </DialogProvider>
   );
 };
@@ -44,75 +48,10 @@ export const Layout: FunctionComponent = () => {
  */
 
 export const RenderView: FunctionComponent = () => {
-  const { targetUri, targetResource } = useTargetResource();
+  const { curViewConfig, targetResource } = useViewContext();
 
-  const { curViewConfig } = useValidView();
+  if (targetResource?.isDoingInitialFetch()) return <></>;
 
-  // 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

@@ -68,15 +68,14 @@ export const AddressBox: FunctionComponent = () => {
         variant="secondary"
         className="absolute left-0 w-10 h-10"
         onPress={() => setIsTextMode((val) => !val)}
-      >
-        <Text>
-          {isTextMode ? (
+        iconLeft={
+          isTextMode ? (
             <ChevronsRight size={20} />
           ) : (
             <TextCursorInput size={20} />
-          )}
-        </Text>
-      </Button>
+          )
+        }
+      />
       {(() => {
         const shouldRefresh = targetUri === textBoxValue || !isTextMode;
         return (
@@ -115,7 +114,9 @@ export const AddressBox: FunctionComponent = () => {
               )}
               <TouchableOpacity onPress={() => navigateTo(item.uri)}>
                 <View pointerEvents="auto">
-                  <Text className="mr-0.5 underline text-sm">{item.name}</Text>
+                  <Text className="mr-0.5 underline" size="sm">
+                    {item.name}
+                  </Text>
                 </View>
               </TouchableOpacity>
             </View>

package/components/nav/header/AvatarMenu.tsx

@@ -1,62 +1,59 @@
+import { useResource, useSolidAuth, useSubject } from '@ldo/solid-react';
 import React from 'react';
-
 import { FunctionComponent } from 'react';
-import { StyleSheet } from 'react-native';
+import { View } from 'react-native';
+import { SolidProfileShapeShapeType } from '../../../.ldo/profile.shapeTypes';
+import { Text } from '../../ui/text';
+import { Button } from '../../ui/button';
+import { ThemeToggleMenu } from './ThemeToggleMenu';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu';
+import { LogOut } from '../../../lib/icons/LogOut';
+import { useTargetResource } from '../../TargetResourceProvider';
+import { ProfileAvatar } from '../../common/ProfileAvatar';
 
 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 { session, logout } = useSolidAuth();
+  // TODO: Use WebId Resource to render a skeleton loader
+  const webIdResource = useResource(session.webId);
+  const profile = useSubject(SolidProfileShapeShapeType, session.webId);
+  const { navigateTo } = useTargetResource();
 
-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,
-  },
-});
+  if (!session.webId) return <></>;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button key="setMemu" variant="ghost" className="w-10">
+          <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">
+            <Text>{profile?.fn || ''}</Text>
+            <Button
+              size="sm"
+              onPress={() => navigateTo(session.webId ?? '')}
+              text="Edit your profile"
+            />
+          </View>
+        </View>
+        <DropdownMenuSeparator />
+        <ThemeToggleMenu />
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onPress={logout}>
+          <Text className="flex flex-row gap-1 items-center">
+            <LogOut /> Log Out
+          </Text>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/components/nav/header/Header.tsx

@@ -2,15 +2,19 @@ import React from 'react';
 import { useSolidAuth } from '@ldo/solid-react';
 import { FunctionComponent } from 'react';
 import { View } from 'react-native';
-
 import { AddressBox } from './AddressBox';
 import { AvatarMenu } from './AvatarMenu';
 import { SignInMenu } from './SignInMenu';
 import { ViewMenu } from './ViewMenu';
-import { Card } from '../../../components/ui/card';
+import { Card } from '../../ui/card';
+import { Button } from '../../ui/button';
+import { Text } from '../../ui/text';
+import { UserPlus } from '../../../lib/icons/UserPlus';
+import { useSharingModal } from '../../sharing/SharingModal';
 
 export const Header: FunctionComponent = () => {
   const { session } = useSolidAuth();
+  const { openSharingModal } = useSharingModal();
 
   return (
     <Card
@@ -20,6 +24,18 @@ export const Header: FunctionComponent = () => {
     >
       <AddressBox />
       <View className="mr-1" />
+      {session.isLoggedIn && (
+        <>
+          <Button
+            key="setMemu"
+            variant="ghost"
+            className="w-10"
+            onPress={openSharingModal}
+            iconLeft={<UserPlus />}
+          />
+          <View className="mr-1" />
+        </>
+      )}
       <ViewMenu />
       <View className="mr-1" />
       {session.isLoggedIn ? <AvatarMenu /> : <SignInMenu />}

package/components/nav/header/SignInMenu.tsx

@@ -53,24 +53,23 @@ export const SignInMenu: FunctionComponent = () => {
           className="hidden sm:block"
           onPress={() => signUp(DEFAULT_ISSUER)}
           variant="ghost"
-        >
-          <Text>Sign Up</Text>
-        </Button>
+          text="Sign Up"
+        />
         <Button
           key="logIn"
           className="hidden sm:block"
           onPress={() => login(DEFAULT_ISSUER)}
           variant="default"
-        >
-          <Text>Log In</Text>
-        </Button>
+          text="Log In"
+        />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button key="setMemu" variant="ghost" className="w-10">
-              <Text>
-                <EllipsisVertical size={20} />
-              </Text>
-            </Button>
+            <Button
+              key="setMemu"
+              variant="ghost"
+              className="w-10"
+              iconLeft={<EllipsisVertical size={20} />}
+            />
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-64 native:w-72">
             <DropdownMenuGroup>
@@ -106,9 +105,7 @@ export const SignInMenu: FunctionComponent = () => {
                   </DialogHeader>
                   <DialogFooter>
                     <DialogClose asChild>
-                      <Button onPress={onIdpSubmit}>
-                        <Text>OK</Text>
-                      </Button>
+                      <Button onPress={onIdpSubmit} text="OK" />
                     </DialogClose>
                   </DialogFooter>
                 </DialogContent>