Lidia on react reactflow

docs/for-devs/lidia-flow-interactive-diagrams.mdx

@@ -0,0 +1,133 @@
+---
+title: LidiaFlow Interactive Diagrams
+description: Learn how to use LidiaFlow, a ReactFlow-based component for creating interactive, click-to-explore diagrams in your Arbitrum documentation
+---
+
+import LidiaFlowDiagram from '@site/src/components/LidiaFlow';
+import exampleConfig from '@site/static/diagrams/lidia-flow-example/config.json';
+
+# LidiaFlow Interactive Diagrams
+
+LidiaFlow is a ReactFlow-based component that enables interactive, click-to-morph diagrams for exploring complex technical concepts. Built on top of ReactFlow, it provides a more powerful and flexible alternative to traditional SVG-based diagrams while maintaining the simplicity of click-to-explore navigation.
+
+## Example
+
+<LidiaFlowDiagram config={exampleConfig} />
+
+## How it works
+
+- **Click** on nodes with blue highlights to explore deeper levels of detail
+- **Navigate back** using the back button to return to previous states
+- **Tooltips** appear on hover to guide your exploration
+- **Mini-map** in the corner helps you navigate complex diagrams
+- **Zoom and pan** to explore large diagrams with ease
+
+## Using LidiaFlow in your documentation
+
+To add interactive diagrams to your documentation:
+
+1. Define a configuration file with nodes, edges, and navigation flow
+2. Import and use the `LidiaFlowDiagram` component in your MDX files
+
+### Example usage
+
+```mdx
+import LidiaFlowDiagram from '@site/src/components/LidiaFlow';
+import myDiagramConfig from '@site/static/diagrams/my-diagram/config.json';
+
+<LidiaFlowDiagram config={myDiagramConfig} />
+```
+
+### Configuration structure
+
+```json
+{
+  "id": "diagram-id",
+  "title": "Diagram Title",
+  "initialStateId": "overview",
+  "states": [
+    {
+      "id": "overview",
+      "nodes": [
+        {
+          "id": "1",
+          "type": "clickable",
+          "position": { "x": 250, "y": 0 },
+          "data": {
+            "label": "Component Name",
+            "isClickable": true,
+            "tooltip": "Click to explore this component"
+          }
+        }
+      ],
+      "edges": [
+        {
+          "id": "e1-2",
+          "source": "1",
+          "target": "2",
+          "animated": true
+        }
+      ],
+      "clickableAreas": [
+        {
+          "nodeId": "1",
+          "nextStateId": "detail-view"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Configuration Reference
+
+### Top-level configuration
+
+- `id`: Unique identifier for the diagram
+- `title`: Title displayed in the diagram header
+- `initialStateId`: ID of the state to show first
+- `states`: Array of diagram states
+
+### State configuration
+
+- `id`: Unique identifier for the state
+- `nodes`: Array of ReactFlow nodes
+- `edges`: Array of ReactFlow edges
+- `clickableAreas`: Array defining which nodes navigate to which states
+
+### Node configuration
+
+- `id`: Unique node identifier
+- `type`: Node type (use `"clickable"` for interactive nodes)
+- `position`: `{ x, y }` coordinates
+- `data`: Node data including:
+  - `label`: Text displayed in the node
+  - `isClickable`: Whether the node can be clicked
+  - `tooltip`: Hover text for guidance
+
+### Edge configuration
+
+- `id`: Unique edge identifier
+- `source`: Source node ID
+- `target`: Target node ID
+- `animated`: Optional boolean for animated edges
+
+## Best practices
+
+- Keep diagrams simple and focused on one concept per state
+- Use clear, descriptive labels for nodes
+- Provide helpful tooltips to guide users
+- Limit navigation depth to 3-5 levels for optimal user experience
+- Use the mini-map for complex diagrams with many nodes
+- Consider using animated edges to show data flow
+
+## Advanced features
+
+LidiaFlow leverages ReactFlow's powerful features:
+
+- **Mini-map navigation** for large diagrams
+- **Zoom controls** for detailed exploration
+- **Smooth transitions** between states
+- **Custom node types** (extend with your own components)
+- **Keyboard navigation** support
+- **Touch device** compatibility

docs/for-devs/lidia-interactive-diagrams.mdx

@@ -0,0 +1,69 @@
+---
+title: Lidia Interactive Diagrams
+description: Learn how to use Lidia, a React component for creating interactive, click-to-morph diagrams in your Arbitrum documentation
+---
+
+import LidiaDiagram from '@site/src/components/Lidia';
+import exampleConfig from '@site/static/diagrams/example/config.json';
+
+# Lidia Interactive Diagrams
+
+Lidia is a React component that enables interactive, click-to-morph diagrams for exploring complex technical concepts. It's particularly useful for visualizing multi-layered architectures, workflows, and system components.
+
+## Example
+
+<LidiaDiagram config={exampleConfig} />
+
+## How it works
+
+- **Click** on highlighted areas to explore deeper levels of detail
+- **Navigate back** using the back button to return to previous states
+- **Tooltips** appear on hover to guide your exploration
+
+## Using Lidia in your documentation
+
+To add interactive diagrams to your documentation:
+
+1. Create SVG diagrams with clickable areas (elements with unique IDs)
+2. Define a configuration file mapping the navigation flow
+3. Import and use the `LidiaDiagram` component in your MDX files
+
+### Example usage
+
+```mdx
+import LidiaDiagram from '@site/src/components/Lidia';
+import myDiagramConfig from '@site/static/diagrams/my-diagram/config.json';
+
+<LidiaDiagram config={myDiagramConfig} />
+```
+
+### Configuration structure
+
+```json
+{
+  "id": "diagram-id",
+  "title": "Diagram Title",
+  "initialStateId": "overview",
+  "states": [
+    {
+      "id": "overview",
+      "svgPath": "/diagrams/my-diagram/overview.svg",
+      "clickableAreas": [
+        {
+          "id": "area-1",
+          "selector": "#svg-element-id",
+          "nextStateId": "detail-view",
+          "tooltip": "Click to explore"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Best practices
+
+- Keep diagrams simple and focused on one concept per state
+- Use clear, descriptive IDs for clickable areas
+- Provide helpful tooltips to guide users
+- Limit navigation depth to 3-5 levels for optimal user experience

sidebars.js

@@ -46,6 +46,16 @@ const sidebars = {
           id: 'for-devs/dev-tools-and-resources/chain-info',
           label: 'Chain info',
         },
+        {
+          type: 'doc',
+          label: 'Lidia Interactive Diagrams',
+          id: 'for-devs/lidia-interactive-diagrams',
+        },
+        {
+          type: 'doc',
+          label: 'LidiaFlow Interactive Diagrams',
+          id: 'for-devs/lidia-flow-interactive-diagrams',
+        },
       ],
     },
     {

src/css/custom.css

@@ -98,3 +98,6 @@
 .wrapcode code {
   white-space: pre-wrap;
 }
+
+/* Import Lidia component styles */
+@import './lidia.css';

src/css/lidia-flow.css

@@ -0,0 +1,152 @@
+/* Lidia Flow Container */
+.lidia-flow-container {
+  width: 100%;
+  height: 600px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+
+/* Header */
+.lidia-flow-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background-color: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.lidia-flow-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.lidia-flow-back-button {
+  padding: 8px 16px;
+  background-color: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.lidia-flow-back-button:hover {
+  background-color: #2563eb;
+}
+
+.lidia-flow-back-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ReactFlow wrapper */
+.lidia-flow-wrapper {
+  height: calc(100% - 65px);
+  position: relative;
+  background-color: #fafafa;
+}
+
+/* Transition effects */
+.lidia-flow-fade-enter {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.lidia-flow-fade-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
+}
+
+.lidia-flow-fade-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.lidia-flow-fade-exit-active {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
+}
+
+/* Custom Node Styles */
+.lidia-flow-node {
+  background: white;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px 24px;
+  min-width: 150px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.lidia-flow-node-clickable {
+  cursor: pointer;
+}
+
+.lidia-flow-node-clickable:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.lidia-flow-node-selected {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.lidia-flow-node-content {
+  text-align: center;
+}
+
+.lidia-flow-node-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 4px;
+}
+
+.lidia-flow-node-hint {
+  font-size: 12px;
+  color: #3b82f6;
+  margin-top: 8px;
+}
+
+/* Handle styles */
+.lidia-flow-handle {
+  width: 8px;
+  height: 8px;
+  background-color: #3b82f6;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* ReactFlow overrides */
+.react-flow__node.selected .lidia-flow-node {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.react-flow__edge-path {
+  stroke: #9ca3af;
+  stroke-width: 2;
+}
+
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke: #3b82f6;
+}
+
+/* Error state */
+.lidia-flow-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #ef4444;
+  font-size: 16px;
+}