interface has solo dev mode + made a lot of stuff work

.vscode/settings.json

@@ -2,12 +2,14 @@
   "cSpell.words": [
     "bpfrpt",
     "creationdate",
+    "honkhonk",
     "ipfs",
     "Keepsafe",
     "pathctx",
     "proptype",
     "quicktime",
     "repr",
+    "svgr",
     "tailwindcss"
   ],
   "rust-analyzer.procMacro.enable": true,

apps/desktop/src-tauri/tauri.conf.json

@@ -5,7 +5,7 @@
   },
   "build": {
     "distDir": "../dist",
-    "devPath": "http://localhost:8085",
+    "devPath": "http://localhost:8001",
     "beforeDevCommand": "",
     "beforeBuildCommand": ""
   },

apps/desktop/src/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 // import Spacedrive interface
-import SpacedriveInterface from '@sd/interface';
+import SpacedriveInterface, { Platform } from '@sd/interface';
 import '@sd/interface/dist/style.css';
 
 // import types from Spacedrive core (TODO: re-export from client would be cleaner)
 import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
 // import Spacedrive JS client
-import { BaseTransport, setTransport } from '@sd/client';
+import { BaseTransport } from '@sd/client';
 // import tauri apis
 import { invoke, os } from '@tauri-apps/api';
 
@@ -21,18 +21,34 @@ class Transport extends BaseTransport {
     return await invoke('client_command_transport', { data: query });
   }
 }
-setTransport(new Transport());
 
-const root = createRoot(document.getElementById('root')!);
+function App() {
+  function getPlatform(platform: string): Platform {
+    switch (platform) {
+      case 'darwin':
+        return 'macOS';
+      case 'win32':
+        return 'windows';
+      case 'linux':
+        return 'linux';
+      default:
+        return 'browser';
+    }
+  }
 
-root.render(
-  <React.StrictMode>
+  const [platform, setPlatform] = useState<Platform>('macOS');
+
+  useEffect(() => {
+    os.platform().then((platform) => setPlatform(getPlatform(platform)));
+  }, []);
+
+  return (
     <SpacedriveInterface
+      transport={new Transport()}
       onCoreEvent={function (event: CoreEvent): void {
         return;
       }}
-      //@ts-expect-error
-      platform={os.platform()}
+      platform={platform}
       convertFileSrc={function (url: string): string {
         return url;
       }}
@@ -40,5 +56,13 @@ root.render(
         return Promise.resolve();
       }}
     />
+  );
+}
+
+const root = createRoot(document.getElementById('root')!);
+
+root.render(
+  <React.StrictMode>
+    <App />
   </React.StrictMode>
 );

apps/desktop/vite.config.ts

@@ -5,23 +5,17 @@ import react from '@vitejs/plugin-react';
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 8085
+    port: 8001
   },
   plugins: [
     react({
       jsxRuntime: 'classic'
     })
   ],
-  esbuild: {
-    jsxInject: 'import {jsx as _jsx} from "react/jsx-runtime"'
-  },
-
   root: 'src',
-  publicDir: '@sd/interface/src/assets',
+  publicDir: '../../packages/interface/src/assets',
   build: {
     outDir: '../dist',
-    emptyOutDir: false,
     assetsDir: '.'
-  },
-  base: ''
+  }
 });

apps/web/components/Layout.tsx

@@ -15,26 +15,16 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     </Head>
     <header>
-      <nav>
+      {/* <nav>
         <Link href="/">
           <a>Home</a>
         </Link>{' '}
-        |{' '}
-        <Link href="/about">
-          <a>About</a>
-        </Link>{' '}
-        |{' '}
-        <Link href="/users">
-          <a>Users List</a>
-        </Link>{' '}
-        | <a href="/api/users">Users API</a>
-      </nav>
+      </nav> */}
     </header>
-    {children}
-    <footer>
-      <hr />
-      <span>I'm here to stay (Footer)</span>
-    </footer>
+    <div className="flex flex-col items-center p-1 ">{children as any}</div>
+    {/* <footer className="bg-gray-100 ">
+      <span>Version 0.1.0</span>
+    </footer> */}
   </>
 );
 

apps/web/components/global.scss

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+html {
+    // background-color: black;
+}

apps/web/interfaces/index.ts

@@ -1,10 +0,0 @@
-// You can include shared interfaces/types in a separate file
-// and then use them in any component by importing them. For
-// example, to import the interface below do:
-//
-// import { User } from 'path/to/interfaces';
-
-export type User = {
-  id: number
-  name: string
-}

apps/web/package.json

