chore: web and tauri project

.github/workflows/web2_ci.yaml

@@ -0,0 +1,47 @@
+name: Web2-CI
+on:
+  pull_request:
+    paths:
+      - ".github/workflows/web2_ci.yaml"
+      - "frontend/appflowy_web_app/**
+
+env:
+  NODE_VERSION: "18.16.0"
+  PNPM_VERSION: "8.5.0"
+  RUST_TOOLCHAIN: "1.75"
+
+jobs:
+  code-check:
+    if: github.event.pull_request.draft != true
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [ubuntu-latest]
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Check backend path usage
+        run: |
+          echo "Checking backend path usage"
+          commit1=$(git rev-parse HEAD^)
+          commit2=$(git rev-parse HEAD)
+          
+          allow_dirs="frontend/appflowy_web_app/src/application/services/tauri-services"
+          backend_path="tauri-services/backend"
+          
+          files_changed=$(git diff --name-only $commit1 $commit2)
+          
+          for file in $files_changed; do
+            if [[ $file != $allow_dirs* ]]; then
+              if grep -q $backend_path $file; then
+                echo "Error: $file contains backend path $backend_path"
+                exit 1
+              fi
+            fi
+          done

.gitignore

@@ -40,3 +40,5 @@ frontend/package
 frontend/*.deb
 
 **/Cargo.toml.bak
+
+**/.cargo/**

frontend/Makefile.toml

@@ -51,6 +51,7 @@ FLUTTER_FLOWY_SDK_PATH = "appflowy_flutter/packages/appflowy_backend"
 TAURI_BACKEND_SERVICE_PATH = "appflowy_tauri/src/services/backend"
 WEB_BACKEND_SERVICE_PATH = "appflowy_web/src/services/backend"
 WEB_LIB_PATH = "appflowy_web/wasm-libs/af-wasm"
+TAURI_APP_BACKEND_SERVICE_PATH = "appflowy_web_app/src/application/services/tauri-services/backend"
 # Test default config
 TEST_CRATE_TYPE = "cdylib"
 TEST_LIB_EXT = "dylib"

frontend/appflowy_web_app/.eslintignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+src-tauri/
+.eslintrc.cjs
+tsconfig.json
+**/backend/**

frontend/appflowy_web_app/.eslintrc.cjs

@@ -0,0 +1,73 @@
+module.exports = {
+  // https://eslint.org/docs/latest/use/configure/configuration-files
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+    extraFileExtensions: ['.json'],
+  },
+  plugins: ['@typescript-eslint', 'react-hooks'],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/adjacent-overload-signatures': 'error',
+    '@typescript-eslint/no-empty-function': 'error',
+    '@typescript-eslint/no-empty-interface': 'error',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/await-thenable': 'error',
+    '@typescript-eslint/no-namespace': 'error',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+    '@typescript-eslint/no-redeclare': 'error',
+    '@typescript-eslint/prefer-for-of': 'error',
+    '@typescript-eslint/triple-slash-reference': 'error',
+    '@typescript-eslint/unified-signatures': 'error',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'off',
+    'constructor-super': 'error',
+    eqeqeq: ['error', 'always'],
+    'no-cond-assign': 'error',
+    'no-duplicate-case': 'error',
+    'no-duplicate-imports': 'error',
+    'no-empty': [
+      'error',
+      {
+        allowEmptyCatch: true,
+      },
+    ],
+    'no-invalid-this': 'error',
+    'no-new-wrappers': 'error',
+    'no-param-reassign': 'error',
+    'no-sequences': 'error',
+    'no-throw-literal': 'error',
+    'no-unsafe-finally': 'error',
+    'no-unused-labels': 'error',
+    'no-var': 'error',
+    'no-void': 'off',
+    'prefer-const': 'error',
+    'prefer-spread': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'padding-line-between-statements': [
+      'error',
+      { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+      { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+      { blankLine: 'always', prev: 'import', next: '*' },
+      { blankLine: 'any', prev: 'import', next: 'import' },
+      { blankLine: 'always', prev: 'block-like', next: '*' },
+      { blankLine: 'always', prev: 'block', next: '*' },
+
+    ],
+  },
+  ignorePatterns: ['src/**/*.test.ts', '**/__tests__/**/*.json', 'package.json'],
+};

frontend/appflowy_web_app/.gitignore

