@opensyster/diagram-ui 0.0.3-alpha

package/.devcontainer/devcontainer.json

@@ -0,0 +1,34 @@
+{
+  "name": "Node.js Development Container",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {
+      "version": "latest"
+    },
+    "ghcr.io/devcontainers-extra/features/bun:1": {
+      "version": "latest"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "ms-vscode.vscode-typescript-next"
+      ],
+      "settings": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[javascript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        }
+      }
+    }
+  },
+  "postCreateCommand": "node --version && npm --version && bun --version",
+  "forwardPorts": [3000, 5173],
+  "remoteUser": "node"
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,14 @@
+# CI workflow using reusable syster-pipelines workflow
+# See: https://github.com/jade-codes/syster-pipelines
+
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  npm-ci:
+    uses: jade-codes/syster-pipelines/.github/workflows/npm-ci.yml@main

package/.github/workflows/release.yml

@@ -0,0 +1,20 @@
+# Release workflow using reusable syster-pipelines workflow
+# See: https://github.com/jade-codes/syster-pipelines
+
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-*'  # Pre-releases like v0.1.0-alpha
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  npm-release:
+    uses: jade-codes/syster-pipelines/.github/workflows/npm-release.yml@main
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/Makefile

@@ -0,0 +1,20 @@
+.PHONY: run-guidelines typecheck test package clean
+
+# Run all quality checks
+run-guidelines: typecheck test
+
+# Run TypeScript type checking
+typecheck:
+	bun run typecheck
+
+# Run tests
+test:
+	bun test
+
+# Package for publishing (placeholder)
+package:
+	@echo "Package target not yet implemented"
+
+# Clean build artifacts
+clean:
+	rm -rf node_modules dist

package/README.md

@@ -0,0 +1,77 @@
+# @syster/diagram-ui
+
+React UI components for SysML v2 diagrams.
+
+## Installation
+
+```bash
+npm install @syster/diagram-ui
+```
+
+## Usage
+
+```tsx
+import { nodeTypes, edgeTypes } from '@syster/diagram-ui';
+import { ReactFlow } from '@xyflow/react';
+
+function DiagramViewer({ nodes, edges }) {
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+    />
+  );
+}
+```
+
+## Features
+
+- React Flow node components for SysML element types
+- React Flow edge components for SysML relationships
+- Styled for VS Code themes
+- Supports all SysML v2 definition and usage types
+
+## Dependencies
+
+- `@xyflow/react` - React Flow library
+- `@opensyster/diagram-core` - Core data types
+
+## License
+
+MIT
+
+## Development
+
+### DevContainer Setup (Recommended)
+
+This project includes a DevContainer configuration for a consistent development environment.
+
+**Using VS Code:**
+1. Install the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+2. Open this repository in VS Code
+3. Click "Reopen in Container" when prompted (or use Command Palette: "Dev Containers: Reopen in Container")
+
+**What's included:**
+- Node.js 20 LTS
+- Bun runtime
+- ESLint, Prettier
+- GitHub CLI
+- All VS Code extensions pre-configured
+
+### Manual Setup
+
+If not using DevContainer:
+
+```bash
+# Install dependencies
+npm install
+# or
+bun install
+
+# Run tests
+npm test
+# or
+bun test
+```

package/bunfig.toml

@@ -0,0 +1,8 @@
+[test]
+preload = ["./test-setup.ts"]
+coverage = true
+coverageDir = "coverage"
+coverageReporter = ["text", "lcov"]
+coveragePathIgnorePatterns = ["**/test-setup.ts", "**/__mocks__/**"]
+coverageSkipTestFiles = true
+coverageThreshold = { global = { branches = 95, functions = 95, lines = 95, statements = 95 } }

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@opensyster/diagram-ui",
+  "version": "0.0.3-alpha",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jade-codes/syster-diagram-ui"
+  },
+  "scripts": {
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opensyster/diagram-core": "^0.0.3-alpha",
+    "@xyflow/react": "^12.10.0",
+    "elkjs": "^0.9.3",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.3.1",
+    "@types/bun": "^1.2.14",
+    "@types/react": "^18.2.0",
+    "happy-dom": "^20.1.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@xyflow/react": "^12.0.0",
+    "react": "^18.2.0"
+  }
+}

package/src/__tests__/edgeFactory.test.tsx

