[x] create StatDiffRow -> shows two StatDiffItems next to each other w/ title
[x] create StatDiff -> in a segment, iterates over each column and shows a StatDiffRow for each column
[x] create ChangeReport! -> following styling from the sketch file
One MAJOR strange thing I did during this PR: almost all the styling in INLINE. I figure we are going to be porting this to cloud very soon. Rather than hiding the new content in a className, this will make it super easy to convert to tailwind so we can port it to cloud very easily using bit, OR in the worst case we can just copy and paste the code into cloud as a short-term solution if we are super pressed for time for some reason. This will make both the best case and worst case porting easier.
I tried not to let my back-and-forth over proper naming for each component get in the way to speed when working on this. It is ripe for a refactor and some renames once we get a better feel if we want to add features/adjust anything.
react-diff-viewerStringDiffcomponent that opens and collapsesSegmentcomponentanimationOnflag toSegment, that will turn off the slide in/slide out animation, so that the segment can display at the Diff's natural heightLabeledStats-> adddeltaoption to theLabeledStatscomponent to display optional delta value underneath statsStatDiffItem-> shows row ofLabeledStatsw/StatsChartunderneath, w/ string, number, boolean optionsStatDiffRow-> shows twoStatDiffItems next to each other w/ titleStatDiff-> in a segment, iterates over each column and shows aStatDiffRowfor each columnChangeReport! -> following styling from the sketch fileOne MAJOR strange thing I did during this PR: almost all the styling in INLINE. I figure we are going to be porting this to cloud very soon. Rather than hiding the new content in a
className, this will make it super easy to convert to tailwind so we can port it to cloud very easily using bit, OR in the worst case we can just copy and paste the code into cloud as a short-term solution if we are super pressed for time for some reason. This will make both the best case and worst case porting easier.I tried not to let my back-and-forth over proper naming for each component get in the way to speed when working on this. It is ripe for a refactor and some renames once we get a better feel if we want to add features/adjust anything.