linked-data-browser 0.0.0 → 0.0.2

package/components/ui/table.tsx

@@ -0,0 +1,132 @@
+import * as TablePrimitive from '@rn-primitives/table';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from '../ui/text';
+
+function Table({
+  className,
+  ...props
+}: TablePrimitive.RootProps & {
+  ref?: React.RefObject<TablePrimitive.RootRef>;
+}) {
+  return (
+    <TablePrimitive.Root
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function TableHeader({
+  className,
+  ...props
+}: TablePrimitive.HeaderProps & {
+  ref?: React.RefObject<TablePrimitive.HeaderRef>;
+}) {
+  return (
+    <TablePrimitive.Header
+      className={cn('border-border [&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({
+  className,
+  style,
+  ...props
+}: TablePrimitive.BodyProps & {
+  ref?: React.RefObject<TablePrimitive.BodyRef>;
+}) {
+  return (
+    <TablePrimitive.Body
+      className={cn(
+        'flex-1 border-border [&_tr:last-child]:border-0',
+        className,
+      )}
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={[{ minHeight: 2 }, style]}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({
+  className,
+  ...props
+}: TablePrimitive.FooterProps & {
+  ref?: React.RefObject<TablePrimitive.FooterRef>;
+}) {
+  return (
+    <TablePrimitive.Footer
+      className={cn(
+        'bg-muted/50 font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({
+  className,
+  ...props
+}: TablePrimitive.RowProps & {
+  ref?: React.RefObject<TablePrimitive.RowRef>;
+}) {
+  return (
+    <TablePrimitive.Row
+      className={cn(
+        'flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({
+  className,
+  ...props
+}: TablePrimitive.HeadProps & {
+  ref?: React.RefObject<TablePrimitive.HeadRef>;
+}) {
+  return (
+    <TextClassContext.Provider value="text-muted-foreground">
+      <TablePrimitive.Head
+        className={cn(
+          'h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+function TableCell({
+  className,
+  ...props
+}: TablePrimitive.CellProps & {
+  ref?: React.RefObject<TablePrimitive.CellRef>;
+}) {
+  return (
+    <TablePrimitive.Cell
+      className={cn(
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};

package/components/ui/tabs.tsx

@@ -0,0 +1,70 @@
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from '../ui/text';
+
+const Tabs = TabsPrimitive.Root;
+
+function TabsList({
+  className,
+  ...props
+}: TabsPrimitive.ListProps & {
+  ref?: React.RefObject<TabsPrimitive.ListRef>;
+}) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        'web:inline-flex h-10 native:h-12 items-center justify-center rounded-md bg-muted p-1 native:px-1.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: TabsPrimitive.TriggerProps & {
+  ref?: React.RefObject<TabsPrimitive.TriggerRef>;
+}) {
+  const { value } = TabsPrimitive.useRootContext();
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm native:text-base font-medium text-muted-foreground web:transition-all',
+        value === props.value && 'text-foreground',
+      )}
+    >
+      <TabsPrimitive.Trigger
+        className={cn(
+          'inline-flex items-center justify-center shadow-none web:whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.disabled && 'web:pointer-events-none opacity-50',
+          props.value === value &&
+            'bg-background shadow-lg shadow-foreground/10',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: TabsPrimitive.ContentProps & {
+  ref?: React.RefObject<TabsPrimitive.ContentRef>;
+}) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(
+        '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',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/components/ui/text.tsx

@@ -1,7 +1,7 @@
 import * as Slot from '@rn-primitives/slot';
 import * as React from 'react';
 import { Text as RNText } from 'react-native';
-import { cn } from '~/lib/utils';
+import { cn } from '../../lib/utils';
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 

package/components/ui/textarea.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+function Textarea({
+  className,
+  multiline = true,
+  numberOfLines = 4,
+  placeholderClassName,
+  ...props
+}: TextInputProps & {
+  ref?: React.RefObject<TextInput>;
+}) {
+  return (
+    <TextInput
+      className={cn(
+        'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.editable === false && 'opacity-50 web:cursor-not-allowed',
+        className,
+      )}
+      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+      multiline={multiline}
+      numberOfLines={numberOfLines}
+      textAlignVertical="top"
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/components/ui/toggle-group.tsx

@@ -0,0 +1,100 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { toggleTextVariants, toggleVariants } from '../ui/toggle';
+import { TextClassContext } from '../ui/text';
+import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
+import { cn } from '../../lib/utils';
+
+const ToggleGroupContext = React.createContext<VariantProps<
+  typeof toggleVariants
+> | null>(null);
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ToggleGroupPrimitive.RootProps &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.RefObject<ToggleGroupPrimitive.RootRef>;
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      className={cn(
+        'flex flex-row items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (context === null) {
+    throw new Error(
+      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component',
+    );
+  }
+  return context;
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ToggleGroupPrimitive.ItemProps &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.RefObject<ToggleGroupPrimitive.ItemRef>;
+  }) {
+  const context = useToggleGroupContext();
+  const { value } = ToggleGroupPrimitive.useRootContext();
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        toggleTextVariants({ variant, size }),
+        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
+          ? 'text-accent-foreground'
+          : 'web:group-hover:text-muted-foreground',
+      )}
+    >
+      <ToggleGroupPrimitive.Item
+        className={cn(
+          toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+          }),
+          props.disabled && 'web:pointer-events-none opacity-50',
+          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) &&
+            'bg-accent',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Item>
+    </TextClassContext.Provider>
+  );
+}
+
+function ToggleGroupIcon({
+  className,
+  icon: Icon,
+  ...props
+}: React.ComponentPropsWithoutRef<LucideIcon> & {
+  icon: LucideIcon;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  return <Icon className={cn(textClass, className)} {...props} />;
+}
+
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/components/ui/toggle.tsx

@@ -0,0 +1,96 @@
+import * as TogglePrimitive from '@rn-primitives/toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from '../ui/text';
+
+const toggleVariants = cva(
+  'web:group web:inline-flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:hover:bg-muted active:bg-muted web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent web:hover:bg-accent active:bg-accent active:bg-accent',
+      },
+      size: {
+        default: 'h-10 px-3 native:h-12 native:px-[12]',
+        sm: 'h-9 px-2.5 native:h-10 native:px-[9]',
+        lg: 'h-11 px-5 native:h-14 native:px-6',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const toggleTextVariants = cva(
+  'text-sm native:text-base text-foreground font-medium',
+  {
+    variants: {
+      variant: {
+        default: '',
+        outline:
+          'web:group-hover:text-accent-foreground web:group-active:text-accent-foreground',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.RootProps &
+  VariantProps<typeof toggleVariants> &
+  VariantProps<typeof toggleVariants> & {
+    ref?: React.RefObject<TogglePrimitive.RootRef>;
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        toggleTextVariants({ variant, size }),
+        props.pressed
+          ? 'text-accent-foreground'
+          : 'web:group-hover:text-muted-foreground',
+        className,
+      )}
+    >
+      <TogglePrimitive.Root
+        className={cn(
+          toggleVariants({ variant, size }),
+          props.disabled && 'web:pointer-events-none opacity-50',
+          props.pressed && 'bg-accent',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+function ToggleIcon({
+  className,
+  icon: Icon,
+  ...props
+}: React.ComponentPropsWithoutRef<LucideIcon> & {
+  icon: LucideIcon;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  return <Icon className={cn(textClass, className)} {...props} />;
+}
+
+export { Toggle, ToggleIcon, toggleTextVariants, toggleVariants };

package/components/ui/tooltip.tsx

@@ -2,8 +2,8 @@ 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';
+import { TextClassContext } from '../../components/ui/text';
+import { cn } from '../../lib/utils';
 
 const Tooltip = TooltipPrimitive.Root;
 

package/components/ui/typography.tsx

@@ -0,0 +1,157 @@
+import * as Slot from '@rn-primitives/slot';
+import * as React from 'react';
+import { Platform, Text as RNText } from 'react-native';
+import { cn } from '../../lib/utils';
+
+type TypographyProps = React.ComponentProps<typeof RNText> & {
+  ref?: React.RefObject<RNText>;
+  asChild?: boolean;
+};
+
+function H1({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role="heading"
+      aria-level="1"
+      className={cn(
+        'web:scroll-m-20 text-4xl text-foreground font-extrabold tracking-tight lg:text-5xl web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function H2({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role="heading"
+      aria-level="2"
+      className={cn(
+        'web:scroll-m-20 border-b border-border pb-2 text-3xl text-foreground font-semibold tracking-tight first:mt-0 web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function H3({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role="heading"
+      aria-level="3"
+      className={cn(
+        'web:scroll-m-20 text-2xl text-foreground font-semibold tracking-tight web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function H4({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      role="heading"
+      aria-level="4"
+      className={cn(
+        'web:scroll-m-20 text-xl text-foreground font-semibold tracking-tight web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function P({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-base text-foreground web:select-text', className)}
+      {...props}
+    />
+  );
+}
+
+function BlockQuote({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      // @ts-ignore - role of blockquote renders blockquote element on the web
+      role={Platform.OS === 'web' ? 'blockquote' : undefined}
+      className={cn(
+        'mt-6 native:mt-4 border-l-2 border-border pl-6 native:pl-3 text-base text-foreground italic web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Code({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      // @ts-ignore - role of code renders code element on the web
+      role={Platform.OS === 'web' ? 'code' : undefined}
+      className={cn(
+        'relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] text-sm text-foreground font-semibold web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Lead({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-xl text-muted-foreground web:select-text', className)}
+      {...props}
+    />
+  );
+}
+
+function Large({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn(
+        'text-xl text-foreground font-semibold web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Small({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn(
+        'text-sm text-foreground font-medium leading-none web:select-text',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Muted({ className, asChild = false, ...props }: TypographyProps) {
+  const Component = asChild ? Slot.Text : RNText;
+  return (
+    <Component
+      className={cn('text-sm text-muted-foreground web:select-text', className)}
+      {...props}
+    />
+  );
+}
+
+export { BlockQuote, Code, H1, H2, H3, H4, Large, Lead, Muted, P, Small };

package/components.json

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

package/infra/hosts

@@ -0,0 +1,2 @@
+[web]
+34.66.140.216 ansible_user=jackson

package/infra/hosts.example

@@ -0,0 +1,2 @@
+[web]
+your-server-ip ansible_user=ubuntu

package/infra/nginx.conf.j2

@@ -0,0 +1,12 @@
+server {
+  listen 80;
+  server_name {{ domain }};
+  location / {
+    proxy_pass http://localhost:3000;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection 'upgrade';
+    proxy_set_header Host $host;
+    proxy_cache_bypass $http_upgrade;
+  }
+}