dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial boilerplate

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-05 23:12:58 +01:00
parent 79e2ce75cd
commit 37426258fb
10 changed files with 6347 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Flow + shadcn Canvas</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

6152
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "reactflow-shadcn-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "18.2.0",
"react-dom": "18.2.0",
"reactflow": "^11.0.0",
"shadcn": "^3.8.5"
},
"devDependencies": {
"vite": "^4.0.0",
"@vitejs/plugin-react": "^3.0.0",
"tailwindcss": "^3.4.0",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0",
"typescript": "^5.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0"
}
}

6
postcss.config.cjs Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}

66
src/App.tsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react'
import ReactFlow, {
Controls,
Background,
MiniMap,
addEdge,
applyEdgeChanges,
applyNodeChanges,
useNodesState,
useEdgesState,
Node,
Edge,
Connection,
NodeChange,
EdgeChange,
} from 'reactflow'
import CustomNode from './components/CustomNode'
const initialNodes: Node[] = [
{
id: '1',
position: { x: 250, y: 5 },
data: { label: 'Node A' },
type: 'custom',
},
{
id: '2',
position: { x: 100, y: 200 },
data: { label: 'Node B' },
type: 'custom',
},
]
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2' },
]
export default function App() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
const nodeTypes = React.useMemo(() => ({ custom: CustomNode }), [])
const onConnect = React.useCallback(
(params: Connection) => setEdges((eds) => addEdge(params, eds)),
[setEdges]
)
return (
<div className="reactflow-wrapper">
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
fitView
>
<Background />
<Controls />
<MiniMap />
</ReactFlow>
</div>
)
}

25
src/components/CustomNode.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react'
import { Handle, Position } from 'reactflow'
export default function CustomNode({ data }: any) {
return (
<div className="p-3 rounded-lg bg-white shadow-md border border-gray-200 w-48">
<div className="text-sm font-medium mb-2">{data.label}</div>
<div className="text-xs text-gray-500">Custom content</div>
<Handle
type="target"
position={Position.Left}
id="a"
style={{ background: '#10B981', width: 10, height: 10 }}
/>
<Handle
type="source"
position={Position.Right}
id="b"
style={{ background: '#3B82F6', width: 10, height: 10 }}
/>
</div>
)
}

11
src/main.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './styles.css'
import 'reactflow/dist/style.css'
createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

20
src/styles.css Normal file
View File

@@ -0,0 +1,20 @@
@import "/node_modules/shadcn/dist/tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
#root {
height: 100%;
}
body {
@apply bg-gray-50 text-gray-900;
}
.reactflow-wrapper {
width: 100%;
height: 100vh;
}

10
tailwind.config.cjs Normal file
View File

@@ -0,0 +1,10 @@
module.exports = {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {}
},
plugins: []
}

19
vite.config.ts Normal file
View File

@@ -0,0 +1,19 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
// Ensure PostCSS/Vite can resolve the shadcn tailwind CSS file
'shadcn/dist/tailwind.css': path.resolve(
__dirname,
'node_modules/shadcn/dist/tailwind.css'
),
// Optional: map the package to its dist for other imports
shadcn: path.resolve(__dirname, 'node_modules/shadcn/dist'),
}
}
})