linked-data-browser 0.0.0 → 0.0.1

package/app/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DataBrowser } from '~/components/DataBrowser';
-import { Text } from '~/components/ui/text';
-import { RawCodeConfig } from '~/resourceViews/RawCode/RawCodeConfig';
-import { ContainerConfig } from '~/resourceViews/Container/ContainerConfig';
+import { DataBrowser } from '../components/DataBrowser';
+import { Text } from '../components/ui/text';
+import { RawCodeConfig } from '../resourceViews/RawCode/RawCodeConfig';
+import { ContainerConfig } from '../resourceViews/Container/ContainerConfig';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { StatusBar } from 'react-native';
 

package/components/DataBrowser.tsx

@@ -7,7 +7,7 @@ import { TargetResourceProvider } from './TargetResourceProvider';
 import { ResourceViewConfig } from './ResourceView';
 import { NotifierWrapper } from 'react-native-notifier';
 import { Platform } from 'react-native';
-import { ThemeProvider } from '~/components/ThemeProvider';
+import { ThemeProvider } from './ThemeProvider';
 
 export interface DataBrowserConfig {
   views: ResourceViewConfig[];

package/components/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import '~/global.css';
+import '../global.css';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {
   FunctionComponent,
@@ -16,9 +16,9 @@ import {
   DefaultTheme,
   Theme,
 } from '@react-navigation/native';
-import { NAV_THEME } from '~/lib/constants';
+import { NAV_THEME } from '../lib/constants';
 import { useColorScheme } from 'nativewind';
-import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
+import { setAndroidNavigationBar } from '../lib/android-navigation-bar';
 
 const COLOR_SCHEME_KEY = 'colorScheme';
 

package/components/nav/DialogProvider.tsx

@@ -14,9 +14,9 @@ import {
   DialogTitle,
   DialogDescription,
   DialogClose,
-} from '~/components/ui/dialog';
+} from '../ui/dialog';
 import { TextInput, View } from 'react-native';
-import { Button } from '~/components/ui/button';
+import { Button } from '../ui/button';
 import { Text } from '../ui/text';
 
 type DialogOptions =

package/components/nav/Layout.tsx

@@ -7,11 +7,11 @@ import React, {
 import { useTargetResource } from '../TargetResourceProvider';
 import { ResourceViewConfig } from '../ResourceView';
 import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
-import { TextCursorInput } from '~/lib/icons/TextCursorInput';
-import { CircleSlash } from '~/lib/icons/CircleSlash';
-import { OctagonX } from '~/lib/icons/OctagonX';
-import { ShieldX } from '~/lib/icons/ShieldX';
-import { CircleX } from '~/lib/icons/CircleX';
+import { TextCursorInput } from '../../lib/icons/TextCursorInput';
+import { CircleSlash } from '../../lib/icons/CircleSlash';
+import { OctagonX } from '../../lib/icons/OctagonX';
+import { ShieldX } from '../../lib/icons/ShieldX';
+import { CircleX } from '../../lib/icons/CircleX';
 import { Header } from './header/Header';
 import { View } from 'react-native';
 import { useValidView, ValidViewProvider } from './useValidView';

package/components/nav/header/AddressBox.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useMemo } from 'react';
 import { FunctionComponent, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { Input } from '~/components/ui/input';
-import { ChevronRight } from '~/lib/icons/ChevronRight';
-import { ChevronsRight } from '~/lib/icons/ChevronsRight';
-import { TextCursorInput } from '~/lib/icons/TextCursorInput';
-import { RefreshCw } from '~/lib/icons/RefreshCw';
-import { ArrowRight } from '~/lib/icons/ArrowRight';
-import { Button } from '~/components/ui/button';
+import { Input } from '../../ui/input';
+import { ChevronRight } from '../../../lib/icons/ChevronRight';
+import { ChevronsRight } from '../../../lib/icons/ChevronsRight';
+import { TextCursorInput } from '../../../lib/icons/TextCursorInput';
+import { RefreshCw } from '../../../lib/icons/RefreshCw';
+import { ArrowRight } from '../../../lib/icons/ArrowRight';
+import { Button } from '../../../components/ui/button';
 import { Text } from '../../ui/text';
 import { useTargetResource } from '../../TargetResourceProvider';
 

package/components/nav/header/Header.tsx

@@ -7,7 +7,7 @@ import { AddressBox } from './AddressBox';
 import { AvatarMenu } from './AvatarMenu';
 import { SignInMenu } from './SignInMenu';
 import { ViewMenu } from './ViewMenu';
-import { Card } from '~/components/ui/card';
+import { Card } from '../../../components/ui/card';
 
 export const Header: FunctionComponent = () => {
   const { session } = useSolidAuth();

package/components/nav/header/SignInMenu.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 
 import { Button } from '../../ui/button';
 import { Text } from '../../ui/text';
-import { EllipsisVertical } from '~/lib/icons/EllipsisVertical';
+import { EllipsisVertical } from '../../../lib/icons/EllipsisVertical';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -12,7 +12,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu';
+} from '../../ui/dropdown-menu';
 import { ThemeToggleMenu } from './ThemeToggleMenu';
 import {
   Dialog,
@@ -23,7 +23,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '~/components/ui/dialog';
+} from '../../ui/dialog';
 import { Input } from '../../ui/input';
 
 const DEFAULT_ISSUER = 'http://localhost:3000';

package/components/nav/header/ThemeToggleMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FunctionComponent } from 'react';
-import { MoonStar } from '~/lib/icons/MoonStar';
-import { Sun } from '~/lib/icons/Sun';
+import { MoonStar } from '../../../lib/icons/MoonStar';
+import { Sun } from '../../../lib/icons/Sun';
 import { Text } from '../../ui/text';
 import { Switch } from '../../ui/switch';
 import { DropdownMenuItem } from '../../ui/dropdown-menu';

package/components/nav/header/ViewMenu.tsx

@@ -7,14 +7,14 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-} from '~/components/ui/navigation-menu';
+} from '../../ui/navigation-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 { cn } from '../../../lib/utils';
+import { ViewIcon } from '../../../lib/icons/ViewIcon';
 import { useValidView } from '../useValidView';