@@ -0,0 +1,387 @@
+import { describe, test, expect, mock, afterEach } from 'bun:test';
+import { render, cleanup } from '@testing-library/react';
+import { EDGE_TYPES } from '@opensyster/diagram-core';
+import { MarkerType, Position } from '@xyflow/react';
+
+// Mock @xyflow/react components
+mock.module('@xyflow/react', () => ({
+  BaseEdge: ({ id, path, style }: { id: string; path: string; style?: object }) => (
+    <path data-testid={`edge-${id}`} d={path} style={style} />
+  ),
+  EdgeLabelRenderer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="edge-label-renderer">{children}</div>
+  ),
+  getSmoothStepPath: () => ['M0,0 L100,100', 50, 50],
+  MarkerType: { Arrow: 'arrow', ArrowClosed: 'arrowclosed' },
+  Position: { Top: 'top', Bottom: 'bottom', Left: 'left', Right: 'right' },
+}));
+
+import { EDGE_CONFIGS, getEdgeConfig, createSysMLEdge, edgeTypes } from '../edges';
+import type { EdgeConfig } from '../edges';
+
+// Cleanup after each test to prevent DOM pollution
+afterEach(() => {
+  cleanup();
+});
+
+describe('EDGE_CONFIGS', () => {
+  test('has configuration for all EDGE_TYPES', () => {
+    const edgeTypeValues = Object.values(EDGE_TYPES);
+
+    for (const edgeType of edgeTypeValues) {
+      expect(EDGE_CONFIGS[edgeType]).toBeDefined();
+    }
+  });
+
+  test('specialization edge has correct config', () => {
+    const config = EDGE_CONFIGS[EDGE_TYPES.SPECIALIZATION];
+
+    expect(config.strokeColor).toBe('#475569');
+    expect(config.strokeWidth).toBe(2);
+    expect(config.markerEnd).toBe(MarkerType.ArrowClosed);
+    expect(config.label).toBe('specializes');
+  });
+
+  test('composition edge has correct config', () => {
+    const config = EDGE_CONFIGS[EDGE_TYPES.COMPOSITION];
+
+    expect(config.strokeColor).toBe('#2563eb');
+    expect(config.strokeWidth).toBe(2);
+    expect(config.markerEnd).toBe(MarkerType.ArrowClosed);
+  });
+
+  test('typing edge is dashed', () => {
+    const config = EDGE_CONFIGS[EDGE_TYPES.TYPING];
+
+    expect(config.strokeDasharray).toBe('5 5');
+    expect(config.markerEnd).toBe(MarkerType.Arrow);
+  });
+
+  test('satisfy edge has stereotype label', () => {
+    const config = EDGE_CONFIGS[EDGE_TYPES.SATISFY];
+
+    expect(config.label).toBe('«satisfy»');
+    expect(config.strokeColor).toBe('#d97706');
+  });
+
+  test('perform edge has behavioral color', () => {
+    const config = EDGE_CONFIGS[EDGE_TYPES.PERFORM];
+
+    expect(config.strokeColor).toBe('#059669');
+    expect(config.label).toBe('«perform»');
+  });
+
+  test('subsetting and cross-subsetting have different labels', () => {
+    const subsettingConfig = EDGE_CONFIGS[EDGE_TYPES.SUBSETTING];
+    const crossSubsettingConfig = EDGE_CONFIGS[EDGE_TYPES.CROSS_SUBSETTING];
+
+    expect(subsettingConfig.label).toBe('subsets');
+    expect(crossSubsettingConfig.label).toBe('cross-subsets');
+    expect(subsettingConfig.label).not.toBe(crossSubsettingConfig.label);
+  });
+});
+
+describe('getEdgeConfig', () => {
+  test('returns config for known edge type', () => {
+    const config = getEdgeConfig(EDGE_TYPES.SPECIALIZATION);
+
+    expect(config.strokeColor).toBe('#475569');
+    expect(config.label).toBe('specializes');
+  });
+
+  test('returns default config for unknown edge type', () => {
+    const config = getEdgeConfig('unknown_edge_type');
+
+    expect(config.strokeColor).toBe('#475569');
+    expect(config.strokeWidth).toBe(2);
+    expect(config.markerEnd).toBe(MarkerType.ArrowClosed);
+  });
+});
+
+describe('createSysMLEdge', () => {
+  test('creates edge component from config', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#ff0000',
+      strokeWidth: 3,
+      markerEnd: MarkerType.Arrow,
+      label: 'test',
+    };
+
+    const EdgeComponent = createSysMLEdge(config);
+    expect(EdgeComponent).toBeDefined();
+    expect(typeof EdgeComponent).toBe('function');
+  });
+
+  test('created edge has correct displayName without edgeType', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#ff0000',
+      strokeWidth: 3,
+      markerEnd: MarkerType.Arrow,
+      label: 'test',
+    };
+
+    const EdgeComponent = createSysMLEdge(config);
+    expect(EdgeComponent.displayName).toBe('SysMLEdge');
+  });
+
+  test('created edge has unique displayName with edgeType', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#ff0000',
+      strokeWidth: 3,
+      markerEnd: MarkerType.Arrow,
+      label: 'test',
+    };
+
+    const EdgeComponent = createSysMLEdge(config, 'SPECIALIZATION');
+    expect(EdgeComponent.displayName).toBe('SpecializationEdge');
+  });
+
+  test('created edge has unique displayName for multi-word edge types', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#ff0000',
+      strokeWidth: 3,
+      markerEnd: MarkerType.Arrow,
+      label: 'test',
+    };
+
+    const EdgeComponent = createSysMLEdge(config, 'CROSS_SUBSETTING');
+    expect(EdgeComponent.displayName).toBe('CrossSubsettingEdge');
+  });
+
+  test('created edge renders with correct styles', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#ff0000',
+      strokeWidth: 3,
+      markerEnd: MarkerType.Arrow,
+      label: 'test-label',
+    };
+
+    const EdgeComponent = createSysMLEdge(config);
+
+    const { container, getByText } = render(
+      <EdgeComponent
+        id="test-edge"
+        source="node1"
+        target="node2"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+      />
+    );
+
+    // Edge path should be rendered
+    const path = container.querySelector('[data-testid="edge-test-edge"]');
+    expect(path).not.toBeNull();
+
+    // Label should be rendered
+    expect(getByText('test-label')).not.toBeNull();
+  });
+
+  test('created edge shows data label over config label', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#ff0000',
+      strokeWidth: 3,
+      markerEnd: MarkerType.Arrow,
+      label: 'config-label',
+    };
+
+    const EdgeComponent = createSysMLEdge(config);
+
+    const { getByText, queryByText } = render(
+      <EdgeComponent
+        id="test-edge"
+        source="node1"
+        target="node2"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+        data={{ label: 'data-label' }}
+      />
+    );
+
+    // Data label should be used instead of config label
+    expect(getByText('data-label')).not.toBeNull();
+    expect(queryByText('config-label')).toBeNull();
+  });
+
+  test('created edge shows multiplicity for composition', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#2563eb',
+      strokeWidth: 2,
+      markerEnd: MarkerType.ArrowClosed,
+    };
+
+    const EdgeComponent = createSysMLEdge(config);
+
+    const { getByText } = render(
+      <EdgeComponent
+        id="test-edge"
+        source="node1"
+        target="node2"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+        data={{ multiplicity: '4' }}
+      />
+    );
+
+    expect(getByText('[4]')).not.toBeNull();
+  });
+});
+
+describe('edgeTypes', () => {
+  test('has entry for each EDGE_TYPE', () => {
+    const edgeTypeValues = Object.values(EDGE_TYPES);
+
+    for (const edgeType of edgeTypeValues) {
+      expect(edgeTypes[edgeType]).toBeDefined();
+      expect(typeof edgeTypes[edgeType]).toBe('function');
+    }
+  });
+
+  test('specialization edge renders correctly', () => {
+    const SpecializationEdge = edgeTypes[EDGE_TYPES.SPECIALIZATION];
+
+    const { container, getByText } = render(
+      <SpecializationEdge
+        id="spec-edge"
+        source="child"
+        target="parent"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+      />
+    );
+
+    const path = container.querySelector('[data-testid="edge-spec-edge"]');
+    expect(path).not.toBeNull();
+    expect(getByText('specializes')).not.toBeNull();
+  });
+
+  test('composition edge renders correctly', () => {
+    const CompositionEdge = edgeTypes[EDGE_TYPES.COMPOSITION];
+
+    const { container } = render(
+      <CompositionEdge
+        id="comp-edge"
+        source="container"
+        target="contained"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+        data={{ multiplicity: '*' }}
+      />
+    );
+
+    const path = container.querySelector('[data-testid="edge-comp-edge"]');
+    expect(path).not.toBeNull();
+  });
+
+  test('typing edge renders with dashed style', () => {
+    const TypingEdge = edgeTypes[EDGE_TYPES.TYPING];
+
+    const { container, getByText } = render(
+      <TypingEdge
+        id="typing-edge"
+        source="usage"
+        target="def"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+      />
+    );
+
+    const path = container.querySelector('[data-testid="edge-typing-edge"]');
+    expect(path).not.toBeNull();
+    expect(getByText(':')).not.toBeNull();
+  });
+
+  test('satisfy edge renders with stereotype label', () => {
+    const SatisfyEdge = edgeTypes[EDGE_TYPES.SATISFY];
+
+    const { getByText } = render(
+      <SatisfyEdge
+        id="satisfy-edge"
+        source="implementation"
+        target="requirement"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+      />
+    );
+
+    expect(getByText('«satisfy»')).not.toBeNull();
+  });
+
+  test('selected edge has highlight color', () => {
+    const SpecEdge = edgeTypes[EDGE_TYPES.SPECIALIZATION];
+
+    const { container } = render(
+      <SpecEdge
+        id="selected-edge"
+        source="child"
+        target="parent"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+        selected={true}
+      />
+    );
+
+    const path = container.querySelector('[data-testid="edge-selected-edge"]');
+    expect(path).not.toBeNull();
+  });
+
+  test('edge without label or multiplicity renders path only', () => {
+    const config: EdgeConfig = {
+      strokeColor: '#000000',
+      strokeWidth: 1,
+      markerEnd: MarkerType.Arrow,
+    };
+
+    const EdgeComponent = createSysMLEdge(config);
+
+    const { container, queryByTestId } = render(
+      <EdgeComponent
+        id="no-label-edge"
+        source="a"
+        target="b"
+        sourceX={0}
+        sourceY={0}
+        targetX={100}
+        targetY={100}
+        sourcePosition={Position.Bottom}
+        targetPosition={Position.Top}
+      />
+    );
+
+    const path = container.querySelector('[data-testid="edge-no-label-edge"]');
+    expect(path).not.toBeNull();
+    // No label renderer should be present
+    expect(queryByTestId('edge-label-renderer')).toBeNull();
+  });
+});