linked-data-browser 0.0.0

package/components/nav/header/Header.tsx

@@ -0,0 +1,28 @@
+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';
+
+export const Header: FunctionComponent = () => {
+  const { session } = useSolidAuth();
+
+  return (
+    <Card
+      className={
+        'h-12 flex-row justify-between items-center rounded-none border-0 sm:p-2 p-1 z-[1]'
+      }
+    >
+      <AddressBox />
+      <View className="mr-1" />
+      <ViewMenu />
+      <View className="mr-1" />
+      {session.isLoggedIn ? <AvatarMenu /> : <SignInMenu />}
+    </Card>
+  );
+};

package/components/nav/header/SignInMenu.tsx

@@ -0,0 +1,126 @@
+import { useSolidAuth } from '@ldo/solid-react';
+import React, { FunctionComponent, useCallback, useState } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../../ui/button';
+import { Text } from '../../ui/text';
+import { EllipsisVertical } from '~/lib/icons/EllipsisVertical';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import { ThemeToggleMenu } from './ThemeToggleMenu';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '~/components/ui/dialog';
+import { Input } from '../../ui/input';
+
+const DEFAULT_ISSUER = 'http://localhost:3000';
+
+export const SignInMenu: FunctionComponent = () => {
+  const [idpValue, setIdpValue] = useState('');
+  const [, setIdpError] = useState<string | undefined>();
+  const { login, signUp } = useSolidAuth();
+  const onIdpSubmit = useCallback(async () => {
+    setIdpError(undefined);
+    try {
+      await login(idpValue);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setIdpError(err.message);
+      } else {
+        setIdpError('Could not log in');
+      }
+    }
+  }, [idpValue, login]);
+
+  const renderButtonGroup = () => {
+    return (
+      <View className="flex-row">
+        <Button
+          key="signUp"
+          className="hidden sm:block"
+          onPress={() => signUp(DEFAULT_ISSUER)}
+          variant="ghost"
+        >
+          <Text>Sign Up</Text>
+        </Button>
+        <Button
+          key="logIn"
+          className="hidden sm:block"
+          onPress={() => login(DEFAULT_ISSUER)}
+          variant="default"
+        >
+          <Text>Log In</Text>
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button key="setMemu" variant="ghost" className="w-10">
+              <Text>
+                <EllipsisVertical size={20} />
+              </Text>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-64 native:w-72">
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className="sm:hidden flex"
+                onPress={() => signUp(DEFAULT_ISSUER)}
+              >
+                <Text>Sign Up</Text>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="sm:hidden flex"
+                onPress={() => login(DEFAULT_ISSUER)}
+              >
+                <Text>Log In</Text>
+              </DropdownMenuItem>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <DropdownMenuItem closeOnPress={false}>
+                    <Text>Log in with Another Pod</Text>
+                  </DropdownMenuItem>
+                </DialogTrigger>
+                <DialogContent className="w-[400px]">
+                  <DialogHeader>
+                    <DialogTitle>Solid WebId or Identity Provider</DialogTitle>
+                    <DialogDescription>
+                      <Input
+                        value={idpValue}
+                        placeholder={DEFAULT_ISSUER}
+                        onChangeText={(newText) => setIdpValue(newText)}
+                        onSubmitEditing={onIdpSubmit}
+                      />
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <DialogClose asChild>
+                      <Button onPress={onIdpSubmit}>
+                        <Text>OK</Text>
+                      </Button>
+                    </DialogClose>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <ThemeToggleMenu />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </View>
+    );
+  };
+
+  return renderButtonGroup();
+};

package/components/nav/header/ThemeToggleMenu.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FunctionComponent } from 'react';
+import { MoonStar } from '~/lib/icons/MoonStar';
+import { Sun } from '~/lib/icons/Sun';
+import { Text } from '../../ui/text';
+import { Switch } from '../../ui/switch';
+import { DropdownMenuItem } from '../../ui/dropdown-menu';
+import { useThemeChange } from '../../ThemeProvider';
+
+export const ThemeToggleMenu: FunctionComponent = () => {
+  const { colorScheme, setColorScheme } = useThemeChange();
+
+  return (
+    <DropdownMenuItem
+      onPress={() => {
+        setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
+      }}
+      className="justify-between"
+      closeOnPress={false}
+    >
+      <Text className="flex flex-row gap-1 items-center">
+        {colorScheme === 'dark' ? <MoonStar /> : <Sun />} Dark Mode
+      </Text>
+
+      <Switch
+        checked={colorScheme === 'dark'}
+        onCheckedChange={(isDark) => {
+          setColorScheme(isDark ? 'dark' : 'light');
+        }}
+        nativeID="airplane-mode"
+      />
+    </DropdownMenuItem>
+  );
+};