@@ -8,9 +8,14 @@
     "type-check": "tsc"
   },
   "dependencies": {
+    "@sd/interface": "*",
+    "autoprefixer": "^10.4.4",
     "next": "latest",
+    "postcss": "^8.4.12",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "sass": "^1.50.0",
+    "tailwindcss": "^3.0.23"
   },
   "devDependencies": {
     "@types/node": "^12.12.21",

apps/web/pages/_app.tsx

@@ -0,0 +1,7 @@
+import '../components/global.scss';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

apps/web/pages/index.tsx

@@ -1,14 +1,17 @@
 import Link from 'next/link';
 import Layout from '../components/Layout';
 
+// import Spacedrive interface
+
 const IndexPage = () => (
   <Layout title="Home | Next.js + TypeScript Example">
-    <h1>A file explorer from the future</h1>
-    <p>
-      <Link href="/about">
-        <a>About</a>
-      </Link>
-    </p>
+    <h1 className="my-8 text-4xl font-black">A file explorer from the future</h1>
+    <iframe
+      style={{ border: 'none', borderRadius: 5 }}
+      width={1200}
+      height={600}
+      src="http://localhost:8002?library_id=9068c6ec-cf90-451b-bb30-4174781e7bc6"
+    />
   </Layout>
 );
 

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

apps/web/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

apps/web/utils/sample-data.ts

@@ -1,9 +0,0 @@
-import { User } from '../interfaces'
-
-/** Dummy user data. */
-export const sampleUserData: User[] = [
-  { id: 101, name: 'Alice' },
-  { id: 102, name: 'Bob' },
-  { id: 103, name: 'Caroline' },
-  { id: 104, name: 'Dave' },
-]

apps/webapp/README.md

@@ -0,0 +1 @@
+# Spacedrive Webapp

apps/webapp/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Spacedrive</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

apps/webapp/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sd/webapp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@sd/interface": "*",
+    "@sd/core": "*",
+    "@sd/client": "*",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.27",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.6.3",
+    "web-vitals": "^2.1.4"
+  },
+  "devDependencies": {
+    "vite": "^2.9.1",
+    "@vitejs/plugin-react": "^1.3.1",
+    "vite-plugin-react-svg": "^0.2.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

apps/webapp/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Spacedrive",
+  "name": "Spacedrive",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

apps/webapp/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

apps/webapp/src/App.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import SpacedriveInterface from '@sd/interface';
+import '@sd/interface/dist/style.css';
+
+import { ClientCommand, ClientQuery } from '@sd/core';
+import { BaseTransport } from '@sd/client';
+
+// bind state to core via Tauri
+class Transport extends BaseTransport {
+  async query(query: ClientQuery) {
+    // return await invoke('client_query_transport', { data: query });
+  }
+  async command(query: ClientCommand) {
+    // return await invoke('client_command_transport', { data: query });
+  }
+}
+
+function App() {
+  return (
+    <div className="App">
+      {/* <header className="App-header"></header> */}
+      <SpacedriveInterface
+        transport={new Transport()}
+        onCoreEvent={function (event: any): void {
+          return;
+        }}
+        platform={'browser'}
+        convertFileSrc={function (url: string): string {
+          return url;
+        }}
+        openDialog={function (options: { directory?: boolean }): Promise<void> {
+          return Promise.resolve();
+        }}
+      />
+    </div>
+  );
+}
+
+export default App;

apps/webapp/src/index.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+

apps/webapp/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

apps/webapp/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

apps/webapp/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 8002
+  },
+  plugins: [
+    react({
+      jsxRuntime: 'classic'
+    })
+  ],
+  publicDir: 'public',
+  build: {
+    outDir: 'build',
+    assetsDir: '.'
+  }
+});

package.json

@@ -14,6 +14,7 @@
     "desktop": "pnpm --filter @sd/desktop -- ",
     "mobile": "pnpm --filter @sd/mobile -- ",
     "web": "pnpm --filter @sd/web -- ",
+    "webapp": "pnpm --filter @sd/webapp -- ",
     "ui": "pnpm --filter @sd/ui -- ",
     "interface": "pnpm --filter @sd/interface -- ",
     "core": "pnpm --filter @sd/core -- ",

packages/interface/package.json

@@ -18,6 +18,7 @@
   "private": true,
   "scripts": {
     "dev": "vite build --watch",
+    "vite": "vite",
     "build": "vite build"
   },
   "resolutions": {
@@ -78,8 +79,6 @@
     "prettier": "^2.6.2",
     "typescript": "^4.6.3",
     "vite": "^2.9.1",
-    "vite-plugin-filter-replace": "^0.1.9",
-    "vite-plugin-react-svg": "^0.2.0",
-    "vite-tsconfig-paths": "^3.4.1"
+    "@honkhonk/vite-plugin-svgr": "^1.1.0"
   }
 }

