Merge pull request #461 from powerhouse-inc/feat-remove-react-aria

feat: remove react aria
powerhouse-inc · Jul 31, 2024 · e58a79f · e58a79f
2 parents 3071240 + 7225d8f
commit e58a79f
Show file tree

Hide file tree

Showing 21 changed files with 1,419 additions and 3,149 deletions.
diff --git a/.github/app.png b/.github/app.png
diff --git a/README.md b/README.md
@@ -1,57 +1,49 @@
-# Document Model Editor Demo
+# Powerhouse Connect
 
-Demo Electron app to interact with Budget Statement documents.
+Open-source desktop and web application for document model management.
+Interact, create, edit and manage documents with ease.
 
-## Usage
+- Connect functions as a private editor & contributor tool for contributors of open organisations. It allows teams to manage internal documents with full control over the data ownership. Connect is available as stand-alone desktop application or in the cloud.
+- Connect offers a navigation menu for adding, synchronising and browsing document drives that are shared within an organisation or are private to the contributor.
+- Connect allows contributors to edit and work on different 'document model types' selected or defined by the organisation.
 
-Install dependencies:
+![app](./.github/app.png)
 
-```bash
-$ yarn install
-```
-
-Start development mode:
-
-```bash
-$ yarn start
-```
-
-Run browser version only:
-
-```bash
-$ yarn start:web
-```
+## Prerequisites
 
-Create package for the current platform:
+You can follow these instructions to setup a dev environment:
 
