[POC] feat: node-based muxing editor

package.json

@@ -38,6 +38,7 @@
     "@types/prismjs": "^1.26.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@untitled-ui/icons-react": "^0.1.4",
+    "@xyflow/react": "^12.4.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "fuse.js": "^7.0.0",

src/Page.tsx

@@ -11,6 +11,7 @@ import { RouteNotFound } from './routes/route-not-found'
 import { RouteProvider } from './routes/route-providers'
 import { RouteProviderCreate } from './routes/route-provider-create'
 import { RouteProviderUpdate } from './routes/route-provider-update'
+import { RouteMuxes } from './routes/route-mux-config'
 
 export default function Page() {
   return (
@@ -20,6 +21,7 @@ export default function Page() {
       <Route path="/certificates" element={<RouteCertificates />} />
       <Route path="/workspace/:name" element={<RouteWorkspace />} />
       <Route path="/workspaces" element={<RouteWorkspaces />} />
+      <Route path="/muxes" element={<RouteMuxes />} />
       <Route path="/workspace/create" element={<RouteWorkspaceCreation />} />
       <Route
         path="/certificates/security"

src/components/icons/icon-regex.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react'
+
+export const IconRegex = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    {...props}
+  >
+    <path d="M17 3v10" />
+    <path d="m12.67 5.5 8.66 5" />
+    <path d="m12.67 10.5 8.66-5" />
+    <path d="M9 17a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2z" />
+  </svg>
+)

src/features/muxing/components/mux-node-base.tsx

@@ -0,0 +1,55 @@
+import { Handle, Position } from '@xyflow/react'
+import * as config from '../constants/mux-node-config'
+import { twMerge } from 'tailwind-merge'
+import { tv } from 'tailwind-variants'
+import { CSSProperties, ReactNode } from 'react'
+
+const nodeStyles = tv({
+  base: 'w-full overflow-hidden rounded border border-gray-200 bg-base shadow-sm',
+})
+
+export const MuxNodeBase = ({
+  hasSourceRight,
+  hasTargetLeft,
+  children,
+  className,
+  icon: Icon,
+  style,
+}: {
+  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element
+  className?: string
+  children: ReactNode
+  hasTargetLeft?: boolean
+  hasSourceRight?: boolean
+  style?: CSSProperties
+}) => {
+  return (
+    <>
+      {hasTargetLeft ? <Handle type="target" position={Position.Left} /> : null}
+
+      <div
+        style={{
+          height: config.HEIGHT_NODE,
+          ...style,
+        }}
+        className={twMerge(nodeStyles(), 'flex items-center')}
+      >
+        <div
+          className="flex shrink-0 items-center justify-center bg-gray-50"
+          style={{
+            height: config.HEIGHT_NODE,
+            width: config.HEIGHT_NODE,
+          }}
+        >
+          <Icon className="size-5" />
+        </div>
+
+        <div className={twMerge('w-full px-4 py-3', className)}>{children}</div>
+      </div>
+
+      {hasSourceRight ? (
+        <Handle type="source" position={Position.Right} />
+      ) : null}
+    </>
+  )
+}