OpenDSA - Technology Stack

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
  images: {
    remotePatterns: [
      { hostname: 'avatars.githubusercontent.com' },
    ],
  },
  transpilePackages: [
    '@opendsa/ui',
    '@opendsa/visualizers',
    '@opendsa/algorithms',
  ],
};
 
export default nextConfig;

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true,
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2022",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"],
      "@opendsa/ui": ["../../packages/ui/src"],
      "@opendsa/algorithms": ["../../packages/algorithms/src"],
      "@opendsa/visualizers": ["../../packages/visualizers/src"],
      "@opendsa/types": ["../../packages/types/src"],
      "@opendsa/utils": ["../../packages/utils/src"]
    }
  }
}

// turbo.json
{
  "$schema": "https://turborepo.dev/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "lint": {},
    "test": {
      "dependsOn": ["^build"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "type-check": {
      "dependsOn": ["^type-check"]
    }
  }
}

// packages/ui/src/components/button.tsx
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../lib/utils";
 
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);
 
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}
 
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";
 
export { Button, buttonVariants };

// tailwind.config.ts
import type { Config } from "tailwindcss";
 
const config: Config = {
  darkMode: "class",
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "../../packages/ui/src/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        // Algorithm-specific colors
        compare: "hsl(var(--compare))",
        swap: "hsl(var(--swap))",
        sorted: "hsl(var(--sorted))",
        pivot: "hsl(var(--pivot))",
        visited: "hsl(var(--visited))",
        current: "hsl(var(--current))",
        found: "hsl(var(--found))",
      },
      animation: {
        "slide-in": "slideIn 0.3s ease-out",
        "fade-in": "fadeIn 0.2s ease-out",
        "scale-in": "scaleIn 0.2s ease-out",
        "bar-swap": "barSwap 0.3s ease-in-out",
      },
      keyframes: {
        slideIn: {
          from: { transform: "translateY(-10px)", opacity: "0" },
          to: { transform: "translateY(0)", opacity: "1" },
        },
        fadeIn: {
          from: { opacity: "0" },
          to: { opacity: "1" },
        },
        scaleIn: {
          from: { transform: "scale(0.95)", opacity: "0" },
          to: { transform: "scale(1)", opacity: "1" },
        },
        barSwap: {
          "0%": { transform: "translateX(0)" },
          "50%": { transform: "translateY(-10px)" },
          "100%": { transform: "translateX(var(--swap-distance))" },
        },
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};
 
export default config;

// Page transitions
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3 }}
>
  {children}
</motion.div>
 
// Control panel animations
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Play
</motion.button>
 
// Sidebar toggle
<motion.aside
  initial={false}
  animate={{ width: isOpen ? 280 : 0 }}
  transition={{ type: "spring", stiffness: 300, damping: 30 }}
>
  {/* Sidebar content */}
</motion.aside>

// Graph visualization with D3
import * as d3 from 'd3';
 
function renderGraph(container: HTMLElement, nodes: Node[], edges: Edge[]) {
  const svg = d3.select(container)
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%');
 
  const simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(edges).id(d => d.id))
    .force('charge', d3.forceManyBody().strength(-300))
    .force('center', d3.forceCenter(width / 2, height / 2));
 
  // Render edges
  const link = svg.selectAll('.link')
    .data(edges)
    .join('line')
    .attr('class', 'link')
    .attr('stroke', '#999');
 
  // Render nodes
  const node = svg.selectAll('.node')
    .data(nodes)
    .join('circle')
    .attr('class', 'node')
    .attr('r', 20)
    .attr('fill', d => d.visited ? 'var(--visited)' : 'var(--default)');
 
  // Update positions on tick
  simulation.on('tick', () => {
    link
      .attr('x1', d => d.source.x)
      .attr('y1', d => d.source.y)
      .attr('x2', d => d.target.x)
      .attr('y2', d => d.target.y);
 
    node
      .attr('cx', d => d.x)
      .attr('cy', d => d.y);
  });
}

// High-performance array visualization
function renderArray(
  canvas: HTMLCanvasElement,
  array: number[],
  highlights: Map<number, string>
) {
  const ctx = canvas.getContext('2d')!;
  const { width, height } = canvas;
  const barWidth = width / array.length;
  const maxValue = Math.max(...array);
 
  ctx.clearRect(0, 0, width, height);
 
  array.forEach((value, index) => {
    const barHeight = (value / maxValue) * (height - 20);
    const x = index * barWidth;
    const y = height - barHeight;
 
    // Set color based on state
    ctx.fillStyle = highlights.get(index) || 'hsl(var(--primary))';
    ctx.fillRect(x + 1, y, barWidth - 2, barHeight);
 
    // Draw value label for small arrays
    if (array.length <= 30) {
      ctx.fillStyle = 'hsl(var(--foreground))';
      ctx.font = '12px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText(value.toString(), x + barWidth / 2, y - 5);
    }
  });
}

// Visualization store
interface VisualizerStore {
  // State
  visualizerId: string | null;
  data: unknown;
  steps: AnimationStep[];
  currentStep: number;
  isPlaying: boolean;
  speed: number;
 
  // Actions
  setVisualizer: (id: string) => void;
  setData: (data: unknown) => void;
  generateSteps: () => void;
  play: () => void;
  pause: () => void;
  reset: () => void;
  stepForward: () => void;
  stepBackward: () => void;
  setSpeed: (speed: number) => void;
}
 
// Preferences store (persisted)
interface PreferencesStore {
  theme: 'light' | 'dark' | 'system';
  editorVisible: boolean;
  sidebarOpen: boolean;
  keyboardShortcutsEnabled: boolean;
 
  setTheme: (theme: 'light' | 'dark' | 'system') => void;
  toggleEditor: () => void;
  toggleSidebar: () => void;
  toggleKeyboardShortcuts: () => void;
}

// Monaco editor setup
import { Editor, OnMount } from '@monaco-editor/react';
 
interface CodeEditorProps {
  code: string;
  language: string;
  highlightLines?: number[];
  readOnly?: boolean;
  onChange?: (value: string) => void;
}
 
export function CodeEditor({
  code,
  language,
  highlightLines = [],
  readOnly = false,
  onChange,
}: CodeEditorProps) {
  const handleMount: OnMount = (editor, monaco) => {
    // Configure editor
    editor.updateOptions({
      minimap: { enabled: false },
      lineNumbers: 'on',
      scrollBeyondLastLine: false,
      readOnly,
      fontSize: 14,
    });
 
    // Highlight lines
    if (highlightLines.length > 0) {
      editor.deltaDecorations([], highlightLines.map(line => ({
        range: new monaco.Range(line, 1, line, 1),
        options: {
          isWholeLine: true,
          className: 'highlighted-line',
          glyphMarginClassName: 'highlighted-glyph',
        },
      })));
    }
  };
 
  return (
    <Editor
      height="100%"
      language={language}
      value={code}
      onMount={handleMount}
      onChange={(value) => onChange?.(value ?? '')}
      theme="vs-dark"
    />
  );
}

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./test/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: ['node_modules/', 'test/'],
    },
  },
});

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// eslint.config.js
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
 
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  {
    plugins: {
      react,
      'react-hooks': reactHooks,
    },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  }
);