linked-data-browser 0.0.7 → 0.0.8-alpha.1

package/resourceViews/Container/ContainerView.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useCallback } from 'react';
-import { View, FlatList, TouchableWithoutFeedback } from 'react-native';
+import { View, FlatList, StyleSheet, Pressable } from 'react-native';
 import { Text } from '../../components/ui/text';
 import { Button } from '../../components/ui/button';
 import {
@@ -9,12 +9,12 @@ import {
   DropdownMenuItem,
 } from '../../components/ui/dropdown-menu';
 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 { CircleX } from 'lucide-react-native';
+import { Folder } from 'lucide-react-native';
+import { Code } from 'lucide-react-native';
+import { File } from 'lucide-react-native';
+import { Trash } from 'lucide-react-native';
+import { Plus } from 'lucide-react-native';
 import { Separator } from '../../components/ui/separator';
 import { useDialog } from '../../components/nav/DialogProvider';
 import {
@@ -24,10 +24,13 @@ import {
 } from '@ldo/connected-solid';
 import { Notifier } from 'react-native-notifier';
 import { useViewContext } from '../../components/useViewContext';
+import { useTheme } from '@react-navigation/native';
+import { Icon } from '../../components/ui/icon';
 
 export const ContainerView: FunctionComponent = () => {
   const { targetResource, navigateTo } = useViewContext();
   const { prompt } = useDialog();
+  const { colors } = useTheme();
 
   const onCreateContainer = useCallback(async () => {
     if (targetResource?.type !== 'SolidContainer') return;
@@ -83,12 +86,12 @@ export const ContainerView: FunctionComponent = () => {
   }
 
   return (
-    <View className="flex-1 flex-row">
+    <View style={styles.mainContainer}>
       {/* Left Panel */}
-      <View className="max-w-[200px] flex-1 p-4">
+      <View style={styles.leftPanel}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button text='Create' iconLeft={<Plus />} />
+            <Button text="Create" iconLeft={Plus} />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem onPress={onCreateContainer}>
@@ -105,12 +108,12 @@ export const ContainerView: FunctionComponent = () => {
       </View>
 
       {/* Right Panel */}
-      <View className="flex-[3] py-4 pr-4">
+      <View style={styles.rightPanel}>
         <FlatList
           data={targetResource.children()}
           keyExtractor={(item) => item.uri}
           renderItem={({ item, index }) => {
-            const Icon =
+            const TypeIcon =
               item.type === 'SolidContainer'
                 ? Folder
                 : item.uri.endsWith('.ttl')
@@ -119,23 +122,25 @@ export const ContainerView: FunctionComponent = () => {
             return (
               <>
                 {index === 0 && <Separator />}
-                <TouchableWithoutFeedback onPress={() => navigateTo(item.uri)}>
-                  <View className="flex flex-row p-4 hover:bg-secondary rounded-sm cursor-pointer justify-between">
-                    <Text className="flex flex-row gap-3">
-                      <Icon />
-                      {item.uri.replace(targetResource.uri, '')}
-                    </Text>
+                <Pressable
+                  onPress={() => navigateTo(item.uri)}
+                  style={({ hovered }) => ({
+                    backgroundColor: hovered ? colors.border : undefined,
+                  })}
+                >
+                  <View style={styles.listItem}>
+                    <View style={styles.listItemText}>
+                      <Icon icon={TypeIcon} />
+                      <Text>{item.uri.replace(targetResource.uri, '')}</Text>
+                    </View>
                     <Button
                       variant="ghost"
-                      className="h-6 p-0"
+                      style={styles.deleteButton}
                       onPress={() => onDelete(item)}
-                    >
-                      <Text>
-                        <Trash size={20} />
-                      </Text>
-                    </Button>
+                      iconLeft={Trash}
+                    />
                   </View>
-                </TouchableWithoutFeedback>
+                </Pressable>
                 <Separator />
               </>
             );
@@ -145,3 +150,36 @@ export const ContainerView: FunctionComponent = () => {
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  leftPanel: {
+    maxWidth: 200,
+    flex: 1,
+    padding: 16,
+  },
+  rightPanel: {
+    flex: 3,
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingRight: 16,
+  },
+  listItem: {
+    flexDirection: 'row',
+    padding: 16,
+    borderRadius: 4,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  listItemText: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  deleteButton: {
+    height: 24,
+    padding: 0,
+  },
+});

package/resourceViews/Profile/ProfileConfig.tsx

@@ -1,6 +1,6 @@
 import { SolidProfileShapeType } from '../../.ldo/profile.shapeTypes';
 import { ResourceViewConfig } from '../../components/ResourceView';
-import { User } from '../../lib/icons/User';
+import { User } from 'lucide-react-native';
 import { ProfileView } from './ProfileView';
 
 export const ProfileConfig: ResourceViewConfig = {

package/resourceViews/Profile/ProfileKnows.tsx

@@ -1,19 +1,22 @@
 import { Input } from '../../components/ui/input';
 import React, { FunctionComponent, useCallback, useState } from 'react';
-import { Plus } from '../../lib/icons/Plus';
+import { Plus } from 'lucide-react-native';
 import { SolidProfile } from '../../.ldo/profile.typings';
 import { AgentInformation } from '../../components/sharing/agentPermissions/AgentInformation';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useChangeSetData } from '@ldo/react';
 import { SolidLeaf } from '@ldo/connected-solid';
 import { Button } from '../../components/ui/button';
-import { Trash } from '../../lib/icons/Trash';
+import { Trash } from 'lucide-react-native';
 import { ConnectedPlugin } from '@ldo/connected';
 
 export interface ProfileKnowsProps {
   resource: SolidLeaf;
   profile: SolidProfile;
-  setProfile: useChangeSetData<SolidProfile, ConnectedPlugin<any, any, any, any, any>[]>;
+  setProfile: useChangeSetData<
+    SolidProfile,
+    ConnectedPlugin<any, any, any, any, any>[]
+  >;
 }
 
 export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
@@ -21,8 +24,6 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
   profile,
   setProfile,
 }) => {
-  console.log(profile.knows?.size);
-
   const [newContact, setNewContact] = useState('');
   const addNewContact = useCallback(() => {
     setProfile(resource, (cProfile) => {
@@ -32,12 +33,12 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
   }, [newContact, resource, setProfile]);
 
   return (
-    <View className="gap-4">
+    <View style={styles.container}>
       <Input
         placeholder="https://example.pod/john/profile/card#me"
         label="New Contact WebId"
         buttonRight={{
-          iconRight: <Plus />,
+          iconRight: Plus,
           onPress: addNewContact,
           variant: 'secondary',
         }}
@@ -47,11 +48,12 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
       />
       {profile.knows?.map((friend) => (
         <AgentInformation
+          key={friend['@id']}
           webId={friend['@id']}
           accessoryRight={
             <Button
               variant="ghost"
-              iconRight={<Trash />}
+              iconRight={Trash}
               onPress={() => {
                 setProfile(resource, (cProfile) => {
                   cProfile.knows?.delete(friend);
@@ -64,3 +66,9 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 16, // gap-4 equivalent (4 * 4px = 16px)
+  },
+});

package/resourceViews/Profile/ProfileView.tsx

@@ -1,4 +1,4 @@
-import { ScrollView, View } from 'react-native';
+import { ScrollView, View, StyleSheet } from 'react-native';
 import { Text } from '../../components/ui/text';
 import React, { FunctionComponent } from 'react';
 import { Input } from '../../components/ui/input';
@@ -26,8 +26,8 @@ export const ProfileView: FunctionComponent = () => {
     return <></>;
 
   return (
-    <ScrollView contentContainerClassName="flex-row justify-center p-4">
-      <View className="max-w-[600px] flex-1 padding gap-4">
+    <ScrollView contentContainerStyle={styles.scrollContainer}>
+      <View style={styles.container}>
         <Text variant="h1">Profile</Text>
         <Input
           placeholder="John Doe"
@@ -49,7 +49,7 @@ export const ProfileView: FunctionComponent = () => {
         <Button
           disabled={!transactionDataset.hasChanges()}
           text="Update Profile"
-          className="self-end"
+          style={styles.updateButton}
           onPress={commitProfile}
           isLoading={profileResource.isLoading()}
         />
@@ -57,3 +57,20 @@ export const ProfileView: FunctionComponent = () => {
     </ScrollView>
   );
 };
+
+const styles = StyleSheet.create({
+  scrollContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  container: {
+    maxWidth: 600,
+    flex: 1,
+    padding: 16,
+    gap: 16,
+  },
+  updateButton: {
+    alignSelf: 'flex-end',
+  },
+});

package/resourceViews/RawCode/RawCodeConfig.tsx

@@ -1,5 +1,5 @@
+import { Code } from 'lucide-react-native';
 import { ResourceViewConfig } from '../../components/ResourceView';
-import { Code } from '../../lib/icons/Code';
 import { RawCodeView } from './RawCodeView';
 
 export const RawCodeConfig: ResourceViewConfig = {

package/resourceViews/RawCode/RawCodeView.tsx

@@ -6,16 +6,17 @@ import React, {
   useState,
 } from 'react';
 import { RawCodeEditor } from './RawCodeEditor';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Button } from '../../components/ui/button';
-import { Text } from '../../components/ui/text';
 import { Notifier } from 'react-native-notifier';
 import { useViewContext } from '../../components/useViewContext';
 import { LoadingBar } from '../../components/common/LoadingBar';
-import { Save } from "../../lib/icons/Save";
+import { Save } from 'lucide-react-native';
+import { useTheme } from '@react-navigation/native';
 
 export const RawCodeView: FunctionComponent = () => {
   const { fetch } = useSolidAuth();
+  const { colors } = useTheme();
   const [content, setContent] = useState<string>('');
   const [contentType, setContentType] = useState<string>('');
   const [didEdit, setDidEdit] = useState(false);
@@ -71,7 +72,7 @@ export const RawCodeView: FunctionComponent = () => {
   }, [fetchContent]);
 
   return (
-    <View className="flex-1 relative">
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <LoadingBar isLoading={isFetching || isSaving} />
       <RawCodeEditor
         value={content}
@@ -81,13 +82,26 @@ export const RawCodeView: FunctionComponent = () => {
         }}
       />
       <Button
-        className="absolute bottom-2 right-2 z-10"
+        style={styles.saveButton}
         onPress={submitChanges}
         text="Save Changes"
-        iconLeft={<Save />}
+        iconLeft={Save}
         isLoading={isSaving}
         disabled={!didEdit || isSaving}
       />
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  saveButton: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    zIndex: 10,
+  },
+});

package/components.json

@@ -1,7 +0,0 @@
-{
-  "aliases": {
-    "components": "./components",
-    "lib": "./lib",
-    "resourceViews": "./resourceViews"
-  }
-}

package/lib/icons/ArrowRight.tsx

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

package/lib/icons/Check.tsx

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

package/lib/icons/ChevronDown.tsx

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

package/lib/icons/ChevronRight.tsx

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

package/lib/icons/ChevronUp.tsx

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

package/lib/icons/ChevronsRight.tsx

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

package/lib/icons/CircleSlash.tsx

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

package/lib/icons/CircleX.tsx

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

package/lib/icons/Code.tsx

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

package/lib/icons/EllipsisVertical.tsx

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

package/lib/icons/EyeOff.tsx

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

package/lib/icons/File.tsx

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

package/lib/icons/Fingerprint.tsx

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

package/lib/icons/Folder.tsx

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

package/lib/icons/Folders.tsx

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

package/lib/icons/Info.tsx

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

package/lib/icons/Link.tsx

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

package/lib/icons/Loader.tsx

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

package/lib/icons/LogOut.tsx

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

package/lib/icons/MonitorSmartphone.tsx

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

package/lib/icons/MoonStar.tsx

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

package/lib/icons/OctagonX.tsx

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

package/lib/icons/Plus.tsx

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

package/lib/icons/RefreshCw.tsx

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

package/lib/icons/Save.tsx

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

package/lib/icons/ShieldX.tsx

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

package/lib/icons/Sun.tsx

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

package/lib/icons/TextCursorInput.tsx

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

package/lib/icons/Trash.tsx

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

package/lib/icons/User.tsx

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

package/lib/icons/UserPlus.tsx

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

package/lib/icons/Users.tsx

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

package/lib/icons/ViewIcon.tsx

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

package/lib/icons/X.tsx

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

package/lib/icons/iconWithClassName.ts

@@ -1,14 +0,0 @@
-import type { LucideIcon } from 'lucide-react-native';
-import { cssInterop } from 'nativewind';
-
-export function iconWithClassName(icon: LucideIcon) {
-  cssInterop(icon, {
-    className: {
-      target: 'style',
-      nativeStyleToProp: {
-        color: true,
-        opacity: true,
-      },
-    },
-  });
-}

package/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/nativewind-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="nativewind/types" />