linked-data-browser 0.0.0

package/components/ui/popover.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { cn } from '~/lib/utils';
+import { TextClassContext } from '~/components/ui/text';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: PopoverPrimitive.ContentProps & {
+  ref?: React.RefObject<PopoverPrimitive.ContentRef>;
+  portalHost?: string;
+}) {
+  return (
+    <PopoverPrimitive.Portal hostName={portalHost}>
+      <PopoverPrimitive.Overlay
+        style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      >
+        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
+          <TextClassContext.Provider value="text-popover-foreground">
+            <PopoverPrimitive.Content
+              align={align}
+              sideOffset={sideOffset}
+              className={cn(
+                'z-50 w-72 rounded-md web:cursor-auto border border-border bg-popover p-4 shadow-md shadow-foreground/5 web:outline-none web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2 web:animate-in web:zoom-in-95 web:fade-in-0',
+                className,
+              )}
+              {...props}
+            />
+          </TextClassContext.Provider>
+        </Animated.View>
+      </PopoverPrimitive.Overlay>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export { Popover, PopoverContent, PopoverTrigger };

package/components/ui/progress.tsx

@@ -0,0 +1,79 @@
+import * as ProgressPrimitive from '@rn-primitives/progress';
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { cn } from '~/lib/utils';
+
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: ProgressPrimitive.RootProps & {
+  ref?: React.RefObject<ProgressPrimitive.RootRef>;
+  indicatorClassName?: string;
+}) {
+  return (
+    <ProgressPrimitive.Root
+      className={cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        className,
+      )}
+      {...props}
+    >
+      <Indicator value={value} className={indicatorClassName} />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };
+
+function Indicator({
+  value,
+  className,
+}: {
+  value: number | undefined | null;
+  className?: string;
+}) {
+  const progress = useDerivedValue(() => value ?? 0);
+
+  const indicator = useAnimatedStyle(() => {
+    return {
+      width: withSpring(
+        `${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`,
+        { overshootClamping: true },
+      ),
+    };
+  });
+
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        className={cn(
+          'h-full w-full flex-1 bg-primary web:transition-all',
+          className,
+        )}
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      >
+        <ProgressPrimitive.Indicator
+          className={cn('h-full w-full', className)}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <ProgressPrimitive.Indicator asChild>
+      <Animated.View
+        style={indicator}
+        className={cn('h-full bg-foreground', className)}
+      />
+    </ProgressPrimitive.Indicator>
+  );
+}

package/components/ui/radio-group.tsx

@@ -0,0 +1,59 @@
+import React, { PropsWithChildren } from 'react';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import { View } from 'react-native';
+import { cn } from '~/lib/utils';
+import { Label } from './label';
+
+function RadioGroup({
+  className,
+  ...props
+}: RadioGroupPrimitive.RootProps & {
+  ref?: React.RefObject<RadioGroupPrimitive.RootRef>;
+}) {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('web:grid gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: RadioGroupPrimitive.ItemProps & {
+  ref?: React.RefObject<RadioGroupPrimitive.ItemRef>;
+}) {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full justify-center items-center border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <View className="aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+function RadioGroupItemWithLabel({
+  value,
+  children,
+}: PropsWithChildren<{
+  value: string;
+}>) {
+  return (
+    <View className={'flex-row gap-2 items-center'}>
+      <RadioGroupItem aria-labelledby={`label-for-${value}`} value={value} />
+      <Label nativeID={`label-for-${value}`} className="flex flex-row gap-1">
+        {children}
+      </Label>
+    </View>
+  );
+}
+
+export { RadioGroup, RadioGroupItem, RadioGroupItemWithLabel };

package/components/ui/separator.tsx

@@ -0,0 +1,27 @@
+import * as SeparatorPrimitive from '@rn-primitives/separator';
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: SeparatorPrimitive.RootProps & {
+  ref?: React.RefObject<SeparatorPrimitive.RootRef>;
+}) {
+  return (
+    <SeparatorPrimitive.Root
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/components/ui/switch.tsx

@@ -0,0 +1,105 @@
+import * as SwitchPrimitives from '@rn-primitives/switch';
+import * as React from 'react';
+import { Platform } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '~/lib/utils';
+import { useThemeChange } from '../ThemeProvider';
+
+function SwitchWeb({
+  className,
+  ...props
+}: SwitchPrimitives.RootProps & {
+  ref?: React.RefObject<SwitchPrimitives.RootRef>;
+}) {
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        'peer flex-row h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed',
+        props.checked ? 'bg-primary' : 'bg-input',
+        props.disabled && 'opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-md shadow-foreground/5 ring-0 transition-transform',
+          props.checked ? 'translate-x-5' : 'translate-x-0',
+        )}
+      />
+    </SwitchPrimitives.Root>
+  );
+}
+
+const RGB_COLORS = {
+  light: {
+    primary: 'rgb(24, 24, 27)',
+    input: 'rgb(228, 228, 231)',
+  },
+  dark: {
+    primary: 'rgb(250, 250, 250)',
+    input: 'rgb(39, 39, 42)',
+  },
+} as const;
+
+function SwitchNative({
+  className,
+  ...props
+}: SwitchPrimitives.RootProps & {
+  ref?: React.RefObject<SwitchPrimitives.RootRef>;
+}) {
+  const { colorScheme } = useThemeChange();
+  const translateX = useDerivedValue(() => (props.checked ? 18 : 0));
+  const animatedRootStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        translateX.value,
+        [0, 18],
+        [RGB_COLORS[colorScheme].input, RGB_COLORS[colorScheme].primary],
+      ),
+    };
+  });
+  const animatedThumbStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: withTiming(translateX.value, { duration: 200 }) },
+    ],
+  }));
+  return (
+    <Animated.View
+      style={animatedRootStyle}
+      className={cn(
+        'h-8 w-[46px] rounded-full',
+        props.disabled && 'opacity-50',
+      )}
+    >
+      <SwitchPrimitives.Root
+        className={cn(
+          'flex-row h-8 w-[46px] shrink-0 items-center rounded-full border-2 border-transparent',
+          props.checked ? 'bg-primary' : 'bg-input',
+          className,
+        )}
+        {...props}
+      >
+        <Animated.View style={animatedThumbStyle}>
+          <SwitchPrimitives.Thumb
+            className={
+              'h-7 w-7 rounded-full bg-background shadow-md shadow-foreground/25 ring-0'
+            }
+          />
+        </Animated.View>
+      </SwitchPrimitives.Root>
+    </Animated.View>
+  );
+}
+
+const Switch = Platform.select({
+  web: SwitchWeb,
+  default: SwitchNative,
+});
+
+export { Switch };

