linked-data-browser 0.0.6 → 0.0.8-alpha.0

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 { SolidProfileShapeShapeType } from '../../../.ldo/profile.shapeTypes';
+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';
 
@@ -16,12 +16,12 @@ export const AgentInformation: FunctionComponent<AgentInformationProps> = ({
 }) => {
   const { session } = useSolidAuth();
   useResource(webId);
-  const agentProfile = useSubject(SolidProfileShapeShapeType, webId);
+  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,7 +31,19 @@ export const AgentInformation: FunctionComponent<AgentInformationProps> = ({
           {webId}
         </Text>
       </View>
-      {accessoryRight && <View>{accessoryRight}</View>}
+      {accessoryRight}
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 16,
+    flex: 1,
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 1,
+  },
+});

package/components/sharing/agentPermissions/AgentInput.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { useTheme } from '@react-navigation/native';
 import { FunctionComponent } from 'react';
 import { Pressable } from 'react-native';
 import { useLinkQuery, useSolidAuth } from '@ldo/solid-react';
-import { SolidProfileShapeShapeType } from '../../../.ldo/profile.shapeTypes';
+import { SolidProfileShapeType } from '../../../.ldo/profile.shapeTypes';
 import { AgentInformation } from './AgentInformation';
 import { InputDropdown } from '../../ui/input-dropdown';
 import { useContactFilter } from './useContactFilter';
