@crashbytes/react-version-compare 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -7
- package/dist/cjs/index.js +308 -23
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +308 -23
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/styles.css +174 -0
- package/package.json +14 -4
package/dist/styles.css
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/* Compare.css */
|
|
2
|
+
.compare-side-by-side {
|
|
3
|
+
display: flex;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
5
|
+
'Open Sans', 'Helvetica Neue', sans-serif;
|
|
6
|
+
border: 1px solid #ddd;
|
|
7
|
+
border-radius: 6px;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.compare-inline {
|
|
13
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
14
|
+
'Open Sans', 'Helvetica Neue', sans-serif;
|
|
15
|
+
border: 1px solid #ddd;
|
|
16
|
+
border-radius: 6px;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
19
|
+
padding: 16px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.compare-panel {
|
|
23
|
+
flex: 1;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.compare-panel:first-child {
|
|
29
|
+
border-right: 1px solid #ddd;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.compare-header {
|
|
33
|
+
padding: 12px 16px;
|
|
34
|
+
background-color: #f6f8fa;
|
|
35
|
+
border-bottom: 1px solid #ddd;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
font-size: 14px;
|
|
38
|
+
color: #24292e;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.original-header {
|
|
42
|
+
background-color: #ffeef0;
|
|
43
|
+
color: #d73a49;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.modified-header {
|
|
47
|
+
background-color: #e6ffec;
|
|
48
|
+
color: #28a745;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.compare-content {
|
|
52
|
+
padding: 16px;
|
|
53
|
+
line-height: 1.5;
|
|
54
|
+
min-height: 100px;
|
|
55
|
+
flex: 1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.original-content {
|
|
59
|
+
background-color: #fefefe;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.modified-content {
|
|
63
|
+
background-color: #fefefe;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* String diff styling */
|
|
67
|
+
.diff-removed {
|
|
68
|
+
background-color: #ffeef0;
|
|
69
|
+
color: #d73a49;
|
|
70
|
+
text-decoration: line-through;
|
|
71
|
+
padding: 2px 4px;
|
|
72
|
+
border-radius: 3px;
|
|
73
|
+
margin: 0 1px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.diff-added {
|
|
77
|
+
background-color: #e6ffec;
|
|
78
|
+
color: #28a745;
|
|
79
|
+
padding: 2px 4px;
|
|
80
|
+
border-radius: 3px;
|
|
81
|
+
margin: 0 1px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.diff-unchanged {
|
|
85
|
+
/* No special styling for unchanged text */
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Array diff styling */
|
|
89
|
+
.diff-removed-line {
|
|
90
|
+
background-color: #ffeef0;
|
|
91
|
+
color: #d73a49;
|
|
92
|
+
padding: 4px 8px;
|
|
93
|
+
margin: 2px 0;
|
|
94
|
+
border-radius: 3px;
|
|
95
|
+
border-left: 3px solid #d73a49;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.diff-added-line {
|
|
99
|
+
background-color: #e6ffec;
|
|
100
|
+
color: #28a745;
|
|
101
|
+
padding: 4px 8px;
|
|
102
|
+
margin: 2px 0;
|
|
103
|
+
border-radius: 3px;
|
|
104
|
+
border-left: 3px solid #28a745;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.diff-unchanged-line {
|
|
108
|
+
padding: 4px 8px;
|
|
109
|
+
margin: 2px 0;
|
|
110
|
+
color: #24292e;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.compare-error {
|
|
114
|
+
padding: 16px;
|
|
115
|
+
background-color: #ffeef0;
|
|
116
|
+
border: 1px solid #d73a49;
|
|
117
|
+
border-radius: 6px;
|
|
118
|
+
color: #d73a49;
|
|
119
|
+
font-weight: 500;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Contentful document comparison styles */
|
|
123
|
+
.diff-structure-type {
|
|
124
|
+
font-weight: bold;
|
|
125
|
+
color: #4a5568;
|
|
126
|
+
font-size: 0.875rem;
|
|
127
|
+
text-transform: uppercase;
|
|
128
|
+
letter-spacing: 0.05em;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.diff-structure-level {
|
|
132
|
+
color: #718096;
|
|
133
|
+
font-size: 0.75rem;
|
|
134
|
+
margin-left: 0.25rem;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.diff-structure-content {
|
|
138
|
+
margin-left: 0.5rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.diff-removed-line .diff-structure-type {
|
|
142
|
+
color: #c53030;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.diff-added-line .diff-structure-type {
|
|
146
|
+
color: #38a169;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.diff-unchanged-line .diff-structure-type {
|
|
150
|
+
color: #4a5568;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Enhanced styles for Contentful content */
|
|
154
|
+
.compare-content .diff-structure-type {
|
|
155
|
+
display: inline-block;
|
|
156
|
+
min-width: 80px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.compare-content .diff-structure-level {
|
|
160
|
+
display: inline-block;
|
|
161
|
+
min-width: 20px;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Responsive design */
|
|
165
|
+
@media (max-width: 768px) {
|
|
166
|
+
.compare-side-by-side {
|
|
167
|
+
flex-direction: column;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.compare-panel:first-child {
|
|
171
|
+
border-right: none;
|
|
172
|
+
border-bottom: 1px solid #ddd;
|
|
173
|
+
}
|
|
174
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crashbytes/react-version-compare",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"README.md"
|
|
14
14
|
],
|
|
15
15
|
"scripts": {
|
|
16
|
-
"build": "rollup -c",
|
|
16
|
+
"build": "rollup -c && cp src/styles/Compare.css dist/styles.css",
|
|
17
17
|
"dev": "rollup -c -w",
|
|
18
18
|
"test": "jest",
|
|
19
19
|
"test:watch": "jest --watch",
|
|
@@ -22,7 +22,11 @@
|
|
|
22
22
|
"lint": "eslint src --ext .ts,.tsx",
|
|
23
23
|
"type-check": "tsc --noEmit",
|
|
24
24
|
"demo": "vite",
|
|
25
|
-
"build-demo": "vite build"
|
|
25
|
+
"build-demo": "vite build",
|
|
26
|
+
"storybook": "storybook dev -p 6006",
|
|
27
|
+
"build-storybook": "storybook build",
|
|
28
|
+
"storybook:build": "storybook build",
|
|
29
|
+
"storybook:deploy": "storybook build && gh-pages -d storybook-static"
|
|
26
30
|
},
|
|
27
31
|
"keywords": [
|
|
28
32
|
"react",
|
|
@@ -51,6 +55,7 @@
|
|
|
51
55
|
"react-dom": ">=16.8.0"
|
|
52
56
|
},
|
|
53
57
|
"dependencies": {
|
|
58
|
+
"@contentful/rich-text-types": "^17.0.1",
|
|
54
59
|
"diff": "^8.0.1",
|
|
55
60
|
"tslib": "^2.8.1"
|
|
56
61
|
},
|
|
@@ -63,6 +68,9 @@
|
|
|
63
68
|
"@rollup/plugin-commonjs": "^28.0.3",
|
|
64
69
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
65
70
|
"@rollup/plugin-typescript": "^12.1.2",
|
|
71
|
+
"@storybook/addon-docs": "^9.0.15",
|
|
72
|
+
"@storybook/addon-onboarding": "^9.0.15",
|
|
73
|
+
"@storybook/react-vite": "^9.0.15",
|
|
66
74
|
"@testing-library/jest-dom": "^6.1.0",
|
|
67
75
|
"@testing-library/react": "^14.0.0",
|
|
68
76
|
"@testing-library/user-event": "^14.5.0",
|
|
@@ -71,6 +79,7 @@
|
|
|
71
79
|
"@types/react-dom": "^18.2.0",
|
|
72
80
|
"@vitejs/plugin-react": "^4.6.0",
|
|
73
81
|
"babel-jest": "^29.7.0",
|
|
82
|
+
"gh-pages": "^6.3.0",
|
|
74
83
|
"identity-obj-proxy": "^3.0.0",
|
|
75
84
|
"jest": "^29.7.0",
|
|
76
85
|
"jest-environment-jsdom": "^29.7.0",
|
|
@@ -80,7 +89,8 @@
|
|
|
80
89
|
"rollup-plugin-dts": "^6.2.1",
|
|
81
90
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
82
91
|
"rollup-plugin-postcss": "^4.0.2",
|
|
92
|
+
"storybook": "^9.0.15",
|
|
83
93
|
"typescript": "^5.8.3",
|
|
84
94
|
"vite": "^7.0.2"
|
|
85
95
|
}
|
|
86
|
-
}
|
|
96
|
+
}
|