feat(LindDiff): initial line diff component & storybook story

app/components/compare/LineDiff.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+
+interface LineDiffProps {
+ data: any
+}
+
+const LineDiff: React.FunctionComponent<LineDiffProps> = (props: LineDiffProps) => {
+ const { data } = props
+
+ let leftCount: number, rightCount: number
+ return (
+ <div className='line_diff'>
+ <div className='header'>
+ <b>{data.meta['---']}</b>
+ <div style={{ 'float': 'right' }}>
+ <ChangeStat added={data.meta.added} removed={data.meta.removed} />
+ </div>
+ </div>
+ <table className='content'>
+ {data.patch.map((p, i) => {
+ if (Array.isArray(p[0])) {
+ leftCount = p[0][0][0]
+ rightCount = p[0][1][0]
+ return (
+ <tr key={i}>
+ <td colSpan="3" className='truncated'>
+ <i>Additional Content Hidden</i>
+ </td>
+ </tr>
+ )
+ }
+
+ let changeType
+ if (p[0] === '-') {
+ leftCount++
+ changeType = 'rem'
+ } else if (p[0] === '+') {
+ rightCount++
+ changeType = 'add'
+ } else {
+ leftCount++
+ rightCount++
+ changeType = 'ctx'
+ }
+
+ return (<tr key={i} className={changeType}>
+ <td className="line_count">{ changeType !== 'add' && leftCount}</td>
+ <td className="line_count">{ changeType !== 'rem' && rightCount}</td>
+ <td className="text">{p[1]}</td>
+ </tr>)
+ })}
+ </table>
+ </div>
+ )
+}
+
+interface ChangeStatProps {
+ added: number
+ removed: number
+}
+
+const ChangeStat: React.FunctionComponent<ChangeStatProps> = (props: ChangeStatProps) => {
+ const { added, removed } = props
+ return (
+ <span className="change_stat">
+ <b className="added">+{added}</b>
+ <b className="removed">-{removed}</b>
+ </span>
+ )
+}
+
+export default LineDiff

app/scss/_lineDiff.scss

@@ -0,0 +1,47 @@
+
+
+.line_diff {
+ min-width: 600px;
+ background: white;
+ box-shadow: 0 0 4px #00000015;
+ margin: 20px auto;
+
+ .header {
+ width: 100%;
+ height: 50px;
+ padding: 15px 10px 10px 10px;
+ border-bottom: 1px solid #ddd;
+ }
+
+ .add {
+ background: #86FDA250;
+ }
+ .rem {
+ background: #FB9EA850;
+ }
+
+ .line_count {
+ width: 50px;
+ text-align: right;
+ }
+
+ .text {
+ padding-left: 20px;
+ }
+
+ .truncated {
+ text-align: center;
+ width: 100%;
+ }
+
+ table {
+ font-family: 'Courier New', Courier, monospace;
+ tr {
+ height: 20px;
+ }
+ }
+}
+
+.change_stat {
+
+}

app/scss/style.scss

@@ -33,6 +33,7 @@
 @import "body";
 @import "metadata";
 @import "readme";
+@import "lineDiff";
 @import "stats";
 
 @import '~easymde/dist/easymde.min.css';

stories/2-LineDiff.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import LineDiff from '../app/components/compare/LineDiff'
+
+export default {
+ title: 'Line Diff'
+}
+
+const wrap = (component) => {
+ return (
+ <div style={{ maxWidth: 650, margin: '0 auto' }}>
+ {component}
+ </div>
+ )
+}
+
+const patchReadmeThreeRemoveOneAdd = {
+ "meta" : {
+ "---": "a/readme.md",
+ "+++": "b/readme.md",
+ "added": 1,
+ "removed": 3
+ },
+ "patch": [
+ [[ [1,5], [1,5] ], "# World Bank Population"],
+ [" ", "### Only Existing Territorial Regions"],
+ [" ", ""],
+ ["-", "The world Bank dataset of population is just silly!"],
+ ["-", "If you add up the “population” column, you don’t get the expected"],
+ ["-", "7 billion number, because they include “significant regions”."],
+ ["+", "This is a dataset of the World Bank Population without Significant Regions."],
+ [" ", "The most important characteristic of this dataset is totalling the “popluation”"],
+ [" ", "column will equal the total estimated population for a given year."],
+ [" ", "Other than that, the datasets are exactly the same."],
+ ]
+}
+export const threeRemoveOneAdd = () => wrap(<LineDiff data={patchReadmeThreeRemoveOneAdd} />)
+
+threeRemoveOneAdd.story = {
+ name: 'Transform: Basic Starlark',
+ parameters: {
+ notes: `short code viewer`
+ }
+}