Spaces:
Sleeping
Sleeping
Commit ·
f4a05c4
1
Parent(s): 46eecf4
chore: initialize frontend with React, Vite, and TailwindCSS
Browse files- frontend/eslint.config.js +32 -0
- frontend/index.html +20 -0
- frontend/package-lock.json +0 -0
- frontend/package.json +36 -0
- frontend/postcss.config.js +6 -0
- frontend/tailwind.config.js +49 -0
- frontend/tsconfig.json +24 -0
- frontend/tsconfig.node.json +18 -0
- frontend/vite.config.ts +25 -0
frontend/eslint.config.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import js from '@eslint/js';
|
| 2 |
+
import globals from 'globals';
|
| 3 |
+
import reactHooks from 'eslint-plugin-react-hooks';
|
| 4 |
+
import reactRefresh from 'eslint-plugin-react-refresh';
|
| 5 |
+
import tseslint from 'typescript-eslint';
|
| 6 |
+
|
| 7 |
+
export default tseslint.config(
|
| 8 |
+
{ ignores: ['dist'] },
|
| 9 |
+
{
|
| 10 |
+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
| 11 |
+
files: ['**/*.{ts,tsx}'],
|
| 12 |
+
languageOptions: {
|
| 13 |
+
ecmaVersion: 2020,
|
| 14 |
+
globals: globals.browser,
|
| 15 |
+
},
|
| 16 |
+
plugins: {
|
| 17 |
+
'react-hooks': reactHooks,
|
| 18 |
+
'react-refresh': reactRefresh,
|
| 19 |
+
},
|
| 20 |
+
rules: {
|
| 21 |
+
...reactHooks.configs.recommended.rules,
|
| 22 |
+
'react-refresh/only-export-components': [
|
| 23 |
+
'warn',
|
| 24 |
+
{ allowConstantExport: true },
|
| 25 |
+
],
|
| 26 |
+
'@typescript-eslint/no-unused-vars': [
|
| 27 |
+
'error',
|
| 28 |
+
{ argsIgnorePattern: '^_' },
|
| 29 |
+
],
|
| 30 |
+
},
|
| 31 |
+
}
|
| 32 |
+
);
|
frontend/index.html
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="en" class="dark">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 7 |
+
<meta name="description" content="ScrapeRL - RL Web Scraping Environment Dashboard" />
|
| 8 |
+
<title>ScrapeRL Dashboard</title>
|
| 9 |
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
| 10 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
| 11 |
+
<link
|
| 12 |
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
| 13 |
+
rel="stylesheet"
|
| 14 |
+
/>
|
| 15 |
+
</head>
|
| 16 |
+
<body class="bg-dark-900 text-dark-100">
|
| 17 |
+
<div id="root"></div>
|
| 18 |
+
<script type="module" src="/src/main.tsx"></script>
|
| 19 |
+
</body>
|
| 20 |
+
</html>
|
frontend/package-lock.json
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|
frontend/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"name": "scraperl-dashboard",
|
| 3 |
+
"private": true,
|
| 4 |
+
"version": "0.1.0",
|
| 5 |
+
"type": "module",
|
| 6 |
+
"scripts": {
|
| 7 |
+
"dev": "vite",
|
| 8 |
+
"build": "tsc -b && vite build",
|
| 9 |
+
"lint": "eslint .",
|
| 10 |
+
"preview": "vite preview"
|
| 11 |
+
},
|
| 12 |
+
"dependencies": {
|
| 13 |
+
"@tanstack/react-query": "^5.60.0",
|
| 14 |
+
"lucide-react": "^0.460.0",
|
| 15 |
+
"react": "^18.3.1",
|
| 16 |
+
"react-dom": "^18.3.1",
|
| 17 |
+
"react-router-dom": "^6.28.0",
|
| 18 |
+
"recharts": "^2.13.3"
|
| 19 |
+
},
|
| 20 |
+
"devDependencies": {
|
| 21 |
+
"@eslint/js": "^9.13.0",
|
| 22 |
+
"@types/react": "^18.3.12",
|
| 23 |
+
"@types/react-dom": "^18.3.1",
|
| 24 |
+
"@vitejs/plugin-react": "^4.3.3",
|
| 25 |
+
"autoprefixer": "^10.4.20",
|
| 26 |
+
"eslint": "^9.13.0",
|
| 27 |
+
"eslint-plugin-react-hooks": "^5.0.0",
|
| 28 |
+
"eslint-plugin-react-refresh": "^0.4.14",
|
| 29 |
+
"globals": "^15.11.0",
|
| 30 |
+
"postcss": "^8.4.47",
|
| 31 |
+
"tailwindcss": "^3.4.14",
|
| 32 |
+
"typescript": "~5.6.2",
|
| 33 |
+
"typescript-eslint": "^8.11.0",
|
| 34 |
+
"vite": "^5.4.10"
|
| 35 |
+
}
|
| 36 |
+
}
|
frontend/postcss.config.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
export default {
|
| 2 |
+
plugins: {
|
| 3 |
+
tailwindcss: {},
|
| 4 |
+
autoprefixer: {},
|
| 5 |
+
},
|
| 6 |
+
};
|
frontend/tailwind.config.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/** @type {import('tailwindcss').Config} */
|
| 2 |
+
export default {
|
| 3 |
+
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
| 4 |
+
darkMode: 'class',
|
| 5 |
+
theme: {
|
| 6 |
+
extend: {
|
| 7 |
+
colors: {
|
| 8 |
+
dark: {
|
| 9 |
+
50: '#f7f7f8',
|
| 10 |
+
100: '#ececf1',
|
| 11 |
+
200: '#d9d9e3',
|
| 12 |
+
300: '#c5c5d2',
|
| 13 |
+
400: '#acacbe',
|
| 14 |
+
500: '#8e8ea0',
|
| 15 |
+
600: '#565869',
|
| 16 |
+
700: '#40414f',
|
| 17 |
+
800: '#343541',
|
| 18 |
+
900: '#202123',
|
| 19 |
+
950: '#0d0d0f',
|
| 20 |
+
},
|
| 21 |
+
accent: {
|
| 22 |
+
primary: '#10a37f',
|
| 23 |
+
secondary: '#1a7f64',
|
| 24 |
+
tertiary: '#19c37d',
|
| 25 |
+
},
|
| 26 |
+
},
|
| 27 |
+
fontFamily: {
|
| 28 |
+
sans: ['Inter', 'system-ui', 'sans-serif'],
|
| 29 |
+
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
| 30 |
+
},
|
| 31 |
+
animation: {
|
| 32 |
+
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
| 33 |
+
'fade-in': 'fadeIn 0.3s ease-in-out',
|
| 34 |
+
'slide-up': 'slideUp 0.3s ease-out',
|
| 35 |
+
},
|
| 36 |
+
keyframes: {
|
| 37 |
+
fadeIn: {
|
| 38 |
+
'0%': { opacity: '0' },
|
| 39 |
+
'100%': { opacity: '1' },
|
| 40 |
+
},
|
| 41 |
+
slideUp: {
|
| 42 |
+
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
| 43 |
+
'100%': { opacity: '1', transform: 'translateY(0)' },
|
| 44 |
+
},
|
| 45 |
+
},
|
| 46 |
+
},
|
| 47 |
+
},
|
| 48 |
+
plugins: [],
|
| 49 |
+
};
|
frontend/tsconfig.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"compilerOptions": {
|
| 3 |
+
"target": "ES2020",
|
| 4 |
+
"useDefineForClassFields": true,
|
| 5 |
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
| 6 |
+
"module": "ESNext",
|
| 7 |
+
"skipLibCheck": true,
|
| 8 |
+
"moduleResolution": "bundler",
|
| 9 |
+
"allowImportingTsExtensions": true,
|
| 10 |
+
"isolatedModules": true,
|
| 11 |
+
"moduleDetection": "force",
|
| 12 |
+
"noEmit": true,
|
| 13 |
+
"jsx": "react-jsx",
|
| 14 |
+
"strict": true,
|
| 15 |
+
"noUnusedLocals": true,
|
| 16 |
+
"noUnusedParameters": true,
|
| 17 |
+
"noFallthroughCasesInSwitch": true,
|
| 18 |
+
"baseUrl": ".",
|
| 19 |
+
"paths": {
|
| 20 |
+
"@/*": ["src/*"]
|
| 21 |
+
}
|
| 22 |
+
},
|
| 23 |
+
"include": ["src"]
|
| 24 |
+
}
|
frontend/tsconfig.node.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"compilerOptions": {
|
| 3 |
+
"target": "ES2022",
|
| 4 |
+
"lib": ["ES2023"],
|
| 5 |
+
"module": "ESNext",
|
| 6 |
+
"skipLibCheck": true,
|
| 7 |
+
"moduleResolution": "bundler",
|
| 8 |
+
"allowImportingTsExtensions": true,
|
| 9 |
+
"isolatedModules": true,
|
| 10 |
+
"moduleDetection": "force",
|
| 11 |
+
"noEmit": true,
|
| 12 |
+
"strict": true,
|
| 13 |
+
"noUnusedLocals": true,
|
| 14 |
+
"noUnusedParameters": true,
|
| 15 |
+
"noFallthroughCasesInSwitch": true
|
| 16 |
+
},
|
| 17 |
+
"include": ["vite.config.ts"]
|
| 18 |
+
}
|
frontend/vite.config.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { defineConfig } from 'vite';
|
| 2 |
+
import react from '@vitejs/plugin-react';
|
| 3 |
+
import path from 'path';
|
| 4 |
+
|
| 5 |
+
export default defineConfig({
|
| 6 |
+
plugins: [react()],
|
| 7 |
+
resolve: {
|
| 8 |
+
alias: {
|
| 9 |
+
'@': path.resolve(__dirname, './src'),
|
| 10 |
+
},
|
| 11 |
+
},
|
| 12 |
+
server: {
|
| 13 |
+
port: 3000,
|
| 14 |
+
proxy: {
|
| 15 |
+
'/api': {
|
| 16 |
+
target: 'http://localhost:8000',
|
| 17 |
+
changeOrigin: true,
|
| 18 |
+
},
|
| 19 |
+
'/ws': {
|
| 20 |
+
target: 'ws://localhost:8000',
|
| 21 |
+
ws: true,
|
| 22 |
+
},
|
| 23 |
+
},
|
| 24 |
+
},
|
| 25 |
+
});
|