Merge pull request #81 from FlowTestAI/new-ui

FlowTest as a electron app designed to run completely locally

Author: jsajal

.eslintignore

@@ -0,0 +1,8 @@
+# dependencies
+**/node_modules
+
+# production
+/build
+
+# intermal dependencies
+/server

.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', 'react-hooks', 'prettier'],
+  rules: {
+    'react/prop-types': 'off', // keeping off for first phase
+    'no-unused-vars': 'off', // Getting a lot of Error for: '_' is assigned a value but never used  no-unused-vars. For now disabling this because  need to understand more about the use '_'.
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        moduleDirectory: ['node_modules', './src/*'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+};

.gitignore

@@ -37,3 +37,6 @@ uploads/
 # env
 .env
 .env.example
+
+# Ide
+.vscode/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,60 +1,56 @@
-# FlowTest
+# FlowTestAI
 
 [![Release Notes](https://img.shields.io/github/release/FlowTestAI/FlowTest)](https://github.com/FlowTestAI/FlowTest/releases)
 [![Linkedin](https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/flowtestai)
 [![Twitter Follow](https://img.shields.io/twitter/follow/FlowTestAI?style=social)](https://twitter.com/FlowTestAI)
 [![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://discord.gg/Pf9tdSjPeF)
 
-Leverage GenAI to convert your customer's interactions with your product into runnable flows all via natural language and simple drag and drop. Generated flows not only test the functional correctness of your product but also the time it takes your customers to perform these actions together.
+FlowTestAI stands as the world’s first GenAI powered OpenSource Integrated Development Environment (IDE) specifically designed to craft, visualize, and manage API-driven workflows. Characterized by its speed, lightweight architecture, and local operation, FlowTestAI safeguards privacy while facilitating the seamless integration of API driven workflows.
 
-- Step 1: Import your openAPI spec and describe your prodcut flow in natural language to our AI.
-- Step 2: Add an evaluate node at the end via simple drag and drop to check the final output.
-- Step 3: Run the created flow for a success/falure and observe the generated logs and timing info.
-- Step 4: Save and Export these runnable chains in json format and share with others.
-- Step 5: Have a beer! 🍺
+🚧 We are actively working on launching a CLI. The CLI allows you to run API driven workflows created using FlowTestAI from command line interface making it easier to automate and run them in a CI/CD (continuous integration/development) fashion.
 
-![alt text](public/flowtest_1.gif)
+## Documentation 📝
 
-## 👨‍💻 Developers
-FlowTest has 2 major components -
--   `server`: Node backend to serve API requests
--   `src`: React frontend
+https://flowtestai.gitbook.io/flowtestai
 
-### Prerequisite
--   Install npm
-    ```bash
-    npm install -g npm
-    ```
--   NodeJS >= 18.0.0
+💡 We are proud to announce that we were recently featured in a LangChain blog post. You can read the article here.
+
+## Setup
+
+## Production 🚀
+
+FlowTestAI is an electron app that runs entirely in your local environment interacting with your local file system just like other IDE(s) out there like VSCode, Intellij etc. The platform-specific binaries are available for download from our GitHub releases. We currently offer binaries for macOS, with versions for Windows and Linux under development 🚧. If you require a binary for a specific platform, please let us know in the Discussions section. We will prioritize your request accordingly.
+
+## Development 🔧
 
-### Setup
 1. Clone the repository
-    ```bash
-    git clone https://github.com/FlowTestAI/FlowTest.git
-    ```
+   ```bash
+   git clone https://github.com/FlowTestAI/FlowTest.git
+   ```
 2. Go into repository folder
-    ```bash
-    cd FlowTest
-    ```
-3. Install all dependencies of all modules:
-    ```bash
-    npm install
-    ```
-4. Rename `.env.example` to `.env` and enter your cerdentials, for instance
-    ```bash
-    OPENAI_API_KEY={API_KEY_VALUE}
-    PORT=3500
-    ...
-    ```
+   ```bash
+   cd FlowTest
+   ```
+3. Clean any previously installed dependencies:
+   ```bash
+   npm run clean
+   ```
+4. Install all dependencies of all modules:
+   ```bash
+   npm install
+   ```
 5. Start the app:
-    ```bash
-    npm start
-    ```
-    You can now access the app on [http://localhost:3500](http://localhost:3500)
+   ```bash
+   npm start
+   ```
+   The app should start as a normal desktop app
+
+## Support 🙋
 
-## 🙋 Support
+- ❓ QNA: feel free to ask questions, request new features or start a constructive discussion here [discussion](https://github.com/FlowTestAI/FlowTest/discussions)
+- 🐛 Issues: Feel free to raise issues here [issues](https://github.com/FlowTestAI/FlowTest/issues) (contributing guidelines coming soon..)
+- 🔄 Integration: If you want to explore how you can use this tool in your day to day activities or integrate with your existing stack or in general want to chat, you can reach out to us at any of our social media handles or email me at jsajal1993@gmail.com.
 
-Feel free to ask any questions, raise problems, and request new features in [discussion](https://github.com/FlowTestAI/FlowTest/discussions)
+## License 📄
 
-## 📄 License
 Source code in this repository is made available under the [MIT License](LICENSE.md).

jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}

package.json

@@ -2,33 +2,52 @@
   "name": "flowtest",
   "version": "1.0.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/joy": "^5.0.0-beta.7",
-    "@mui/material": "^5.14.10",
-    "@tabler/icons-react": "^2.34.0",
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@tippyjs/react": "^4.2.6",
+    "allotment": "^1.20.0",
+    "autoprefixer": "^10.4.18",
     "axios": "^1.5.1",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "immer": "^10.0.4",
+    "lodash": "^4.17.21",
     "notistack": "^3.0.1",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-edit-text": "^5.1.1",
+    "react-icons": "^5.0.1",
     "react-perfect-scrollbar": "^1.5.8",
     "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
+    "react-sliding-pane": "^7.3.0",
+    "react-toastify": "^10.0.5",
+    "react-tooltip": "^5.26.2",
     "reactflow": "^11.8.3",
-    "web-vitals": "^2.1.4"
+    "socket.io-client": "^4.7.4",
+    "tailwindcss": "^3.4.1",
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.5.2"
   },
   "scripts": {
-    "start": "npm run build && cd server && npm start",
+    "start": "npm run build && cd packages/flowtest-electron && npm start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "postinstall": "cd server && npm install"
+    "postinstall": "cd packages/flowtest-electron && npm install",
+    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "format": "prettier --write '**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
+    "clean": "rm -rf node_modules/ && rm -rf packages/flowtest-electron/node_modules/"
   },
   "eslintConfig": {
     "extends": [
@@ -47,5 +66,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "20.11.5",
+    "daisyui": "^4.7.2",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import-alias": "^1.2.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }

packages/flowtest-electron/electron-main.js

@@ -0,0 +1,59 @@
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, Menu, shell } = require('electron');
+const path = require('path');
+const url = require('url');
+const template = require('./electron-menu');
+const Watcher = require('./src/app/watcher');
+const registerRendererEventHandlers = require('./src/ipc/collection');
+
+let mainWindow;
+let watcher;
+
+app.on('ready', async () => {
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 768,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: true,
+      preload: path.join(__dirname, 'preload.js'),
+      webviewTag: true,
+    },
+    title: 'FlowTestAI',
+  });
+
+  mainWindow.maximize();
+
+  // and load the index.html of the app.
+  const startUrl = url.format({
+    pathname: path.join(__dirname, '../../build/index.html'),
+    protocol: 'file:',
+    slashes: true,
+  });
+  mainWindow.loadURL(startUrl);
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // This is required to open a link in the external browser
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  watcher = new Watcher();
+
+  registerRendererEventHandlers(mainWindow, watcher);
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', function () {
+  //if (process.platform !== 'darwin')
+  app.quit();
+});

packages/flowtest-electron/electron-menu.js

@@ -0,0 +1,59 @@
+const { shell } = require('electron');
+
+const template = [
+  {
+    label: 'FlowTestAI',
+    submenu: [
+      { type: 'separator' },
+      {
+        role: 'quit',
+        label: 'Exit FlowTestAI',
+      },
+    ],
+  },
+  {
+    label: 'Edit',
+    submenu: [
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+      { role: 'selectAll' },
+      { type: 'separator' },
+      { role: 'hide' },
+      { role: 'hideOthers' },
+    ],
+  },
+  {
+    label: 'View',
+    submenu: [
+      { role: 'toggledevtools' },
+      { type: 'separator' },
+      { role: 'resetzoom' },
+      { role: 'zoomin' },
+      { role: 'zoomout' },
+      { type: 'separator' },
+      { role: 'togglefullscreen' },
+    ],
+  },
+  {
+    role: 'window',
+    submenu: [{ role: 'minimize' }, { role: 'close', accelerator: 'CommandOrControl+Shift+Q' }],
+  },
+  {
+    role: 'help',
+    label: 'Help',
+    submenu: [
+      {
+        label: 'About',
+        click: async () => {
+          await shell.openExternal('https://github.com/FlowTestAI/FlowTest');
+        },
+      },
+    ],
+  },
+];
+
+module.exports = template;

packages/flowtest-electron/notarize.js

@@ -0,0 +1,19 @@
+require('dotenv').config();
+const { notarize } = require('@electron/notarize');
+
+exports.default = async function notarizing(context) {
+  const { electronPlatformName, appOutDir } = context;
+  if (electronPlatformName !== 'darwin') {
+    return;
+  }
+
+  const appName = context.packager.appInfo.productFilename;
+
+  return await notarize({
+    appBundleId: 'com.flowtestai.app',
+    appPath: `${appOutDir}/${appName}.app`,
+    appleId: process.env.APPLE_ID,
+    appleIdPassword: process.env.APPLE_ID_PASSWORD,
+    teamId: process.env.TEAM_ID,
+  });
+};