packages/interface/src/App.tsx

@@ -23,16 +23,19 @@ import SecuritySettings from './screens/settings/SecuritySettings';
 import LocationSettings from './screens/settings/LocationSettings';
 import { RedirectPage } from './screens/Redirect';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { ClientProvider } from '@sd/client';
+import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
 import { CoreEvent } from '@sd/core';
 
 const queryClient = new QueryClient();
 
 export const AppPropsContext = React.createContext<AppProps | null>(null);
 
+export type Platform = 'browser' | 'macOS' | 'windows' | 'linux';
+
 export interface AppProps {
+  transport: BaseTransport;
   onCoreEvent: (event: CoreEvent) => void;
-  platform: 'browser' | 'macOS' | 'windows' | 'linux';
+  platform: Platform;
   convertFileSrc: (url: string) => string;
   openDialog: (options: { directory?: boolean }) => Promise<void>;
   onClose?: () => void;
@@ -173,6 +176,12 @@ export default function App(props: AppProps) {
     window.ReactQueryClient = queryClient;
   }
 
+  useEffect(() => {
+    setTransport(props.transport);
+  }, [props.transport]);
+
+  console.log('App props', props);
+
   return (
     <>
       {/* @ts-ignore */}

packages/interface/src/components/file/FileItem.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 import { DefaultProps } from '../primitive/types';
 
+import Folder from '../../assets/svg/folder.svg?component';
+
 interface Props extends DefaultProps {
   fileName: string;
   iconName?: string;
@@ -36,10 +38,11 @@ export default function FileItem(props: Props) {
         {/* <div className="w-[65px] border border-gray-600 m-auto rounded-md h-[80px] bg-gray-650 relative shadow-md "> */}
         {props.folder ? (
           <div className="relative w-full h-full active:translate-y-[1px]">
-            <img
+            {/* <img
               className="bottom-0 p-3 pt-[19px]  margin-auto z-90 pointer-events-none"
               src="/svg/folder.svg"
-            />
+            /> */}
+            <Folder className="w-[70px] m-auto -mt-1.5" />
           </div>
         ) : (
           <div

packages/interface/src/dev.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './style.scss';
+import App from './App';
+import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
+import { BaseTransport } from '@sd/client';
+
+// bind state to core via Tauri
+class Transport extends BaseTransport {
+  async query(query: ClientQuery) {
+    // return await invoke('client_query_transport', { data: query });
+  }
+  async command(query: ClientCommand) {
+    // return await invoke('client_command_transport', { data: query });
+  }
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <App
+      transport={new Transport()}
+      onCoreEvent={function (event: CoreEvent): void {}}
+      platform={'browser'}
+      convertFileSrc={function (url: string): string {
+        return url;
+      }}
+      openDialog={function (options: { directory?: boolean | undefined }): Promise<void> {
+        return Promise.resolve();
+      }}
+    />
+  </React.StrictMode>
+);

packages/interface/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Spacedrive Interface [For Development Only]</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="dev.tsx"></script>
+  </body>
+</html>

packages/interface/src/index.ts

@@ -1,5 +1,8 @@
 import App from './App';
+import { AppProps, Platform } from './App';
 
 import './style.scss';
 
+export type { AppProps, Platform };
+
 export default App;

packages/interface/tsconfig.json

@@ -16,6 +16,7 @@
     "outDir": "dist",
     "declaration": true,
     "declarationMap": true,
+    "types": [ "@honkhonk/vite-plugin-svgr/client" ]
   },
   "include": ["src"],
   "exclude": ["node_modules"]

packages/interface/vite.config.ts

@@ -1,17 +1,21 @@
 import { defineConfig } from 'vite';
-import reactSvgPlugin from 'vite-plugin-react-svg';
 import react from '@vitejs/plugin-react';
+import svgr from '@honkhonk/vite-plugin-svgr';
 
 import * as path from 'path';
 
 // Vite configured in "Library Mode", it will not run as a server.
 // https://vitejs.dev/config/
 export default defineConfig({
+  // for developer purposes only
+  server: {
+    port: 8003
+  },
   plugins: [
     react({
       jsxRuntime: 'classic'
     }),
-    reactSvgPlugin()
+    svgr()
   ],
   esbuild: {
     jsxInject: 'import {jsx as _jsx} from "react/jsx-runtime"'