Initialize frontend app (#112)

2024-03-20 21:09:47 +03:00
parent 042fba91ae
commit a27e1dcd81
16 changed files with 3688 additions and 0 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,3 +92,26 @@ jobs:

      # Finally, run pre-commit.
      - uses: pre-commit/action@v3.0.0
+  
+  fe-lint-build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./skyvern-frontend
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+      
+      - name: Run build
+        run: npm run build
--- a/.gitignore
+++ b/.gitignore
@@ -167,3 +167,6 @@ har/

 # Streamlit ignores
 **/secrets*.toml
+
+## Frontend
+node_modules
--- a/skyvern-frontend/.eslintrc
+++ b/skyvern-frontend/.eslintrc
@@ -0,0 +1,27 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "ignorePatterns": [
+    "dist",
+    ".eslintrc.cjs",
+    "vite.config.ts",
+    "vitest.config.ts"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react-refresh"],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ]
+  }
+}
--- a/skyvern-frontend/.husky/pre-commit
+++ b/skyvern-frontend/.husky/pre-commit
@@ -0,0 +1,3 @@
+cd skyvern-frontend
+
+npm run precommit
--- a/skyvern-frontend/.prettierignore
+++ b/skyvern-frontend/.prettierignore
@@ -0,0 +1,5 @@
+.github/
+node_modules/
+build/
+coverage
+dist/
--- a/skyvern-frontend/README.md
+++ b/skyvern-frontend/README.md
@@ -0,0 +1,29 @@
+# Skyvern Frontend
+
+## Development
+
+```sh
+npm run dev
+```
+
+This will start the development server with hot module replacement.
+
+## Build for production
+
+```sh
+npm run build
+```
+
+This will make a production build in the `dist` directory, ready to be served.
+
+## Preview the production build locally
+
+```sh
+npm run preview
+```
+
+or alternatively, use the `serve` package:
+
+```sh
+npx serve@latest dist
+```
--- a/skyvern-frontend/index.html
+++ b/skyvern-frontend/index.html
@@ -0,0 +1,13 @@
+<!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>Skyvern</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/skyvern-frontend/package-lock.json
+++ b/skyvern-frontend/package-lock.json
--- a/skyvern-frontend/package.json
+++ b/skyvern-frontend/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "skyvern-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write .",
+    "preview": "vite preview",
+    "prepare": "cd .. && husky skyvern-frontend/.husky",
+    "precommit": "lint-staged"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "npm run lint"
+    ],
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write"
+    ]
+  }
+}
--- a/skyvern-frontend/src/App.tsx
+++ b/skyvern-frontend/src/App.tsx
@@ -0,0 +1,5 @@
+function App() {
+  return <></>;
+}
+
+export default App;
--- a/skyvern-frontend/src/index.css
+++ b/skyvern-frontend/src/index.css
--- a/skyvern-frontend/src/main.tsx
+++ b/skyvern-frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/skyvern-frontend/src/vite-env.d.ts
+++ b/skyvern-frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/skyvern-frontend/tsconfig.json
+++ b/skyvern-frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* annoying stuff */
+    "noUncheckedIndexedAccess": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["./src/", "vite-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/skyvern-frontend/tsconfig.node.json
+++ b/skyvern-frontend/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/skyvern-frontend/vite.config.ts
+++ b/skyvern-frontend/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});