package/components/nav/header/ViewMenu.tsx

@@ -0,0 +1,88 @@
+import React, { FunctionComponent } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from '~/components/ui/navigation-menu';
+import { Text } from '../../ui/text';
+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 { ResourceViewConfig } from '~/components/ResourceView';
+
+export const ViewMenu: FunctionComponent = () => {
+  const insets = useSafeAreaInsets();
+  const contentInsets = {
+    top: insets.top,
+    bottom: insets.bottom,
+    left: 12,
+    right: 12,
+  };
+  const { validViews } = useValidView();
+
+  const [isOpen, setIsOpen] = React.useState<string>();
+
+  return (
+    <NavigationMenu value={isOpen} onValueChange={setIsOpen}>
+      <NavigationMenuList>
+        <NavigationMenuItem value="views">
+          <NavigationMenuTrigger>
+            <Text>
+              <ViewIcon />
+            </Text>
+            <Text className="sm:block hidden">Views</Text>
+          </NavigationMenuTrigger>
+          <NavigationMenuContent insets={contentInsets}>
+            <View
+              role="list"
+              className="web:grid w-dvw gap-3 p-4 md:w-[500px] web:md:grid-cols-2 lg:w-[600px] "
+            >
+              {validViews.map((menuItem) => (
+                <ListItem key={menuItem.name} viewConfig={menuItem}>
+                  {menuItem.displayName}
+                </ListItem>
+              ))}
+            </View>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+};
+
+const ListItem = React.forwardRef<
+  ViewRef,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    viewConfig: ResourceViewConfig;
+  }
+>(({ className, viewConfig, ...props }, ref) => {
+  // TODO: add navigationn to `href` on `NavigationMenuLink` onPress
+  const { curViewConfig, setCurViewConfig } = useValidView();
+  const Icon = viewConfig.displayIcon;
+  return (
+    <View role="listitem">
+      <NavigationMenuLink
+        ref={ref}
+        className={cn(
+          'web:select-none flex-row items-center overflow-hidden rounded-md p-3 leading-none no-underline text-foreground web:outline-none web:transition-colors web:hover:bg-accent active:bg-accent web:hover:text-accent-foreground web:focus:bg-accent web:focus:text-accent-foreground cursor-pointer',
+          className,
+          curViewConfig.name === viewConfig.name ? 'bg-secondary' : '',
+        )}
+        onPress={() => setCurViewConfig(viewConfig)}
+        {...props}
+      >
+        <Icon size={20} />
+        <Text className="text-sm native:text-base font-medium text-foreground leading-none ml-2">
+          {viewConfig.displayName}
+        </Text>
+      </NavigationMenuLink>
+    </View>
+  );
+});
+ListItem.displayName = 'ListItem';

package/components/nav/useValidView.tsx

@@ -0,0 +1,51 @@
+import createContainer from 'constate';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useDataBrowserConfig } from '../DataBrowser';
+import { useTargetResource } from '../TargetResourceProvider';
+import { ResourceViewConfig } from '../ResourceView';
+import { EyeOff } from '~/lib/icons/EyeOff';
+import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
+
+export const [ValidViewProvider, useValidView] = createContainer(() => {
+  const { targetUri, targetResource } = useTargetResource();
+  const { views } = useDataBrowserConfig();
+
+  const validViews = useMemo(() => {
+    const noValidView: ResourceViewConfig = {
+      name: 'noValid',
+      displayName: 'No Valid View',
+      displayIcon: EyeOff,
+      view: () => (
+        <ErrorMessageResourceView
+          icon={EyeOff}
+          message="No Views are available to display this resource."
+        />
+      ),
+      canDisplay: () => false,
+    };
+    if (
+      !targetResource ||
+      !targetUri ||
+      targetResource.type === 'InvalidIdentifierResouce'
+    ) {
+      return [noValidView];
+    }
+    const potentialViews = views.filter((view) =>
+      view.canDisplay(targetUri, targetResource),
+    );
+    return potentialViews.length > 0 ? potentialViews : [noValidView];
+  }, [targetResource, targetUri, views]);
+
+  const [curViewConfig, setCurViewConfig] = useState<ResourceViewConfig>(
+    validViews[0],
+  );
+  useEffect(() => {
+    setCurViewConfig(validViews[0]);
+  }, [targetUri, validViews]);
+
+  return {
+    validViews,
+    curViewConfig,
+    setCurViewConfig,
+  };
+});