-import { Plus } from '../../../lib/icons/Plus';
+import { Plus } from 'lucide-react-native';
 
 interface AgentInputProps {
   onAddAgent: (webId: string) => void;
@@ -19,9 +21,14 @@ const ContactDropdownItem: FunctionComponent<{
   webId: string;
   onSelect: (webId: string) => void;
 }> = ({ webId, onSelect }) => {
+  const { colors } = useTheme();
   return (
     <Pressable
-      className="p-2 border-b border-border last:border-b-0 hover:bg-accent active:bg-accent cursor-pointer"
+      style={({ hovered }) => [
+        styles.dropdownItem,
+        { borderBottomColor: colors.border },
+        hovered && { backgroundColor: colors.border },
+      ]}
       onPress={() => onSelect(webId)}
     >
       <AgentInformation webId={webId} />
@@ -46,7 +53,7 @@ export const AgentInput: FunctionComponent<AgentInputProps> = ({
 
   // Get current user's profile to access their "knows" list
   const currentUserProfile = useLinkQuery(
-    SolidProfileShapeShapeType,
+    SolidProfileShapeType,
     session.webId!,
     session.webId!,
     friendsLinkQuery,
@@ -115,12 +122,20 @@ export const AgentInput: FunctionComponent<AgentInputProps> = ({
       renderItem={renderContactItem}
       filterItems={filterContacts}
       buttonRight={{
-        iconRight: <Plus />,
+        iconRight: Plus,
         onPress: handleInputSubmit,
         variant: 'secondary',
       }}
       onItemSelect={handleContactSelect}
-      className={className}
+      style={className ? { zIndex: 999 } : undefined}
     />
   );
 };
+
+const styles = StyleSheet.create({
+  dropdownItem: {
+    padding: 8,
+    borderBottomWidth: 1,
+    // hover and active states handled by Pressable
+  },
+});

package/components/sharing/agentPermissions/AgentPermissionRow.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import { AccessModeList } from '@ldo/connected-solid';
-import { Text } from '../../ui/text';
 import { FunctionComponent } from 'react';
 import { AgentInformation } from './AgentInformation';
 import { AccessDropdown } from '../AccessDropdown';
 import { View } from 'react-native';
 import { Button } from '../../ui/button';
-import { Trash } from '../../../lib/icons/Trash';
+import { Trash } from 'lucide-react-native';
 
 interface AgentPermissionRowProps {
   webId: string;
@@ -20,17 +20,35 @@ export const AgentPermissionRow: FunctionComponent<AgentPermissionRowProps> = ({
   onChange,
 }) => {
   return (
-    <View className="flex-row justify-between align-center">
+    <View style={styles.container}>
       <AgentInformation webId={webId} />
-      <View className="flex-row">
+      <View style={styles.rightSection}>
         <Button
           variant="ghost"
           onPress={() => onChange(undefined)}
-          className="w-10"
-          iconLeft={<Trash size={14} />}
+          style={styles.deleteButton}
+          iconLeft={Trash}
+          textStyle={styles.deleteButtonText}
         />
         <AccessDropdown value={value} onChange={onChange} />
       </View>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  rightSection: {
+    flexDirection: 'row',
+  },
+  deleteButton: {
+    width: 40,
+  },
+  deleteButtonText: {
+    fontSize: 14,
+  },
+});

package/components/ui/accordion.tsx

@@ -12,7 +12,7 @@ import Animated, {
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
+import { ChevronDown } from 'lucide-react-native';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from '../../components/ui/text';
 

package/components/ui/alert.tsx

@@ -1,48 +1,34 @@
 import { useTheme } from '@react-navigation/native';
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { LucideIcon } from 'lucide-react-native';
 import * as React from 'react';
-import { View, type ViewProps } from 'react-native';
-import { cn } from '../../lib/utils';
+import { View, type ViewProps, StyleSheet } from 'react-native';
 import { Text } from '../../components/ui/text';
 
-const alertVariants = cva(
-  'relative bg-background w-full rounded-lg border border-border p-4 shadow shadow-foreground/10',
-  {
-    variants: {
-      variant: {
-        default: '',
-        destructive: 'border-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
+type AlertVariant = 'default' | 'destructive';
+
+interface AlertProps extends ViewProps {
+  ref?: React.RefObject<View>;
+  icon: LucideIcon;
+  iconSize?: number;
+  variant?: AlertVariant;
+}
 
 function Alert({
-  className,
-  variant,
+  style,
+  variant = 'default',
   children,
   icon: Icon,
   iconSize = 16,
   ...props
-}: ViewProps &
-  VariantProps<typeof alertVariants> & {
-    ref?: React.RefObject<View>;
-    icon: LucideIcon;
-    iconSize?: number;
-    iconClassName?: string;
-  }) {
+}: AlertProps) {
   const { colors } = useTheme();
   return (
     <View
       role="alert"
-      className={alertVariants({ variant, className })}
+      style={StyleSheet.flatten([styles.base, styles[variant], style])}
       {...props}
     >
-      <View className="absolute left-3.5 top-4 -translate-y-0.5">
+      <View style={styles.icon}>
         <Icon
           size={iconSize}
           color={variant === 'destructive' ? colors.notification : colors.text}
@@ -53,31 +39,61 @@ function Alert({
   );
 }
 
-function AlertTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof Text>) {
-  return (
-    <Text
-      className={cn(
-        'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
-        className,
-      )}
-      {...props}
-    />
-  );
+function AlertTitle({ style, ...props }: React.ComponentProps<typeof Text>) {
+  return <Text style={StyleSheet.flatten([styles.title, style])} {...props} />;
 }
 
 function AlertDescription({
-  className,
+  style,
   ...props
 }: React.ComponentProps<typeof Text>) {
   return (
-    <Text
-      className={cn('pl-7 text-sm leading-relaxed text-foreground', className)}
-      {...props}
-    />
+    <Text style={StyleSheet.flatten([styles.description, style])} {...props} />
   );
 }
 
+const styles = StyleSheet.create({
+  base: {
+    position: 'relative',
+    backgroundColor: 'hsl(var(--background))',
+    width: '100%',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'hsl(var(--border))',
+    padding: 16,
+    shadowColor: 'hsl(var(--foreground))',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  default: {
+    // no additional styles
+  },
+  destructive: {
+    borderColor: 'hsl(var(--destructive))',
+  },
+  icon: {
+    position: 'absolute',
+    left: 14,
+    top: 16,
+    transform: [{ translateY: -2 }],
+  },
+  title: {
+    paddingLeft: 28,
+    marginBottom: 4,
+    fontWeight: '500',
+    fontSize: 16,
+    lineHeight: 16,
+    letterSpacing: -0.025,
+    color: 'hsl(var(--foreground))',
+  },
+  description: {
+    paddingLeft: 28,
+    fontSize: 14,
+    lineHeight: 20,
+    color: 'hsl(var(--foreground))',
+  },
+});
+
 export { Alert, AlertDescription, AlertTitle };

package/components/ui/avatar.tsx

@@ -1,53 +1,78 @@
+import { useTheme } from '@react-navigation/native';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { StyleSheet } from 'react-native';
 
 function Avatar({
-  className,
+  style,
   ...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,
-      )}
+      style={StyleSheet.flatten([styles.avatar, style])}
       {...props}
     />
   );
 }
 
 function AvatarImage({
-  className,
+  style,
   ...props
 }: AvatarPrimitive.ImageProps & {
   ref?: React.RefObject<AvatarPrimitive.ImageRef>;
 }) {
   return (
     <AvatarPrimitive.Image
-      className={cn('aspect-square h-full w-full', className)}
+      style={StyleSheet.flatten([styles.image, style])}
       {...props}
     />
   );
 }
 
 function AvatarFallback({
-  className,
+  style,
   ...props
 }: AvatarPrimitive.FallbackProps & {
   ref?: React.RefObject<AvatarPrimitive.FallbackRef>;
 }) {
+  const { colors } = useTheme();
   return (
     <AvatarPrimitive.Fallback
-      className={cn(
-        'flex h-full w-full items-center justify-center rounded-full bg-muted',
-        className,
-      )}
+      style={StyleSheet.flatten([
+        styles.fallback,
+        { backgroundColor: colors.border },
+        style,
+      ])}
       {...props}
     />
   );
 }
 
+const styles = StyleSheet.create({
+  avatar: {
+    position: 'relative',
+    flexDirection: 'row',
+    height: 40,
+    width: 40,
+    flexShrink: 0,
+    overflow: 'hidden',
+    borderRadius: 20,
+  },
+  image: {
+    aspectRatio: 1,
+    height: '100%',
+    width: '100%',
+  },
+  fallback: {
+    flexDirection: 'row',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 20,
+  },
+});
+
 export { Avatar, AvatarFallback, AvatarImage };

package/components/ui/badge.tsx

@@ -1,59 +1,74 @@
 import React from 'react';
 import * as Slot from '@rn-primitives/slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { View, ViewProps } from 'react-native';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from '../ui/text';
-
-const badgeVariants = cva(
-  'web:inline-flex items-center rounded-full border border-border px-2.5 py-0.5 web:transition-colors web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary web:hover:opacity-80 active:opacity-80',
-        secondary:
-          'border-transparent bg-secondary web:hover:opacity-80 active:opacity-80',
-        destructive:
-          'border-transparent bg-destructive web:hover:opacity-80 active:opacity-80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const badgeTextVariants = cva('text-xs font-semibold ', {
-  variants: {
-    variant: {
-      default: 'text-primary-foreground',
-      secondary: 'text-secondary-foreground',
-      destructive: 'text-destructive-foreground',
-      outline: 'text-foreground',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
+import { View, ViewProps, StyleSheet } from 'react-native';
+import { TextStyleContext } from '../ui/text';
+
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
 
 type BadgeProps = ViewProps & {
   asChild?: boolean;
-} & VariantProps<typeof badgeVariants>;
+  variant?: BadgeVariant;
+};
 
-function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+function Badge({ style, variant = 'default', asChild, ...props }: BadgeProps) {
   const Component = asChild ? Slot.View : View;
+
+  const badgeStyle = StyleSheet.flatten([styles.base, styles[variant], style]);
+
+  const textStyle = StyleSheet.flatten([textStyles.base, textStyles[variant]]);
+
   return (
-    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
-      <Component
-        className={cn(badgeVariants({ variant }), className)}
-        {...props}
-      />
-    </TextClassContext.Provider>
+    <TextStyleContext.Provider value={{ style: textStyle }}>
+      <Component style={badgeStyle} {...props} />
+    </TextStyleContext.Provider>
   );
 }
 
-export { Badge, badgeTextVariants, badgeVariants };
-export type { BadgeProps };
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 2,
+  },
+  default: {
+    borderColor: 'transparent',
+    backgroundColor: 'hsl(var(--primary))',
+  },
+  secondary: {
+    borderColor: 'transparent',
+    backgroundColor: 'hsl(var(--secondary))',
+  },
+  destructive: {
+    borderColor: 'transparent',
+    backgroundColor: 'hsl(var(--destructive))',
+  },
+  outline: {
+    borderColor: 'hsl(var(--border))',
+    backgroundColor: 'transparent',
+  },
+});
+
+const textStyles = StyleSheet.create({
+  base: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  default: {
+    color: 'hsl(var(--primary-foreground))',
+  },
+  secondary: {
+    color: 'hsl(var(--secondary-foreground))',
+  },
+  destructive: {
+    color: 'hsl(var(--destructive-foreground))',
+  },
+  outline: {
+    color: 'hsl(var(--foreground))',
+  },
+});
+
+export { Badge };
+export type { BadgeProps, BadgeVariant };