linked-data-browser 0.0.0

package/lib/icons/iconWithClassName.ts

@@ -0,0 +1,14 @@
+import type { LucideIcon } from 'lucide-react-native';
+import { cssInterop } from 'nativewind';
+
+export function iconWithClassName(icon: LucideIcon) {
+  cssInterop(icon, {
+    className: {
+      target: 'style',
+      nativeStyleToProp: {
+        color: true,
+        opacity: true,
+      },
+    },
+  });
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });

package/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "linked-data-browser",
+  "main": "index.js",
+  "version": "0.0.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/**' -c 'npm run build:server'",
+    "solid-server": "community-solid-server -c ./test-server/server-config.json -f ./data --seed-config ./test-server/solid-css-seed.json",
+    "build:ldo": "ldo build --input .shapes --output .ldo",
+    "build": "npm run build:standalone && npm run build:server"
+  },
+  "dependencies": {
+    "@inrupt/solid-client-authn-browser": "^2.5.0",
+    "@ldo/connected-solid": "^1.0.0-alpha.26",
+    "@ldo/ldo": "^1.0.0-alpha.21",
+    "@ldo/solid-react": "^1.0.0-alpha.26",
+    "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-navigation/native": "^7.1.14",
+    "@rn-primitives/avatar": "~1.2.0",
+    "@rn-primitives/dialog": "^1.2.0",
+    "@rn-primitives/dropdown-menu": "^1.2.0",
+    "@rn-primitives/label": "^1.2.0",
+    "@rn-primitives/navigation-menu": "^1.2.0",
+    "@rn-primitives/popover": "^1.2.0",
+    "@rn-primitives/portal": "~1.3.0",
+    "@rn-primitives/progress": "~1.2.0",
+    "@rn-primitives/radio-group": "^1.2.0",
+    "@rn-primitives/separator": "^1.2.0",
+    "@rn-primitives/slot": "~1.2.0",
+    "@rn-primitives/switch": "^1.2.0",
+    "@rn-primitives/tooltip": "~1.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "constate": "^3.3.3",
+    "expo": "^53.0.9",
+    "expo-linking": "~7.1.5",
+    "expo-navigation-bar": "~4.2.4",
+    "expo-splash-screen": "~0.30.8",
+    "expo-status-bar": "~2.2.3",
+    "expo-system-ui": "~5.0.7",
+    "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-reanimated": "~3.17.5",
+    "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"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@ldo/cli": "^1.0.0-alpha.21",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@solid/community-server": "^7.1.7",
+    "@types/jsonld": "^1.5.15",
+    "@types/react": "~19.0.14",
+    "@types/shexj": "^2.1.7",
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^9.1.2",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3"
+  },
+  "private": false
+}

package/resourceViews/Container/ContainerConfig.tsx

@@ -0,0 +1,13 @@
+import { ResourceViewConfig } from '~/components/ResourceView';
+import { Folders } from '~/lib/icons/Folders';
+import { ContainerView } from './ContainerView';
+
+export const ContainerConfig: ResourceViewConfig = {
+  name: 'container',
+  displayName: 'Container',
+  displayIcon: Folders,
+  view: ContainerView,
+  canDisplay: (targetUri, targetResource) => {
+    return targetResource.type === 'SolidContainer';
+  },
+};

package/resourceViews/Container/ContainerView.tsx

