@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/extensions/flow/styles/modules/CardNode.module.css

@@ -0,0 +1,93 @@
+/**
+ * CardNode Styles
+ * 
+ * Styles for CardNode component using design system tokens.
+ */
+
+.cardContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent; /* Ensure container doesn't interfere */
+  z-index: 1; /* Ensure card is above wrapper but below handles */
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  /* Background and shadow are handled inline in component for better control */
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.cardIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.cardText {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cardLabel {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--color-neutral-dark, #1f2937);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardDescription {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--color-neutral-DEFAULT, #6b7280);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .cardLabel {
+    color: var(--color-neutral-light, #f9fafb);
+  }
+  
+  .cardDescription {
+    color: var(--color-neutral-DEFAULT, #9ca3af);
+  }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+}

package/src/ui/extensions/flow/styles/modules/CustomEdge.module.css

@@ -0,0 +1,47 @@
+/* CustomEdge CSS Module */
+
+.edge {
+  pointer-events: visibleStroke;
+  transition: stroke-width 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
+}
+
+.edge.selectable {
+  cursor: pointer;
+}
+
+.edge:hover {
+  stroke-width: 3.5;
+  opacity: 1;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
+}
+
+.edge.selected {
+  stroke-width: 3.5;
+  opacity: 1;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
+}
+
+.edge.animated path {
+  stroke-dasharray: 5;
+  animation: dashdraw 0.5s linear infinite;
+}
+
+.edgeLabel {
+  font-size: 10px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.edgeLabelBackground {
+  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
+  fill-opacity: 0.8;
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}

package/src/ui/extensions/flow/styles/modules/CustomNode.module.css

@@ -0,0 +1,41 @@
+/* CustomNode CSS Module */
+
+.node {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.nodeContent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.nodeIcon {
+  flex-shrink: 0;
+}
+
+.nodeText {
+  flex: 1;
+  min-width: 0;
+}
+
+.nodeLabel {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodeDescription {
+  font-size: 14px;
+  color: var(--xy-node-color, #6b7280);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/ui/extensions/flow/styles/modules/DragNDropSidebar.module.css

@@ -0,0 +1,73 @@
+/* Drag & Drop Sidebar CSS Module */
+
+.aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.description {
+  margin-bottom: 15px;
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.nodeList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.draggableNode {
+  cursor: grab;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  user-select: none;
+}
+
+.draggableNode:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.draggableNode:active {
+  cursor: grabbing;
+  transform: translateY(0);
+}
+
+.nodeContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.nodeIcon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nodeInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.nodeLabel {
+  font-weight: 500;
+  font-size: 14px;
+  color: #111827;
+  margin-bottom: 4px;
+}
+
+.nodeDescription {
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.4;
+}

package/src/ui/extensions/flow/styles/modules/FlowBackground.module.css

@@ -0,0 +1,65 @@
+/* FlowBackground CSS Module
+ * 
+ * Styles for FlowBackground component using React Flow CSS variables.
+ * All colors are controlled via CSS variables for theming support.
+ */
+
+.background {
+  pointer-events: none;
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  
+  /* Use CSS variable for background color with fallback */
+  background-color: var(
+    --xy-background-color-default,
+    transparent
+  );
+}
+
+.pattern {
+  width: 100%;
+  height: 100%;
+}
+
+/* Pattern variant styles - React Flow handles the actual rendering,
+ * but we can add additional styling if needed */
+.patternDots {
+  fill: var(
+    --xy-background-pattern-color-props,
+    var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default, #91919a))
+  );
+}
+
+.patternLines {
+  stroke: var(
+    --xy-background-pattern-color-props,
+    var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default, #e5e7eb))
+  );
+}
+
+.patternCross {
+  stroke: var(
+    --xy-background-pattern-color-props,
+    var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default, #e2e2e2))
+  );
+}
+
+/* Accessibility: Ensure background doesn't interfere with content */
+@media (prefers-reduced-motion: reduce) {
+  .background {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .patternDots,
+  .patternLines,
+  .patternCross {
+    opacity: 0.8;
+  }
+}

package/src/ui/extensions/flow/styles/modules/FlowControls.module.css

@@ -0,0 +1,74 @@
+/* FlowControls CSS Module */
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.controls.horizontal {
+  flex-direction: row;
+}
+
+.controlsButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 26px;
+  width: 26px;
+  padding: 4px;
+  border: none;
+  background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
+  border-bottom: 1px solid var(
+    --xy-controls-button-border-color-props,
+    var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
+  );
+  color: var(
+    --xy-controls-button-color-props,
+    var(--xy-controls-button-color, var(--xy-controls-button-color-default))
+  );
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+
+.controlsButton:hover {
+  background: var(
+    --xy-controls-button-background-color-hover-props,
+    var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
+  );
+  color: var(
+    --xy-controls-button-color-hover-props,
+    var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
+  );
+}
+
+.controlsButton:disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.controlsButton svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+  fill: currentColor;
+}
+
+.controlsButton:last-child {
+  border-bottom: none;
+}
+
+.controls.horizontal .controlsButton {
+  border-bottom: none;
+  border-right: 1px solid var(
+    --xy-controls-button-border-color-props,
+    var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
+  );
+}
+
+.controls.horizontal .controlsButton:last-child {
+  border-right: none;
+}

package/src/ui/extensions/flow/styles/modules/FlowHandle.module.css

@@ -0,0 +1,69 @@
+/* FlowHandle CSS Module */
+
+.handle {
+  position: absolute;
+  pointer-events: all;
+  min-width: 8px;
+  min-height: 8px;
+  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
+  border: 2px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
+  border-radius: 100%;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  z-index: 10;
+  cursor: crosshair;
+  /* React Flow automatically positions handles based on position prop */
+  /* Don't override positioning - let React Flow handle it */
+}
+
+.handle:hover {
+  transform: scale(1.25);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.3);
+  z-index: 11; /* Ensure hovered handle is above others */
+}
+
+.handle.connectingfrom {
+  pointer-events: all;
+}
+
+.handle.connectionindicator {
+  pointer-events: all;
+  cursor: crosshair;
+}
+
+/* Size variants - increased for better visibility */
+.handleSmall {
+  width: 8px;
+  height: 8px;
+}
+
+.handleMedium {
+  width: 10px;
+  height: 10px;
+}
+
+.handleLarge {
+  width: 12px;
+  height: 12px;
+}
+
+/* Variant colors */
+.handleDefault {
+  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
+}
+
+.handlePrimary {
+  background-color: var(--xy-handle-background-color, #6366f1);
+}
+
+.handleSuccess {
+  background-color: var(--xy-handle-background-color, #10b981);
+}
+
+.handleWarning {
+  background-color: var(--xy-handle-background-color, #f59e0b);
+}
+
+.handleError {
+  background-color: var(--xy-handle-background-color, #ef4444);
+}

package/src/ui/extensions/flow/styles/modules/FlowMinimap.module.css

@@ -0,0 +1,44 @@
+/* FlowMinimap CSS Module */
+
+.minimap {
+  background: var(
+    --xy-minimap-background-color-props,
+    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
+  );
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.minimapSvg {
+  display: block;
+}
+
+.minimapMask {
+  fill: var(
+    --xy-minimap-mask-background-color-props,
+    var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
+  );
+  stroke: var(
+    --xy-minimap-mask-stroke-color-props,
+    var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
+  );
+  stroke-width: var(
+    --xy-minimap-mask-stroke-width-props,
+    var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
+  );
+}
+
+.minimapNode {
+  fill: var(
+    --xy-minimap-node-background-color-props,
+    var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
+  );
+  stroke: var(
+    --xy-minimap-node-stroke-color-props,
+    var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
+  );
+  stroke-width: var(
+    --xy-minimap-node-stroke-width-props,
+    var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
+  );
+}

package/src/ui/extensions/flow/styles/modules/FlowNodeWrapper.module.css

@@ -0,0 +1,108 @@
+/* FlowNodeWrapper CSS Module */
+
+.wrapper {
+  position: relative;
+  border: none; /* Remove border from wrapper, Card handles it */
+  background-color: transparent; /* Transparent wrapper, Card provides background */
+  color: var(--xy-node-color, var(--xy-node-color-default));
+  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  z-index: 0; /* Ensure wrapper doesn't interfere with handles */
+}
+
+.wrapper.selectable {
+  cursor: pointer;
+}
+
+.wrapper.selectable:hover {
+  box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
+}
+
+.wrapper.selected {
+  box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
+  outline: none;
+}
+
+.wrapper.draggable {
+  cursor: grab;
+}
+
+.wrapper.draggable.dragging {
+  cursor: grabbing;
+}
+
+/* Size variants */
+.wrapperSmall {
+  padding: 8px;
+  font-size: 12px;
+}
+
+.wrapperMedium {
+  padding: 12px;
+  font-size: 14px;
+}
+
+.wrapperLarge {
+  padding: 16px;
+  font-size: 16px;
+}
+
+.wrapperExtraLarge {
+  padding: 20px;
+  font-size: 18px;
+}
+
+/* Child/Parent variants */
+.wrapperChild {
+  opacity: 0.9;
+  transform: scale(0.95);
+}
+
+.wrapperParent {
+  border-width: 2px;
+}
+
+/* Animation variants */
+.wrapperFade {
+  animation: fadeIn 0.3s ease-in;
+}
+
+.wrapperSlide {
+  animation: slideIn 0.3s ease-out;
+}
+
+.wrapperScale {
+  animation: scaleIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/ui/extensions/flow/types/playgroundTypes.ts

@@ -0,0 +1,95 @@
+/**
+ * Playground Types
+ * 
+ * Type definitions for the advanced Flow Playground
+ */
+
+import type { Node, Edge, Viewport, FitViewOptions } from '@xyflow/react';
+import type { FlowNodeData, FlowEdgeData, LayoutStrategyName, LayoutOptions } from '../organisms/FlowTypes';
+
+/**
+ * React Flow Configuration
+ * All configurable props for ReactFlow component
+ */
+export interface ReactFlowConfig {
+  // Appearance
+  fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
+  defaultViewport?: Viewport;
+  proOptions?: {
+    hideAttribution?: boolean;
+  };
+  nodeOrigin?: [number, number];
+  
+  // Interaction
+  panOnDrag?: boolean | number[];
+  panOnScroll?: boolean;
+  zoomOnScroll?: boolean;
+  zoomOnPinch?: boolean;
+  zoomOnDoubleClick?: boolean;
+  selectOnClick?: boolean;
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  elementsSelectable?: boolean;
+  
+  // Keyboard
+  deleteKeyCode?: string | null;
+  multiSelectKeyCode?: string | null;
+  selectionOnDrag?: boolean;
+  
+  // Zoom
+  minZoom?: number;
+  maxZoom?: number;
+  defaultZoom?: number;
+  
+  // Other
+  snapToGrid?: boolean;
+  snapGrid?: [number, number];
+  connectionRadius?: number;
+  preventScrolling?: boolean;
+  onlyRenderVisibleElements?: boolean;
+}
+
+/**
+ * Background Configuration
+ */
+export interface BackgroundConfig {
+  show: boolean;
+  variant: 'dots' | 'lines' | 'cross';
+  size: number;
+  bgColor?: string;
+  patternColor?: string;
+}
+
+/**
+ * Layout Configuration
+ */
+export interface LayoutConfig {
+  strategy: LayoutStrategyName | null;
+  options: LayoutOptions;
+}
+
+/**
+ * Complete Playground State
+ */
+export interface PlaygroundState {
+  nodes: Node<FlowNodeData>[];
+  edges: Edge<FlowEdgeData>[];
+  reactFlowConfig: ReactFlowConfig;
+  backgroundConfig: BackgroundConfig;
+  layoutConfig: LayoutConfig;
+  theme: 'light' | 'dark';
+}
+
+/**
+ * Prop Definition for ReactFlowPropsPanel
+ */
+export interface PropDefinition {
+  key: keyof ReactFlowConfig;
+  label: string;
+  description: string;
+  type: 'boolean' | 'number' | 'string' | 'select' | 'object';
+  defaultValue?: unknown;
+  options?: Array<{ value: string; label: string }>;
+  category: 'appearance' | 'interaction' | 'keyboard' | 'zoom' | 'other';
+}