tailwinds works, just missing control bar.

bhouston · Jul 12, 2023 · 24fc328 · 24fc328
1 parent 8db66f5
commit 24fc328
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 13 deletions.
diff --git a/apps/graph-editor/public/index.html → apps/graph-editor/index.html b/apps/graph-editor/public/index.html → apps/graph-editor/index.html
@@ -4,10 +4,9 @@
  <title>@Behave-Graph/React-Flow Graph Editor Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />
- <link rel="stylesheet" href="/index.css" />
  </head>
  <body>
  <div id="root"></div>
- <script type="module" src="/index.js"></script>
+ <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/flow/postcss.config.js b/packages/flow/postcss.config.js
@@ -0,0 +1,7 @@
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+
+export default {
+ plugins: [tailwindcss, autoprefixer]
+};
+
diff --git 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
@@ -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: {}
+ }
+ ]
+};