@@ -0,0 +1,148 @@
+import React, { FunctionComponent, useCallback } from 'react';
+import { View, FlatList, TouchableWithoutFeedback } from 'react-native';
+import { Text } from '~/components/ui/text';
+import { Button } from '~/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '~/components/ui/dropdown-menu';
+import { useTargetResource } from '~/components/TargetResourceProvider';
+import { ErrorMessageResourceView } from '~/components/nav/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 { Separator } from '~/components/ui/separator';
+import { useDialog } from '~/components/nav/DialogProvider';
+import {
+  SolidContainer,
+  SolidContainerSlug,
+  SolidLeaf,
+} from '@ldo/connected-solid';
+import { Notifier } from 'react-native-notifier';
+
+export const ContainerView: FunctionComponent = () => {
+  const { targetResource, navigateTo } = useTargetResource();
+  const { prompt } = useDialog();
+
+  const onCreateContainer = useCallback(async () => {
+    if (targetResource?.type !== 'SolidContainer') return;
+    const givenName = await prompt('Enter Container Name');
+    if (!givenName) return;
+    const slug = (
+      givenName.endsWith('/') ? givenName : `${givenName}/`
+    ) as SolidContainerSlug;
+    const createResult = await targetResource.createChildIfAbsent(slug);
+    if (createResult.isError)
+      Notifier.showNotification({ title: createResult.message });
+    if (createResult.type === 'containerReadSuccess')
+      Notifier.showNotification({ title: `${slug} already exists.` });
+  }, [prompt, targetResource]);
+
+  const onCreateRdf = useCallback(async () => {
+    if (targetResource?.type !== 'SolidContainer') return;
+    const givenName = await prompt('Enter File Name');
+    if (!givenName) return;
+    const slug = (
+      givenName.endsWith('.ttl') ? givenName : `${givenName}.ttl`
+    ) as SolidContainerSlug;
+    const createResult = await targetResource.createChildIfAbsent(slug);
+    if (createResult.isError)
+      Notifier.showNotification({ title: createResult.message });
+    if (createResult.type === 'containerReadSuccess')
+      Notifier.showNotification({ title: `${slug} already exists.` });
+  }, [prompt, targetResource]);
+
+  const onUpload = useCallback(async () => {
+    if (targetResource?.type !== 'SolidContainer') return;
+    // Not Implemented
+    Notifier.showNotification({ title: 'Not Implemented' });
+  }, [targetResource?.type]);
+
+  const onDelete = useCallback(
+    async (item: SolidLeaf | SolidContainer) => {
+      if (targetResource?.type !== 'SolidContainer') return;
+      const createResult = await item.delete();
+      if (createResult.isError)
+        Notifier.showNotification({ title: createResult.message });
+    },
+    [targetResource?.type],
+  );
+
+  if (targetResource?.type !== 'SolidContainer') {
+    return (
+      <ErrorMessageResourceView
+        icon={CircleX}
+        message="The target resource is not a container"
+      />
+    );
+  }
+
+  return (
+    <View className="flex-1 flex-row">
+      {/* Left Panel */}
+      <View className="max-w-[200px] flex-1 p-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>
+              <Text>Create</Text>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onPress={onCreateContainer}>
+              <Text>Container</Text>
+            </DropdownMenuItem>
+            <DropdownMenuItem onPress={onCreateRdf}>
+              <Text>RDF Turtle</Text>
+            </DropdownMenuItem>
+            <DropdownMenuItem onPress={onUpload}>
+              <Text>File Upload</Text>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </View>
+
+      {/* Right Panel */}
+      <View className="flex-[3] py-4 pr-4">
+        <FlatList
+          data={targetResource.children()}
+          keyExtractor={(item) => item.uri}
+          renderItem={({ item, index }) => {
+            const Icon =
+              item.type === 'SolidContainer'
+                ? Folder
+                : item.uri.endsWith('.ttl')
+                  ? Code
+                  : File;
+            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>
+                    <Button
+                      variant="ghost"
+                      className="h-6 p-0"
+                      onPress={() => onDelete(item)}
+                    >
+                      <Text>
+                        <Trash size={20} />
+                      </Text>
+                    </Button>
+                  </View>
+                </TouchableWithoutFeedback>
+                <Separator />
+              </>
+            );
+          }}
+        />
+      </View>
+    </View>
+  );
+};

package/resourceViews/RawCode/RawCodeConfig.tsx

@@ -0,0 +1,11 @@
+import { ResourceViewConfig } from '~/components/ResourceView';
+import { Code } from '~/lib/icons/Code';
+import { RawCodeView } from './RawCodeView';
+
+export const RawCodeConfig: ResourceViewConfig = {
+  name: 'rawCode',
+  displayName: 'Raw Code',
+  displayIcon: Code,
+  view: RawCodeView,
+  canDisplay: () => true,
+};

package/resourceViews/RawCode/RawCodeEditor.tsx