-```bash
-$ yarn make
-```
+- Install [**Node (LTS)**](https://nodejs.org/en/download/)
+- Clone this repository
+- Run `npm install` to install dependencies
 
-Build for Mac OSX: (only works on Mac)
+**Starting Connect**
 
 ```bash
-$ npm make:mac
+npm start # start desktop app
+# OR
+npm run dev:web # start web app
 ```
 
-Build for Linux (deb and dpkg): (works on Linux or Mac)
+After initialized, you can access the web app at `http://localhost:5173`.
 
-```bash
-$ npm make:linux
-```
-
-Build for Windows: (only works on Windows)
+**Create a packaged version of the desktop app**
 
 ```bash
-$ npm make:windows
+npm run make # Create package for the current platform
+npm run make:mac # Create package for Mac OSX
+npm run make:linux # Create package for Linux
+npm run make:windows # Create package for Windows
 ```
 
 ## Troubleshooting
 
 - For a complete list of *Electron Forge* options and requirements, visit the [official docs](https://github.com/electron-userland/electron-forge#usage).
 
- - If you're experiencing troubles with node-gyp on Windows 11, follow [this guide](https://devkimchi.com/2021/11/26/troubleshooting-node-gyp-package-on-windows11/).
+- If you're experiencing troubles with node-gyp on Windows 11, follow [this guide](https://devkimchi.com/2021/11/26/troubleshooting-node-gyp-package-on-windows11/).
+
+- If you're experiencing troubles with node-gyp on older versions, check out [this guide](https://spin.atomicobject.com/2019/03/27/node-gyp-windows/).
 
- - If you're experiencing troubles with node-gyp on older versions, check out [this guide](https://spin.atomicobject.com/2019/03/27/node-gyp-windows/).
+- To use yarn via Windows PowerShell, check [this guide](https://bobbyhadz.com/blog/yarn-cannot-be-loaded-running-scripts-disabled)
 
- - To use yarn via Windows PowerShell, check [this guide](https://bobbyhadz.com/blog/yarn-cannot-be-loaded-running-scripts-disabled)
+- For any other issues, reach out to our discord server [`#ask-powerhouse-team`](https://discord.com/channels/815917281728659516/883285185595047937) channel for help.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,9 +29,9 @@
         "build:web": "NODE_OPTIONS=--max-old-space-size=6144 vite build -c vite.renderer.config.mts",
         "preview:web": "vite preview -c vite.renderer.config.mts",
         "release": "semantic-release",
-        "prepare": "npm run prepare:scripts",
-        "prepare:scripts": "node scripts/index.js",
         "e2e": "playwright test",
+        "update-icons": "node scripts/copyIconsFromDesignSystem.js",
+        "postinstall": "npm run update-icons",
         "cy:open": "cypress open"
     },
     "devDependencies": {
@@ -76,8 +76,6 @@
         "prettier": "^3.1.1",
         "prettier-plugin-organize-imports": "^3.2.4",
         "react": "^18.2.0",
-        "react-aria": "^3.32.0",
-        "react-aria-components": "1.2.0",
         "react-dom": "^18.2.0",
         "rollup-plugin-node-polyfills": "^0.2.1",
         "rollup-plugin-shim": "^1.0.0",
@@ -93,13 +91,13 @@
         "xvfb-maybe": "^0.2.1"
     },
     "dependencies": {
-        "@powerhousedao/design-system": "1.0.0-alpha.152",
+        "@powerhousedao/design-system": "1.0.0-alpha.153",
         "@sentry/react": "^7.109.0",
         "@tanstack/react-virtual": "^3.8.1",
         "did-key-creator": "^1.2.0",
         "document-drive": "1.0.0-alpha.82",
         "document-model": "1.7.0",
-        "document-model-libs": "^1.69.0",
+        "document-model-libs": "^1.75.0",
         "electron-is-dev": "^3.0.1",
         "electron-squirrel-startup": "^1.0.0",
         "electron-store": "^8.1.0",

diff --git a/scripts/index.js → scripts/copyIconsFromDesignSystem.js b/scripts/index.js → scripts/copyIconsFromDesignSystem.js
diff --git a/src/components/file-content-view.tsx b/src/components/file-content-view.tsx
@@ -82,7 +82,7 @@ export function FileContentView(props: Props) {
                     marginLeft: columnIndex === 0 ? 0 : GAP,
                 }}
             >
-                <FileItem {...props} key={fileNode.id} uiFileNode={fileNode} />
+                <FileItem {...props} key={fileNode.id} uiNode={fileNode} />
             </div>
         );
     };

diff --git a/src/components/folder-view.tsx b/src/components/folder-view.tsx
@@ -2,11 +2,9 @@ import {
     FILE,
     FOLDER,
     FolderItem,
-    UiNode,
-    useDraggableTarget,
+    useDrop,
 } from '@powerhousedao/design-system';
 import { useTranslation } from 'react-i18next';
-import { useOnDropEvent } from 'src/hooks/useOnDropEvent';
 import { UiNodes } from 'src/hooks/useUiNodes';
 import { sortUiNodesByName } from 'src/utils';
 import { twMerge } from 'tailwind-merge';
@@ -16,10 +14,9 @@ import FileContentView from './file-content-view';
 export function FolderView(props: UiNodes) {
     const { t } = useTranslation();
     const { selectedParentNode } = props;
-    const onDropEvent = useOnDropEvent();
-    const { dropProps, isDropTarget } = useDraggableTarget<UiNode | null>({
-        data: selectedParentNode,
-        onDropEvent,
+    const { isDropTarget, dropProps } = useDrop({
+        ...props,
+        uiNode: selectedParentNode,
     });
 
     const folderNodes =
@@ -36,8 +33,8 @@ export function FolderView(props: UiNodes) {
         <div
             {...dropProps}
             className={twMerge(
-                'rounded-md border-2 border-dashed border-transparent p-2',
-                isDropTarget && 'border-blue-100',
+                'rounded-md border-2 border-transparent p-2',
+                isDropTarget && 'border-dashed border-blue-100',
             )}
         >
             <ContentSection
@@ -49,7 +46,7 @@ export function FolderView(props: UiNodes) {
                         <FolderItem
                             {...props}
                             key={folderNode.id}
-                            uiFolderNode={folderNode}
+                            uiNode={folderNode}
                         />
                     ))
                 ) : (

diff --git a/src/components/modal/modals/CreateDocumentModal.tsx b/src/components/modal/modals/CreateDocumentModal.tsx
@@ -1,13 +1,12 @@
 import {
+    CreateDocumentModal as ConnectCreateDocumentModal,
     FILE,
-    RenameNodeModal,
     TDocumentType,
     UiDriveNode,
     UiFolderNode,
     UiNode,
 } from '@powerhousedao/design-system';
 import { DocumentModel } from 'document-model/document';
-import { useTranslation } from 'react-i18next';
 import { useDocumentDriveServer } from 'src/hooks/useDocumentDriveServer';
 import { makeNodeSlugFromNodeName } from 'src/utils/slug';
 
@@ -30,7 +29,6 @@ export const CreateDocumentModal: React.FC<
         documentModel,
     } = props;
 
-    const { t } = useTranslation();
     const { addDocument } = useDocumentDriveServer();
 
     const onCreateDocument = async (documentName: string) => {
@@ -63,12 +61,8 @@ export const CreateDocumentModal: React.FC<
     };
 
     return (
-        <RenameNodeModal
+        <ConnectCreateDocumentModal
             open={open}
-            header={t('modals.createDocument.header')}
-            placeholder={t('modals.createDocument.placeholder')}
-            cancelLabel={t('common.cancel')}
-            continueLabel={t('common.create')}
             onContinue={onCreateDocument}
             onOpenChange={status => {
                 if (!status) return onClose();

diff --git a/src/components/root.tsx b/src/components/root.tsx
@@ -1,18 +1,14 @@
 import IconConnect from '@/assets/icons/connect.svg?react';
 import IconLogo from '@/assets/icons/logo.svg?react';
-import React, { Suspense, useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { Outlet, useNavigate, useSearchParams } from 'react-router-dom';
-import { useDropFile } from 'src/hooks';
 import { useLoadInitialData } from 'src/hooks/useLoadInitialData';
 import { useLogin } from 'src/hooks/useLogin';
 import { isElectron, isMac } from 'src/hooks/utils';
 import Sidebar from './sidebar';
 
-const ROOT_FILE_DROP = false;
-
 const Root = () => {
     useLoadInitialData();
-    const ref = React.useRef(null);
     const navigate = useNavigate();
     const { login } = useLogin();
 
@@ -40,21 +36,13 @@ const Root = () => {
         return unsubscribe;
     }, [navigate]);
 
-    let { dropProps, isDropTarget } = useDropFile(ref);
-
-    if (!ROOT_FILE_DROP) {
-        dropProps = {};
-        isDropTarget = false;
-    }
-
     return (
         <div className="h-screen">
             {isElectron && (
                 <div
                     className={`h-8 w-full
                     ${isMac && 'justify-center'}
-                    flex items-center bg-gray-50
-                    [-webkit-app-region:drag]`}
+                    flex items-center bg-gray-50`}
                 >
                     <IconLogo className="ml-1 mr-0.5 p-1.5" />
                     <IconConnect className="h-3 w-fit" />
@@ -63,9 +51,7 @@ const Root = () => {
             <div
                 className={`flex items-stretch overflow-auto
                         ${isElectron ? 'h-app-height' : 'h-screen'}
-                        ${isDropTarget ? 'bg-slate-50' : 'bg-white'}
                     `}
-                {...dropProps}
                 role="presentation"
                 tabIndex={0}
             >
@@ -74,13 +60,6 @@ const Root = () => {
                     <div className="relative flex-1 overflow-auto">
                         <Outlet />
                     </div>
-                    <div
-                        ref={ref}
-                        className={`pointer-events-none fixed inset-0
-                            transition-opacity duration-150 ease-in-out
-                            ${isDropTarget ? 'opacity-10' : 'opacity-0'}
-                        `}
-                    ></div>
                 </Suspense>
             </div>
         </div>

diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,7 +82,7 @@ export function FileContentView(props: Props) { @@
                         marginLeft: columnIndex === 0 ? 0 : GAP,
                     }}
                 >
-                    <FileItem {...props} key={fileNode.id} uiFileNode={fileNode} />
+                    <FileItem {...props} key={fileNode.id} uiNode={fileNode} />
                 </div>
             );
         };
@@ Expand Down @@