remove react-sdk from repo
This commit is contained in:
Ruben Fiszel
24
react-sdk/.gitignore
vendored
24
react-sdk/.gitignore
vendored
@@ -1,24 +0,0 @@
|
|||||||
# 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?
|
|
||||||
@@ -1,22 +1,5 @@
|
|||||||
# React SDK
|
# React SDK
|
||||||
|
|
||||||
This folder contains example on how to export Windmill components as React
|
The React SDK is only available for enterprise customers in a private github
|
||||||
components and exports:
|
repo. Please contact sales@windmill.dev for more info about embedding or
|
||||||
|
whitelabeling the Windmill UI. Start with a free POC.
|
||||||
- Flow Builder
|
|
||||||
- App Viewer
|
|
||||||
|
|
||||||
This is useful in the case you want to embed a Flow Builder or an App Viewer in
|
|
||||||
a React application.
|
|
||||||
|
|
||||||
## How to run
|
|
||||||
|
|
||||||
```
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Go to main.tsx and uncomment to see the different examples
|
|
||||||
|
|||||||
0
react-sdk/index.d.ts
vendored
0
react-sdk/index.d.ts
vendored
@@ -1,14 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="stylesheet" href="tailwind.css" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Windmill SDK example</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<img src="/assets/windmill.svg" alt="Windmill" class="w-32 h-32 mx-auto" />
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import AppPreviewSvelte from "windmill-components/components/apps/editor/AppPreview.svelte";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import { reactify } from "svelte-preprocess-react";
|
|
||||||
import { App } from "windmill-components/components/apps/types";
|
|
||||||
import { writable } from "svelte/store";
|
|
||||||
|
|
||||||
const AppPreviewReact = reactify(AppPreviewSvelte);
|
|
||||||
const breakpoint = writable<"lg" | "sm">("lg");
|
|
||||||
const noBackend = false;
|
|
||||||
|
|
||||||
export function AppPreview(props: {
|
|
||||||
app: App;
|
|
||||||
appPath: string;
|
|
||||||
username: string;
|
|
||||||
email: string;
|
|
||||||
summary: string;
|
|
||||||
workspace: string;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<AppPreviewReact
|
|
||||||
app={props.app}
|
|
||||||
appPath={props.appPath}
|
|
||||||
breakpoint={breakpoint}
|
|
||||||
policy={{}}
|
|
||||||
workspace={props.workspace}
|
|
||||||
isEditor={false}
|
|
||||||
context={{
|
|
||||||
username: props.username ?? "anonymous",
|
|
||||||
email: props.email ?? "anonymous",
|
|
||||||
}}
|
|
||||||
summary={props.summary}
|
|
||||||
noBackend={noBackend}
|
|
||||||
></AppPreviewReact>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import FlowBuilderSvelte from "windmill-components/components/FlowBuilder.svelte";
|
|
||||||
import React from "react";
|
|
||||||
import "highlight.js/styles/github.css";
|
|
||||||
|
|
||||||
import { reactify } from "svelte-preprocess-react";
|
|
||||||
import { type Writable } from "svelte/store";
|
|
||||||
|
|
||||||
const FlowBuilderReact = reactify(FlowBuilderSvelte);
|
|
||||||
|
|
||||||
export function FlowBuilder(props: {
|
|
||||||
flowStore: Writable<any>;
|
|
||||||
flowStateStore: Writable<any>;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<FlowBuilderReact
|
|
||||||
initialPath="u/test/test"
|
|
||||||
flowStateStore={props.flowStateStore}
|
|
||||||
flowStore={props.flowStore}
|
|
||||||
selectedId={undefined}
|
|
||||||
></FlowBuilderReact>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
4223
react-sdk/package-lock.json
generated
4223
react-sdk/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "windmill-react-sdk",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"files": [
|
|
||||||
"dist",
|
|
||||||
"index.d.ts"
|
|
||||||
],
|
|
||||||
"main": "./dist/counter.umd.cjs",
|
|
||||||
"module": "./dist/counter.js",
|
|
||||||
"types": "./index.d.ts",
|
|
||||||
"exports": {
|
|
||||||
"types": "./index.d.ts",
|
|
||||||
"import": "./dist/counter.js",
|
|
||||||
"require": "./dist/counter.umd.cjs"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "tsc && vite build"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@sveltejs/vite-plugin-svelte": "^2.2.0",
|
|
||||||
"@tailwindcss/forms": "^0.5.3",
|
|
||||||
"@tailwindcss/typography": "^0.5.9",
|
|
||||||
"@types/react": "^18.2.6",
|
|
||||||
"@types/react-dom": "^18.2.4",
|
|
||||||
"@vitejs/plugin-react": "^4.0.0",
|
|
||||||
"autoprefixer": "^10.4.14",
|
|
||||||
"postcss": "^8.4.23",
|
|
||||||
"tailwindcss": "^3.3.2",
|
|
||||||
"typescript": "^4.9.4",
|
|
||||||
"vite": "^4.0.4"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"highlight.js": "^11.8.0",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"svelte-preprocess-react": "^0.15.0",
|
|
||||||
"windmill-client": "^0.3.1",
|
|
||||||
"windmill-components": "file:../frontend"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,79 +0,0 @@
|
|||||||
// import "./style.css";
|
|
||||||
import { FlowBuilder } from "../lib/flow_builder";
|
|
||||||
|
|
||||||
import { workspaceStore, userStore } from "windmill-components/stores";
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import ReactDOM from "react-dom/client";
|
|
||||||
import { writable } from "svelte/store";
|
|
||||||
// To be able to test flows and run scripts, or get the app
|
|
||||||
// you will need to:
|
|
||||||
// 1. have a backend
|
|
||||||
// 2. for the token of the browser to contain a valid token wrt to this backend
|
|
||||||
// 3. That call to /api/* goes to the backend (in vite we use the proxy towards app.windmill.dev)
|
|
||||||
|
|
||||||
// Example on how to use the react SDK.
|
|
||||||
|
|
||||||
const workspace = "demo";
|
|
||||||
const username = "test";
|
|
||||||
const email = "test@test";
|
|
||||||
|
|
||||||
const flowStore = writable({
|
|
||||||
summary: "",
|
|
||||||
value: { modules: [] },
|
|
||||||
path: "u/test/test",
|
|
||||||
edited_at: "",
|
|
||||||
edited_by: "",
|
|
||||||
archived: false,
|
|
||||||
extra_perms: {},
|
|
||||||
schema: {},
|
|
||||||
});
|
|
||||||
|
|
||||||
userStore.set({
|
|
||||||
username: username,
|
|
||||||
email: email,
|
|
||||||
is_admin: true,
|
|
||||||
is_super_admin: true,
|
|
||||||
operator: false,
|
|
||||||
created_at: "",
|
|
||||||
groups: [],
|
|
||||||
pgroups: [],
|
|
||||||
folders: [],
|
|
||||||
folders_owners: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const flowStateStore = writable({});
|
|
||||||
|
|
||||||
workspaceStore.set(workspace);
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<div className="p-4 border border-black embedded">
|
|
||||||
<FlowBuilder flowStore={flowStore} flowStateStore={flowStateStore} />
|
|
||||||
</div>
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Example 2 on how to render an app
|
|
||||||
|
|
||||||
// import { AppService } from "windmill-client";
|
|
||||||
// import { AppPreview } from "../lib/app_viewer";
|
|
||||||
|
|
||||||
// const appPath = "f/examples/crm_gmail";
|
|
||||||
// const app = await AppService.getAppByPath({
|
|
||||||
// workspace,
|
|
||||||
// path: appPath,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
|
|
||||||
// <React.StrictMode>
|
|
||||||
// <AppPreview
|
|
||||||
// workspace={workspace}
|
|
||||||
// app={app.value}
|
|
||||||
// username={username}
|
|
||||||
// email={email}
|
|
||||||
// summary=""
|
|
||||||
// appPath={appPath}
|
|
||||||
// />
|
|
||||||
// </React.StrictMode>
|
|
||||||
// );
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
1
react-sdk/src/vite-env.d.ts
vendored
1
react-sdk/src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,688 +0,0 @@
|
|||||||
const plugin = require("tailwindcss/plugin");
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
const config = {
|
|
||||||
content: [
|
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.{js,ts,jsx,tsx}",
|
|
||||||
"./node_modules/windmill-components/package/components/**/*.{html,js,svelte,ts}",
|
|
||||||
],
|
|
||||||
safelist: [
|
|
||||||
"hljs",
|
|
||||||
"splitpanes__pane",
|
|
||||||
"splitpanes__splitter",
|
|
||||||
...(process.env.NODE_ENV === "production"
|
|
||||||
? [
|
|
||||||
{ pattern: /^m(\w?)-.*$/ },
|
|
||||||
{ pattern: /^p(\w?)-.*$/ },
|
|
||||||
{ pattern: /^rounded-.*$/ },
|
|
||||||
{ pattern: /^shadow-.*$/, variants: ["hover"] },
|
|
||||||
{ pattern: /^text-[^/]*$/, variants: ["hover", "active", "focus"] },
|
|
||||||
{ pattern: /^bg-[^/]*$/, variants: ["hover", "active", "focus"] },
|
|
||||||
{ pattern: /^border-[^/]*$/, variants: ["hover", "active", "focus"] },
|
|
||||||
{ pattern: /^ring-[^/]*$/, variants: ["hover", "active", "focus"] },
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
colors: {
|
|
||||||
current: "currentcolor",
|
|
||||||
transparent: "transparent",
|
|
||||||
white: "#ffffff",
|
|
||||||
black: "#000000",
|
|
||||||
slate: {
|
|
||||||
50: "#f8fafc",
|
|
||||||
100: "#f1f5f9",
|
|
||||||
200: "#e2e8f0",
|
|
||||||
300: "#cbd5e1",
|
|
||||||
400: "#94a3b8",
|
|
||||||
500: "#64748b",
|
|
||||||
600: "#475569",
|
|
||||||
700: "#334155",
|
|
||||||
800: "#1e293b",
|
|
||||||
900: "#0f172a",
|
|
||||||
},
|
|
||||||
zinc: {
|
|
||||||
50: "#fafafa",
|
|
||||||
100: "#f4f4f5",
|
|
||||||
200: "#e4e4e7",
|
|
||||||
300: "#d4d4d8",
|
|
||||||
400: "#a1a1aa",
|
|
||||||
500: "#71717a",
|
|
||||||
600: "#52525b",
|
|
||||||
700: "#3f3f46",
|
|
||||||
800: "#27272a",
|
|
||||||
900: "#18181b",
|
|
||||||
},
|
|
||||||
neutral: {
|
|
||||||
50: "#fafafa",
|
|
||||||
100: "#f5f5f5",
|
|
||||||
200: "#e5e5e5",
|
|
||||||
300: "#d4d4d4",
|
|
||||||
400: "#a3a3a3",
|
|
||||||
500: "#737373",
|
|
||||||
600: "#525252",
|
|
||||||
700: "#404040",
|
|
||||||
800: "#262626",
|
|
||||||
900: "#171717",
|
|
||||||
},
|
|
||||||
stone: {
|
|
||||||
50: "#fafaf9",
|
|
||||||
100: "#f5f5f4",
|
|
||||||
200: "#e7e5e4",
|
|
||||||
300: "#d6d3d1",
|
|
||||||
400: "#a8a29e",
|
|
||||||
500: "#78716c",
|
|
||||||
600: "#57534e",
|
|
||||||
700: "#44403c",
|
|
||||||
800: "#292524",
|
|
||||||
900: "#1c1917",
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
50: "#fff7ed",
|
|
||||||
100: "#ffedd5",
|
|
||||||
200: "#fed7aa",
|
|
||||||
300: "#fdba74",
|
|
||||||
400: "#fb923c",
|
|
||||||
500: "#f97316",
|
|
||||||
600: "#ea580c",
|
|
||||||
700: "#c2410c",
|
|
||||||
800: "#9a3412",
|
|
||||||
900: "#7c2d12",
|
|
||||||
},
|
|
||||||
amber: {
|
|
||||||
50: "#fffbeb",
|
|
||||||
100: "#fef3c7",
|
|
||||||
200: "#fde68a",
|
|
||||||
300: "#fcd34d",
|
|
||||||
400: "#fbbf24",
|
|
||||||
500: "#f59e0b",
|
|
||||||
600: "#d97706",
|
|
||||||
700: "#b45309",
|
|
||||||
800: "#92400e",
|
|
||||||
900: "#78350f",
|
|
||||||
},
|
|
||||||
lime: {
|
|
||||||
50: "#f7fee7",
|
|
||||||
100: "#ecfccb",
|
|
||||||
200: "#d9f99d",
|
|
||||||
300: "#bef264",
|
|
||||||
400: "#a3e635",
|
|
||||||
500: "#84cc16",
|
|
||||||
600: "#65a30d",
|
|
||||||
700: "#4d7c0f",
|
|
||||||
800: "#3f6212",
|
|
||||||
900: "#365314",
|
|
||||||
},
|
|
||||||
emerald: {
|
|
||||||
50: "#ecfdf5",
|
|
||||||
100: "#d1fae5",
|
|
||||||
200: "#a7f3d0",
|
|
||||||
300: "#6ee7b7",
|
|
||||||
400: "#34d399",
|
|
||||||
500: "#10b981",
|
|
||||||
600: "#059669",
|
|
||||||
700: "#047857",
|
|
||||||
800: "#065f46",
|
|
||||||
900: "#064e3b",
|
|
||||||
},
|
|
||||||
teal: {
|
|
||||||
50: "#f0fdfa",
|
|
||||||
100: "#ccfbf1",
|
|
||||||
200: "#99f6e4",
|
|
||||||
300: "#5eead4",
|
|
||||||
400: "#2dd4bf",
|
|
||||||
500: "#14b8a6",
|
|
||||||
600: "#0d9488",
|
|
||||||
700: "#0f766e",
|
|
||||||
800: "#115e59",
|
|
||||||
900: "#134e4a",
|
|
||||||
},
|
|
||||||
cyan: {
|
|
||||||
50: "#ecfeff",
|
|
||||||
100: "#cffafe",
|
|
||||||
200: "#a5f3fc",
|
|
||||||
300: "#67e8f9",
|
|
||||||
400: "#22d3ee",
|
|
||||||
500: "#06b6d4",
|
|
||||||
600: "#0891b2",
|
|
||||||
700: "#0e7490",
|
|
||||||
800: "#155e75",
|
|
||||||
900: "#164e63",
|
|
||||||
},
|
|
||||||
sky: {
|
|
||||||
50: "#f0f9ff",
|
|
||||||
100: "#e0f2fe",
|
|
||||||
200: "#bae6fd",
|
|
||||||
300: "#7dd3fc",
|
|
||||||
400: "#38bdf8",
|
|
||||||
500: "#0ea5e9",
|
|
||||||
600: "#0284c7",
|
|
||||||
700: "#0369a1",
|
|
||||||
800: "#075985",
|
|
||||||
900: "#0c4a6e",
|
|
||||||
},
|
|
||||||
violet: {
|
|
||||||
50: "#f5f3ff",
|
|
||||||
100: "#ede9fe",
|
|
||||||
200: "#ddd6fe",
|
|
||||||
300: "#c4b5fd",
|
|
||||||
400: "#a78bfa",
|
|
||||||
500: "#8b5cf6",
|
|
||||||
600: "#7c3aed",
|
|
||||||
700: "#6d28d9",
|
|
||||||
800: "#5b21b6",
|
|
||||||
900: "#4c1d95",
|
|
||||||
},
|
|
||||||
purple: {
|
|
||||||
50: "#faf5ff",
|
|
||||||
100: "#f3e8ff",
|
|
||||||
200: "#e9d5ff",
|
|
||||||
300: "#d8b4fe",
|
|
||||||
400: "#c084fc",
|
|
||||||
500: "#a855f7",
|
|
||||||
600: "#9333ea",
|
|
||||||
700: "#7e22ce",
|
|
||||||
800: "#6b21a8",
|
|
||||||
900: "#581c87",
|
|
||||||
},
|
|
||||||
fuchsia: {
|
|
||||||
50: "#fdf4ff",
|
|
||||||
100: "#fae8ff",
|
|
||||||
200: "#f5d0fe",
|
|
||||||
300: "#f0abfc",
|
|
||||||
400: "#e879f9",
|
|
||||||
500: "#d946ef",
|
|
||||||
600: "#c026d3",
|
|
||||||
700: "#a21caf",
|
|
||||||
800: "#86198f",
|
|
||||||
900: "#701a75",
|
|
||||||
},
|
|
||||||
pink: {
|
|
||||||
50: "#fdf2f8",
|
|
||||||
100: "#fce7f3",
|
|
||||||
200: "#fbcfe8",
|
|
||||||
300: "#f9a8d4",
|
|
||||||
400: "#f472b6",
|
|
||||||
500: "#ec4899",
|
|
||||||
600: "#db2777",
|
|
||||||
700: "#be185d",
|
|
||||||
800: "#9d174d",
|
|
||||||
900: "#831843",
|
|
||||||
},
|
|
||||||
rose: {
|
|
||||||
50: "#fff1f2",
|
|
||||||
100: "#ffe4e6",
|
|
||||||
200: "#fecdd3",
|
|
||||||
300: "#fda4af",
|
|
||||||
400: "#fb7185",
|
|
||||||
500: "#f43f5e",
|
|
||||||
600: "#e11d48",
|
|
||||||
700: "#be123c",
|
|
||||||
800: "#9f1239",
|
|
||||||
900: "#881337",
|
|
||||||
},
|
|
||||||
gray: {
|
|
||||||
50: "#f9fafb",
|
|
||||||
100: "#f3f4f6",
|
|
||||||
200: "#e5e7eb",
|
|
||||||
300: "#d1d5db",
|
|
||||||
400: "#9ca3af",
|
|
||||||
500: "#6b7280",
|
|
||||||
600: "#4b5563",
|
|
||||||
700: "#374151",
|
|
||||||
800: "#1f2937",
|
|
||||||
900: "#111827",
|
|
||||||
},
|
|
||||||
red: {
|
|
||||||
50: "#fef2f2",
|
|
||||||
100: "#fee2e2",
|
|
||||||
200: "#fecaca",
|
|
||||||
300: "#fca5a5",
|
|
||||||
400: "#f87171",
|
|
||||||
500: "#ef4444",
|
|
||||||
600: "#dc2626",
|
|
||||||
700: "#b91c1c",
|
|
||||||
800: "#991b1b",
|
|
||||||
900: "#7f1d1d",
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
100: "#ffedd5",
|
|
||||||
200: "#ffedd5",
|
|
||||||
300: "#FDC089",
|
|
||||||
400: "#fb923c",
|
|
||||||
500: "#f97316",
|
|
||||||
600: "#ea580c",
|
|
||||||
700: "#c2410c",
|
|
||||||
800: "#c2410c",
|
|
||||||
},
|
|
||||||
yellow: {
|
|
||||||
50: "#fefce8",
|
|
||||||
100: "#fef9c3",
|
|
||||||
200: "#fef08a",
|
|
||||||
300: "#fde047",
|
|
||||||
400: "#facc15",
|
|
||||||
500: "#eab308",
|
|
||||||
600: "#ca8a04",
|
|
||||||
700: "#a16207",
|
|
||||||
800: "#854d0e",
|
|
||||||
900: "#713f12",
|
|
||||||
},
|
|
||||||
green: {
|
|
||||||
50: "#f0fdf4",
|
|
||||||
100: "#dcfce7",
|
|
||||||
200: "#bbf7d0",
|
|
||||||
300: "#86efac",
|
|
||||||
400: "#4ade80",
|
|
||||||
500: "#22c55e",
|
|
||||||
600: "#16a34a",
|
|
||||||
700: "#15803d",
|
|
||||||
800: "#166534",
|
|
||||||
900: "#14532d",
|
|
||||||
},
|
|
||||||
blue: {
|
|
||||||
50: "#eff6ff",
|
|
||||||
100: "#dbeafe",
|
|
||||||
200: "#bfdbfe",
|
|
||||||
300: "#93c5fd",
|
|
||||||
400: "#60a5fa",
|
|
||||||
500: "#3b82f6",
|
|
||||||
600: "#2563eb",
|
|
||||||
700: "#1d4ed8",
|
|
||||||
800: "#1e40af",
|
|
||||||
900: "#1e3a8a",
|
|
||||||
},
|
|
||||||
|
|
||||||
indigo: {
|
|
||||||
50: "#eef2ff",
|
|
||||||
100: "#e0e7ff",
|
|
||||||
200: "#c7d2fe",
|
|
||||||
300: "#a5b4fc",
|
|
||||||
400: "#818cf8",
|
|
||||||
500: "#6366f1",
|
|
||||||
600: "#4f46e5",
|
|
||||||
700: "#4338ca",
|
|
||||||
800: "#3730a3",
|
|
||||||
900: "#312e81",
|
|
||||||
},
|
|
||||||
frost: {
|
|
||||||
100: "#dfe6ee",
|
|
||||||
200: "#bfcdde",
|
|
||||||
300: "#9eb3cd",
|
|
||||||
400: "#7e9abd",
|
|
||||||
500: "#5e81ac",
|
|
||||||
600: "#4b678a",
|
|
||||||
700: "#384d67",
|
|
||||||
800: "#263445",
|
|
||||||
900: "#131a22",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
// add double quotes if there is space in font name
|
|
||||||
main: ["Inter", "sans-serif"],
|
|
||||||
mono: [
|
|
||||||
"ui-monospace",
|
|
||||||
"SFMono-Regular",
|
|
||||||
"Menlo",
|
|
||||||
"Monaco",
|
|
||||||
"Consolas",
|
|
||||||
'"Liberation Mono"',
|
|
||||||
'"Courier New"',
|
|
||||||
"monospace",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
extend: {
|
|
||||||
maxHeight: {
|
|
||||||
"1/2": "50vh",
|
|
||||||
"2/3": "66vh",
|
|
||||||
"3/4": "75vh",
|
|
||||||
},
|
|
||||||
minWidth: {
|
|
||||||
"1/4": "25%",
|
|
||||||
"1/3": "33%",
|
|
||||||
"1/2": "50%",
|
|
||||||
"2/3": "66%",
|
|
||||||
"3/4": "75%",
|
|
||||||
},
|
|
||||||
minHeight: {
|
|
||||||
"1/2": "50vh",
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
"2/3": "66vh",
|
|
||||||
},
|
|
||||||
transitionProperty: {
|
|
||||||
height: "height",
|
|
||||||
},
|
|
||||||
fontSize: {
|
|
||||||
"2xs": "0.7rem",
|
|
||||||
},
|
|
||||||
screens: {
|
|
||||||
fhd: "1900px",
|
|
||||||
qhd: "2500px",
|
|
||||||
"4k": "3800px",
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
"spin-counter-clockwise": "spin-counter-clockwise 1s linear infinite",
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
"spin-counter-clockwise": {
|
|
||||||
to: { transform: "rotate(-360deg)" },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: [
|
|
||||||
require("@tailwindcss/forms"),
|
|
||||||
require("@tailwindcss/typography"),
|
|
||||||
plugin(({ addBase, addComponents, addUtilities, theme }) => {
|
|
||||||
addBase({
|
|
||||||
".embedded": {
|
|
||||||
fontFamily: theme("fontFamily.main"),
|
|
||||||
fontSize: theme("fontSize.base"),
|
|
||||||
fontWeight: theme("fontWeight.normal"),
|
|
||||||
color: theme("colors.gray.900"),
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: theme("fontSize.lg"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
".embedded": {
|
|
||||||
h1: {
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: theme("fontWeight.extrabold"),
|
|
||||||
lineHeight: "1.05",
|
|
||||||
color: theme("colors.gray.800"),
|
|
||||||
[`@media (min-width: ${theme("screens.lg")})`]: {
|
|
||||||
fontSize: "26px",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.fhd")})`]: {
|
|
||||||
fontSize: "29px",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "34px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
h2: {
|
|
||||||
fontSize: "20px",
|
|
||||||
fontWeight: theme("fontWeight.extrabold"),
|
|
||||||
lineHeight: "1.1",
|
|
||||||
color: theme("colors.gray.700"),
|
|
||||||
[`@media (min-width: ${theme("screens.fhd")})`]: {
|
|
||||||
fontSize: "22px",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "25px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mark: {
|
|
||||||
backgroundColor: theme("colors.yellow.200"),
|
|
||||||
borderRadius: theme("borderRadius.sm"),
|
|
||||||
},
|
|
||||||
h3: {
|
|
||||||
fontSize: "18px",
|
|
||||||
fontWeight: theme("fontWeight.bold"),
|
|
||||||
lineHeight: "1.2",
|
|
||||||
color: theme("colors.gray.600"),
|
|
||||||
[`@media (min-width: ${theme("screens.fhd")})`]: {
|
|
||||||
fontSize: "20px",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "22px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
h4: {
|
|
||||||
fontSize: "18px",
|
|
||||||
fontWeight: theme("fontWeight.semibold"),
|
|
||||||
lineHeight: "1.3",
|
|
||||||
color: theme("colors.gray.600"),
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "20px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
h5: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: theme("fontWeight.semibold"),
|
|
||||||
lineHeight: "1.5",
|
|
||||||
color: theme("colors.gray.600"),
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "18px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
h6: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: theme("fontWeight.medium"),
|
|
||||||
lineHeight: "1.5",
|
|
||||||
color: theme("colors.gray.600"),
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "18px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
fontWeight: theme("fontWeight.semibold"),
|
|
||||||
},
|
|
||||||
a: {
|
|
||||||
color: theme("colors.blue.500"),
|
|
||||||
},
|
|
||||||
'input:not(.windmillapp),input[type="text"]:not(.windmillapp),input[type="email"]:not(.windmillapp),input[type="url"]:not(.windmillapp),input[type="password"]:not(.windmillapp),input[type="number"]:not(.windmillapp),input[type="date"]:not(.windmillapp),input[type="datetime-local"]:not(.windmillapp),input[type="month"]:not(.windmillapp),input[type="search"]:not(.windmillapp),input[type="tel"]:not(.windmillapp),input[type="time"]:not(.windmillapp),input[type="week"]:not(.windmillapp),textarea:not(.windmillapp):not(.monaco-mouse-cursor-text),select:not(.windmillapp)':
|
|
||||||
{
|
|
||||||
display: "block",
|
|
||||||
fontSize: theme("fontSize.sm"),
|
|
||||||
width: "100%",
|
|
||||||
padding: `${theme("spacing.1")} ${theme("spacing.2")}`,
|
|
||||||
border: `1px solid ${theme("colors.gray.300")}`,
|
|
||||||
borderRadius: theme("borderRadius.md"),
|
|
||||||
"&:focus": {
|
|
||||||
"--tw-ring-color": theme("colors.indigo.100"),
|
|
||||||
"--tw-ring-offset-shadow":
|
|
||||||
"var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
|
|
||||||
"--tw-ring-shadow":
|
|
||||||
"var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
|
|
||||||
boxShadow:
|
|
||||||
"var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
|
|
||||||
},
|
|
||||||
"&:disabled,[disabled]": {
|
|
||||||
backgroundColor: theme("colors.gray.100") + " !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"button:disabled,button[disabled=true],a:disabled,a[disabled=true]": {
|
|
||||||
pointerEvents: "none",
|
|
||||||
cursor: "default",
|
|
||||||
filter: "grayscale(1)",
|
|
||||||
},
|
|
||||||
"pre code.hljs": {
|
|
||||||
padding: "0px !important",
|
|
||||||
fontFamily: theme("fontFamily.mono"),
|
|
||||||
fontSize: theme("fontSize.sm") + " !important",
|
|
||||||
lineHeight: theme("lineHeight.4") + " !important",
|
|
||||||
},
|
|
||||||
".h1-textarea": {
|
|
||||||
fontSize: "24px !important",
|
|
||||||
fontWeight: `${theme("fontWeight.extrabold")} !important`,
|
|
||||||
lineHeight: "1.05 !important",
|
|
||||||
color: theme("!colors.gray.800"),
|
|
||||||
[`@media (min-width: ${theme("screens.lg")})`]: {
|
|
||||||
fontSize: "26px !important",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.fhd")})`]: {
|
|
||||||
fontSize: "29px !important",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "34px !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
".h3-textarea": {
|
|
||||||
fontSize: "18px !important",
|
|
||||||
fontWeight: `${theme("fontWeight.bold")} !important`,
|
|
||||||
lineHeight: "1.2 !important",
|
|
||||||
color: theme("!colors.gray.600"),
|
|
||||||
[`@media (min-width: ${theme("screens.fhd")})`]: {
|
|
||||||
fontSize: "20px !important",
|
|
||||||
},
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "22px !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
".p-textarea": {
|
|
||||||
fontSize: "16px !important",
|
|
||||||
fontWeight: `${theme("fontWeight.normal")} !important`,
|
|
||||||
lineHeight: "1.5 !important",
|
|
||||||
color: theme("!colors.gray.600"),
|
|
||||||
[`@media (min-width: ${theme("screens.fhd")})`]: {
|
|
||||||
fontSize: "18px !important",
|
|
||||||
},
|
|
||||||
|
|
||||||
[`@media (min-width: ${theme("screens.qhd")})`]: {
|
|
||||||
fontSize: "20px !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
addComponents({
|
|
||||||
".table-custom": {
|
|
||||||
"& th": {
|
|
||||||
paddingTop: theme("spacing.3"),
|
|
||||||
paddingRight: theme("spacing.1"),
|
|
||||||
paddingLeft: theme("spacing.1"),
|
|
||||||
paddingBottom: theme("spacing.3"),
|
|
||||||
fontSize: theme("fontSize.sm"),
|
|
||||||
textAlign: "left",
|
|
||||||
fontWeight: theme("fontWeight.semibold"),
|
|
||||||
color: theme("colors.gray.900"),
|
|
||||||
textTransform: "capitalize",
|
|
||||||
},
|
|
||||||
"& td": {
|
|
||||||
paddingLeft: theme("spacing.1"),
|
|
||||||
paddingRight: theme("spacing.1"),
|
|
||||||
paddingTop: theme("spacing.2"),
|
|
||||||
paddingBottom: theme("spacing.2"),
|
|
||||||
fontSize: theme("fontSize.sm"),
|
|
||||||
color: theme("colors.gray.700"),
|
|
||||||
},
|
|
||||||
"& tbody > :not([hidden]) ~ :not([hidden])": {
|
|
||||||
borderTop: `1px solid ${theme("colors.gray.200")}`,
|
|
||||||
},
|
|
||||||
"& tbody > tr:hover": {
|
|
||||||
backgroundColor: theme("colors.gray.50"),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
".commit-hash": {
|
|
||||||
fontSize: theme("fontSize.2xs"),
|
|
||||||
color: theme("colors.gray.500"),
|
|
||||||
backgroundColor: theme("colors.gray.200"),
|
|
||||||
fontFamily: theme("fontFamily.mono"),
|
|
||||||
},
|
|
||||||
".input-error": {
|
|
||||||
borderColor: `${theme("colors.red.500")} !important`,
|
|
||||||
},
|
|
||||||
".box": {
|
|
||||||
borderWidth: "1px",
|
|
||||||
borderRadius: theme("borderRadius.sm"),
|
|
||||||
boxShadow: theme("boxShadow.sm"),
|
|
||||||
padding: theme("spacing.4"),
|
|
||||||
},
|
|
||||||
".animate-skeleton": {
|
|
||||||
animation: theme("animation.pulse"),
|
|
||||||
backgroundColor: theme("colors.blue.100"),
|
|
||||||
borderRadius: theme("borderRadius.DEFAULT"),
|
|
||||||
},
|
|
||||||
".text-black-gradient": {
|
|
||||||
color: "transparent",
|
|
||||||
backgroundClip: "text",
|
|
||||||
backgroundImage: `linear-gradient(to right, ${theme(
|
|
||||||
"colors.black"
|
|
||||||
)}, ${theme("colors.gray.600")})`,
|
|
||||||
},
|
|
||||||
".splitpanes__pane": {
|
|
||||||
backgroundColor: theme("colors.white") + " !important",
|
|
||||||
overflow: "auto !important",
|
|
||||||
},
|
|
||||||
".splitpanes__splitter": {
|
|
||||||
backgroundColor: theme("colors.gray.300") + " !important",
|
|
||||||
margin: "0 !important",
|
|
||||||
border: "none !important",
|
|
||||||
"&::after": {
|
|
||||||
backgroundColor: "#3f83f850 !important",
|
|
||||||
margin: "0 !important",
|
|
||||||
transform: "none !important",
|
|
||||||
zIndex: "1001 !important",
|
|
||||||
transition: "opacity 200ms !important",
|
|
||||||
opacity: "0",
|
|
||||||
"--splitter-hover-size": "5px",
|
|
||||||
"--splitter-hover-adjustment": "-2px",
|
|
||||||
},
|
|
||||||
"&:hover::after": {
|
|
||||||
opacity: "1",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
".splitpanes--vertical>.splitpanes__splitter": {
|
|
||||||
width: "1px !important",
|
|
||||||
"&::before": {
|
|
||||||
left: "1px !important",
|
|
||||||
width: "0px !important",
|
|
||||||
marginLeft: "0 !important",
|
|
||||||
},
|
|
||||||
"&::after": {
|
|
||||||
top: "0 !important",
|
|
||||||
height: "100% !important",
|
|
||||||
left: "var(--splitter-hover-adjustment) !important",
|
|
||||||
width: "var(--splitter-hover-size) !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
".splitpanes--horizontal>.splitpanes__splitter": {
|
|
||||||
height: "1px !important",
|
|
||||||
"&::before": {
|
|
||||||
top: "1px !important",
|
|
||||||
height: "0px !important",
|
|
||||||
marginTop: "0 !important",
|
|
||||||
},
|
|
||||||
"&::after": {
|
|
||||||
top: "var(--splitter-hover-adjustment) !important",
|
|
||||||
height: "var(--splitter-hover-size) !important",
|
|
||||||
left: "0 !important",
|
|
||||||
width: "100% !important",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
addUtilities({
|
|
||||||
".separator": {
|
|
||||||
backgroundColor: "#ddd !important",
|
|
||||||
},
|
|
||||||
".center-center": {
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
".ellipsize": {
|
|
||||||
overflow: "hidden",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
},
|
|
||||||
/** Set the '-webkit-line-clamp' property to the desired number of lines.
|
|
||||||
*
|
|
||||||
* Eg.: `class="ellipsize-multi-line [-webkit-line-clamp:3]"`
|
|
||||||
*/
|
|
||||||
".ellipsize-multi-line": {
|
|
||||||
display: "-webkit-box",
|
|
||||||
"-webkit-box-orient": "vertical",
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
".disabled": {
|
|
||||||
pointerEvents: "none",
|
|
||||||
cursor: "default",
|
|
||||||
filter: "grayscale(1)",
|
|
||||||
},
|
|
||||||
".scrollbar-hidden": {
|
|
||||||
"-ms-overflow-style": "none",
|
|
||||||
"scrollbar-width": "none",
|
|
||||||
"&::-webkit-scrollbar": {
|
|
||||||
display: "none",
|
|
||||||
width: "0px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
darkMode: "class",
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = config;
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ESNext",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"lib": ["ESNext", "DOM"],
|
|
||||||
"moduleResolution": "Node",
|
|
||||||
"jsx": "react",
|
|
||||||
"strict": true,
|
|
||||||
"sourceMap": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noImplicitReturns": true,
|
|
||||||
"skipLibCheck": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
import { defineConfig } from "vite";
|
|
||||||
import react from "@vitejs/plugin-react";
|
|
||||||
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
|
||||||
import { readFileSync } from "fs";
|
|
||||||
import { fileURLToPath } from "url";
|
|
||||||
|
|
||||||
const file = fileURLToPath(
|
|
||||||
new URL("../frontend/package.json", import.meta.url)
|
|
||||||
);
|
|
||||||
const json = readFileSync(file, "utf8");
|
|
||||||
const version = JSON.parse(json);
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [svelte(), react()],
|
|
||||||
server: {
|
|
||||||
port: 3000,
|
|
||||||
proxy: {
|
|
||||||
"^/api/.*": {
|
|
||||||
target: process.env.REMOTE ?? "https://app.windmill.dev/",
|
|
||||||
changeOrigin: true,
|
|
||||||
cookieDomainRewrite: "localhost",
|
|
||||||
},
|
|
||||||
// Proxying websockets or socket.io: ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
|
|
||||||
"^/ws/.*": {
|
|
||||||
target: process.env.REMOTE_LSP ?? "https://app.windmill.dev",
|
|
||||||
changeOrigin: true,
|
|
||||||
ws: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
build: {
|
|
||||||
lib: {
|
|
||||||
entry: "./src/main.tsx",
|
|
||||||
name: "FileViewer",
|
|
||||||
fileName: "file-viewer",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
optimizeDeps: {
|
|
||||||
include: ["highlight.js", "highlight.js/lib/core"],
|
|
||||||
},
|
|
||||||
assetsInclude: ["**/*.wasm"],
|
|
||||||
define: {
|
|
||||||
__pkg__: {
|
|
||||||
version: version,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user