@@ -0,0 +1,37 @@
+import React, { FunctionComponent, useRef } from 'react';
+import { Text } from '~/components/ui/text';
+import Editor, { Monaco, OnMount } from '@monaco-editor/react';
+import { useThemeChange } from '~/components/ThemeProvider';
+
+interface RawCodeEditorProps {
+  value: string;
+  onChange: (value: string | undefined) => void;
+}
+
+export const RawCodeEditor: FunctionComponent<RawCodeEditorProps> = ({
+  value,
+  onChange,
+}) => {
+  const monacoRef = useRef<Monaco>(null);
+  const { colorScheme } = useThemeChange();
+
+  function handleEditorWillMount(monaco: Monaco) {
+    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+  }
+
+  const handleEditorDidMount: OnMount = (editor, monaco) => {
+    monacoRef.current = monaco;
+  };
+
+  return (
+    <Editor
+      className="flex-1"
+      defaultLanguage="turtle"
+      theme={colorScheme === 'light' ? 'light' : 'hc-black'}
+      value={value}
+      onChange={onChange}
+      beforeMount={handleEditorWillMount}
+      onMount={handleEditorDidMount}
+    />
+  );
+};

package/resourceViews/RawCode/RawCodeView.tsx

@@ -0,0 +1,67 @@
+import { useSolidAuth } from '@ldo/solid-react';
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { useTargetResource } from '~/components/TargetResourceProvider';
+import { RawCodeEditor } from './RawCodeEditor';
+import { View } from 'react-native';
+import { Button } from '~/components/ui/button';
+import { Text } from '~/components/ui/text';
+import { Notifier } from 'react-native-notifier';
+
+export const RawCodeView: FunctionComponent = () => {
+  const { targetUri } = useTargetResource();
+  const { fetch } = useSolidAuth();
+  const [content, setContent] = useState<string>('');
+
+  // Independently fetch the target resource, so we have the raw turtle
+  const fetchContent = useCallback(async () => {
+    if (!targetUri) return;
+    const response = await fetch(targetUri);
+    if (response.status !== 200) {
+      Notifier.showNotification({
+        title: `Could not fetch document. Recieved ${response.status}`,
+      });
+    }
+    setContent(await response.text());
+  }, [fetch, targetUri]);
+
+  const submitChanges = useCallback(async () => {
+    if (!targetUri) return;
+    const response = await fetch(targetUri, {
+      method: 'put',
+      body: content,
+    });
+    if (response.status !== 205) {
+      Notifier.showNotification({
+        title: `Could save document. Recieved ${response.status}`,
+      });
+    }
+    Notifier.showNotification({
+      title: `Document Saved`,
+    });
+    await fetchContent();
+  }, [content, fetch, fetchContent, targetUri]);
+
+  useEffect(() => {
+    fetchContent();
+  }, [fetchContent]);
+
+  return (
+    <View className="flex-1 relative">
+      <RawCodeEditor
+        value={content}
+        onChange={(value) => setContent(value ?? '')}
+      />
+      <Button
+        className="absolute bottom-2 right-2 z-10"
+        onPress={submitChanges}
+      >
+        <Text>Save Changes</Text>
+      </Button>
+    </View>
+  );
+};

package/scripts/adjust-server-paths.js

@@ -0,0 +1,37 @@
+// scripts/adjust-server-paths.js
+const fs = require('fs');
+const path = require('path');
+
+const indexHtmlPath = path.join(__dirname, '../dist-server/index.html');
+
+fs.readFile(indexHtmlPath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading index.html:', err);
+    return;
+  }
+
+  // Regex to prefix all root-relative href and src paths,
+  // unless they already contain '/.ui-static/'
+  let modifiedData = data.replace(
+    /(href|src)=["'](\/(?!\.ui-static\/)\S*?)["']/g,
+    (match, attr, urlPath) => {
+      return `${attr}="/.ui-static${urlPath}"`;
+    },
+  );
+
+  // Modify the hydration flag for server-hosted build to false
+  modifiedData = modifiedData.replace(
+    /globalThis\.__EXPO_ROUTER_HYDRATE__=true;/,
+    'globalThis.__EXPO_ROUTER_HYDRATE__=false;',
+  );
+
+  fs.writeFile(indexHtmlPath, modifiedData, 'utf8', (err2) => {
+    if (err2) {
+      console.error('Error writing index.html:', err2);
+      return;
+    }
+    console.log(
+      'Successfully adjusted paths and hydration flag in dist-server/index.html',
+    );
+  });
+});