package/components/nav/utilityResourceViews/ErrorMessageResourceView.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+import { Text } from '../../ui/text';
+import { LucideIcon } from 'lucide-react-native';
+import { Card } from '../../ui/card';
+import { View } from 'react-native';
+
+interface ErrorMessageResourceViewsProps {
+  icon: LucideIcon;
+  message: string;
+}
+
+export const ErrorMessageResourceView: FunctionComponent<
+  ErrorMessageResourceViewsProps
+> = ({ icon, message }) => {
+  const Icon = icon;
+  return (
+    <View className="flex-1 justify-center items-center bg-background">
+      <Card className="max-w-100 p-6 items-center gap-4 m-4">
+        <Text>
+          <Icon size={60} />
+        </Text>
+        <Text>{message}</Text>
+      </Card>
+    </View>
+  );
+};

package/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+import * as AvatarPrimitive from '@rn-primitives/avatar';
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+function Avatar({
+  className,
+  ...props
+}: AvatarPrimitive.RootProps & {
+  ref?: React.RefObject<AvatarPrimitive.RootRef>;
+}) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn(
+        'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: AvatarPrimitive.ImageProps & {
+  ref?: React.RefObject<AvatarPrimitive.ImageRef>;
+}) {
+  return (
+    <AvatarPrimitive.Image
+      className={cn('aspect-square h-full w-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.FallbackProps & {
+  ref?: React.RefObject<AvatarPrimitive.FallbackRef>;
+}) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/components/ui/button.tsx

@@ -0,0 +1,88 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Pressable } from 'react-native';
+import { TextClassContext } from '~/components/ui/text';
+import { cn } from '~/lib/utils';
+
+const buttonVariants = cva(
+  'group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary web:hover:opacity-90 active:opacity-90',
+        destructive: 'bg-destructive web:hover:opacity-90 active:opacity-90',
+        outline:
+          'border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+        secondary: 'bg-secondary web:hover:opacity-80 active:opacity-80',
+        ghost:
+          'web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+        link: 'web:underline-offset-4 web:hover:underline web:focus:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2 native:h-12 native:px-5 native:py-3',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8 native:h-14',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const buttonTextVariants = cva(
+  'web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'text-primary-foreground',
+        destructive: 'text-destructive-foreground',
+        outline: 'group-active:text-accent-foreground',
+        secondary:
+          'text-secondary-foreground group-active:text-secondary-foreground',
+        ghost: 'group-active:text-accent-foreground',
+        link: 'text-primary group-active:underline',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: 'native:text-lg',
+        icon: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<typeof Pressable> &
+  VariantProps<typeof buttonVariants>;
+
+function Button({ ref, className, variant, size, ...props }: ButtonProps) {
+  return (
+    <TextClassContext.Provider
+      value={buttonTextVariants({
+        variant,
+        size,
+        className: 'web:pointer-events-none',
+      })}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && 'opacity-50 web:pointer-events-none',
+          buttonVariants({ variant, size, className }),
+        )}
+        ref={ref}
+        role="button"
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

package/components/ui/card.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Text, TextProps, View, ViewProps } from 'react-native';
+import { TextClassContext } from '~/components/ui/text';
+import { cn } from '~/lib/utils';
+
+function Card({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return (
+    <View
+      className={cn('rounded-lg border border-border bg-card', className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return (
+    <View
+      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: TextProps & {
+  ref?: React.RefObject<Text>;
+}) {
+  return (
+    <Text
+      role="heading"
+      aria-level={3}
+      className={cn(
+        'text-2xl text-card-foreground font-semibold leading-none tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: TextProps & {
+  ref?: React.RefObject<Text>;
+}) {
+  return (
+    <Text
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return (
+    <TextClassContext.Provider value="text-card-foreground">
+      <View className={cn('p-6 pt-0', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: ViewProps & {
+  ref?: React.RefObject<View>;
+}) {
+  return (
+    <View
+      className={cn('flex flex-row items-center p-6 pt-0', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};