diff --git a/apps/graph-editor/public/index.html b/apps/graph-editor/index.html similarity index 72% rename from apps/graph-editor/public/index.html rename to apps/graph-editor/index.html index 4b1e1083..372adbd9 100644 --- a/apps/graph-editor/public/index.html +++ b/apps/graph-editor/index.html @@ -4,10 +4,9 @@ @Behave-Graph/React-Flow Graph Editor Example -
- + diff --git a/apps/graph-editor/package.json b/apps/graph-editor/package.json index 9006becf..cc51a633 100644 --- a/apps/graph-editor/package.json +++ b/apps/graph-editor/package.json @@ -3,11 +3,8 @@ "version": "1.0.0", "type": "module", "scripts": { - "build:tsc": "tsc --noEmit", - "build:css": "npx postcss src/styles.css -o public/styles.css", - "build:esbuild": "esbuild src/index.tsx --target=es2020 --bundle --minify --outfile=public/index.js", - "build": "npm run build:tsc && npm run build:css && npm run build:esbuild", - "dev": "npx postcss src/styles.css -o public/styles.css --watch & tsc --noEmit --watch & esbuild src/index.tsx --target=es2018 --bundle --sourcemap --outfile=public/index.js --watch --serve=8001 --servedir=public" + "build": "tsc && vite build", + "dev": "vite" }, "dependencies": { "@behave-graph/core": "*", @@ -20,6 +17,7 @@ "@vitejs/plugin-react": "^2.2.0", "autoprefixer": "^10.4.13", "postcss": "^8.4.19", + "postcss-cli": "^10.1.0", "tailwindcss": "^3.2.4", "vite-plugin-eslint": "^1.8.1", "vite-tsconfig-paths": "^3.6.0" diff --git a/apps/graph-editor/postcss.config.js b/apps/graph-editor/postcss.config.js index 5cbc2c7d..ba807304 100644 --- a/apps/graph-editor/postcss.config.js +++ b/apps/graph-editor/postcss.config.js @@ -1,4 +1,4 @@ -module.exports = { +export default { plugins: { tailwindcss: {}, autoprefixer: {} diff --git a/apps/graph-editor/src/index.tsx b/apps/graph-editor/src/index.tsx index 6476557f..9c430e37 100644 --- a/apps/graph-editor/src/index.tsx +++ b/apps/graph-editor/src/index.tsx @@ -1,5 +1,5 @@ import 'reactflow/dist/style.css'; -import './index.css'; +import './styles.css'; import { GraphJSON } from '@behave-graph/core'; import { Examples, Flow } from '@behave-graph/flow'; diff --git a/apps/graph-editor/tailwind.config.js b/apps/graph-editor/tailwind.config.js index 9506eb28..da4569e7 100644 --- a/apps/graph-editor/tailwind.config.js +++ b/apps/graph-editor/tailwind.config.js @@ -8,5 +8,12 @@ module.exports = { theme: { extend: {} }, - plugins: [] + plugins: [ + { + tailwindcss: {} + }, + { + autoprefixer: {} + } + ] }; diff --git a/apps/graph-editor/vite.config.js b/apps/graph-editor/vite.config.js new file mode 100644 index 00000000..18b28046 --- /dev/null +++ b/apps/graph-editor/vite.config.js @@ -0,0 +1,23 @@ +import { resolve } from 'node:path'; + +import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; +import tsconfigPaths from 'vite-tsconfig-paths'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [tsconfigPaths(), react()], + build: { + target: ['es2020'], + rollupOptions: { + input: { + main: resolve(__dirname, 'index.html') + } + } + }, + optimizeDeps: { + esbuildOptions: { + target: 'es2020' + } + } +}); diff --git a/package-lock.json b/package-lock.json index 4db34f7b..1b090c54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,6 +84,7 @@ "@vitejs/plugin-react": "^2.2.0", "autoprefixer": "^10.4.13", "postcss": "^8.4.19", + "postcss-cli": "^10.1.0", "tailwindcss": "^3.2.4", "vite-plugin-eslint": "^1.8.1", "vite-tsconfig-paths": "^3.6.0" @@ -7618,6 +7619,15 @@ "node": ">= 0.8" } }, + "node_modules/dependency-graph": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/deprecation": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", @@ -9016,9 +9026,10 @@ "license": "Apache-2.0" }, "node_modules/fast-glob": { - "version": "3.2.12", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz", + "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==", "dev": true, - "license": "MIT", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -9529,6 +9540,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/get-stdin": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz", + "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/get-stream": { "version": "6.0.1", "dev": true, @@ -16269,6 +16292,113 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-cli": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz", + "integrity": "sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==", + "dev": true, + "dependencies": { + "chokidar": "^3.3.0", + "dependency-graph": "^0.11.0", + "fs-extra": "^11.0.0", + "get-stdin": "^9.0.0", + "globby": "^13.0.0", + "picocolors": "^1.0.0", + "postcss-load-config": "^4.0.0", + "postcss-reporter": "^7.0.0", + "pretty-hrtime": "^1.0.3", + "read-cache": "^1.0.0", + "slash": "^5.0.0", + "yargs": "^17.0.0" + }, + "bin": { + "postcss": "index.js" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-cli/node_modules/fs-extra": { + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "node_modules/postcss-cli/node_modules/globby": { + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz", + "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==", + "dev": true, + "dependencies": { + "dir-glob": "^3.0.1", + "fast-glob": "^3.3.0", + "ignore": "^5.2.4", + "merge2": "^1.4.1", + "slash": "^4.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/postcss-cli/node_modules/globby/node_modules/slash": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", + "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/postcss-cli/node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/postcss-cli/node_modules/slash": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", + "dev": true, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/postcss-cli/node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/postcss-import": { "version": "15.1.0", "dev": true, @@ -16357,6 +16487,26 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-reporter": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz", + "integrity": "sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==", + "dev": true, + "dependencies": { + "picocolors": "^1.0.0", + "thenby": "^1.3.4" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/postcss-selector-parser": { "version": "6.0.13", "dev": true, @@ -16512,6 +16662,15 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/pretty-hrtime": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", + "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/proc-log": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz", @@ -18392,6 +18551,12 @@ "dev": true, "license": "MIT" }, + "node_modules/thenby": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz", + "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==", + "dev": true + }, "node_modules/thenify": { "version": "3.3.1", "dev": true, diff --git a/packages/flow/postcss.config.js b/packages/flow/postcss.config.js new file mode 100644 index 00000000..56d502cc --- /dev/null +++ b/packages/flow/postcss.config.js @@ -0,0 +1,7 @@ +import autoprefixer from 'autoprefixer'; +import tailwindcss from 'tailwindcss'; + +export default { + plugins: [tailwindcss, autoprefixer] +}; + \ No newline at end of file diff --git a/packages/flow/src/components/Node.tsx b/packages/flow/src/components/Node.tsx index 69c65541..a9bb407e 100644 --- a/packages/flow/src/components/Node.tsx +++ b/packages/flow/src/components/Node.tsx @@ -6,7 +6,7 @@ import { isHandleConnected } from '../util/isHandleConnected.js'; import InputSocket from './InputSocket.js'; import NodeContainer from './NodeContainer.js'; import OutputSocket from './OutputSocket.js'; -// import styles from "./Node.module.css" +import styles from './Node.module.css'; type NodeProps = FlowNodeProps & { spec: NodeSpecJSON; diff --git a/packages/flow/tailwind.config.js b/packages/flow/tailwind.config.js new file mode 100644 index 00000000..da4569e7 --- /dev/null +++ b/packages/flow/tailwind.config.js @@ -0,0 +1,19 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './public/index.html', + './src/**/*.{js,ts,jsx,tsx,css}', + '../../packages/flow/dist/**/*.{js,ts,jsx,tsx,css}' + ], + theme: { + extend: {} + }, + plugins: [ + { + tailwindcss: {} + }, + { + autoprefixer: {} + } + ] +};