package/scripts/adjust-standalone-paths.js

@@ -0,0 +1,28 @@
+// scripts/adjust-server-paths.js
+const fs = require('fs');
+const path = require('path');
+
+const indexHtmlPath = path.join(__dirname, '../dist-standalone/index.html');
+
+fs.readFile(indexHtmlPath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading index.html:', err);
+    return;
+  }
+
+  // Modify the hydration flag for server-hosted build to false
+  let modifiedData = data.replace(
+    /globalThis\.__EXPO_ROUTER_HYDRATE__=true;/,
+    'globalThis.__EXPO_ROUTER_HYDRATE__=false;',
+  );
+
+  fs.writeFile(indexHtmlPath, modifiedData, 'utf8', (err2) => {
+    if (err2) {
+      console.error('Error writing index.html:', err2);
+      return;
+    }
+    console.log(
+      'Successfully adjusted hydration flag in dist-standalone/index.html',
+    );
+  });
+});

package/tailwind.config.js

@@ -0,0 +1,69 @@
+const { hairlineWidth } = require('nativewind/theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './resourceViews/**/*.{ts,tsx}',
+  ],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};

package/test-server/server-config.json

@@ -0,0 +1,75 @@
+{
+  "@context": [
+    "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^7.0.0/components/context.jsonld"
+  ],
+  "import": [
+    "css:config/app/init/default.json",
+    "css:config/app/main/default.json",
+    "css:config/app/variables/default.json",
+    "css:config/http/handler/default.json",
+    "css:config/http/middleware/default.json",
+    "css:config/http/notifications/all.json",
+    "css:config/http/server-factory/http.json",
+    "css:config/http/static/default.json",
+    "css:config/identity/access/public.json",
+    "css:config/identity/email/default.json",
+    "css:config/identity/handler/default.json",
+    "css:config/identity/oidc/default.json",
+    "css:config/identity/ownership/token.json",
+    "css:config/identity/pod/static.json",
+    "css:config/ldp/authentication/dpop-bearer.json",
+    "css:config/ldp/authorization/webacl.json",
+    "css:config/ldp/handler/default.json",
+    "css:config/ldp/metadata-parser/default.json",
+    "css:config/ldp/metadata-writer/default.json",
+    "css:config/ldp/modes/default.json",
+    "css:config/storage/backend/file.json",
+    "css:config/storage/key-value/resource-store.json",
+    "css:config/storage/location/pod.json",
+    "css:config/storage/middleware/default.json",
+    "css:config/util/auxiliary/acl.json",
+    "css:config/util/identifiers/suffix.json",
+    "css:config/util/logging/winston.json",
+    "css:config/util/representation-conversion/default.json",
+    "css:config/util/resource-locker/file.json",
+    "css:config/util/variables/default.json"
+  ],
+  "@graph": [
+    {
+      "comment": "A Solid server that stores its resources on disk and uses WAC for authorization."
+    },
+    {
+      "comment": "Serve Linked-Data-Browser as default representation",
+      "@id": "urn:solid-server:default:DefaultUiConverter",
+      "@type": "ConstantConverter",
+      "contentType": "text/html",
+      "filePath": "./dist-server/index.html",
+      "options_container": true,
+      "options_document": true,
+      "options_minQuality": 1
+    },
+    {
+      "@type": "Override",
+      "overrideInstance": {
+        "@type": "StaticAssetEntry",
+        "@id": "urn:solid-server:default:RootStaticAsset"
+      },
+      "overrideParameters": {
+        "@type": "StaticAssetEntry",
+        "filePath": "./dist-server/index.html"
+      }
+    },
+    {
+      "comment": "Serve Linked-Data-Browser static files.",
+      "@id": "urn:solid-server:default:StaticAssetHandler",
+      "@type": "StaticAssetHandler",
+      "assets": [
+        {
+          "@type": "StaticAssetEntry",
+          "relativeUrl": "/.ui-static/",
+          "filePath": "./dist-server/"
+        }
+      ]
+    }
+  ]
+}

package/test-server/solid-css-seed.json

@@ -0,0 +1,11 @@
+[
+  {
+    "email": "hello@example.com",
+    "password": "abc123",
+    "pods": [
+      {
+        "name": "example"
+      }
+    ]
+  }
+]

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ]
+}