init

irislib · Mar 4, 2024 · 7e33c04 · 7e33c04
commit 7e33c04
Show file tree

Hide file tree

Showing 58 changed files with 7,559 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+public
+node_modules
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,14 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf",
+  "printWidth": 100,
+  "trailingComma": "all",
+  "singleAttributePerLine": false,
+  "jsxSingleQuote": false,
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# React + Tailwind
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <!-- Title -->
+    <title>Osty</title>
+
+    <!-- Links -->
+    <link rel="icon" type="image/svg+xml" href="/osty.svg" />
+    <link rel="canonical" href="" />
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <meta name="theme-color" content="" />
+
+    <!-- Opengraph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="" />
+    <meta property="og:url" content="" />
+    <meta property="og:site_name" content="" />
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="" />
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="" />
+    <meta property="twitter:url" content="" />
+    <meta name="twitter:title" content="" />
+    <meta name="twitter:description" content="" />
+    <meta name="twitter:image" content="" />
+
+    <!-- robots -->
+    <meta name="robots" content="index, follow" />
+    <meta name="googlebot" content="index, follow" />
+
+    <!-- Manifest -->
+    <link rel="manifest" href="/manifest.json" />
+  </head>
+  <body class="h-full">
+    <div id="root" class="h-full"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "nostree",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.1",
+    "@nostr-dev-kit/ndk": "^2.3.3",
+    "@nostr-dev-kit/ndk-cache-dexie": "^2.2.4",
+    "nostr-hooks": "^2.2.3",
+    "nostr-tools": "^2.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
+    "zod": "^3.22.4",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "daisyui": "^4.7.2",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.33",
+    "prettier": "3.2.4",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,68 @@
+{
+  "name": "osty",
+  "short_name": "osty",
+  "description": "osty",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000",
+  "theme_color": "#000",
+  "icons": [
+    {
+      "src": "/assets/48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/120.png",
+      "sizes": "120x120",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/168.png",
+      "sizes": "168x168",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
+    }
+  ],
+  "orientation": "portrait",
+  "prefer_related_applications": false
+}
diff --git a/public/osty.svg b/public/osty.svg
diff --git a/src/app/index.css b/src/app/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -0,0 +1,16 @@
+import { NostrHooksContextProvider } from 'nostr-hooks';
+import { RouterProvider } from 'react-router-dom';
+
+import { router } from '@/pages';
+
+import './index.css';
+
+export const App = () => {
+  return (
+    <>
+      <NostrHooksContextProvider>
+        <RouterProvider router={router} />
+      </NostrHooksContextProvider>
+    </>
+  );
+};
diff --git a/src/assets/osty.svg b/src/assets/osty.svg
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom/client';
+
+import { App } from '@/app';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/pages/explorer/Explorer.tsx b/src/pages/explorer/Explorer.tsx
@@ -0,0 +1,24 @@
+import localState from '@/state/LocalState.ts';
+import publicState from '@/state/PublicState.ts';
+import ExplorerNode from './ExplorerNode.tsx';
+
+type Props = {
+  p?: string;
+  path: string;
+};
+
+const Explorer = ({ p }: Props) => {
+  return (
+    <>
+      <div>{p}</div>
+      <div className="mb-4">
+        <ExplorerNode expanded={true} name="Local state" node={localState} />
+      </div>
+      <div className="mb-4">
+        <ExplorerNode expanded={true} name="Public state" node={publicState} />
+      </div>
+    </>
+  );
+};
+
+export default Explorer;
diff --git a/src/pages/explorer/ExplorerNode.tsx b/src/pages/explorer/ExplorerNode.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
+
+import Show from '@/shared/components/Show.tsx';
+import Node, { DIR_VALUE } from '@/state/Node';
+import SortedMap from '@/utils/SortedMap/SortedMap.tsx';
+import { ExplorerNodeEditRow } from './ExplorerNodeEditRow.tsx';
+
+import ExplorerNodeValue from './ExplorerNodeValue';
+
+type Props = {
+  node: Node;
+  value?: any;
+  level?: number;
+  expanded?: boolean;
+  name?: string;
+  parentCounter?: number;
+};
+
+type Child = { node: Node; value: any };
+
+export default function ExplorerNode({
+  node,
+  value = DIR_VALUE,
+  level = 0,
+  expanded = false,
+  name,
+  parentCounter = 0,
+}: Props) {
+  const [children, setChildren] = useState<SortedMap<string, Child>>(new SortedMap());
+  const [isOpen, setIsOpen] = useState(expanded);
+
+  const isDirectory = value === DIR_VALUE;
+
+  useEffect(() => {
+    if (!isDirectory) return;
+    return node.map((value, key) => {
+      if (!children.has(key)) {
+        const childName = key.split('/').pop()!;
+        setChildren((prev) => {
+          const newChildren = new SortedMap(prev);
+          newChildren.set(childName, { node: node.get(childName), value });
+          return newChildren;
+        });
+      }
+    });
+  }, [node.id, value]);
+
+  const toggleOpen = () => setIsOpen(!isOpen);
+  const rowColor = parentCounter % 2 === 0 ? 'bg-base-300' : 'bg-base-100';
+  const displayName = name || node.id.split('/').pop()!;
+
+  const paddingLeft = `${level * 15 + (isDirectory ? 0 : 16)}px`;
+
+  return (
+    <div className={`relative w-full ${rowColor}`}>
+      <div
+        className={`flex items-center ${isDirectory ? 'cursor-pointer' : ''}`}
+        onClick={toggleOpen}
+        style={{ paddingLeft }}
+      >
+        <Show when={isDirectory}>
+          <ChevronRightIcon
+            className={`w-4 h-4 transition ${isOpen ? 'transform rotate-90' : ''}`}
+          />
+        </Show>
+        <span className="ml-1 w-1/3 truncate">{displayName}</span>
+        <Show when={!isDirectory}>
+          <div className="ml-auto w-1/2">
+            <ExplorerNodeValue
+              displayName={displayName}
+              value={value}
+              setValue={(v) => node.put(v)}
+            />
+          </div>
+        </Show>
+      </div>
+      {isDirectory && isOpen ? (
+        <div>
+          <ExplorerNodeEditRow level={level + 1} parent={node} />
+          {Array.from(children.values()).map((child, index) => (
+            <ExplorerNode
+              key={node.id + child.node.id}
+              node={child.node}
+              level={level + 1}
+              expanded={false}
+              value={child.value}
+              parentCounter={parentCounter + index + 1}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}