asd

dprint.json → .dprint.json

@@ -14,24 +14,19 @@
     "ifStatement.singleBodyPosition": "nextLine"
   },
   "json": {
-    "lineWidth": 80
   },
-  "markdown": {},
-  "toml": {},
-  "dockerfile": {},
-  "includes": [
-    "**/*.{ts,tsx,js,jsx,cjs,mjs,json,md,toml,dockerfile,css,html}"
-  ],
+  "markdown": {
+  },
+  "toml": {
+  },
   "excludes": [
     "**/node_modules",
     "**/*-lock.json"
   ],
   "plugins": [
-    "https://plugins.dprint.dev/typescript-0.84.0.wasm",
-    "https://plugins.dprint.dev/json-0.17.1.wasm",
-    "https://plugins.dprint.dev/markdown-0.15.2.wasm",
-    "https://plugins.dprint.dev/toml-0.5.4.wasm",
-    "https://plugins.dprint.dev/dockerfile-0.3.0.wasm",
-    "https://plugins.dprint.dev/prettier-0.24.0.json@9a57d0d8e440ad90d07a503166af47e7a6a886abd46767933f9c279f72468596"
+    "https://plugins.dprint.dev/typescript-0.88.3.wasm",
+    "https://plugins.dprint.dev/json-0.19.0.wasm",
+    "https://plugins.dprint.dev/markdown-0.16.2.wasm",
+    "https://plugins.dprint.dev/toml-0.5.4.wasm"
   ]
 }

README.md

@@ -64,7 +64,7 @@
 
 ## Formatting
 
-`pnpm lint` will format all files recursively. you can find the format rules at `dprint.json`
+install [dprint](https://dprint.dev/install) and run `dprint t` first.
 
 ### Format on save
 

apps/desktop/src-tauri/Cargo.toml

@@ -15,10 +15,10 @@ description = "knot desktop app"
 tauri-build = { version = "2.0.0-alpha.3", features = [] }
 
 [dependencies]
-wry = "0.25.0"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 tauri = { version = "2.0.0-alpha.6", features = ["api-all"] }
+wry = "0.25.0"
 
 [features]
 # by default Tauri runs in production mode

apps/web/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = require('ui/postcss')
+module.exports = require("ui/postcss");
 
 // module.exports = {
 //   plugins: {

apps/web/src/App.tsx

@@ -1,5 +1,5 @@
-import { KnotEditor } from 'editor'
+import { KnotEditor } from "editor";
 
 export default function App() {
-  return <KnotEditor />
+  return <KnotEditor />;
 }

apps/web/src/index.tsx

@@ -1,9 +1,9 @@
-import { WhichkeyStateProvider } from 'editor/src/features/whichkey'
-import { render } from 'solid-js/web'
-import 'ui/style'
-import App from './App'
+import { WhichkeyStateProvider } from "editor/src/features/whichkey";
+import { render } from "solid-js/web";
+import "ui/style";
+import App from "./App";
 
-const root = document.getElementById('root') as HTMLElement
+const root = document.getElementById("root") as HTMLElement;
 
 render(
   () => (
@@ -12,4 +12,4 @@ render(
     </WhichkeyStateProvider>
   ),
   root,
-)
+);

apps/web/tailwind.config.js

@@ -1,4 +1,4 @@
-module.exports = require('ui/tailwind')('web')
+module.exports = require("ui/tailwind")("web");
 
 // module.exports = {
 //   context: ['./src/**/*.{js,jsx,ts,tsx}'],

apps/web/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
-import solidPlugin from 'vite-plugin-solid'
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [solidPlugin()],
@@ -8,6 +8,6 @@ export default defineConfig({
     strictPort: true,
   },
   build: {
-    outDir: '../../dist/web',
+    outDir: "../../dist/web",
   },
-})
+});

package.json

@@ -11,18 +11,17 @@
     "desktop": "pnpm --filter desktop"
   },
   "devDependencies": {
-    "dprint": "^0.37.1",
-    "husky": "^8.0.3",
+    "husky": "latest",
     "turbo": "latest"
   },
   "engines": {
-    "node": ">=14.0.0",
+    "node": ">=16.0.0",
     "pnpm": ">=8",
     "npm": "pnpm",
     "yarn": "pnpm"
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "flexsearch": "^0.7.3"
+    "flexsearch": "^0.7.31"
   }
 }

pkgs/editor/postcss.config.js

@@ -1 +1 @@
-module.exports = require('ui/postcss')
+module.exports = require("ui/postcss");

pkgs/editor/setupVitest.js

@@ -1 +1 @@
-import '@testing-library/jest-dom'
+import "@testing-library/jest-dom";

pkgs/editor/src/Cabinet.tsx

@@ -0,0 +1,173 @@
+import { createContext, For, useContext } from 'solid-js'
+import { createStore, produce } from 'solid-js/store'
+import { Button, Icon } from 'ui'
+
+export type File = {
+  id: number
+  name: string
+  created: string
+  edited: string
+  contents: string
+}
+
+export type Folder = {
+  id: number
+  name: string
+  created: string
+  edited: string
+  files: File[] | null
+}
+
+// !TODO
+/* onEnter={(e) => {
+          e.preventDefault()
+          const now = new Date()
+
+          const str = (new Date())
+            .toISOString()
+            .slice(0, 19)
+            .replace(/-/g, '/')
+            .replace('T', ' ')
+
+          if (!edt.isEmpty) {
+            cabinet.addFile({
+              id: Date.now(),
+              name: edt.getText(),
+              content: edt.getText() ?? '',
+              created: str,
+              edited: str,
+            })
+            edt.commands.clearContent()
+            edt.commands.blur()
+          }
+        }} */
+
+const createCabinetContext = () => {
+  const key = 'cabinet'
+  const localCabinet = localStorage.getItem(key)
+
+  const [cabinet, setCabinet] = createStore({
+    files: [] as File[],
+    addFile: (file: File) => {
+      setCabinet('files', (files) => [...files, file])
+      localStorage.setItem(key, JSON.stringify(cabinet.files))
+    },
+    editFile: (id: number, change: string) => {
+      setCabinet(
+        'files',
+        (file) => file.id === id,
+        produce((f) => {
+          f.name = change
+          f.edited = (new Date())
+            .toISOString()
+            .slice(0, 19)
+            .replace(/-/g, '/')
+            .replace('T', ' ')
+          console.log(f)
+        }),
+      )
+      localStorage.setItem(key, JSON.stringify(cabinet.files))
+    },
+    removeFile: (id: number) => {
+      setCabinet('files', (files) => files.filter((f) => f.id !== id))
+      localStorage.setItem(key, JSON.stringify(cabinet.files))
+    },
+  })
+
+  if (localCabinet) {
+    setCabinet('files', JSON.parse(localCabinet))
+  }
+
+  return cabinet
+}
+
+const CabinetContext = createContext<ReturnType<typeof createCabinetContext>>()
+
+export const useCabinetContext = () => {
+  const context = useContext(CabinetContext)
+  if (!context) {
+    throw new Error('useCabinetContext must be used within CabinetProvider')
+  }
+  return context
+}
+
+export const CabinetProvider = (props: { children: any }) => {
+  const cabinet = createCabinetContext()
+
+  return (
+    <CabinetContext.Provider value={cabinet}>
+      <div class='flex flex-col w-full h-full p-4 gap-4 bg-editorBg relative pb-32'>
+        <For each={cabinet.files}>
+          {(file) => (
+            <FolderCard
+              file={file}
+            />
+          )}
+        </For>
+      </div>
+      {props.children}
+    </CabinetContext.Provider>
+  )
+}
+
+function FolderCard(
+  props: {
+    file: File
+  },
+) {
+  const cabinet = useCabinetContext()
+
+  return (
+    <div class='border rounded bg-gray-800 text-white p-2 flex flex-col gap-2'>
+      <div class='flex justify-between'>
+        <div class='flex items-center justify-center gap-1'>
+          <Icon name='IconFolder' />
+          <div
+            contenteditable={true}
+            class='text-xl font-bold p-1'
+            onkeydown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                console.log(e.target.textContent)
+                cabinet.editFile(
+                  props
+                    .file
+                    .id,
+                  e.target.textContent || props.file.name,
+                )
+              }
+            }}
+          >
+            {props.file.name}
+          </div>
+        </div>
+        <Button
+          onclick={() => {
+            cabinet.removeFile(props.file.id)
+          }}
+        >
+          <Icon name='IconTrash' />
+        </Button>
+      </div>
+      <div class='flex justify-between'>
+        <div class='text-xs text-gray-500'>
+          {props.file.id}
+        </div>
+        <div class='flex flex-col justify-center'>
+          <div class='text-xs flex justify-between gap-1'>
+            <span>
+              created:
+            </span>
+            {props.file.created}
+          </div>
+          <div class='text-xs flex justify-between gap-1'>
+            <span>
+              edited:
+            </span>
+            {props.file.edited}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}