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

package/components/ui/typography.tsx

@@ -1,157 +1,186 @@
 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';
+import { Platform, Text as RNText, StyleSheet } from 'react-native';
 
 type TypographyProps = React.ComponentProps<typeof RNText> & {
   ref?: React.RefObject<RNText>;
   asChild?: boolean;
 };
 
-function H1({ className, asChild = false, ...props }: TypographyProps) {
+function H1({ style, 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,
-      )}
+      style={StyleSheet.flatten([styles.h1, style])}
       {...props}
     />
   );
 }
 
-function H2({ className, asChild = false, ...props }: TypographyProps) {
+function H2({ style, 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,
-      )}
+      style={StyleSheet.flatten([styles.h2, style])}
       {...props}
     />
   );
 }
 
-function H3({ className, asChild = false, ...props }: TypographyProps) {
+function H3({ style, 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,
-      )}
+      style={StyleSheet.flatten([styles.h3, style])}
       {...props}
     />
   );
 }
 
-function H4({ className, asChild = false, ...props }: TypographyProps) {
+function H4({ style, 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,
-      )}
+      style={StyleSheet.flatten([styles.h4, style])}
       {...props}
     />
   );
 }
 
-function P({ className, asChild = false, ...props }: TypographyProps) {
+function P({ style, asChild = false, ...props }: TypographyProps) {
   const Component = asChild ? Slot.Text : RNText;
-  return (
-    <Component
-      className={cn('text-base text-foreground web:select-text', className)}
-      {...props}
-    />
-  );
+  return <Component style={StyleSheet.flatten([styles.p, style])} {...props} />;
 }
 
-function BlockQuote({ className, asChild = false, ...props }: TypographyProps) {
+function BlockQuote({ style, 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,
-      )}
+      style={StyleSheet.flatten([styles.blockquote, style])}
       {...props}
     />
   );
 }
 
-function Code({ className, asChild = false, ...props }: TypographyProps) {
+function Code({ style, 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,
-      )}
+      style={StyleSheet.flatten([styles.code, style])}
       {...props}
     />
   );
 }
 
