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

package/components/nav/header/SignInMenu.tsx

@@ -1,10 +1,10 @@
 import { useSolidAuth } from '@ldo/solid-react';
 import React, { FunctionComponent, useCallback, useState } from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
 
 import { Button } from '../../ui/button';
 import { Text } from '../../ui/text';
-import { EllipsisVertical } from '../../../lib/icons/EllipsisVertical';
+import { EllipsisVertical } from 'lucide-react-native';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,13 +25,17 @@ import {
   DialogTrigger,
 } from '../../ui/dialog';
 import { Input } from '../../ui/input';
-
-const DEFAULT_ISSUER = window.location.origin;
+import { useDataBrowserConfig } from '../../DataBrowserContext';
 
 export const SignInMenu: FunctionComponent = () => {
   const [idpValue, setIdpValue] = useState('');
   const [, setIdpError] = useState<string | undefined>();
   const { login, signUp } = useSolidAuth();
+  const { width } = useWindowDimensions();
+  const { defaultIssuer } = useDataBrowserConfig();
+
+  // Tailwind sm: breakpoint is 640px
+  const isSmallScreen = width < 640;
   const onIdpSubmit = useCallback(async () => {
     setIdpError(undefined);
     try {
@@ -47,57 +51,62 @@ export const SignInMenu: FunctionComponent = () => {
 
   const renderButtonGroup = () => {
     return (
-      <View className="flex-row">
-        <Button
-          key="signUp"
-          className="hidden sm:block"
-          onPress={() => signUp(DEFAULT_ISSUER)}
-          variant="ghost"
-          text="Sign Up"
-        />
-        <Button
-          key="logIn"
-          className="hidden sm:block"
-          onPress={() => login(DEFAULT_ISSUER)}
-          variant="default"
-          text="Log In"
-        />
+      <View style={styles.buttonGroup}>
+        {!isSmallScreen && (
+          <Button
+            key="signUp"
+            onPress={() => signUp(defaultIssuer)}
+            variant="ghost"
+            text="Sign Up"
+          />
+        )}
+        {!isSmallScreen && (
+          <Button
+            key="logIn"
+            onPress={() => login(defaultIssuer)}
+            variant="default"
+            text="Log In"
+          />
+        )}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
               key="setMemu"
               variant="ghost"
-              className="w-10"
-              iconLeft={<EllipsisVertical size={20} />}
+              style={styles.menuButton}
+              iconLeft={EllipsisVertical}
+              textStyle={styles.menuButtonText}
             />
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-64 native:w-72">
+          <DropdownMenuContent style={styles.dropdownContent}>
             <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>
+              {isSmallScreen && (
+                <DropdownMenuItem
+                  onPress={() => signUp(defaultIssuer)}
+                >
+                  <Text>Sign Up</Text>
+                </DropdownMenuItem>
+              )}
+              {isSmallScreen && (
+                <DropdownMenuItem
+                  onPress={() => login(defaultIssuer)}
+                >
+                  <Text>Log In</Text>
+                </DropdownMenuItem>
+              )}
               <Dialog>
                 <DialogTrigger asChild>
                   <DropdownMenuItem closeOnPress={false}>
                     <Text>Log in with Another Pod</Text>
                   </DropdownMenuItem>
                 </DialogTrigger>
-                <DialogContent className="w-[400px]">
+                <DialogContent style={styles.dialogContent}>
                   <DialogHeader>
                     <DialogTitle>Solid WebId or Identity Provider</DialogTitle>
                     <DialogDescription>
                       <Input
                         value={idpValue}
-                        placeholder={DEFAULT_ISSUER}
+                        placeholder={defaultIssuer}
                         onChangeText={(newText) => setIdpValue(newText)}
                         onSubmitEditing={onIdpSubmit}
                       />
@@ -121,3 +130,21 @@ export const SignInMenu: FunctionComponent = () => {
 
   return renderButtonGroup();
 };
+
+const styles = StyleSheet.create({
+  buttonGroup: {
+    flexDirection: 'row',
+  },
+  menuButton: {
+    width: 40,
+  },
+  dropdownContent: {
+    width: 256,
+  },
+  dialogContent: {
+    width: 400,
+  },
+  menuButtonText: {
+    fontSize: 20,
+  },
+});

package/components/nav/header/ThemeToggleMenu.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import { FunctionComponent } from 'react';
-import { MoonStar } from '../../../lib/icons/MoonStar';
-import { Sun } from '../../../lib/icons/Sun';
+import React, { FunctionComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { MoonStar } from 'lucide-react-native';
+import { Sun } from 'lucide-react-native';
 import { Text } from '../../ui/text';
 import { Switch } from '../../ui/switch';
 import { DropdownMenuItem } from '../../ui/dropdown-menu';
 import { useThemeChange } from '../../ThemeProvider';
+import { Icon } from '../../ui/icon';
 
 export const ThemeToggleMenu: FunctionComponent = () => {
   const { colorScheme, setColorScheme } = useThemeChange();
@@ -15,20 +16,31 @@ export const ThemeToggleMenu: FunctionComponent = () => {
       onPress={() => {
         setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
       }}
-      className="justify-between"
+      style={styles.dropdownMenuItem}
       closeOnPress={false}
     >
-      <Text className="flex flex-row gap-1 items-center">
-        {colorScheme === 'dark' ? <MoonStar /> : <Sun />} Dark Mode
-      </Text>
+      <View style={styles.textContainer}>
+        <Icon icon={colorScheme === 'dark' ? MoonStar : Sun} />
+        <Text>Dark Mode</Text>
+      </View>
 
       <Switch
         checked={colorScheme === 'dark'}
         onCheckedChange={(isDark) => {
           setColorScheme(isDark ? 'dark' : 'light');
         }}
-        nativeID="airplane-mode"
       />
     </DropdownMenuItem>
   );
 };
+
+const styles = StyleSheet.create({
+  dropdownMenuItem: {
+    justifyContent: 'space-between',
+  },
+  textContainer: {
+    flexDirection: 'row',
+    gap: 4,
+    alignItems: 'center',
+  },
+});

package/components/nav/header/ViewMenu.tsx

@@ -1,88 +1,96 @@
 import React, { FunctionComponent } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from '../../ui/navigation-menu';
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-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 { StyleSheet, useWindowDimensions } from 'react-native';
+import { ViewIcon } from 'lucide-react-native';
 import { useViewContext } from '../../useViewContext';
 import { ResourceViewConfig } from '../../../components/ResourceView';
+import { useTheme } from '@react-navigation/native';
+import { Icon } from '../../ui/icon';
+import { Button } from '../../ui/button';
 
 export const ViewMenu: FunctionComponent = () => {
-  const insets = useSafeAreaInsets();
-  const contentInsets = {
-    top: insets.top,
-    bottom: insets.bottom,
-    left: 12,
-    right: 12,
-  };
   const { validViews } = useViewContext();
-
-  const [isOpen, setIsOpen] = React.useState<string>();
+  const { width } = useWindowDimensions();
 
   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>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          iconLeft={ViewIcon}
+          text={width < 640 ? undefined : 'Views'}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        style={StyleSheet.flatten([styles.contentContainer])}
+      >
+        {validViews.map((menuItem) => (
+          <ListItem key={menuItem.name} viewConfig={menuItem}>
+            {menuItem.displayName}
+          </ListItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
 
-const ListItem = React.forwardRef<
-  ViewRef,
-  React.ComponentPropsWithoutRef<typeof View> & {
-    viewConfig: ResourceViewConfig;
-  }
->(({ className, viewConfig, ...props }, ref) => {
-  // TODO: add navigationn to `href` on `NavigationMenuLink` onPress
+const ListItem: React.FC<{
+  viewConfig: ResourceViewConfig;
+  children: React.ReactNode;
+}> = ({ viewConfig, children }) => {
   const { curViewConfig, setCurViewConfig } = useViewContext();
-  const Icon = viewConfig.displayIcon;
+  const { colors } = useTheme();
+  const DisplayIcon = viewConfig.displayIcon;
+
+  const isSelected = curViewConfig.name === viewConfig.name;
+
   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="ml-2" size="sm">
-          {viewConfig.displayName}
-        </Text>
-      </NavigationMenuLink>
-    </View>
+    <DropdownMenuItem
+      style={StyleSheet.flatten([
+        styles.listItem,
+        isSelected && {
+          backgroundColor: colors.border,
+        },
+      ])}
+      onPress={() => setCurViewConfig(viewConfig)}
+    >
+      <Icon icon={DisplayIcon} />
+      <Text>{children}</Text>
+    </DropdownMenuItem>
   );
-});
+};
 ListItem.displayName = 'ListItem';
+
+const styles = StyleSheet.create({
+  triggerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  contentContainer: {
+    gap: 4,
+    padding: 4,
+    flexDirection: 'column' as const,
+    minWidth: 200,
+  },
+  listItem: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    overflow: 'hidden' as const,
+    borderRadius: 2,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  iconStyle: {
+    fontSize: 20,
+  },
+});

package/components/sharing/AccessDropdown.tsx

@@ -13,8 +13,9 @@ import {
 import { Text } from '../ui/text';
 import { Button } from '../ui/button';
 import { Checkbox } from '../ui/checkbox';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
-import { View } from 'react-native';
+import { ChevronDown } from 'lucide-react-native';
+import { StyleSheet } from 'react-native';
+import { Icon } from '../ui/icon';
 
 interface AccessDropdownProps {
   value: AccessModeList;
@@ -53,12 +54,10 @@ export const AccessDropdown: FunctionComponent<AccessDropdownProps> = ({
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" className=" w-[130px] justify-between gap-0">
+      <DropdownMenuTrigger asChild style={styles.button}>
+        <Button variant="outline">
           <Text>{accessDescription}</Text>
-          <Text>
-            <ChevronDown size={14} />
-          </Text>
+          <Icon icon={ChevronDown} style={styles.buttonChevron} />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
@@ -93,3 +92,15 @@ export const AccessDropdown: FunctionComponent<AccessDropdownProps> = ({
     </DropdownMenu>
   );
 };
+
+const styles = StyleSheet.create({
+  button: {
+    display: 'flex',
+    width: 130,
+    justifyContent: 'space-between',
+    gap: 0,
+  },
+  buttonChevron: {
+    fontSize: 14,
+  },
+});

package/components/sharing/CopyLink.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
 import { Button } from '../ui/button';
-import { Text } from '../ui/text';
-import { Link } from '../../lib/icons/Link';
+import { Link } from 'lucide-react-native';
 import { FunctionComponent } from 'react';
 import { useViewContext } from '../useViewContext';
 
@@ -16,6 +16,18 @@ export const CopyLink: FunctionComponent = () => {
   }, [targetUri]);
 
   return (
-    <Button variant="outline" className="flex-row" onPress={onCopy} text={message} iconLeft={<Link />} />
+    <Button
+      variant="outline"
+      style={styles.button}
+      onPress={onCopy}
+      text={message}
+      iconLeft={Link}
+    />
   );
 };
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+  },
+});

package/components/sharing/PermissionRow.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import { AccessModeList } from '@ldo/connected-solid';
 import { Text } from '../ui/text';
 import { FunctionComponent } from 'react';
@@ -21,8 +22,8 @@ export const PermissionRow: FunctionComponent<PermissionRowProps> = ({
   onChange,
 }) => {
   return (
-    <View className="flex-row justify-between items-center">
-      <View className="flex-row gap-4 flex-1 items-center">
+    <View style={styles.container}>
+      <View style={styles.leftSection}>
         <Avatar alt={displayName}>
           <AvatarFallback>
             <Text>
@@ -36,3 +37,17 @@ export const PermissionRow: FunctionComponent<PermissionRowProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  leftSection: {
+    flexDirection: 'row',
+    gap: 16,
+    flex: 1,
+    alignItems: 'center',
+  },
+});

package/components/sharing/SharingModal.tsx

@@ -8,6 +8,8 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { useTheme } from '@react-navigation/native';
 import {
   Dialog,
   DialogContent,
@@ -50,6 +52,7 @@ export const SharingModalProvider: FunctionComponent<PropsWithChildren<{}>> = ({
   children,
 }) => {
   const { targetResource } = useViewContext();
+  const { colors } = useTheme();
   const [isOpen, setIsOpen] = useState(false);
   const [wacResult, setWacResult] = useState<
     | GetWacRuleError<SolidLeaf | SolidContainer>
@@ -62,6 +65,7 @@ export const SharingModalProvider: FunctionComponent<PropsWithChildren<{}>> = ({
     authenticated: { read: false, write: false, append: false, control: false },
     agent: {},
   });
+  const { width, height } = useWindowDimensions();
 
   useEffect(() => {
     if (
@@ -116,17 +120,26 @@ export const SharingModalProvider: FunctionComponent<PropsWithChildren<{}>> = ({
   return (
     <sharingModalContext.Provider value={context}>
       <Dialog open={isOpen} onOpenChange={(value) => setIsOpen(value)}>
-        <DialogContent className="sm:w-[640px] w-[95vw] h-[95vh]">
+        <DialogContent
+          style={{
+            width: width > 640 ? 640 : width * 0.95,
+            height: height * 0.95,
+          }}
+        >
           <LoadingBar isLoading={isLoading} />
           <DialogHeader>
             <DialogTitle>Resource Sharing Preferences</DialogTitle>
           </DialogHeader>
-          <ScrollView className="flex-1 border-border border-b border-t pt-2 pb-2 ml-[-24px] mr-[-24px] pl-6 pr-6">
+          <ScrollView
+            style={[{ borderColor: colors.border }, styles.scrollView]}
+          >
             {(() => {
               if (!wacResult) return <></>;
               if (wacResult.isError) {
                 return (
-                  <Text className="color-red-800">{wacResult.message}</Text>
+                  <Text style={{ color: colors.notification }}>
+                    {wacResult.message}
+                  </Text>
                 );
               }
               return (
@@ -147,3 +160,17 @@ export const SharingModalProvider: FunctionComponent<PropsWithChildren<{}>> = ({
     </sharingModalContext.Provider>
   );
 };
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    paddingTop: 8,
+    paddingBottom: 8,
+    marginLeft: -24,
+    marginRight: -24,
+    paddingLeft: 24,
+    paddingRight: 24,
+  },
+});

package/components/sharing/WacRuleForm.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import { Separator } from '../ui/separator';
 import { FunctionComponent } from 'react';
 import { AgentPermissions } from './agentPermissions/AgentPermissions';
 import { WacRule } from '@ldo/connected-solid';
 import { View } from 'react-native';
 import { PermissionRow } from './PermissionRow';
-import { Users } from '../../lib/icons/Users';
-import { Fingerprint } from '../../lib/icons/Fingerprint';
+import { Users } from 'lucide-react-native';
+import { Fingerprint } from 'lucide-react-native';
 
 interface WacRuleFormProps {
   value: WacRule;
@@ -18,7 +19,7 @@ export const WacRuleForm: FunctionComponent<WacRuleFormProps> = ({
   onChange,
 }) => {
   return (
-    <View className="gap-4 mt-2 mb-2">
+    <View style={styles.container}>
       <PermissionRow
         displayName="Public Access"
         Icon={Users}
@@ -42,3 +43,11 @@ export const WacRuleForm: FunctionComponent<WacRuleFormProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+    marginTop: 8,
+    marginBottom: 8,
+  },
+});

package/components/sharing/agentPermissions/AgentInformation.tsx

@@ -1,7 +1,7 @@
 import { SolidProfileShapeType } from '../../../.ldo/profile.shapeTypes';
 import { useResource, useSolidAuth, useSubject } from '@ldo/solid-react';
 import React, { FunctionComponent, ReactNode } from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { ProfileAvatar } from '../../common/ProfileAvatar';
 import { Text } from '../../ui/text';
 
@@ -19,9 +19,9 @@ export const AgentInformation: FunctionComponent<AgentInformationProps> = ({
   const agentProfile = useSubject(SolidProfileShapeType, webId);
 
   return (
-    <View className="flex-row gap-4 flex-1 items-center">
+    <View style={styles.container}>
       <ProfileAvatar profile={agentProfile} />
-      <View className="flex-1">
+      <View style={styles.textContainer}>
         <Text>
           {agentProfile['@id'] === session.webId
             ? 'You'
@@ -31,6 +31,19 @@ export const AgentInformation: FunctionComponent<AgentInformationProps> = ({
           {webId}
         </Text>
       </View>
+      {accessoryRight}
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 16,
+    flex: 1,
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 1,
+  },
+});