package/components/ui/text.tsx

@@ -0,0 +1,30 @@
+import * as Slot from '@rn-primitives/slot';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+import { cn } from '~/lib/utils';
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<typeof RNText> & {
+  ref?: React.RefObject<RNText>;
+  asChild?: boolean;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn(
+        'text-base text-foreground web:select-text',
+        textClass,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext };

package/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { TextClassContext } from '~/components/ui/text';
+import { cn } from '~/lib/utils';
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: TooltipPrimitive.ContentProps & {
+  ref?: React.RefObject<TooltipPrimitive.ContentRef>;
+  portalHost?: string;
+}) {
+  return (
+    <TooltipPrimitive.Portal hostName={portalHost}>
+      <TooltipPrimitive.Overlay
+        style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      >
+        <Animated.View
+          entering={Platform.select({ web: undefined, default: FadeIn })}
+          exiting={Platform.select({ web: undefined, default: FadeOut })}
+        >
+          <TextClassContext.Provider value="text-sm native:text-base text-popover-foreground">
+            <TooltipPrimitive.Content
+              sideOffset={sideOffset}
+              className={cn(
+                'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className,
+              )}
+              {...props}
+            />
+          </TextClassContext.Provider>
+        </Animated.View>
+      </TooltipPrimitive.Overlay>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipTrigger };

package/components.json

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

package/global.css

@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+  }
+
+  .dark:root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  /* IE/Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari, Opera */
+}

package/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { registerRootComponent } from 'expo';
+import { Screen } from './app/index';
+
+// https://docs.expo.dev/router/reference/troubleshooting/#expo_router_app_root-not-defined
+
+// Must be exported or Fast Refresh won't update the context
+export function App() {
+  return <Screen />;
+}
+
+registerRootComponent(App);

package/lib/android-navigation-bar.ts

@@ -0,0 +1,11 @@
+import * as NavigationBar from 'expo-navigation-bar';
+import { Platform } from 'react-native';
+import { NAV_THEME } from '~/lib/constants';
+
+export async function setAndroidNavigationBar(theme: 'light' | 'dark') {
+  if (Platform.OS !== 'android') return;
+  await NavigationBar.setButtonStyleAsync(theme === 'dark' ? 'light' : 'dark');
+  await NavigationBar.setBackgroundColorAsync(
+    theme === 'dark' ? NAV_THEME.dark.background : NAV_THEME.light.background,
+  );
+}

package/lib/constants.ts

@@ -0,0 +1,18 @@
+export const NAV_THEME = {
+  light: {
+    background: 'hsl(0 0% 100%)', // background
+    border: 'hsl(240 5.9% 90%)', // border
+    card: 'hsl(0 0% 100%)', // card
+    notification: 'hsl(0 84.2% 60.2%)', // destructive
+    primary: 'hsl(240 5.9% 10%)', // primary
+    text: 'hsl(240 10% 3.9%)', // foreground
+  },
+  dark: {
+    background: 'hsl(240 10% 3.9%)', // background
+    border: 'hsl(240 3.7% 15.9%)', // border
+    card: 'hsl(240 10% 3.9%)', // card
+    notification: 'hsl(0 72% 51%)', // destructive
+    primary: 'hsl(0 0% 98%)', // primary
+    text: 'hsl(0 0% 98%)', // foreground
+  },
+};

package/lib/icons/ArrowRight.tsx

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

package/lib/icons/Check.tsx

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

package/lib/icons/ChevronDown.tsx

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

package/lib/icons/ChevronRight.tsx

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

package/lib/icons/ChevronUp.tsx

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

package/lib/icons/ChevronsRight.tsx

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

package/lib/icons/CircleSlash.tsx

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

package/lib/icons/CircleX.tsx

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

package/lib/icons/Code.tsx

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

package/lib/icons/EllipsisVertical.tsx

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

package/lib/icons/EyeOff.tsx

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

package/lib/icons/File.tsx

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

package/lib/icons/Folder.tsx

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

package/lib/icons/Folders.tsx

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

package/lib/icons/Info.tsx

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

package/lib/icons/MonitorSmartphone.tsx

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

package/lib/icons/MoonStar.tsx

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

package/lib/icons/OctagonX.tsx

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

package/lib/icons/RefreshCw.tsx

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

package/lib/icons/ShieldX.tsx

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

package/lib/icons/Sun.tsx

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

package/lib/icons/TextCursorInput.tsx

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

package/lib/icons/Trash.tsx

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

package/lib/icons/ViewIcon.tsx

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

package/lib/icons/X.tsx

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