-function Lead({ className, asChild = false, ...props }: TypographyProps) {
+function Lead({ style, asChild = false, ...props }: TypographyProps) {
   const Component = asChild ? Slot.Text : RNText;
   return (
-    <Component
-      className={cn('text-xl text-muted-foreground web:select-text', className)}
-      {...props}
-    />
+    <Component style={StyleSheet.flatten([styles.lead, style])} {...props} />
   );
 }
 
-function Large({ className, asChild = false, ...props }: TypographyProps) {
+function Large({ style, 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}
-    />
+    <Component style={StyleSheet.flatten([styles.large, style])} {...props} />
   );
 }
 
-function Small({ className, asChild = false, ...props }: TypographyProps) {
+function Small({ style, 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}
-    />
+    <Component style={StyleSheet.flatten([styles.small, style])} {...props} />
   );
 }
 
-function Muted({ className, asChild = false, ...props }: TypographyProps) {
+function Muted({ style, asChild = false, ...props }: TypographyProps) {
   const Component = asChild ? Slot.Text : RNText;
   return (
-    <Component
-      className={cn('text-sm text-muted-foreground web:select-text', className)}
-      {...props}
-    />
+    <Component style={StyleSheet.flatten([styles.muted, style])} {...props} />
   );
 }
 
+const styles = StyleSheet.create({
+  h1: {
+    fontSize: 36,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '800',
+    letterSpacing: -0.025,
+  },
+  h2: {
+    fontSize: 30,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '600',
+    letterSpacing: -0.025,
+    borderBottomWidth: 1,
+    borderBottomColor: 'hsl(var(--border))',
+    paddingBottom: 8,
+  },
+  h3: {
+    fontSize: 24,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '600',
+    letterSpacing: -0.025,
+  },
+  h4: {
+    fontSize: 20,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '600',
+    letterSpacing: -0.025,
+  },
+  p: {
+    fontSize: 16,
+    color: 'hsl(var(--foreground))',
+  },
+  blockquote: {
+    marginTop: 24,
+    borderLeftWidth: 2,
+    borderLeftColor: 'hsl(var(--border))',
+    paddingLeft: 24,
+    fontSize: 16,
+    color: 'hsl(var(--foreground))',
+    fontStyle: 'italic',
+  },
+  code: {
+    borderRadius: 6,
+    backgroundColor: 'hsl(var(--muted))',
+    paddingHorizontal: 4.8,
+    paddingVertical: 3.2,
+    fontSize: 14,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '600',
+  },
+  lead: {
+    fontSize: 20,
+    color: 'hsl(var(--muted-foreground))',
+  },
+  large: {
+    fontSize: 20,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '600',
+  },
+  small: {
+    fontSize: 14,
+    color: 'hsl(var(--foreground))',
+    fontWeight: '500',
+    lineHeight: 14,
+  },
+  muted: {
+    fontSize: 14,
+    color: 'hsl(var(--muted-foreground))',
+  },
+});
+
 export { BlockQuote, Code, H1, H2, H3, H4, Large, Lead, Muted, P, Small };

package/components/useViewContext.tsx

@@ -1,15 +1,15 @@
 import createContainer from 'constate';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useDataBrowserConfig } from './DataBrowser';
+import { useDataBrowserConfig } from './DataBrowserContext';
 import { useTargetResource } from './TargetResourceProvider';
 import { ResourceViewConfig } from './ResourceView';
-import { EyeOff } from '../lib/icons/EyeOff';
-import { OctagonX } from '../lib/icons/OctagonX';
-import { CircleSlash } from '../lib/icons/CircleSlash';
-import { TextCursorInput } from '../lib/icons/TextCursorInput';
-import { ShieldX } from '../lib/icons/ShieldX';
-import { CircleX } from '../lib/icons/CircleX';
-import { Loader } from '../lib/icons/Loader';
+import { EyeOff } from 'lucide-react-native';
+import { OctagonX } from 'lucide-react-native';
+import { CircleSlash } from 'lucide-react-native';
+import { TextCursorInput } from 'lucide-react-native';
+import { ShieldX } from 'lucide-react-native';
+import { CircleX } from 'lucide-react-native';
+import { Loader } from 'lucide-react-native';
 import { ErrorMessageResourceView } from './utilityResourceViews/ErrorMessageResourceView';
 import { SolidContainer, SolidLeaf } from '@ldo/connected-solid';
 import { LucideIcon } from 'lucide-react-native';

package/global.css

@@ -1,6 +1,96 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* =========================================================
+   Global Focus Ring Baseline for Radix + Native Controls
+   ========================================================= */
+
+/* ---- Design tokens (tweak these to your brand) ---- */
+:root {
+  --focus-ring-color: hsl(221 83% 53%);
+  /* accent color */
+  --focus-ring-width: 2px;
+  /* thickness */
+  --focus-ring-offset: 2px;
+  /* gap from element */
+  --focus-ring-shadow:
+    0 0 0 var(--focus-ring-offset) transparent,
+    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+}
+
+/* ---- What counts as "focusable control" ---- */
+/* Includes native controls + common Radix roles */
+:where(button,
+  a[href],
+  area[href],
+  input:not([type="hidden"]),
+  select,
+  textarea,
+  summary,
+  [role="button"],
+  [role="link"],
+  [role="menuitem"],
+  [role="menuitemradio"],
+  [role="menuitemcheckbox"],
+  [role="option"],
+  [role="treeitem"],
+  [role="tab"],
+  [role="switch"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="slider"],
+  [role="spinbutton"],
+  [role="textbox"],
+  [role="combobox"],
+  [role="gridcell"],
+  [role="rowheader"],
+  [role="columnheader"],
+  [tabindex]:not([tabindex^="-"])) {
+  outline: none;
+  box-shadow: none;
+}
+
+/* ---- Disabled states: suppress rings ---- */
+:where(button, a[href], area[href], input:not([type="hidden"]), select, textarea, summary,
+  [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"],
+  [role="menuitemcheckbox"], [role="option"], [role="treeitem"], [role="tab"],
+  [role="switch"], [role="checkbox"], [role="radio"], [role="slider"],
+  [role="spinbutton"], [role="textbox"], [role="combobox"], [role="gridcell"],
+  [role="rowheader"], [role="columnheader"], [tabindex]:not([tabindex^="-"]))[disabled],
+:where([aria-disabled="true"], [data-disabled], [data-state="disabled"]) {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* ---- Keyboard-visible focus only ---- */
+/* :where(button, a[href], area[href], input:not([type="hidden"]), select, textarea, summary,
+  [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"],
+  [role="menuitemcheckbox"], [role="option"], [role="treeitem"], [role="tab"],
+  [role="switch"], [role="checkbox"], [role="radio"], [role="slider"],
+  [role="spinbutton"], [role="textbox"], [role="combobox"], [role="gridcell"],
+  [role="rowheader"], [role="columnheader"], [tabindex]:not([tabindex^="-"])):focus-visible {
+  box-shadow: var(--focus-ring-shadow);
+  border-radius: inherit;
+} */
+
+/* ---- Suppress mouse/pointer focus rings ---- */
+:where(button, a[href], area[href], input:not([type="hidden"]), select, textarea, summary,
+  [role="button"], [role="link"], [role="menuitem"], [role="menuitemradio"],
+  [role="menuitemcheckbox"], [role="option"], [role="treeitem"], [role="tab"],
+  [role="switch"], [role="checkbox"], [role="radio"], [role="slider"],
+  [role="spinbutton"], [role="textbox"], [role="combobox"], [role="gridcell"],
+  [role="rowheader"], [role="columnheader"], [tabindex]:not([tabindex^="-"])):focus:not(:focus-visible) {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* ---- Firefox UA quirks ---- */
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+button:-moz-focusring:not(:focus-visible) {
+  outline: none;
+}
+
 
 @layer base {
   :root {

package/metro.config.js

@@ -1,6 +1,4 @@
 const { getDefaultConfig } = require('expo/metro-config');
-const { withNativeWind } = require('nativewind/metro');
-
 const config = getDefaultConfig(__dirname);
 
 // Add support for ES modules and import.meta
@@ -23,4 +21,4 @@ config.transformer.minifierConfig = {
   },
 };
 
-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = config;

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "linked-data-browser",
   "main": "index.js",
-  "version": "0.0.7",
+  "version": "0.0.8-alpha.0",
   "scripts": {
     "dev:ios": "expo start -c --ios",
     "dev:web": "concurrently \"npm run solid-server\" \"expo start -c --web\"",
     "dev:android": "expo start -c --android",
     "dev:server-hosted": "concurrently \"npm run solid-server\" \"npm run build:server:watch\"",
     "clean": "rm -rf .expo node_modules dist-standalone dist-server",
-    "postinstall": "npx tailwindcss -i ./global.css -o ./node_modules/.cache/nativewind/global.css",
     "build:standalone": "expo export -p web --output-dir dist-standalone && node scripts/adjust-standalone-paths.js",
     "build:server": "EXPO_PUBLIC_IS_SERVER_HOSTED=true expo export -p web --output-dir dist-server && node scripts/adjust-server-paths.js",
     "build:server:watch": "npx chokidar '**/*' -i 'dist-standalone/**' -i 'dist-server/**' -i 'node_modules/**' -i 'data/**' -c 'npm run build:server'",
@@ -72,20 +71,17 @@
     "expo-system-ui": "~5.0.7",
     "lodash": "^4.17.21",
     "lucide-react-native": "^0.511.0",
-    "nativewind": "^4.1.23",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.2",
     "react-native-notifier": "^2.0.0",
     "react-native-progress": "^5.0.1",
-    "react-native-reanimated": "~3.17.5",
+    "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-screens": "~4.10.0",
     "react-native-svg": "15.11.2",
     "react-native-web": "~0.20.0",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "3.3.5",
-    "tailwindcss-animate": "^1.0.7"
+    "react-native-worklets": "^0.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/resourceViews/Container/ContainerConfig.tsx

@@ -1,5 +1,5 @@
 import { ResourceViewConfig } from '../../components/ResourceView';
-import { Folders } from '../../lib/icons/Folders';
+import { Folders } from 'lucide-react-native';
 import { ContainerView } from './ContainerView';
 
 export const ContainerConfig: ResourceViewConfig = {

package/resourceViews/Container/ContainerView.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useCallback } from 'react';
-import { View, FlatList, TouchableWithoutFeedback } from 'react-native';
+import { View, FlatList, StyleSheet, Pressable } from 'react-native';
 import { Text } from '../../components/ui/text';
 import { Button } from '../../components/ui/button';
 import {
@@ -9,12 +9,12 @@ import {
   DropdownMenuItem,
 } from '../../components/ui/dropdown-menu';
 import { ErrorMessageResourceView } from '../../components/utilityResourceViews/ErrorMessageResourceView';
-import { CircleX } from '../../lib/icons/CircleX';
-import { Folder } from '../../lib/icons/Folder';
-import { Code } from '../../lib/icons/Code';
-import { File } from '../../lib/icons/File';
-import { Trash } from '../../lib/icons/Trash';
-import { Plus } from '../../lib/icons/Plus';
+import { CircleX } from 'lucide-react-native';
+import { Folder } from 'lucide-react-native';
+import { Code } from 'lucide-react-native';
+import { File } from 'lucide-react-native';
+import { Trash } from 'lucide-react-native';
+import { Plus } from 'lucide-react-native';
 import { Separator } from '../../components/ui/separator';
 import { useDialog } from '../../components/nav/DialogProvider';
 import {
@@ -24,10 +24,13 @@ import {
 } from '@ldo/connected-solid';
 import { Notifier } from 'react-native-notifier';
 import { useViewContext } from '../../components/useViewContext';
+import { useTheme } from '@react-navigation/native';
+import { Icon } from '../../components/ui/icon';
 
 export const ContainerView: FunctionComponent = () => {
   const { targetResource, navigateTo } = useViewContext();
   const { prompt } = useDialog();
+  const { colors } = useTheme();
 
   const onCreateContainer = useCallback(async () => {
     if (targetResource?.type !== 'SolidContainer') return;
@@ -83,12 +86,12 @@ export const ContainerView: FunctionComponent = () => {
   }
 
   return (
-    <View className="flex-1 flex-row">
+    <View style={styles.mainContainer}>
       {/* Left Panel */}
-      <View className="max-w-[200px] flex-1 p-4">
+      <View style={styles.leftPanel}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button text='Create' iconLeft={<Plus />} />
+            <Button text="Create" iconLeft={Plus} />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem onPress={onCreateContainer}>
@@ -105,12 +108,12 @@ export const ContainerView: FunctionComponent = () => {
       </View>
 
       {/* Right Panel */}
-      <View className="flex-[3] py-4 pr-4">
+      <View style={styles.rightPanel}>
         <FlatList
           data={targetResource.children()}
           keyExtractor={(item) => item.uri}
           renderItem={({ item, index }) => {
-            const Icon =
+            const TypeIcon =
               item.type === 'SolidContainer'
                 ? Folder
                 : item.uri.endsWith('.ttl')
@@ -119,23 +122,25 @@ export const ContainerView: FunctionComponent = () => {
             return (
               <>
                 {index === 0 && <Separator />}
-                <TouchableWithoutFeedback onPress={() => navigateTo(item.uri)}>
-                  <View className="flex flex-row p-4 hover:bg-secondary rounded-sm cursor-pointer justify-between">
-                    <Text className="flex flex-row gap-3">
-                      <Icon />
-                      {item.uri.replace(targetResource.uri, '')}
-                    </Text>
+                <Pressable
+                  onPress={() => navigateTo(item.uri)}
+                  style={({ hovered }) => ({
+                    backgroundColor: hovered ? colors.border : undefined,
+                  })}
+                >
+                  <View style={styles.listItem}>
+                    <View style={styles.listItemText}>
+                      <Icon icon={TypeIcon} />
+                      <Text>{item.uri.replace(targetResource.uri, '')}</Text>
+                    </View>
                     <Button
                       variant="ghost"
-                      className="h-6 p-0"
+                      style={styles.deleteButton}
                       onPress={() => onDelete(item)}
-                    >
-                      <Text>
-                        <Trash size={20} />
-                      </Text>
-                    </Button>
+                      iconLeft={Trash}
+                    />
                   </View>
-                </TouchableWithoutFeedback>
+                </Pressable>
                 <Separator />
               </>
             );
@@ -145,3 +150,36 @@ export const ContainerView: FunctionComponent = () => {
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  leftPanel: {
+    maxWidth: 200,
+    flex: 1,
+    padding: 16,
+  },
+  rightPanel: {
+    flex: 3,
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingRight: 16,
+  },
+  listItem: {
+    flexDirection: 'row',
+    padding: 16,
+    borderRadius: 4,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  listItemText: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  deleteButton: {
+    height: 24,
+    padding: 0,
+  },
+});

package/resourceViews/Profile/ProfileConfig.tsx

@@ -1,6 +1,6 @@
 import { SolidProfileShapeType } from '../../.ldo/profile.shapeTypes';
 import { ResourceViewConfig } from '../../components/ResourceView';
-import { User } from '../../lib/icons/User';
+import { User } from 'lucide-react-native';
 import { ProfileView } from './ProfileView';
 
 export const ProfileConfig: ResourceViewConfig = {

package/resourceViews/Profile/ProfileKnows.tsx

@@ -1,19 +1,22 @@
 import { Input } from '../../components/ui/input';
 import React, { FunctionComponent, useCallback, useState } from 'react';
-import { Plus } from '../../lib/icons/Plus';
+import { Plus } from 'lucide-react-native';
 import { SolidProfile } from '../../.ldo/profile.typings';
 import { AgentInformation } from '../../components/sharing/agentPermissions/AgentInformation';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useChangeSetData } from '@ldo/react';
 import { SolidLeaf } from '@ldo/connected-solid';
 import { Button } from '../../components/ui/button';
-import { Trash } from '../../lib/icons/Trash';
+import { Trash } from 'lucide-react-native';
 import { ConnectedPlugin } from '@ldo/connected';
 
 export interface ProfileKnowsProps {
   resource: SolidLeaf;
   profile: SolidProfile;
-  setProfile: useChangeSetData<SolidProfile, ConnectedPlugin<any, any, any, any, any>[]>;
+  setProfile: useChangeSetData<
+    SolidProfile,
+    ConnectedPlugin<any, any, any, any, any>[]
+  >;
 }
 
 export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
@@ -21,8 +24,6 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
   profile,
   setProfile,
 }) => {
-  console.log(profile.knows?.size);
-
   const [newContact, setNewContact] = useState('');
   const addNewContact = useCallback(() => {
     setProfile(resource, (cProfile) => {
@@ -32,12 +33,12 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
   }, [newContact, resource, setProfile]);
 
   return (
-    <View className="gap-4">
+    <View style={styles.container}>
       <Input
         placeholder="https://example.pod/john/profile/card#me"
         label="New Contact WebId"
         buttonRight={{
-          iconRight: <Plus />,
+          iconRight: Plus,
           onPress: addNewContact,
           variant: 'secondary',
         }}
@@ -47,11 +48,12 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
       />
       {profile.knows?.map((friend) => (
         <AgentInformation
+          key={friend['@id']}
           webId={friend['@id']}
           accessoryRight={
             <Button
               variant="ghost"
-              iconRight={<Trash />}
+              iconRight={Trash}
               onPress={() => {
                 setProfile(resource, (cProfile) => {
                   cProfile.knows?.delete(friend);
@@ -64,3 +66,9 @@ export const ProfileKnows: FunctionComponent<ProfileKnowsProps> = ({
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 16, // gap-4 equivalent (4 * 4px = 16px)
+  },
+});