linked-data-browser 0.0.3 → 0.0.5

package/.eslintrc.js

@@ -9,5 +9,24 @@ module.exports = {
     'prettier/prettier': ['error'],
     'react/no-unstable-nested-components': 0,
     '@typescript-eslint/no-unused-vars': 1,
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: [
+              'components/*',
+              '~/components/*',
+              'lib/*',
+              '~/lib/*',
+              'resourceViews/*',
+              '~/resourceViews/*',
+            ],
+            message:
+              'Absolute imports are not allowed. Please use relative imports instead.',
+          },
+        ],
+      },
+    ],
   },
 };

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

@@ -126,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,19 +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 '../sharing/SharingModal';
 
 export const ValidViewContext = createContext<{
   validViews: ResourceViewConfig[];
@@ -34,12 +29,14 @@ export const Layout: FunctionComponent = () => {
 
   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>
   );
 };
@@ -51,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,14 +1,8 @@
-import {
-  useLdo,
-  useResource,
-  useSolidAuth,
-  useSubject,
-} from '@ldo/solid-react';
+import { useResource, useSolidAuth, useSubject } from '@ldo/solid-react';
 import React from 'react';
 import { FunctionComponent } from 'react';
 import { View } from 'react-native';
 import { SolidProfileShapeShapeType } from '../../../.ldo/profile.shapeTypes';
-import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
 import { Text } from '../../ui/text';
 import { Button } from '../../ui/button';
 import { ThemeToggleMenu } from './ThemeToggleMenu';
@@ -19,12 +13,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu';
-import { User } from '../../../lib/icons/User';
 import { LogOut } from '../../../lib/icons/LogOut';
 import { useTargetResource } from '../../TargetResourceProvider';
+import { ProfileAvatar } from '../../common/ProfileAvatar';
 
 export const AvatarMenu: FunctionComponent = () => {
-  const { dataset } = useLdo();
   const { session, logout } = useSolidAuth();
   // TODO: Use WebId Resource to render a skeleton loader
   const webIdResource = useResource(session.webId);
@@ -33,43 +26,23 @@ export const AvatarMenu: FunctionComponent = () => {
 
   if (!session.webId) return <></>;
 
-  console.log(profile?.['@id']);
-  console.log(profile?.hasPhoto?.['@id']);
-  console.log(webIdResource?.isLoading());
-  console.log(dataset.toString());
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button key="setMemu" variant="ghost" className="w-10">
-          <Avatar alt={profile?.fn ? `${profile.fn}'s Avatar` : ''}>
-            <AvatarImage source={{ uri: profile?.hasPhoto?.['@id'] }} />
-            <AvatarFallback>
-              <Text>
-                <User />
-              </Text>
-            </AvatarFallback>
-          </Avatar>
+          <ProfileAvatar profile={profile} />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-64 native:w-72 mr-2 mt-2">
         <View className="p-2 flex-row items-center">
-          <Avatar
-            alt={profile?.fn ? `${profile.fn}'s Avatar` : ''}
-            className="w-20 h-20"
-          >
-            <AvatarImage source={{ uri: profile?.hasPhoto?.['@id'] }} />
-            <AvatarFallback>
-              <Text>
-                <User />
-              </Text>
-            </AvatarFallback>
-          </Avatar>
+          <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</Text>
-            </Button>
+            <Button
+              size="sm"
+              onPress={() => navigateTo(session.webId ?? '')}
+              text="Edit your profile"
+            />
           </View>
         </View>
         <DropdownMenuSeparator />

package/components/nav/header/Header.tsx

@@ -2,15 +2,18 @@ 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 { UserPlus } from '../../../lib/icons/UserPlus';
+import { useSharingModal } from '../../sharing/SharingModal';
 
 export const Header: FunctionComponent = () => {
   const { session } = useSolidAuth();
+  const { openSharingModal } = useSharingModal();
 
   return (
     <Card
@@ -20,6 +23,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>

package/components/nav/header/ViewMenu.tsx

@@ -13,7 +13,7 @@ import { View } from 'react-native';
 import type { ViewRef } from '@rn-primitives/types';
 import { cn } from '../../../lib/utils';
 import { ViewIcon } from '../../../lib/icons/ViewIcon';
-import { useValidView } from '../useValidView';
+import { useViewContext } from '../../useViewContext';
 import { ResourceViewConfig } from '../../../components/ResourceView';
 
 export const ViewMenu: FunctionComponent = () => {
@@ -24,7 +24,7 @@ export const ViewMenu: FunctionComponent = () => {
     left: 12,
     right: 12,
   };
-  const { validViews } = useValidView();
+  const { validViews } = useViewContext();
 
   const [isOpen, setIsOpen] = React.useState<string>();
 
@@ -63,7 +63,7 @@ const ListItem = React.forwardRef<
   }
 >(({ className, viewConfig, ...props }, ref) => {
   // TODO: add navigationn to `href` on `NavigationMenuLink` onPress
-  const { curViewConfig, setCurViewConfig } = useValidView();
+  const { curViewConfig, setCurViewConfig } = useViewContext();
   const Icon = viewConfig.displayIcon;
   return (
     <View role="listitem">
@@ -78,7 +78,7 @@ const ListItem = React.forwardRef<
         {...props}
       >
         <Icon size={20} />
-        <Text className="text-sm native:text-base font-medium text-foreground leading-none ml-2">
+        <Text className="ml-2" size="sm">
           {viewConfig.displayName}
         </Text>
       </NavigationMenuLink>