feat: flow desktop app foundations (#240)

Author: jahvon

desktop/.gitignore

@@ -0,0 +1,26 @@
+# 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?
+
+*storybook.log
+storybook-static

desktop/.nvmrc

@@ -0,0 +1 @@
+v23.9.0

desktop/.storybook/decorators.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+import { theme } from '../src/theme';
+
+export const withMantine = (Story: React.ComponentType) => (
+  <MantineProvider theme={theme}>
+    <Story />
+  </MantineProvider>
+);

desktop/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

desktop/.storybook/preview.ts

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/react-vite'
+import '@mantine/core/styles.css'
+import { withMantine } from './decorators'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+  decorators: [withMantine],
+};
+
+export default preview;
+

desktop/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

desktop/README.md

@@ -0,0 +1,40 @@
+# flow Desktop
+
+A desktop application built with Tauri, React, and Mantine for managing workspaces and flows.
+
+## Development
+
+This project uses Tauri v2 with React and TypeScript for the frontend, and Rust for the backend.
+
+### Prerequisites
+
+- Node.js (latest stable version)
+- Rust (latest stable version)
+- Tauri CLI
+
+### Getting Started
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+3. Build the application:
+   ```bash
+   npm run build
+   ```
+
+### Available Scripts
+
+- `npm run dev` - Start the development server
+- `npm run build` - Build the application for production
+- `npm run preview` - Preview the built application
+- `npm run tauri` - Run Tauri CLI commands
+- `npm run generate-types` - Generate TypeScript types from JSON schemas
+- `npm run storybook` - Start Storybook for component development
+- `npm run build-storybook` - Build Storybook for production

desktop/development.flow

@@ -0,0 +1,83 @@
+# yaml-language-server: $schema=https://flowexec.io/schemas/flowfile_schema.json
+visibility: private
+tags: [development, tauri]
+executables:
+  - verb: install
+    name: modules
+    aliases: [node-modules, nodemod]
+    exec:
+      dir: //desktop
+      cmd: npm install
+  - verb: start
+    name: storybook
+    description: Start the Tauri desktop app's Storybook server.
+    timeout: "24h"
+    exec:
+      dir: //desktop
+      cmd: npm run storybook
+
+  - verb: start
+    name: tauri
+    aliases: [desktop]
+    description: Start the Tauri desktop app in development mode.
+    timeout: "24h"
+    exec:
+      dir: //desktop
+      cmd: npm run tauri dev
+
+  - verb: generate
+    name: frontend
+    aliases: [js-types, ts-types, frontend-types]
+    description: Generate code for the Tauri desktop app's frontend.
+    exec:
+      dir: //desktop
+      cmd: npm run generate-types
+
+  - verb: lint
+    name: frontend
+    description: Run eslint on the Tauri desktop app's frontend.
+    exec:
+      dir: //desktop
+      cmd: npm run lint
+
+  - verb: generate
+    name: backend
+    description: Generate code for the Tauri desktop app's backend.
+    exec:
+      dir: //desktop
+      cmd: ./scripts/generate-rust-types.sh
+
+  - verb: generate
+    name: tauri
+    description: Generate code for the Tauri frontend and backend.
+    parallel:
+      execs:
+        - ref: generate frontend
+        - ref: generate backend
+
+  - verb: test
+    name: form-demo
+    description: Test executable to demonstrate the new form functionality with parameters and arguments.
+    exec:
+      dir: //desktop
+      cmd: echo "Testing form functionality"
+      params:
+        - prompt: "What is your name?"
+          envKey: "USER_NAME"
+        - prompt: "What is your favorite color?"
+          envKey: "FAVORITE_COLOR"
+        - text: "demo"
+          envKey: "DEMO_MODE"
+      args:
+        - pos: 1
+          envKey: "MESSAGE"
+          required: true
+          type: "string"
+        - flag: "verbose"
+          envKey: "VERBOSE"
+          type: "bool"
+          default: "false"
+        - flag: "count"
+          envKey: "COUNT"
+          type: "int"
+          default: "1"

desktop/eslint.config.js

@@ -0,0 +1,18 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import { defineConfig } from "eslint/config";
+
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
+  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    rules: {
+      "react/react-in-jsx-scope": "off",
+    },
+  },
+]);

desktop/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>flow Desktop</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>