-import { ResourceViewConfig } from '~/components/ResourceView';
+import { ResourceViewConfig } from '../../../components/ResourceView';
 
 export const ViewMenu: FunctionComponent = () => {
   const insets = useSafeAreaInsets();

package/components/nav/useValidView.tsx

@@ -3,7 +3,7 @@ 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 { EyeOff } from '../../lib/icons/EyeOff';
 import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
 
 export const [ValidViewProvider, useValidView] = createContainer(() => {

package/components/ui/accordion.tsx

@@ -0,0 +1,151 @@
+import * as AccordionPrimitive from '@rn-primitives/accordion';
+import * as React from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  FadeIn,
+  FadeOutUp,
+  LayoutAnimationConfig,
+  LinearTransition,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { ChevronDown } from '../../lib/icons/ChevronDown';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from '../../components/ui/text';
+
+function Accordion({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.RootProps, 'asChild'> & {
+  ref?: React.RefObject<AccordionPrimitive.RootRef>;
+}) {
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <AccordionPrimitive.Root
+        {...(props as AccordionPrimitive.RootProps)}
+        asChild={Platform.OS !== 'web'}
+      >
+        <Animated.View layout={LinearTransition.duration(200)}>
+          {children}
+        </Animated.View>
+      </AccordionPrimitive.Root>
+    </LayoutAnimationConfig>
+  );
+}
+
+function AccordionItem({
+  className,
+  value,
+  ...props
+}: AccordionPrimitive.ItemProps & {
+  ref?: React.RefObject<AccordionPrimitive.ItemRef>;
+}) {
+  return (
+    <Animated.View
+      className={'overflow-hidden'}
+      layout={LinearTransition.duration(200)}
+    >
+      <AccordionPrimitive.Item
+        className={cn('border-b border-border', className)}
+        value={value}
+        {...props}
+      />
+    </Animated.View>
+  );
+}
+
+const Trigger = Platform.OS === 'web' ? View : Pressable;
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.TriggerProps & {
+  children?: React.ReactNode;
+  ref?: React.RefObject<AccordionPrimitive.TriggerRef>;
+}) {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+
+  const progress = useDerivedValue(() =>
+    isExpanded
+      ? withTiming(1, { duration: 250 })
+      : withTiming(0, { duration: 200 }),
+  );
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
+  }));
+
+  return (
+    <TextClassContext.Provider value="native:text-lg font-medium web:group-hover:underline">
+      <AccordionPrimitive.Header className="flex">
+        <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,
+            )}
+          >
+            {children}
+            <Animated.View style={chevronStyle}>
+              <ChevronDown size={18} className={'text-foreground shrink-0'} />
+            </Animated.View>
+          </Trigger>
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    </TextClassContext.Provider>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.ContentProps & {
+  ref?: React.RefObject<AccordionPrimitive.ContentRef>;
+}) {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  return (
+    <TextClassContext.Provider value="native:text-lg">
+      <AccordionPrimitive.Content
+        className={cn(
+          'overflow-hidden text-sm web:transition-all',
+          isExpanded
+            ? 'web:animate-accordion-down'
+            : 'web:animate-accordion-up',
+        )}
+        {...props}
+      >
+        <InnerContent className={cn('pb-4', className)}>
+          {children}
+        </InnerContent>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  );
+}
+
+function InnerContent({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  if (Platform.OS === 'web') {
+    return <View className={cn('pb-4', className)}>{children}</View>;
+  }
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOutUp.duration(200)}
+      className={cn('pb-4', className)}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/components/ui/alert.tsx

@@ -0,0 +1,83 @@
+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 { 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',
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  children,
+  icon: Icon,
+  iconSize = 16,
+  ...props
+}: ViewProps &
+  VariantProps<typeof alertVariants> & {
+    ref?: React.RefObject<View>;
+    icon: LucideIcon;
+    iconSize?: number;
+    iconClassName?: string;
+  }) {
+  const { colors } = useTheme();
+  return (
+    <View
+      role="alert"
+      className={alertVariants({ variant, className })}
+      {...props}
+    >
+      <View className="absolute left-3.5 top-4 -translate-y-0.5">
+        <Icon
+          size={iconSize}
+          color={variant === 'destructive' ? colors.notification : colors.text}
+        />
+      </View>
+      {children}
+    </View>
+  );
+}
+
+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 AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text>) {
+  return (
+    <Text
+      className={cn('pl-7 text-sm leading-relaxed text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle };

package/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@rn-primitives/aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/components/ui/avatar.tsx

@@ -1,6 +1,6 @@
 import * as AvatarPrimitive from '@rn-primitives/avatar';
 import * as React from 'react';
-import { cn } from '~/lib/utils';
+import { cn } from '../../lib/utils';
 
 function Avatar({
   className,

package/components/ui/badge.tsx

@@ -0,0 +1,59 @@
+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',
+  },
+});
+
+type BadgeProps = ViewProps & {
+  asChild?: boolean;
+} & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
+      <Component
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };

package/components/ui/button.tsx

@@ -1,8 +1,8 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { Pressable } from 'react-native';
-import { TextClassContext } from '~/components/ui/text';
-import { cn } from '~/lib/utils';
+import { TextClassContext } from '../ui/text';
+import { cn } from '../../lib/utils';
 
 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',

package/components/ui/card.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Text, TextProps, View, ViewProps } from 'react-native';
-import { TextClassContext } from '~/components/ui/text';
-import { cn } from '~/lib/utils';
+import { TextClassContext } from '../ui/text';
+import { cn } from '../../lib/utils';
 
 function Card({
   className,

package/components/ui/checkbox.tsx

@@ -0,0 +1,35 @@
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { Check } from '../../lib/icons/Check';
+import { cn } from '../../lib/utils';
+
+function Checkbox({
+  className,
+  ...props
+}: CheckboxPrimitive.RootProps & {
+  ref?: React.RefObject<CheckboxPrimitive.RootRef>;
+}) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        props.checked && 'bg-primary',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn('items-center justify-center h-full w-full')}
+      >
+        <Check
+          size={12}
+          strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5}
+          className="text-primary-foreground"
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@rn-primitives/collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };