refstudio · cguedes · May 16, 2023 · May 16, 2023 · May 16, 2023 · May 16, 2023
diff --git a/package.json b/package.json
@@ -11,10 +11,16 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@lexical/react": "^0.10.0",
     "@tauri-apps/api": "^1.2.0",
+    "autoprefixer": "^10.4.14",
+    "classnames": "^2.3.2",
+    "lexical": "^0.10.0",
+    "postcss": "^8.4.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-resizable-panels": "^0.0.42"
+    "react-resizable-panels": "^0.0.42",
+    "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.3",
@@ -24,7 +30,8 @@
     "@vitejs/plugin-react": "^3.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "typescript": "^4.9.5",
     "vite": "^4.2.1"
   },
@@ -47,7 +54,7 @@
   },
   "prettier": {
     "bracketSpacing": true,
-    "printWidth": 80,
+    "printWidth": 120,
     "semi": true,
     "singleQuote": true,
     "tabWidth": 2,

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/images/icons/LICENSE.md b/public/images/icons/LICENSE.md
@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md
diff --git a/public/images/icons/arrow-clockwise.svg b/public/images/icons/arrow-clockwise.svg
diff --git a/public/images/icons/arrow-counterclockwise.svg b/public/images/icons/arrow-counterclockwise.svg
diff --git a/public/images/icons/chat-square-quote.svg b/public/images/icons/chat-square-quote.svg
diff --git a/public/images/icons/chevron-down.svg b/public/images/icons/chevron-down.svg
diff --git a/public/images/icons/code.svg b/public/images/icons/code.svg
diff --git a/public/images/icons/journal-code.svg b/public/images/icons/journal-code.svg
diff --git a/public/images/icons/journal-text.svg b/public/images/icons/journal-text.svg
diff --git a/public/images/icons/justify.svg b/public/images/icons/justify.svg
diff --git a/public/images/icons/link.svg b/public/images/icons/link.svg
diff --git a/public/images/icons/list-ol.svg b/public/images/icons/list-ol.svg
diff --git a/public/images/icons/list-ul.svg b/public/images/icons/list-ul.svg
diff --git a/public/images/icons/pencil-fill.svg b/public/images/icons/pencil-fill.svg
diff --git a/public/images/icons/text-center.svg b/public/images/icons/text-center.svg
diff --git a/public/images/icons/text-left.svg b/public/images/icons/text-left.svg
diff --git a/public/images/icons/text-paragraph.svg b/public/images/icons/text-paragraph.svg
diff --git a/public/images/icons/text-right.svg b/public/images/icons/text-right.svg
diff --git a/public/images/icons/type-bold.svg b/public/images/icons/type-bold.svg
diff --git a/public/images/icons/type-h1.svg b/public/images/icons/type-h1.svg
diff --git a/public/images/icons/type-h2.svg b/public/images/icons/type-h2.svg
diff --git a/public/images/icons/type-h3.svg b/public/images/icons/type-h3.svg
diff --git a/public/images/icons/type-italic.svg b/public/images/icons/type-italic.svg
diff --git a/public/images/icons/type-strikethrough.svg b/public/images/icons/type-strikethrough.svg
diff --git a/public/images/icons/type-underline.svg b/public/images/icons/type-underline.svg
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -7,9 +7,15 @@ fn greet(name: &str) -> String {
     format!("Hello, {}! You've been greeted from Rust!", name)
 }
 
+#[tauri::command]
+fn interact_with_ai(selection: &str) -> String {
+    format!("{}: {}", selection.len(), selection.to_uppercase())
+}
+
 fn main() {
     tauri::Builder::default()
         .invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler!(interact_with_ai))
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -41,8 +41,8 @@
         "fullscreen": false,
         "resizable": true,
         "title": "refstudio",
-        "width": 800,
-        "height": 600
+        "width": 1280,
+        "height": 800
       }
     ]
   }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,40 +1,63 @@
-import { useState } from 'react';
-import { Panel, PanelGroup } from 'react-resizable-panels';
-import { invoke } from '@tauri-apps/api/tauri';
+import { $getSelection, LexicalEditor } from 'lexical';
+import { useRef, useState } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { $createReferenceNode } from './lexical-nodes/ReferenceNode';
+import { ReferenceItem } from './types/ReferenceItem';
+import { AIView } from './views/AIView';
+import EditorView from './views/EditorView';
+import { FoldersView } from './views/FoldersView';
+import { ReferencesView } from './views/ReferencesView';
 
 function App() {
-  const [greetMsg, setGreetMsg] = useState('');
-  const [name, setName] = useState('');
+  const [selection, setSelection] = useState('');
 
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke('greet', { name }));
+  const editorRef = useRef({
+    main: null as LexicalEditor | null,
+  });
+
+  function handleRefClicked(reference: ReferenceItem) {
+    if (!editorRef.current.main) return;
+    editorRef.current.main.update(() => {
+      $getSelection()?.insertNodes([
+        $createReferenceNode(reference),
+        // .setFormat('bold'),
+        // $createTextNode(`[${referenceId}]`).setFormat('bold'),
+      ]);
+    });
   }
 
   return (
-    <PanelGroup autoSaveId="example" direction="horizontal">
-      <Panel />
+    <PanelGroup autoSaveId="ref-studio" direction="horizontal" className="min-h-screen">
+      <Panel defaultSize={20} className="p-3">
+        <FoldersView />
+      </Panel>
+      <VerticalResizeHandle />
+
+      <Panel defaultSize={60} className="p-3">
+        <EditorView onChange={(editor) => (editorRef.current.main = editor)} onSelection={setSelection} />
+      </Panel>
+
+      <VerticalResizeHandle />
       <Panel>
-        <div>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              greet();
-            }}
-          >
-            <input
-              id="greet-input"
-              onChange={(e) => setName(e.currentTarget.value)}
-              placeholder="Enter a name..."
-            />
-            <button type="submit">Greet</button>
-          </form>
-          <p>{greetMsg}</p>
-        </div>
+        <PanelGroup direction="vertical">
+          <Panel className="p-3">
+            <ReferencesView onRefClicked={handleRefClicked} />
+          </Panel>
+          <HorizontalResizeHandle />
+          <Panel className="p-3">
+            <AIView selection={selection} />
+          </Panel>
+        </PanelGroup>
       </Panel>
-      <Panel />
     </PanelGroup>
   );
 }
 
+function VerticalResizeHandle() {
+  return <PanelResizeHandle className="flex w-1 items-center bg-gray-200 hover:bg-blue-100" />;
+}
+
+function HorizontalResizeHandle() {
+  return <PanelResizeHandle className="flex h-1 items-center bg-gray-200 hover:bg-blue-100" />;
+}
 export default App;
diff --git a/src/Reference.tsx b/src/Reference.tsx
@@ -0,0 +1,6 @@
+import { ReferenceItem } from './types/ReferenceItem';
+
+export function Reference({ ref }: { ref?: ReferenceItem }) {
+  if (!ref) return <span>-</span>;
+  return <span>[{ref.id}]</span>;
+}
diff --git a/src/cx.ts b/src/cx.ts
@@ -0,0 +1,3 @@
+import classNames from 'classnames';
+
+export const cx = classNames;
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export default <T extends any[]>(callback: (...args: T) => any, ms: number) => {
+  const timeout = React.useRef<NodeJS.Timeout>();
+
+  return (...args: T) => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = setTimeout(() => callback(...args), ms);
+  };
+};
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+h1, h2, h3, h4, h5, h6 {
+    @apply font-bold;
+    @apply mb-4;
+}
+
+h1 {
+    @apply text-3xl;
+}
+
+h2 {
+    @apply text-2xl;
+}
+
+h3 {
+    @apply text-xl;
+}
+
+h4 {
+    @apply text-lg;
+}
+
+a {
+    @apply text-blue-500 underline cursor-pointer hover:no-underline;
+}
+
+p {
+    @apply my-4;
+}
+
+ul {
+   @apply mb-4; 
+}
+ul li {
+    @apply ml-4 list-disc;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import classNames from 'classnames';

		export const cx = classNames;