@@ -0,0 +1,32 @@
+# 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?
+
+src/@types/translations/*.json
+
+
+src/application/services/tauri-services/backend/models/
+src/application/services/tauri-services/backend/events/
+
+.env

frontend/appflowy_web_app/.prettierrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  arrowParens: 'always',
+  bracketSpacing: true,
+  endOfLine: 'lf',
+  htmlWhitespaceSensitivity: 'css',
+  insertPragma: false,
+  jsxBracketSameLine: false,
+  jsxSingleQuote: true,
+  printWidth: 121,
+  plugins: [require('prettier-plugin-tailwindcss')],
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+  vueIndentScriptAndStyle: false,
+};

frontend/appflowy_web_app/README.md

@@ -0,0 +1,182 @@
+<div align="center">
+
+  <h1><code>AppFlowy Web Project</code></h1>
+
+<div>Welcome to the AppFlowy Web Project, a robust and versatile platform designed to bring the innovative features of
+AppFlowy to the web. This project uniquely supports running as a desktop application via Tauri, and offers web
+interfaces powered by WebAssembly (WASM). Dive into an exceptional development experience with high performance and
+extensive capabilities.</div>
+
+</div>
+
+## 🐑 Features
+
+- **Cross-Platform Compatibility**: Seamlessly run on desktop environments with Tauri, and on any web browser through
+  WASM.
+- **High Performance**: Leverage the speed and efficiency of WebAssembly for your web interfaces.
+- **Tauri Integration**: Build lightweight, secure, and efficient desktop applications.
+- **Flexible Development**: Utilize a wide range of AppFlowy's functionalities in your web or desktop projects.
+
+## 🚀 Getting Started
+
+### 🛠️ Prerequisites
+
+Before you begin, ensure you have the following installed:
+
+- Node.js (v14 or later)
+- Rust (latest stable version)
+- Tauri prerequisites for your operating system
+- PNPM (8.5.0)
+
+### 🏗️ Installation
+
+#### Clone the Repository
+
+   ```bash
+   git clone https://github.com/AppFlowy-IO/AppFlowy
+  ```
+
+#### 🌐 Install the frontend dependencies:
+
+   ```bash
+    cd frontend/appflowy_web_app
+    pnpm install
+   ```
+
+#### 🖥️ Desktop Application (Tauri) (Optional)
+
+> **Note**: if you want to run the web app in the browser, skip this step
+
+- Follow the instructions [here](https://tauri.app/v1/guides/getting-started/prerequisites/) to install Tauri
+
+##### Windows and Linux Prerequisites
+
+###### Windows only
+
+- Install the Duckscript CLI and vcpkg
+
+   ```bash
+   cargo install --force duckscript_cli
+   vcpkg integrate install
+   ```
+
+###### Linux only
+
+- Install the required dependencies
+
+   ```bash
+   sudo apt-get update
+   sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
+   ```
+
+##### Install Tauri Dependencies
+
+- Install cargo-make
+
+   ```bash
+   cargo install --force cargo-make
+   ```
+
+
+- Install AppFlowy dev tools
+
+   ```bash
+   # install development tools
+   # make sure you are in the root directory of the project
+    cd frontend
+    cargo make appflowy-tauri-deps-tools
+   ```
+
+- Build the service/dependency
+
+   ```bash
+    # make sure you are in the root directory of the project
+    cd frontend/appflowy_web_app
+    mkdir dist
+    cargo make --cwd .. tauri_build
+   ```
+
+### 🚀 Running the Application
+
+#### 🌐 Web Application
+
+- Run the web application
+
+   ```bash
+   pnpm run dev
+   ```
+- Open your browser and navigate to `http://localhost:3000`, You can now interact with the AppFlowy web application
+
+#### 🖥️ Desktop Application (Tauri)
+
+**Ensure close web application before running the desktop application**
+
+- Run the desktop application
+
+   ```bash
+   pnpm run tauri:dev
+   ```
+- The AppFlowy desktop application will open, and you can interact with it
+
+### 🛠️ Development
+
+#### How to add or modify i18n keys
+
+- Modify the i18n files in `frontend/resources/translations/en.json` to add or modify i18n keys
+- Run the following command to update the i18n keys in the application
+
+   ```bash
+   pnpm run sync:i18n
+   ```
+
+#### How to modify the theme
+
+Don't modify the theme file in `frontend/appflowy_web_app/src/styles/variables` directly)
+
+- Modify the theme file in `frontend/appflowy_web_app/style-dictionary/tokens/base.json( or dark.json or light.json)` to
+  add or modify theme keys
+- Run the following command to update the theme in the application
+
+   ```bash
+   pnpm run css:variables
+   ```
+
+#### How to add or modify the environment variables
+
+- Modify the environment file in `frontend/appflowy_web_app/.env` to add or modify environment variables
+
+#### How to create symlink for the @appflowyinc/client-api-wasm in local development
+
+- Run the following command to create a symlink for the @appflowyinc/client-api-wasm
+
+   ```bash
+   # ensure you are in the frontend/appflowy_web_app directory
+
+   pnpm run link:client-api $source_path $target_path
+
+   # Example
+   # pnpm run link:client-api ../../../../RustroverProjects/AppFlowy-Cloud/libs/client-api-for-wasm/pkg ./node_modules/@appflowyinc/client-api-wasm
+   ```
+
+### 📝 About the Project
+
+#### 📁 Directory Structure
+
+- `frontend/appflowy_web_app`: Contains the web application source code
+- `frontend/appflowy_web_app/src`: Contains the app entry point and the source code
+- `frontend/appflowy_web_app/src/components`: Contains the react components
+- `frontend/appflowy_web_app/src/styles`: Contains the styles for the application
+- `frontend/appflowy_web_app/src/utils`: Contains the utility functions
+- `frontend/appflowy_web_app/src/i18n`: Contains the i18n files
+- `frontend/appflowy_web_app/src/assets`: Contains the assets for the application
+- `frontend/appflowy_web_app/src/store`: Contains the redux store
+- `frontend/appflowy_web_app/src/@types`: Contains the typescript types
+- `frontend/appflowy_web_app/src/applications/services`:  as a critical interface layer, abstracting backend logic
+  access across different execution environments—Tauri and Web. It ensures a consistent API for the application, with
+  tailored implementations for data logic in Tauri via Rust code and in Web through Yjs and WASM interfaces.
+
+### 🧪 Testing
+
+> To be Continued...
+
+

frontend/appflowy_web_app/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/appflowy.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+    </style>
+    <title>AppFlowy</title>
+</head>
+<body id="body">
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>