linked-data-browser 0.0.2 → 0.0.4

package/components/ui/button.tsx

@@ -1,8 +1,11 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-import { Pressable } from 'react-native';
-import { TextClassContext } from '../ui/text';
+import { Pressable, View } from 'react-native';
+import { Text, TextClassContext } from '../ui/text';
 import { cn } from '../../lib/utils';
+import { LucideIcon } from 'lucide-react-native';
+import { CircleSnail } from 'react-native-progress';
+import { useTheme } from '@react-navigation/native';
 
 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',
@@ -60,9 +63,32 @@ const buttonTextVariants = cva(
 );
 
 type ButtonProps = React.ComponentProps<typeof Pressable> &
-  VariantProps<typeof buttonVariants>;
+  VariantProps<typeof buttonVariants> & {
+    iconLeft?: React.ReactElement;
+    iconRight?: React.ReactElement;
+    isLoading?: boolean;
+    text?: string;
+  };
+
+function Button({
+  ref,
+  className,
+  variant,
+  size,
+  children,
+  iconLeft,
+  iconRight,
+  isLoading,
+  text,
+  ...props
+}: ButtonProps) {
+  const theme = useTheme();
+
+  const loadColor =
+    !variant || variant === 'default'
+      ? theme.colors.background
+      : theme.colors.primary;
 
-function Button({ ref, className, variant, size, ...props }: ButtonProps) {
   return (
     <TextClassContext.Provider
       value={buttonTextVariants({
@@ -73,13 +99,34 @@ function Button({ ref, className, variant, size, ...props }: ButtonProps) {
     >
       <Pressable
         className={cn(
+          'justify-between flex-row gap-2 items-center',
           props.disabled && 'opacity-50 web:pointer-events-none',
           buttonVariants({ variant, size, className }),
         )}
         ref={ref}
         role="button"
         {...props}
-      />
+      >
+        {isLoading ? (
+          <View>
+            <CircleSnail size={20} color={loadColor} />
+          </View>
+        ) : iconLeft ? (
+          <Text>
+            {React.cloneElement(iconLeft, {
+              size: (iconLeft.props as any).size || 16,
+            } as any)}
+          </Text>
+        ) : undefined}
+        {text ? <Text>{text}</Text> : (children as React.ReactNode)}
+        {iconRight ? (
+          <Text>
+            {React.cloneElement(iconRight, {
+              size: (iconRight.props as any).size || 16,
+            } as any)}
+          </Text>
+        ) : undefined}
+      </Pressable>
     </TextClassContext.Provider>
   );
 }

package/components/ui/dialog.tsx

@@ -82,7 +82,7 @@ function DialogContent({
       <DialogOverlay>
         <DialogPrimitive.Content
           className={cn(
-            'max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
+            'max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg overflow-hidden',
             open
               ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
               : 'web:animate-out web:fade-out-0 web:zoom-out-95',

package/components/ui/input-dropdown.tsx

@@ -0,0 +1,105 @@
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  useRef,
+  useEffect,
+  ReactNode,
+} from 'react';
+import { View, type TextInputProps } from 'react-native';
+import { Input } from './input';
+import { Card } from './card';
+import { ButtonProps } from './button';
+import { LoadingBar } from '../common/LoadingBar';
+import { cn } from 'lib/utils';
+
+interface InputDropdownProps<T> extends TextInputProps {
+  onChangeText: (text: string) => void;
+  items: T[];
+  renderItem: (item: T, onSelect: (item: T) => void) => ReactNode;
+  filterItems: (items: T[], searchText: string) => T[];
+  onItemSelect?: (item: T) => void;
+  buttonRight?: ButtonProps;
+  isLoading?: boolean;
+}
+
+export function InputDropdown<T>({
+  items,
+  renderItem,
+  filterItems,
+  onItemSelect,
+  buttonRight,
+  onChangeText,
+  onFocus,
+  value,
+  isLoading,
+  className,
+  ...inputProps
+}: InputDropdownProps<T>) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const inputRef = useRef<any>(null);
+
+  const filteredItems = useMemo(() => {
+    return filterItems(items, value || '');
+  }, [items, value, filterItems]);
+
+  const handleInputChange = useCallback(
+    (text: string) => {
+      onChangeText(text);
+      setIsDropdownOpen(true);
+    },
+    [onChangeText],
+  );
+
+  const handleInputFocus = useCallback(
+    (event: any) => {
+      setIsDropdownOpen(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+
+  const handleItemSelect = useCallback(
+    (item: T) => {
+      onItemSelect?.(item);
+      setIsDropdownOpen(false);
+    },
+    [onItemSelect],
+  );
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isDropdownOpen]);
+
+  return (
+    <View className={cn('relative', className)} ref={inputRef}>
+      <Input
+        {...inputProps}
+        onChangeText={handleInputChange}
+        onFocus={handleInputFocus}
+        buttonRight={buttonRight}
+      />
+
+      {isDropdownOpen && (filteredItems.length > 0 || isLoading) && (
+        <Card className="absolute top-full left-0 right-0 mt-1 max-h-60 overflow-y-auto border border-border shadow-lg bg-background">
+          {isLoading && <LoadingBar isLoading={isLoading} />}
+          {filteredItems.map((item, index) => (
+            <View key={index}>{renderItem(item, handleItemSelect)}</View>
+          ))}
+        </Card>
+      )}
+    </View>
+  );
+}

package/components/ui/input.tsx

@@ -1,25 +1,57 @@
 import * as React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { TextInput, View, type TextInputProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { Text } from './text';
+import { Button, ButtonProps } from './button';
 
 function Input({
   className,
   placeholderClassName,
+  label,
+  buttonRight,
   ...props
 }: TextInputProps & {
   ref?: React.RefObject<TextInput>;
+  label?: string;
+  buttonRight?: ButtonProps;
 }) {
-  return (
+  let textInput = (
     <TextInput
       className={cn(
         'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
         props.editable === false && 'opacity-50 web:cursor-not-allowed',
+        buttonRight ? 'rounded-br-none rounded-tr-none' : '',
         className,
       )}
       placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
       {...props}
     />
   );
+
+  if (buttonRight) {
+    textInput = (
+      <View className="flex-row">
+        {textInput}
+        <Button
+          {...buttonRight}
+          className={cn(
+            'rounded-tl-none rounded-bl-none',
+            buttonRight.className,
+          )}
+        />
+      </View>
+    );
+  }
+
+  if (label) {
+    textInput = (
+      <View className="gap-1">
+        <Text variant="label">{label}</Text>
+        {textInput}
+      </View>
+    );
+  }
+  return textInput;
 }
 
 export { Input };

package/components/ui/text.tsx

@@ -5,21 +5,68 @@ import { cn } from '../../lib/utils';
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
+export type TextVariant = 'default' | 'h1' | 'h2' | 'h3' | 'label';
+export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+
 function Text({
   className,
   asChild = false,
+  variant,
+  size,
+  muted,
+  bold,
   ...props
 }: React.ComponentProps<typeof RNText> & {
   ref?: React.RefObject<RNText>;
   asChild?: boolean;
+  variant?: TextVariant;
+  size?: TextSize;
+  muted?: boolean;
+  bold?: boolean;
 }) {
   const textClass = React.useContext(TextClassContext);
   const Component = asChild ? Slot.Text : RNText;
+
+  let isMuted = false;
+  let isBold = false;
+  let textSize: TextSize = 'base';
+
+  if (variant) {
+    switch (variant) {
+      case 'h1':
+        isBold = true;
+        textSize = '3xl';
+        break;
+      case 'h2':
+        isBold = true;
+        textSize = '2xl';
+        break;
+      case 'h3':
+        isBold = true;
+        textSize = 'xl';
+        break;
+      case 'label':
+        isBold = true;
+        textSize = 'sm';
+        break;
+      case 'default':
+      default:
+        break;
+    }
+  }
+
+  if (muted !== undefined) isMuted = muted;
+  if (bold !== undefined) isBold = bold;
+  if (size !== undefined) textSize = size;
+
   return (
     <Component
       className={cn(
         'text-base text-foreground web:select-text',
         textClass,
+        isBold ? 'font-semibold' : '',
+        isMuted ? 'text-muted-foreground' : '',
+        `text-${textSize}`,
         className,
       )}
       {...props}

package/components/useViewContext.tsx

@@ -0,0 +1,141 @@
+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 { OctagonX } from '../lib/icons/OctagonX';
+import { CircleSlash } from '../lib/icons/CircleSlash';
+import { TextCursorInput } from '../lib/icons/TextCursorInput';
+import { ShieldX } from '../lib/icons/ShieldX';
+import { CircleX } from '../lib/icons/CircleX';
+import { Loader } from '../lib/icons/Loader';
+import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
+import { SolidContainer, SolidLeaf } from '@ldo/connected-solid';
+import { LucideIcon } from 'lucide-react-native';
+import { useLdo } from '@ldo/solid-react';
+
+export const [ViewContextProvider, useViewContext] = createContainer(() => {
+  const { targetUri, targetResource, refresh, navigateTo } =
+    useTargetResource();
+  const { views } = useDataBrowserConfig();
+  const { dataset } = useLdo();
+
+  /**
+   * Calculate Valid Views
+   */
+  const validViews = useMemo(() => {
+    if (!targetResource || !targetUri) {
+      return [
+        constructErrorView(
+          'Enter a URI in the address bar to view a resource.',
+          TextCursorInput,
+        ),
+      ];
+    } else if (targetResource.type === 'InvalidIdentifierResource') {
+      return [
+        constructErrorView(
+          `${targetResource.uri} is an invalid URI.`,
+          CircleSlash,
+        ),
+      ];
+    }
+
+    const errorViews = getErrorViews(targetResource);
+    if (errorViews) return errorViews;
+
+    const potentialViews = views.filter((view) =>
+      view.canDisplay(targetUri!, targetResource!, dataset),
+    );
+
+    return potentialViews.length > 0
+      ? potentialViews
+      : [constructErrorView(`No valid view for ${targetUri}`, OctagonX)];
+  }, [targetResource, targetUri, views, dataset]);
+
+  const [curViewConfig, setCurViewConfig] = useState<ResourceViewConfig>(
+    validViews[0],
+  );
+  useEffect(() => {
+    setCurViewConfig(validViews[0]);
+  }, [targetUri, validViews]);
+
+  return {
+    validViews,
+    curViewConfig,
+    setCurViewConfig,
+    targetResource,
+    targetUri,
+    refresh,
+    navigateTo,
+  };
+});
+
+function constructErrorView(
+  message: string,
+  icon: LucideIcon,
+): ResourceViewConfig {
+  return {
+    name: 'noValidView',
+    displayName: 'No Valid View',
+    displayIcon: EyeOff,
+    view: () => <ErrorMessageResourceView icon={icon} message={message} />,
+    canDisplay: () => true,
+  };
+}
+
+function getErrorViews(
+  targetResource: SolidLeaf | SolidContainer,
+): ResourceViewConfig[] | undefined {
+  // Handle Edge cases
+  if (targetResource.status.type === 'unfetched') {
+    return [constructErrorView(`Loading`, Loader)];
+  } else if (targetResource.isAbsent()) {
+    return [
+      constructErrorView(
+        `${targetResource.uri} either doesn't exist or you don't have read access to it.`,
+        CircleSlash,
+      ),
+    ];
+  } else if (targetResource.status.isError) {
+    switch (targetResource.status.type) {
+      case 'noncompliantPodError':
+        return [
+          constructErrorView(
+            `${targetResource.uri} returned a response that is not compliant with the Linked Web Storage specification: ${targetResource.status.message}`,
+            OctagonX,
+          ),
+        ];
+      case 'serverError':
+        return [
+          constructErrorView(
+            `${targetResource.uri} encountered an internal server error: ${targetResource.status.message}`,
+            OctagonX,
+          ),
+        ];
+      case 'unauthenticatedError':
+        return [
+          constructErrorView(
+            `${targetResource.uri} requires you to log in to view.`,
+            ShieldX,
+          ),
+        ];
+      case 'unauthorizedError':
+        return [
+          constructErrorView(
+            `You don't have access to ${targetResource.uri}.`,
+            ShieldX,
+          ),
+        ];
+      case 'unexpectedHttpError':
+      case 'unexpectedResourceError':
+      default:
+        return [
+          constructErrorView(
+            `An unexpected error occurred: ${targetResource.status.message}.`,
+            CircleX,
+          ),
+        ];
+    }
+  }
+}

package/components/{nav/utilityResourceViews → utilityResourceViews}/ErrorMessageResourceView.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
-import { Text } from '../../ui/text';
+import { Text } from '../ui/text';
 import { LucideIcon } from 'lucide-react-native';
-import { Card } from '../../ui/card';
+import { Card } from '../ui/card';
 import { View } from 'react-native';
 
 interface ErrorMessageResourceViewsProps {

package/lib/icons/Fingerprint.tsx

@@ -0,0 +1,4 @@
+import { Fingerprint } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(Fingerprint);
+export { Fingerprint };

package/lib/icons/Link.tsx

@@ -0,0 +1,4 @@
+import { Link } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(Link);
+export { Link };

package/lib/icons/Loader.tsx

@@ -0,0 +1,4 @@
+import { Loader } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(Loader);
+export { Loader };

package/lib/icons/LogOut.tsx

@@ -0,0 +1,4 @@
+import { LogOut } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(LogOut);
+export { LogOut };

package/lib/icons/Plus.tsx

@@ -0,0 +1,4 @@
+import { Plus } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(Plus);
+export { Plus };

package/lib/icons/Save.tsx

@@ -0,0 +1,4 @@
+import { Save } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(Save);
+export { Save };

package/lib/icons/User.tsx

@@ -0,0 +1,4 @@
+import { User } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(User);
+export { User };

package/lib/icons/UserPlus.tsx

@@ -0,0 +1,4 @@
+import { UserPlus } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(UserPlus);
+export { UserPlus };

package/lib/icons/Users.tsx

@@ -0,0 +1,4 @@
+import { Users } from 'lucide-react-native';
+import { iconWithClassName } from './iconWithClassName';
+iconWithClassName(Users);
+export { Users };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "linked-data-browser",
   "main": "index.js",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "scripts": {
     "dev:ios": "expo start -c --ios",
     "dev:web": "concurrently \"npm run solid-server\" \"expo start -c --web\"",
@@ -11,16 +11,18 @@
     "postinstall": "npx tailwindcss -i ./global.css -o ./node_modules/.cache/nativewind/global.css",
     "build:standalone": "expo export -p web --output-dir dist-standalone && node scripts/adjust-standalone-paths.js",
     "build:server": "EXPO_PUBLIC_IS_SERVER_HOSTED=true expo export -p web --output-dir dist-server && node scripts/adjust-server-paths.js",
-    "build:server:watch": "npx chokidar '**/*' -i 'dist-standalone/**' -i 'dist-server/**' -i 'node_modules/**' -c 'npm run build:server'",
+    "build:server:watch": "npx chokidar '**/*' -i 'dist-standalone/**' -i 'dist-server/**' -i 'node_modules/**' -i 'data/**' -c 'npm run build:server'",
     "solid-server": "community-solid-server -c ./test-server/server-config.json -f ./data --seed-config ./test-server/solid-css-seed.json",
     "build:ldo": "ldo build --input .shapes --output .ldo",
     "build": "npm run build:standalone && npm run build:server"
   },
   "dependencies": {
     "@inrupt/solid-client-authn-browser": "^3.0.0",
-    "@ldo/connected-solid": "^1.0.0-alpha.27",
-    "@ldo/ldo": "^1.0.0-alpha.27",
-    "@ldo/solid-react": "^1.0.0-alpha.27",
+    "@ldo/connected": "^1.0.0-alpha.32",
+    "@ldo/connected-solid": "^1.0.0-alpha.32",
+    "@ldo/ldo": "^1.0.0-alpha.32",
+    "@ldo/react": "^1.0.0-alpha.33",
+    "@ldo/solid-react": "^1.0.0-alpha.33",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -67,12 +69,14 @@
     "expo-splash-screen": "~0.30.8",
     "expo-status-bar": "~2.2.3",
     "expo-system-ui": "~5.0.7",
+    "lodash": "^4.17.21",
     "lucide-react-native": "^0.511.0",
     "nativewind": "^4.1.23",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.2",
     "react-native-notifier": "^2.0.0",
+    "react-native-progress": "^5.0.1",
     "react-native-reanimated": "~3.17.5",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-screens": "~4.10.0",
@@ -84,9 +88,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
-    "@ldo/cli": "^1.0.0-alpha.21",
+    "@expo/metro-runtime": "~5.0.4",
+    "@ldo/cli": "^1.0.0-alpha.32",
     "@react-native-community/eslint-config": "^3.2.0",
-    "@solid/community-server": "^7.1.7",
+    "@solid/community-server": "^8.0.0-alpha.0",
     "@types/jsonld": "^1.5.15",
     "@types/react": "~19.0.14",
     "@types/shexj": "^2.1.7",

package/resourceViews/Container/ContainerView.tsx

@@ -8,13 +8,13 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '../../components/ui/dropdown-menu';
-import { useTargetResource } from '../../components/TargetResourceProvider';
-import { ErrorMessageResourceView } from '../../components/nav/utilityResourceViews/ErrorMessageResourceView';
+import { ErrorMessageResourceView } from '../../components/utilityResourceViews/ErrorMessageResourceView';
 import { CircleX } from '../../lib/icons/CircleX';
 import { Folder } from '../../lib/icons/Folder';
 import { Code } from '../../lib/icons/Code';
 import { File } from '../../lib/icons/File';
 import { Trash } from '../../lib/icons/Trash';
+import { Plus } from '../../lib/icons/Plus';
 import { Separator } from '../../components/ui/separator';
 import { useDialog } from '../../components/nav/DialogProvider';
 import {
@@ -23,9 +23,10 @@ import {
   SolidLeaf,
 } from '@ldo/connected-solid';
 import { Notifier } from 'react-native-notifier';
+import { useViewContext } from '../../components/useViewContext';
 
 export const ContainerView: FunctionComponent = () => {
-  const { targetResource, navigateTo } = useTargetResource();
+  const { targetResource, navigateTo } = useViewContext();
   const { prompt } = useDialog();
 
   const onCreateContainer = useCallback(async () => {
@@ -87,9 +88,7 @@ export const ContainerView: FunctionComponent = () => {
       <View className="max-w-[200px] flex-1 p-4">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button>
-              <Text>Create</Text>
-            </Button>
+            <Button text='Create' iconLeft={<Plus />} />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem onPress={onCreateContainer}>

package/resourceViews/Profile/ProfileConfig.tsx

@@ -0,0 +1,20 @@
+import { SolidProfileShapeShapeType } from '.ldo/profile.shapeTypes';
+import { ResourceViewConfig } from '../../components/ResourceView';
+import { User } from '../../lib/icons/User';
+import { ProfileView } from './ProfileView';
+
+export const ProfileConfig: ResourceViewConfig = {
+  name: 'profile',
+  displayName: 'Profile',
+  displayIcon: User,
+  view: ProfileView,
+  canDisplay: (targetUri, targetResource, dataset) => {
+    const profile = dataset
+      .usingType(SolidProfileShapeShapeType)
+      .fromSubject(targetUri);
+
+    return !!profile?.type?.some?.(
+      (val) => val['@id'] === 'Person' || val['@id'] === 'Person2',
+    );
+  },
+};