visualizer/frontend/app/simulator/page.tsx at d9b28b40f5abcc457dd4297a1fea42c3b69f014d · gittuf/visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
"use client"

import { AnimatePresence, motion } from "framer-motion"
import { StoryModal } from "@/components/shared/story-modal"
import { StatusCard } from "@/components/shared/status-card"
import { useGittufSimulator } from "@/hooks/use-gittuf-simulator"
import { SimulatorHeader } from "@/components/features/simulator/simulator-header"
import { SimulatorControls } from "@/components/features/simulator/simulator-controls"
import { SimulatorGraph } from "@/components/features/simulator/simulator-graph"
import { SimulatorAnalysis } from "@/components/features/simulator/simulator-analysis"
import { SimulatorGlossary } from "@/components/features/simulator/simulator-glossary"
import { SimulatorConfigModal } from "@/components/features/simulator/simulator-config-modal"

export default function SimulatorPage() {
  const state = useGittufSimulator()
  const {
    darkMode,
    showStory,
    setShowStory,
    showSimulator,
    setShowSimulator,
    displayResult,
    expandedGraph,
    fixture,
  } = state

  return (
    <div
      data-testid="homepage-container"
      className={`min-h-screen transition-colors duration-300 ${
        darkMode ? "bg-gray-900 text-white" : "bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"
      }`}
    >
      {/* Story Modal */}
      <StoryModal
        data-testid="story-modal"
        isOpen={showStory}
        onClose={() => setShowStory(false)}
        fixture={fixture}
        onOpenSimulator={() => {
          setShowStory(false)
          setShowSimulator(true)
        }}
      />

      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <SimulatorHeader state={state} />

        {/* Main Simulator UI */}
        <AnimatePresence>
          {showSimulator && (
            <motion.div
              data-testid="simulator-content"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              className="space-y-6"
            >
              {/* Status Card */}
              <StatusCard
                data-testid="status-card"
                result={displayResult.result}
                reasons={displayResult.reasons}
              />

              {/* Main Content Area */}
              <div className={`grid gap-6 ${expandedGraph ? "grid-cols-1" : "grid-cols-1 lg:grid-cols-4"}`}>
                <SimulatorControls state={state} data-testid="simulator-controls"/>
                <SimulatorGraph state={state} data-testid="simulator-graph" />
              </div>

              {/* Detailed Results */}
              <SimulatorAnalysis state={state} />
            </motion.div>
          )}
        </AnimatePresence>

        {/* Footer Glossary */}
        <SimulatorGlossary data-testid="simulator-glossary" state={state} />
      </div>

      {/* Custom Config Dialog */}
      <SimulatorConfigModal state={state} />
    </div>
  )
}