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

package/components/sharing/agentPermissions/AgentInput.tsx

@@ -1,4 +1,6 @@
 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';
@@ -6,7 +8,7 @@ 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} />
@@ -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

@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from '@rn-primitives/accordion';
 import * as React from 'react';
-import { Platform, Pressable, View } from 'react-native';
+import { Platform, Pressable, View, StyleSheet } from 'react-native';
 import Animated, {
   Extrapolation,
   FadeIn,
@@ -12,9 +12,9 @@ import Animated, {
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from '../../components/ui/text';
+import { ChevronDown } from 'lucide-react-native';
+import { useTheme } from '@react-navigation/native';
+import { TextStyleProvider } from '../../components/ui/text';
 
 function Accordion({
   children,
@@ -37,19 +37,24 @@ function Accordion({
 }
 
 function AccordionItem({
-  className,
+  style,
   value,
   ...props
 }: AccordionPrimitive.ItemProps & {
   ref?: React.RefObject<AccordionPrimitive.ItemRef>;
 }) {
+  const { colors } = useTheme();
   return (
     <Animated.View
-      className={'overflow-hidden'}
+      style={[styles.itemContainer, { overflow: 'hidden' }]}
       layout={LinearTransition.duration(200)}
     >
       <AccordionPrimitive.Item
-        className={cn('border-b border-border', className)}
+        style={StyleSheet.flatten([
+          styles.item,
+          { borderBottomColor: colors.border },
+          style,
+        ])}
         value={value}
         {...props}
       />
@@ -60,13 +65,14 @@ function AccordionItem({
 const Trigger = Platform.OS === 'web' ? View : Pressable;
 
 function AccordionTrigger({
-  className,
+  style,
   children,
   ...props
 }: AccordionPrimitive.TriggerProps & {
   children?: React.ReactNode;
   ref?: React.RefObject<AccordionPrimitive.TriggerRef>;
 }) {
+  const { colors } = useTheme();
   const { isExpanded } = AccordionPrimitive.useItemContext();
 
   const progress = useDerivedValue(() =>
@@ -79,73 +85,111 @@ function AccordionTrigger({
     opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
   }));
 
+  const textStyles = {
+    fontSize: Platform.OS === 'web' ? 16 : 18,
+    fontWeight: '500' as const,
+    color: colors.text,
+  };
+
   return (
-    <TextClassContext.Provider value="native:text-lg font-medium web:group-hover:underline">
-      <AccordionPrimitive.Header className="flex">
+    <TextStyleProvider style={textStyles}>
+      <AccordionPrimitive.Header style={styles.header}>
         <AccordionPrimitive.Trigger {...props} asChild>
           <Trigger
-            className={cn(
-              'flex flex-row web:flex-1 items-center justify-between py-4 web:transition-all group web:focus-visible:outline-none web:focus-visible:ring-1 web:focus-visible:ring-muted-foreground',
-              className,
-            )}
+            style={StyleSheet.flatten([
+              styles.trigger,
+              { flex: Platform.OS === 'web' ? 1 : undefined },
+              style,
+            ])}
           >
             {children}
             <Animated.View style={chevronStyle}>
-              <ChevronDown size={18} className={'text-foreground shrink-0'} />
+              <ChevronDown size={18} color={colors.text} />
             </Animated.View>
           </Trigger>
         </AccordionPrimitive.Trigger>
       </AccordionPrimitive.Header>
-    </TextClassContext.Provider>
+    </TextStyleProvider>
   );
 }
 
 function AccordionContent({
-  className,
+  style,
   children,
   ...props
 }: AccordionPrimitive.ContentProps & {
   ref?: React.RefObject<AccordionPrimitive.ContentRef>;
 }) {
-  const { isExpanded } = AccordionPrimitive.useItemContext();
+  const { colors } = useTheme();
+
+  const textStyles = {
+    fontSize: Platform.OS === 'web' ? 14 : 18,
+    color: colors.text,
+  };
+
   return (
-    <TextClassContext.Provider value="native:text-lg">
+    <TextStyleProvider style={textStyles}>
       <AccordionPrimitive.Content
-        className={cn(
-          'overflow-hidden text-sm web:transition-all',
-          isExpanded
-            ? 'web:animate-accordion-down'
-            : 'web:animate-accordion-up',
-        )}
+        style={StyleSheet.flatten([
+          styles.content,
+          { overflow: 'hidden' },
+          style,
+        ])}
         {...props}
       >
-        <InnerContent className={cn('pb-4', className)}>
-          {children}
-        </InnerContent>
+        <InnerContent style={styles.innerContent}>{children}</InnerContent>
       </AccordionPrimitive.Content>
-    </TextClassContext.Provider>
+    </TextStyleProvider>
   );
 }
 
 function InnerContent({
   children,
-  className,
+  style,
 }: {
   children: React.ReactNode;
-  className?: string;
+  style?: any;
 }) {
   if (Platform.OS === 'web') {
-    return <View className={cn('pb-4', className)}>{children}</View>;
+    return (
+      <View style={StyleSheet.flatten([styles.innerContent, style])}>
+        {children}
+      </View>
+    );
   }
   return (
     <Animated.View
       entering={FadeIn}
       exiting={FadeOutUp.duration(200)}
-      className={cn('pb-4', className)}
+      style={StyleSheet.flatten([styles.innerContent, style])}
     >
       {children}
     </Animated.View>
   );
 }
 
+const styles = StyleSheet.create({
+  itemContainer: {
+    overflow: 'hidden',
+  },
+  item: {
+    borderBottomWidth: 1,
+  },
+  header: {
+    flexDirection: 'row',
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+  },
+  content: {
+    overflow: 'hidden',
+  },
+  innerContent: {
+    paddingBottom: 16,
+  },
+});
+
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/components/ui/alert.tsx

@@ -1,48 +1,42 @@
 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();
+
+  const getAlertStyles = () => {
+    const baseAlertStyles = {
+      backgroundColor: colors.background,
+      borderColor:
+        variant === 'destructive' ? colors.notification : colors.border,
+      shadowColor: colors.text,
+    };
+
+    return StyleSheet.flatten([styles.base, baseAlertStyles, style]);
+  };
+
   return (
-    <View
-      role="alert"
-      className={alertVariants({ variant, className })}
-      {...props}
-    >
-      <View className="absolute left-3.5 top-4 -translate-y-0.5">
+    <View role="alert" style={getAlertStyles()} {...props}>
+      <View style={styles.icon}>
         <Icon
           size={iconSize}
           color={variant === 'destructive' ? colors.notification : colors.text}
@@ -53,31 +47,70 @@ function Alert({
   );
 }
 
-function AlertTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof Text>) {
+function AlertTitle({ style, ...props }: React.ComponentProps<typeof Text>) {
+  const { colors } = useTheme();
   return (
     <Text
-      className={cn(
-        'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
-        className,
-      )}
+      style={StyleSheet.flatten([styles.title, { color: colors.text }, style])}
       {...props}
     />
   );
 }
 
 function AlertDescription({
-  className,
+  style,
   ...props
 }: React.ComponentProps<typeof Text>) {
+  const { colors } = useTheme();
   return (
     <Text
-      className={cn('pl-7 text-sm leading-relaxed text-foreground', className)}
+      style={StyleSheet.flatten([
+        styles.description,
+        { color: colors.text },
+        style,
+      ])}
       {...props}
     />
   );
 }
 
+const styles = StyleSheet.create({
+  base: {
+    position: 'relative',
+    width: '100%',
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 16,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  default: {
+    // no additional styles
+  },
+  destructive: {
+    // border color will be applied dynamically
+  },
+  icon: {
+    position: 'absolute',
+    left: 14,
+    top: 16,
+    transform: [{ translateY: -2 }],
+  },
+  title: {
+    paddingLeft: 28,
+    marginBottom: 4,
+    fontWeight: '500',
+    fontSize: 16,
+    lineHeight: 16,
+    letterSpacing: -0.025,
+  },
+  description: {
+    paddingLeft: 28,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});
+
 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,87 @@
 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 { useTheme } from '@react-navigation/native';
+import { TextStyleProvider } 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 { colors } = useTheme();
   const Component = asChild ? Slot.View : View;
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'default':
+        return { backgroundColor: colors.primary, borderColor: 'transparent' };
+      case 'secondary':
+        return { backgroundColor: colors.border, borderColor: 'transparent' };
+      case 'destructive':
+        return {
+          backgroundColor: colors.notification,
+          borderColor: 'transparent',
+        };
+      case 'outline':
+        return { backgroundColor: 'transparent', borderColor: colors.border };
+      default:
+        return { backgroundColor: colors.primary, borderColor: 'transparent' };
+    }
+  };
+
+  const getTextColor = () => {
+    switch (variant) {
+      case 'default':
+        return colors.background;
+      case 'secondary':
+        return colors.text;
+      case 'destructive':
+        return colors.background;
+      case 'outline':
+        return colors.text;
+      default:
+        return colors.background;
+    }
+  };
+
+  const badgeStyle = StyleSheet.flatten([
+    styles.base,
+    getVariantStyles(),
+    style,
+  ]);
+  const textStyle = StyleSheet.flatten([
+    textStyles.base,
+    { color: getTextColor() },
+  ]);
+
   return (
-    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
-      <Component
-        className={cn(badgeVariants({ variant }), className)}
-        {...props}
-      />
-    </TextClassContext.Provider>
+    <TextStyleProvider style={textStyle}>
+      <Component style={badgeStyle} {...props} />
+    </TextStyleProvider>
   );
 }
 
-export { Badge, badgeTextVariants, badgeVariants };
-export type { BadgeProps };
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 2,
+  },
+});
+
+const textStyles = StyleSheet.create({
+  base: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});
+
+export { Badge };
+export type { BadgeProps, BadgeVariant };